Merge pull request #788 from NeurodataWithoutBorders/flag-manual-inte…

…ractions

Flag manual interactions that the GUIDE doesn't support

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/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"
+    }
+]