${this.controls}
` : ""}+ ${description} +
` + : ""} `; } } diff --git a/src/renderer/src/stories/JSONSchemaForm.js b/src/renderer/src/stories/JSONSchemaForm.js index 50c37818d..9d4695b80 100644 --- a/src/renderer/src/stories/JSONSchemaForm.js +++ b/src/renderer/src/stories/JSONSchemaForm.js @@ -57,7 +57,6 @@ export const getSchema = (path, schema, base = []) => { // NOTE: Refs are now pre-resolved const resolved = get(path, schema, ["properties", "patternProperties"], ["patternProperties", "items"]); - // if (resolved?.["$ref"]) return this.getSchema(resolved["$ref"].split("/").slice(1)); // NOTE: This assumes reference to the root of the schema return resolved; }; @@ -81,9 +80,15 @@ export const getIgnore = (o, path) => { return path.reduce((acc, key) => { const info = acc[key] ?? {}; + const accWildcard = acc["*"] ?? {}; + const infoWildcard = info["*"] ?? {}; + const mergedWildcards = { ...accWildcard, ...infoWildcard }; + + if (key in mergedWildcards) return { ...info, ...mergedWildcards[key] }; + return { ...info, - "*": { ...(acc["*"] ?? {}), ...(info["*"] ?? {}) }, // Accumulate ignore values + "*": mergedWildcards, // Accumulate ignore values }; }, o); }; @@ -565,6 +570,7 @@ export class JSONSchemaForm extends LitElement { const allErrors = Array.from(flaggedInputs) .map((inputElement) => { + if (!inputElement.nextElementSibling) return; // Skip tables return Array.from(inputElement.nextElementSibling.children).map((li) => li.message); }) .flat(); @@ -778,9 +784,12 @@ export class JSONSchemaForm extends LitElement { const res = entries .map(([key, value]) => { if (!value.properties && key === "definitions") return false; // Skip definitions - if (this.ignore["*"]?.[key]) + + // If conclusively ignored + if (this.ignore["*"]?.[key] === true) return false; // Skip all properties with this name else if (this.ignore[key] === true) return false; // Skip this property + if (this.showLevelOverride >= path.length) return isRenderable(key, value); if (required[key]) return isRenderable(key, value); if (this.#getLink([...this.base, ...path, key])) return isRenderable(key, value); @@ -1261,9 +1270,12 @@ export class JSONSchemaForm extends LitElement { enableToggleContainer.append(enableToggle); Object.assign(enableToggle.style, { marginRight: "10px", pointerEvents: "all" }); + // Skip if accordion will be empty + if (!renderableInside.length) return; + const accordion = (this.accordions[name] = new Accordion({ name: headerName, - toggleable: hasMany, + toggleable: hasMany, // Only show toggle if there are multiple siblings subtitle: html`- ${unsafeHTML(capitalize(schema.description))}${[".", "?", "!"].includes( - schema.description.slice(-1)[0] - ) + ${unsafeHTML(capitalize(description))}${[".", "?", "!"].includes(description.slice(-1)[0]) ? "" : "."}
` diff --git a/src/renderer/src/stories/SimpleTable.js b/src/renderer/src/stories/SimpleTable.js index 18487401f..2fd49fd85 100644 --- a/src/renderer/src/stories/SimpleTable.js +++ b/src/renderer/src/stories/SimpleTable.js @@ -11,7 +11,7 @@ import { styleMap } from "lit/directives/style-map.js"; import "./Button"; import tippy from "tippy.js"; -import { sortTable } from "./Table"; +import { sortTable, getEditable } from "./Table"; import { NestedInputCell } from "./table/cells/input"; import { getIgnore } from "./JSONSchemaForm"; @@ -68,6 +68,10 @@ export class SimpleTable extends LitElement { border: none; } + td[editable="false"] { + background: whitesmoke; + } + :host([loading]:not([waiting])) table { height: 250px; } @@ -201,6 +205,7 @@ export class SimpleTable extends LitElement { maxHeight, contextOptions = {}, ignore = {}, + editable = {}, } = {}) { super(); this.schema = schema ?? {}; @@ -213,6 +218,7 @@ export class SimpleTable extends LitElement { this.maxHeight = maxHeight ?? ""; this.ignore = ignore; + this.editable = editable; this.contextOptions = contextOptions; @@ -488,10 +494,11 @@ export class SimpleTable extends LitElement { id: "add-row", label: "Add Row", onclick: (path) => { - const cell = this.#getCellFromPath(path); - if (!cell) return this.addRow(); // No cell selected - const { i } = cell.simpleTableInfo; - this.addRow(i); //2) // TODO: Support adding more than one row + // const cell = this.#getCellFromPath(path); + // if (!cell) return this.addRow(); // No cell selected + // const { i } = cell.simpleTableInfo; + const lastRow = this.#cells.length - 1; + this.addRow(lastRow); // Just insert row at the end }, }, remove: { @@ -558,6 +565,41 @@ export class SimpleTable extends LitElement { this.#context = new ContextMenu({ target: this.shadowRoot.querySelector("table"), items, + onOpen: (path) => { + const checks = { + row_remove: { + check: this.editable.__row_remove, + element: this.#context.shadowRoot.querySelector("#remove-row"), + }, + + row_add: { + check: this.editable.__row_add, + element: this.#context.shadowRoot.querySelector("#add-row"), + }, + }; + + const hasChecks = Object.values(checks).some(({ check }) => check); + + if (hasChecks) { + const cell = this.#getCellFromPath(path); + const info = cell.simpleTableInfo; + const rowNames = Object.keys(this.#data); + const row = Array.isArray(this.#data) ? info.i : rowNames[info.i]; + + const results = Object.values(checks).map(({ check, element }) => { + if (check) { + const canRemove = check(cell.value, this.#data[row]); + if (canRemove) element.removeAttribute("disabled"); + else element.setAttribute("disabled", ""); + return canRemove; + } else return true; + }); + + return !results.every((r) => r === false); // If all are hidden, don't show the context menu + } + + return true; + }, }); this.#context.updated = () => this.#updateContextMenuRendering(); // Run when done rendering @@ -780,6 +822,8 @@ export class SimpleTable extends LitElement { const schema = this.#itemProps[fullInfo.col]; const ignore = getIgnore(this.ignore, [fullInfo.col]); + const rowData = this.#data[row]; + const isEditable = getEditable(value, rowData, this.editable, fullInfo.col); // Track the cell renderer const cell = new TableCell({ @@ -791,6 +835,7 @@ export class SimpleTable extends LitElement { ), col: this.colHeaders[info.j], }, + editable: isEditable, value, schema, ignore, @@ -846,9 +891,13 @@ export class SimpleTable extends LitElement { #renderCell = (value, info) => { const td = document.createElement("td"); + const cell = value instanceof TableCell ? value : this.#createCell(value, info); cell.simpleTableInfo.td = td; + + td.setAttribute("editable", cell.editable); + td.onmouseover = () => { if (this.#selecting) this.#selectCells(cell); }; diff --git a/src/renderer/src/stories/Table.js b/src/renderer/src/stories/Table.js index 4f391bff2..e1a7e1713 100644 --- a/src/renderer/src/stories/Table.js +++ b/src/renderer/src/stories/Table.js @@ -16,6 +16,12 @@ const isRequired = (col, schema) => { return schema.required?.includes(col); }; +export const getEditable = (value, rowData = {}, config, colName) => { + if (typeof config === "boolean") return config; + if (typeof config === "function") return config(value, rowData); + return getEditable(value, rowData, config?.[colName] ?? true); +}; + export function sortTable(schema, keyColumn, order) { const cols = Object.keys(schema.properties) @@ -378,7 +384,9 @@ export class Table extends LitElement { return; } - if (!value && required) { + const isUndefined = value == ""; + + if (isUndefined && required) { instanceThis.#handleValidationResult( [{ message: `${header(k)} is a required property.`, type: "error" }], row, diff --git a/src/renderer/src/stories/forms/utils.ts b/src/renderer/src/stories/forms/utils.ts index 529a39b95..43d09296e 100644 --- a/src/renderer/src/stories/forms/utils.ts +++ b/src/renderer/src/stories/forms/utils.ts @@ -1,6 +1,9 @@ +import { merge } from '../pages/utils' + const toCapitalizeAll = ['nwb', 'api', 'id'] const toCapitalizeNone = ['or', 'and'] + export const createRandomString = () => Math.random().toString(36).substring(7); export const tempPropertyKey = createRandomString(); export const tempPropertyValueKey = createRandomString(); @@ -33,7 +36,15 @@ export const textToArray = (value: string) => value.split("\n") if (prop && typeof prop === "object" && !Array.isArray(prop)) { const internalCopy = (copy[propName] = { ...prop }); const refValue = internalCopy["$ref"] - if (refValue) { + const allOfValue = internalCopy['allOf'] + if (allOfValue) { + copy [propName]= allOfValue.reduce((acc, curr) => { + const result = replaceRefsWithValue({ _temp: curr}, path, parent) + const resolved = result._temp + return merge(resolved, acc) + }, {}) + } + else if (refValue) { const refPath = refValue.split('/').slice(1) // NOTE: Assume from base const resolved = refPath.reduce((acc, key) => acc[key], parent) 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 4b5975e8d..1e35cf2b0 100644 --- a/src/renderer/src/stories/pages/guided-mode/data/GuidedMetadata.js +++ b/src/renderer/src/stories/pages/guided-mode/data/GuidedMetadata.js @@ -1,4 +1,4 @@ -import { JSONSchemaForm } from "../../../JSONSchemaForm.js"; +import { JSONSchemaForm, getSchema } from "../../../JSONSchemaForm.js"; import { InstanceManager } from "../../../InstanceManager.js"; import { ManagedPage } from "./ManagedPage.js"; @@ -25,6 +25,59 @@ import { Button } from "../../../Button.js"; import globalIcon from "../../../assets/global.svg?raw"; +const parentTableRenderConfig = { + Electrodes: (metadata) => { + metadata.schema.description = "Download, modify, and re-upload data to change the electrode information."; + return true; + }, + Units: (metadata) => { + metadata.editable = false; + metadata.schema.description = "Update unit information directly on your source data."; + return true; + }, +}; + +function getAggregateRequirements(path) { + const electrodeSchema = getSchema(path, this.schema); + return Object.values(electrodeSchema.properties).reduce((set, schema) => { + schema.items.required.forEach((item) => set.add(item)); + return set; + }, new Set()); +} + +const tableRenderConfig = { + "*": (metadata) => new SimpleTable(metadata), + ElectrodeColumns: function (metadata) { + const aggregateRequirements = getAggregateRequirements.call(this, ["Ecephys", "Electrodes"]); + + return new SimpleTable({ + ...metadata, + editable: { + name: (value) => !aggregateRequirements.has(value), + data_type: (_, row) => !aggregateRequirements.has(row.name), + __row_remove: (_, row) => !aggregateRequirements.has(row.name), + }, + }); + }, + UnitColumns: function (metadata) { + const aggregateRequirements = getAggregateRequirements.call(this, ["Ecephys", "Units"]); + + return new SimpleTable({ + ...metadata, + contextOptions: { + row: { + add: false, + remove: false, + }, + }, + editable: { + name: (value) => !aggregateRequirements.has(value), + data_type: (_, row) => !aggregateRequirements.has(row.name), + }, + }); + }, +}; + const imagingPlaneKey = "imaging_plane"; const propsToIgnore = { Ophys: { @@ -55,14 +108,16 @@ const propsToIgnore = { }, }, Ecephys: { - UnitProperties: true, + ElectricalSeries: true, ElectricalSeriesLF: true, ElectricalSeriesAP: true, - Electrodes: { + Units: { "*": { - location: true, - group: true, - contact_vector: true, + UnitColumns: { + "*": { + data_type: true, // Do not show data_type + }, + }, }, }, }, @@ -269,6 +324,8 @@ export class GuidedMetadataPage extends ManagedPage { renderCustomHTML: function (name, inputSchema, localPath, { onUpdate, onThrow }) { if (name === "TwoPhotonSeries" && (!this.value || !this.value.length)) return null; + if (name === "Device" && (!this.value || !this.value.length)) return null; + if (name === "ElectrodeGroup" && (!this.value || !this.value.length)) return null; const isAdditional = isAdditionalProperties(this.pattern); const isPattern = isPatternProperties(this.pattern); @@ -406,10 +463,13 @@ export class GuidedMetadataPage extends ManagedPage { const updatedSchema = structuredClone(metadata.schema); metadata.schema = updatedSchema; - // NOTE: Handsontable will occasionally have a context menu that doesn't actually trigger any behaviors - if (name !== "Electrodes") return new SimpleTable(metadata); - else return true; // All other tables are handled by the default behavior - // if (name !== "ElectrodeColumns" && name !== "Electrodes") return new Table(metadata); + const parentName = fullPath[fullPath.length - 1]; + + const tableConfig = + tableRenderConfig[name] ?? parentTableRenderConfig[parentName] ?? tableRenderConfig["*"] ?? true; + if (typeof tableConfig === "function") + return tableConfig.call(form, metadata, [...fullPath, name], this); + else return tableConfig; }, onThrow, }); 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 438520b7b..12f5a3818 100644 --- a/src/renderer/src/stories/pages/guided-mode/data/GuidedSourceData.js +++ b/src/renderer/src/stories/pages/guided-mode/data/GuidedSourceData.js @@ -120,7 +120,9 @@ export class GuidedSourceDataPage extends ManagedPage { const [type, ...splitText] = result.message.split(":"); const text = splitText.length ? splitText.join(":").replaceAll("<", "<").replaceAll(">", ">") - : `${result.traceback.trim().split("\n").slice(-2)[0].trim()}`;
+ : result.traceback
+ ? `${result.traceback.trim().split("\n").slice(-2)[0].trim()}`
+ : "";
const message = `${text}
`; this.notify(message, "error"); diff --git a/src/renderer/src/stories/table/Cell.ts b/src/renderer/src/stories/table/Cell.ts index 1cda87fa5..3027f6a5b 100644 --- a/src/renderer/src/stories/table/Cell.ts +++ b/src/renderer/src/stories/table/Cell.ts @@ -4,7 +4,7 @@ import { NestedInputCell } from "./cells/input" import { TableCellBase } from "./cells/base" import { DateTimeCell } from "./cells/date-time" - +import { DropdownCell } from "./cells/dropdown" import { getValue, renderValue } from './convert' @@ -20,6 +20,7 @@ type OnValidateFunction = (info: ValidationResult) => void type TableCellProps = { value: string, + editable: boolean, info: { col: string } ignore: { [key: string]: boolean }, schema: {[key: string]: any}, @@ -33,6 +34,7 @@ export class TableCell extends LitElement { declare schema: TableCellProps['schema'] declare info: TableCellProps['info'] + declare editable: TableCellProps['editable'] static get styles() { return css` @@ -69,20 +71,21 @@ export class TableCell extends LitElement { ` } - // static get properties() { - // return { - // value: { reflect: true } - // } - // } + static get properties() { + return { + editable: { reflect: true } + } + } type = 'text' - constructor({ info, value, schema, validateOnChange, ignore, onValidate }: TableCellProps) { + constructor({ info, value, editable = true, schema, validateOnChange, ignore, onValidate }: TableCellProps) { super() this.#value = value this.schema = schema this.info = info + this.editable = editable if (validateOnChange) this.validateOnChange = validateOnChange if (ignore) this.ignore = ignore @@ -102,7 +105,9 @@ export class TableCell extends LitElement { } - toggle = (v: boolean) => this.input.toggle(v) + toggle = (v: boolean) => { + if (this.editable) this.input.toggle(v) + } get value() { let v = this.input ? this.input.getValue() : this.#value @@ -110,6 +115,10 @@ export class TableCell extends LitElement { } set value(value) { + + + if (!this.editable && this.interacted === true) return // Don't set value if not editable + if (this.input) this.input.set(renderValue(value, this.schema)) // Allow null to be set directly this.#value = this.input ? this.input.getValue() // Ensure all operations are undoable / value is coerced @@ -168,6 +177,8 @@ export class TableCell extends LitElement { this.interacted = persistentInteraction // this.value = value + if (!this.editable) return // Don't set value if not editable + if (this.input) this.input.set(value) // Ensure all operations are undoable else this.#value = value // Silently set value if not rendered yet } @@ -213,9 +224,15 @@ export class TableCell extends LitElement { this.type = "table" } + else if (this.schema.enum) { + cls = DropdownCell + this.type = "dropdown" + } + // Only actually rerender if new class type if (cls !== this.#cls) { this.input = new cls({ + editable: this.editable, onChange: async (v) => { if (this.input.interacted) this.interacted = true const result = await this.validate() diff --git a/src/renderer/src/stories/table/ContextMenu.ts b/src/renderer/src/stories/table/ContextMenu.ts index 4f382b78b..997662b91 100644 --- a/src/renderer/src/stories/table/ContextMenu.ts +++ b/src/renderer/src/stories/table/ContextMenu.ts @@ -66,12 +66,14 @@ export class ContextMenu extends LitElement{ declare target: Document | HTMLElement declare items: any[] + declare onOpen: () => boolean | void - constructor({ target, items }: any){ + constructor({ target, items, onOpen }: any){ super() this.target = target ?? document this.items = items ?? [] + this.onOpen = onOpen ?? (() => {}) document.addEventListener('click', () => this.#hide()) // Hide at the last step of any click document.addEventListener('contextmenu', () => this.#hide()) @@ -88,7 +90,12 @@ export class ContextMenu extends LitElement{ #open(mouseEvent: MouseEvent) { mouseEvent.preventDefault() mouseEvent.stopPropagation() + this.#activePath = mouseEvent.path || mouseEvent.composedPath() + + const result = this.onOpen(this.#activePath) + if (result === false) return + this.style.display = 'block'; this.style.left = mouseEvent.pageX + "px"; this.style.top = mouseEvent.pageY + "px"; diff --git a/src/renderer/src/stories/table/cells/base.ts b/src/renderer/src/stories/table/cells/base.ts index 1dca267cb..d4f3424be 100644 --- a/src/renderer/src/stories/table/cells/base.ts +++ b/src/renderer/src/stories/table/cells/base.ts @@ -5,6 +5,7 @@ type BaseTableProps = { info: { col: string, }, + editable: boolean, toggle: (state?: boolean) => void, schema: any, onOpen: Function, @@ -31,6 +32,9 @@ export class TableCellBase extends LitElement { #editor?: HTMLElement #renderer?: HTMLElement + // Internal variables + #firstUpdated = false + #initialValue: undefined | any static get styles() { return css` @@ -64,6 +68,8 @@ export class TableCellBase extends LitElement { info: BaseTableProps['info']; editToggle: BaseTableProps['toggle'] + editable: BaseTableProps['editable']; + interacted = false constructor({ @@ -73,14 +79,14 @@ export class TableCellBase extends LitElement { onClose, onChange, toggle, - nestedProps + nestedProps, + editable = true }: Partial