Dynamic workflow rerendering

src/renderer/assets/css/guided.css

@@ -39,6 +39,16 @@
     border-radius: 5px;
     padding: 0px 10px;
 }
+
+.guided--nav-bar-dropdown.skipped {
+    opacity: 0.5;
+    pointer-events: none;
+}
+
+.guided--nav-bar-dropdown.skipped .fa-chevron-right {
+    display: none;
+}
+
 .guided--nav-bar-dropdown:hover {
     cursor: pointer;
     background-color: var(--color-transparent-soda-green);
@@ -309,9 +319,10 @@
 }
 
 .dot {
-    height: 30px;
-    width: 30px;
-    margin: 5px;
+    height: 20px;
+    width: 20px;
+    margin: 0px 5px;
+    font-size: 11px;
     border-radius: 50%;
     border: 1px solid;
     display: flex;
@@ -354,7 +365,7 @@
 .guided--progression-tab-labels {
     display: flex;
     flex-direction: column;
-    margin-left: 7px;
+    margin-left: 3px;
     justify-content: flex-start;
 }
 
@@ -906,6 +917,10 @@ h1.guided--text-sub-step {
     background-color: var(--color-light-green);
 }
 
+.guided--capsule.skipped {
+    background-color: rgb(36, 36, 36);
+}
+
 .guided--capsule-container-sub-page {
     display: flex;
     justify-content: center;

src/renderer/src/stories/Dashboard.js

@@ -180,6 +180,27 @@ export class Dashboard extends LitElement {
         else if (typeof page === "object") return this.getPage(Object.values(page)[0]);
     }
 
+    updateSections({ sidebar = true, main = false } = {}) {
+        const info = this.page.info;
+        let parent = info.parent;
+
+        if (sidebar) {
+            this.subSidebar.sections = this.#getSections(parent.info.pages, info.globalState); // Update sidebar items (if changed)
+        }
+
+        const { sections } = this.subSidebar;
+
+        if (main) {
+            if (this.page.header) delete this.page.header.sections; // Ensure sections are updated
+            this.main.set({
+                page: this.page,
+                sections,
+            });
+        }
+
+        return sections;
+    }
+
     setMain(page) {
         // Update Previous Page
         const info = page.info;
@@ -208,7 +229,7 @@ export class Dashboard extends LitElement {
         if (isNested) {
             let parent = info.parent;
             while (parent.info.parent) parent = parent.info.parent; // Lock sections to the top-level parent
-            this.subSidebar.sections = this.#getSections(parent.info.pages, toPass.globalState); // Update sidebar items (if changed)
+            this.updateSections({ sidebar: true });
             this.subSidebar.active = info.id; // Update active item (if changed)
             this.sidebar.hide(true);
             this.subSidebar.show();
@@ -226,10 +247,7 @@ export class Dashboard extends LitElement {
                 ? `<h4 style="margin-bottom: 0px;">${projectName}</h4><small>Conversion Pipeline</small>`
                 : projectName;
 
-            this.main.set({
-                page,
-                sections: this.subSidebar.sections ?? {},
-            });
+            this.updateSections({ sidebar: false, main: true });
 
             if (this.#transitionPromise.value) this.#transitionPromise.trigger(page); // This ensures calls to page.to() can be properly awaited until the next page is ready
 
@@ -289,7 +307,7 @@ export class Dashboard extends LitElement {
             }
         });
 
-        return globalState.sections;
+        return (globalState.sections = { ...globalState.sections }); // Update global state with new reference (to ensure re-render)
     };
 
     #transitionPromise = {};

src/renderer/src/stories/Main.js

@@ -92,7 +92,8 @@ export class Main extends LitElement {
 
         page.requestUpdate(); // Ensure the page is re-rendered with new workflow configurations
 
-        if (this.content) this.toRender = toRender.page ? toRender : { page };
+        if (this.content)
+            this.toRender = toRender.page ? toRender : { page }; // Ensure re-render in either case
         else this.#queue.push(page);
     }
 
@@ -168,6 +169,7 @@ export class Main extends LitElement {
                     if (pages.length > 1) {
                         const capsulesProps = {
                             n: pages.length,
+                            skipped: pages.map((page) => page.skipped),
                             selected: pages.map((page) => page.pageLabel).indexOf(page.info.label),
                         };
 
@@ -177,7 +179,9 @@ export class Main extends LitElement {
                 }
 
                 if (header === true || !("header" in page) || !("sections" in page.header)) {
-                    const sectionNames = Object.keys(sections);
+                    const sectionNames = Object.entries(sections)
+                        .filter(([name, info]) => !Object.values(info.pages).every((state) => state.skipped))
+                        .map(([name]) => name);
                     header = page.header && typeof page.header === "object" ? page.header : {};
                     header.sections = sectionNames;
                     header.selected = sectionNames.indexOf(info.section);
@@ -187,6 +191,8 @@ export class Main extends LitElement {
 
         const headerEl = header ? (this.header = new GuidedHeader(header)) : html`<div></div>`; // Render for grid
 
+        if (!header) delete this.header; // Reset header
+
         const footerEl = footer ? (this.footer = new GuidedFooter(footer)) : html`<div></div>`; // Render for grid
 
         const title = header?.title ?? page.info?.title;

src/renderer/src/stories/NavigationSidebar.js

@@ -53,6 +53,14 @@ export class NavigationSidebar extends LitElement {
 
         Object.entries(this.sections).map(([sectionName, info]) => {
             const isActive = Object.values(info.pages).find((state) => state.active);
+
+            const isAllSkipped = Object.values(info.pages).every((state) => state.skipped);
+            this.#updateClass(
+                "skipped",
+                this.querySelector("[data-section-name='" + sectionName + "']"),
+                !isAllSkipped
+            );
+
             if (isActive) this.#toggleDropdown(sectionName, true);
             else this.#toggleDropdown(sectionName, false);
         });

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

@@ -266,6 +266,11 @@ export class Page extends LitElement {
         }
     };
 
+    updateSections = () => {
+        const dashboard = document.querySelector("nwb-dashboard");
+        dashboard.updateSections({ sidebar: true, main: true });
+    };
+
     #unsaved = false;
     get unsavedUpdates() {
         return this.#unsaved;

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

@@ -1,18 +1,19 @@
 import { LitElement, html } from "lit";
 
 export class GuidedCapsules extends LitElement {
-    constructor({ n = 0, selected = 0 } = {}) {
+    constructor({ n = 0, selected = 0, skipped = [] } = {}) {
         super();
         this.n = n;
         this.selected = selected;
-
+        this.skipped = skipped;
         this.style.width = "100%";
     }
 
     static get properties() {
         return {
             n: { type: Number, reflect: true },
             selected: { type: Number, reflect: true },
+            skipped: { type: Array },
         };
     }
 
@@ -39,7 +40,9 @@ export class GuidedCapsules extends LitElement {
                         (_, i) =>
                             html`<div
                                 @click=${() => this.onClick(i)}
-                                class="guided--capsule ${i === this.selected ? `active` : ""}"
+                                class="guided--capsule ${i === this.selected ? `active` : ""} ${this.skipped[i]
+                                    ? `skipped`
+                                    : ""}"
                             ></div>`
                     )}
                 </div>

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

@@ -99,11 +99,14 @@ export class GuidedPreform extends Page {
         subtitle: "Answer the following questions to simplify your workflow through the GUIDE",
     };
 
+    beforeSave = async () => {
+        await this.form.validate();
+        this.info.globalState.project.workflow = this.state;
+    };
+
     footer = {
         onNext: async () => {
-            await this.form.validate();
-            this.info.globalState.project.workflow = this.state;
-            this.save();
+            await this.save();
             return this.to(1);
         },
     };
@@ -153,7 +156,16 @@ export class GuidedPreform extends Page {
                     }
                 });
             },
-            onUpdate: () => (this.unsavedUpdates = true),
+
+            // Immediately re-render boolean values
+            onUpdate: async (path, value) => {
+                if (typeof value === "boolean") {
+                    this.unsavedUpdates = true;
+                    this.info.globalState.project.workflow = this.state;
+                    await this.save({}, false);
+                    this.updateSections();
+                }
+            },
             onThrow,
             // groups: [
             //     {