Merge branch 'main' into flatten-electron-file

src/electron/frontend/core/components/CodeBlock.js

@@ -1,20 +1,23 @@
 import { LitElement, css, html } from "lit";
+import { Button } from "./Button";
 
 export class CodeBlock extends LitElement {
     static get styles() {
         return css`
             :host {
                 display: block;
+                position: relative;
                 font-size: 85%;
-                background: #f2f1f1;
+                background: #111;
+                color: whitesmoke;
                 border-radius: 10px;
                 border: 1px solid gray;
                 overflow: hidden;
             }
 
             pre {
                 overflow: auto;
-                padding: 5px 10px;
+                padding: 15px;
                 box-sizing: border-box;
                 user-select: text;
                 margin: 0;
@@ -28,7 +31,37 @@ export class CodeBlock extends LitElement {
     }
 
     render() {
-        return html`<pre>${this.text}</pre>`;
+        const controls = document.createElement("div");
+
+        setTimeout(() => {
+            console.log(controls);
+        }, 1000);
+
+        const copyButton = new Button({
+            label: "Copy",
+            onClick: () => navigator.clipboard.writeText(this.text),
+            primary: true,
+            color: "rgba(0, 0, 0, 0.3)",
+            buttonStyles: {
+                color: "white",
+                fontSize: "85%",
+                borderRadius: "5px",
+                border: "1px solid rgba(255, 255, 255, 0.5)",
+            },
+        });
+
+        Object.assign(controls.style, {
+            position: "absolute",
+            bottom: "10px",
+            right: "10px",
+        });
+
+        controls.append(copyButton);
+
+        return html`
+            ${controls}
+            <pre><code>${this.text}</code></pre>
+        `;
     }
 }
 

src/electron/frontend/core/components/Dashboard.js

@@ -243,32 +243,44 @@ export class Dashboard extends LitElement {
 
         this.page.set(toPass, false);
 
-        this.page.checkSyncState().then(async () => {
-            const projectName = info.globalState?.project?.name;
-
-            this.subSidebar.header = projectName
-                ? `<h4 style="margin-bottom: 0px;">${projectName}</h4><small>Conversion Pipeline</small>`
-                : projectName;
-
-            this.updateSections({ sidebar: false, main: true });
-
-            if (this.#transitionPromise.value) this.#transitionPromise.trigger(page); // This ensures calls to page.to() can be properly awaited until the next page is ready
-
-            const { skipped } = this.subSidebar.sections[info.section]?.pages?.[info.id] ?? {};
-
-            if (skipped) {
-                if (isStorybook) return; // Do not skip on storybook
-
-                // Run skip functions
-                Object.entries(page.workflow).forEach(([key, state]) => {
-                    if (typeof state.skip === "function") state.skip();
-                });
-
-                // Skip right over the page if configured as such
-                if (previous && previous.info.previous === this.page) await this.page.onTransition(-1);
-                else await this.page.onTransition(1);
-            }
-        });
+        this.page
+            .checkSyncState()
+            .then(async () => {
+                const projectName = info.globalState?.project?.name;
+
+                this.subSidebar.header = projectName
+                    ? `<h4 style="margin-bottom: 0px;">${projectName}</h4><small>Conversion Pipeline</small>`
+                    : projectName;
+
+                this.updateSections({ sidebar: false, main: true });
+
+                if (this.#transitionPromise.value) this.#transitionPromise.trigger(page); // This ensures calls to page.to() can be properly awaited until the next page is ready
+
+                const { skipped } = this.subSidebar.sections[info.section]?.pages?.[info.id] ?? {};
+
+                if (skipped) {
+                    if (isStorybook) return; // Do not skip on storybook
+
+                    // Run skip functions
+                    Object.entries(page.workflow).forEach(([key, state]) => {
+                        if (typeof state.skip === "function") state.skip();
+                    });
+
+                    // Skip right over the page if configured as such
+                    if (previous && previous.info.previous === this.page) await this.page.onTransition(-1);
+                    else await this.page.onTransition(1);
+                }
+            })
+            .catch((e) => {
+                const previousId = previous?.info?.id;
+                if (previousId) {
+                    page.onTransition(previousId); // Revert back to previous page
+                    page.notify(
+                        `<h4 style="margin: 0">Fallback to previous page after error occurred</h4><small>${e}</small>`,
+                        "error"
+                    );
+                } else reloadPageToHome();
+            });
     }
 
     // Populate the sections tracked for this page by using the global state as a model

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

@@ -7,6 +7,11 @@ import { getStubArray } from "../options/GuidedStubPreview.js";
 import { getSharedPath } from "../../../preview/NWBFilePreview.js";
 
 import { electron, path } from "../../../../../utils/electron.js";
+
+import manualActionsJSON from "../../../../../../../schemas/json/manual_actions.json";
+
+import { CodeBlock } from "../../../CodeBlock.js";
+
 const { ipcRenderer } = electron;
 
 export class GuidedResultsPage extends Page {
@@ -43,6 +48,7 @@ export class GuidedResultsPage extends Page {
         if (!conversion)
             return html`<div style="text-align: center;"><p>Your conversion failed. Please try again.</p></div>`;
 
+        // Show a snippet for how to open the NWB file
         return html`
             <p>Your data was successfully converted to NWB!</p>
             <ol style="margin: 10px 0px; padding-top: 0;">
@@ -51,6 +57,47 @@ export class GuidedResultsPage extends Page {
                     .sort()
                     .map((id) => html`<li>${id}</li>`)}
             </ol>
+            <h4>But what about my other data?</h4>
+            <p>
+                The GUIDE still can't do everything. You may need to manually adjust the NWB file to ensure it contains
+                all the necessary data. <br /><br />
+
+                For example, to append to the file using PyNWB you would start with:
+            </p>
+            ${new CodeBlock({
+                text: `from pynwb import NWBHDF5IO, NWBFile
+
+nwbfile_path= "${this.#sharedPath()}"
+
+# Open the file
+with NWBHDF5IO(path=nwbfile_path, mode="r+") as io:
+    nwbfile = io.read()
+
+    # Then adjust the file as needed
+
+    # ...
+`,
+            })}
+            <h5>Related Documentation</h5>
+            <div
+                style="display: flex; gap: 10px; margin-top: 15px; padding-bottom: 5px; margin-bottom: 10px; overflow: auto;"
+            >
+                ${manualActionsJSON.map(
+                    ({ name, description, url }) => html`
+                        <div style="min-width: 300px; padding: 20px; background-color: #f0f0f0; border-radius: 5px;">
+                            <h4 style="margin-bottom: 5px;">
+                                <a href=${url} target="_blank" style="text-decoration: none;">${name}</a>
+                            </h4>
+                            <small>${description}</small>
+                        </div>
+                    `
+                )}
+            </div>
+            <p>
+                For more information, please refer to the
+                <a href="https://pynwb.readthedocs.io/en/stable/" target="_blank">PyNWB</a> and
+                <a href="https://neurodatawithoutborders.github.io/matnwb/" target="_blank">MatNWB</a> documentation.
+            </p>
         `;
     }
 }

src/schemas/json/manual_actions.json

@@ -0,0 +1,12 @@
+[
+    {
+        "name": "Annotate Time Intervals",
+        "description": "Annotating events in time is a common need in neuroscience, e.g. to describe epochs, trials, and invalid times during an experimental session.",
+        "url": "https://pynwb.readthedocs.io/en/stable/tutorials/general/plot_timeintervals.html#sphx-glr-tutorials-general-plot-timeintervals-py"
+    },
+    {
+        "name": "Extend NWB",
+        "description": "The NWB format was designed to be easily extendable, allowing users to add new data types and attributes to the format.",
+        "url": "https://pynwb.readthedocs.io/en/stable/tutorials/general/extensions.html"
+    }
+]