Cosmetic updates from User Test 1

src/renderer/src/stories/OptionalSection.js

@@ -6,11 +6,13 @@ export class OptionalSection extends LitElement {
     static get styles() {
         return css`
             :host {
+                display: block;
                 text-align: center;
             }
 
             h2 {
                 margin: 0;
+                margin-bottom: 15px;
             }
 
             .optional-section__content {
@@ -39,7 +41,7 @@ export class OptionalSection extends LitElement {
     constructor(props) {
         super();
         this.header = props.header ?? "";
-        this.description = props.description ?? "This is the description of the optional section.";
+        this.description = props.description ?? "";
         this.content = props.content ?? "";
         this.altContent = props.altContent ?? "";
         this.state = props.state;

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

@@ -30,6 +30,11 @@ export class GuidedMetadataPage extends ManagedPage {
     };
 
     form;
+
+    header = {
+        subtitle: "Edit all metadata for this conversion at the session level",
+    };
+
     footer = {
         next: "Run Conversion Preview",
         onNext: async () => {

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

@@ -17,6 +17,10 @@ export class GuidedPathExpansionPage extends Page {
         super(...args);
     }
 
+    header = {
+        subtitle: "Automatic source data detection for multiple subjects / sessions",
+    };
+
     beforeSave = async () => {
         const globalState = this.info.globalState;
         merge({ structure: this.localState }, globalState); // Merge the actual entries into the structure
@@ -140,7 +144,6 @@ export class GuidedPathExpansionPage extends Page {
 
     optional = new OptionalSection({
         header: "Would you like to locate data programmatically?",
-        description: html`<p>Automatically detect source data for multiple subjects and sessions.</p>`,
         onChange: () => (this.unsavedUpdates = true),
         // altContent: this.altForm,
     });
@@ -179,6 +182,7 @@ export class GuidedPathExpansionPage extends Page {
         pathExpansionInfoBox.style.margin = "10px 0px";
 
         this.optional.innerHTML = "";
+        this.optional.style.marginTop = "15px";
         this.optional.append(pathExpansionInfoBox, form);
 
         form.style.width = "100%";

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

@@ -19,6 +19,10 @@ export class GuidedSourceDataPage extends ManagedPage {
         merge(this.localState, this.info.globalState);
     };
 
+    header = {
+        subtitle: "Essential information about the source files for this conversion",
+    };
+
     footer = {
         next: "Request Metadata Schema",
         onNext: async () => {

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

@@ -29,6 +29,10 @@ export class GuidedStructurePage extends Page {
         this.searchModal.appendChild(this.search);
     }
 
+    header = {
+        subtitle: "Required interfaces for this conversion",
+    };
+
     search = new Search({
         showAllWhenEmpty: true,
     });

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

@@ -22,6 +22,10 @@ export class GuidedUploadPage extends Page {
         if (isNewDandiset) delete globalState.upload.results; // Clear the preview results entirely if a new dandiset
     };
 
+    header = {
+        subtitle: "Settings to upload your conversion to the DANDI Archive",
+    };
+
     footer = {
         next: "Upload Project",
         onNext: async () => {

src/renderer/src/stories/pages/guided-mode/results/GuidedResults.js

@@ -16,7 +16,7 @@ export class GuidedResultsPage extends Page {
 
         const { dandiset_id } = this.info.globalState.upload?.info ?? {};
 
-        return new DandiResults({ id: dandiset_id, files: conversion });
+        return html`<div style="padding: 10px 20px;">${new DandiResults({ id: dandiset_id, files: conversion })}</div>`;
     }
 }
 

src/renderer/src/stories/pages/guided-mode/setup/GuidedNewDatasetInfo.js

@@ -28,6 +28,10 @@ export class GuidedNewDatasetPage extends Page {
 
     #nameNotification;
 
+    header = {
+        subtitle: "Essential metadata for pipeline creation",
+    };
+
     footer = {
         onNext: async () => {
             const globalState = this.info.globalState.project;
@@ -89,8 +93,14 @@ export class GuidedNewDatasetPage extends Page {
             info.title = `${info.label} Global Metadata`;
             return info;
         });
+        console.log(pages);
 
-        pages.forEach((page) => this.addPage(page.info.label, page));
+        pages.forEach((page) => {
+            page.header = {
+                subtitle: `Uniform ${page.info.label} metadata across all sessions`,
+            };
+            this.addPage(page.info.label, page);
+        });
 
         this.form = new JSONSchemaForm({
             schema,

src/renderer/src/stories/pages/guided-mode/setup/GuidedSubjects.js

@@ -13,7 +13,7 @@ export class GuidedSubjectsPage extends Page {
     }
 
     header = {
-        subtitle: "Cross-session metadata applied to the final file metadata",
+        subtitle: "Uniform metadata for the subjects included in this conversion",
     };
 
     beforeSave = () => {