Ensure conversions are synced

src/renderer/src/pages.js

@@ -149,18 +149,21 @@ const pages = {
                 title: "Inspector Report",
                 label: "Inspect files",
                 section: sections[2],
+                sync: ["preview"],
             }),
 
             preview: new GuidedStubPreviewPage({
                 title: "Conversion Preview",
                 label: "Preview files",
                 section: sections[2],
+                sync: ["preview"],
             }),
 
             upload: new GuidedUploadPage({
                 title: "DANDI Upload Options",
                 label: "Upload to DANDI",
                 section: sections[3],
+                sync: ["conversion"],
             }),
 
             review: new GuidedResultsPage({

src/renderer/src/stories/Dashboard.js

@@ -208,17 +208,20 @@ export class Dashboard extends LitElement {
             this.subSidebar.hide();
         }
 
-        page.set(toPass);
+        this.#active.set(toPass, false);
 
-        const projectName = info.globalState?.project?.name;
-        this.subSidebar.header = projectName
-            ? `<h4 style="margin-bottom: 0px;">${projectName}</h4><small>Conversion Pipeline</small>`
-            : projectName;
+        this.#active.checkSyncState().then(() => {
+            this.#active.requestUpdate(); // Re-render page
 
-        // const page = this.getPage(info)
-        this.main.set({
-            page,
-            sections: this.subSidebar.sections ?? {},
+            const projectName = info.globalState?.project?.name;
+            this.subSidebar.header = projectName
+                ? `<h4 style="margin-bottom: 0px;">${projectName}</h4><small>Conversion Pipeline</small>`
+                : projectName;
+
+            this.main.set({
+                page,
+                sections: this.subSidebar.sections ?? {},
+            });
         });
     }
 

src/renderer/src/stories/pages/Page.js

@@ -34,11 +34,11 @@ export class Page extends LitElement {
 
     onSet = () => {}; // User-defined function
 
-    set = (info) => {
+    set = (info, rerender = true) => {
         if (info) {
             Object.assign(this.info, info);
             this.onSet();
-            this.requestUpdate();
+            if (rerender) this.requestUpdate();
         }
     };
 
@@ -115,6 +115,30 @@ export class Page extends LitElement {
 
     mapSessions = (callback, data = this.info.globalState) => mapSessions(callback, data);
 
+    async convert({ preview } = {}) {
+        const key = preview ? "preview" : "conversion";
+
+        delete this.info.globalState[key]; // Clear the preview results
+
+        if (preview) {
+            const stubs = await this.runConversions({ stub_test: true }, undefined, {
+                title: "Running stub conversion on all sessions...",
+            });
+            this.info.globalState[key] = { stubs };
+        } else {
+            this.info.globalState[key] = await this.runConversions({}, true, { title: "Running all conversions" });
+        }
+
+        this.unsavedUpdates = true;
+
+        // Indicate conversion has run successfully
+        const { desyncedData } = this.info.globalState;
+        if (desyncedData) {
+            delete desyncedData[key];
+            if (Object.keys(desyncedData).length === 0) delete this.info.globalState.desyncedData;
+        }
+    }
+
     async runConversions(conversionOptions = {}, toRun, options = {}) {
         let original = toRun;
         if (!Array.isArray(toRun)) toRun = this.mapSessions();
@@ -201,7 +225,31 @@ export class Page extends LitElement {
         this.updatePages();
     };
 
-    unsavedUpdates = false; // Track unsaved updates
+    checkSyncState = async (info = this.info, sync = info.sync) => {
+        if (!sync) return;
+
+        const { desyncedData } = info.globalState;
+        if (desyncedData) {
+            return Promise.all(
+                sync.map((k) => {
+                    if (desyncedData[k]) {
+                        if (k === "conversion") return this.convert();
+                        else if (k === "preview") return this.convert({ preview: true });
+                    }
+                })
+            );
+        }
+    };
+
+    #unsaved = false;
+    get unsavedUpdates() {
+        return this.#unsaved;
+    }
+
+    set unsavedUpdates(value) {
+        this.#unsaved = !!value;
+        if (value === "conversions") this.info.globalState.desyncedData = { preview: true, conversion: true };
+    }
 
     // NOTE: Make sure you call this explicitly if a child class overwrites this AND data is updated
     updated() {

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

@@ -144,12 +144,13 @@ export class GuidedHomePage extends Page {
         }
     };
 
-    resume = async (resumeProgressButton) => {
+    resume = (resumeProgressButton) => {
         resumeProgressButton.classList.add("loading");
         const datasetNameToResume =
             resumeProgressButton.parentNode.parentNode.querySelector(".progress-file-name").innerText;
 
         progress.resume.call(this, datasetNameToResume);
+        resumeProgressButton.classList.remove("loading");
     };
 
     async updated() {

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

@@ -97,7 +97,9 @@ export class ProgressCard extends LitElement {
                           margin: 4px;
                           margin-bottom: 15px;
                         "
-                            @click="${(ev) => this.resume(ev.target)}"
+                            @click="${(ev) => {
+                                this.resume(ev.target);
+                            }}"
                         >
                             Resume Conversion
                         </button>

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

@@ -72,19 +72,7 @@ export class GuidedMetadataPage extends ManagedPage {
 
             for (let { form } of this.forms) await form.validate(); // Will throw an error in the callback
 
-            // Preview a single random conversion
-            delete this.info.globalState.preview; // Clear the preview results
-
-            const stubs = await this.runConversions({ stub_test: true }, undefined, {
-                title: "Running stub conversion on all sessions...",
-            });
-
-            // Save the preview results
-            this.info.globalState.preview = {
-                stubs,
-            };
-
-            this.unsavedUpdates = true;
+            await this.convert({ preview: true });
 
             this.to(1);
         },
@@ -187,7 +175,7 @@ export class GuidedMetadataPage extends ManagedPage {
             },
 
             onUpdate: () => {
-                this.unsavedUpdates = true;
+                this.unsavedUpdates = "conversions";
             },
 
             validateOnChange,

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

@@ -256,7 +256,7 @@ export class GuidedPathExpansionPage extends Page {
         this.optional = new OptionalSection({
             header: "Will you locate your files programmatically?",
             description: infoBox,
-            onChange: () => (this.unsavedUpdates = true),
+            onChange: () => (this.unsavedUpdates = "conversions"),
             // altContent: this.altForm,
         });
 
@@ -285,7 +285,7 @@ export class GuidedPathExpansionPage extends Page {
 
             // NOTE: These are custom coupled form inputs
             onUpdate: (path, value) => {
-                this.unsavedUpdates = true;
+                this.unsavedUpdates = "conversions";
 
                 const parentPath = [...path];
                 const name = parentPath.pop();
@@ -366,7 +366,7 @@ export class GuidedPathExpansionPage extends Page {
 
         this.dataManagementForm = new JSONSchemaForm({
             results: { keep_existing_data: structureState.keep_existing_data },
-            onUpdate: () => (this.unsavedUpdates = true),
+            onUpdate: () => (this.unsavedUpdates = "conversions"),
             schema: {
                 type: "object",
                 properties: {

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

@@ -163,9 +163,7 @@ export class GuidedSourceDataPage extends ManagedPage {
                 this.notify(`<b>${header(name)}</b> has been overriden with a global value.`, "warning", 3000);
             },
             // onlyRequired: true,
-            onUpdate: () => {
-                this.unsavedUpdates = true;
-            },
+            onUpdate: () => (this.unsavedUpdates = "conversions"),
             onStatusChange: (state) => this.manager.updateState(instanceId, state),
             onThrow,
         });

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

@@ -50,7 +50,7 @@ export class GuidedStructurePage extends Page {
 
     list = new List({
         emptyMessage: defaultEmptyMessage,
-        onChange: () => (this.unsavedUpdates = true),
+        onChange: () => (this.unsavedUpdates = "conversions"),
     });
 
     addButton = new Button();

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

@@ -74,6 +74,8 @@ export class GuidedInspectorPage extends Page {
         const { globalState } = this.info;
         const { stubs, inspector } = globalState.preview;
 
+        console.log("Already got", inspector);
+
         const opts = {}; // NOTE: Currently options are handled on the Python end until exposed to the user
         const title = "Inspecting your file";
 
@@ -98,22 +100,30 @@ export class GuidedInspectorPage extends Page {
                         const items =
                             inspector ??
                             removeFilePaths(
-                                (this.unsavedUpdates = globalState.preview.inspector =
-                                    await run(
-                                        "inspect_file",
-                                        { nwbfile_path: fileArr[0].info.file, ...opts },
-                                        { title }
-                                    ))
+                                (globalState.preview.inspector = await run(
+                                    "inspect_file",
+                                    { nwbfile_path: fileArr[0].info.file, ...opts },
+                                    { title }
+                                ))
                             );
+
+                        if (!inspector) await this.save();
+
                         return new InspectorList({ items, emptyMessage });
                     }
 
                     const items = await (async () => {
                         const path = getSharedPath(fileArr.map((o) => o.info.file));
                         const report =
                             inspector ??
-                            (this.unsavedUpdates = globalState.preview.inspector =
-                                await run("inspect_folder", { path, ...opts }, { title: title + "s" }));
+                            (globalState.preview.inspector = await run(
+                                "inspect_folder",
+                                { path, ...opts },
+                                { title: title + "s" }
+                            ));
+
+                        if (!inspector) await this.save();
+
                         return truncateFilePaths(report, path);
                     })();
 

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

@@ -40,12 +40,7 @@ export class GuidedStubPreviewPage extends Page {
         onNext: async () => {
             await this.save(); // Save in case the conversion fails
 
-            delete this.info.globalState.conversion;
-            this.info.globalState.conversion = await this.runConversions({}, true, {
-                title: "Running all conversions",
-            });
-
-            await this.save(); // Save the conversion results
+            await this.convert();
 
             this.to(1);
         },

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

@@ -125,7 +125,7 @@ export class GuidedSubjectsPage extends Page {
                 this.notify(`<b>${header(name)}</b> has been overriden with a global value.`, "warning", 3000);
             },
             onUpdate: () => {
-                this.unsavedUpdates = true;
+                this.unsavedUpdates = "conversions";
             },
             validateOnChange: (key, parent, v) => {
                 if (key === "sessions") {

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

@@ -87,7 +87,7 @@ export class Neurosift extends LitElement {
                       src="https://flatironinstitute.github.io/neurosift/?p=/nwb&url=${this.url}"
                       @load=${function () {
                           const loader = this.shadowRoot.querySelector(".loader-container");
-                          loader.remove();
+                          if (loader) loader.remove();
                       }}
                   ></iframe>`
             : ``;