diff --git a/generateInterfaceSchema.py b/generateInterfaceSchema.py index d8258d811..9a04a8b85 100644 --- a/generateInterfaceSchema.py +++ b/generateInterfaceSchema.py @@ -70,7 +70,7 @@ class CustomNWBConverter(NWBConverter): }} }}; -const activePage = "conversion/sourcedata" +const activePage = "//sourcedata" const globalStateCopy = JSON.parse(JSON.stringify(globalState)) diff --git a/src/renderer/assets/css/guided.css b/src/renderer/assets/css/guided.css index 952871706..0f909475c 100644 --- a/src/renderer/assets/css/guided.css +++ b/src/renderer/assets/css/guided.css @@ -807,17 +807,17 @@ h1.guided--text-sub-step { display: flex; flex-direction: column; } -.container--dashed { +.create-button { cursor: pointer; display: flex; justify-content: center; flex-wrap: wrap; padding: 20px 10px; margin: 5px; - border: 1px dashed #ccc; border-radius: 5px; + box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset; } -.container--dashed:hover { +.create-button:hover { background-color: whitesmoke; } .remove-left-border { diff --git a/src/renderer/assets/css/nav.css b/src/renderer/assets/css/nav.css index 494db926e..50d67e6fb 100755 --- a/src/renderer/assets/css/nav.css +++ b/src/renderer/assets/css/nav.css @@ -115,17 +115,24 @@ a[data-toggle="collapse"] { display: flex; flex-direction: column; justify-content: space-between; - overflow-y: hidden; + overflow-y: auto; margin-top: 15px; flex-grow: 1; border-top: 1px solid #8f8f8f; } #main-nav .sidebar-body > *:last-child { + border-top: 1px solid #8f8f8f; + padding-top: 10px; + position: sticky; + bottom: 0; + background: var(--color-sidebar); +} + +#main-nav ul.components { background: var(--color-sidebar); padding: 3px; padding-top: 8px; - border-top: 1px solid #8f8f8f; } #main-nav .sidebar-body > *:last-child h4 { diff --git a/src/renderer/assets/css/section.css b/src/renderer/assets/css/section.css index 1dea6d6ae..56195ba27 100755 --- a/src/renderer/assets/css/section.css +++ b/src/renderer/assets/css/section.css @@ -30,5 +30,5 @@ nwb-main h1 { nwb-main h3 { padding-bottom: 30px; - font-size: 16px; + font-size: 18px; } diff --git a/src/renderer/src/pages.js b/src/renderer/src/pages.js index 7b30cda1d..4fcd2d7ec 100644 --- a/src/renderer/src/pages.js +++ b/src/renderer/src/pages.js @@ -39,23 +39,6 @@ dashboard.renderNameInSidebar = false; const resourcesGroup = "Resources"; -const overviewIcon = ` - - - -`; - const guidedIcon = ` { return exists ? JSON.parse(fs ? fs.readFileSync(progressFilePath) : localStorage.getItem(progressFilePath)) : {}; }; +const oldConversionsPath = "conversion"; export function resume(name) { const global = this ? this.load(name) : get(name); - const commandToResume = global["page-before-exit"] || "conversion/start"; + let commandToResume = global["page-before-exit"] || "//start"; updateURLParams({ project: name }); + if (commandToResume.slice(0, oldConversionsPath.length) === oldConversionsPath) + commandToResume = `/${commandToResume.slice(oldConversionsPath.length)}`; + if (this) this.onTransition(commandToResume); return commandToResume; diff --git a/src/renderer/src/stories/pages/contact-us/Contact.js b/src/renderer/src/stories/pages/contact-us/Contact.js index 169ebe89e..19764056a 100644 --- a/src/renderer/src/stories/pages/contact-us/Contact.js +++ b/src/renderer/src/stories/pages/contact-us/Contact.js @@ -15,7 +15,7 @@ export class ContactPage extends Page { } updated() { - let contact_lottie_container = (this ?? this.shadowRoot).querySelector("#contact-us-lottie"); + let contact_lottie_container = (this.shadowRoot ?? this).querySelector("#contact-us-lottie"); startLottie(contact_lottie_container, contact_lottie); } diff --git a/src/renderer/src/stories/pages/documentation/Documentation.js b/src/renderer/src/stories/pages/documentation/Documentation.js index ab1ae2f2f..312270113 100644 --- a/src/renderer/src/stories/pages/documentation/Documentation.js +++ b/src/renderer/src/stories/pages/documentation/Documentation.js @@ -17,71 +17,112 @@ export class DocumentationPage extends Page { } updated() { - let doc_lottie = (this ?? this.shadowRoot).querySelector("#documentation-lottie"); + let doc_lottie = (this.shadowRoot ?? this).querySelector("#documentation-lottie"); startLottie(doc_lottie, docu_lottie); + const svg = doc_lottie.querySelector("svg"); + console.log(svg); + svg.setAttribute("viewBox", "50 100 300 200"); + + doc_lottie.style.marginBottom = "20px"; + + const container = (this.shadowRoot ?? this).querySelector(".document-content"); + container.style.height = "200px"; } render() { return html` -
-
-
-
-
-
- ${new Button({ - label: "NWB GUIDE Documentation", - onClick: () => { - window.open("https://nwb-guide.readthedocs.io/en/latest/"); - }, - })} -
-
-

Additional Resources

-

- Conversion to NWB is powered by - NeuroConv. -

-

- Inspection of NWB files is powered by - NWB Inspector. -

-

- Neurosift - is an interactive data visualization tool created by Jeremy Magland at the Flatiron - Institute. -

-

- For help on creating a Dandiset and uploading to DANDI, please see the - DANDI Documentation. -

-

- To learn more about NWB, please see the - NWB Overview Documentation. -

- -

Acknowledgments

-

- - NWB GUIDE is an open-source project developed by CatalystNeuro (Cody Baker, - Garrett Flynn, Ben Dichter) and Lawrence Berkeley National Laboratory (Ryan Ly, - Oliver Ruebel) and generously supported by - The Kavli Foundation. - -

-
-
-
-
+

+ The NWB GUIDE walks users step-by-step through all the requirements for converting their data to the NWB + format and uploading datasets to the DANDI Archive. Each stage is designed to conveniently guide users + through the conversion process and include all necessary information such that no prior knowledge of the + NWB data standard is required. +

+ +
+
+ ${new Button({ + label: "NWB GUIDE Official Documentation", + onClick: () => { + window.open("https://nwb-guide.readthedocs.io/en/latest/"); + }, + })} +
+ +

Getting Started

+

Converting your data

+

Most users will want to start with the { + ev.preventDefault(); + this.to("tutorial"); + }}>Tutorial to learn how to use the NWB GUIDE.

+

If you'd like to jump right in, head to the { + ev.preventDefault(); + this.to("/"); + }}>Convert page and click "Create a new conversion pipeline" to begin your own custom conversion.

+ +

Standalone Utilities

+

For users who are already familiar with the NWB format, the NWB GUIDE also provides standalone utilities for validating, exploring, and uploading existing NWB files.

+ +
Validating your data
+

Visit the { + ev.preventDefault(); + this.to("validate"); + }}>Validate page to validate your NWB files against Best Practices.

+ +
Exploring your data
+

Visit the { + ev.preventDefault(); + this.to("explore"); + }}>Explore page to explore your NWB files and view their contents using Neurosift.

+ +
Uploading your data
+

Visit the { + ev.preventDefault(); + this.to("dandiset"); + }}>Upload page to create dandisets and share your files on the DANDI Archive

+ + +

Additional Resources

+

+ Conversion to NWB is powered by + NeuroConv. +

+

+ Inspection of NWB files is powered by + NWB Inspector. +

+

+ Neurosift + is an interactive data visualization tool created by Jeremy Magland at the Flatiron + Institute. +

+

+ For help on creating a Dandiset and uploading to DANDI, please see the + DANDI Documentation. +

+

+ To learn more about NWB, please see the + NWB Overview Documentation. +

+ +

Acknowledgments

+

+ + NWB GUIDE is an open-source project developed by CatalystNeuro (Cody Baker, + Garrett Flynn, Ben Dichter) and Lawrence Berkeley National Laboratory (Ryan Ly, + Oliver Ruebel) and generously supported by + The Kavli Foundation. + +

+
`; } diff --git a/src/renderer/src/stories/pages/guided-mode/GuidedHome.js b/src/renderer/src/stories/pages/guided-mode/GuidedHome.js index cda3b1963..1c1b6c5ec 100644 --- a/src/renderer/src/stories/pages/guided-mode/GuidedHome.js +++ b/src/renderer/src/stories/pages/guided-mode/GuidedHome.js @@ -7,11 +7,6 @@ import * as progress from "../../../progress/index.js"; import { newDataset } from "../../../../assets/lotties/index.js"; export class GuidedHomePage extends Page { - header = { - title: "Your Conversions", - subtitle: "Start new conversions and resume existing ones.", - }; - constructor(...args) { super(...args); } @@ -183,14 +178,24 @@ export class GuidedHomePage extends Page { render() { return html`
-

- The NWB GUIDE walks users step-by-step through all the requirements for converting their data to the - NWB format and uploading datasets to the DANDI Archive. Each stage is designed to conveniently guide - users through the conversion process and include all necessary information such that no prior - knowledge of the NWB data standard is required. -

- -
+
+

+ Your one-stop tool for converting data to NWB and uploading it to the DANDI Archive. +

+ Don't know where to go next? + Learn more about the NWB GUIDE. +
+ +

Create a new conversion pipeline

diff --git a/src/renderer/src/stories/pages/guided-mode/GuidedHome.stories.js b/src/renderer/src/stories/pages/guided-mode/GuidedHome.stories.js index ddbd278eb..ae5b9034b 100644 --- a/src/renderer/src/stories/pages/guided-mode/GuidedHome.stories.js +++ b/src/renderer/src/stories/pages/guided-mode/GuidedHome.stories.js @@ -9,6 +9,6 @@ export default { export const Default = PageTemplate.bind({}); Default.args = { - activePage: "conversion", + activePage: "//", globalState, }; diff --git a/src/renderer/src/stories/pages/guided-mode/GuidedStart.stories.js b/src/renderer/src/stories/pages/guided-mode/GuidedStart.stories.js index 0453a2854..1a812dcb2 100644 --- a/src/renderer/src/stories/pages/guided-mode/GuidedStart.stories.js +++ b/src/renderer/src/stories/pages/guided-mode/GuidedStart.stories.js @@ -9,6 +9,6 @@ export default { export const Default = PageTemplate.bind({}); Default.args = { - activePage: "conversion/start", + activePage: "//start", globalState, }; diff --git a/src/renderer/src/stories/pages/guided-mode/Locate.stories.js b/src/renderer/src/stories/pages/guided-mode/Locate.stories.js index af533c5ec..1cd557b56 100644 --- a/src/renderer/src/stories/pages/guided-mode/Locate.stories.js +++ b/src/renderer/src/stories/pages/guided-mode/Locate.stories.js @@ -9,7 +9,7 @@ export default { export const Invalid = PageTemplate.bind({}); Invalid.args = { - activePage: "conversion/locate", + activePage: "//locate", globalState, }; @@ -24,6 +24,6 @@ validGlobalState.structure.results = { }; Valid.args = { - activePage: "conversion/locate", + activePage: "//locate", globalState: validGlobalState, }; diff --git a/src/renderer/src/stories/pages/guided-mode/Metadata.stories.js b/src/renderer/src/stories/pages/guided-mode/Metadata.stories.js index 54f0cafba..5682128d1 100644 --- a/src/renderer/src/stories/pages/guided-mode/Metadata.stories.js +++ b/src/renderer/src/stories/pages/guided-mode/Metadata.stories.js @@ -9,6 +9,6 @@ export default { export const Default = PageTemplate.bind({}); Default.args = { - activePage: "conversion/metadata", + activePage: "//metadata", globalState, }; diff --git a/src/renderer/src/stories/pages/guided-mode/NewDataset.stories.js b/src/renderer/src/stories/pages/guided-mode/NewDataset.stories.js index dcbc8cda7..22a645274 100644 --- a/src/renderer/src/stories/pages/guided-mode/NewDataset.stories.js +++ b/src/renderer/src/stories/pages/guided-mode/NewDataset.stories.js @@ -9,6 +9,6 @@ export default { export const Default = PageTemplate.bind({}); Default.args = { - activePage: "conversion/details", + activePage: "//details", globalState, }; diff --git a/src/renderer/src/stories/pages/guided-mode/Preview.stories.js b/src/renderer/src/stories/pages/guided-mode/Preview.stories.js index e04431df1..0cb3fdfc6 100644 --- a/src/renderer/src/stories/pages/guided-mode/Preview.stories.js +++ b/src/renderer/src/stories/pages/guided-mode/Preview.stories.js @@ -9,6 +9,6 @@ export default { export const Default = PageTemplate.bind({}); Default.args = { - activePage: "conversion/preview", + activePage: "//preview", globalState, }; diff --git a/src/renderer/src/stories/pages/guided-mode/Review.stories.js b/src/renderer/src/stories/pages/guided-mode/Review.stories.js index 28ec3a26d..c21f5a3de 100644 --- a/src/renderer/src/stories/pages/guided-mode/Review.stories.js +++ b/src/renderer/src/stories/pages/guided-mode/Review.stories.js @@ -9,6 +9,6 @@ export default { export const Default = PageTemplate.bind({}); Default.args = { - activePage: "conversion/review", + activePage: "//review", globalState, }; diff --git a/src/renderer/src/stories/pages/guided-mode/SourceData.stories.js b/src/renderer/src/stories/pages/guided-mode/SourceData.stories.js index ece96d0fb..076277682 100644 --- a/src/renderer/src/stories/pages/guided-mode/SourceData.stories.js +++ b/src/renderer/src/stories/pages/guided-mode/SourceData.stories.js @@ -48,7 +48,7 @@ export default { }, }; -const activePage = "conversion/sourcedata"; +const activePage = "//sourcedata"; const globalStateCopy = JSON.parse(JSON.stringify(globalState)); globalStateCopy.schema.source_data.properties.SpikeGLXRecordingInterface = diff --git a/src/renderer/src/stories/pages/guided-mode/Structure.stories.js b/src/renderer/src/stories/pages/guided-mode/Structure.stories.js index f7426c335..342b83ecc 100644 --- a/src/renderer/src/stories/pages/guided-mode/Structure.stories.js +++ b/src/renderer/src/stories/pages/guided-mode/Structure.stories.js @@ -9,6 +9,6 @@ export default { export const Default = PageTemplate.bind({}); Default.args = { - activePage: "conversion/structure", + activePage: "//structure", globalState, }; diff --git a/src/renderer/src/stories/pages/guided-mode/Subjects.stories.js b/src/renderer/src/stories/pages/guided-mode/Subjects.stories.js index a14a1f199..ffdbf3161 100644 --- a/src/renderer/src/stories/pages/guided-mode/Subjects.stories.js +++ b/src/renderer/src/stories/pages/guided-mode/Subjects.stories.js @@ -9,6 +9,6 @@ export default { export const Default = PageTemplate.bind({}); Default.args = { - activePage: "conversion/subjects", + activePage: "//subjects", globalState, }; diff --git a/src/renderer/src/stories/pages/guided-mode/Upload.stories.js b/src/renderer/src/stories/pages/guided-mode/Upload.stories.js index 3c4e40377..e6733eb46 100644 --- a/src/renderer/src/stories/pages/guided-mode/Upload.stories.js +++ b/src/renderer/src/stories/pages/guided-mode/Upload.stories.js @@ -9,6 +9,6 @@ export default { export const Default = PageTemplate.bind({}); Default.args = { - activePage: "conversion/upload", + activePage: "//upload", globalState, }; diff --git a/src/renderer/src/stories/pages/inspect/InspectPage.js b/src/renderer/src/stories/pages/inspect/InspectPage.js index 2af384687..06cbc9570 100644 --- a/src/renderer/src/stories/pages/inspect/InspectPage.js +++ b/src/renderer/src/stories/pages/inspect/InspectPage.js @@ -15,8 +15,8 @@ export class InspectPage extends Page { } header = { - title: "NWB Inspector Report", - subtitle: "This page allows you to inspect NWB files using the NWB Inspector.", + title: "NWB File Validation", + subtitle: "Inspect NWB files using the NWB Inspector.", }; showReport = async (value) => { diff --git a/src/renderer/src/stories/pages/preview/PreviewPage.js b/src/renderer/src/stories/pages/preview/PreviewPage.js index be1f00070..d82612ee8 100644 --- a/src/renderer/src/stories/pages/preview/PreviewPage.js +++ b/src/renderer/src/stories/pages/preview/PreviewPage.js @@ -7,8 +7,8 @@ import { baseUrl } from "../../../server/globals"; export class PreviewPage extends Page { header = { - title: "Neurosift File Visualization", - subtitle: "Explore your NWB file using Neurosift.", + title: "NWB File Exploration", + subtitle: "Visualize your NWB file using Neurosift.", }; constructor(...args) { diff --git a/src/renderer/src/stories/pages/uploads/UploadsPage.js b/src/renderer/src/stories/pages/uploads/UploadsPage.js index e71e785b1..abde40625 100644 --- a/src/renderer/src/stories/pages/uploads/UploadsPage.js +++ b/src/renderer/src/stories/pages/uploads/UploadsPage.js @@ -264,8 +264,8 @@ export async function uploadToDandi(info, type = "project" in info ? "project" : export class UploadsPage extends Page { header = { - title: "DANDI Uploads", - subtitle: "This page allows you to upload folders with NWB files to the DANDI Archive.", + title: "NWB File Uploads", + subtitle: "Upload folders and individual NWB files to the DANDI Archive.", controls: [ new Button({ icon: keyIcon, diff --git a/src/renderer/src/stories/sidebar.js b/src/renderer/src/stories/sidebar.js index aae92d3be..8d3cd6303 100644 --- a/src/renderer/src/stories/sidebar.js +++ b/src/renderer/src/stories/sidebar.js @@ -176,6 +176,8 @@ export class Sidebar extends LitElement { const label = info.label ?? id; const icon = info.icon ?? ""; + if (info.hidden) return; + const a = document.createElement("a"); a.setAttribute("data-id", id); a.href = "#";