Redesign Home Interaction (#555)

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com> Co-authored-by: rly <[email protected]> Co-authored-by: Cody Baker <[email protected]>
NeurodataWithoutBorders · Jan 11, 2024 · 7367494 · 7367494
1 parent 77631c6
commit 7367494
Show file tree

Hide file tree

Showing 24 changed files with 165 additions and 132 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -39,23 +39,6 @@ dashboard.renderNameInSidebar = false;
 
 const resourcesGroup = "Resources";
 
-const overviewIcon = `
-<svg
-    style="margin-right: 30px; margin-bottom: -5px"
-    width="20px"
-    height="20px"
-    viewBox="0 0 16 16"
-    class="bi bi-caret-right-square-fill"
-    fill="white"
-    xmlns="http://www.w3.org/2000/svg"
->
-<path
-    fill-rule="evenodd"
-    d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm5.5 10a.5.5 0 0 0 .832.374l4.5-4a.5.5 0 0 0 0-.748l-4.5-4A.5.5 0 0 0 5.5 4v8z"
-></path>
-</svg>
-`;
-
 const guidedIcon = `
 <svg
     xmlns="http://www.w3.org/2000/svg"
@@ -99,15 +82,9 @@ style="margin-right: 30px; margin-bottom: -5px"
 `;
 
 const pages = {
-    "/": new GettingStartedPage({
-        label: "Home",
-        icon: overviewIcon,
-        hidden: true,
-    }),
-    conversion: new GuidedHomePage({
-        label: "Conversions",
+    "/": new GuidedHomePage({
+        label: "Convert",
         icon: guidedIcon,
-        group: "Workflows",
         pages: {
             start: new GuidedStartPage({
                 label: "Start",
@@ -177,20 +154,17 @@ const pages = {
             }),
         },
     }),
-    inspect: new InspectPage({
-        label: "Inspect",
+    validate: new InspectPage({
+        label: "Validate",
         icon: inspectIcon,
-        group: "Workflows",
     }),
-    preview: new PreviewPage({
-        label: "Neurosift",
+    explore: new PreviewPage({
+        label: "Explore",
         icon: neurosiftIcon,
-        group: "Workflows",
     }),
     uploads: new UploadsPage({
-        label: "Uploads",
+        label: "Upload",
         icon: uploadIcon,
-        group: "Workflows",
     }),
     tutorial: new TutorialPage({
         label: "Tutorial",

diff --git a/src/renderer/src/progress/index.js b/src/renderer/src/progress/index.js
@@ -158,12 +158,16 @@ export const get = (name) => {
     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
@@ -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
@@ -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`
-            <div class="documentation_container">
-                <div class="document_container">
-                    <div class="doc_container">
-                        <div class="dc_con">
-                            <div class="document-content">
-                                <div id="documentation-lottie" class="documentation-lottie_style"></div>
-                                ${new Button({
-                                    label: "NWB GUIDE Documentation",
-                                    onClick: () => {
-                                        window.open("https://nwb-guide.readthedocs.io/en/latest/");
-                                    },
-                                })}
-                            </div>
-                            <div class="docu-content-container">
-                                <h3 style="padding: 0; margin-top: 25px;">Additional Resources</h3>
-                                <p>
-                                    Conversion to NWB is powered by
-                                    <a target="_blank" href="https://neuroconv.readthedocs.io/">NeuroConv</a>.
-                                </p>
-                                <p>
-                                    Inspection of NWB files is powered by
-                                    <a target="_blank" href="https://nwbinspector.readthedocs.io/">NWB Inspector</a>.
-                                </p>
-                                <p>
-                                    <a target="_blank" href="https://github.com/flatironinstitute/neurosift"
-                                        >Neurosift</a
-                                    >
-                                    is an interactive data visualization tool created by Jeremy Magland at the Flatiron
-                                    Institute.
-                                </p>
-                                <p>
-                                    For help on creating a Dandiset and uploading to DANDI, please see the
-                                    <a target="_blank" href="https://www.dandiarchive.org/handbook/13_upload/"
-                                        >DANDI Documentation</a
-                                    >.
-                                </p>
-                                <p>
-                                    To learn more about NWB, please see the
-                                    <a target="_blank" href="https://nwb-overview.readthedocs.io/"
-                                        >NWB Overview Documentation</a
-                                    >.
-                                </p>
-
-                                <h3 style="padding: 0; margin-top: 25px;">Acknowledgments</h3>
-                                <p>
-                                    <small>
-                                        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
-                                        <a target="_blank" href="https://www.kavlifoundation.org/"
-                                            >The Kavli Foundation</a
-                                        >.
-                                    </small>
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                </div>
+            <p>
+                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.
+            </p>
+
+            <div class="document-content">
+                <div id="documentation-lottie" class="documentation-lottie_style"></div>
+                ${new Button({
+                    label: "NWB GUIDE Official Documentation",
+                    onClick: () => {
+                        window.open("https://nwb-guide.readthedocs.io/en/latest/");
+                    },
+                })}
+            </div>
+
+                <h3 style="padding: 0; margin-top: 25px;">Getting Started</h3>
+                <h4 style="margin-top: 0;">Converting your data</h4>
+                <p>Most users will want to start with the <a @click=${(ev) => {
+                    ev.preventDefault();
+                    this.to("tutorial");
+                }}>Tutorial</a> to learn how to use the NWB GUIDE.</p>
+                <p>If you'd like to jump right in, head to the <a @click=${(ev) => {
+                    ev.preventDefault();
+                    this.to("/");
+                }}>Convert</a> page and click "Create a new conversion pipeline" to begin your own custom conversion.</p>
+
+                <h4>Standalone Utilities</h4>
+                <p>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.</p>
+
+                <h5>Validating your data</h5>
+                <p>Visit the <a @click=${(ev) => {
+                    ev.preventDefault();
+                    this.to("validate");
+                }}>Validate</a> page to validate your NWB files against Best Practices.</p>
+
+                <h5>Exploring your data</h5>
+                <p>Visit the <a @click=${(ev) => {
+                    ev.preventDefault();
+                    this.to("explore");
+                }}>Explore</a> page to explore your NWB files and view their contents using Neurosift.</p>
+
+                <h5>Uploading your data</h5>
+                <p>Visit the <a @click=${(ev) => {
+                    ev.preventDefault();
+                    this.to("dandiset");
+                }}>Upload</a> page to create dandisets and share your files on the DANDI Archive</p>
+
+
+                <h3 style="padding: 0; margin-top: 25px;">Additional Resources</h3>
+                <p>
+                    Conversion to NWB is powered by
+                    <a target="_blank" href="https://neuroconv.readthedocs.io/">NeuroConv</a>.
+                </p>
+                <p>
+                    Inspection of NWB files is powered by
+                    <a target="_blank" href="https://nwbinspector.readthedocs.io/">NWB Inspector</a>.
+                </p>
+                <p>
+                    <a target="_blank" href="https://github.com/flatironinstitute/neurosift"
+                        >Neurosift</a
+                    >
+                    is an interactive data visualization tool created by Jeremy Magland at the Flatiron
+                    Institute.
+                </p>
+                <p>
+                    For help on creating a Dandiset and uploading to DANDI, please see the
+                    <a target="_blank" href="https://www.dandiarchive.org/handbook/13_upload/"
+                        >DANDI Documentation</a
+                    >.
+                </p>
+                <p>
+                    To learn more about NWB, please see the
+                    <a target="_blank" href="https://nwb-overview.readthedocs.io/"
+                        >NWB Overview Documentation</a
+                    >.
+                </p>
+
+                <h3 style="padding: 0; margin-top: 25px;">Acknowledgments</h3>
+                <p>
+                    <small>
+                        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
+                        <a target="_blank" href="https://www.kavlifoundation.org/"
+                            >The Kavli Foundation</a
+                        >.
+                    </small>
+                </p>
+                <br>
             </div>
         `;
     }

diff --git 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`
             <div id="curate-new-home" style="display:flex; flex-direction:column; align-items: center">
-                <p>
-                    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.
-                </p>
-
-                <div class="container--dashed" @click="${() => this.to(1)}">
+                <div style="padding-bottom: 20px;">
+                    <h3 style="margin-bottom: 0; padding-bottom: 0;">
+                        Your one-stop tool for converting data to NWB and uploading it to the DANDI Archive.
+                    </h3>
+                    <small
+                        >Don't know where to go next?
+                        <a
+                            href=""
+                            @click="${(clickEvent) => {
+                                clickEvent.preventDefault();
+                                this.to("docs");
+                            }}"
+                            >Learn more about the NWB GUIDE</a
+                        >.</small
+                    >
+                </div>
+
+                <div class="create-button" @click="${() => this.to(1)}">
                     <div id="new-dataset-lottie-container" style="height: 150px; width: 150px"></div>
                     <h2 class="guided--text-sub-step" style="width: 100%;">Create a new conversion pipeline</h2>
                 </div>

diff --git 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
@@ -9,6 +9,6 @@ export default {
 
 export const Default = PageTemplate.bind({});
 Default.args = {
-    activePage: "conversion/start",
+    activePage: "//start",
     globalState,
 };
-Original file line number
+Diff line change
@@ Expand Up / @@ -70,7 +70,7 @@ class CustomNWBConverter(NWBConverter): @@
         }}
     }};
-    const activePage = "conversion/sourcedata"
+    const activePage = "//sourcedata"
     const globalStateCopy = JSON.parse(JSON.stringify(globalState))
@@ Expand Down @@