Upload section headers

src/renderer/assets/css/section.css

@@ -19,7 +19,6 @@
         transform 0.12s ease-in-out;
 }
 
-
 nwb-main h3,
 nwb-main p {
     color: var(--color);

src/renderer/src/pages.js

@@ -108,11 +108,13 @@ const pages = {
             start: new GuidedStartPage({
                 label: "Start",
             }),
+
             details: new GuidedNewDatasetPage({
                 title: "Project Setup",
                 label: "Project details",
                 section: sections[0],
             }),
+
             structure: new GuidedStructurePage({
                 title: "Data Formats",
                 label: "Data formats",

src/renderer/src/stories/Main.js

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

src/renderer/src/stories/pages/globals.js

@@ -1 +1 @@
-export const sections = ["Project Structure", "Data Review", "Conversion Preview", "Final Review"];
+export const sections = ["Project Structure", "Data Entry", "Conversion Preview", "Upload & Review"];

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

@@ -3,6 +3,7 @@ import { Page } from "../Page.js";
 import "./GuidedFooter";
 import { InfoBox } from "../../InfoBox.js";
 import { InspectorListItem } from "../../preview/inspector/InspectorList.js";
+import { sections } from "../globals.js";
 
 export class GuidedStartPage extends Page {
     constructor(...args) {
@@ -57,11 +58,11 @@ export class GuidedStartPage extends Page {
                         <p>
                            In the GUIDE, the process of running a conversion pipeline is broken into four high-level sections.
                         <p>
-                        <h4>1. Project Structure</h4>
+                        <h4>1. ${sections[0]}</h4>
                         <p>
                             The first section will direct you to specify the high-level structure of your conversion pipeline, including data formats and global metadata.
                         </p>
-                        <h4>2. Data Review</h4>
+                        <h4>2. ${sections[1]}</h4>
                         <p>
                             The second section will have you provide your source data files and NWB File metadata on a per-subject basis to populate your files.
                         </p>
@@ -86,17 +87,16 @@ export class GuidedStartPage extends Page {
                             — though you don't need to specify a value at the current stage.
                         </p>
 
-                        <h4>3. Conversion Preview</h4>
+                        <h4>3. ${sections[2]}</h4>
                         <p>
                             In the third section, you will preview your conversion before uploading to DANDI.
                         </p>
-                        <h4>4. Final Review</h4>
+                        <h4>4. ${sections[3]}</h4>
                         <p>
                             Finally, you will upload your conversion to DANDI and review the resulting Dandiset.
                         </p>
 
-                        <br>
-                        <h4>Additional Resources</h4>
+                        <h2 style="padding: 0; font-size: 20px;">Additional Resources</h2>
                         <hr>
                         ${new InfoBox({
                             header: "Where can I learn more about the conversion process?",

src/renderer/src/stories/pages/guided-mode/data/GuidedSourceData.js

@@ -24,8 +24,6 @@ const propsToIgnore = [
 ];
 
 export class GuidedSourceDataPage extends ManagedPage {
-
-
     constructor(...args) {
         super(...args);
         this.style.height = "100%"; // Fix main section

src/renderer/src/stories/pages/guided-mode/data/GuidedStructure.js

@@ -142,7 +142,9 @@ export class GuidedStructurePage extends Page {
         this.addButton.setAttribute("hidden", "");
 
         return html`
-            <div style="width: 100%; display: flex; flex-direction: column; align-items: center;">${this.list} ${this.addButton}</div>
+            <div style="width: 100%; display: flex; flex-direction: column; align-items: center;">
+                ${this.list} ${this.addButton}
+            </div>
             ${this.searchModal}
         `;
     }

src/renderer/src/stories/pages/guided-mode/options/GuidedStubPreview.js

@@ -17,7 +17,6 @@ export class GuidedStubPreviewPage extends Page {
     constructor(...args) {
         super(...args);
         this.style.height = "100%"; // Fix main section
-
     }
 
     header = {

src/renderer/src/stories/pages/settings/SettingsPage.js

@@ -31,8 +31,8 @@ export class SettingsPage extends Page {
                     if (!this.unsavedUpdates) return this.#openNotyf("All changes were already saved", "success");
                     this.save();
                 },
-            })
-        ]
+            }),
+        ],
     };
 
     constructor(...args) {
@@ -76,9 +76,7 @@ export class SettingsPage extends Page {
             onThrow,
         });
 
-        return html`
-            ${this.form}
-        `;
+        return html` ${this.form} `;
     }
 }