Standalone app

.github/workflows/pages.yml

@@ -0,0 +1,28 @@
+name: Build and Deploy
+on:
+  push:
+    branches:
+      - master
+  workflow_dispatch:
+permissions:
+  contents: write
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/checkout@v4.2.2
+        with:
+          persist-credentials: false
+
+      - name: Install and Build 🔧
+        run: |
+          npm install
+          npm run ghpages
+      - name: Deploy 🚀
+        uses: JamesIves/github-pages-deploy-action@v4.7.2
+        with:
+          TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          BRANCH: gh-pages
+          FOLDER: gh_pages
+          CLEAN: true

.gitignore

@@ -7,6 +7,7 @@ demo/omero_figure/
 demo/figure.js
 demo/index.html
 node_modules/
+gh_pages/
 _site
 dist
 omero_figure.egg-info

deploy_ghpages.sh

@@ -0,0 +1,7 @@
+
+# To ensure that the gh-pages job doesn't try to build a jekyll site
+# (and ignore files in /assets), we create a .nojekyll file in the
+# ./gh_pages/ output dir. The pages.yml workflow copies all of that dir
+#  to the gh-pages branch.
+
+touch gh_pages/.nojekyll

omero_figure/views.py

@@ -117,6 +117,8 @@ def index(request, file_id=None, conn=None, **kwargs):
     # Load the template html and replace OMEROWEB_INDEX
     template = loader.get_template("omero_figure/index.html")
     html = template.render({}, request)
+    html = html.replace('const APP_SERVED_BY_OMERO = false;',
+                        'const APP_SERVED_BY_OMERO = true;')
     omeroweb_index = reverse("index")
     figure_index = reverse("figure_index")
     ping_url = reverse("keepalive_ping")
@@ -154,8 +156,10 @@ def index(request, file_id=None, conn=None, **kwargs):
 
     # update links to static files
     static_dir = static.static('omero_figure/')
-    html = html.replace('href="/', 'href="%s' % static_dir)
-    html = html.replace('src="/', 'src="%s' % static_dir)
+    html = html.replace('href="/assets',
+                        'href="%sassets' % static_dir)
+    html = html.replace('src="/assets',
+                        'src="%sassets' % static_dir)
     html = html.replace('const STATIC_DIR = "";',
                         'const STATIC_DIR = "%s";' % static_dir[0:-1])
 

package.json

@@ -5,8 +5,10 @@
   "description": "OMERO figure creation app",
   "main": "index.js",
   "scripts": {
+    "dev": "vite",
     "start": "vite",
     "build": "vite build --emptyOutDir && ./deploy_build.sh",
+    "ghpages": "vite build --outDir ../gh_pages && ./deploy_ghpages.sh",
     "test": "echo \"Error: no test specified\" && exit 1",
     "watch": "watch 'npm run build' ./src"
   },

src/css/figure.css

@@ -1059,7 +1059,7 @@
         text-align: left;
     }
 
-    .lutOption span {
+    .lutOption span, .lutOption img {
         width: 85px;
         display: inline-block;
     }
@@ -1074,6 +1074,7 @@
         /* NB: when updating png, consider using different name to avoid cache */
         background-size: 100% var(--pngHeight);
         background-image: var(--lutPng);
+        background-position: var(--bgPos);
         background-repeat: no-repeat;
         image-rendering: pixelated;  /* Universal support since 2021 */
     }

src/index.html

@@ -5,9 +5,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>OMERO.figure</title>
     <script>
+      window.BASE_URL = "";
       // For dev, use this server to load/save figures (needs CORS enabled)
       const dev_omeroweb_url = "http://localhost:4080/";
       // These are updated by views.py when serving this page...
+      // Flag for knowing if app is served from OMERO (or standalone)
+      const APP_SERVED_BY_OMERO = false;
       const BASE_OMEROWEB_URL = dev_omeroweb_url;
       const EXPORT_ENABLED = false;
       const SCRIPT_VERSION = "";
@@ -715,12 +718,15 @@ <h5 class="modal-title">Add Images</h5>
           </div>
           <form class="addImagesForm" role="form">
             <div class="modal-body">
-              <p>
+              <p class="omero_only_element">
                 Add images to the figure by entering their IDs, separated by
                 commas.<br />
                 Hint: You can also select images in the webclient, click the
                 link in right panel, copy the URL and paste it here:
               </p>
+              <p class="standalone_only_element">
+                Add OME-Zarr images to the figure by entering their full URL:
+              </p>
               <div
                 class="form-group"
                 style="margin-top: 15px; margin-bottom: 0px"
@@ -1017,7 +1023,7 @@ <h4>Legend</h4>
         </div>
       </div>
     </div>
-    <!-- File Open Modal -->
+    <!-- OMERO File Open Modal -->
     <div
       class="modal"
       id="openFigureModal"
@@ -1147,6 +1153,71 @@ <h5 class="modal-title">Open</h5>
         </div>
       </div>
     </div>
+    <!-- Open local File or http://url_to/figure.json -->
+    <div
+      class="modal"
+      id="openLocalFileModal"
+      tabindex="-1"
+      role="dialog"
+      aria-hidden="true"
+    >
+      <div class="modal-dialog">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title">Open File</h5>
+            <button
+              type="button"
+              class="btn-close"
+              data-bs-dismiss="modal"
+              aria-label="Close"
+            ></button>
+          </div>
+          <form class="openLocalFileForm" role="form">
+            <div class="modal-body">
+              <p>
+                Enter a URL to an OMERO.figure JSON file...
+              </p>
+              <div
+                class="form-group"
+                style="margin-top: 15px; margin-bottom: 0px"
+              >
+                <input
+                  type="text"
+                  class="form-control figureFileUrl"
+                  placeholder="URL to a figure.json file"
+                />
+              </div>
+              <div
+                class="form-group"
+                style="margin-top: 15px; margin-bottom: 0px"
+              >
+                <p>
+                  ...or select a local file to open:
+                </p>
+                <input type="file" />
+              </div>
+            </div>
+            <div class="modal-footer">
+              <button
+                type="button"
+                class="btn btn-default"
+                data-bs-dismiss="modal"
+              >
+                Close
+              </button>
+              <button
+                type="submit"
+                class="btn btn-primary"
+                data-bs-dismiss="modal"
+                disabled="disabled"
+              >
+                Open
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
     <!-- Labels from Map Annotations Modal -->
     <div
       class="modal"
@@ -1266,10 +1337,11 @@ <h5>Example Label</h5>
                 <li class="import_json">
                   <a class="dropdown-item" href="#">Import from JSON...</a>
                 </li>
-                <li class="delete_figure">
+                <!-- omero_only_element will be hidden if not APP_SERVED_BY_OMERO -->
+                <li class="delete_figure omero_only_element">
                   <a class="dropdown-item" href="#">Delete</a>
                 </li>
-                <li class="chgrp_figure">
+                <li class="chgrp_figure omero_only_element">
                   <a class="dropdown-item" href="#">Move Figure to Group...</a>
                 </li>
                 <li class="paper_setup">

src/js/main.js

@@ -22,6 +22,10 @@ const figureModel = new FigureModel();
 // make this global so we can access it from the browser console
 window.figureModel = figureModel;
 
+// This will be '/' unless deployed from gh-pages, when it will be '/omero-figure/'
+console.log("import.meta.env", import.meta.env)
+window.BASE_URL = import.meta.env.BASE_URL.slice(1);  // remove leading slash
+console.log("BASE_URL", BASE_URL);
 const RELEASE_VERSION = import.meta.env.VITE_VERSION;
 console.log("RELEASE_VERSION", RELEASE_VERSION);
 document.getElementById("release_version").innerHTML = RELEASE_VERSION;
@@ -73,17 +77,32 @@ var undoManager = new UndoManager({ figureModel: figureModel }),
 // Finally, start listening for changes to panels
 undoManager.listenToCollection(figureModel.panels);
 
+// All routes based on BASE_URL, which is either '/' or '/omero-figure/' depending on deployment
+let routes = {};
+routes[`${BASE_URL}(/)`] = "index";
+routes[`${BASE_URL}new(/)`] = "newFigure";
+routes[`${BASE_URL}recover(/)`] = "recoverFigure";
+routes[`${BASE_URL}open(/)`] = "openFigure";
+routes[`${BASE_URL}file/:id(/)`] = "loadFigure";
+
 var FigureRouter = Backbone.Router.extend({
-  routes: {
-    "": "index",
-    "new(/)": "newFigure",
-    "recover(/)": "recoverFigure",
-    "open(/)": "openFigure",
-    "file/:id(/)": "loadFigure",
-  },
+  routes: routes,
 
   index: function () {
     console.log("index");
+    // Check for ?file=http://...json
+    // TODO: do we ONLY want to do this on index?
+    if (window.location.search.length > 1) {
+      const searchParams = new URLSearchParams(window.location.search.substring(1));
+      if (searchParams.has("file")) {
+        const file = searchParams.get("file");
+        var cb = function () {
+          figureModel.load_from_url(file);
+        };
+        figureModel.checkSaveAndClear(cb);
+        return;
+      }
+    }
     hideModals();
     var cb = () => {
       showModal("welcomeModal");
@@ -161,7 +180,8 @@ $(document).on("click", "a", function (ev) {
   // check that links are 'internal' to this app
   if (href.substring(0, BASE_WEBFIGURE_URL.length) === BASE_WEBFIGURE_URL) {
     ev.preventDefault();
-    href = href.replace(BASE_WEBFIGURE_URL, "/");
+    let baseUrl = APP_SERVED_BY_OMERO ? "/" : "/omero-figure/";
+    href = href.replace(BASE_WEBFIGURE_URL, baseUrl);
     app.navigate(href, { trigger: true });
   }
 });

src/js/models/figure_model.js

@@ -6,6 +6,7 @@
     import {PanelList, Panel} from "./panel_model";
     import { recoverFigureFromStorage,
         clearFigureFromStorage,
+        downloadAsFile,
         figureConfirmDialog,
         getJsonWithCredentials,
         saveFigureToStorage,
@@ -373,6 +374,18 @@
             return figureJSON;
         },
 
+        load_from_url: function(url) {
+            // load content from a URL
+            console.log("load_from_url...", url);
+            $.getJSON(url, function(data){
+                this.load_from_JSON(data);
+                this.set('unsaved', false);
+            }.bind(this))
+            .fail(function(){
+                alert("Failed to load figure from URL: " + url);
+            });
+        },
+
         figure_fromJSON: function(data) {
             var parsed = JSON.parse(data);
             delete parsed.fileId;
@@ -396,6 +409,18 @@
             }
         },
 
+        save_to_download: function(options) {
+            // Downloads the FigureJSON as a file
+            let figureJSON = this.figure_toJSON();
+            if (options.figureName) {
+                figureJSON.figureName = options.figureName;
+            }
+            let fileName = figureJSON.figureName || "figure";
+            let jsonText = JSON.stringify(this.figure_toJSON(), null, 2);
+            downloadAsFile(jsonText, "application/json", fileName + ".json");
+            this.set({unsaved: false});
+        },
+
         save_to_OMERO: function(options) {
 
             var self = this,

src/js/views/channel_slider_view.js

@@ -401,10 +401,17 @@ var ChannelSliderView = Backbone.View.extend({
                 var active = actives.reduce(allEqualFn, actives[0]);
                 var style = {'background-position': '0 0'}
                 var lutBgPos = FigureLutPicker.getLutBackgroundPosition(color);
-                if (color.endsWith('.lut')) {
-                    style['background-position'] = lutBgPos;
+                var lutPng = FigureLutPicker.getLutPng(color);
+                console.log("lutPng", lutPng);
+                var lutBgCss = '--bgPos: 0 0;';
+                if (color.endsWith('.lut') && lutPng) {
+                    // lutPng means we have LUT from ome-zarr.js. Apply without offset
+                    lutBgCss = `--bgPos: 0 0; --lutPng: url('${lutPng}'); --pngHeight: 100%;`;
                     color = "ccc";
-                } else if (color.toUpperCase() === "FFFFFF") {
+                } else {
+                    lutBgCss = `--bgPos: ${lutBgPos};`
+                }
+                if (color.toUpperCase() === "FFFFFF") {
                     color = "ccc";  // white slider would be invisible
                 }
                 if (color == "FFFFFF") color = "ccc";  // white slider would be invisible
@@ -423,7 +430,7 @@ var ChannelSliderView = Backbone.View.extend({
                                                 'max': max,
                                                 'step': (max - min > SLIDER_INCR_CUTOFF) ? 1 : 0.01,
                                                 'active': active,
-                                                'lutBgPos': lutBgPos,
+                                                'lutBgCss': lutBgCss,
                                                 'reverse': reverse,
                                                 'color': color,
                                                 'isDark': this.isDark(color)