Pre-Form Basic Implementation (#633)

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Co-authored-by: Cody Baker <[email protected]>

.codespellrc

@@ -1,3 +1,3 @@
 [codespell]
-ignore-words-list= afterall
+ignore-words-list= afterall,preform
 skip = .git,*.svg,package-lock.json,node_modules,*lotties*,nwb-guide.spec,prepare_pyinstaller_spec.py

src/renderer/src/pages.js

@@ -27,6 +27,7 @@ import { UploadsPage } from "./stories/pages/uploads/UploadsPage";
 import { SettingsPage } from "./stories/pages/settings/SettingsPage";
 import { InspectPage } from "./stories/pages/inspect/InspectPage";
 import { PreviewPage } from "./stories/pages/preview/PreviewPage";
+import { GuidedPreform } from "./stories/pages/guided-mode/setup/Preform";
 
 let dashboard = document.querySelector("nwb-dashboard");
 if (!dashboard) dashboard = new Dashboard();
@@ -93,6 +94,12 @@ const pages = {
                 section: sections[0],
             }),
 
+            workflow: new GuidedPreform({
+                title: "Pipeline Workflow",
+                label: "Pipeline workflow",
+                section: sections[0],
+            }),
+
             structure: new GuidedStructurePage({
                 title: "Provide Data Formats",
                 label: "Data formats",

src/renderer/src/progress/operations.js

@@ -12,8 +12,6 @@ export const remove = (name) => {
     } else localStorage.removeItem(progressFilePathToDelete);
 
     if (fs) {
-        console.log(previewSaveFolderPath, conversionSaveFolderPath, name);
-
         // delete default preview location
         fs.rmSync(joinPath(previewSaveFolderPath, name), { recursive: true, force: true });
 

src/renderer/src/stories/Dashboard.js

@@ -157,6 +157,8 @@ export class Dashboard extends LitElement {
 
             while (latest && !this.pagesById[latest]) latest = latest.split("/").slice(0, -1).join("/"); // Trim off last character until you find a page
 
+            // Update sidebar states
+
             this.sidebar.selectItem(latest); // Just highlight the item
             this.sidebar.initialize = false;
             this.#activatePage(latest);
@@ -214,8 +216,6 @@ export class Dashboard extends LitElement {
         this.page.set(toPass, false);
 
         this.page.checkSyncState().then(() => {
-            this.page.requestUpdate(); // Re-render page
-
             const projectName = info.globalState?.project?.name;
 
             this.subSidebar.header = projectName
@@ -228,6 +228,18 @@ export class Dashboard extends LitElement {
             });
 
             if (this.#transitionPromise.value) this.#transitionPromise.trigger(page); // This ensures calls to page.to() can be properly awaited until the next page is ready
+
+            const { skipped } = this.subSidebar.sections[info.section]?.pages?.[info.id] ?? {};
+            if (skipped) {
+                // Run skip functions
+                Object.entries(page.workflow).forEach(([key, state]) => {
+                    if (typeof state.skip === "function") state.skip();
+                });
+
+                // Skip right over the page if configured as such
+                if (previous.info.previous === this.page) this.page.onTransition(-1);
+                else this.page.onTransition(1);
+            }
         });
     }
 
@@ -260,6 +272,17 @@ export class Dashboard extends LitElement {
                 state.active = false;
                 pageState.active = false;
 
+                // Check if page is skipped based on workflow state (if applicable)
+                if (page.workflow) {
+                    const workflow = page.workflow;
+                    const workflowValues = globalState.project?.workflow ?? {};
+                    const skipped = Object.entries(workflow).some(([key, state]) => {
+                        if (!workflowValues[key]) return state.skip;
+                    });
+
+                    pageState.skipped = skipped;
+                }
+
                 if (page.info.pages) this.#getSections(page.info.pages, globalState); // Show all states
 
                 if (!("visited" in pageState)) pageState.visited = false;

src/renderer/src/stories/JSONSchemaInput.js

@@ -541,6 +541,8 @@ export class JSONSchemaInput extends LitElement {
         if (!forceValidate) {
             // Update the actual input element
             const inputElement = this.getElement();
+            if (!inputElement) return false;
+
             if (inputElement.type === "checkbox") inputElement.checked = value;
             else if (inputElement.classList.contains("list")) {
                 const list = inputElement.children[0];

src/renderer/src/stories/Main.js

@@ -60,6 +60,24 @@ export class Main extends LitElement {
         page.onTransition = this.onTransition;
         page.updatePages = this.updatePages;
 
+        // Constrain based on workflow configuration
+        const workflowConfig = page.workflow ?? (page.workflow = {});
+        const workflowValues = page.info.globalState?.project?.workflow ?? {};
+
+        Object.entries(workflowConfig).forEach(([key, state]) => {
+            workflowConfig[key].value = workflowValues[key];
+
+            const value = workflowValues[key];
+
+            if (state.elements) {
+                const elements = state.elements;
+                if (value) elements.forEach((el) => el.removeAttribute("hidden"));
+                else elements.forEach((el) => el.setAttribute("hidden", true));
+            }
+        });
+
+        page.requestUpdate(); // Ensure the page is re-rendered with new workflow configurations
+
         if (this.content) this.toRender = toRender.page ? toRender : { page };
         else this.#queue.push(page);
     }
@@ -130,7 +148,6 @@ export class Main extends LitElement {
 
                 if (header === true || !("header" in page) || !("sections" in page.header)) {
                     const sectionNames = Object.keys(sections);
-
                     header = page.header && typeof page.header === "object" ? page.header : {};
                     header.sections = sectionNames;
                     header.selected = sectionNames.indexOf(info.section);

src/renderer/src/stories/NavigationSidebar.js

@@ -129,7 +129,7 @@ export class NavigationSidebar extends LitElement {
               class="
                 guided--nav-bar-section-page
                 hidden
-                ${state.visited ? " completed" : " not-completed"}
+                ${state.visited && !state.skipped ? " completed" : " not-completed"}
                 ${state.active ? "active" : ""}"f
               "
               @click=${() => this.onClick(id)}

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

@@ -100,17 +100,23 @@ export class GuidedMetadataPage extends ManagedPage {
 
     form;
 
+    #globalButton = new Button({
+        icon: globalIcon,
+        label: "Edit Global Metadata",
+        onClick: () => {
+            this.#globalModal.form.results = structuredClone(this.info.globalState.project);
+            this.#globalModal.open = true;
+        },
+    });
+
+    workflow = {
+        multiple_sessions: {
+            elements: [this.#globalButton],
+        },
+    };
+
     header = {
-        controls: [
-            new Button({
-                icon: globalIcon,
-                label: "Edit Global Metadata",
-                onClick: () => {
-                    this.#globalModal.form.results = structuredClone(this.info.globalState.project);
-                    this.#globalModal.open = true;
-                },
-            }),
-        ],
+        controls: [this.#globalButton],
         subtitle: "Edit all metadata for this conversion at the session level",
     };
 
@@ -156,14 +162,16 @@ export class GuidedMetadataPage extends ManagedPage {
     }
 
     createForm = ({ subject, session, info }) => {
+        const hasMultipleSessions = this.workflow.multiple_sessions.value;
+
         // const results = createResults({ subject, info }, this.info.globalState);
 
         const { globalState } = this.info;
 
         const results = info.metadata; // Edited form info
 
         // Define the appropriate global metadata to fill empty values in the form
-        const aggregateGlobalMetadata = resolveGlobalOverrides(subject, globalState);
+        const aggregateGlobalMetadata = resolveGlobalOverrides(subject, globalState, hasMultipleSessions);
 
         // Define the correct instance identifier
         const instanceId = `sub-${subject}/ses-${session}`;