Merge pull request #337 from NeurodataWithoutBorders/standalone-preview

Standalone Preview (responsive to file association)

package.json

@@ -57,7 +57,7 @@
       {
         "ext": "nwb",
         "name": "NWB File",
-        "role": "Editor"
+        "role": "Viewer"
       }
     ],
     "files": [

pyflask/app.py

@@ -2,15 +2,18 @@
 import sys
 import json
 import multiprocessing
+from os.path import sep
 from logging import Formatter, DEBUG
 from logging.handlers import RotatingFileHandler
 from pathlib import Path
+from urllib.parse import unquote
+
 
 # https://stackoverflow.com/questions/32672596/pyinstaller-loads-script-multiple-times#comment103216434_32677108
 multiprocessing.freeze_support()
 
 
-from flask import Flask, request, send_from_directory
+from flask import Flask, request, send_from_directory, send_file
 from flask_cors import CORS
 from flask_restx import Api, Resource
 
@@ -52,6 +55,29 @@
 api.add_namespace(neuroconv_api)
 api.init_app(app)
 
+registered = {}
+
+
+@app.route("/files")
+def get_all_files():
+    return list(registered.keys())
+
+
+@app.route("/files/<path:path>", methods=["GET", "POST"])
+def handle_file_request(path):
+    if request.method == "GET":
+        if registered[path]:
+            return send_file(unquote(path))
+        else:
+            app.abort(404, "Resource is not accessible.")
+
+    else:
+        if ".nwb" in path:
+            registered[path] = True
+            return request.base_url
+        else:
+            app.abort(400, str("Path does not point to an NWB file."))
+
 
 @app.route("/conversions/<path:path>")
 def send_conversions(path):

src/main/main.ts

@@ -355,14 +355,18 @@ function initialize() {
   else app.on("ready", onAppReady)
 }
 
-function onFileOpened(_, path: string) {
+function isValidFile(filepath: string) {
+  return !fs.existsSync(filepath) && path.extname(filepath) === '.nwb'
+}
+
+function onFileOpened(_, filepath: string) {
     restoreWindow() || initialize(); // Ensure the application is properly visible
-    onWindowReady((win) => win.webContents.send('fileOpened', path))
+    onWindowReady((win) => win.webContents.send('fileOpened', filepath))
 }
 
 if (isWindows && process.argv.length >= 2) {
   const openFilePath = process.argv[1];
-  if (openFilePath !== "") onFileOpened(null, openFilePath)
+  if (isValidFile(openFilePath)) onFileOpened(null, openFilePath)
 }
 
 // Make this app a single instance app.

src/renderer/src/electron/index.js

@@ -1,3 +1,4 @@
+import { updateURLParams } from "../../utils/url.js";
 import isElectron from "./check.js";
 
 export { isElectron };
@@ -21,8 +22,12 @@ if (isElectron) {
         remote = require("@electron/remote");
         app = remote.app;
 
-        electron.ipcRenderer.on("fileOpened", (info, ...args) => {
-            console.log("File opened!", ...args);
+        electron.ipcRenderer.on("fileOpened", (info, filepath) => {
+            updateURLParams({ file: filepath });
+            const dashboard = document.querySelector("nwb-dashboard");
+            const activePage = dashboard.getAttribute("activePage");
+            if (activePage === "preview") dashboard.requestUpdate();
+            else dashboard.setAttribute("activePage", "preview");
         });
 
         ["log", "warn", "error"].forEach((method) =>

src/renderer/src/pages.js

@@ -22,11 +22,14 @@ import { TutorialPage } from "./stories/pages/tutorial/Tutorial";
 import tutorialIcon from "./stories/assets/exploration.svg?raw";
 import uploadIcon from "./stories/assets/dandi.svg?raw";
 import inspectIcon from "./stories/assets/inspect.svg?raw";
+import neurosiftIcon from "./stories/assets/neurosift-logo.svg?raw";
+
 import settingsIcon from "./stories/assets/settings.svg?raw";
 
 import { UploadsPage } from "./stories/pages/uploads/UploadsPage";
 import { SettingsPage } from "./stories/pages/settings/SettingsPage";
 import { InspectPage } from "./stories/pages/inspect/InspectPage";
+import { PreviewPage } from "./stories/pages/preview/PreviewPage";
 
 let dashboard = document.querySelector("nwb-dashboard");
 if (!dashboard) dashboard = new Dashboard();
@@ -165,14 +168,18 @@ const pages = {
             }),
         },
     }),
-    uploads: new UploadsPage({
-        label: "Uploads",
-        icon: uploadIcon,
-    }),
     inspect: new InspectPage({
         label: "Inspect",
         icon: inspectIcon,
     }),
+    preview: new PreviewPage({
+        label: "Neurosift",
+        icon: neurosiftIcon,
+    }),
+    uploads: new UploadsPage({
+        label: "Uploads",
+        icon: uploadIcon,
+    }),
     tutorial: new TutorialPage({
         label: "Tutorial",
         icon: tutorialIcon,

src/renderer/src/progress/index.js

@@ -11,7 +11,8 @@ import {
 import { fs } from "../electron/index.js";
 import { joinPath, runOnLoad } from "../globals.js";
 import { merge } from "../stories/pages/utils.js";
-import { updateAppProgress, updateFile, updateURLParams } from "./update.js";
+import { updateAppProgress, updateFile } from "./update.js";
+import { updateURLParams } from "../../utils/url.js";
 
 export * from "./update";
 

src/renderer/src/progress/update.js

@@ -1,3 +1,4 @@
+import { updateURLParams } from "../../utils/url.js";
 import { guidedProgressFilePath } from "../dependencies/simple.js";
 import { fs } from "../electron/index.js";
 import { joinPath } from "../globals.js";
@@ -23,21 +24,6 @@ export const update = (newDatasetName, previousDatasetName) => {
         return "Dataset name updated";
     } else throw new Error("No previous dataset name provided");
 };
-
-export function updateURLParams(paramsToUpdate) {
-    const params = new URLSearchParams(location.search);
-    for (let key in paramsToUpdate) {
-        const value = paramsToUpdate[key];
-        if (value == undefined) params.delete(key);
-        else params.set(key, value);
-    }
-
-    // Update browser history state
-    const value = `${location.pathname}?${params}`;
-    if (history.state) Object.assign(history.state, paramsToUpdate);
-    window.history.pushState(history.state, null, value);
-}
-
 export const updateAppProgress = (
     pageId,
     dataOrProjectName = {},

src/renderer/src/stories/Dashboard.js

@@ -133,6 +133,10 @@ export class Dashboard extends LitElement {
         this.#updated();
     }
 
+    requestPageUpdate() {
+        if (this.#active) this.#active.requestUpdate();
+    }
+
     createRenderRoot() {
         return this;
     }

src/renderer/src/stories/JSONSchemaForm.js

@@ -2,7 +2,7 @@ import { LitElement, css, html } from "lit";
 import { Accordion } from "./Accordion";
 
 import { checkStatus } from "../validation";
-import { capitalize, header } from "./forms/utils";
+import { header } from "./forms/utils";
 import { resolve } from "../promises";
 import { merge } from "./pages/utils";
 import { resolveProperties } from "./pages/guided-mode/data/utils";
@@ -112,14 +112,6 @@ pre {
   .required.conditional label:after {
     color: transparent;
   }
-
-
-  .guided--text-input-instructions {
-    font-size: 13px;
-    width: 100%;
-    padding-top: 4px;
-    color: dimgray !important;
-  }
 `;
 
 document.addEventListener("dragover", (e) => {
@@ -422,11 +414,6 @@ export class JSONSchemaForm extends LitElement {
             >
                 <label class="guided--form-label">${header(name)}</label>
                 ${interactiveInput}
-                ${info.description
-                    ? html`<p class="guided--text-input-instructions">
-                          ${capitalize(info.description)}${info.description.slice(-1)[0] === "." ? "" : "."}
-                      </p>`
-                    : ""}
                 <div class="errors"></div>
                 <div class="warnings"></div>
             </div>

src/renderer/src/stories/JSONSchemaInput.js

@@ -8,6 +8,8 @@ import { Button } from "./Button";
 import { List } from "./List";
 import { Modal } from "./Modal";
 
+import { capitalize } from "./forms/utils";
+
 const filesystemQueries = ["file", "directory"];
 
 export class JSONSchemaInput extends LitElement {
@@ -69,6 +71,13 @@ export class JSONSchemaInput extends LitElement {
             input[type="number"].hideStep {
                 -moz-appearance: textfield;
             }
+
+            .guided--text-input-instructions {
+                font-size: 13px;
+                width: 100%;
+                padding-top: 4px;
+                color: dimgray !important;
+            }
         `;
     }
 
@@ -118,6 +127,20 @@ export class JSONSchemaInput extends LitElement {
     }
 
     render() {
+        const { info } = this;
+
+        const input = this.#render();
+        return html`
+            ${input}
+            ${info.description
+                ? html`<p class="guided--text-input-instructions">
+                      ${capitalize(info.description)}${info.description.slice(-1)[0] === "." ? "" : "."}
+                  </p>`
+                : ""}
+        `;
+    }
+
+    #render() {
         const { validateOnChange, info, path: fullPath } = this;
 
         const path = typeof fullPath === "string" ? fullPath.split("-") : [...fullPath];

src/renderer/src/stories/Loader.ts

@@ -1,4 +1,5 @@
 import { LitElement, css, html } from "lit";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
 
 // From https://loading.io/css/
 
@@ -120,7 +121,7 @@ export class Loader extends LitElement {
         return html`
           <div>
           <div class="lds-default"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
-          ${this.message ? html`<span>${this.message}</span>` : ''}
+          ${this.message ? html`<span>${unsafeHTML(this.message)}</span>` : ''}
           </div>
       `
     }

src/renderer/src/stories/pages/guided-mode/data/GuidedStructure.js

@@ -8,7 +8,7 @@ import { Search } from "../../../Search.js";
 import { Modal } from "../../../Modal";
 import { List } from "../../../List";
 
-const defaultEmptyMessage = "No interfaces selected"
+const defaultEmptyMessage = "No interfaces selected";
 
 export class GuidedStructurePage extends Page {
     constructor(...args) {
@@ -35,7 +35,7 @@ export class GuidedStructurePage extends Page {
 
     list = new List({
         emptyMessage: defaultEmptyMessage,
-        onChange: () => this.unsavedUpdates = true
+        onChange: () => (this.unsavedUpdates = true),
     });
 
     addButton = new Button();
@@ -96,7 +96,7 @@ export class GuidedStructurePage extends Page {
             )
             .catch((e) => console.error(e));
 
-        this.list.emptyMessage = defaultEmptyMessage
+        this.list.emptyMessage = defaultEmptyMessage;
 
         for (const [key, name] of Object.entries(interfaces)) {
             let found = this.search.options?.find((o) => o.value === name);

src/renderer/src/stories/pages/guided-mode/options/utils.js

@@ -24,7 +24,9 @@ export const run = async (url, payload, options = {}) => {
     const needsSwal = !options.swal && options.swal !== false;
     if (needsSwal) openProgressSwal(options).then((swal) => (options.onOpen ? options.onOpen(swal) : undefined));
 
-    const results = await fetch(`${baseUrl}/neuroconv/${url}`, {
+    if (!("base" in options)) options.base = "/neuroconv";
+
+    const results = await fetch(`${baseUrl}${options.base || ""}/${url}`, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify(payload),