michaelpb / michaelpb/omnic

EPIC: Brand new omnic-viewer.js

Open
#10 0 comments 0 reactions 0 assignees View on GitHub
enhancement ViewerJS
Dominant language
Python
Stars
16
Forks
1
PR merge metrics
No merged PRs in 30d

Description

JS / viewer infrastructure should be its own project

- Within omnic (python pkg) there should be only refresh-thumbs.js, and a VERY LIGHTWEIGHT non-built viewer infrastructure hook that can hook into very non-opinionated global `omnic-viewer` callbacks if they exist

- Using normal JS build system we build out a `omnic-viewer` npm package

- Omnic could have a built-in converter that installs and serves [this,](url) but thats optional

Rethink infrastructure, make less rigid / assuming. Decouple JS dependencies from omnic. (very few people will want to trust it as a JS build system).

omnic-viewer.js - new NPM package that is used in the normal way, build using modern React etc

------------------

# MISC STUFF THAT SHOULD BE BROKEN OFF INTO SEPARATE TICKETS LATER

-------
```
74 async def all_js(request):
75 # TODO:
76 # 1. Check if built cache is ready, if it is, include cached JS in the mix
77 # 2. Include reload-viewers if not
78 # 3. Include reload-thumb
79 # 4. Send back cache headers such that only if everything is working it
80 # gets a "perma" cache header set
81 return templates.render(request, 'reload-viewers.js', {})
```
----

JS / viewer infrastructure

- [ ] Further improve dev environ
- [ ] Add in 'freshen' concept
- [ ] Make conversion path 'freshen installed_node_package' -> 'min.js'
- Likely related to Mutable concept (?)

----

- [ ] Create omnic base viewer
- [X] Move most reload-viewers.js into base viewer.js
- [ ] Inline (thumbnail gets replaced)
- [X] Modal (goes into "gallery" lightbox mode)
- [ ] StaticHTML (Viewer contains a static 'prepareHTML' function,
that outputs HTML --- possibly with injected styles, etc)

## JS viewer system
-[ ] First API call looks for all `img[omnic-viewer]` and
`img[omnic-thumb]` tags and sends 1 AJAX call to check if they are all
loaded.
- [ ] If not, it will add a spinner to all thumbnails of them, and
try again in X seconds (V2: could keep running average of every
conversion path, and try again in `avg * 1.5` or something)
- [ ] If loaded, it will check if omnic-viewer, then add a
hoverable (>) button in the center, and an onclick event which
will activate the appropriate viewer
- [X] If possible / cheap computationally, avoid API calls by
checking if the image is a 1x1 placeholder image (?)
- [X] New Viewer system: Each type can have a Viewer, that serves up JS
that mounts a viewer on a particular element (given a URL). E.g. the
STL, OBJ etc viewer, when clicked on, will enable JSC3D.
- [X] All registered viewers get served up on page load in one
minified JS bundle
- [X] They only get "activated" as needed
- [X] Embed in page components
- ``
- The JS looks for all tags with `[omnic-viewer]` and adds a click
event that will embed the correct type of viewer for that element

- [ ] Viewer improvements
- [ ] Further improve dev environ
- [ ] Add in 'freshen' concept
- [ ] Make conversion path 'freshen installed_node_package' -> 'min.js'
- Likely related to Mutable concept (?)
- [ ] Create omnic base viewer
- [X] Move most reload-viewers.js into base viewer.js
- [ ] Inline (thumbnail gets replaced)
- [X] Modal (goes into "gallery" lightbox mode)
- [ ] StaticHTML (Viewer contains a static 'prepareHTML' function,
that outputs HTML --- possibly with injected styles, etc)
- [X] Add in proof-of-concept image viewer
- [X] Extends Modal, so on click modal appears with full-res image
- [ ] If viewer infrastructure is as robust as I intend, add a bunch more
viewers:
- [ ] Video player
- [ ] Audio player
- [X] PDF
- [ ] SVG pan
- [ ] Hi-res pannable image
- [ ] 3D with JSC3D
- [ ] HTML inline embed viewers
- [ ] Base viewer that takes a

(not img) and inserts
content
- [ ] Markdown
- [ ] Syntax highlighting
- [ ] Git tree repo
- [ ] Various data viz stuff (CSV -> graph)
- [ ] Molecule (2D)
- [ ] Molecule (3D)
- [ ] Add testing utilities in JS, using node (jasmine? or something more
trendy?)
- [ ] Ambitious viewer ideas:
- [ ] One viewer be draggable maps. Render tiles from BytesResource service
- [ ] Git tree viewer -- essentially embeddable github -- with ALL THE
OTHER viewer types hooked in
- [ ] This would make a stupendous demo on the omnic site
- [ ] Types with multiple viewers (e.g. CSV) can be swapped with a
tab interface

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by reading the existing reload-viewers.js flow and the all_js entry point described in the issue, then compare them with the completed and unchecked viewer-system tasks. The issue spans package boundaries, build tooling, viewer APIs, development workflow, and multiple future viewers, so a contributor would need a narrower ticket and explicit acceptance criteria before starting.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, node.js, python, react
Domain
build-system, frontend, tooling, web-dev
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
18/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.