Merge branch 'main' into docs_version_switcher

schemas/base-metadata.schema.ts

@@ -40,6 +40,15 @@ function getSpeciesInfo(species: any[][] = []) {
 
 }
 
+
+// Borrowed from https://stackoverflow.com/a/29774197/7290573
+function getCurrentDate() {
+    const date = new Date()
+    const offset = date.getTimezoneOffset();
+    return (new Date(date.getTime() - (offset*60*1000))).toISOString();
+}
+
+
 function updateEcephysTable(propName, schema, schemaToMerge) {
 
     const ecephys = schema.properties.Ecephys
@@ -112,6 +121,8 @@ export const preprocessMetadataSchema = (schema: any = baseMetadataSchema, globa
         strict: false,
         description: 'The species of your subject.'
     }
+    subjectProps.date_of_birth.minimum = "1900-01-01T00:00"
+    subjectProps.date_of_birth.maximum = getCurrentDate().slice(0, -2)
 
     // copy.order = ['NWBFile', 'Subject']
 

schemas/interfaces.info.ts

@@ -0,0 +1,25 @@
+import { baseUrl, onServerOpen } from '../src/renderer/src/server/globals'
+import { isStorybook } from '../src/renderer/src/dependencies/simple'
+
+const values = { interfaces: {} }
+const setReady: any = {}
+
+const createPromise = (prop: string) => new Promise((resolve) => setReady[prop] = (value) => {
+    values[prop] = value
+    resolve(value)
+})
+
+export const ready = {
+    interfaces: createPromise("interfaces"),
+}
+
+//  Get CPUs
+onServerOpen(async () => {
+    await fetch(`${baseUrl}/neuroconv`).then((res) => res.json())
+    .then((interfaces) => setReady.interfaces(interfaces))
+    .catch(() => {
+        if (isStorybook) setReady.interfaces({})
+    });
+});
+
+export default values

schemas/json/base_metadata_schema.json

@@ -11,11 +11,10 @@
       "required": ["session_start_time"],
       "properties": {
         "keywords": {
-          "title": "Keyword",
           "description": "Terms to search over",
           "type": "array",
           "items": {
-            "title": "keyword",
+            "title": "Keyword",
             "type": "string"
           }
         },

schemas/source-data.schema.ts

@@ -1,10 +1,20 @@
-// import { merge } from "../src/renderer/src/stories/pages/utils"
+
+import interfaceInfo from './interfaces.info'
 
 export default function preprocessSourceDataSchema (schema) {
 
+    const interfaces = Object.values(interfaceInfo.interfaces).reduce((acc, { name, ...rest }) => {
+        acc[name] = rest
+        return acc
+    }, {})
+
     // Abstract across different interfaces
     Object.entries(schema.properties ?? {}).forEach(([key, schema]: [string, any]) => {
 
+            const info = interfaces[key] ?? {}
+
+            const singleLocationInfo = schema.properties.file_path ?? schema.properties.folder_path
+
             if (schema.properties.file_paths) {
                 Object.assign(schema.properties.file_paths, {
                     items: { type: 'string' },
@@ -13,6 +23,12 @@ export default function preprocessSourceDataSchema (schema) {
                 })
             }
 
+            else if (singleLocationInfo) {
+
+                if (!singleLocationInfo.description && info.suffixes) singleLocationInfo.description = `<b>Suffixes:</b> ${info.suffixes.join(', ')}`
+
+            }
+
             // Do not show steps
             if (schema.properties.gain) schema.properties.gain.step = null
 

src/renderer/src/stories/BasicTable.js

@@ -476,6 +476,11 @@ export class BasicTable extends LitElement {
         const description = this.#schema.description;
 
         return html`
+            ${description
+                ? html`<p style="margin: 0; margin-bottom: 10px">
+                      <small style="color: gray;">${description}</small>
+                  </p>`
+                : ""}
             <div class="table-container">
                 <table cellspacing="0" style=${styleMap({ maxHeight: this.maxHeight })}>
                     <thead>
@@ -540,11 +545,6 @@ export class BasicTable extends LitElement {
             ${this.truncated
                 ? html`<p style="margin: 0; width: 100%; text-align: center; font-size: 150%;">...</p>`
                 : ""}
-            ${description
-                ? html`<p style="margin: 0; margin-top: 10px">
-                      <small style="color: gray;">${description}</small>
-                  </p>`
-                : ""}
         `;
     }
 }

src/renderer/src/stories/DateTimeSelector.js

@@ -32,10 +32,15 @@ export class DateTimeSelector extends LitElement {
         }
     }
 
-    constructor({ value } = {}) {
+    constructor({ value, schema } = {}) {
         super();
         this.input = document.createElement("input");
         this.input.type = "datetime-local";
+        if (schema) {
+            const { min, max } = schema;
+            if (min) this.input.min = min;
+            if (max) this.input.max = max;
+        }
 
         this.addEventListener("click", () => {
             this.input.focus();

src/renderer/src/stories/FileSystemSelector.js

@@ -4,6 +4,9 @@ import { fs, remote } from "../electron/index";
 import { List } from "./List";
 const { dialog } = remote;
 
+import restartSVG from "../stories/assets/restart.svg?raw";
+import { unsafeSVG } from "lit/directives/unsafe-svg.js";
+
 function getObjectTypeReferenceString(type, multiple, { nested, native } = {}) {
     if (Array.isArray(type))
         return `${multiple ? "" : "a "}${type
@@ -27,6 +30,7 @@ const componentCSS = css`
 
     :host {
         display: inline-block;
+        position: relative;
         width: 100%;
     }
 
@@ -68,6 +72,14 @@ const componentCSS = css`
     :host(.active) button {
         background: rgb(240, 240, 240);
     }
+
+    .controls {
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        cursor: pointer;
+        padding: 0px 5px;
+    }
 `;
 
 document.addEventListener("dragover", (dragOverEvent) => {
@@ -139,8 +151,10 @@ export class FilesystemSelector extends LitElement {
     #handleFiles = async (pathOrPaths, type) => {
         const resolvedType = type ?? this.type;
 
-        if (Array.isArray(pathOrPaths)) pathOrPaths.forEach(this.#checkType);
-        else if (!type) this.#checkType(pathOrPaths);
+        if (pathOrPaths) {
+            if (Array.isArray(pathOrPaths)) pathOrPaths.forEach(this.#checkType);
+            else if (!type) this.#checkType(pathOrPaths);
+        }
 
         let resolvedValue = pathOrPaths;
 
@@ -165,6 +179,8 @@ export class FilesystemSelector extends LitElement {
         if (dialog) {
             const results = await this.#useElectronDialog(type);
             // const path = file.filePath ?? file.filePaths?.[0];
+            const resolved = results.filePath ?? results.filePaths;
+            if (!resolved) return; // Cancelled
             this.#handleFiles(results.filePath ?? results.filePaths, type);
         } else {
             let handles = await (
@@ -174,13 +190,13 @@ export class FilesystemSelector extends LitElement {
             ).catch(() => []); // Call using the same options
 
             const result = Array.isArray(handles) ? handles.map(({ name }) => name) : handles.name;
+            if (!result) return; // Cancelled
+
             this.#handleFiles(result, type);
         }
     }
 
     render() {
-        let resolved, isUpdated;
-
         const isMultipleTypes = Array.isArray(this.type);
         this.setAttribute("manytypes", isMultipleTypes);
         const isArray = Array.isArray(this.value);
@@ -252,6 +268,10 @@ export class FilesystemSelector extends LitElement {
                           },
                       })
                     : ""}
+
+                <div class="controls">
+                    ${this.value ? html`<div @click=${() => this.#handleFiles()}>${unsafeSVG(restartSVG)}</div>` : ""}
+                </div>
             </div>
             ${isMultipleTypes
                 ? html`<div id="button-div">

src/renderer/src/stories/JSONSchemaInput.js

@@ -366,6 +366,7 @@ export class JSONSchemaInput extends LitElement {
 
             main {
                 display: flex;
+                align-items: center;
             }
 
             #controls {
@@ -457,6 +458,10 @@ export class JSONSchemaInput extends LitElement {
                 font-size: 1.2em !important;
             }
 
+            :host([data-table]) .guided--form-label {
+                margin-bottom: 0px;
+            }
+
             .guided--form-label.centered {
                 text-align: center;
             }
@@ -570,14 +575,12 @@ export class JSONSchemaInput extends LitElement {
             const inputElement = this.getElement();
             if (!inputElement) return false;
 
+            const hasList = inputElement.querySelector("nwb-list");
+
             if (inputElement.type === "checkbox") inputElement.checked = value;
-            else if (inputElement.classList.contains("list")) {
-                const list = inputElement.children[0];
-                inputElement.children[0].items = this.#mapToList({
-                    value,
-                    list,
-                }); // NOTE: Make sure this is correct
-            } else if (inputElement instanceof Search) inputElement.shadowRoot.querySelector("input").value = value;
+            else if (hasList)
+                hasList.items = this.#mapToList({ value, hasList }); // NOTE: Make sure this is correct
+            else if (inputElement instanceof Search) inputElement.shadowRoot.querySelector("input").value = value;
             else inputElement.value = value;
         }
 
@@ -647,30 +650,23 @@ export class JSONSchemaInput extends LitElement {
 
         const description = this.description ?? schema.description;
 
+        const descriptionHTML = description
+            ? html`<p class="guided--text-input-instructions">
+                  ${unsafeHTML(capitalize(description))}${[".", "?", "!"].includes(description.slice(-1)[0]) ? "" : "."}
+              </p>`
+            : "";
+
         return html`
-            <div class="${this.required || this.conditional ? "required" : ""} ${
-                this.conditional ? "conditional" : ""
-            }">
-
-                ${
-                    this.showLabel
-                        ? html`<label class="guided--form-label"
-                              >${(schema.title ? unsafeHTML(schema.title) : null) ??
-                              header(this.path.slice(-1)[0])}</label
-                          >`
-                        : ""
-                }
-                </label>
+            <div
+                class="${this.required || this.conditional ? "required" : ""} ${this.conditional ? "conditional" : ""}"
+            >
+                ${this.showLabel
+                    ? html`<label class="guided--form-label"
+                          >${(schema.title ? unsafeHTML(schema.title) : null) ?? header(this.path.slice(-1)[0])}</label
+                      >`
+                    : ""}
                 <main>${input}${this.controls ? html`<div id="controls">${this.controls}</div>` : ""}</main>
-                ${
-                    description
-                        ? html`<p class="guided--text-input-instructions">
-                              ${unsafeHTML(capitalize(description))}${[".", "?", "!"].includes(description.slice(-1)[0])
-                                  ? ""
-                                  : "."}
-                          </p>`
-                        : ""
-                }
+                ${descriptionHTML}
             </div>
         `;
     }
@@ -862,6 +858,8 @@ export class JSONSchemaInput extends LitElement {
     #render() {
         const { validateOnChange, schema, path: fullPath } = this;
 
+        this.removeAttribute("data-table");
+
         // Do your best to fill in missing schema values
         if (!("type" in schema)) schema.type = this.#getType();
 
@@ -1007,7 +1005,11 @@ export class JSONSchemaInput extends LitElement {
                         if (ev.key === "Enter") submitButton.onClick();
                     });
 
-                    return html`<div style="width: 100%;">
+                    return html`<div
+                        style="width: 100%;"
+                        class="schema-input"
+                        @change=${() => validateOnChange && this.#triggerValidation(name, path)}
+                    >
                         <div style="display: flex; gap: 10px; align-items: center;">${input}${submitButton}</div>
                         ${list}
                     </div>`;
@@ -1030,7 +1032,10 @@ export class JSONSchemaInput extends LitElement {
                     onThrow: this.#onThrow,
                 }); // Ensure change propagates
 
-                if (table) return table;
+                if (table) {
+                    this.setAttribute("data-table", "");
+                    return table;
+                }
             }
 
             const addButton = new Button({
@@ -1191,13 +1196,19 @@ export class JSONSchemaInput extends LitElement {
 
                 const value = isDateTime ? resolveDateTime(this.value) : this.value;
 
+                const { minimum, maximum, exclusiveMax, exclusiveMin } = schema;
+                const min = exclusiveMin ?? minimum;
+                const max = exclusiveMax ?? maximum;
+
                 return html`
                     <input
                         class="guided--input schema-input ${schema.step === null ? "hideStep" : ""}"
                         type="${type}"
                         step=${isNumber && schema.step ? schema.step : ""}
                         placeholder="${schema.placeholder ?? ""}"
                         .value="${value ?? ""}"
+                        .min="${min}"
+                        .max="${max}"
                         @input=${(ev) => {
                             let value = ev.target.value;
                             let newValue = value;
@@ -1237,6 +1248,7 @@ export class JSONSchemaInput extends LitElement {
                         @change=${(ev) => validateOnChange && this.#triggerValidation(name, path)}
                         @keydown=${this.#moveToNextInput}
                     />
+                    <span style="margin-left:10px;">${schema.unit ?? ""}</span>
                     ${isRequiredNumber
                         ? html`<div class="nan-handler"><input
                         type="checkbox"

src/renderer/src/stories/List.ts

@@ -99,6 +99,10 @@ export class List extends LitElement {
         cursor: text;
       }
 
+      [contenteditable="true"]:hover  {
+        background-color: rgba(217, 245, 255, 0.6);
+      }
+
       [data-idx]{
         background: #f0f0f0;
         height: 25px;