Skip to content

Commit

Permalink
Merge pull request #477 from NeurodataWithoutBorders/fix-data-flow
Browse files Browse the repository at this point in the history 
Update data flow
  • Loading branch information
@CodyCBakerPhD
CodyCBakerPhD authored Oct 31, 2023
2 parents 9b83dcb + 188acbc commit 14feb6d
Show file tree
Hide file tree
Showing 5 changed files with 123 additions and 105 deletions.
39 changes: 18 additions & 21 deletions src/renderer/src/stories/JSONSchemaForm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,10 +40,6 @@ const componentCSS = `
line-height: 1.4285em;
}
.invalid {
background: rgb(255, 229, 228) !important;
}
.guided--form-label {
display: block;
width: 100%;
Expand Down Expand Up @@ -320,11 +316,11 @@ export class JSONSchemaForm extends LitElement {

validate = async (resolved) => {
// Check if any required inputs are missing
const invalidInputs = await this.#validateRequirements(resolved); // get missing required paths
const isValid = this.requirementMode === "loose" ? true : !invalidInputs.length;
const requiredButNotSpecified = await this.#validateRequirements(resolved); // get missing required paths
const isValid = this.requirementMode === "loose" ? true : !requiredButNotSpecified.length;

// Print out a detailed error message if any inputs are missing
let message = isValid ? "" : `${invalidInputs.length} required inputs are not specified properly.`;
let message = isValid ? "" : `${requiredButNotSpecified.length} required inputs are not specified properly.`;

// Check if all inputs are valid
const flaggedInputs = this.shadowRoot ? this.shadowRoot.querySelectorAll(".invalid") : [];
Expand Down Expand Up @@ -376,11 +372,7 @@ export class JSONSchemaForm extends LitElement {
#checkRequiredAfterChange = async (localPath) => {
const path = [...localPath];
const name = path.pop();
const element = this.shadowRoot
.querySelector(`#${localPath.join("-")}`)
.querySelector("jsonschema-input")
.getElement();
const isValid = await this.triggerValidation(name, element, path, false);
const isValid = await this.triggerValidation(name, path, false);
if (!isValid) return true;
};

Expand Down Expand Up @@ -603,7 +595,7 @@ export class JSONSchemaForm extends LitElement {
};

// Assume this is going to return as a Promise—even if the change function isn't returning one
triggerValidation = async (name, element, path = [], checkLinks = true) => {
triggerValidation = async (name, path = [], checkLinks = true) => {
const parent = this.#get(path, this.resolved);

const pathToValidate = [...(this.base ?? []), ...path];
Expand Down Expand Up @@ -644,12 +636,15 @@ export class JSONSchemaForm extends LitElement {
} else {
// For non-links, throw a basic requirement error if the property is required
if (!errors.length && isRequired && !parent[name]) {
const schema = this.getSchema(localPath);
errors.push({
message: `${schema.title ?? header(name)} is a required property.`,
type: "error",
missing: true,
}); // Throw at least a basic error if the property is required
// Skip simple required checks in loose mode
if (this.requirementMode !== "loose") {
const schema = this.getSchema(localPath);
errors.push({
message: `${schema.title ?? header(name)} is a required property.`,
type: "error",
missing: true,
}); // Throw at least a basic error if the property is required
}
}
}

Expand All @@ -676,8 +671,10 @@ export class JSONSchemaForm extends LitElement {
warnings.forEach((info) => this.#addMessage(localPath, info, "warnings"));
info.forEach((info) => this.#addMessage(localPath, info, "info"));

const input = this.getInput(localPath);

if (isValid && errors.length === 0) {
element.classList.remove("invalid");
input.classList.remove("invalid");

const linkEl = this.#getLinkElement(externalPath);
if (linkEl) linkEl.classList.remove("required", "conditional");
Expand All @@ -691,7 +688,7 @@ export class JSONSchemaForm extends LitElement {
return true;
} else {
// Add new invalid classes and errors
element.classList.add("invalid");
input.classList.add("invalid");

const linkEl = this.#getLinkElement(externalPath);
if (linkEl) linkEl.classList.add("required", "conditional");
Expand Down
38 changes: 20 additions & 18 deletions src/renderer/src/stories/JSONSchemaInput.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,10 @@ export class JSONSchemaInput extends LitElement {
display: block;
}
:host(.invalid) .guided--input {
background: rgb(255, 229, 228) !important;
}
.guided--input {
width: 100%;
border-radius: 4px;
Expand Down Expand Up @@ -106,12 +110,16 @@ export class JSONSchemaInput extends LitElement {
// onValidate = () => {}

updateData(value) {
if (this.value === value) return false;

const { path: fullPath } = this;
const path = typeof fullPath === "string" ? fullPath.split("-") : [...fullPath];
const name = path.splice(-1)[0];
const el = this.getElement();
this.#triggerValidation(name, el, path);

this.#triggerValidation(name, path);
this.#updateData(fullPath, value);

const el = this.getElement();
if (el.type === "checkbox") el.checked = value;
else el.value = value;

Expand Down Expand Up @@ -143,9 +151,9 @@ export class JSONSchemaInput extends LitElement {
this.#activateTimeoutValidation(name, this.getElement(), path);
};

#triggerValidation = (name, el, path) => {
#triggerValidation = (name, path) => {
this.#clearTimeoutValidation();
return this.onValidate ? this.onValidate() : this.form ? this.form.triggerValidation(name, el, path) : "";
return this.onValidate ? this.onValidate() : this.form ? this.form.triggerValidation(name, path) : "";
};

updated() {
Expand Down Expand Up @@ -189,7 +197,7 @@ export class JSONSchemaInput extends LitElement {
type: format,
value: this.value,
onSelect: (filePath) => this.#updateData(fullPath, filePath),
onChange: (filePath) => validateOnChange && this.#triggerValidation(name, el, path),
onChange: (filePath) => validateOnChange && this.#triggerValidation(name, path),
onThrow: (...args) => this.#onThrow(...args),
dialogOptions: this.form?.dialogOptions,
dialogType: this.form?.dialogType,
Expand Down Expand Up @@ -290,7 +298,7 @@ export class JSONSchemaInput extends LitElement {
: [],
onChange: async () => {
this.#updateData(fullPath, list.items.length ? list.items.map((o) => o.value) : undefined);
if (validateOnChange) await this.#triggerValidation(name, list, path);
if (validateOnChange) await this.#triggerValidation(name, path);
},
});

Expand All @@ -303,10 +311,7 @@ export class JSONSchemaInput extends LitElement {
});

return html`
<div
class="schema-input"
@change=${() => validateOnChange && this.#triggerValidation(name, list, path)}
>
<div class="schema-input" @change=${() => validateOnChange && this.#triggerValidation(name, path)}>
${list} ${addButton}
</div>
`;
Expand All @@ -317,11 +322,8 @@ export class JSONSchemaInput extends LitElement {
return html`
<select
class="guided--input schema-input"
@input=${(ev) => {
this.#updateData(fullPath, info.enum[ev.target.value]);
this.#activateTimeoutValidation(name, ev.target, path);
}}
@change=${(ev) => validateOnChange && this.#triggerValidation(name, ev.target, path)}
@input=${(ev) => this.#updateData(fullPath, info.enum[ev.target.value])}
@change=${(ev) => validateOnChange && this.#triggerValidation(name, path)}
>
<option disabled selected value>${info.placeholder ?? "Select an option"}</option>
${info.enum.map(
Expand All @@ -335,7 +337,7 @@ export class JSONSchemaInput extends LitElement {
class="schema-input"
@input=${(ev) => this.#updateData(fullPath, ev.target.checked)}
?checked=${this.value ?? false}
@change=${(ev) => validateOnChange && this.#triggerValidation(name, ev.target, path)}
@change=${(ev) => validateOnChange && this.#triggerValidation(name, path)}
/>`;
} else if (info.type === "string" || info.type === "number") {
const fileSystemFormat = isFilesystemSelector(name, info.format);
Expand All @@ -352,7 +354,7 @@ export class JSONSchemaInput extends LitElement {
@input=${(ev) => {
this.#updateData(fullPath, ev.target.value);
}}
@change=${(ev) => validateOnChange && this.#triggerValidation(name, ev.target, path)}
@change=${(ev) => validateOnChange && this.#triggerValidation(name, path)}
></textarea>`;
// Handle other string formats
else {
Expand All @@ -372,7 +374,7 @@ export class JSONSchemaInput extends LitElement {
fullPath,
info.type === "number" ? parseFloat(ev.target.value) : ev.target.value
)}
@change=${(ev) => validateOnChange && this.#triggerValidation(name, ev.target, path)}
@change=${(ev) => validateOnChange && this.#triggerValidation(name, path)}
/>
`;
}
Expand Down
1 change: 0 additions & 1 deletion src/renderer/src/stories/Main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,6 @@ export class Main extends LitElement {

// Default Capsules Behavior
const section = sections[info.section];
console.log("Sections", section, sections);
if (section) {
if (capsules === true || !("capsules" in page)) {
let pages = Object.values(section.pages);
Expand Down
11 changes: 3 additions & 8 deletions src/renderer/src/stories/OptionalSection.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,12 @@ export class OptionalSection extends LitElement {
h2 {
margin: 0;
margin-bottom: 15px;
margin-bottom: 10px;
}
.optional-section__toggle {
padding-bottom: 20px;
margin: 10px 0px;
margin-bottom: 20px;
}
.optional-section__content {
Expand All @@ -24,12 +25,6 @@ export class OptionalSection extends LitElement {
`;
}

static get properties() {
return {
state: { type: Boolean, reflect: true },
};
}

get hidden() {
return this.shadowRoot.querySelector(".optional-section__content").hidden;
}
Expand Down
Loading

0 comments on commit 14feb6d

Please sign in to comment.