From 14bcabbcac89dcf025c5f37ac5d9f99caaa015fe Mon Sep 17 00:00:00 2001
From: Garrett <gflynn@usc.edu>
Date: Wed, 1 Nov 2023 12:56:25 -0700
Subject: [PATCH 01/21] Basic visual disabling

---
 src/renderer/src/stories/Accordion.js       | 108 +++++++++++---------
 src/renderer/src/stories/InstanceManager.js |  13 +--
 src/renderer/src/stories/JSONSchemaForm.js  |  42 +++++---
 3 files changed, 94 insertions(+), 69 deletions(-)

diff --git a/src/renderer/src/stories/Accordion.js b/src/renderer/src/stories/Accordion.js
index cae120639..49deee89d 100644
--- a/src/renderer/src/stories/Accordion.js
+++ b/src/renderer/src/stories/Accordion.js
@@ -23,6 +23,10 @@ export class Accordion extends LitElement {
                 box-sizing: border-box;
             }
 
+            :host {
+                display: block;
+            }
+
             .header {
                 display: flex;
                 align-items: end;
@@ -123,7 +127,7 @@ export class Accordion extends LitElement {
                 content: "${successSymbol}";
             }
 
-            .guided--nav-bar-dropdown:hover {
+            .guided--nav-bar-dropdown.content:hover {
                 cursor: pointer;
                 background-color: lightgray;
             }
@@ -143,34 +147,48 @@ export class Accordion extends LitElement {
                 padding-left: 0px;
                 overflow-y: auto;
             }
+
+            .disabled {
+                opacity: 0.5;
+                pointer-events: none;
+            }
         `;
     }
 
+    // declare info: {
+    //     open: boolean;
+    //     status: "error" | "warning" | "valid";
+    //     disabled: boolean
+    // }
+
     static get properties() {
         return {
-            sections: { type: Object, reflect: false },
+            name: { type: String, reflect: true },
+            info : { type: Object, reflect: true },
         };
     }
 
-    constructor({ sections = {}, contentPadding } = {}) {
+    constructor({ name, subtitle, content, info = {}, contentPadding } = {}) {
         super();
-        this.sections = sections;
+        this.name = name;
+        this.subtitle = subtitle;
+        this.content = content;
+        this.info = info;
         this.contentPadding = contentPadding;
     }
 
     updated() {
-        Object.entries(this.sections).map(([sectionName, info]) => {
-            const isActive = info.open;
-            if (isActive) this.#toggleDropdown(sectionName, true);
-            else this.#toggleDropdown(sectionName, false);
-        });
+        if (!this.content) return
+        const isActive = this.info.open;
+        if (isActive) this.toggle(true);
+        else this.toggle(false);
     }
 
-    setSectionStatus = (sectionName, status) => {
-        const el = this.shadowRoot.querySelector("[data-section-name='" + sectionName + "']");
+    setStatus = (status) => {
+        const el = this.shadowRoot.getElementById('dropdown')
         el.classList.remove("error", "warning", "valid");
         el.classList.add(status);
-        this.sections[sectionName].status = status;
+        this.info.status = status;
     };
 
     onClick = () => {}; // Set by the user
@@ -183,60 +201,52 @@ export class Accordion extends LitElement {
         }
     };
 
-    #toggleDropdown = (sectionName, forcedState) => {
+    toggle = (forcedState) => {
         const hasForce = forcedState !== undefined;
-        const toggledState = !this.sections[sectionName].open;
+        const toggledState = !this.info.open;
 
         let state = hasForce ? forcedState : toggledState;
 
         //remove hidden from child elements with guided--nav-bar-section-page class
-        const section = this.shadowRoot.querySelector("[data-section='" + sectionName + "']");
+        const section = this.shadowRoot.getElementById('section')
         section.toggleAttribute("hidden", hasForce ? !state : undefined);
 
-        const dropdown = this.shadowRoot.querySelector("[data-section-name='" + sectionName + "']");
+        const dropdown = this.shadowRoot.getElementById('dropdown')
         this.#updateClass("active", dropdown, !state);
 
         //toggle the chevron
         const chevron = dropdown.querySelector("nwb-chevron");
         chevron.direction = state ? "bottom" : "right";
 
-        this.sections[sectionName].open = state;
+        this.info.open = state;
     };
 
     render() {
         return html`
-            <ul id="guided-nav-items" class="guided--container-nav-items">
-                ${Object.entries(this.sections)
-                    .map(([sectionName, info]) => {
-                        return html`
-                            <div class="guided--nav-bar-section">
-                                <div
-                                    class="guided--nav-bar-dropdown ${info.status}"
-                                    data-section-name=${sectionName}
-                                    @click=${() => this.#toggleDropdown(sectionName, undefined)}
-                                >
-                                    <div class="header">
-                                        <span>${sectionName}</span>
-                                        <small>${info.subtitle}</small>
-                                    </div>
-                                    ${new Chevron({
-                                        direction: "right",
-                                        color: faColor,
-                                        size: faSize,
-                                    })}
-                                </div>
-                                <div
-                                    data-section="${sectionName}"
-                                    class="content hidden"
-                                    style="padding: ${this.contentPadding ?? "25px"}"
-                                >
-                                    ${info.content}
-                                </div>
-                            </div>
-                        `;
-                    })
-                    .flat()}
-            </ul>
+                <div class="guided--nav-bar-section">
+                    <div
+                        id="dropdown"
+                        class="guided--nav-bar-dropdown ${this.content && 'content'} ${this.info.disabled ? "disabled" : ''} ${this.info.status}"
+                        @click=${() => this.content && this.toggle()}
+                    >
+                        <div class="header">
+                            <span>${this.name}</span>
+                            <small>${this.subtitle}</small>
+                        </div>
+                        ${this.content && new Chevron({
+                            direction: "right",
+                            color: faColor,
+                            size: faSize,
+                        })}
+                    </div>
+                    ${this.content ? html`<div
+                        id="section"
+                        class="content hidden"
+                        style="padding: ${this.contentPadding ?? "25px"}"
+                    >
+                        ${this.content}
+                    </div>` : ''}
+                </div>
         `;
     }
 }
diff --git a/src/renderer/src/stories/InstanceManager.js b/src/renderer/src/stories/InstanceManager.js
index 3336dec28..dad1b7d31 100644
--- a/src/renderer/src/stories/InstanceManager.js
+++ b/src/renderer/src/stories/InstanceManager.js
@@ -124,6 +124,10 @@ export class InstanceManager extends LitElement {
             #new-info > input {
                 margin-right: 10px;
             }
+
+            nwb-accordion {
+                margin-bottom: 0.5em;
+            }
         `;
     }
 
@@ -161,7 +165,7 @@ export class InstanceManager extends LitElement {
             const id = path.slice(0, i + 1).join("/");
             const accordion = this.#accordions[id];
             target = target[path[i]]; // Progressively check the deeper nested instances
-            if (accordion) accordion.setSectionStatus(id, checkStatus(false, false, [...Object.values(target)]));
+            if (accordion) accordion.setStatus(checkStatus(false, false, [...Object.values(target)]));
         }
     };
 
@@ -299,11 +303,8 @@ export class InstanceManager extends LitElement {
                 const list = this.#render(value, [...path, key]);
 
                 const accordion = new Accordion({
-                    sections: {
-                        [key]: {
-                            content: list,
-                        },
-                    },
+                    name: key,
+                    content: list,
                     contentPadding: "10px",
                 });
 
diff --git a/src/renderer/src/stories/JSONSchemaForm.js b/src/renderer/src/stories/JSONSchemaForm.js
index 05d5fdda8..9201e250c 100644
--- a/src/renderer/src/stories/JSONSchemaForm.js
+++ b/src/renderer/src/stories/JSONSchemaForm.js
@@ -146,9 +146,8 @@ const componentCSS = `
         line-height: 1.4285em;
     }
 
-    [disabled] {
-        opacity: 0.5;
-        pointer-events: none;
+    nwb-accordion {
+        margin-bottom: 0.5em;
     }
 `;
 
@@ -848,7 +847,10 @@ export class JSONSchemaForm extends LitElement {
 
                 // Check properties that will be rendered before creating the accordion
                 const base = [...this.base, ...localPath];
-                const renderable = this.#getRenderable(info, required[name], base);
+
+                const renderable = this.#getRenderable(info, required[name], localPath, true);
+
+                const explicitlyRequired = schema.required?.includes(name) ?? false;
 
                 if (renderable.length) {
                     this.#nestedForms[name] = new JSONSchemaForm({
@@ -878,7 +880,7 @@ export class JSONSchemaForm extends LitElement {
                         onThrow: (...args) => this.onThrow(...args),
                         validateEmptyValues: this.validateEmptyValues,
                         onStatusChange: (status) => {
-                            accordion.setSectionStatus(headerName, status);
+                            accordion.setStatus(status);
                             this.checkStatus();
                         }, // Forward status changes to the parent form
                         onInvalid: (...args) => this.onInvalid(...args),
@@ -893,21 +895,33 @@ export class JSONSchemaForm extends LitElement {
                 }
 
                 if (!this.states[headerName]) this.states[headerName] = {};
-                this.states[headerName].subtitle = `${
-                    this.#getRenderable(info, required[name], localPath, true).length
-                } fields`;
-                this.states[headerName].content = this.#nestedForms[name];
+
+                const enableToggle = document.createElement('input')
+
+                Object.assign(enableToggle, {
+                    type: 'checkbox',
+                    checked: true,
+                    style: 'margin-right: 10px; pointer-events:all;',
+                })
+
+                enableToggle.addEventListener('click', (e) => {
+                    e.stopPropagation()
+                    const { checked } = e.target
+                    if (checked) accordion.info = { ...accordion.info, disabled: false }
+                    else {
+                        accordion.info = { ...accordion.info, disabled: true, open: false }
+                    }
+                })
 
                 const accordion = new Accordion({
-                    sections: {
-                        [headerName]: this.states[headerName],
-                    },
+                    name: headerName,
+                    subtitle:html`<div style="display:flex; align-items: center;">${explicitlyRequired ? '' : enableToggle}${renderable.length ? `${renderable.length} fields` : ''}</div>`,
+                    content: this.#nestedForms[name], 
+                    info: this.states[headerName]
                 });
 
                 accordion.id = name; // assign name to accordion id
 
-                if (!renderable.length) accordion.setAttribute("disabled", "");
-
                 return accordion;
             }
 

From cf00ffda40e56ee54237b78528232c0e5333de9c Mon Sep 17 00:00:00 2001
From: Garrett <gflynn@usc.edu>
Date: Wed, 1 Nov 2023 14:16:30 -0700
Subject: [PATCH 02/21] Force accordion mode

---
 src/renderer/src/stories/Accordion.js         |  42 +++++---
 src/renderer/src/stories/JSONSchemaForm.js    | 100 +++++++-----------
 .../src/stories/JSONSchemaForm.stories.js     |  10 +-
 src/renderer/src/stories/pages/FormPage.js    |   5 +-
 .../pages/guided-mode/data/GuidedMetadata.js  |   1 -
 .../guided-mode/data/GuidedSourceData.js      |   1 -
 .../stories/pages/settings/SettingsPage.js    |   1 -
 7 files changed, 74 insertions(+), 86 deletions(-)

diff --git a/src/renderer/src/stories/Accordion.js b/src/renderer/src/stories/Accordion.js
index 49deee89d..58c318b0c 100644
--- a/src/renderer/src/stories/Accordion.js
+++ b/src/renderer/src/stories/Accordion.js
@@ -111,10 +111,14 @@ export class Accordion extends LitElement {
             .guided--nav-bar-dropdown::after {
                 font-size: 0.8em;
                 position: absolute;
-                right: 50px;
+                right: 25px;
                 font-family: ${unsafeCSS(emojiFontFamily)};
             }
 
+            .guided--nav-bar-dropdown.toggleable::after {
+                right: 50px;
+            }
+
             .guided--nav-bar-dropdown.error::after {
                 content: "${errorSymbol}";
             }
@@ -127,7 +131,7 @@ export class Accordion extends LitElement {
                 content: "${successSymbol}";
             }
 
-            .guided--nav-bar-dropdown.content:hover {
+            .guided--nav-bar-dropdown.toggleable:hover {
                 cursor: pointer;
                 background-color: lightgray;
             }
@@ -168,20 +172,20 @@ export class Accordion extends LitElement {
         };
     }
 
-    constructor({ name, subtitle, content, info = {}, contentPadding } = {}) {
+
+    constructor({ name, subtitle, toggleable= true, content, info = {}, contentPadding } = {}) {
         super();
         this.name = name;
         this.subtitle = subtitle;
         this.content = content;
         this.info = info;
+        this.toggleable = toggleable;
         this.contentPadding = contentPadding;
     }
 
     updated() {
         if (!this.content) return
-        const isActive = this.info.open;
-        if (isActive) this.toggle(true);
-        else this.toggle(false);
+        this.toggle(!!this.info.open)
     }
 
     setStatus = (status) => {
@@ -205,7 +209,8 @@ export class Accordion extends LitElement {
         const hasForce = forcedState !== undefined;
         const toggledState = !this.info.open;
 
-        let state = hasForce ? forcedState : toggledState;
+        const desiredState = hasForce ? forcedState : toggledState
+        const state = this.toOpen(desiredState);
 
         //remove hidden from child elements with guided--nav-bar-section-page class
         const section = this.shadowRoot.getElementById('section')
@@ -216,32 +221,41 @@ export class Accordion extends LitElement {
 
         //toggle the chevron
         const chevron = dropdown.querySelector("nwb-chevron");
-        chevron.direction = state ? "bottom" : "right";
+        if (chevron) chevron.direction = state ? "bottom" : "right";
 
-        this.info.open = state;
+        if (desiredState === state) this.info.open = state; // Update state if not overridden
     };
 
+    toOpen = (state = this.info.open) => {
+        if (!this.toggleable) return true // Force open if not toggleable
+        else if (this.info.disabled) return false // Force closed if disabled
+        return state
+    }
+
     render() {
+
+        const isToggleable = this.content && this.toggleable;
+
         return html`
                 <div class="guided--nav-bar-section">
                     <div
                         id="dropdown"
-                        class="guided--nav-bar-dropdown ${this.content && 'content'} ${this.info.disabled ? "disabled" : ''} ${this.info.status}"
-                        @click=${() => this.content && this.toggle()}
+                        class="guided--nav-bar-dropdown ${isToggleable && 'toggleable'} ${this.info.disabled ? "disabled" : ''} ${this.info.status}"
+                        @click=${() =>isToggleable && this.toggle()}
                     >
                         <div class="header">
                             <span>${this.name}</span>
                             <small>${this.subtitle}</small>
                         </div>
-                        ${this.content && new Chevron({
+                        ${isToggleable ? new Chevron({
                             direction: "right",
                             color: faColor,
                             size: faSize,
-                        })}
+                        }) : ''}
                     </div>
                     ${this.content ? html`<div
                         id="section"
-                        class="content hidden"
+                        class="content hidden ${this.info.disabled ? "disabled" : ''}"
                         style="padding: ${this.contentPadding ?? "25px"}"
                     >
                         ${this.content}
diff --git a/src/renderer/src/stories/JSONSchemaForm.js b/src/renderer/src/stories/JSONSchemaForm.js
index 9201e250c..7c28e186a 100644
--- a/src/renderer/src/stories/JSONSchemaForm.js
+++ b/src/renderer/src/stories/JSONSchemaForm.js
@@ -149,6 +149,11 @@ const componentCSS = `
     nwb-accordion {
         margin-bottom: 0.5em;
     }
+
+    [disabled]{
+        opacity: 0.5;
+        pointer-events: none;
+    }
 `;
 
 document.addEventListener("dragover", (e) => {
@@ -163,7 +168,6 @@ export class JSONSchemaForm extends LitElement {
 
     static get properties() {
         return {
-            mode: { type: String, reflect: true },
             schema: { type: Object, reflect: false },
             results: { type: Object, reflect: false },
             required: { type: Object, reflect: false },
@@ -199,7 +203,6 @@ export class JSONSchemaForm extends LitElement {
         this.#rendered = this.#updateRendered(true);
 
         this.identifier = props.identifier;
-        this.mode = props.mode ?? "default";
         this.schema = props.schema ?? {};
         this.results = (props.base ? structuredClone(props.results) : props.results) ?? {}; // Deep clone results in nested forms
         this.globals = props.globals ?? {};
@@ -243,8 +246,7 @@ export class JSONSchemaForm extends LitElement {
         const copy = [...path];
         const tableName = copy.pop();
 
-        if (this.mode === "accordion") return this.getForm(copy).getTable(tableName);
-        else return this.shadowRoot.getElementById(path.join("-")).children[1].shadowRoot.children[0]; // Get table from UI container, then JSONSchemaInput
+        return this.getForm(copy).getTable(tableName)
     };
 
     getForm = (path) => {
@@ -842,32 +844,30 @@ export class JSONSchemaForm extends LitElement {
 
             const localPath = [...path, name];
 
-            if (this.mode === "accordion" && hasMany) {
-                const headerName = header(name);
+            const enableToggle = document.createElement('input')
+
+            // Check properties that will be rendered before creating the accordion
+            const base = [...this.base, ...localPath];
+
+            const explicitlyRequired = schema.required?.includes(name) ?? false;
+
+            Object.assign(enableToggle, {
+                type: 'checkbox',
+                checked: true,
+                style: 'margin-right: 10px; pointer-events:all;',
+            })
 
-                // Check properties that will be rendered before creating the accordion
-                const base = [...this.base, ...localPath];
 
-                const renderable = this.#getRenderable(info, required[name], localPath, true);
+            const headerName = header(name);
 
-                const explicitlyRequired = schema.required?.includes(name) ?? false;
+            const renderableInside = this.#getRenderable(info, required[name], localPath, true);
 
-                if (renderable.length) {
-                    this.#nestedForms[name] = new JSONSchemaForm({
+            if (renderableInside.length) {
+                this.#nestedForms[name] = new JSONSchemaForm({
                         identifier: this.identifier,
                         schema: info,
                         results: { ...results[name] },
                         globals: this.globals?.[name],
-
-                        states: this.states,
-
-                        mode: this.mode,
-
-                        onUpdate: (internalPath, value) => {
-                            const path = [...localPath, ...internalPath];
-                            this.updateData(path, value);
-                        },
-
                         required: required[name], // Scoped to the sub-schema
                         ignore: this.ignore,
                         dialogOptions: this.dialogOptions,
@@ -894,48 +894,30 @@ export class JSONSchemaForm extends LitElement {
                     });
                 }
 
-                if (!this.states[headerName]) this.states[headerName] = {};
-
-                const enableToggle = document.createElement('input')
+            if (!this.states[headerName]) this.states[headerName] = { open: !hasMany};
 
-                Object.assign(enableToggle, {
-                    type: 'checkbox',
-                    checked: true,
-                    style: 'margin-right: 10px; pointer-events:all;',
-                })
-
-                enableToggle.addEventListener('click', (e) => {
-                    e.stopPropagation()
-                    const { checked } = e.target
-                    if (checked) accordion.info = { ...accordion.info, disabled: false }
-                    else {
-                        accordion.info = { ...accordion.info, disabled: true, open: false }
-                    }
-                })
+            const accordion = new Accordion({
+                name: headerName,
+                toggleable: hasMany,
+                subtitle:html`<div style="display:flex; align-items: center;">${explicitlyRequired ? '' : enableToggle}${renderableInside.length ? `${renderableInside.length} fields` : ''}</div>`,
+                content: this.#nestedForms[name], 
+                info: this.states[headerName]
+            });
 
-                const accordion = new Accordion({
-                    name: headerName,
-                    subtitle:html`<div style="display:flex; align-items: center;">${explicitlyRequired ? '' : enableToggle}${renderable.length ? `${renderable.length} fields` : ''}</div>`,
-                    content: this.#nestedForms[name], 
-                    info: this.states[headerName]
-                });
+            accordion.id = name; // assign name to accordion id
 
-                accordion.id = name; // assign name to accordion id
+            // Set enable / disable behavior
+            enableToggle.addEventListener('click', (e) => {
+                e.stopPropagation()
+                const { checked } = e.target
+                if (checked) accordion.info = { ...accordion.info, disabled: false }
+                else {
+                    accordion.info = { ...accordion.info, disabled: true }
+                }
+            })
 
-                return accordion;
-            }
+            return accordion;
 
-            // Render properties in the sub-schema
-            const rendered = this.#render(info, results?.[name], required[name], localPath);
-            return hasMany || path.length > 1
-                ? html`
-                      <div style="margin-top: 40px;">
-                          <label class="guided--form-label header">${header(name)}</label>
-                          <hr />
-                          ${rendered}
-                      </div>
-                  `
-                : rendered;
         });
 
         return rendered;
diff --git a/src/renderer/src/stories/JSONSchemaForm.stories.js b/src/renderer/src/stories/JSONSchemaForm.stories.js
index a59857ef8..63e71610b 100644
--- a/src/renderer/src/stories/JSONSchemaForm.stories.js
+++ b/src/renderer/src/stories/JSONSchemaForm.stories.js
@@ -3,14 +3,7 @@ import { JSONSchemaForm } from "./JSONSchemaForm";
 export default {
     title: "Components/JSON Schema Form",
     // Set controls
-    argTypes: {
-        mode: {
-            options: ["default", "accordion"],
-            control: {
-                type: "select",
-            },
-        },
-    },
+    argTypes: {},
 };
 
 const Template = (args) => new JSONSchemaForm(args);
@@ -53,7 +46,6 @@ Default.args = {
 
 export const Nested = Template.bind({});
 Nested.args = {
-    mode: "accordion",
     results: {
         name: "name",
         ignored: true,
diff --git a/src/renderer/src/stories/pages/FormPage.js b/src/renderer/src/stories/pages/FormPage.js
index ad088732c..f255a5242 100644
--- a/src/renderer/src/stories/pages/FormPage.js
+++ b/src/renderer/src/stories/pages/FormPage.js
@@ -25,7 +25,10 @@ export function schemaToPages(schema, globalStatePath, options, transformationCa
                     globalStatePath,
                     formOptions: {
                         ...optionsCopy,
-                        schema: { properties: { [key]: value } },
+                        schema: { 
+                            properties: { [key]: value },
+                            required: [ key ]
+                        },
                     },
                 })
             );
diff --git a/src/renderer/src/stories/pages/guided-mode/data/GuidedMetadata.js b/src/renderer/src/stories/pages/guided-mode/data/GuidedMetadata.js
index a67fa149a..449d922cd 100644
--- a/src/renderer/src/stories/pages/guided-mode/data/GuidedMetadata.js
+++ b/src/renderer/src/stories/pages/guided-mode/data/GuidedMetadata.js
@@ -158,7 +158,6 @@ export class GuidedMetadataPage extends ManagedPage {
         // Create the form
         const form = new JSONSchemaForm({
             identifier: instanceId,
-            mode: "accordion",
             schema: preprocessMetadataSchema(schema),
             results,
             globals: aggregateGlobalMetadata,
diff --git a/src/renderer/src/stories/pages/guided-mode/data/GuidedSourceData.js b/src/renderer/src/stories/pages/guided-mode/data/GuidedSourceData.js
index 70fa3bf03..00722a9b9 100644
--- a/src/renderer/src/stories/pages/guided-mode/data/GuidedSourceData.js
+++ b/src/renderer/src/stories/pages/guided-mode/data/GuidedSourceData.js
@@ -136,7 +136,6 @@ export class GuidedSourceDataPage extends ManagedPage {
 
         const form = new JSONSchemaForm({
             identifier: instanceId,
-            mode: "accordion",
             schema: preprocessSourceDataSchema(schema),
             results: info.source_data,
             emptyMessage: "No source data required for this session.",
diff --git a/src/renderer/src/stories/pages/settings/SettingsPage.js b/src/renderer/src/stories/pages/settings/SettingsPage.js
index 03b08ef0b..25543f437 100644
--- a/src/renderer/src/stories/pages/settings/SettingsPage.js
+++ b/src/renderer/src/stories/pages/settings/SettingsPage.js
@@ -64,7 +64,6 @@ export class SettingsPage extends Page {
         this.form = new JSONSchemaForm({
             results: this.localState,
             schema,
-            mode: "accordion",
             onUpdate: () => (this.unsavedUpdates = true),
             validateOnChange: async (name, parent) => {
                 const value = parent[name];

From b74c14fdebd5b9613e1c53f9c093df0fb9fd428f Mon Sep 17 00:00:00 2001
From: Garrett <gflynn@usc.edu>
Date: Wed, 1 Nov 2023 14:17:42 -0700
Subject: [PATCH 03/21] Fix validation

---
 .../src/stories/pages/guided-mode/data/GuidedPathExpansion.js   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderer/src/stories/pages/guided-mode/data/GuidedPathExpansion.js b/src/renderer/src/stories/pages/guided-mode/data/GuidedPathExpansion.js
index 28a9a5591..27f2bcedb 100644
--- a/src/renderer/src/stories/pages/guided-mode/data/GuidedPathExpansion.js
+++ b/src/renderer/src/stories/pages/guided-mode/data/GuidedPathExpansion.js
@@ -299,7 +299,7 @@ export class GuidedPathExpansionPage extends Page {
                 if (fs) {
                     const baseDir = form.getInput([...parentPath, "base_directory"]);
                     if (name === "format_string_path") {
-                        if (value && !baseDir.value) {
+                        if (value && baseDir && !baseDir.value) {
                             return [
                                 {
                                     message: html`A base directory must be provided to locate your files.`,

From 3c69ea432475acd2dd49ac07b46015bfbb47d24f Mon Sep 17 00:00:00 2001
From: Garrett <gflynn@usc.edu>
Date: Wed, 1 Nov 2023 14:27:09 -0700
Subject: [PATCH 04/21] Remove info in accordion. Replace with attributes

---
 src/renderer/src/stories/Accordion.js      | 40 +++++++++++++---------
 src/renderer/src/stories/JSONSchemaForm.js | 15 ++++----
 2 files changed, 33 insertions(+), 22 deletions(-)

diff --git a/src/renderer/src/stories/Accordion.js b/src/renderer/src/stories/Accordion.js
index 58c318b0c..47bffc251 100644
--- a/src/renderer/src/stories/Accordion.js
+++ b/src/renderer/src/stories/Accordion.js
@@ -159,40 +159,48 @@ export class Accordion extends LitElement {
         `;
     }
 
-    // declare info: {
-    //     open: boolean;
-    //     status: "error" | "warning" | "valid";
-    //     disabled: boolean
-    // }
 
     static get properties() {
         return {
             name: { type: String, reflect: true },
-            info : { type: Object, reflect: true },
+            open: { type: Boolean, reflect: true },
+            disabled: { type: Boolean, reflect: true },
+            status: { type: String, reflect: true },
         };
     }
 
 
-    constructor({ name, subtitle, toggleable= true, content, info = {}, contentPadding } = {}) {
+    constructor({ 
+        name, 
+        subtitle, 
+        toggleable= true, 
+        content, 
+        open = false,
+        status,
+        disabled = false,
+        contentPadding 
+    } = {}) {
         super();
         this.name = name;
         this.subtitle = subtitle;
         this.content = content;
-        this.info = info;
+        this.open = open;
+        this.status = status;
+        this.disabled = disabled;
         this.toggleable = toggleable;
         this.contentPadding = contentPadding;
     }
 
     updated() {
         if (!this.content) return
-        this.toggle(!!this.info.open)
+        this.toggle(!!this.open)
     }
 
     setStatus = (status) => {
         const el = this.shadowRoot.getElementById('dropdown')
         el.classList.remove("error", "warning", "valid");
         el.classList.add(status);
-        this.info.status = status;
+        this.status = status;
     };
 
     onClick = () => {}; // Set by the user
@@ -207,7 +215,7 @@ export class Accordion extends LitElement {
 
     toggle = (forcedState) => {
         const hasForce = forcedState !== undefined;
-        const toggledState = !this.info.open;
+        const toggledState = !this.open;
 
         const desiredState = hasForce ? forcedState : toggledState
         const state = this.toOpen(desiredState);
@@ -223,12 +231,12 @@ export class Accordion extends LitElement {
         const chevron = dropdown.querySelector("nwb-chevron");
         if (chevron) chevron.direction = state ? "bottom" : "right";
 
-        if (desiredState === state) this.info.open = state; // Update state if not overridden
+        if (desiredState === state) this.open = state; // Update state if not overridden
     };
 
-    toOpen = (state = this.info.open) => {
+    toOpen = (state = this.open) => {
         if (!this.toggleable) return true // Force open if not toggleable
-        else if (this.info.disabled) return false // Force closed if disabled
+        else if (this.disabled) return false // Force closed if disabled
         return state
     }
 
@@ -240,7 +248,7 @@ export class Accordion extends LitElement {
                 <div class="guided--nav-bar-section">
                     <div
                         id="dropdown"
-                        class="guided--nav-bar-dropdown ${isToggleable && 'toggleable'} ${this.info.disabled ? "disabled" : ''} ${this.info.status}"
+                        class="guided--nav-bar-dropdown ${isToggleable && 'toggleable'} ${this.disabled ? "disabled" : ''} ${this.status}"
                         @click=${() =>isToggleable && this.toggle()}
                     >
                         <div class="header">
@@ -255,7 +263,7 @@ export class Accordion extends LitElement {
                     </div>
                     ${this.content ? html`<div
                         id="section"
-                        class="content hidden ${this.info.disabled ? "disabled" : ''}"
+                        class="content hidden ${this.disabled ? "disabled" : ''}"
                         style="padding: ${this.contentPadding ?? "25px"}"
                     >
                         ${this.content}
diff --git a/src/renderer/src/stories/JSONSchemaForm.js b/src/renderer/src/stories/JSONSchemaForm.js
index 7c28e186a..e38a28638 100644
--- a/src/renderer/src/stories/JSONSchemaForm.js
+++ b/src/renderer/src/stories/JSONSchemaForm.js
@@ -754,6 +754,8 @@ export class JSONSchemaForm extends LitElement {
         }
     };
 
+    #accordions = {};
+
     #render = (schema, results, required = {}, path = []) => {
         let isLink = Symbol("isLink");
         // Filter non-required properties (if specified) and render the sub-schema
@@ -894,14 +896,15 @@ export class JSONSchemaForm extends LitElement {
                     });
                 }
 
-            if (!this.states[headerName]) this.states[headerName] = { open: !hasMany};
-
-            const accordion = new Accordion({
+            const oldStates = this.#accordions[headerName]
+            const accordion = this.#accordions[headerName] = new Accordion({
                 name: headerName,
                 toggleable: hasMany,
                 subtitle:html`<div style="display:flex; align-items: center;">${explicitlyRequired ? '' : enableToggle}${renderableInside.length ? `${renderableInside.length} fields` : ''}</div>`,
                 content: this.#nestedForms[name], 
-                info: this.states[headerName]
+                open: oldStates?.open ?? !hasMany,
+                disabled: oldStates?.disabled,
+                status: oldStates?.status,
             });
 
             accordion.id = name; // assign name to accordion id
@@ -910,9 +913,9 @@ export class JSONSchemaForm extends LitElement {
             enableToggle.addEventListener('click', (e) => {
                 e.stopPropagation()
                 const { checked } = e.target
-                if (checked) accordion.info = { ...accordion.info, disabled: false }
+                if (checked) accordion.disabled = false
                 else {
-                    accordion.info = { ...accordion.info, disabled: true }
+                    accordion.disabled = true
                 }
             })
 

From 68f533de92a9d2baa7e6b8bec04cbf309bf62873 Mon Sep 17 00:00:00 2001
From: Garrett <gflynn@usc.edu>
Date: Thu, 2 Nov 2023 15:44:42 -0700
Subject: [PATCH 05/21] Handle disabled properties

---
 src/renderer/src/stories/Accordion.js         |   1 +
 src/renderer/src/stories/JSONSchemaForm.js    | 122 ++++++++++++------
 .../src/stories/forms/GlobalFormModal.ts      |   1 -
 .../guided-mode/data/GuidedSourceData.js      |  16 +--
 .../pages/guided-mode/options/utils.js        |   4 +
 src/renderer/src/stories/pages/utils.js       |  13 +-
 6 files changed, 106 insertions(+), 51 deletions(-)

diff --git a/src/renderer/src/stories/Accordion.js b/src/renderer/src/stories/Accordion.js
index 47bffc251..703ee8484 100644
--- a/src/renderer/src/stories/Accordion.js
+++ b/src/renderer/src/stories/Accordion.js
@@ -25,6 +25,7 @@ export class Accordion extends LitElement {
 
             :host {
                 display: block;
+                overflow: hidden;
             }
 
             .header {
diff --git a/src/renderer/src/stories/JSONSchemaForm.js b/src/renderer/src/stories/JSONSchemaForm.js
index e38a28638..e6b8f30d4 100644
--- a/src/renderer/src/stories/JSONSchemaForm.js
+++ b/src/renderer/src/stories/JSONSchemaForm.js
@@ -195,8 +195,6 @@ export class JSONSchemaForm extends LitElement {
 
     resolved = {}; // Keep track of actual resolved values—not just what the user provides as results
 
-    states = {};
-
     constructor(props = {}) {
         super();
 
@@ -207,8 +205,6 @@ export class JSONSchemaForm extends LitElement {
         this.results = (props.base ? structuredClone(props.results) : props.results) ?? {}; // Deep clone results in nested forms
         this.globals = props.globals ?? {};
 
-        this.states = props.states ?? {}; // Accordion and other states
-
         this.ignore = props.ignore ?? [];
         this.required = props.required ?? {};
         this.dialogOptions = props.dialogOptions;
@@ -365,7 +361,11 @@ export class JSONSchemaForm extends LitElement {
 
         if (message) this.throw(message);
 
-        for (let key in this.#nestedForms) await this.#nestedForms[key].validate(resolved ? resolved[key] : undefined); // Validate nested forms too
+        // Validate nested forms (skip disabled)
+        for (let name in this.#nestedForms) {
+           if (!this.#accordions[name].disabled) await this.#nestedForms[name].validate(resolved ? resolved[name] : undefined); // Validate nested forms too
+        }
+
         try {
             for (let key in this.tables) await this.tables[key].validate(resolved ? resolved[key] : undefined); // Validate nested tables too
         } catch (e) {
@@ -508,6 +508,8 @@ export class JSONSchemaForm extends LitElement {
         for (let name in requirements) {
             let isRequired = requirements[name];
 
+            if (this.#accordions[name]?.disabled) continue; // Skip disabled accordions
+            
             // // NOTE: Uncomment to block checking requirements inside optional properties
             // if (!requirements[name][selfRequiredSymbol] && !resolved[name]) continue; // Do not continue checking requirements if absent and not required
 
@@ -515,9 +517,10 @@ export class JSONSchemaForm extends LitElement {
             if (isRequired) {
                 let path = parentPath ? `${parentPath}-${name}` : name;
 
-                if (typeof isRequired === "object" && !Array.isArray(isRequired))
-                    invalid.push(...(await this.#validateRequirements(resolved[name], isRequired, path)));
-                else if (this.isUndefined(resolved[name]) && this.validateEmptyValues) invalid.push(path);
+                // if (typeof isRequired === "object" && !Array.isArray(isRequired))
+                //     invalid.push(...(await this.#validateRequirements(resolved[name], isRequired, path)));
+                // else 
+                if (this.isUndefined(resolved[name]) && this.validateEmptyValues) invalid.push(path);
             }
         }
 
@@ -864,59 +867,98 @@ export class JSONSchemaForm extends LitElement {
 
             const renderableInside = this.#getRenderable(info, required[name], localPath, true);
 
+            const { __disabled = {} } = this.results
+
+            const disabled = name in __disabled
+            enableToggle.checked = !disabled
+
+            const nestedResults = disabled ? __disabled[name] : results[name]
+
             if (renderableInside.length) {
                 this.#nestedForms[name] = new JSONSchemaForm({
-                        identifier: this.identifier,
-                        schema: info,
-                        results: { ...results[name] },
-                        globals: this.globals?.[name],
-                        required: required[name], // Scoped to the sub-schema
-                        ignore: this.ignore,
-                        dialogOptions: this.dialogOptions,
-                        dialogType: this.dialogType,
-                        onlyRequired: this.onlyRequired,
-                        showLevelOverride: this.showLevelOverride,
-                        deferLoading: this.deferLoading,
-                        conditionalRequirements: this.conditionalRequirements,
-                        validateOnChange: (...args) => this.validateOnChange(...args),
-                        onThrow: (...args) => this.onThrow(...args),
-                        validateEmptyValues: this.validateEmptyValues,
-                        onStatusChange: (status) => {
-                            accordion.setStatus(status);
-                            this.checkStatus();
-                        }, // Forward status changes to the parent form
-                        onInvalid: (...args) => this.onInvalid(...args),
-                        onLoaded: () => {
-                            this.nLoaded++;
-                            this.checkAllLoaded();
-                        },
-                        renderTable: (...args) => this.renderTable(...args),
-                        onOverride: (...args) => this.onOverride(...args),
-                        base,
-                    });
-                }
+                    identifier: this.identifier,
+                    schema: info,
+                    results: { ...nestedResults },
+                    globals: this.globals?.[name],
+
+                    onUpdate: (internalPath, value) => {
+                        const path = [...localPath, ...internalPath];
+                        this.updateData(path, value);
+                    },
+
+                    required: required[name], // Scoped to the sub-schema
+                    ignore: this.ignore,
+                    dialogOptions: this.dialogOptions,
+                    dialogType: this.dialogType,
+                    onlyRequired: this.onlyRequired,
+                    showLevelOverride: this.showLevelOverride,
+                    deferLoading: this.deferLoading,
+                    conditionalRequirements: this.conditionalRequirements,
+                    validateOnChange: (...args) => this.validateOnChange(...args),
+                    onThrow: (...args) => this.onThrow(...args),
+                    validateEmptyValues: this.validateEmptyValues,
+                    onStatusChange: (status) => {
+                        accordion.setStatus(status);
+                        this.checkStatus();
+                    }, // Forward status changes to the parent form
+                    onInvalid: (...args) => this.onInvalid(...args),
+                    onLoaded: () => {
+                        this.nLoaded++;
+                        this.checkAllLoaded();
+                    },
+                    renderTable: (...args) => this.renderTable(...args),
+                    onOverride: (...args) => this.onOverride(...args),
+                    base,
+                });
+            }
 
             const oldStates = this.#accordions[headerName]
+
+            
             const accordion = this.#accordions[headerName] = new Accordion({
                 name: headerName,
                 toggleable: hasMany,
-                subtitle:html`<div style="display:flex; align-items: center;">${explicitlyRequired ? '' : enableToggle}${renderableInside.length ? `${renderableInside.length} fields` : ''}</div>`,
+                subtitle: html`<div style="display:flex; align-items: center;">${explicitlyRequired ? '' : enableToggle}${renderableInside.length ? `${renderableInside.length} fields` : ''}</div>`,
                 content: this.#nestedForms[name], 
+
+                // States
                 open: oldStates?.open ?? !hasMany,
-                disabled: oldStates?.disabled,
+                disabled,
                 status: oldStates?.status,
             });
 
             accordion.id = name; // assign name to accordion id
 
             // Set enable / disable behavior
+
+            const addDisabled = (name, o) => {
+                if (!o.__disabled) o.__disabled = {}
+                o.__disabled[name] = o[name] // Track disabled values
+            }
+
             enableToggle.addEventListener('click', (e) => {
                 e.stopPropagation()
                 const { checked } = e.target
-                if (checked) accordion.disabled = false
+                if (checked) {
+                    accordion.disabled = false
+
+                    // Restore disabled values
+                    this.results[name] =  this.results.__disabled[name]
+                    this.resolved[name] = this.resolved.__disabled[name]
+
+                    this.results.__disabled[name] = this.resolved.__disabled[name] = undefined // Wipe disabled values
+                }
                 else {
                     accordion.disabled = true
+
+                    addDisabled(name, this.resolved)
+                    addDisabled(name, this.results)
+
+                    this.resolved[name] = this.results[name] = undefined
                 }
+
+                this.onUpdate(localPath, this.results[name])                    
+
             })
 
             return accordion;
diff --git a/src/renderer/src/stories/forms/GlobalFormModal.ts b/src/renderer/src/stories/forms/GlobalFormModal.ts
index 391785c52..98d028987 100644
--- a/src/renderer/src/stories/forms/GlobalFormModal.ts
+++ b/src/renderer/src/stories/forms/GlobalFormModal.ts
@@ -46,7 +46,6 @@ export function createGlobalFormModal(this: Page, {
 
     const globalForm = new JSONSchemaForm({
         validateEmptyValues: false,
-        mode: 'accordion',
         schema: schemaCopy,
         emptyMessage: "No properties to edit globally.",
         ignore: propsToIgnore,
diff --git a/src/renderer/src/stories/pages/guided-mode/data/GuidedSourceData.js b/src/renderer/src/stories/pages/guided-mode/data/GuidedSourceData.js
index 00722a9b9..79d49ee90 100644
--- a/src/renderer/src/stories/pages/guided-mode/data/GuidedSourceData.js
+++ b/src/renderer/src/stories/pages/guided-mode/data/GuidedSourceData.js
@@ -13,6 +13,7 @@ import { header } from "../../../forms/utils";
 import { Button } from "../../../Button.js";
 
 import globalIcon from "../../../assets/global.svg?raw";
+import { run } from "../options/utils.js";
 
 const propsToIgnore = [
     "verbose",
@@ -79,15 +80,10 @@ export class GuidedSourceDataPage extends ManagedPage {
             await Promise.all(
                 this.mapSessions(async ({ subject, session, info }) => {
                     // NOTE: This clears all user-defined results
-                    const result = await fetch(`${baseUrl}/neuroconv/metadata`, {
-                        method: "POST",
-                        headers: { "Content-Type": "application/json" },
-                        body: JSON.stringify({
-                            source_data: info.source_data,
-                            interfaces: this.info.globalState.interfaces,
-                        }),
+                    const result = await run(`metadata`, {
+                        source_data: info.source_data,
+                        interfaces: this.info.globalState.interfaces,
                     })
-                        .then((res) => res.json())
                         .catch((e) => {
                             Swal.close();
                             stillFireSwal = false;
@@ -145,7 +141,9 @@ 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 = true)
+            },
             onStatusChange: (state) => this.manager.updateState(instanceId, state),
             onThrow,
         });
diff --git a/src/renderer/src/stories/pages/guided-mode/options/utils.js b/src/renderer/src/stories/pages/guided-mode/options/utils.js
index 48031dd06..199341a69 100644
--- a/src/renderer/src/stories/pages/guided-mode/options/utils.js
+++ b/src/renderer/src/stories/pages/guided-mode/options/utils.js
@@ -1,5 +1,6 @@
 import Swal from "sweetalert2";
 import { baseUrl } from "../../../../globals.js";
+import { sanitize } from "../../utils.js";
 
 export const openProgressSwal = (options) => {
     return new Promise((resolve) => {
@@ -26,6 +27,9 @@ export const run = async (url, payload, options = {}) => {
 
     if (!("base" in options)) options.base = "/neuroconv";
 
+    // Clear private keys from being passed
+    payload = sanitize(structuredClone(payload), k => k.slice(0, 2) == '__')
+
     const results = await fetch(`${baseUrl}${options.base || ""}/${url}`, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
diff --git a/src/renderer/src/stories/pages/utils.js b/src/renderer/src/stories/pages/utils.js
index 4d9ac99fd..59ac04289 100644
--- a/src/renderer/src/stories/pages/utils.js
+++ b/src/renderer/src/stories/pages/utils.js
@@ -27,14 +27,25 @@ export const setUndefinedIfNotDeclared = (schemaProps, resolved) => {
     }
 };
 
+export const sanitize = (o, condition) => {
+    if (isObject(o)) {
+        for (const [k, v] of Object.entries(o)) {
+            if (condition(k, v)) delete o[k];
+            else sanitize(v, condition);
+        }
+    }
+
+    return o
+}
+
 export function merge(toMerge = {}, target = {}, mergeOpts = {}) {
     // Deep merge objects
     for (const [k, v] of Object.entries(toMerge)) {
         const targetV = target[k];
         if (mergeOpts.arrays && Array.isArray(v) && Array.isArray(targetV))
             target[k] = [...targetV, ...v]; // Merge array entries together
-        else if (isObject(v) || isObject(targetV)) target[k] = merge(v, target[k], mergeOpts);
         else if (v === undefined) delete target[k]; // Remove matched values
+        else if (isObject(v) || isObject(targetV)) target[k] = merge(v, target[k], mergeOpts);
         else target[k] = v; // Replace primitive values
     }
 

From b352422523915fa08959098da354211ea498677b Mon Sep 17 00:00:00 2001
From: Garrett <gflynn@usc.edu>
Date: Thu, 2 Nov 2023 17:44:48 -0700
Subject: [PATCH 06/21] Allow globals. Properly update and track disabled
 accordions

---
 src/renderer/src/stories/Button.js            |  1 -
 src/renderer/src/stories/JSONSchemaForm.js    | 42 ++++++++++++-------
 .../pages/guided-mode/data/GuidedMetadata.js  |  3 ++
 .../guided-mode/data/GuidedSourceData.js      | 29 +++++++++----
 .../pages/guided-mode/options/utils.js        |  2 +-
 src/renderer/src/stories/pages/utils.js       |  8 +++-
 6 files changed, 60 insertions(+), 25 deletions(-)

diff --git a/src/renderer/src/stories/Button.js b/src/renderer/src/stories/Button.js
index cab7f0a8a..171316263 100644
--- a/src/renderer/src/stories/Button.js
+++ b/src/renderer/src/stories/Button.js
@@ -87,7 +87,6 @@ export class Button extends LitElement {
     render() {
         const mode = this.primary ? "storybook-button--primary" : "storybook-button--secondary";
 
-        console.log;
         return html`
             <button
                 type="button"
diff --git a/src/renderer/src/stories/JSONSchemaForm.js b/src/renderer/src/stories/JSONSchemaForm.js
index e6b8f30d4..b284dd073 100644
--- a/src/renderer/src/stories/JSONSchemaForm.js
+++ b/src/renderer/src/stories/JSONSchemaForm.js
@@ -288,7 +288,6 @@ export class JSONSchemaForm extends LitElement {
 
         // NOTE: Forms with nested forms will handle their own state updates
         if (this.isUndefined(value)) {
-            const globalValue = this.getGlobalValue(localPath);
 
             // Continue to resolve and re-render...
             if (globalValue) {
@@ -348,7 +347,7 @@ export class JSONSchemaForm extends LitElement {
         const isValid = !requiredButNotSpecified.length;
 
         // Print out a detailed error message if any inputs are missing
-        let message = isValid ? "" : `${requiredButNotSpecified.length} required inputs are not specified properly.`;
+        let message = isValid ? "" : requiredButNotSpecified.length === 1 ? `${requiredButNotSpecified[0]} is not defined.` : `${requiredButNotSpecified.length} required inputs are not specified properly.`;
 
         // Check if all inputs are valid
         const flaggedInputs = this.shadowRoot ? this.shadowRoot.querySelectorAll(".invalid") : [];
@@ -867,12 +866,19 @@ export class JSONSchemaForm extends LitElement {
 
             const renderableInside = this.#getRenderable(info, required[name], localPath, true);
 
-            const { __disabled = {} } = this.results
+            const hasInteraction = '__disabled' in this.results // NOTE: This locks the specific value to what the user has chosen...
+            
+            const { __disabled = {} } = this.results //.__disabled ?? (this.results.__disabled = {})
+            const { __disabled: __disabledGlobal = {}} = this.getGlobalValue(localPath.slice(0, -1));
+
+            
+            const __disabledResolved = (hasInteraction || name in __disabled) ? __disabled : __disabledGlobal
+
+            const isDisabled = name in __disabledResolved
 
-            const disabled = name in __disabled
-            enableToggle.checked = !disabled
+            enableToggle.checked = !isDisabled
 
-            const nestedResults = disabled ? __disabled[name] : results[name]
+            const nestedResults = __disabled[name] ?? results[name] // One or the other will exist—depending on global or local disabling
 
             if (renderableInside.length) {
                 this.#nestedForms[name] = new JSONSchemaForm({
@@ -914,7 +920,6 @@ export class JSONSchemaForm extends LitElement {
 
             const oldStates = this.#accordions[headerName]
 
-            
             const accordion = this.#accordions[headerName] = new Accordion({
                 name: headerName,
                 toggleable: hasMany,
@@ -923,8 +928,8 @@ export class JSONSchemaForm extends LitElement {
 
                 // States
                 open: oldStates?.open ?? !hasMany,
-                disabled,
-                status: oldStates?.status,
+                disabled: isDisabled,
+                status: oldStates?.status ?? 'valid', // Always show a status
             });
 
             accordion.id = name; // assign name to accordion id
@@ -933,7 +938,7 @@ export class JSONSchemaForm extends LitElement {
 
             const addDisabled = (name, o) => {
                 if (!o.__disabled) o.__disabled = {}
-                o.__disabled[name] = o[name] // Track disabled values
+                o.__disabled[name] = o[name] ?? {} // Track disabled values (or at least something)
             }
 
             enableToggle.addEventListener('click', (e) => {
@@ -942,12 +947,21 @@ export class JSONSchemaForm extends LitElement {
                 if (checked) {
                     accordion.disabled = false
 
-                    // Restore disabled values
-                    this.results[name] =  this.results.__disabled[name]
-                    this.resolved[name] = this.resolved.__disabled[name]
+                    const { __disabled = {} } = this.results
+                    const { __disabled: resolvedDisabled = {}} = this.resolved
+
+                    if (__disabled[name]) {
+                        this.results[name] = __disabled[name] // Restore disabled values
+                        __disabled[name] = undefined // Wipe disabled values
+                    }
 
-                    this.results.__disabled[name] = this.resolved.__disabled[name] = undefined // Wipe disabled values
+                    if (resolvedDisabled[name]) {
+                        this.resolved[name] = resolvedDisabled[name] // Restore disabled values
+                        resolvedDisabled[name] = undefined // Wipe disabled values
+                    }
                 }
+
+                // Register a custom disabled value
                 else {
                     accordion.disabled = true
 
diff --git a/src/renderer/src/stories/pages/guided-mode/data/GuidedMetadata.js b/src/renderer/src/stories/pages/guided-mode/data/GuidedMetadata.js
index 449d922cd..f287ba971 100644
--- a/src/renderer/src/stories/pages/guided-mode/data/GuidedMetadata.js
+++ b/src/renderer/src/stories/pages/guided-mode/data/GuidedMetadata.js
@@ -155,6 +155,9 @@ export class GuidedMetadataPage extends ManagedPage {
 
         resolveResults(subject, session, globalState);
 
+
+        console.log(subject, session, results)
+        
         // Create the form
         const form = new JSONSchemaForm({
             identifier: instanceId,
diff --git a/src/renderer/src/stories/pages/guided-mode/data/GuidedSourceData.js b/src/renderer/src/stories/pages/guided-mode/data/GuidedSourceData.js
index 79d49ee90..a5a96d6a8 100644
--- a/src/renderer/src/stories/pages/guided-mode/data/GuidedSourceData.js
+++ b/src/renderer/src/stories/pages/guided-mode/data/GuidedSourceData.js
@@ -78,7 +78,9 @@ export class GuidedSourceDataPage extends ManagedPage {
             });
 
             await Promise.all(
-                this.mapSessions(async ({ subject, session, info }) => {
+                this.mapSessions(async ({ subject, session, info }, i) => {
+
+
                     // NOTE: This clears all user-defined results
                     const result = await run(`metadata`, {
                         source_data: info.source_data,
@@ -109,14 +111,27 @@ export class GuidedSourceDataPage extends ManagedPage {
                         throw result;
                     }
 
+                    const { results: metadata, schema } = result
+
+
+                    // Always delete Ecephys if absent ( NOTE: temporarily manually removing from schema on backend...)
+                    const alwaysDelete = ['Ecephys']
+                    alwaysDelete.forEach(k => {
+                        if (!metadata[k]) metadata[k] = undefined
+                    })
+                    
+                    for (let key in info.metadata) {
+                        if (!alwaysDelete.includes(key) && !(key in schema.properties)) metadata[key] = undefined
+                    }
+
                     // Merge metadata results with the generated info
-                    merge(result.results, info.metadata);
+                    merge(metadata, info.metadata);
 
                     // Mirror structure with metadata schema
-                    const schema = this.info.globalState.schema;
-                    if (!schema.metadata) schema.metadata = {};
-                    if (!schema.metadata[subject]) schema.metadata[subject] = {};
-                    schema.metadata[subject][session] = result.schema;
+                    const schemaGlobal = this.info.globalState.schema;
+                    if (!schemaGlobal.metadata) schemaGlobal.metadata = {};
+                    if (!schemaGlobal.metadata[subject]) schemaGlobal.metadata[subject] = {};
+                    schemaGlobal.metadata[subject][session] = schema;
                 })
             );
 
@@ -129,7 +144,7 @@ export class GuidedSourceDataPage extends ManagedPage {
 
         const schema = this.info.globalState.schema.source_data;
         delete schema.description;
-
+        
         const form = new JSONSchemaForm({
             identifier: instanceId,
             schema: preprocessSourceDataSchema(schema),
diff --git a/src/renderer/src/stories/pages/guided-mode/options/utils.js b/src/renderer/src/stories/pages/guided-mode/options/utils.js
index 199341a69..c345be201 100644
--- a/src/renderer/src/stories/pages/guided-mode/options/utils.js
+++ b/src/renderer/src/stories/pages/guided-mode/options/utils.js
@@ -28,7 +28,7 @@ export const run = async (url, payload, options = {}) => {
     if (!("base" in options)) options.base = "/neuroconv";
 
     // Clear private keys from being passed
-    payload = sanitize(structuredClone(payload), k => k.slice(0, 2) == '__')
+    payload = sanitize(structuredClone(payload))
 
     const results = await fetch(`${baseUrl}${options.base || ""}/${url}`, {
         method: "POST",
diff --git a/src/renderer/src/stories/pages/utils.js b/src/renderer/src/stories/pages/utils.js
index 59ac04289..daadc08e5 100644
--- a/src/renderer/src/stories/pages/utils.js
+++ b/src/renderer/src/stories/pages/utils.js
@@ -27,7 +27,10 @@ export const setUndefinedIfNotDeclared = (schemaProps, resolved) => {
     }
 };
 
-export const sanitize = (o, condition) => {
+
+export const isPrivate = (k, v) => k.slice(0, 2) === "__";
+
+export const sanitize = (o, condition = isPrivate) => {
     if (isObject(o)) {
         for (const [k, v] of Object.entries(o)) {
             if (condition(k, v)) delete o[k];
@@ -42,6 +45,7 @@ export function merge(toMerge = {}, target = {}, mergeOpts = {}) {
     // Deep merge objects
     for (const [k, v] of Object.entries(toMerge)) {
         const targetV = target[k];
+        // if (isPrivate(k)) continue;
         if (mergeOpts.arrays && Array.isArray(v) && Array.isArray(targetV))
             target[k] = [...targetV, ...v]; // Merge array entries together
         else if (v === undefined) delete target[k]; // Remove matched values
@@ -55,7 +59,7 @@ export function merge(toMerge = {}, target = {}, mergeOpts = {}) {
 export function mapSessions(callback = (v) => v, globalState) {
     return Object.entries(globalState.results)
         .map(([subject, sessions]) => {
-            return Object.entries(sessions).map(([session, info]) => callback({ subject, session, info }));
+            return Object.entries(sessions).map(([session, info], i) => callback({ subject, session, info }, i));
         })
         .flat(2);
 }

From a55a5f7a22e0816273e7426ef7e3360f65b67c1b Mon Sep 17 00:00:00 2001
From: Garrett <gflynn@usc.edu>
Date: Mon, 6 Nov 2023 07:20:24 -0800
Subject: [PATCH 07/21] Better disabling

---
 src/renderer/src/stories/JSONSchemaForm.js    | 68 +++++++++++--------
 .../guided-mode/data/GuidedSourceData.js      |  5 +-
 2 files changed, 43 insertions(+), 30 deletions(-)

diff --git a/src/renderer/src/stories/JSONSchemaForm.js b/src/renderer/src/stories/JSONSchemaForm.js
index 9c7e5ef94..6fb235df2 100644
--- a/src/renderer/src/stories/JSONSchemaForm.js
+++ b/src/renderer/src/stories/JSONSchemaForm.js
@@ -868,18 +868,20 @@ export class JSONSchemaForm extends LitElement {
 
             const renderableInside = this.#getRenderable(info, required[name], localPath, true);
 
-            const hasInteraction = '__disabled' in this.results // NOTE: This locks the specific value to what the user has chosen...
+            const __disabled = this.results.__disabled ?? (this.results.__disabled = {})
+
+            const hasInteraction = __disabled.__interacted // NOTE: This locks the specific value to what the user has chosen...
             
-            const { __disabled = {} } = this.results //.__disabled ?? (this.results.__disabled = {})
             const { __disabled: __disabledGlobal = {}} = this.getGlobalValue(localPath.slice(0, -1));
-
             
-            const __disabledResolved = (hasInteraction || name in __disabled) ? __disabled : __disabledGlobal
+            const __disabledResolved = (hasInteraction) ? __disabled : __disabledGlobal
 
-            const isDisabled = name in __disabledResolved
+            const isDisabled = !!__disabledResolved[name]
 
             enableToggle.checked = !isDisabled
 
+            console.log('Is Disabled', isDisabled, hasInteraction)
+
             const nestedResults = __disabled[name] ?? results[name] // One or the other will exist—depending on global or local disabling
 
             if (renderableInside.length) {
@@ -937,46 +939,56 @@ export class JSONSchemaForm extends LitElement {
             accordion.id = name; // assign name to accordion id
 
             // Set enable / disable behavior
-
             const addDisabled = (name, o) => {
                 if (!o.__disabled) o.__disabled = {}
+                console.log('SAVING', o[name])
+
                 o.__disabled[name] = o[name] ?? {} // Track disabled values (or at least something)
             }
 
-            enableToggle.addEventListener('click', (e) => {
-                e.stopPropagation()
-                const { checked } = e.target
-                if (checked) {
-                    accordion.disabled = false
+            const disable = () => {
+                accordion.disabled = true
+                console.log('WHAT ARE THEIR VALUES', this.resolved[name], this.results[name])
+                addDisabled(name, this.resolved)
+                addDisabled(name, this.results)
+                this.resolved[name] = this.results[name] = undefined
+            }
 
-                    const { __disabled = {} } = this.results
-                    const { __disabled: resolvedDisabled = {}} = this.resolved
+            const enable = () => {
+                accordion.disabled = false
 
-                    if (__disabled[name]) {
-                        this.results[name] = __disabled[name] // Restore disabled values
-                        __disabled[name] = undefined // Wipe disabled values
-                    }
+                const { __disabled = {} } = this.results
+                const { __disabled: resolvedDisabled = {}} = this.resolved
 
-                    if (resolvedDisabled[name]) {
-                        this.resolved[name] = resolvedDisabled[name] // Restore disabled values
-                        resolvedDisabled[name] = undefined // Wipe disabled values
-                    }
+                if (__disabled[name]) {
+                    console.log('REPLACING', __disabled[name])
+                    this.results[name] = __disabled[name] // Restore disabled values
+                    __disabled[name] = undefined // Track disabled value as interacted with
                 }
 
-                // Register a custom disabled value
-                else {
-                    accordion.disabled = true
+                if (resolvedDisabled[name]) {
+                    this.resolved[name] = resolvedDisabled[name] // Restore disabled values
+                    resolvedDisabled[name] = undefined // Track disabled value as interacted with
+                }
+            }
 
-                    addDisabled(name, this.resolved)
-                    addDisabled(name, this.results)
+            enableToggle.addEventListener('click', (e) => {
+                e.stopPropagation()
+                const { checked } = e.target
 
-                    this.resolved[name] = this.results[name] = undefined
-                }
+                const { __disabled = {} } = this.results
+                const { __disabled: resolvedDisabled = {}} = this.resolved
+
+                __disabled.__interacted = resolvedDisabled.__interacted = true // Track that the user has interacted with the form
+
+                checked ? enable() : disable();
 
                 this.onUpdate(localPath, this.results[name])                    
 
             })
 
+            if (__disabledResolved === __disabledGlobal) (isDisabled)? disable() : enable();
+
             return accordion;
 
         });
diff --git a/src/renderer/src/stories/pages/guided-mode/data/GuidedSourceData.js b/src/renderer/src/stories/pages/guided-mode/data/GuidedSourceData.js
index 4a6a2260d..b23056c85 100644
--- a/src/renderer/src/stories/pages/guided-mode/data/GuidedSourceData.js
+++ b/src/renderer/src/stories/pages/guided-mode/data/GuidedSourceData.js
@@ -120,13 +120,14 @@ export class GuidedSourceDataPage extends ManagedPage {
                     // Always delete Ecephys if absent ( NOTE: temporarily manually removing from schema on backend...)
                     const alwaysDelete = ['Ecephys']
                     alwaysDelete.forEach(k => {
-                        if (!metadata[k]) metadata[k] = undefined
+                        if (!metadata[k]) delete info.metadata[k] // Delete directly on metadata
                     })
                     
                     for (let key in info.metadata) {
                         if (!alwaysDelete.includes(key) && !(key in schema.properties)) metadata[key] = undefined
                     }
 
+
                     // Merge metadata results with the generated info
                     merge(metadata, info.metadata);
 
@@ -138,7 +139,7 @@ export class GuidedSourceDataPage extends ManagedPage {
                 })
             );
 
-            await this.save();
+            await this.save(undefined, false); // Just save new raw values
 
             this.to(1);
         },

From fc269aa8245a38e248e3a848f6ec47ffac57a2e6 Mon Sep 17 00:00:00 2001
From: Garrett Michael Flynn <garrettmflynn@gmail.com>
Date: Tue, 7 Nov 2023 14:44:17 -0800
Subject: [PATCH 08/21] Fix global interaction with instance enable value

---
 src/renderer/src/stories/JSONSchemaForm.js    | 65 ++++++++++++-------
 .../src/stories/forms/GlobalFormModal.ts      |  8 ++-
 .../guided-mode/data/GuidedSourceData.js      |  1 +
 .../stories/pages/guided-mode/data/utils.js   |  2 +-
 src/renderer/src/stories/pages/utils.js       | 11 +++-
 5 files changed, 59 insertions(+), 28 deletions(-)

diff --git a/src/renderer/src/stories/JSONSchemaForm.js b/src/renderer/src/stories/JSONSchemaForm.js
index 6fb235df2..738eee60f 100644
--- a/src/renderer/src/stories/JSONSchemaForm.js
+++ b/src/renderer/src/stories/JSONSchemaForm.js
@@ -12,6 +12,10 @@ import { resolveProperties } from "./pages/guided-mode/data/utils";
 import { JSONSchemaInput } from "./JSONSchemaInput";
 import { InspectorListItem } from "./preview/inspector/InspectorList";
 
+const isObject = (o) => {
+    return o && typeof o === "object" && !Array.isArray(o);
+};
+
 const selfRequiredSymbol = Symbol();
 
 const componentCSS = `
@@ -302,7 +306,7 @@ export class JSONSchemaForm extends LitElement {
             resultParent[name] = undefined; // NOTE: Will be removed when stringified
         } else {
             resultParent[name] = value === globalValue ? undefined : value; // Retain association with global value
-            resolvedParent[name] = value;
+            resolvedParent[name] = (isObject(value) && isObject(resolvedParent)) ? merge(value, resolvedParent[name]) : value; // Merge with existing resolved values
         }
 
         if (hasUpdate) this.onUpdate(localPath, value); // Ensure the value has actually changed
@@ -851,6 +855,11 @@ export class JSONSchemaForm extends LitElement {
             const localPath = [...path, name];
 
             const enableToggle = document.createElement('input')
+            const enableToggleContainer = document.createElement('div')
+            Object.assign(enableToggleContainer.style, {
+                position: 'relative'
+            })
+            enableToggleContainer.append(enableToggle)
 
             // Check properties that will be rendered before creating the accordion
             const base = [...this.base, ...localPath];
@@ -872,17 +881,19 @@ export class JSONSchemaForm extends LitElement {
 
             const hasInteraction = __disabled.__interacted // NOTE: This locks the specific value to what the user has chosen...
             
-            const { __disabled: __disabledGlobal = {}} = this.getGlobalValue(localPath.slice(0, -1));
-            
-            const __disabledResolved = (hasInteraction) ? __disabled : __disabledGlobal
+            const { __disabled: __tempDisabledGlobal = {}} = this.getGlobalValue(localPath.slice(0, -1));
+
+            const __disabledGlobal = structuredClone(__tempDisabledGlobal)  // NOTE: Cloning ensures no property transfer
+
+            let isGlobalEffect = !hasInteraction || (!hasInteraction && __disabledGlobal.__interacted) // Indicate whether global effect is used
+
+            const __disabledResolved = isGlobalEffect ? __disabledGlobal : __disabled
 
             const isDisabled = !!__disabledResolved[name]
 
             enableToggle.checked = !isDisabled
 
-            console.log('Is Disabled', isDisabled, hasInteraction)
-
-            const nestedResults = __disabled[name] ?? results[name] // One or the other will exist—depending on global or local disabling
+            const nestedResults = __disabled[name] ?? results[name] ?? this.results[name] // One or the other will exist—depending on global or local disabling
 
             if (renderableInside.length) {
                 this.#nestedForms[name] = new JSONSchemaForm({
@@ -927,7 +938,7 @@ export class JSONSchemaForm extends LitElement {
             const accordion = this.#accordions[headerName] = new Accordion({
                 name: headerName,
                 toggleable: hasMany,
-                subtitle: html`<div style="display:flex; align-items: center;">${explicitlyRequired ? '' : enableToggle}${renderableInside.length ? `${renderableInside.length} fields` : ''}</div>`,
+                subtitle: html`<div style="display:flex; align-items: center;">${explicitlyRequired ? '' : enableToggleContainer}${renderableInside.length ? `${renderableInside.length} fields` : ''}</div>`,
                 content: this.#nestedForms[name], 
 
                 // States
@@ -941,17 +952,20 @@ export class JSONSchemaForm extends LitElement {
             // Set enable / disable behavior
             const addDisabled = (name, o) => {
                 if (!o.__disabled) o.__disabled = {}
-                console.log('SAVING', o[name])
 
-                o.__disabled[name] = o[name] ?? {} // Track disabled values (or at least something)
+                // Do not overwrite cache of disabled values (with globals, for instance)
+                if (o.__disabled[name]) {
+                    if (isGlobalEffect) return 
+                }
+                
+                o.__disabled[name] = (o[name] ?? (o[name] = {})) // Track disabled values (or at least something)
             }
 
             const disable = () => {
                 accordion.disabled = true
-                console.log('WHAT ARE THEIR VALUES', this.resolved[name], this.results[name])
                 addDisabled(name, this.resolved)
                 addDisabled(name, this.results)
-                this.resolved[name] = this.results[name] = undefined
+                this.resolved[name] = this.results[name] = undefined // Remove entry from results
             }
 
             const enable = () => {
@@ -960,22 +974,21 @@ export class JSONSchemaForm extends LitElement {
                 const { __disabled = {} } = this.results
                 const { __disabled: resolvedDisabled = {}} = this.resolved
 
-                if (__disabled[name]) {
-                    console.log('REPLACING', __disabled[name])
-                    this.results[name] = __disabled[name] // Restore disabled values
-                    __disabled[name] = undefined // Track disabled value as interacted with
-                }
-
-                if (resolvedDisabled[name]) {
-                    this.resolved[name] = resolvedDisabled[name] // Restore disabled values
-                    resolvedDisabled[name] = undefined // Track disabled value as interacted with
-                }
+                if (__disabled[name]) this.updateData(localPath, __disabled[name])  // Propagate restored disabled values
+                __disabled[name] = undefined // Clear disabled value
+                resolvedDisabled[name] = undefined // Clear disabled value
             }
 
             enableToggle.addEventListener('click', (e) => {
                 e.stopPropagation()
                 const { checked } = e.target
 
+                // Reset parameters on interaction
+                isGlobalEffect = false
+                Object.assign(enableToggle.style, {
+                    accentColor: 'unset'
+                })
+
                 const { __disabled = {} } = this.results
                 const { __disabled: resolvedDisabled = {}} = this.resolved
 
@@ -987,7 +1000,13 @@ export class JSONSchemaForm extends LitElement {
 
             })
 
-            if (__disabledResolved === __disabledGlobal) (isDisabled)? disable() : enable();
+            if (isGlobalEffect) {
+                (isDisabled) ? disable() : enable();
+                Object.assign(enableToggle.style, {
+                    accentColor: 'gray'
+                })
+                
+            }
 
             return accordion;
 
diff --git a/src/renderer/src/stories/forms/GlobalFormModal.ts b/src/renderer/src/stories/forms/GlobalFormModal.ts
index 98d028987..f6de21e8b 100644
--- a/src/renderer/src/stories/forms/GlobalFormModal.ts
+++ b/src/renderer/src/stories/forms/GlobalFormModal.ts
@@ -70,16 +70,20 @@ export function createGlobalFormModal(this: Page, {
             const forms = (hasInstances ? this.forms :  this.form ? [ { form: this.form }] : []) ?? []
             const tables = (hasInstances ? this.tables : this.table ? [ this.table ] : []) ?? []
 
+            const mergeOpts = {
+                // remove: false
+            }
+
             forms.forEach(formInfo => {
                 const { subject, form } = formInfo
-                const result = cached[subject] ?? (cached[subject] = mergeFunction.call(formInfo, toPass, this.info.globalState))
+                const result = cached[subject] ?? (cached[subject] = mergeFunction.call(formInfo, toPass, this.info.globalState, mergeOpts))
                 form.globals = structuredClone(key ?  result.project[key]: result)
             })
 
 
             tables.forEach(table => {
                 const subject = null
-                const result = cached[subject] ?? (cached[subject] = mergeFunction(toPass, this.info.globalState))
+                const result = cached[subject] ?? (cached[subject] = mergeFunction(toPass, this.info.globalState, mergeOpts))
                 table.globals = structuredClone( key ?  result.project[key]: result)
             })
 
diff --git a/src/renderer/src/stories/pages/guided-mode/data/GuidedSourceData.js b/src/renderer/src/stories/pages/guided-mode/data/GuidedSourceData.js
index b23056c85..75fe37045 100644
--- a/src/renderer/src/stories/pages/guided-mode/data/GuidedSourceData.js
+++ b/src/renderer/src/stories/pages/guided-mode/data/GuidedSourceData.js
@@ -84,6 +84,7 @@ export class GuidedSourceDataPage extends ManagedPage {
                 this.mapSessions(async ({ subject, session, info }, i) => {
 
 
+                    console.log('RUNNING', subject, session, info.source_data)
                     // NOTE: This clears all user-defined results
                     const result = await run(`metadata`, {
                         source_data: info.source_data,
diff --git a/src/renderer/src/stories/pages/guided-mode/data/utils.js b/src/renderer/src/stories/pages/guided-mode/data/utils.js
index 17a06aa0e..fab1f8a5e 100644
--- a/src/renderer/src/stories/pages/guided-mode/data/utils.js
+++ b/src/renderer/src/stories/pages/guided-mode/data/utils.js
@@ -47,7 +47,7 @@ export function resolveProperties(properties = {}, target, globals = {}) {
             else if (info.default) target[name] = info.default;
         }
 
-        resolveProperties(props, target[name], globals[name]);
+        if (target[name]) resolveProperties(props, target[name], globals[name]);
     }
 
     return target;
diff --git a/src/renderer/src/stories/pages/utils.js b/src/renderer/src/stories/pages/utils.js
index daadc08e5..8ae496c2f 100644
--- a/src/renderer/src/stories/pages/utils.js
+++ b/src/renderer/src/stories/pages/utils.js
@@ -42,14 +42,21 @@ export const sanitize = (o, condition = isPrivate) => {
 }
 
 export function merge(toMerge = {}, target = {}, mergeOpts = {}) {
+
     // Deep merge objects
     for (const [k, v] of Object.entries(toMerge)) {
         const targetV = target[k];
         // if (isPrivate(k)) continue;
         if (mergeOpts.arrays && Array.isArray(v) && Array.isArray(targetV))
             target[k] = [...targetV, ...v]; // Merge array entries together
-        else if (v === undefined) delete target[k]; // Remove matched values
-        else if (isObject(v) || isObject(targetV)) target[k] = merge(v, target[k], mergeOpts);
+        else if (v === undefined) {
+            delete target[k]; // Remove matched values   
+            // if (mergeOpts.remove !== false) delete target[k]; // Remove matched values    
+        }
+        else if (isObject(v)) {
+            if (isObject(targetV)) target[k] = merge(v, targetV, mergeOpts);
+            else target[k] = v; // Replace object values
+        }
         else target[k] = v; // Replace primitive values
     }
 

From 400a1908f929dded645b82fee623136841b9d4d1 Mon Sep 17 00:00:00 2001
From: "pre-commit-ci[bot]"
 <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Date: Tue, 7 Nov 2023 23:13:43 +0000
Subject: [PATCH 09/21] [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci
---
 src/renderer/src/stories/Accordion.js         |  85 +++++-----
 src/renderer/src/stories/JSONSchemaForm.js    | 150 +++++++++---------
 src/renderer/src/stories/assets/save.svg      |   2 +-
 src/renderer/src/stories/pages/FormPage.js    |   4 +-
 .../pages/guided-mode/data/GuidedMetadata.js  |   3 +-
 .../guided-mode/data/GuidedSourceData.js      |  37 ++---
 .../pages/guided-mode/options/utils.js        |   2 +-
 .../stories/pages/settings/SettingsPage.js    |   5 +-
 src/renderer/src/stories/pages/utils.js       |  16 +-
 9 files changed, 151 insertions(+), 153 deletions(-)

diff --git a/src/renderer/src/stories/Accordion.js b/src/renderer/src/stories/Accordion.js
index 703ee8484..92e6e8c95 100644
--- a/src/renderer/src/stories/Accordion.js
+++ b/src/renderer/src/stories/Accordion.js
@@ -160,7 +160,6 @@ export class Accordion extends LitElement {
         `;
     }
 
-
     static get properties() {
         return {
             name: { type: String, reflect: true },
@@ -170,16 +169,15 @@ export class Accordion extends LitElement {
         };
     }
 
-
-    constructor({ 
-        name, 
-        subtitle, 
-        toggleable= true, 
-        content, 
+    constructor({
+        name,
+        subtitle,
+        toggleable = true,
+        content,
         open = false,
         status,
         disabled = false,
-        contentPadding 
+        contentPadding,
     } = {}) {
         super();
         this.name = name;
@@ -193,12 +191,12 @@ export class Accordion extends LitElement {
     }
 
     updated() {
-        if (!this.content) return
-        this.toggle(!!this.open)
+        if (!this.content) return;
+        this.toggle(!!this.open);
     }
 
     setStatus = (status) => {
-        const el = this.shadowRoot.getElementById('dropdown')
+        const el = this.shadowRoot.getElementById("dropdown");
         el.classList.remove("error", "warning", "valid");
         el.classList.add(status);
         this.status = status;
@@ -218,14 +216,14 @@ export class Accordion extends LitElement {
         const hasForce = forcedState !== undefined;
         const toggledState = !this.open;
 
-        const desiredState = hasForce ? forcedState : toggledState
+        const desiredState = hasForce ? forcedState : toggledState;
         const state = this.toOpen(desiredState);
 
         //remove hidden from child elements with guided--nav-bar-section-page class
-        const section = this.shadowRoot.getElementById('section')
+        const section = this.shadowRoot.getElementById("section");
         section.toggleAttribute("hidden", hasForce ? !state : undefined);
 
-        const dropdown = this.shadowRoot.getElementById('dropdown')
+        const dropdown = this.shadowRoot.getElementById("dropdown");
         this.#updateClass("active", dropdown, !state);
 
         //toggle the chevron
@@ -236,40 +234,45 @@ export class Accordion extends LitElement {
     };
 
     toOpen = (state = this.open) => {
-        if (!this.toggleable) return true // Force open if not toggleable
-        else if (this.disabled) return false // Force closed if disabled
-        return state
-    }
+        if (!this.toggleable) return true; // Force open if not toggleable
+        else if (this.disabled) return false; // Force closed if disabled
+        return state;
+    };
 
     render() {
-
         const isToggleable = this.content && this.toggleable;
 
         return html`
-                <div class="guided--nav-bar-section">
-                    <div
-                        id="dropdown"
-                        class="guided--nav-bar-dropdown ${isToggleable && 'toggleable'} ${this.disabled ? "disabled" : ''} ${this.status}"
-                        @click=${() =>isToggleable && this.toggle()}
-                    >
-                        <div class="header">
-                            <span>${this.name}</span>
-                            <small>${this.subtitle}</small>
-                        </div>
-                        ${isToggleable ? new Chevron({
-                            direction: "right",
-                            color: faColor,
-                            size: faSize,
-                        }) : ''}
+            <div class="guided--nav-bar-section">
+                <div
+                    id="dropdown"
+                    class="guided--nav-bar-dropdown ${isToggleable && "toggleable"} ${this.disabled
+                        ? "disabled"
+                        : ""} ${this.status}"
+                    @click=${() => isToggleable && this.toggle()}
+                >
+                    <div class="header">
+                        <span>${this.name}</span>
+                        <small>${this.subtitle}</small>
                     </div>
-                    ${this.content ? html`<div
-                        id="section"
-                        class="content hidden ${this.disabled ? "disabled" : ''}"
-                        style="padding: ${this.contentPadding ?? "25px"}"
-                    >
-                        ${this.content}
-                    </div>` : ''}
+                    ${isToggleable
+                        ? new Chevron({
+                              direction: "right",
+                              color: faColor,
+                              size: faSize,
+                          })
+                        : ""}
                 </div>
+                ${this.content
+                    ? html`<div
+                          id="section"
+                          class="content hidden ${this.disabled ? "disabled" : ""}"
+                          style="padding: ${this.contentPadding ?? "25px"}"
+                      >
+                          ${this.content}
+                      </div>`
+                    : ""}
+            </div>
         `;
     }
 }
diff --git a/src/renderer/src/stories/JSONSchemaForm.js b/src/renderer/src/stories/JSONSchemaForm.js
index 61922da15..e83e5c99d 100644
--- a/src/renderer/src/stories/JSONSchemaForm.js
+++ b/src/renderer/src/stories/JSONSchemaForm.js
@@ -246,7 +246,7 @@ export class JSONSchemaForm extends LitElement {
         const copy = [...path];
         const tableName = copy.pop();
 
-        return this.getForm(copy).getTable(tableName)
+        return this.getForm(copy).getTable(tableName);
     };
 
     getForm = (path) => {
@@ -292,7 +292,6 @@ export class JSONSchemaForm extends LitElement {
 
         // NOTE: Forms with nested forms will handle their own state updates
         if (this.isUndefined(value)) {
-
             // Continue to resolve and re-render...
             if (globalValue) {
                 value = resolvedParent[name] = globalValue;
@@ -306,7 +305,8 @@ export class JSONSchemaForm extends LitElement {
             resultParent[name] = undefined; // NOTE: Will be removed when stringified
         } else {
             resultParent[name] = value === globalValue ? undefined : value; // Retain association with global value
-            resolvedParent[name] = (isObject(value) && isObject(resolvedParent)) ? merge(value, resolvedParent[name]) : value; // Merge with existing resolved values
+            resolvedParent[name] =
+                isObject(value) && isObject(resolvedParent) ? merge(value, resolvedParent[name]) : value; // Merge with existing resolved values
         }
 
         if (hasUpdate) this.onUpdate(localPath, value); // Ensure the value has actually changed
@@ -346,7 +346,6 @@ export class JSONSchemaForm extends LitElement {
     };
 
     validate = async (resolved) => {
-        
         // Check if any required inputs are missing
         const requiredButNotSpecified = await this.#validateRequirements(resolved); // get missing required paths
         const isValid = !requiredButNotSpecified.length;
@@ -365,8 +364,13 @@ export class JSONSchemaForm extends LitElement {
         }, 0);
 
         // Print out a detailed error message if any inputs are missing
-        let message = isValid ? "" : requiredButNotSpecified.length === 1 ? `<b>${requiredButNotSpecified[0]}</b> is not defined` : `${requiredButNotSpecified.length} required inputs are not specified properly`;
-        if (requiredButNotSpecified.length !== nMissingRequired) console.warn('Disagreement about the correct error to throw...')
+        let message = isValid
+            ? ""
+            : requiredButNotSpecified.length === 1
+            ? `<b>${requiredButNotSpecified[0]}</b> is not defined`
+            : `${requiredButNotSpecified.length} required inputs are not specified properly`;
+        if (requiredButNotSpecified.length !== nMissingRequired)
+            console.warn("Disagreement about the correct error to throw...");
 
         // // Print out a detailed error message if any required inputs are missing
         // if (!isValid && nMissingRequired === allErrors.length) message = `${nMissingRequired} required inputs are not defined.`;
@@ -375,18 +379,22 @@ export class JSONSchemaForm extends LitElement {
         if (flaggedInputs.length) {
             flaggedInputs[0].focus();
             if (!message) {
-                console.log(flaggedInputs)
-                if (flaggedInputs.length === 1) message = `<b>${header(flaggedInputs[0].path.join('.'))}</b> is not valid`;
+                console.log(flaggedInputs);
+                if (flaggedInputs.length === 1)
+                    message = `<b>${header(flaggedInputs[0].path.join("."))}</b> is not valid`;
                 else message = `${flaggedInputs.length} invalid form values`;
             }
-            message += `${(this.base) ? ` in the <b>${this.base.join('.')}</b> section` : ''}. Please check the highlighted fields.`;
+            message += `${
+                this.base ? ` in the <b>${this.base.join(".")}</b> section` : ""
+            }. Please check the highlighted fields.`;
         }
 
         if (message) this.throw(message);
 
         // Validate nested forms (skip disabled)
         for (let name in this.#nestedForms) {
-           if (!this.#accordions[name].disabled) await this.#nestedForms[name].validate(resolved ? resolved[name] : undefined); // Validate nested forms too
+            if (!this.#accordions[name].disabled)
+                await this.#nestedForms[name].validate(resolved ? resolved[name] : undefined); // Validate nested forms too
         }
 
         try {
@@ -534,7 +542,7 @@ export class JSONSchemaForm extends LitElement {
             let isRequired = requirements[name];
 
             if (this.#accordions[name]?.disabled) continue; // Skip disabled accordions
-            
+
             // // NOTE: Uncomment to block checking requirements inside optional properties
             // if (!requirements[name][selfRequiredSymbol] && !resolved[name]) continue; // Do not continue checking requirements if absent and not required
 
@@ -544,7 +552,7 @@ export class JSONSchemaForm extends LitElement {
 
                 // if (typeof isRequired === "object" && !Array.isArray(isRequired))
                 //     invalid.push(...(await this.#validateRequirements(resolved[name], isRequired, path)));
-                // else 
+                // else
                 if (this.isUndefined(resolved[name]) && this.validateEmptyValues) invalid.push(path);
             }
         }
@@ -895,12 +903,12 @@ export class JSONSchemaForm extends LitElement {
 
             const localPath = [...path, name];
 
-            const enableToggle = document.createElement('input')
-            const enableToggleContainer = document.createElement('div')
+            const enableToggle = document.createElement("input");
+            const enableToggleContainer = document.createElement("div");
             Object.assign(enableToggleContainer.style, {
-                position: 'relative'
-            })
-            enableToggleContainer.append(enableToggle)
+                position: "relative",
+            });
+            enableToggleContainer.append(enableToggle);
 
             // Check properties that will be rendered before creating the accordion
             const base = [...this.base, ...localPath];
@@ -908,33 +916,32 @@ export class JSONSchemaForm extends LitElement {
             const explicitlyRequired = schema.required?.includes(name) ?? false;
 
             Object.assign(enableToggle, {
-                type: 'checkbox',
+                type: "checkbox",
                 checked: true,
-                style: 'margin-right: 10px; pointer-events:all;',
-            })
-
+                style: "margin-right: 10px; pointer-events:all;",
+            });
 
             const headerName = header(name);
 
             const renderableInside = this.#getRenderable(info, required[name], localPath, true);
 
-            const __disabled = this.results.__disabled ?? (this.results.__disabled = {})
+            const __disabled = this.results.__disabled ?? (this.results.__disabled = {});
+
+            const hasInteraction = __disabled.__interacted; // NOTE: This locks the specific value to what the user has chosen...
 
-            const hasInteraction = __disabled.__interacted // NOTE: This locks the specific value to what the user has chosen...
-            
-            const { __disabled: __tempDisabledGlobal = {}} = this.getGlobalValue(localPath.slice(0, -1));
+            const { __disabled: __tempDisabledGlobal = {} } = this.getGlobalValue(localPath.slice(0, -1));
 
-            const __disabledGlobal = structuredClone(__tempDisabledGlobal)  // NOTE: Cloning ensures no property transfer
+            const __disabledGlobal = structuredClone(__tempDisabledGlobal); // NOTE: Cloning ensures no property transfer
 
-            let isGlobalEffect = !hasInteraction || (!hasInteraction && __disabledGlobal.__interacted) // Indicate whether global effect is used
+            let isGlobalEffect = !hasInteraction || (!hasInteraction && __disabledGlobal.__interacted); // Indicate whether global effect is used
 
-            const __disabledResolved = isGlobalEffect ? __disabledGlobal : __disabled
+            const __disabledResolved = isGlobalEffect ? __disabledGlobal : __disabled;
 
-            const isDisabled = !!__disabledResolved[name]
+            const isDisabled = !!__disabledResolved[name];
 
-            enableToggle.checked = !isDisabled
+            enableToggle.checked = !isDisabled;
 
-            const nestedResults = __disabled[name] ?? results[name] ?? this.results[name] // One or the other will exist—depending on global or local disabling
+            const nestedResults = __disabled[name] ?? results[name] ?? this.results[name]; // One or the other will exist—depending on global or local disabling
 
             if (renderableInside.length) {
                 this.#nestedForms[name] = new JSONSchemaForm({
@@ -974,83 +981,84 @@ export class JSONSchemaForm extends LitElement {
                 });
             }
 
-            const oldStates = this.#accordions[headerName]
+            const oldStates = this.#accordions[headerName];
 
-            const accordion = this.#accordions[headerName] = new Accordion({
+            const accordion = (this.#accordions[headerName] = new Accordion({
                 name: headerName,
                 toggleable: hasMany,
-                subtitle: html`<div style="display:flex; align-items: center;">${explicitlyRequired ? '' : enableToggleContainer}${renderableInside.length ? `${renderableInside.length} fields` : ''}</div>`,
-                content: this.#nestedForms[name], 
+                subtitle: html`<div style="display:flex; align-items: center;">
+                    ${explicitlyRequired ? "" : enableToggleContainer}${renderableInside.length
+                        ? `${renderableInside.length} fields`
+                        : ""}
+                </div>`,
+                content: this.#nestedForms[name],
 
                 // States
                 open: oldStates?.open ?? !hasMany,
                 disabled: isDisabled,
-                status: oldStates?.status ?? 'valid', // Always show a status
-            });
+                status: oldStates?.status ?? "valid", // Always show a status
+            }));
 
             accordion.id = name; // assign name to accordion id
 
             // Set enable / disable behavior
             const addDisabled = (name, o) => {
-                if (!o.__disabled) o.__disabled = {}
+                if (!o.__disabled) o.__disabled = {};
 
                 // Do not overwrite cache of disabled values (with globals, for instance)
                 if (o.__disabled[name]) {
-                    if (isGlobalEffect) return 
+                    if (isGlobalEffect) return;
                 }
-                
-                o.__disabled[name] = (o[name] ?? (o[name] = {})) // Track disabled values (or at least something)
-            }
+
+                o.__disabled[name] = o[name] ?? (o[name] = {}); // Track disabled values (or at least something)
+            };
 
             const disable = () => {
-                accordion.disabled = true
-                addDisabled(name, this.resolved)
-                addDisabled(name, this.results)
-                this.resolved[name] = this.results[name] = undefined // Remove entry from results
-            }
+                accordion.disabled = true;
+                addDisabled(name, this.resolved);
+                addDisabled(name, this.results);
+                this.resolved[name] = this.results[name] = undefined; // Remove entry from results
+            };
 
             const enable = () => {
-                accordion.disabled = false
+                accordion.disabled = false;
 
-                const { __disabled = {} } = this.results
-                const { __disabled: resolvedDisabled = {}} = this.resolved
+                const { __disabled = {} } = this.results;
+                const { __disabled: resolvedDisabled = {} } = this.resolved;
 
-                if (__disabled[name]) this.updateData(localPath, __disabled[name])  // Propagate restored disabled values
-                __disabled[name] = undefined // Clear disabled value
-                resolvedDisabled[name] = undefined // Clear disabled value
-            }
+                if (__disabled[name]) this.updateData(localPath, __disabled[name]); // Propagate restored disabled values
+                __disabled[name] = undefined; // Clear disabled value
+                resolvedDisabled[name] = undefined; // Clear disabled value
+            };
 
-            enableToggle.addEventListener('click', (e) => {
-                e.stopPropagation()
-                const { checked } = e.target
+            enableToggle.addEventListener("click", (e) => {
+                e.stopPropagation();
+                const { checked } = e.target;
 
                 // Reset parameters on interaction
-                isGlobalEffect = false
+                isGlobalEffect = false;
                 Object.assign(enableToggle.style, {
-                    accentColor: 'unset'
-                })
+                    accentColor: "unset",
+                });
 
-                const { __disabled = {} } = this.results
-                const { __disabled: resolvedDisabled = {}} = this.resolved
+                const { __disabled = {} } = this.results;
+                const { __disabled: resolvedDisabled = {} } = this.resolved;
 
-                __disabled.__interacted = resolvedDisabled.__interacted = true // Track that the user has interacted with the form
+                __disabled.__interacted = resolvedDisabled.__interacted = true; // Track that the user has interacted with the form
 
                 checked ? enable() : disable();
 
-                this.onUpdate(localPath, this.results[name])                    
-
-            })
+                this.onUpdate(localPath, this.results[name]);
+            });
 
             if (isGlobalEffect) {
-                (isDisabled) ? disable() : enable();
+                isDisabled ? disable() : enable();
                 Object.assign(enableToggle.style, {
-                    accentColor: 'gray'
-                })
-                
+                    accentColor: "gray",
+                });
             }
 
             return accordion;
-
         });
 
         return rendered;
diff --git a/src/renderer/src/stories/assets/save.svg b/src/renderer/src/stories/assets/save.svg
index 9220f74ab..9198ddf73 100644
--- a/src/renderer/src/stories/assets/save.svg
+++ b/src/renderer/src/stories/assets/save.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="M840-683v503q0 24-18 42t-42 18H180q-24 0-42-18t-18-42v-600q0-24 18-42t42-18h503l157 157Zm-60 27L656-780H180v600h600v-476ZM479.765-245Q523-245 553.5-275.265q30.5-30.264 30.5-73.5Q584-392 553.735-422.5q-30.264-30.5-73.5-30.5Q437-453 406.5-422.735q-30.5 30.264-30.5 73.5Q376-306 406.265-275.5q30.264 30.5 73.5 30.5ZM233-584h358v-143H233v143Zm-53-72v476-600 124Z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="M840-683v503q0 24-18 42t-42 18H180q-24 0-42-18t-18-42v-600q0-24 18-42t42-18h503l157 157Zm-60 27L656-780H180v600h600v-476ZM479.765-245Q523-245 553.5-275.265q30.5-30.264 30.5-73.5Q584-392 553.735-422.5q-30.264-30.5-73.5-30.5Q437-453 406.5-422.735q-30.5 30.264-30.5 73.5Q376-306 406.265-275.5q30.264 30.5 73.5 30.5ZM233-584h358v-143H233v143Zm-53-72v476-600 124Z"/></svg>
diff --git a/src/renderer/src/stories/pages/FormPage.js b/src/renderer/src/stories/pages/FormPage.js
index f255a5242..2b9eb7c1b 100644
--- a/src/renderer/src/stories/pages/FormPage.js
+++ b/src/renderer/src/stories/pages/FormPage.js
@@ -25,9 +25,9 @@ export function schemaToPages(schema, globalStatePath, options, transformationCa
                     globalStatePath,
                     formOptions: {
                         ...optionsCopy,
-                        schema: { 
+                        schema: {
                             properties: { [key]: value },
-                            required: [ key ]
+                            required: [key],
                         },
                     },
                 })
diff --git a/src/renderer/src/stories/pages/guided-mode/data/GuidedMetadata.js b/src/renderer/src/stories/pages/guided-mode/data/GuidedMetadata.js
index 3a98519ab..114292fa8 100644
--- a/src/renderer/src/stories/pages/guided-mode/data/GuidedMetadata.js
+++ b/src/renderer/src/stories/pages/guided-mode/data/GuidedMetadata.js
@@ -156,9 +156,8 @@ export class GuidedMetadataPage extends ManagedPage {
 
         resolveResults(subject, session, globalState);
 
+        console.log(subject, session, results);
 
-        console.log(subject, session, results)
-        
         // Create the form
         const form = new JSONSchemaForm({
             identifier: instanceId,
diff --git a/src/renderer/src/stories/pages/guided-mode/data/GuidedSourceData.js b/src/renderer/src/stories/pages/guided-mode/data/GuidedSourceData.js
index 394c2f3cf..e9fb506a0 100644
--- a/src/renderer/src/stories/pages/guided-mode/data/GuidedSourceData.js
+++ b/src/renderer/src/stories/pages/guided-mode/data/GuidedSourceData.js
@@ -80,20 +80,17 @@ export class GuidedSourceDataPage extends ManagedPage {
 
             await Promise.all(
                 this.mapSessions(async ({ subject, session, info }, i) => {
-
-
-                    console.log('RUNNING', subject, session, info.source_data)
+                    console.log("RUNNING", subject, session, info.source_data);
                     // NOTE: This clears all user-defined results
                     const result = await run(`metadata`, {
                         source_data: info.source_data,
                         interfaces: this.info.globalState.interfaces,
-                    })
-                        .catch((e) => {
-                            Swal.close();
-                            stillFireSwal = false;
-                            this.notify(`<b>Critical Error:</b> ${e.message}`, "error", 4000);
-                            throw e;
-                        });
+                    }).catch((e) => {
+                        Swal.close();
+                        stillFireSwal = false;
+                        this.notify(`<b>Critical Error:</b> ${e.message}`, "error", 4000);
+                        throw e;
+                    });
 
                     Swal.close();
 
@@ -113,20 +110,18 @@ export class GuidedSourceDataPage extends ManagedPage {
                         throw result;
                     }
 
-                    const { results: metadata, schema } = result
-
+                    const { results: metadata, schema } = result;
 
                     // Always delete Ecephys if absent ( NOTE: temporarily manually removing from schema on backend...)
-                    const alwaysDelete = ['Ecephys']
-                    alwaysDelete.forEach(k => {
-                        if (!metadata[k]) delete info.metadata[k] // Delete directly on metadata
-                    })
-                    
+                    const alwaysDelete = ["Ecephys"];
+                    alwaysDelete.forEach((k) => {
+                        if (!metadata[k]) delete info.metadata[k]; // Delete directly on metadata
+                    });
+
                     for (let key in info.metadata) {
-                        if (!alwaysDelete.includes(key) && !(key in schema.properties)) metadata[key] = undefined
+                        if (!alwaysDelete.includes(key) && !(key in schema.properties)) metadata[key] = undefined;
                     }
 
-
                     // Merge metadata results with the generated info
                     merge(metadata, info.metadata);
 
@@ -149,7 +144,7 @@ export class GuidedSourceDataPage extends ManagedPage {
 
         const schema = this.info.globalState.schema.source_data;
         delete schema.description;
-        
+
         const form = new JSONSchemaForm({
             identifier: instanceId,
             schema: preprocessSourceDataSchema(schema),
@@ -162,7 +157,7 @@ export class GuidedSourceDataPage extends ManagedPage {
             },
             // onlyRequired: true,
             onUpdate: () => {
-                (this.unsavedUpdates = true)
+                this.unsavedUpdates = true;
             },
             onStatusChange: (state) => this.manager.updateState(instanceId, state),
             onThrow,
diff --git a/src/renderer/src/stories/pages/guided-mode/options/utils.js b/src/renderer/src/stories/pages/guided-mode/options/utils.js
index c345be201..3eb939744 100644
--- a/src/renderer/src/stories/pages/guided-mode/options/utils.js
+++ b/src/renderer/src/stories/pages/guided-mode/options/utils.js
@@ -28,7 +28,7 @@ export const run = async (url, payload, options = {}) => {
     if (!("base" in options)) options.base = "/neuroconv";
 
     // Clear private keys from being passed
-    payload = sanitize(structuredClone(payload))
+    payload = sanitize(structuredClone(payload));
 
     const results = await fetch(`${baseUrl}${options.base || ""}/${url}`, {
         method: "POST",
diff --git a/src/renderer/src/stories/pages/settings/SettingsPage.js b/src/renderer/src/stories/pages/settings/SettingsPage.js
index 974e2217b..a9f942997 100644
--- a/src/renderer/src/stories/pages/settings/SettingsPage.js
+++ b/src/renderer/src/stories/pages/settings/SettingsPage.js
@@ -20,12 +20,9 @@ import { merge, setUndefinedIfNotDeclared } from "../utils.js";
 
 import { notyf } from "../../../dependencies/globals.js";
 
-import saveSVG from '../../assets/save.svg?raw'
-
-
+import saveSVG from "../../assets/save.svg?raw";
 
 export class SettingsPage extends Page {
-    
     header = {
         title: "App Settings",
         subtitle: "This page allows you to set global settings for the GUIDE.",
diff --git a/src/renderer/src/stories/pages/utils.js b/src/renderer/src/stories/pages/utils.js
index 8ae496c2f..b3858b469 100644
--- a/src/renderer/src/stories/pages/utils.js
+++ b/src/renderer/src/stories/pages/utils.js
@@ -27,7 +27,6 @@ export const setUndefinedIfNotDeclared = (schemaProps, resolved) => {
     }
 };
 
-
 export const isPrivate = (k, v) => k.slice(0, 2) === "__";
 
 export const sanitize = (o, condition = isPrivate) => {
@@ -38,11 +37,10 @@ export const sanitize = (o, condition = isPrivate) => {
         }
     }
 
-    return o
-}
+    return o;
+};
 
 export function merge(toMerge = {}, target = {}, mergeOpts = {}) {
-
     // Deep merge objects
     for (const [k, v] of Object.entries(toMerge)) {
         const targetV = target[k];
@@ -50,14 +48,12 @@ export function merge(toMerge = {}, target = {}, mergeOpts = {}) {
         if (mergeOpts.arrays && Array.isArray(v) && Array.isArray(targetV))
             target[k] = [...targetV, ...v]; // Merge array entries together
         else if (v === undefined) {
-            delete target[k]; // Remove matched values   
-            // if (mergeOpts.remove !== false) delete target[k]; // Remove matched values    
-        }
-        else if (isObject(v)) {
+            delete target[k]; // Remove matched values
+            // if (mergeOpts.remove !== false) delete target[k]; // Remove matched values
+        } else if (isObject(v)) {
             if (isObject(targetV)) target[k] = merge(v, targetV, mergeOpts);
             else target[k] = v; // Replace object values
-        }
-        else target[k] = v; // Replace primitive values
+        } else target[k] = v; // Replace primitive values
     }
 
     return target;

From 4f5f1db4ea8da2859959fb698e55d1dc8aade3b6 Mon Sep 17 00:00:00 2001
From: Garrett Michael Flynn <garrettmflynn@gmail.com>
Date: Wed, 8 Nov 2023 08:09:23 -0800
Subject: [PATCH 10/21] Track interaction per item

---
 src/renderer/src/stories/JSONSchemaForm.js | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/renderer/src/stories/JSONSchemaForm.js b/src/renderer/src/stories/JSONSchemaForm.js
index e83e5c99d..4df7d9d3f 100644
--- a/src/renderer/src/stories/JSONSchemaForm.js
+++ b/src/renderer/src/stories/JSONSchemaForm.js
@@ -926,14 +926,15 @@ export class JSONSchemaForm extends LitElement {
             const renderableInside = this.#getRenderable(info, required[name], localPath, true);
 
             const __disabled = this.results.__disabled ?? (this.results.__disabled = {});
+            const __interacted = __disabled.__interacted ?? (__disabled.__interacted = {});
 
-            const hasInteraction = __disabled.__interacted; // NOTE: This locks the specific value to what the user has chosen...
+            const hasInteraction = __interacted[name]; // NOTE: This locks the specific value to what the user has chosen...
 
             const { __disabled: __tempDisabledGlobal = {} } = this.getGlobalValue(localPath.slice(0, -1));
 
             const __disabledGlobal = structuredClone(__tempDisabledGlobal); // NOTE: Cloning ensures no property transfer
 
-            let isGlobalEffect = !hasInteraction || (!hasInteraction && __disabledGlobal.__interacted); // Indicate whether global effect is used
+            let isGlobalEffect = !hasInteraction || (!hasInteraction && __disabledGlobal.__interacted?.[name]); // Indicate whether global effect is used
 
             const __disabledResolved = isGlobalEffect ? __disabledGlobal : __disabled;
 
@@ -1044,7 +1045,10 @@ export class JSONSchemaForm extends LitElement {
                 const { __disabled = {} } = this.results;
                 const { __disabled: resolvedDisabled = {} } = this.resolved;
 
-                __disabled.__interacted = resolvedDisabled.__interacted = true; // Track that the user has interacted with the form
+                if (!__disabled.__interacted) __disabled.__interacted = {}
+                if (!resolvedDisabled.__interacted) resolvedDisabled.__interacted = {}
+
+                __disabled.__interacted[name] = resolvedDisabled.__interacted[name] = true; // Track that the user has interacted with the form
 
                 checked ? enable() : disable();
 

From a15ffdabdd7c072c4c8e9da1336235a4176a3ceb Mon Sep 17 00:00:00 2001
From: "pre-commit-ci[bot]"
 <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Date: Wed, 8 Nov 2023 16:09:39 +0000
Subject: [PATCH 11/21] [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci
---
 src/renderer/src/stories/JSONSchemaForm.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/renderer/src/stories/JSONSchemaForm.js b/src/renderer/src/stories/JSONSchemaForm.js
index 4df7d9d3f..5c6f932e7 100644
--- a/src/renderer/src/stories/JSONSchemaForm.js
+++ b/src/renderer/src/stories/JSONSchemaForm.js
@@ -1045,8 +1045,8 @@ export class JSONSchemaForm extends LitElement {
                 const { __disabled = {} } = this.results;
                 const { __disabled: resolvedDisabled = {} } = this.resolved;
 
-                if (!__disabled.__interacted) __disabled.__interacted = {}
-                if (!resolvedDisabled.__interacted) resolvedDisabled.__interacted = {}
+                if (!__disabled.__interacted) __disabled.__interacted = {};
+                if (!resolvedDisabled.__interacted) resolvedDisabled.__interacted = {};
 
                 __disabled.__interacted[name] = resolvedDisabled.__interacted[name] = true; // Track that the user has interacted with the form
 

From 34abb42da68d97c0daf02893640b77e72dc25ed4 Mon Sep 17 00:00:00 2001
From: Garrett Michael Flynn <garrettmflynn@gmail.com>
Date: Wed, 8 Nov 2023 09:58:28 -0800
Subject: [PATCH 12/21] Show status properly on managers

---
 src/renderer/src/stories/JSONSchemaForm.js | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/renderer/src/stories/JSONSchemaForm.js b/src/renderer/src/stories/JSONSchemaForm.js
index 5c6f932e7..535a1ae0c 100644
--- a/src/renderer/src/stories/JSONSchemaForm.js
+++ b/src/renderer/src/stories/JSONSchemaForm.js
@@ -334,11 +334,17 @@ export class JSONSchemaForm extends LitElement {
     };
 
     status;
-    checkStatus = () =>
+    checkStatus = () => {
+
+
         checkStatus.call(this, this.#nWarnings, this.#nErrors, [
-            ...Object.values(this.#nestedForms),
-            ...Object.values(this.tables),
+            ...Object.entries(this.#nestedForms).filter(([k,v]) => {
+                const accordion = this.#accordions[k];
+                return !accordion || !accordion.disabled;
+            }).map(([_, v]) => v),
+            // ...Object.values(this.tables),
         ]);
+    }
 
     throw = (message) => {
         this.onThrow(message, this.identifier);
@@ -393,7 +399,8 @@ export class JSONSchemaForm extends LitElement {
 
         // Validate nested forms (skip disabled)
         for (let name in this.#nestedForms) {
-            if (!this.#accordions[name].disabled)
+            const accordion = this.#accordions[name];
+            if (!accordion || !accordion.disabled)
                 await this.#nestedForms[name].validate(resolved ? resolved[name] : undefined); // Validate nested forms too
         }
 
@@ -1019,6 +1026,9 @@ export class JSONSchemaForm extends LitElement {
                 addDisabled(name, this.resolved);
                 addDisabled(name, this.results);
                 this.resolved[name] = this.results[name] = undefined; // Remove entry from results
+
+                this.checkStatus()
+
             };
 
             const enable = () => {
@@ -1030,6 +1040,8 @@ export class JSONSchemaForm extends LitElement {
                 if (__disabled[name]) this.updateData(localPath, __disabled[name]); // Propagate restored disabled values
                 __disabled[name] = undefined; // Clear disabled value
                 resolvedDisabled[name] = undefined; // Clear disabled value
+
+                this.checkStatus()
             };
 
             enableToggle.addEventListener("click", (e) => {

From 65e9e09924c868d729035ce63fbbe3b0b321ff39 Mon Sep 17 00:00:00 2001
From: "pre-commit-ci[bot]"
 <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Date: Wed, 8 Nov 2023 18:01:02 +0000
Subject: [PATCH 13/21] [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci
---
 src/renderer/src/stories/JSONSchemaForm.js | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/renderer/src/stories/JSONSchemaForm.js b/src/renderer/src/stories/JSONSchemaForm.js
index 535a1ae0c..56a0854d8 100644
--- a/src/renderer/src/stories/JSONSchemaForm.js
+++ b/src/renderer/src/stories/JSONSchemaForm.js
@@ -335,16 +335,16 @@ export class JSONSchemaForm extends LitElement {
 
     status;
     checkStatus = () => {
-
-
         checkStatus.call(this, this.#nWarnings, this.#nErrors, [
-            ...Object.entries(this.#nestedForms).filter(([k,v]) => {
-                const accordion = this.#accordions[k];
-                return !accordion || !accordion.disabled;
-            }).map(([_, v]) => v),
+            ...Object.entries(this.#nestedForms)
+                .filter(([k, v]) => {
+                    const accordion = this.#accordions[k];
+                    return !accordion || !accordion.disabled;
+                })
+                .map(([_, v]) => v),
             // ...Object.values(this.tables),
         ]);
-    }
+    };
 
     throw = (message) => {
         this.onThrow(message, this.identifier);
@@ -1027,8 +1027,7 @@ export class JSONSchemaForm extends LitElement {
                 addDisabled(name, this.results);
                 this.resolved[name] = this.results[name] = undefined; // Remove entry from results
 
-                this.checkStatus()
-
+                this.checkStatus();
             };
 
             const enable = () => {
@@ -1041,7 +1040,7 @@ export class JSONSchemaForm extends LitElement {
                 __disabled[name] = undefined; // Clear disabled value
                 resolvedDisabled[name] = undefined; // Clear disabled value
 
-                this.checkStatus()
+                this.checkStatus();
             };
 
             enableToggle.addEventListener("click", (e) => {

From d9a86cf6a42b7260bc2a599084c89b4633251f0e Mon Sep 17 00:00:00 2001
From: Garrett Michael Flynn <garrettmflynn@gmail.com>
Date: Wed, 8 Nov 2023 13:47:41 -0800
Subject: [PATCH 14/21] Fix table tests

---
 src/renderer/src/stories/BasicTable.js      |  2 +-
 src/renderer/src/stories/JSONSchemaForm.js  | 26 ++++++++++++++-------
 src/renderer/src/stories/JSONSchemaInput.js | 14 ++++++-----
 src/renderer/src/stories/SimpleTable.js     |  2 +-
 src/renderer/src/stories/table/Cell.ts      | 11 +++++----
 tests/metadata.test.ts                      | 22 ++++++++++-------
 6 files changed, 48 insertions(+), 29 deletions(-)

diff --git a/src/renderer/src/stories/BasicTable.js b/src/renderer/src/stories/BasicTable.js
index 5d3396c32..ef4fa22ac 100644
--- a/src/renderer/src/stories/BasicTable.js
+++ b/src/renderer/src/stories/BasicTable.js
@@ -274,7 +274,7 @@ export class BasicTable extends LitElement {
                 });
             });
         });
-
+        
         promises.resolveAll(results, () => {
             this.#checkStatus();
             this.#rendered(true);
diff --git a/src/renderer/src/stories/JSONSchemaForm.js b/src/renderer/src/stories/JSONSchemaForm.js
index 56a0854d8..383daae4c 100644
--- a/src/renderer/src/stories/JSONSchemaForm.js
+++ b/src/renderer/src/stories/JSONSchemaForm.js
@@ -241,6 +241,7 @@ export class JSONSchemaForm extends LitElement {
 
     getTable = (path) => {
         if (typeof path === "string") path = path.split(".");
+
         if (path.length === 1) return this.tables[path[0]]; // return table if accessible
 
         const copy = [...path];
@@ -248,7 +249,7 @@ export class JSONSchemaForm extends LitElement {
 
         return this.getForm(copy).getTable(tableName);
     };
-
+v
     getForm = (path) => {
         if (typeof path === "string") path = path.split(".");
         const form = this.#nestedForms[path[0]];
@@ -259,9 +260,11 @@ export class JSONSchemaForm extends LitElement {
 
     getInput = (path) => {
         if (typeof path === "string") path = path.split(".");
+
         const container = this.shadowRoot.querySelector(`#${path.join("-")}`);
-        if (!container) return;
-        return container.querySelector("jsonschema-input");
+
+        if (!container) return this.getForm(path[0]).getInput(path.slice(1))
+        return container?.querySelector("jsonschema-input");
     };
 
     #requirements = {};
@@ -278,7 +281,9 @@ export class JSONSchemaForm extends LitElement {
     }
 
     // Track resolved values for the form (data only)
-    updateData(localPath, value) {
+    updateData(localPath, value, forceUpdate = false) {
+
+        if (!value) throw new Error('Cannot update data with undefined value')
         const path = [...localPath];
         const name = path.pop();
 
@@ -309,7 +314,7 @@ export class JSONSchemaForm extends LitElement {
                 isObject(value) && isObject(resolvedParent) ? merge(value, resolvedParent[name]) : value; // Merge with existing resolved values
         }
 
-        if (hasUpdate) this.onUpdate(localPath, value); // Ensure the value has actually changed
+        if (hasUpdate || forceUpdate) this.onUpdate(localPath, value); // Ensure the value has actually changed
     }
 
     #addMessage = (name, message, type) => {
@@ -342,7 +347,7 @@ export class JSONSchemaForm extends LitElement {
                     return !accordion || !accordion.disabled;
                 })
                 .map(([_, v]) => v),
-            // ...Object.values(this.tables),
+            ...Object.values(this.tables),
         ]);
     };
 
@@ -391,10 +396,11 @@ export class JSONSchemaForm extends LitElement {
                 else message = `${flaggedInputs.length} invalid form values`;
             }
             message += `${
-                this.base ? ` in the <b>${this.base.join(".")}</b> section` : ""
+                this.base.length ? ` in the <b>${this.base.join(".")}</b> section` : ""
             }. Please check the highlighted fields.`;
         }
 
+
         if (message) this.throw(message);
 
         // Validate nested forms (skip disabled)
@@ -436,6 +442,7 @@ export class JSONSchemaForm extends LitElement {
 
     #get = (path, object = this.resolved, omitted = []) => {
         // path = path.slice(this.base.length); // Correct for base path
+        if (!path) throw new Error('Path not specified')
         return path.reduce(
             (acc, curr) => (acc = acc?.[curr] ?? acc?.[omitted.find((str) => acc[str])]?.[curr]),
             object
@@ -489,6 +496,7 @@ export class JSONSchemaForm extends LitElement {
                 }
             };
 
+
         const interactiveInput = new JSONSchemaInput({
             info,
             path: localPath,
@@ -958,9 +966,9 @@ export class JSONSchemaForm extends LitElement {
                     results: { ...nestedResults },
                     globals: this.globals?.[name],
 
-                    onUpdate: (internalPath, value) => {
+                    onUpdate: (internalPath, value, forceUpdate) => {
                         const path = [...localPath, ...internalPath];
-                        this.updateData(path, value);
+                        this.updateData(path, value, forceUpdate);
                     },
 
                     required: required[name], // Scoped to the sub-schema
diff --git a/src/renderer/src/stories/JSONSchemaInput.js b/src/renderer/src/stories/JSONSchemaInput.js
index 218f556a8..074448bd7 100644
--- a/src/renderer/src/stories/JSONSchemaInput.js
+++ b/src/renderer/src/stories/JSONSchemaInput.js
@@ -135,10 +135,10 @@ export class JSONSchemaInput extends LitElement {
 
     getElement = () => this.shadowRoot.querySelector(".schema-input");
 
-    #activateTimeoutValidation = (name, el, path) => {
+    #activateTimeoutValidation = (name, path) => {
         this.#clearTimeoutValidation();
         this.#validationTimeout = setTimeout(() => {
-            this.onValidate ? this.onValidate() : this.form ? this.form.triggerValidation(name, el, path) : "";
+            this.onValidate ? this.onValidate() : this.form ? this.form.triggerValidation(name, path) : "";
         }, 1000);
     };
 
@@ -147,15 +147,15 @@ export class JSONSchemaInput extends LitElement {
     };
 
     #validationTimeout = null;
-    #updateData = (fullPath, value) => {
-        this.onUpdate ? this.onUpdate(value) : this.form ? this.form.updateData(fullPath, value) : "";
+    #updateData = (fullPath, value, forceUpdate) => {
+        this.onUpdate ? this.onUpdate(value) : this.form ? this.form.updateData(fullPath, value, forceUpdate) : "";
 
         const path = [...fullPath];
         const name = path.splice(-1)[0];
 
         this.value = value; // Update the latest value
 
-        this.#activateTimeoutValidation(name, this.getElement(), path);
+        this.#activateTimeoutValidation(name, path);
     };
 
     #triggerValidation = (name, path) => {
@@ -226,6 +226,8 @@ export class JSONSchemaInput extends LitElement {
                 const tableMetadata = {
                     schema: itemSchema,
                     data: this.value,
+                    
+                    onUpdate: () => this.#updateData(fullPath, tableMetadata.data, true), // Ensure change propagates to all forms
 
                     // NOTE: This is likely an incorrect declaration of the table validation call
                     validateOnChange: (key, parent, v) => {
@@ -248,7 +250,7 @@ export class JSONSchemaInput extends LitElement {
                             this.form.checkAllLoaded();
                         }
                     },
-                    onThrow: (...args) => this.#onThrow(...args),
+                    onThrow: (...args) => this.#onThrow(...args)
                 };
 
                 const table = this.form.createTable(name, tableMetadata, fullPath); // Try creating table. Otherwise use nested form
diff --git a/src/renderer/src/stories/SimpleTable.js b/src/renderer/src/stories/SimpleTable.js
index 4835f3630..ab3fa5b44 100644
--- a/src/renderer/src/stories/SimpleTable.js
+++ b/src/renderer/src/stories/SimpleTable.js
@@ -635,7 +635,7 @@ export class SimpleTable extends LitElement {
             else target[rowName][header] = value;
         }
 
-        if (cell.interacted) this.onUpdate(rowName, header, value);
+        if (cell.interacted) this.onUpdate([ rowName, header ], value);
     };
 
     #createCell = (value, info) => {
diff --git a/src/renderer/src/stories/table/Cell.ts b/src/renderer/src/stories/table/Cell.ts
index e258e218f..2a25d577e 100644
--- a/src/renderer/src/stories/table/Cell.ts
+++ b/src/renderer/src/stories/table/Cell.ts
@@ -20,6 +20,8 @@ type TableCellProps = {
     onValidate?: OnValidateFunction,
 }
 
+const persistentInteraction = Symbol('persistentInteraction')
+
 export class TableCell extends LitElement {
 
     declare schema: TableCellProps['schema']
@@ -132,8 +134,9 @@ export class TableCell extends LitElement {
     };
 
     setInput(value: any) {
-        this.interacted = true
-        this.input.set(value)  // Ensure all operations are undoable
+        this.interacted = persistentInteraction
+        if (this.input) this.input.set(value)  // Ensure all operations are undoable
+        else this.#value = value // Silently set value if not rendered yet
     }
 
     #value
@@ -147,7 +150,7 @@ export class TableCell extends LitElement {
 
     #cls: any
 
-    interacted = false
+    interacted: boolean | symbol = false
 
     // input = new TableCellBase({ })
 
@@ -157,7 +160,7 @@ export class TableCell extends LitElement {
 
         let cls = TableCellBase
 
-        this.interacted = false
+        this.interacted = this.interacted === persistentInteraction
 
         if (this.schema.type === "array") cls = ArrayCell
         else if (this.schema.format === "date-time") cls =  DateTimeCell
diff --git a/tests/metadata.test.ts b/tests/metadata.test.ts
index 2b53a2fb2..b5dab4e9e 100644
--- a/tests/metadata.test.ts
+++ b/tests/metadata.test.ts
@@ -113,8 +113,7 @@ test('inter-table updates are triggered', async () => {
     await form.rendered
 
     // Validate that the results are incorrect
-    let errors = false
-    await form.validate().catch(e => errors = true)
+    const errors = await form.validate().catch(() => true).catch(e =>  true)
     expect(errors).toBe(true) // Is invalid
 
     // Update the table with the missing electrode group
@@ -123,13 +122,19 @@ test('inter-table updates are triggered', async () => {
 
     const baseRow = table.getRow(0)
     row.forEach((cell, i) => {
-        if (cell.simpleTableInfo.col === 'name') cell.value = randomStringId // Set name to random string id
-        else cell.value = baseRow[i].value // Otherwise carry over info
+        if (cell.simpleTableInfo.col === 'name') cell.setInput(randomStringId) // Set name to random string id
+        else cell.setInput(baseRow[i].value) // Otherwise carry over info
     })
 
+    // Wait a second for new row values to resolve as table data (async)
+    await new Promise((res) => setTimeout(() => res(true), 1000))
+
     // Validate that the new structure is correct
-    await form.validate().then(res => errors = false).catch(e => errors = true)
-    expect(errors).toBe(false) // Is valid
+    const hasErrors = await form.validate().then(() => false).catch((e) => {
+        console.error(e)
+        return true
+    })
+    expect(hasErrors).toBe(false) // Is valid
 })
 
 
@@ -193,6 +198,7 @@ test('changes are resolved correctly', async () => {
     input3.updateData('test')
 
     // Validate that the new structure is correct
-    await form.validate(form.results).then(res => errors = false).catch(e => errors = true)
-    expect(errors).toBe(false) // Is valid
+    const hasErrors = await form.validate(form.results).then(res => false).catch(e => true)
+
+    expect(hasErrors).toBe(false) // Is valid
 })

From b62dec6d4e742e5dd3a9968629e367627ec76954 Mon Sep 17 00:00:00 2001
From: "pre-commit-ci[bot]"
 <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Date: Wed, 8 Nov 2023 21:48:06 +0000
Subject: [PATCH 15/21] [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci
---
 src/renderer/src/stories/BasicTable.js      |  2 +-
 src/renderer/src/stories/JSONSchemaForm.js  | 11 ++++-------
 src/renderer/src/stories/JSONSchemaInput.js |  4 ++--
 src/renderer/src/stories/SimpleTable.js     |  2 +-
 4 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/src/renderer/src/stories/BasicTable.js b/src/renderer/src/stories/BasicTable.js
index ef4fa22ac..5d3396c32 100644
--- a/src/renderer/src/stories/BasicTable.js
+++ b/src/renderer/src/stories/BasicTable.js
@@ -274,7 +274,7 @@ export class BasicTable extends LitElement {
                 });
             });
         });
-        
+
         promises.resolveAll(results, () => {
             this.#checkStatus();
             this.#rendered(true);
diff --git a/src/renderer/src/stories/JSONSchemaForm.js b/src/renderer/src/stories/JSONSchemaForm.js
index 383daae4c..6b7991d90 100644
--- a/src/renderer/src/stories/JSONSchemaForm.js
+++ b/src/renderer/src/stories/JSONSchemaForm.js
@@ -249,7 +249,7 @@ export class JSONSchemaForm extends LitElement {
 
         return this.getForm(copy).getTable(tableName);
     };
-v
+    v;
     getForm = (path) => {
         if (typeof path === "string") path = path.split(".");
         const form = this.#nestedForms[path[0]];
@@ -263,7 +263,7 @@ v
 
         const container = this.shadowRoot.querySelector(`#${path.join("-")}`);
 
-        if (!container) return this.getForm(path[0]).getInput(path.slice(1))
+        if (!container) return this.getForm(path[0]).getInput(path.slice(1));
         return container?.querySelector("jsonschema-input");
     };
 
@@ -282,8 +282,7 @@ v
 
     // Track resolved values for the form (data only)
     updateData(localPath, value, forceUpdate = false) {
-
-        if (!value) throw new Error('Cannot update data with undefined value')
+        if (!value) throw new Error("Cannot update data with undefined value");
         const path = [...localPath];
         const name = path.pop();
 
@@ -400,7 +399,6 @@ v
             }. Please check the highlighted fields.`;
         }
 
-
         if (message) this.throw(message);
 
         // Validate nested forms (skip disabled)
@@ -442,7 +440,7 @@ v
 
     #get = (path, object = this.resolved, omitted = []) => {
         // path = path.slice(this.base.length); // Correct for base path
-        if (!path) throw new Error('Path not specified')
+        if (!path) throw new Error("Path not specified");
         return path.reduce(
             (acc, curr) => (acc = acc?.[curr] ?? acc?.[omitted.find((str) => acc[str])]?.[curr]),
             object
@@ -496,7 +494,6 @@ v
                 }
             };
 
-
         const interactiveInput = new JSONSchemaInput({
             info,
             path: localPath,
diff --git a/src/renderer/src/stories/JSONSchemaInput.js b/src/renderer/src/stories/JSONSchemaInput.js
index 074448bd7..4ad9a8742 100644
--- a/src/renderer/src/stories/JSONSchemaInput.js
+++ b/src/renderer/src/stories/JSONSchemaInput.js
@@ -226,7 +226,7 @@ export class JSONSchemaInput extends LitElement {
                 const tableMetadata = {
                     schema: itemSchema,
                     data: this.value,
-                    
+
                     onUpdate: () => this.#updateData(fullPath, tableMetadata.data, true), // Ensure change propagates to all forms
 
                     // NOTE: This is likely an incorrect declaration of the table validation call
@@ -250,7 +250,7 @@ export class JSONSchemaInput extends LitElement {
                             this.form.checkAllLoaded();
                         }
                     },
-                    onThrow: (...args) => this.#onThrow(...args)
+                    onThrow: (...args) => this.#onThrow(...args),
                 };
 
                 const table = this.form.createTable(name, tableMetadata, fullPath); // Try creating table. Otherwise use nested form
diff --git a/src/renderer/src/stories/SimpleTable.js b/src/renderer/src/stories/SimpleTable.js
index ab3fa5b44..8d992d7e3 100644
--- a/src/renderer/src/stories/SimpleTable.js
+++ b/src/renderer/src/stories/SimpleTable.js
@@ -635,7 +635,7 @@ export class SimpleTable extends LitElement {
             else target[rowName][header] = value;
         }
 
-        if (cell.interacted) this.onUpdate([ rowName, header ], value);
+        if (cell.interacted) this.onUpdate([rowName, header], value);
     };
 
     #createCell = (value, info) => {

From cb6020d593489409f6c1cf3f799848676148c3ae Mon Sep 17 00:00:00 2001
From: "pre-commit-ci[bot]"
 <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Date: Thu, 9 Nov 2023 20:30:03 +0000
Subject: [PATCH 16/21] [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci
---
 .../stories/pages/guided-mode/data/GuidedPathExpansion.js  | 2 +-
 .../src/stories/pages/guided-mode/data/GuidedSourceData.js | 7 +++----
 src/renderer/src/stories/pages/guided-mode/data/utils.js   | 2 +-
 3 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/renderer/src/stories/pages/guided-mode/data/GuidedPathExpansion.js b/src/renderer/src/stories/pages/guided-mode/data/GuidedPathExpansion.js
index 90af0a741..3b8fe1c1b 100644
--- a/src/renderer/src/stories/pages/guided-mode/data/GuidedPathExpansion.js
+++ b/src/renderer/src/stories/pages/guided-mode/data/GuidedPathExpansion.js
@@ -129,7 +129,7 @@ export class GuidedPathExpansionPage extends Page {
 
                 const source_data = {};
                 for (let key in globalState.interfaces) {
-                    const existing = existingSourceData?.[key]
+                    const existing = existingSourceData?.[key];
                     if (existing) source_data[key] = existing ?? {};
                 }
 
diff --git a/src/renderer/src/stories/pages/guided-mode/data/GuidedSourceData.js b/src/renderer/src/stories/pages/guided-mode/data/GuidedSourceData.js
index 01cb001ea..431b4aab7 100644
--- a/src/renderer/src/stories/pages/guided-mode/data/GuidedSourceData.js
+++ b/src/renderer/src/stories/pages/guided-mode/data/GuidedSourceData.js
@@ -69,7 +69,7 @@ export class GuidedSourceDataPage extends ManagedPage {
                     backdrop: "rgba(0,0,0, 0.4)",
                     timerProgressBar: false,
                     didOpen: () => {
-                        Swal.showLoading(); 
+                        Swal.showLoading();
                     },
                 });
             };
@@ -80,7 +80,6 @@ export class GuidedSourceDataPage extends ManagedPage {
 
             await Promise.all(
                 Object.values(this.forms).map(async ({ subject, session, form }) => {
-                    
                     const info = this.info.globalState.results[subject][session];
 
                     // NOTE: This clears all user-defined results
@@ -187,8 +186,8 @@ export class GuidedSourceDataPage extends ManagedPage {
         const modal = (this.#globalModal = createGlobalFormModal.call(this, {
             header: "Global Source Data",
             propsToRemove: [
-                ...propsToIgnore, 
-                "folder_path", 
+                ...propsToIgnore,
+                "folder_path",
                 "file_path",
                 // NOTE: Still keeping plural path specifications for now
             ],
diff --git a/src/renderer/src/stories/pages/guided-mode/data/utils.js b/src/renderer/src/stories/pages/guided-mode/data/utils.js
index 44ac392dd..668aa7988 100644
--- a/src/renderer/src/stories/pages/guided-mode/data/utils.js
+++ b/src/renderer/src/stories/pages/guided-mode/data/utils.js
@@ -2,7 +2,7 @@ import { merge } from "../../utils.js";
 
 // Merge project-wide data into metadata
 export function populateWithProjectMetadata(info, globalState) {
-    const copy = structuredClone(info)
+    const copy = structuredClone(info);
     const toMerge = Object.entries(globalState.project).filter(([_, value]) => value && typeof value === "object");
     toMerge.forEach(([key, value]) => {
         let internalMetadata = copy[key];

From 3bccf885368eef906240de9b2bdca658d89e3b75 Mon Sep 17 00:00:00 2001
From: Garrett Michael Flynn <garrettmflynn@gmail.com>
Date: Thu, 9 Nov 2023 13:27:39 -0800
Subject: [PATCH 17/21] Update GuidedSourceData.js

---
 .../src/stories/pages/guided-mode/data/GuidedSourceData.js    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/renderer/src/stories/pages/guided-mode/data/GuidedSourceData.js b/src/renderer/src/stories/pages/guided-mode/data/GuidedSourceData.js
index 431b4aab7..f3d9ab6b8 100644
--- a/src/renderer/src/stories/pages/guided-mode/data/GuidedSourceData.js
+++ b/src/renderer/src/stories/pages/guided-mode/data/GuidedSourceData.js
@@ -5,7 +5,7 @@ import { InstanceManager } from "../../../InstanceManager.js";
 import { ManagedPage } from "./ManagedPage.js";
 import { baseUrl } from "../../../../globals.js";
 import { onThrow } from "../../../../errors";
-import { merge } from "../../utils.js";
+import { merge, sanitize } from "../../utils.js";
 import preprocessSourceDataSchema from "../../../../../../../schemas/source-data.schema";
 
 import { createGlobalFormModal } from "../../../forms/GlobalFormModal";
@@ -87,7 +87,7 @@ export class GuidedSourceDataPage extends ManagedPage {
                         method: "POST",
                         headers: { "Content-Type": "application/json" },
                         body: JSON.stringify({
-                            source_data: form.resolved, // Use resolved values, including global source data
+                            source_data: sanitize(structuredClone(form.resolved)), // Use resolved values, including global source data
                             interfaces: this.info.globalState.interfaces,
                         }),
                     })

From c492ff515b56043d6dc510b548bc7a8bad8153b2 Mon Sep 17 00:00:00 2001
From: Garrett Michael Flynn <garrettmflynn@gmail.com>
Date: Thu, 9 Nov 2023 13:29:40 -0800
Subject: [PATCH 18/21] Require all settings properties

---
 schemas/json/dandi/global.json                          | 3 ++-
 src/renderer/src/stories/pages/settings/SettingsPage.js | 2 ++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/schemas/json/dandi/global.json b/schemas/json/dandi/global.json
index 7b72776b5..081eae1f1 100644
--- a/schemas/json/dandi/global.json
+++ b/schemas/json/dandi/global.json
@@ -16,5 +16,6 @@
             },
             "required": ["main_api_key"]
         }
-    }
+    },
+    "required": ["api_keys"]
 }
diff --git a/src/renderer/src/stories/pages/settings/SettingsPage.js b/src/renderer/src/stories/pages/settings/SettingsPage.js
index 7ec50fa69..0a2cb4a16 100644
--- a/src/renderer/src/stories/pages/settings/SettingsPage.js
+++ b/src/renderer/src/stories/pages/settings/SettingsPage.js
@@ -12,6 +12,8 @@ const schema = {
         output_locations: projectGlobalSchema,
         DANDI: dandiGlobalSchema,
     },
+    required: ["output_locations", "DANDI"]
+
 };
 
 import { Button } from "../../Button.js";

From 5184632f49ca4e607c4c8bbd36c9b43e6d2a8ef9 Mon Sep 17 00:00:00 2001
From: Garrett Michael Flynn <garrettmflynn@gmail.com>
Date: Thu, 9 Nov 2023 13:29:51 -0800
Subject: [PATCH 19/21] Update SettingsPage.js

---
 src/renderer/src/stories/pages/settings/SettingsPage.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/renderer/src/stories/pages/settings/SettingsPage.js b/src/renderer/src/stories/pages/settings/SettingsPage.js
index 0a2cb4a16..80b78dbaa 100644
--- a/src/renderer/src/stories/pages/settings/SettingsPage.js
+++ b/src/renderer/src/stories/pages/settings/SettingsPage.js
@@ -13,7 +13,6 @@ const schema = {
         DANDI: dandiGlobalSchema,
     },
     required: ["output_locations", "DANDI"]
-
 };
 
 import { Button } from "../../Button.js";

From d28fdc463acf8353062c8cf47381d8d220d1a08b Mon Sep 17 00:00:00 2001
From: "pre-commit-ci[bot]"
 <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Date: Thu, 9 Nov 2023 21:30:54 +0000
Subject: [PATCH 20/21] [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci
---
 src/renderer/src/stories/pages/settings/SettingsPage.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderer/src/stories/pages/settings/SettingsPage.js b/src/renderer/src/stories/pages/settings/SettingsPage.js
index 80b78dbaa..106ca5ab0 100644
--- a/src/renderer/src/stories/pages/settings/SettingsPage.js
+++ b/src/renderer/src/stories/pages/settings/SettingsPage.js
@@ -12,7 +12,7 @@ const schema = {
         output_locations: projectGlobalSchema,
         DANDI: dandiGlobalSchema,
     },
-    required: ["output_locations", "DANDI"]
+    required: ["output_locations", "DANDI"],
 };
 
 import { Button } from "../../Button.js";

From 1a1be17b3b3ca31515e95d79dee7f7631f543ebc Mon Sep 17 00:00:00 2001
From: "pre-commit-ci[bot]"
 <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Date: Thu, 9 Nov 2023 23:51:17 +0000
Subject: [PATCH 21/21] [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci
---
 .../pages/guided-mode/data/GuidedStructure.js |   6 +-
 .../options/GuidedInspectorPage.js            | 160 +++++++++---------
 .../stories/pages/settings/SettingsPage.js    |   1 -
 .../src/stories/pages/uploads/UploadsPage.js  |  25 +--
 src/renderer/src/stories/pages/utils.js       |   3 +-
 5 files changed, 101 insertions(+), 94 deletions(-)

diff --git a/src/renderer/src/stories/pages/guided-mode/data/GuidedStructure.js b/src/renderer/src/stories/pages/guided-mode/data/GuidedStructure.js
index c815215dc..8c92d5428 100644
--- a/src/renderer/src/stories/pages/guided-mode/data/GuidedStructure.js
+++ b/src/renderer/src/stories/pages/guided-mode/data/GuidedStructure.js
@@ -87,10 +87,10 @@ export class GuidedStructurePage extends Page {
             this.mapSessions(({ info }) => {
                 Object.keys(info.source_data).forEach((key) => {
                     if (!this.info.globalState.interfaces[key]) delete info.source_data[key];
-                })
-            })
+                });
+            });
         }
-        
+
         await this.save(undefined, false); // Interrim save, in case the schema request fails
         await this.getSchema();
     };
diff --git a/src/renderer/src/stories/pages/guided-mode/options/GuidedInspectorPage.js b/src/renderer/src/stories/pages/guided-mode/options/GuidedInspectorPage.js
index 5a9efaae8..db1623de9 100644
--- a/src/renderer/src/stories/pages/guided-mode/options/GuidedInspectorPage.js
+++ b/src/renderer/src/stories/pages/guided-mode/options/GuidedInspectorPage.js
@@ -37,9 +37,9 @@ export class GuidedInspectorPage extends Page {
         super(...args);
         this.style.height = "100%"; // Fix main section
         Object.assign(this.style, {
-            display: 'flex',
-            flexDirection: 'column'
-        })
+            display: "flex",
+            flexDirection: "column",
+        });
     }
 
     header = {
@@ -85,85 +85,89 @@ export class GuidedInspectorPage extends Page {
             )
             .flat();
         return html` ${new InfoBox({
-            header: "How do I fix these suggestions?",
-            content: html`We suggest editing the Global Metadata on the <b>previous page</b> to fix any issues shared
-                across files.`,
-        })}
-
-        <br>
-        
-        ${until(
-            (async () => {
-                if (fileArr.length <= 1) {
-                    const items =
-                        inspector ??
-                        removeFilePaths(
+                header: "How do I fix these suggestions?",
+                content: html`We suggest editing the Global Metadata on the <b>previous page</b> to fix any issues
+                    shared across files.`,
+            })}
+
+            <br />
+
+            ${until(
+                (async () => {
+                    if (fileArr.length <= 1) {
+                        const items =
+                            inspector ??
+                            removeFilePaths(
+                                (this.unsavedUpdates = globalState.preview.inspector =
+                                    await run(
+                                        "inspect_file",
+                                        { nwbfile_path: fileArr[0].info.file, ...opts },
+                                        { title }
+                                    ))
+                            );
+                        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_file", { nwbfile_path: fileArr[0].info.file, ...opts }, { title }))
-                        );
-                    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" }));
-                    return truncateFilePaths(report, path);
-                })();
-
-                const _instances = fileArr.map(({ subject, session, info }) => {
-                    const file_path = [`sub-${subject}`, `sub-${subject}_ses-${session}`];
-                    const filtered = removeFilePaths(filter(items, { file_path }));
-
-                    const display = () => new InspectorList({ items: filtered, emptyMessage });
-                    display.status = this.getStatus(filtered);
-
-                    return {
-                        subject,
-                        session,
-                        display,
+                                await run("inspect_folder", { path, ...opts }, { title: title + "s" }));
+                        return truncateFilePaths(report, path);
+                    })();
+
+                    const _instances = fileArr.map(({ subject, session, info }) => {
+                        const file_path = [`sub-${subject}`, `sub-${subject}_ses-${session}`];
+                        const filtered = removeFilePaths(filter(items, { file_path }));
+
+                        const display = () => new InspectorList({ items: filtered, emptyMessage });
+                        display.status = this.getStatus(filtered);
+
+                        return {
+                            subject,
+                            session,
+                            display,
+                        };
+                    });
+
+                    const instances = _instances.reduce((acc, { subject, session, display }) => {
+                        const subLabel = `sub-${subject}`;
+                        if (!acc[`sub-${subject}`]) acc[subLabel] = {};
+                        acc[subLabel][`ses-${session}`] = display;
+                        return acc;
+                    }, {});
+
+                    Object.keys(instances).forEach((subLabel) => {
+                        const subItems = filter(items, { file_path: `${subLabel}${nodePath.sep}${subLabel}_ses-` }); // NOTE: This will not run on web-only now
+                        const path = getSharedPath(subItems.map((o) => o.file_path));
+                        const filtered = truncateFilePaths(subItems, path);
+
+                        const display = () => new InspectorList({ items: filtered, emptyMessage });
+                        display.status = this.getStatus(filtered);
+
+                        instances[subLabel] = {
+                            ["All Files"]: display,
+                            ...instances[subLabel],
+                        };
+                    });
+
+                    const allDisplay = () => new InspectorList({ items, emptyMessage });
+                    allDisplay.status = this.getStatus(items);
+
+                    const allInstances = {
+                        ["All Files"]: allDisplay,
+                        ...instances,
                     };
-                });
-
-                const instances = _instances.reduce((acc, { subject, session, display }) => {
-                    const subLabel = `sub-${subject}`;
-                    if (!acc[`sub-${subject}`]) acc[subLabel] = {};
-                    acc[subLabel][`ses-${session}`] = display;
-                    return acc;
-                }, {});
-
-                Object.keys(instances).forEach((subLabel) => {
-                    const subItems = filter(items, { file_path: `${subLabel}${nodePath.sep}${subLabel}_ses-` }); // NOTE: This will not run on web-only now
-                    const path = getSharedPath(subItems.map((o) => o.file_path));
-                    const filtered = truncateFilePaths(subItems, path);
-
-                    const display = () => new InspectorList({ items: filtered, emptyMessage });
-                    display.status = this.getStatus(filtered);
-
-                    instances[subLabel] = {
-                        ["All Files"]: display,
-                        ...instances[subLabel],
-                    };
-                });
-
-                const allDisplay = () => new InspectorList({ items, emptyMessage });
-                allDisplay.status = this.getStatus(items);
-
-                const allInstances = {
-                    ["All Files"]: allDisplay,
-                    ...instances,
-                };
 
-                const manager = new InstanceManager({
-                    instances: allInstances,
-                });
+                    const manager = new InstanceManager({
+                        instances: allInstances,
+                    });
 
-                return manager;
-            })(),
-            ""
-        )}`;
+                    return manager;
+                })(),
+                ""
+            )}`;
     }
 }
 
diff --git a/src/renderer/src/stories/pages/settings/SettingsPage.js b/src/renderer/src/stories/pages/settings/SettingsPage.js
index aa719413e..749f6368a 100644
--- a/src/renderer/src/stories/pages/settings/SettingsPage.js
+++ b/src/renderer/src/stories/pages/settings/SettingsPage.js
@@ -62,7 +62,6 @@ export class SettingsPage extends Page {
     };
 
     render() {
-        
         this.localState = structuredClone(global.data);
 
         // NOTE: API Keys and Dandiset IDs persist across selected project
diff --git a/src/renderer/src/stories/pages/uploads/UploadsPage.js b/src/renderer/src/stories/pages/uploads/UploadsPage.js
index 03b4e2a9e..0df8220a9 100644
--- a/src/renderer/src/stories/pages/uploads/UploadsPage.js
+++ b/src/renderer/src/stories/pages/uploads/UploadsPage.js
@@ -51,7 +51,7 @@ export async function uploadToDandi(info, type = "project" in info ? "project" :
     const staging = isStaging(dandiset_id); // Automatically detect staging IDs
 
     const whichAPIKey = staging ? "staging_api_key" : "main_api_key";
-    const DANDI = global.data.DANDI
+    const DANDI = global.data.DANDI;
     let api_key = DANDI?.api_keys?.[whichAPIKey];
 
     const errors = await validateDANDIApiKey(api_key, staging);
@@ -66,7 +66,7 @@ export async function uploadToDandi(info, type = "project" in info ? "project" :
 
         const input = new JSONSchemaInput({
             path: [whichAPIKey],
-            info: dandiGlobalSchema.properties.api_keys.properties[whichAPIKey]
+            info: dandiGlobalSchema.properties.api_keys.properties[whichAPIKey],
         });
 
         input.style.padding = "25px";
@@ -92,14 +92,17 @@ export async function uploadToDandi(info, type = "project" in info ? "project" :
                         const errors = await validateDANDIApiKey(input.value, staging);
                         if (!errors || !errors.length) {
                             modal.remove();
- 
-                            merge({
-                                DANDI: {
-                                    api_keys: {
-                                        [whichAPIKey]: value
-                                    }
-                                }
-                            }, global.data)
+
+                            merge(
+                                {
+                                    DANDI: {
+                                        api_keys: {
+                                            [whichAPIKey]: value,
+                                        },
+                                    },
+                                },
+                                global.data
+                            );
 
                             global.save();
                             resolve(value);
@@ -118,7 +121,7 @@ export async function uploadToDandi(info, type = "project" in info ? "project" :
             document.body.append(modal);
         });
 
-        console.log(api_key)
+        console.log(api_key);
     }
 
     const result = await run(
diff --git a/src/renderer/src/stories/pages/utils.js b/src/renderer/src/stories/pages/utils.js
index d926792e9..fd1d65e6e 100644
--- a/src/renderer/src/stories/pages/utils.js
+++ b/src/renderer/src/stories/pages/utils.js
@@ -45,7 +45,8 @@ export function merge(toMerge = {}, target = {}, mergeOpts = {}) {
     for (const [k, v] of Object.entries(toMerge)) {
         const targetV = target[k];
         // if (isPrivate(k)) continue;
-        if (mergeOpts.arrays && Array.isArray(v) && Array.isArray(targetV)) target[k] = [...targetV, ...v]; // Merge array entries together
+        if (mergeOpts.arrays && Array.isArray(v) && Array.isArray(targetV))
+            target[k] = [...targetV, ...v]; // Merge array entries together
         else if (v === undefined) {
             delete target[k]; // Remove matched values
             // if (mergeOpts.remove !== false) delete target[k]; // Remove matched values