diff --git a/src/electron/frontend/core/components/CodeBlock.js b/src/electron/frontend/core/components/CodeBlock.js index 66e4f68cb6..2858360232 100644 --- a/src/electron/frontend/core/components/CodeBlock.js +++ b/src/electron/frontend/core/components/CodeBlock.js @@ -1,12 +1,15 @@ 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; @@ -14,7 +17,7 @@ export class CodeBlock extends LitElement { 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`
${this.text}
`; + 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} +
${this.text}
+ `; } } diff --git a/src/electron/frontend/core/components/pages/guided-mode/results/GuidedResults.js b/src/electron/frontend/core/components/pages/guided-mode/results/GuidedResults.js index dc1e5a333a..af1be09d66 100644 --- a/src/electron/frontend/core/components/pages/guided-mode/results/GuidedResults.js +++ b/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`

Your conversion failed. Please try again.

`; + // Show a snippet for how to open the NWB file return html`

Your data was successfully converted to NWB!

    @@ -51,6 +57,47 @@ export class GuidedResultsPage extends Page { .sort() .map((id) => html`
  1. ${id}
  2. `)}
+

But what about my other data?

+

+ The GUIDE still can't do everything. You may need to manually adjust the NWB file to ensure it contains + all the necessary data.

+ + For example, to append to the file using PyNWB you would start with: +

+ ${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 + + # ... +`, + })} +
Related Documentation
+
+ ${manualActionsJSON.map( + ({ name, description, url }) => html` +
+

+ ${name} +

+ ${description} +
+ ` + )} +
+

+ For more information, please refer to the + PyNWB and + MatNWB documentation. +

`; } } diff --git a/src/schemas/json/manual_actions.json b/src/schemas/json/manual_actions.json new file mode 100644 index 0000000000..6298bffa9f --- /dev/null +++ b/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" + } +]