From ba1113a5510c2b416d8837ab9d6fb7073944363f Mon Sep 17 00:00:00 2001 From: Garrett Date: Tue, 17 Oct 2023 16:00:11 -0700 Subject: [PATCH 1/4] Delegate page responsibilities better --- schemas/source-data.schema.ts | 2 +- src/renderer/assets/css/guided.css | 3 +- src/renderer/assets/css/main.css | 8 +-- src/renderer/assets/css/section.css | 58 ++++----------- src/renderer/src/stories/JSONSchemaForm.js | 16 ++++- src/renderer/src/stories/Main.js | 55 ++++++++------- src/renderer/src/stories/pages/Page.js | 3 - .../src/stories/pages/contact-us/Contact.js | 8 ++- .../pages/documentation/Documentation.js | 8 ++- .../pages/getting-started/GettingStarted.js | 2 +- .../stories/pages/guided-mode/GuidedHome.js | 70 +++++++++---------- .../stories/pages/guided-mode/GuidedStart.js | 2 +- .../guided-mode/data/GuidedSourceData.js | 3 + .../src/stories/pages/inspect/InspectPage.js | 19 +++-- .../src/stories/pages/preview/PreviewPage.js | 19 ++--- .../stories/pages/settings/SettingsPage.js | 14 ++-- .../src/stories/pages/tutorial/Tutorial.js | 19 +++-- .../src/stories/pages/uploads/UploadsPage.js | 21 +++--- 18 files changed, 156 insertions(+), 174 deletions(-) diff --git a/schemas/source-data.schema.ts b/schemas/source-data.schema.ts index 50c28a1f8..5fe9ba03c 100644 --- a/schemas/source-data.schema.ts +++ b/schemas/source-data.schema.ts @@ -2,7 +2,7 @@ export default function getSourceDataSchema (schema) { // const copy = merge(schema, {}) - Object.values(schema.properties).forEach((schema: any) => { + Object.values(schema.properties ?? {}).forEach((schema: any) => { if (schema.properties.gain) schema.properties.gain.step = null // Do not show steps }) diff --git a/src/renderer/assets/css/guided.css b/src/renderer/assets/css/guided.css index 9aed292f1..829de4fef 100644 --- a/src/renderer/assets/css/guided.css +++ b/src/renderer/assets/css/guided.css @@ -812,7 +812,8 @@ h1.guided--text-sub-step { display: flex; justify-content: center; flex-wrap: wrap; - padding: 10px; + padding: 20px 10px; + margin:5px; border: 1px dashed #ccc; border-radius: 5px; } diff --git a/src/renderer/assets/css/main.css b/src/renderer/assets/css/main.css index b1eb0db0a..e98f645df 100644 --- a/src/renderer/assets/css/main.css +++ b/src/renderer/assets/css/main.css @@ -1471,12 +1471,9 @@ details[open] > summary::before { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } -.standalone-section { +.getting-started { width: 100%; - display: flex; - flex-direction: column; - align-items: center; - margin-bottom: 20px; + text-align: center; } .overview-card-layout { @@ -1695,7 +1692,6 @@ details[open] > summary::before { line-height: 2.25rem; padding-bottom: 0.25rem; margin: 0; - padding-top: 1.25rem; } .docu_divide { diff --git a/src/renderer/assets/css/section.css b/src/renderer/assets/css/section.css index ce05dcc80..27a0c1d3d 100755 --- a/src/renderer/assets/css/section.css +++ b/src/renderer/assets/css/section.css @@ -4,7 +4,8 @@ height: 100%; width: 100%; margin-right: 0; - padding: 0px 50px 50px 50px; + padding: 15px 50px; + display: flex; flex-direction: column; box-sizing: border-box; @@ -12,62 +13,31 @@ overflow-y: auto; color: var(--color-accent); background-color: var(--color-section); - /* pointer-events: none; - visibility: hidden; - opacity: 0; */ - /* transform: translateX(-20px); */ transition: visibility 0s 0.12s linear, opacity 0.12s ease-in, transform 0.12s ease-in-out; } -.section.is-shown { - pointer-events: auto; - visibility: visible; - opacity: 1; - z-index: 1000; - /* transform: translateX(20px); */ - transition: - visibility 0s 0s linear, - opacity 0.36s ease-out, - transform 0.36s ease-out; + +.section.nested { + padding-top: 15px; + padding-bottom: 15px; } -.section.fullShown { - left: 210px; - max-width: 100%; - transition: all 0.25s linear; +.section > * { + height: 100%; } -.section h3, -.section p { +nwb-main h3, +nwb-main p { color: var(--color); } -.section h1 { + +nwb-main h1 { font-size: 20px; } -.section h3 { +nwb-main h3 { padding-bottom: 30px; font-size: 16px; -} - -.section-wrapper { - position: relative; - max-width: 100%; - margin: 0 auto; - padding: 0px 20px 0px 25px; - border-bottom: 1px solid var(--color-border); -} -/* @media (min-width: 940px) { - .section-wrapper { - padding-top: 4rem; - } -} */ - -.section-icon { - width: 32px; - height: 32px; - vertical-align: sub; - margin-right: 0.5em; -} +} \ No newline at end of file diff --git a/src/renderer/src/stories/JSONSchemaForm.js b/src/renderer/src/stories/JSONSchemaForm.js index 73199dd63..d6d2df784 100644 --- a/src/renderer/src/stories/JSONSchemaForm.js +++ b/src/renderer/src/stories/JSONSchemaForm.js @@ -25,6 +25,16 @@ const componentCSS = ` width:100%; } + #empty { + display: flex; + align-items: center; + justify-content: center; + height: 100%; + width: 100%; + color: gray; + } + + p { margin: 0 0 1em; line-height: 1.4285em; @@ -189,6 +199,8 @@ export class JSONSchemaForm extends LitElement { this.dialogType = props.dialogType; this.deferLoading = props.deferLoading ?? false; + this.emptyMessage = props.emptyMessage ?? "No properties to render"; + this.onlyRequired = props.onlyRequired ?? false; this.showLevelOverride = props.showLevelOverride ?? false; @@ -698,7 +710,7 @@ export class JSONSchemaForm extends LitElement { // // Filter non-required properties (if specified) and render the sub-schema // const renderable = path.length ? this.#getRenderable(schema, required) : Object.entries(schema.properties ?? {}) - if (renderable.length === 0) return html`

No properties to render

`; + if (renderable.length === 0) return html`
${this.emptyMessage}
`; let renderableWithLinks = renderable.reduce((acc, [name, info]) => { const externalPath = [...this.base, ...path, name]; @@ -903,13 +915,11 @@ export class JSONSchemaForm extends LitElement { this.#registerRequirements(this.schema, this.required); return html` -
${schema.description ? html`

Description

${unsafeHTML(schema.description)}

` : ""} ${this.#render(schema, this.resolved, this.#requirements)} -
`; } } diff --git a/src/renderer/src/stories/Main.js b/src/renderer/src/stories/Main.js index 7ad3d4968..bea061018 100644 --- a/src/renderer/src/stories/Main.js +++ b/src/renderer/src/stories/Main.js @@ -62,6 +62,7 @@ export class Main extends LitElement { } updated() { + this.content = (this.shadowRoot ?? this).querySelector("#content"); if (this.#queue.length) { this.#queue.forEach((content) => this.set(content)); @@ -70,6 +71,11 @@ export class Main extends LitElement { this.style.overflow = "hidden"; this.content.style.height = "100%"; + + // Reset scroll position on page change + const section = this.content.children[0] + section.scrollTop = 0 + } render() { @@ -101,6 +107,7 @@ export class Main extends LitElement { // Default Capsules Behavior const section = sections[info.section]; + console.log('Sections',section,sections) if (section) { if (capsules === true || !("capsules" in page)) { let pages = Object.values(section.pages); @@ -139,30 +146,30 @@ export class Main extends LitElement { if (typeof controls === "function") controls = controls(); // Generate custom header content if required return html` - ${headerEl} - ${capsules - ? html`
${capsules}
` - : html`
`} -
-
- ${title - ? html`
-
-
-

${title}

- ${unsafeHTML(subtitle)} -
-
${controls}
-
-
-
` - : ""} - -
${page}
+ ${headerEl} + ${capsules + ? html`
${capsules}
` + : html`
`} + ${title + ? html`
+
+
+

${title}

+ ${unsafeHTML(subtitle)} +
+
${controls}
+
+
+
` + : ""} + +
+
+ ${page}
${footerEl} diff --git a/src/renderer/src/stories/pages/Page.js b/src/renderer/src/stories/pages/Page.js index 08e49c592..e1add0a39 100644 --- a/src/renderer/src/stories/pages/Page.js +++ b/src/renderer/src/stories/pages/Page.js @@ -22,9 +22,6 @@ export class Page extends LitElement { constructor(info = {}) { super(); Object.assign(this.info, info); - - this.style.height = "100%"; - this.style.color = "black"; } createRenderRoot() { diff --git a/src/renderer/src/stories/pages/contact-us/Contact.js b/src/renderer/src/stories/pages/contact-us/Contact.js index ea57e16bf..d74f90139 100644 --- a/src/renderer/src/stories/pages/contact-us/Contact.js +++ b/src/renderer/src/stories/pages/contact-us/Contact.js @@ -5,6 +5,12 @@ import { Page } from "../Page.js"; import { startLottie } from "../../../dependencies/globals.js"; export class ContactPage extends Page { + + header = { + title: "Contact Us", + subtitle: "Let us know your issues and feature requests.", + } + constructor(...args) { super(...args); } @@ -20,8 +26,6 @@ export class ContactPage extends Page {
-

Contact Us

-
diff --git a/src/renderer/src/stories/pages/documentation/Documentation.js b/src/renderer/src/stories/pages/documentation/Documentation.js index b952afaf7..f3adf3e5e 100644 --- a/src/renderer/src/stories/pages/documentation/Documentation.js +++ b/src/renderer/src/stories/pages/documentation/Documentation.js @@ -5,6 +5,12 @@ import { Page } from "../Page.js"; import { startLottie } from "../../../dependencies/globals.js"; export class DocumentationPage extends Page { + + header = { + title: "Documentation", + subtitle: "Learn more about the GUIDE.", + } + constructor(...args) { super(...args); } @@ -21,8 +27,6 @@ export class DocumentationPage extends Page {
-

Documentation

-
diff --git a/src/renderer/src/stories/pages/getting-started/GettingStarted.js b/src/renderer/src/stories/pages/getting-started/GettingStarted.js index 701f9dc00..0cacdded9 100644 --- a/src/renderer/src/stories/pages/getting-started/GettingStarted.js +++ b/src/renderer/src/stories/pages/getting-started/GettingStarted.js @@ -22,7 +22,7 @@ export class GettingStartedPage extends Page { render() { return html` -
+

Your one-stop tool for converting and uploading NWB datasets to the DANDI Archive!

diff --git a/src/renderer/src/stories/pages/guided-mode/GuidedHome.js b/src/renderer/src/stories/pages/guided-mode/GuidedHome.js index 02ec44cb0..a6df02d82 100644 --- a/src/renderer/src/stories/pages/guided-mode/GuidedHome.js +++ b/src/renderer/src/stories/pages/guided-mode/GuidedHome.js @@ -7,6 +7,12 @@ 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); } @@ -178,56 +184,48 @@ export class GuidedHomePage extends Page { render() { return html` -
-
-
-

Your Conversions

-
-
-
+
-

- 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. -

-
+

+ 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. +

+

Create a new conversion pipeline

-
-
-
-

-
+ +
- -
-
+ `; } } diff --git a/src/renderer/src/stories/pages/guided-mode/GuidedStart.js b/src/renderer/src/stories/pages/guided-mode/GuidedStart.js index 75c8054ff..08200de40 100644 --- a/src/renderer/src/stories/pages/guided-mode/GuidedStart.js +++ b/src/renderer/src/stories/pages/guided-mode/GuidedStart.js @@ -55,7 +55,7 @@ export class GuidedStartPage extends Page {

- In the NWB GUIDE, the process of running a conversion pipeline is broken into four high-level sections. + In the GUIDE, the process of running a conversion pipeline is broken into four high-level sections.

1. Project Structure

diff --git a/src/renderer/src/stories/pages/guided-mode/data/GuidedSourceData.js b/src/renderer/src/stories/pages/guided-mode/data/GuidedSourceData.js index 40454e18d..4352b62fb 100644 --- a/src/renderer/src/stories/pages/guided-mode/data/GuidedSourceData.js +++ b/src/renderer/src/stories/pages/guided-mode/data/GuidedSourceData.js @@ -116,6 +116,7 @@ export class GuidedSourceDataPage extends ManagedPage { mode: "accordion", schema: schemaResolved, results: info.source_data, + emptyMessage: "No source data required for this session.", ignore: [ "verbose", "es_key", @@ -130,6 +131,8 @@ export class GuidedSourceDataPage extends ManagedPage { onThrow, }); + form.style.height = '100%' + return { subject, session, diff --git a/src/renderer/src/stories/pages/inspect/InspectPage.js b/src/renderer/src/stories/pages/inspect/InspectPage.js index dbdee36cc..c7dca5d52 100644 --- a/src/renderer/src/stories/pages/inspect/InspectPage.js +++ b/src/renderer/src/stories/pages/inspect/InspectPage.js @@ -14,6 +14,11 @@ export class InspectPage extends Page { super(...args); } + header = { + title: "NWB Inspector Report", + subtitle: "This page allows you to inspect NWB files using the NWB Inspector.", + } + showReport = async (value) => { if (!value) { const message = "Please provide filesystem entries to inspect."; @@ -72,17 +77,9 @@ export class InspectPage extends Page { } return html` -

-

NWB Inspector Report

-
-

This page allows you to inspect NWB files using the NWB Inspector.

-
- -
- ${this.input} -
- ${button} -
+ ${this.input} +
+ ${button} `; } } diff --git a/src/renderer/src/stories/pages/preview/PreviewPage.js b/src/renderer/src/stories/pages/preview/PreviewPage.js index 04d06a46b..1594ca5bb 100644 --- a/src/renderer/src/stories/pages/preview/PreviewPage.js +++ b/src/renderer/src/stories/pages/preview/PreviewPage.js @@ -6,6 +6,14 @@ import { Neurosift } from "../../preview/Neurosift.js"; import { baseUrl } from "../../../globals.js"; export class PreviewPage extends Page { + + + header = { + title: "Neurosift File Visualization", + subtitle: "Explore your NWB file using Neurosift.", + } + + constructor(...args) { super(...args); } @@ -25,7 +33,7 @@ export class PreviewPage extends Page { type: "string", format: "file", description: - "Please provide a file path that you'd like to visualize using Neurosift. The NWB GUIDE will serve this file and access the appropriate URL automatically.", + "Please provide a file path that you'd like to visualize using Neurosift. The GUIDE will serve this file and access the appropriate URL automatically.", }, onUpdate: this.updatePath, onThrow, @@ -41,15 +49,8 @@ export class PreviewPage extends Page { return html`
-
-
-

Neurosift File Visualization

-
-

Explore your NWB file using Neurosift

-
-
${this.input} ${this.neurosift}
`; diff --git a/src/renderer/src/stories/pages/settings/SettingsPage.js b/src/renderer/src/stories/pages/settings/SettingsPage.js index b824b1872..5a6a29807 100644 --- a/src/renderer/src/stories/pages/settings/SettingsPage.js +++ b/src/renderer/src/stories/pages/settings/SettingsPage.js @@ -29,6 +29,12 @@ const setUndefinedIfNotDeclared = (schema, resolved) => { }; export class SettingsPage extends Page { + + header = { + title: "App Settings", + subtitle: "This page allows you to set global settings for the GUIDE.", + } + constructor(...args) { super(...args); } @@ -81,17 +87,9 @@ export class SettingsPage extends Page { }); return html` -
-

NWB GUIDE Settings

-
-

This page allows you to set global settings for the NWB GUIDE.

-
- -
${this.form}
${button} -
`; } } diff --git a/src/renderer/src/stories/pages/tutorial/Tutorial.js b/src/renderer/src/stories/pages/tutorial/Tutorial.js index c4b3066c5..583d98f35 100644 --- a/src/renderer/src/stories/pages/tutorial/Tutorial.js +++ b/src/renderer/src/stories/pages/tutorial/Tutorial.js @@ -19,6 +19,13 @@ const { shell } = electron; const tutorialPipelineName = "NWB GUIDE Tutorial Data"; export class TutorialPage extends Page { + + header = { + title: "Tutorial Data Generation", + subtitle: "This page allows you to generate a dataset with multiple subjects and sessions so you can practice using NWB GUIDE before converting your own datasets.", + } + + constructor(...args) { super(...args); } @@ -41,16 +48,6 @@ export class TutorialPage extends Page { const entry = entryExists ? get(tutorialPipelineName) : {}; return html` -
-

Tutorial Data Generation

-
-

- This page allows you to generate a dataset with multiple subjects and sessions so you can practice using - NWB GUIDE before converting your own datasets. -

- -
- ${hasEntry(tutorialPipelineName) ? html`

@@ -89,7 +86,7 @@ export class TutorialPage extends Page { })}

-

Let's get started with your first conversion on the NWB GUIDE!

+

Let's get started with your first conversion on the GUIDE!

-

DANDI Uploads

-
-

This page allows you to upload folders with NWB files to the DANDI Archive.

+ ${this.form}
- -
- ${this.form} -
- ${button} -
+ ${button} `; } } From 152323ee1173f33a30595c268071e04e463f128d Mon Sep 17 00:00:00 2001 From: "pre-commit-ci[bot]" <66853113+pre-commit-ci[bot]@users.noreply.github.com> Date: Tue, 17 Oct 2023 23:02:57 +0000 Subject: [PATCH 2/4] [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci --- src/renderer/assets/css/guided.css | 2 +- src/renderer/assets/css/section.css | 2 +- src/renderer/src/stories/JSONSchemaForm.js | 10 +-- src/renderer/src/stories/Main.js | 50 ++++++------- .../src/stories/pages/contact-us/Contact.js | 3 +- .../pages/documentation/Documentation.js | 3 +- .../stories/pages/guided-mode/GuidedHome.js | 71 +++++++++---------- .../guided-mode/data/GuidedSourceData.js | 2 +- .../src/stories/pages/inspect/InspectPage.js | 2 +- .../src/stories/pages/preview/PreviewPage.js | 9 +-- .../stories/pages/settings/SettingsPage.js | 9 ++- .../src/stories/pages/tutorial/Tutorial.js | 7 +- .../src/stories/pages/uploads/UploadsPage.js | 5 +- 13 files changed, 75 insertions(+), 100 deletions(-) diff --git a/src/renderer/assets/css/guided.css b/src/renderer/assets/css/guided.css index 829de4fef..a1712bb73 100644 --- a/src/renderer/assets/css/guided.css +++ b/src/renderer/assets/css/guided.css @@ -813,7 +813,7 @@ h1.guided--text-sub-step { justify-content: center; flex-wrap: wrap; padding: 20px 10px; - margin:5px; + margin: 5px; border: 1px dashed #ccc; border-radius: 5px; } diff --git a/src/renderer/assets/css/section.css b/src/renderer/assets/css/section.css index 27a0c1d3d..a9f7c63f4 100755 --- a/src/renderer/assets/css/section.css +++ b/src/renderer/assets/css/section.css @@ -40,4 +40,4 @@ nwb-main h1 { nwb-main h3 { padding-bottom: 30px; font-size: 16px; -} \ No newline at end of file +} diff --git a/src/renderer/src/stories/JSONSchemaForm.js b/src/renderer/src/stories/JSONSchemaForm.js index d6d2df784..bcde37b72 100644 --- a/src/renderer/src/stories/JSONSchemaForm.js +++ b/src/renderer/src/stories/JSONSchemaForm.js @@ -915,11 +915,11 @@ export class JSONSchemaForm extends LitElement { this.#registerRequirements(this.schema, this.required); return html` - ${schema.description - ? html`

Description

-

${unsafeHTML(schema.description)}

` - : ""} - ${this.#render(schema, this.resolved, this.#requirements)} + ${schema.description + ? html`

Description

+

${unsafeHTML(schema.description)}

` + : ""} + ${this.#render(schema, this.resolved, this.#requirements)} `; } } diff --git a/src/renderer/src/stories/Main.js b/src/renderer/src/stories/Main.js index bea061018..ad813f477 100644 --- a/src/renderer/src/stories/Main.js +++ b/src/renderer/src/stories/Main.js @@ -62,7 +62,6 @@ export class Main extends LitElement { } updated() { - this.content = (this.shadowRoot ?? this).querySelector("#content"); if (this.#queue.length) { this.#queue.forEach((content) => this.set(content)); @@ -73,9 +72,8 @@ export class Main extends LitElement { this.content.style.height = "100%"; // Reset scroll position on page change - const section = this.content.children[0] - section.scrollTop = 0 - + const section = this.content.children[0]; + section.scrollTop = 0; } render() { @@ -107,7 +105,7 @@ export class Main extends LitElement { // Default Capsules Behavior const section = sections[info.section]; - console.log('Sections',section,sections) + console.log("Sections", section, sections); if (section) { if (capsules === true || !("capsules" in page)) { let pages = Object.values(section.pages); @@ -146,31 +144,27 @@ export class Main extends LitElement { if (typeof controls === "function") controls = controls(); // Generate custom header content if required return html` - ${headerEl} - ${capsules - ? html`
${capsules}
` - : html`
`} - ${title - ? html`
-
-
-

${title}

- ${unsafeHTML(subtitle)} -
-
${controls}
-
-
-
` - : ""} + ${headerEl} + ${capsules + ? html`
${capsules}
` + : html`
`} + ${title + ? html`
+
+
+

${title}

+ ${unsafeHTML(subtitle)} +
+
${controls}
+
+
+
` + : ""}
-
- ${page} -
+
${page}
${footerEl} `; diff --git a/src/renderer/src/stories/pages/contact-us/Contact.js b/src/renderer/src/stories/pages/contact-us/Contact.js index d74f90139..169ebe89e 100644 --- a/src/renderer/src/stories/pages/contact-us/Contact.js +++ b/src/renderer/src/stories/pages/contact-us/Contact.js @@ -5,11 +5,10 @@ import { Page } from "../Page.js"; import { startLottie } from "../../../dependencies/globals.js"; export class ContactPage extends Page { - header = { title: "Contact Us", subtitle: "Let us know your issues and feature requests.", - } + }; constructor(...args) { super(...args); diff --git a/src/renderer/src/stories/pages/documentation/Documentation.js b/src/renderer/src/stories/pages/documentation/Documentation.js index f3adf3e5e..9b009c7c3 100644 --- a/src/renderer/src/stories/pages/documentation/Documentation.js +++ b/src/renderer/src/stories/pages/documentation/Documentation.js @@ -5,11 +5,10 @@ import { Page } from "../Page.js"; import { startLottie } from "../../../dependencies/globals.js"; export class DocumentationPage extends Page { - header = { title: "Documentation", subtitle: "Learn more about the GUIDE.", - } + }; constructor(...args) { super(...args); diff --git a/src/renderer/src/stories/pages/guided-mode/GuidedHome.js b/src/renderer/src/stories/pages/guided-mode/GuidedHome.js index a6df02d82..7f2d692ed 100644 --- a/src/renderer/src/stories/pages/guided-mode/GuidedHome.js +++ b/src/renderer/src/stories/pages/guided-mode/GuidedHome.js @@ -7,11 +7,10 @@ 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); @@ -184,48 +183,42 @@ 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. -

- -
-
-

Create a new conversion pipeline

-
+
+

+ 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. +

+ +
+
+

Create a new conversion pipeline

+
-
-
-

- + +
- +
`; } } diff --git a/src/renderer/src/stories/pages/guided-mode/data/GuidedSourceData.js b/src/renderer/src/stories/pages/guided-mode/data/GuidedSourceData.js index 4352b62fb..d23d77956 100644 --- a/src/renderer/src/stories/pages/guided-mode/data/GuidedSourceData.js +++ b/src/renderer/src/stories/pages/guided-mode/data/GuidedSourceData.js @@ -131,7 +131,7 @@ export class GuidedSourceDataPage extends ManagedPage { onThrow, }); - form.style.height = '100%' + form.style.height = "100%"; return { subject, diff --git a/src/renderer/src/stories/pages/inspect/InspectPage.js b/src/renderer/src/stories/pages/inspect/InspectPage.js index c7dca5d52..f8dd22ca3 100644 --- a/src/renderer/src/stories/pages/inspect/InspectPage.js +++ b/src/renderer/src/stories/pages/inspect/InspectPage.js @@ -17,7 +17,7 @@ export class InspectPage extends Page { header = { title: "NWB Inspector Report", subtitle: "This page allows you to inspect NWB files using the NWB Inspector.", - } + }; showReport = async (value) => { if (!value) { diff --git a/src/renderer/src/stories/pages/preview/PreviewPage.js b/src/renderer/src/stories/pages/preview/PreviewPage.js index 1594ca5bb..80f30dfde 100644 --- a/src/renderer/src/stories/pages/preview/PreviewPage.js +++ b/src/renderer/src/stories/pages/preview/PreviewPage.js @@ -6,13 +6,10 @@ import { Neurosift } from "../../preview/Neurosift.js"; import { baseUrl } from "../../../globals.js"; export class PreviewPage extends Page { - - header = { title: "Neurosift File Visualization", subtitle: "Explore your NWB file using Neurosift.", - } - + }; constructor(...args) { super(...args); @@ -48,9 +45,7 @@ export class PreviewPage extends Page { } return html` -
+
${this.input} ${this.neurosift}
`; diff --git a/src/renderer/src/stories/pages/settings/SettingsPage.js b/src/renderer/src/stories/pages/settings/SettingsPage.js index 5a6a29807..90982c51b 100644 --- a/src/renderer/src/stories/pages/settings/SettingsPage.js +++ b/src/renderer/src/stories/pages/settings/SettingsPage.js @@ -29,11 +29,10 @@ const setUndefinedIfNotDeclared = (schema, resolved) => { }; export class SettingsPage extends Page { - header = { title: "App Settings", subtitle: "This page allows you to set global settings for the GUIDE.", - } + }; constructor(...args) { super(...args); @@ -87,9 +86,9 @@ export class SettingsPage extends Page { }); return html` - ${this.form} -
- ${button} + ${this.form} +
+ ${button} `; } } diff --git a/src/renderer/src/stories/pages/tutorial/Tutorial.js b/src/renderer/src/stories/pages/tutorial/Tutorial.js index 583d98f35..32c730084 100644 --- a/src/renderer/src/stories/pages/tutorial/Tutorial.js +++ b/src/renderer/src/stories/pages/tutorial/Tutorial.js @@ -19,12 +19,11 @@ const { shell } = electron; const tutorialPipelineName = "NWB GUIDE Tutorial Data"; export class TutorialPage extends Page { - header = { title: "Tutorial Data Generation", - subtitle: "This page allows you to generate a dataset with multiple subjects and sessions so you can practice using NWB GUIDE before converting your own datasets.", - } - + subtitle: + "This page allows you to generate a dataset with multiple subjects and sessions so you can practice using NWB GUIDE before converting your own datasets.", + }; constructor(...args) { super(...args); diff --git a/src/renderer/src/stories/pages/uploads/UploadsPage.js b/src/renderer/src/stories/pages/uploads/UploadsPage.js index 2d67d240b..a3eb5af2a 100644 --- a/src/renderer/src/stories/pages/uploads/UploadsPage.js +++ b/src/renderer/src/stories/pages/uploads/UploadsPage.js @@ -57,13 +57,10 @@ 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.", - } - + }; constructor(...args) { super(...args); From 326270e0dafbaffbb28b8495e41452d50b64c1c2 Mon Sep 17 00:00:00 2001 From: Garrett Date: Wed, 18 Oct 2023 09:45:21 -0700 Subject: [PATCH 3/4] Fix centering --- src/renderer/assets/css/main.css | 4 +++- .../src/stories/pages/getting-started/GettingStarted.js | 6 ------ src/renderer/src/stories/pages/guided-mode/GuidedHome.js | 2 +- 3 files changed, 4 insertions(+), 8 deletions(-) diff --git a/src/renderer/assets/css/main.css b/src/renderer/assets/css/main.css index e98f645df..9a7df8b32 100644 --- a/src/renderer/assets/css/main.css +++ b/src/renderer/assets/css/main.css @@ -1473,7 +1473,9 @@ details[open] > summary::before { .getting-started { width: 100%; - text-align: center; + display:flex; + flex-direction: column; + align-items: center; } .overview-card-layout { diff --git a/src/renderer/src/stories/pages/getting-started/GettingStarted.js b/src/renderer/src/stories/pages/getting-started/GettingStarted.js index 0cacdded9..e9f2fef09 100644 --- a/src/renderer/src/stories/pages/getting-started/GettingStarted.js +++ b/src/renderer/src/stories/pages/getting-started/GettingStarted.js @@ -80,12 +80,6 @@ export class GettingStartedPage extends Page {
-
-
-
`; } diff --git a/src/renderer/src/stories/pages/guided-mode/GuidedHome.js b/src/renderer/src/stories/pages/guided-mode/GuidedHome.js index 7f2d692ed..058d25f16 100644 --- a/src/renderer/src/stories/pages/guided-mode/GuidedHome.js +++ b/src/renderer/src/stories/pages/guided-mode/GuidedHome.js @@ -183,7 +183,7 @@ 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 From 501d4c155c8f499a33908e3226831420739920cc Mon Sep 17 00:00:00 2001 From: "pre-commit-ci[bot]" <66853113+pre-commit-ci[bot]@users.noreply.github.com> Date: Wed, 18 Oct 2023 16:46:33 +0000 Subject: [PATCH 4/4] [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci --- src/renderer/assets/css/main.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/renderer/assets/css/main.css b/src/renderer/assets/css/main.css index 9a7df8b32..6097644ee 100644 --- a/src/renderer/assets/css/main.css +++ b/src/renderer/assets/css/main.css @@ -1473,7 +1473,7 @@ details[open] > summary::before { .getting-started { width: 100%; - display:flex; + display: flex; flex-direction: column; align-items: center; }