Merge branch 'main' into add-converters

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
     })
 

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;
 }

src/renderer/assets/css/main.css

@@ -1471,12 +1471,11 @@ 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;
 }
 
 .overview-card-layout {
@@ -1695,7 +1694,6 @@ details[open] > summary::before {
     line-height: 2.25rem;
     padding-bottom: 0.25rem;
     margin: 0;
-    padding-top: 1.25rem;
 }
 
 .docu_divide {

src/renderer/assets/css/section.css

@@ -4,70 +4,40 @@
     height: 100%;
     width: 100%;
     margin-right: 0;
-    padding: 0px 50px 50px 50px;
+    padding: 15px 50px;
+
     display: flex;
     flex-direction: column;
     box-sizing: border-box;
     overflow-x: hidden;
     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;
-}

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;
@@ -195,6 +205,8 @@ export class JSONSchemaForm extends LitElement {
         this.dialogType = props.dialogType;
         this.deferLoading = props.deferLoading ?? false;
 
+        this.emptyMessage = props.emptyMessage ?? "No properties to render";
+
         this.requirementMode = props.requirementMode ?? "default";
         this.onlyRequired = props.onlyRequired ?? false;
         this.showLevelOverride = props.showLevelOverride ?? false;
@@ -705,7 +717,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`<p>No properties to render</p>`;
+        if (renderable.length === 0) return html`<div id="empty">${this.emptyMessage}</div>`;
 
         let renderableWithLinks = renderable.reduce((acc, [name, info]) => {
             const externalPath = [...this.base, ...path, name];
@@ -910,13 +922,11 @@ export class JSONSchemaForm extends LitElement {
         this.#registerRequirements(this.schema, this.required);
 
         return html`
-            <div>
-                ${schema.description
-                    ? html`<h4>Description</h4>
-                          <p class="guided--text-input-instructions">${unsafeHTML(schema.description)}</p>`
-                    : ""}
-                ${this.#render(schema, this.resolved, this.#requirements)}
-            </div>
+            ${schema.description
+                ? html`<h4>Description</h4>
+                      <p class="guided--text-input-instructions">${unsafeHTML(schema.description)}</p>`
+                : ""}
+            ${this.#render(schema, this.resolved, this.#requirements)}
         `;
     }
 }

src/renderer/src/stories/Main.js

@@ -70,6 +70,10 @@ 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 +105,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);
@@ -142,28 +147,24 @@ export class Main extends LitElement {
             ${headerEl}
             ${capsules
                 ? html`<div style="width: 100%; text-align: center; padding-top: 15px;">${capsules}</div>`
-                : html`<div style="height: 50px;"></div>`}
-            <main id="content" class="js-content" style="overflow: hidden; display: flex;">
-                <section class="section">
-                    ${title
-                        ? html`<div
-                              style="position: sticky; top: 0; left: 0; background: white; z-index: 1; margin-bottom: 20px;"
-                          >
-                              <div
-                                  style="display: flex; flex: 1 1 0px; justify-content: space-between; align-items: end;"
-                              >
-                                  <div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
-                                      <h1 class="title" style="margin: 0; padding: 0;">${title}</h1>
-                                      <small style="color: gray;">${unsafeHTML(subtitle)}</small>
-                                  </div>
-                                  <div style="padding-left: 25px">${controls}</div>
-                              </div>
-                              <hr style="margin-bottom: 0;" />
-                          </div>`
-                        : ""}
-
-                    <div style="height: 100%; width: 100%;">${page}</div>
-                </section>
+                : html`<div style="height:50px"</div>`}
+            ${title
+                ? html`<div
+                      style="position: sticky; padding: 0px 50px; top: 0; left: 0; background: white; z-index: 1;"
+                  >
+                      <div style="display: flex; flex: 1 1 0px; justify-content: space-between; align-items: end;">
+                          <div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color:gray;">
+                              <h1 class="title" style="margin: 0; padding: 0; color:black;">${title}</h1>
+                              <small>${unsafeHTML(subtitle)}</small>
+                          </div>
+                          <div style="padding-left: 25px">${controls}</div>
+                      </div>
+                      <hr style="margin-bottom: 0;" />
+                  </div>`
+                : ""}
+
+            <main id="content" class="js-content" style="overflow: hidden;">
+                <section class="section ${capsules ? "nested" : ""}">${page}</section>
             </main>
             ${footerEl}
         `;

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() {

src/renderer/src/stories/pages/contact-us/Contact.js

@@ -5,6 +5,11 @@ 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 +25,6 @@ export class ContactPage extends Page {
                 <div class="document_container">
                     <div class="doc_container">
                         <div class="dc_con">
-                            <h1 class="doc_header">Contact Us</h1>
-                            <hr class="docu_divide" />
                             <div class="document-content">
                                 <div id="contact-us-lottie" class="documentation-lottie_style"></div>
                             </div>

src/renderer/src/stories/pages/documentation/Documentation.js

@@ -5,6 +5,11 @@ 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 +26,6 @@ export class DocumentationPage extends Page {
                 <div class="document_container">
                     <div class="doc_container">
                         <div class="dc_con">
-                            <h1 class="doc_header">Documentation</h1>
-                            <hr class="docu_divide" />
                             <div class="document-content">
                                 <div id="documentation-lottie" class="documentation-lottie_style"></div>
                             </div>

src/renderer/src/stories/pages/getting-started/GettingStarted.js

@@ -22,7 +22,7 @@ export class GettingStartedPage extends Page {
 
     render() {
         return html`
-            <section class="standalone-section">
+            <section class="getting-started">
                 <h3>Your one-stop tool for converting and uploading NWB datasets to the DANDI Archive!<br /></h3>
 
                 <div class="overview-card-layout grid h-auto w-full grid-cols-3 gap-6">
@@ -80,12 +80,6 @@ export class GettingStartedPage extends Page {
                         </i>
                     </button>
                 </div>
-                <div style="display: flex; justify-content: center">
-                    <div
-                        class="flex w-full items-center justify-center pb-2"
-                        style="justify-content: center; display: flex; align-items: center"
-                    ></div>
-                </div>
             </section>
         `;
     }

src/renderer/src/stories/pages/guided-mode/GuidedHome.js

@@ -7,6 +7,11 @@ 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,31 +183,17 @@ export class GuidedHomePage extends Page {
 
     render() {
         return html`
-            <div class="standalone-section">
-                <div style="width: 800px;">
-                    <div style="display: flex; align-items: end; justify-content: space-between; margin-bottom: 5px;">
-                        <h1 style="margin: 0;">Your Conversions</h1>
-                    </div>
-                    <hr />
-                </div>
-
-                <p class="guided--help-text" style="margin-bottom: 2rem">
+            <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="justify-center" id="curate-new-home" style="align-items: center">
-                    <div
-                        class="container--dashed"
-                        id="guided-button-start-new-curate"
-                        style="margin: 5px;"
-                        @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>
+                <div class="container--dashed" @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>
 
                 <div style="max-width: 800px; width: 100%;">

src/renderer/src/stories/pages/guided-mode/GuidedStart.js

@@ -55,7 +55,7 @@ export class GuidedStartPage extends Page {
                     <div>
                         <br>
                         <p>
-                           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.
                         <p>
                         <h4>1. Project Structure</h4>
                         <p>

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,