Merge pull request #377 from NeurodataWithoutBorders/user-testing-1

Cosmetic updates from User Test 1

paths.config.json

@@ -3,7 +3,7 @@
     "subfolders": {
         "progress": ["pipelines"],
         "conversions": ["conversions"],
-        "stubs": ["stubs"],
+        "preview": ["preview"],
         "tutorial": ["tutorial"]
     }
 }

pyflask/app.py

@@ -84,8 +84,8 @@ def send_conversions(path):
     return send_from_directory(CONVERSION_SAVE_FOLDER_PATH, path)
 
 
-@app.route("/stubs/<path:path>")
-def send_stubs(path):
+@app.route("/preview/<path:path>")
+def send_preview(path):
     return send_from_directory(STUB_SAVE_FOLDER_PATH, path)
 
 

pyflask/manageNeuroconv/info/urls.py

@@ -20,7 +20,7 @@ def resource_path(relative_path):
 )  # NOTE: Must have pyflask for running the GUIDE as a whole, but errors for just the server
 f = path_config.open()
 data = json.load(f)
-STUB_SAVE_FOLDER_PATH = Path(Path.home(), data["root"], *data["subfolders"]["stubs"])
+STUB_SAVE_FOLDER_PATH = Path(Path.home(), data["root"], *data["subfolders"]["preview"])
 CONVERSION_SAVE_FOLDER_PATH = Path(Path.home(), data["root"], *data["subfolders"]["conversions"])
 TUTORIAL_SAVE_FOLDER_PATH = Path(Path.home(), data["root"], *data["subfolders"]["tutorial"])
 

schemas/json/project/globals.json

@@ -6,10 +6,10 @@
             "description": "Provide a custom output location for your NWB files. Will default to ~/NWB_GUIDE/conversions"
         },
 
-        "stub_output_folder": {
+        "preview_output_folder": {
             "type": "string",
             "format": "directory",
-            "description": "Provide a custom output location for your NWB stub files. Will default to ~/NWB_GUIDE/stubs"
+            "description": "Provide a custom output location for your NWB stub files. Will default to ~/NWB_GUIDE/preview. These files are expected to much smaller than the conversion files (only ~MB in scale)."
         }
     }
 }

src/renderer/src/dependencies/simple.js

@@ -12,8 +12,8 @@ export const homeDirectory = app?.getPath("home") ?? "";
 export const appDirectory = homeDirectory ? joinPath(homeDirectory, paths.root) : "";
 export const guidedProgressFilePath = homeDirectory ? joinPath(appDirectory, ...paths.subfolders.progress) : "";
 
-export const stubSaveFolderPath = homeDirectory
-    ? joinPath(homeDirectory, paths["root"], ...paths.subfolders.stubs)
+export const previewSaveFolderPath = homeDirectory
+    ? joinPath(homeDirectory, paths["root"], ...paths.subfolders.preview)
     : "";
 export const conversionSaveFolderPath = homeDirectory
     ? joinPath(homeDirectory, paths["root"], ...paths.subfolders.conversions)

src/renderer/src/progress/index.js

@@ -1,13 +1,6 @@
 import Swal from "sweetalert2";
 
-import {
-    guidedProgressFilePath,
-    reloadPageToHome,
-    isStorybook,
-    appDirectory,
-    stubSaveFolderPath,
-    conversionSaveFolderPath,
-} from "../dependencies/simple.js";
+import { guidedProgressFilePath, reloadPageToHome, isStorybook, appDirectory } from "../dependencies/simple.js";
 import { fs } from "../electron/index.js";
 import { joinPath, runOnLoad } from "../globals.js";
 import { merge } from "../stories/pages/utils.js";

src/renderer/src/progress/operations.js

@@ -1,5 +1,5 @@
 import { joinPath } from "../globals";
-import { conversionSaveFolderPath, guidedProgressFilePath, stubSaveFolderPath } from "../dependencies/simple";
+import { conversionSaveFolderPath, guidedProgressFilePath, previewSaveFolderPath } from "../dependencies/simple";
 import { fs } from "../electron";
 
 export const remove = (name) => {
@@ -11,8 +11,8 @@ export const remove = (name) => {
     else localStorage.removeItem(progressFilePathToDelete);
 
     if (fs) {
-        // delete default stub location
-        fs.rmSync(joinPath(stubSaveFolderPath, name), { recursive: true, force: true });
+        // delete default preview location
+        fs.rmSync(joinPath(previewSaveFolderPath, name), { recursive: true, force: true });
 
         // delete default conversion location
         fs.rmSync(joinPath(conversionSaveFolderPath, name), { recursive: true, force: true });

src/renderer/src/stories/Main.js

@@ -4,6 +4,8 @@ import { GuidedFooter } from "./pages/guided-mode/GuidedFooter";
 import { GuidedCapsules } from "./pages/guided-mode/GuidedCapsules.js";
 import { GuidedHeader } from "./pages/guided-mode/GuidedHeader.js";
 
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+
 const componentCSS = `
     :host {
         display: grid;
@@ -147,7 +149,7 @@ export class Main extends LitElement {
                               >
                                   <div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
                                       <h1 class="title" style="margin: 0; padding: 0;">${title}</h1>
-                                      <small style="color: gray;">${subtitle}</small>
+                                      <small style="color: gray;">${unsafeHTML(subtitle)}</small>
                                   </div>
                                   <div style="padding-left: 25px">${controls}</div>
                               </div>

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/Page.js

@@ -156,7 +156,7 @@ export class Page extends LitElement {
             const { subject, session, globalState = this.info.globalState } = info;
             const file = `sub-${subject}/sub-${subject}_ses-${session}.nwb`;
 
-            const { conversion_output_folder, stub_output_folder, name } = globalState.project;
+            const { conversion_output_folder, preview_output_folder, name } = globalState.project;
 
             // Resolve the correct session info from all of the metadata for this conversion
             const sessionInfo = {
@@ -166,7 +166,7 @@ export class Page extends LitElement {
 
             const result = await runConversion(
                 {
-                    output_folder: conversionOptions.stub_test ? stub_output_folder : conversion_output_folder,
+                    output_folder: conversionOptions.stub_test ? preview_output_folder : conversion_output_folder,
                     project_name: name,
                     nwbfile_path: file,
                     overwrite: true, // We assume override is true because the native NWB file dialog will not allow the user to select an existing file (unless they approve the overwrite)

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

@@ -17,6 +17,11 @@ export class GuidedSourceDataPage extends ManagedPage {
         merge(this.localState, this.info.globalState);
     };
 
+    header = {
+        subtitle:
+            "Specify the file and folder locations on your local system for each interface, as well as any additional details that might be required",
+    };
+
     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: "Select all interfaces which apply to this experiment",
+    };
+
     search = new Search({
         showAllWhenEmpty: true,
     });

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

@@ -33,7 +33,7 @@ export class GuidedInspectorPage extends Page {
     }
 
     header = {
-        subtitle: () => `${getStubArray(this.info.globalState.preview.stubs).length} Files`,
+        subtitle: `The NWB Inspector has scanned your files for adherence to <a target="_blank" href="https://nwbinspector.readthedocs.io/en/dev/best_practices/best_practices_index.html">best practices</a>`,
         controls: () =>
             html`<nwb-button
                 size="small"

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

@@ -19,7 +19,7 @@ export class GuidedStubPreviewPage extends Page {
     }
 
     header = {
-        subtitle: () => `${getStubArray(this.info.globalState.preview.stubs).length} Files`,
+        subtitle: `Preview file contents on truncated files using the Neurosift application`,
         controls: () =>
             html`<nwb-button
                 size="small"

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: "Enter a name for this pipeline and specify the base folders to save all outputs to",
+    };
+
     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: `Enter any ${page.info.label}-level metadata that can serve as the common default across each experiment session`,
+            };
+            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: "Enter all metadata known about each experiment subject",
     };
 
     beforeSave = () => {

src/renderer/src/stories/preview/Neurosift.js

@@ -5,7 +5,7 @@ import { Loader } from "../Loader";
 
 export function getURLFromFilePath(file, projectName) {
     const regexp = new RegExp(`.+(${projectName}.+)`);
-    return `${baseUrl}/stubs/${file.match(regexp)[1]}`;
+    return `${baseUrl}/preview/${file.match(regexp)[1]}`;
 }
 
 export class Neurosift extends LitElement {