[Frontend Refactor III] Simplification for Renderer Folder

README.md

@@ -1,5 +1,5 @@
 <p align="center">
-  <img src="src/electron/renderer/assets/img/logo-guide-draft-transparent-tight.png" width="250" alt="NeuroConv logo"/>
+  <img src="src/electron/frontend/assets/img/logo-guide-draft-transparent-tight.png" width="250" alt="NeuroConv logo"/>
   <h3 align="center">NWB Graphical User Interface for Data Entry</h3>
   <p align="center">
     <a href="https://github.com/NeurodataWithoutBorders/nwb-guide/actions/workflows/testing.yml"><img src="https://github.com/NeurodataWithoutBorders/nwb-guide/actions/workflows/testing.yml/badge.svg" alt="Full Tests"></a>

docs/developer_guide.rst

@@ -88,13 +88,17 @@ Repo Structure
         - `main`
             - `src` - Contains all the source code for the backend
             - `assets` - Contains all the backend-facing assets (e.g. images, css, etc.)
-        - `renderer`
-            - `src` - Contains all the source code for the frontend
+        - `preload`
+            - `preload.js` - Exposes electron-specific variables to the frontend
+        - `frontend`
+            - `core` - Contains all the source code for the frontend
                 - `index.js` - The entry point for the application
                 - `pages.js` - The main code that controls which pages are rendered and how they are linked together
-                - `stories` - Contains all the Web Components and related Storybook stories
-                - `electron` - Contains all the Electron-related code to enable conditional inclusion for development mode
+                - `components` - Contains all the UI Components used throughout the app
             - `assets` - Contains all the frontend-facing assets (e.g. images, css, etc.)
+            - `utils`
+                - `electron.js` - Contains electron-exposed variables
+                - `url.js` - Saving the history state for hot reloading and refresh page functionality
     - `pyflask` - Contains all the source code for the backend
     - `schemas` - Contains all the JSON schemas used for validation
 

docs/index.rst

@@ -2,7 +2,7 @@ NWB GUIDE documentation
 =======================
 |
 
-.. image:: ../src/electron/renderer/assets/img/logo-guide-draft-transparent-tight.png
+.. image:: ../src/electron/frontend/assets/img/logo-guide-draft-transparent-tight.png
   :scale: 50 %
   :align: center
   :alt: NWB GUIDE logo

electron.vite.config.js

@@ -4,7 +4,7 @@ import ViteYaml from "@modyfi/vite-plugin-yaml";
 
 import { resolve } from "path";
 
-const htmlRoot = "src/electron/renderer";
+const htmlRoot = "src/electron/frontend";
 
 export default defineConfig({
     main: {

package.json

@@ -10,9 +10,7 @@
   "scripts": {
     "start": "electron-vite dev --outDir build",
     "postinstall": "electron-builder install-app-deps",
-    "dev": "concurrently -n BE,FE --kill-others \"npm run dev:server\" \"npm run dev:app\"",
-    "dev:app": "vite src/electron/renderer",
-    "dev:server": "cd src/pyflask && python -m flask run --port 4242",
+    "server": "cd src/pyflask && python -m flask run --port 4242",
     "build": "npm run build:app",
     "echo": "python -c \"print('hello')\"",
     "build:app": "electron-vite build --outDir build",
@@ -77,7 +75,7 @@
     "win": {
       "asar": false,
       "target": "nsis",
-      "icon": "src/electron/renderer/assets/app-icon/logo-guide-draft.ico",
+      "icon": "src/electron/frontend/assets/app-icon/logo-guide-draft.ico",
       "requestedExecutionLevel": "requireAdministrator"
     },
     "mac": {
@@ -98,7 +96,7 @@
           ]
         }
       ],
-      "icon": "src/electron/renderer/assets/img/logo-guide-draft.png",
+      "icon": "src/electron/frontend/assets/img/logo-guide-draft.png",
       "darkModeSupport": false,
       "hardenedRuntime": true,
       "gatekeeperAssess": false,
@@ -114,7 +112,7 @@
     "linux": {
       "asar": true,
       "target": "AppImage",
-      "icon": "src/electron/renderer/assets/img/logo-guide-draft.png",
+      "icon": "src/electron/frontend/assets/img/logo-guide-draft.png",
       "extraResources": [
         {
           "from": "./build/flask/nwb-guide",
@@ -127,7 +125,7 @@
       "oneClick": false,
       "perMachine": false,
       "allowToChangeInstallationDirectory": true,
-      "installerIcon": "src/electron/renderer/assets/app-icon/logo-guide-draft.ico"
+      "installerIcon": "src/electron/frontend/assets/app-icon/logo-guide-draft.ico"
     },
     "publish": {
       "provider": "github"

src/electron/renderer/src/stories/Dashboard.js → src/electron/frontend/core/components/Dashboard.js

@@ -29,8 +29,9 @@ import "../../../../../node_modules/fomantic-ui/dist/components/accordion.min.cs
 import "../../../../../node_modules/@sweetalert2/theme-bulma/bulma.css";
 // import "../../node_modules/intro.js/minified/introjs.min.css"
 import "../../assets/css/guided.css";
-import isElectron from "../electron/check.js";
-import { isStorybook, reloadPageToHome } from "../dependencies/globals";
+import { isElectron } from "../../utils/electron.js";
+import { isStorybook, reloadPageToHome } from "../globals.js";
+
 import { getCurrentProjectName, updateAppProgress } from "../progress/index.js";
 
 // import "https://jsuites.net/v4/jsuites.js"

src/electron/renderer/src/stories/FileSystemSelector.js → src/electron/frontend/core/components/FileSystemSelector.js

@@ -1,6 +1,6 @@
 import { LitElement, css, html } from "lit";
 
-import { fs, remote } from "../electron/index";
+import { fs, remote } from "../../utils/electron";
 import { List } from "./List";
 const { dialog } = remote;
 

src/electron/renderer/src/stories/InstanceManager.js → src/electron/frontend/core/components/InstanceManager.js

@@ -1,6 +1,6 @@
 import { LitElement, css, html } from "lit";
 import "./Button";
-import { notify } from "../dependencies/globals";
+import { notify } from "../dependencies";
 import { Accordion } from "./Accordion";
 import { InstanceListItem } from "./instances/item";
 import { checkStatus } from "../validation";

src/electron/renderer/src/stories/pages/Page.js → src/electron/frontend/core/components/pages/Page.js

@@ -1,7 +1,10 @@
 import { LitElement, html } from "lit";
 import { runConversion } from "./guided-mode/options/utils.js";
 import { get, save } from "../../progress/index.js";
-import { dismissNotification, isStorybook, notify } from "../../dependencies/globals";
+
+import { dismissNotification, notify } from "../../dependencies.js";
+import { isStorybook } from "../../globals.js";
+
 import { randomizeElements, mapSessions, merge } from "./utils";
 
 import { resolveMetadata } from "./guided-mode/data/utils.js";

src/electron/renderer/src/stories/pages/contact-us/Contact.js → src/electron/frontend/core/components/pages/contact-us/Contact.js

@@ -2,7 +2,7 @@ import { html } from "lit";
 import { contact_lottie } from "../../../../assets/lotties/contact-us-lotties.js";
 import { Page } from "../Page.js";
 
-import { startLottie } from "../../../dependencies/globals";
+import { startLottie } from "../../../dependencies.js";
 
 export class ContactPage extends Page {
     header = {

src/electron/renderer/src/stories/pages/documentation/Documentation.js → src/electron/frontend/core/components/pages/documentation/Documentation.js

@@ -2,7 +2,7 @@ import { html } from "lit";
 import { docu_lottie } from "../../../../assets/lotties/documentation-lotties.js";
 import { Page } from "../Page.js";
 
-import { startLottie } from "../../../dependencies/globals";
+import { startLottie } from "../../../dependencies.js";
 
 import { Button } from "../../Button.js";
 

src/electron/renderer/src/stories/pages/guided-mode/GuidedHome.js → src/electron/frontend/core/components/pages/guided-mode/GuidedHome.js

@@ -2,7 +2,7 @@ import { html } from "lit";
 import { Page } from "../Page.js";
 import { ProgressCard } from "./ProgressCard.js";
 
-import { startLottie } from "../../../dependencies/globals";
+import { startLottie } from "../../../dependencies.js";
 import * as progress from "../../../progress/index.js";
 import { newDataset } from "../../../../assets/lotties/index.js";
 

src/electron/renderer/src/stories/pages/guided-mode/data/GuidedPathExpansion.js → src/electron/frontend/core/components/pages/guided-mode/data/GuidedPathExpansion.js

@@ -9,7 +9,7 @@ import { onThrow } from "../../../../errors";
 import pathExpansionSchema from "../../../../../../../schemas/json/path-expansion.schema.json" assert { type: "json" };
 import { merge } from "../../utils";
 import { List } from "../../../List";
-import { fs } from "../../../../electron/index.js";
+import { fs } from "../../../../../utils/electron.js";
 import { Button } from "../../../Button.js";
 import { Modal } from "../../../Modal";
 import { header } from "../../../forms/utils";

src/electron/renderer/src/stories/pages/guided-mode/data/GuidedSourceData.js → src/electron/frontend/core/components/pages/guided-mode/data/GuidedSourceData.js

@@ -1,5 +1,7 @@
 import Swal from "sweetalert2";
-import { isStorybook } from "../../../../dependencies/globals";
+
+import { isStorybook } from "../../../../globals.js";
+
 import { JSONSchemaForm } from "../../../JSONSchemaForm.js";
 import { InstanceManager } from "../../../InstanceManager.js";
 import { ManagedPage } from "./ManagedPage.js";

src/electron/renderer/src/stories/pages/guided-mode/data/utils.js → src/electron/frontend/core/components/pages/guided-mode/data/utils.js

@@ -1,5 +1,5 @@
 import { getEditableItems } from "../../../JSONSchemaInput.js";
-import { merge } from "../../utils";
+import { merge } from "../../utils.js";
 
 // Merge project-wide data into metadata
 export function populateWithProjectMetadata(info, globalState) {

src/electron/renderer/src/stories/pages/guided-mode/options/GuidedInspectorPage.js → src/electron/frontend/core/components/pages/guided-mode/options/GuidedInspectorPage.js

@@ -4,7 +4,7 @@ import { Page } from "../../Page.js";
 import { unsafeSVG } from "lit/directives/unsafe-svg.js";
 import folderOpenSVG from "../../../../../assets/icons/folder_open.svg?raw";
 
-import { electron } from "../../../../electron/index.js";
+import { electron } from "../../../../../utils/electron.js";
 import { getSharedPath, removeFilePaths, truncateFilePaths } from "../../../preview/NWBFilePreview.js";
 const { ipcRenderer } = electron;
 import { until } from "lit/directives/until.js";

src/electron/renderer/src/stories/pages/guided-mode/options/GuidedStubPreview.js → src/electron/frontend/core/components/pages/guided-mode/options/GuidedStubPreview.js

@@ -4,7 +4,7 @@ import { Page } from "../../Page.js";
 import { unsafeSVG } from "lit/directives/unsafe-svg.js";
 import folderOpenSVG from "../../../../../assets/icons/folder_open.svg?raw";
 
-import { electron } from "../../../../electron/index.js";
+import { electron } from "../../../../../utils/electron.js";
 import { NWBFilePreview, getSharedPath } from "../../../preview/NWBFilePreview.js";
 const { ipcRenderer } = electron;
 

src/electron/renderer/src/stories/pages/guided-mode/results/GuidedResults.js → src/electron/frontend/core/components/pages/guided-mode/results/GuidedResults.js

@@ -6,7 +6,7 @@ import { Page } from "../../Page.js";
 import { getStubArray } from "../options/GuidedStubPreview.js";
 import { getSharedPath } from "../../../preview/NWBFilePreview.js";
 
-import { electron, path } from "../../../../electron/index.js";
+import { electron, path } from "../../../../../utils/electron.js";
 const { ipcRenderer } = electron;
 
 export class GuidedResultsPage extends Page {

src/electron/renderer/src/stories/pages/settings/SettingsPage.js → src/electron/frontend/core/components/pages/settings/SettingsPage.js

@@ -12,8 +12,10 @@ import { Button } from "../../Button.js";
 import { global, remove, save } from "../../../progress/index.js";
 import { merge, setUndefinedIfNotDeclared } from "../utils";
 
-import { homeDirectory, notyf, testDataFolderPath } from "../../../dependencies/globals";
-import { SERVER_FILE_PATH, electron, path, port, fs } from "../../../electron/index.js";
+import { notyf } from "../../../dependencies.js";
+import { homeDirectory, testDataFolderPath } from "../../../globals.js";
+
+import { SERVER_FILE_PATH, electron, path, port, fs } from "../../../../utils/electron.js";
 
 import saveSVG from "../../../../assets/icons/save.svg?raw";
 import folderSVG from "../../../../assets/icons/folder_open.svg?raw";

src/electron/renderer/src/stories/preview/NWBFilePreview.js → src/electron/frontend/core/components/preview/NWBFilePreview.js

@@ -5,7 +5,7 @@ import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { run } from "../pages/guided-mode/options/utils";
 import { until } from "lit/directives/until.js";
 import { InstanceManager } from "../InstanceManager";
-import { path } from "../../electron";
+import { path } from "../../../utils/electron.js";
 import { FullScreenToggle } from "../FullScreenToggle";
 
 export function getSharedPath(array) {

src/electron/renderer/src/stories/table/cells/input.ts → src/electron/frontend/core/components/table/cells/input.ts

@@ -1,12 +1,12 @@
 import { LitElement, css, html } from "lit";
 import { TableCellBase } from "./base.js";
 import { BaseRenderer } from "./renderers/base.js";
-import { Modal } from "../../Modal";
+import { Modal } from "../../Modal.js";
 
 import { SimpleTable } from "../../SimpleTable.js";
 import { JSONSchemaInput } from "../../JSONSchemaInput.js";
 
-import { header } from "../../forms/utils";
+import { header } from "../../forms/utils.js";
 
 export class NestedEditor extends LitElement {
 

src/electron/renderer/src/dependencies/globals.js → src/electron/frontend/core/dependencies.js

@@ -2,8 +2,6 @@ import { Notyf } from "notyf";
 import checkChromatic from "chromatic/isChromatic";
 import lottie from "lottie-web";
 
-export * from "./simple.js";
-
 // ---------- Lottie Helper ----------
 const isChromatic = checkChromatic();
 

src/electron/renderer/src/errors.ts → src/electron/frontend/core/errors.ts

@@ -1,4 +1,4 @@
-import { notify } from './dependencies/globals'
+import { notify } from './dependencies'
 
 export const onThrow = (message: string, id?: string) => {
     return notify(id ? `<b>[${id}]</b>: ${message}` : message, "error", 7000);

src/electron/renderer/src/dependencies/simple.js → src/electron/frontend/core/globals.js

@@ -1,6 +1,15 @@
-import { app, crypto, isElectron } from "../electron/index.js";
-import paths from "../../../../paths.config.json" assert { type: "json" };
-import { joinPath } from "../globals";
+import { app, path, crypto, isElectron } from "../utils/electron.js";
+
+import paths from "../../../paths.config.json" assert { type: "json" };
+
+import supportedInterfaces from "../../../supported_interfaces.json" assert { type: "json" };
+
+export const joinPath = (...args) => (path ? path.join(...args) : args.filter((str) => str).join("/"));
+
+export let runOnLoad = (fn) => {
+    if (document.readyState === "complete") fn();
+    else window.addEventListener("load", fn);
+};
 
 export const reloadPageToHome = () => {
     if (isStorybook) return;
@@ -29,3 +38,5 @@ export const ENCRYPTION_IV = crypto ? crypto.randomBytes(IV_LENGTH) : null;
 
 // Storybook
 export const isStorybook = window.location.href.includes("iframe.html");
+
+export { supportedInterfaces };

src/electron/renderer/src/index.ts → src/electron/frontend/core/index.ts

@@ -1,18 +1,18 @@
 import "./pages.js"
-import { isElectron, electron } from './electron/index.js'
+import { isElectron, electron } from '../utils/electron.js'
 const { ipcRenderer } = electron;
 
-import { Dashboard } from './stories/Dashboard.js'
+import { Dashboard } from './components/Dashboard.js'
 
 import {
   notyf,
   notify
-} from './dependencies/globals'
+} from './dependencies.js'
 
 import Swal from 'sweetalert2'
 import { loadServerEvents, pythonServerOpened } from "./server/index.js";
 
-import { statusBar } from "./server/globals";
+import { statusBar } from "./server/globals.js";
 
 // Set the sidebar subtitle to the current app version
 const dashboard = document.querySelector('nwb-dashboard') as Dashboard

src/electron/renderer/src/pages.js → src/electron/frontend/core/pages.js

@@ -1,33 +1,32 @@
-import { GettingStartedPage } from "./stories/pages/getting-started/GettingStarted";
-import { DocumentationPage } from "./stories/pages/documentation/Documentation";
-import { ContactPage } from "./stories/pages/contact-us/Contact";
-import { GuidedHomePage } from "./stories/pages/guided-mode/GuidedHome";
-import { GuidedNewDatasetPage } from "./stories/pages/guided-mode/setup/GuidedNewDatasetInfo";
-import { GuidedStructurePage } from "./stories/pages/guided-mode/data/GuidedStructure";
-import { sections } from "./stories/pages/globals";
-import { GuidedSubjectsPage } from "./stories/pages/guided-mode/setup/GuidedSubjects";
-import { GuidedSourceDataPage } from "./stories/pages/guided-mode/data/GuidedSourceData";
-import { GuidedMetadataPage } from "./stories/pages/guided-mode/data/GuidedMetadata";
-import { GuidedUploadPage } from "./stories/pages/guided-mode/options/GuidedUpload";
-import { GuidedResultsPage } from "./stories/pages/guided-mode/results/GuidedResults";
-import { Dashboard } from "./stories/Dashboard";
-import { GuidedStubPreviewPage } from "./stories/pages/guided-mode/options/GuidedStubPreview";
-import { GuidedInspectorPage } from "./stories/pages/guided-mode/options/GuidedInspectorPage";
+import { DocumentationPage } from "./components/pages/documentation/Documentation";
+import { ContactPage } from "./components/pages/contact-us/Contact";
+import { GuidedHomePage } from "./components/pages/guided-mode/GuidedHome";
+import { GuidedNewDatasetPage } from "./components/pages/guided-mode/setup/GuidedNewDatasetInfo";
+import { GuidedStructurePage } from "./components/pages/guided-mode/data/GuidedStructure";
+import { sections } from "./components/pages/globals";
+import { GuidedSubjectsPage } from "./components/pages/guided-mode/setup/GuidedSubjects";
+import { GuidedSourceDataPage } from "./components/pages/guided-mode/data/GuidedSourceData";
+import { GuidedMetadataPage } from "./components/pages/guided-mode/data/GuidedMetadata";
+import { GuidedUploadPage } from "./components/pages/guided-mode/options/GuidedUpload";
+import { GuidedResultsPage } from "./components/pages/guided-mode/results/GuidedResults";
+import { Dashboard } from "./components/Dashboard";
+import { GuidedStubPreviewPage } from "./components/pages/guided-mode/options/GuidedStubPreview";
+import { GuidedInspectorPage } from "./components/pages/guided-mode/options/GuidedInspectorPage";
 
 import logo from "../assets/img/logo-guide-draft-transparent-tight.png";
-import { GuidedPathExpansionPage } from "./stories/pages/guided-mode/data/GuidedPathExpansion";
+import { GuidedPathExpansionPage } from "./components/pages/guided-mode/data/GuidedPathExpansion";
 import uploadIcon from "../assets/icons/dandi.svg?raw";
 import inspectIcon from "../assets/icons/inspect.svg?raw";
 import neurosiftIcon from "../assets/icons/neurosift-logo.svg?raw";
 
 import settingsIcon from "../assets/icons/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";
-import { GuidedPreform } from "./stories/pages/guided-mode/setup/Preform";
-import { GuidedDandiResultsPage } from "./stories/pages/guided-mode/results/GuidedDandiResults";
+import { UploadsPage } from "./components/pages/uploads/UploadsPage";
+import { SettingsPage } from "./components/pages/settings/SettingsPage";
+import { InspectPage } from "./components/pages/inspect/InspectPage";
+import { PreviewPage } from "./components/pages/preview/PreviewPage";
+import { GuidedPreform } from "./components/pages/guided-mode/setup/Preform";
+import { GuidedDandiResultsPage } from "./components/pages/guided-mode/results/GuidedDandiResults";
 
 let dashboard = document.querySelector("nwb-dashboard");
 if (!dashboard) dashboard = new Dashboard();

src/electron/renderer/src/progress/index.js → src/electron/frontend/core/progress/index.js

@@ -7,11 +7,11 @@ import {
     appDirectory,
     ENCRYPTION_KEY,
     ENCRYPTION_IV,
-} from "../dependencies/simple.js";
-import { fs, crypto } from "../electron/index.js";
+} from "../globals.js";
+import { fs, crypto } from "../../utils/electron.js";
 
 import { joinPath, runOnLoad } from "../globals";
-import { merge } from "../stories/pages/utils.js";
+import { merge } from "../components/pages/utils.js";
 import { updateAppProgress, updateFile } from "./update.js";
 import { updateURLParams } from "../../utils/url.js";
 

src/electron/renderer/src/progress/operations.js → src/electron/frontend/core/progress/operations.js

@@ -1,6 +1,6 @@
 import { joinPath } from "../globals";
-import { conversionSaveFolderPath, guidedProgressFilePath, previewSaveFolderPath } from "../dependencies/simple";
-import { fs } from "../electron";
+import { conversionSaveFolderPath, guidedProgressFilePath, previewSaveFolderPath } from "../globals";
+import { fs } from "../../utils/electron";
 
 export const remove = (name) => {
     //Get the path of the progress file to delete