Selectively Enable Source Data Interfaces

schemas/json/dandi/global.json

@@ -16,5 +16,6 @@
             },
             "required": ["main_api_key"]
         }
-    }
+    },
+    "required": ["api_keys"]
 }

src/renderer/src/stories/Accordion.js

@@ -23,6 +23,11 @@ export class Accordion extends LitElement {
                 box-sizing: border-box;
             }
 
+            :host {
+                display: block;
+                overflow: hidden;
+            }
+
             .header {
                 display: flex;
                 align-items: end;
@@ -107,10 +112,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}";
             }
@@ -123,7 +132,7 @@ export class Accordion extends LitElement {
                 content: "${successSymbol}";
             }
 
-            .guided--nav-bar-dropdown:hover {
+            .guided--nav-bar-dropdown.toggleable:hover {
                 cursor: pointer;
                 background-color: lightgray;
             }
@@ -143,34 +152,54 @@ export class Accordion extends LitElement {
                 padding-left: 0px;
                 overflow-y: auto;
             }
+
+            .disabled {
+                opacity: 0.5;
+                pointer-events: none;
+            }
         `;
     }
 
     static get properties() {
         return {
-            sections: { type: Object, reflect: false },
+            name: { type: String, reflect: true },
+            open: { type: Boolean, reflect: true },
+            disabled: { type: Boolean, reflect: true },
+            status: { type: String, reflect: true },
         };
     }
 
-    constructor({ sections = {}, contentPadding } = {}) {
+    constructor({
+        name,
+        subtitle,
+        toggleable = true,
+        content,
+        open = false,
+        status,
+        disabled = false,
+        contentPadding,
+    } = {}) {
         super();
-        this.sections = sections;
+        this.name = name;
+        this.subtitle = subtitle;
+        this.content = content;
+        this.open = open;
+        this.status = status;
+        this.disabled = disabled;
+        this.toggleable = toggleable;
         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;
+        this.toggle(!!this.open);
     }
 
-    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.status = status;
     };
 
     onClick = () => {}; // Set by the user
@@ -183,60 +212,67 @@ export class Accordion extends LitElement {
         }
     };
 
-    #toggleDropdown = (sectionName, forcedState) => {
+    toggle = (forcedState) => {
         const hasForce = forcedState !== undefined;
-        const toggledState = !this.sections[sectionName].open;
+        const toggledState = !this.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.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";
+        if (chevron) chevron.direction = state ? "bottom" : "right";
 
-        this.sections[sectionName].open = state;
+        if (desiredState === state) this.open = state; // Update state if not overridden
+    };
+
+    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;
     };
 
     render() {
+        const isToggleable = this.content && this.toggleable;
+
         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 ${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>
+                ${this.content
+                    ? html`<div
+                          id="section"
+                          class="content hidden ${this.disabled ? "disabled" : ""}"
+                          style="padding: ${this.contentPadding ?? "25px"}"
+                      >
+                          ${this.content}
+                      </div>`
+                    : ""}
+            </div>
         `;
     }
 }

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",
                 });