From 80cc83d2f07947ed78a9ecb0b71c3edd0f9f7225 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Wed, 20 Mar 2024 15:42:28 +0000 Subject: [PATCH 01/19] Fix huge amount of wasted renders by observing entire component context when generating form block fields --- .../client/src/components/app/blocks/form/FormBlock.svelte | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/client/src/components/app/blocks/form/FormBlock.svelte b/packages/client/src/components/app/blocks/form/FormBlock.svelte index 8c084a71ab..d249569731 100644 --- a/packages/client/src/components/app/blocks/form/FormBlock.svelte +++ b/packages/client/src/components/app/blocks/form/FormBlock.svelte @@ -34,6 +34,7 @@ $: formattedFields = convertOldFieldFormat(fields) $: fieldsOrDefault = getDefaultFields(formattedFields, schema) $: fetchSchema(dataSource) + $: id = $component.id // We could simply spread $$props into the inner form and append our // additions, but that would create svelte warnings about unused props and // make maintenance in future more confusing as we typically always have a @@ -53,7 +54,7 @@ buttons: buttons || Utils.buildFormBlockButtonConfig({ - _id: $component.id, + _id: id, showDeleteButton, showSaveButton, saveButtonLabel, From fdde7f889581244ba1a9460364223b3da6fd5eb0 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Wed, 20 Mar 2024 15:46:07 +0000 Subject: [PATCH 02/19] Improve performance of multistep form block --- .../app/blocks/MultiStepFormblock.svelte | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/packages/client/src/components/app/blocks/MultiStepFormblock.svelte b/packages/client/src/components/app/blocks/MultiStepFormblock.svelte index 762afc1579..f47655882d 100644 --- a/packages/client/src/components/app/blocks/MultiStepFormblock.svelte +++ b/packages/client/src/components/app/blocks/MultiStepFormblock.svelte @@ -26,9 +26,11 @@ let schema + $: id = $component.id + $: selected = $component.selected $: fetchSchema(dataSource) - $: enrichedSteps = enrichSteps(steps, schema, $component.id, $currentStep) - $: updateCurrentStep(enrichedSteps, $builderStore, $component) + $: updateCurrentStep(enrichedSteps, $builderStore, id, selected) + $: enrichedSteps = enrichSteps(steps, schema, id, $currentStep) // Provide additional data context for live binding eval export const getAdditionalDataContext = () => { @@ -40,16 +42,12 @@ } } - const updateCurrentStep = (steps, builderStore, component) => { + const updateCurrentStep = (steps, builderStore, id, selected) => { const { componentId, step } = builderStore.metadata || {} // If we aren't in the builder or aren't selected then don't update the step // context at all, allowing the normal form to take control. - if ( - !component.selected || - !builderStore.inBuilder || - componentId !== component.id - ) { + if (!selected || !builderStore.inBuilder || componentId !== id) { return } From 65b4b6c35d58db9a44f13cedb1d842bb281fcc8e Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Wed, 20 Mar 2024 15:46:15 +0000 Subject: [PATCH 03/19] Improve performance of table block --- .../components/app/blocks/TableBlock.svelte | 32 +++++++++---------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/packages/client/src/components/app/blocks/TableBlock.svelte b/packages/client/src/components/app/blocks/TableBlock.svelte index 7c58f90508..c371bed147 100644 --- a/packages/client/src/components/app/blocks/TableBlock.svelte +++ b/packages/client/src/components/app/blocks/TableBlock.svelte @@ -48,20 +48,7 @@ let schemaLoaded = false $: deleteLabel = setDeleteLabel(sidePanelDeleteLabel, sidePanelShowDelete) - - const setDeleteLabel = sidePanelDeleteLabel => { - // Accommodate old config to ensure delete button does not reappear - let labelText = sidePanelShowDelete === false ? "" : sidePanelDeleteLabel - - // Empty text is considered hidden. - if (labelText?.trim() === "") { - return "" - } - - // Default to "Delete" if the value is unset - return labelText || "Delete" - } - + $: id = $component.id $: isDSPlus = dataSource?.type === "table" || dataSource?.type === "viewV2" $: fetchSchema(dataSource) $: enrichSearchColumns(searchColumns, schema).then( @@ -105,6 +92,19 @@ }, ] + const setDeleteLabel = sidePanelDeleteLabel => { + // Accommodate old config to ensure delete button does not reappear + let labelText = sidePanelShowDelete === false ? "" : sidePanelDeleteLabel + + // Empty text is considered hidden. + if (labelText?.trim() === "") { + return "" + } + + // Default to "Delete" if the value is unset + return labelText || "Delete" + } + // Load the datasource schema so we can determine column types const fetchSchema = async dataSource => { if (dataSource?.type === "table") { @@ -267,7 +267,7 @@ dataSource, buttonPosition: "top", buttons: Utils.buildFormBlockButtonConfig({ - _id: $component.id + "-form-edit", + _id: id + "-form-edit", showDeleteButton: deleteLabel !== "", showSaveButton: true, saveButtonLabel: sidePanelSaveLabel || "Save", @@ -301,7 +301,7 @@ dataSource, buttonPosition: "top", buttons: Utils.buildFormBlockButtonConfig({ - _id: $component.id + "-form-new", + _id: id + "-form-new", showDeleteButton: false, showSaveButton: true, saveButtonLabel: "Save", From 9149828c7c12b6e2651827c2595b8f0964adfe5c Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Wed, 20 Mar 2024 15:50:23 +0000 Subject: [PATCH 04/19] Improve performance of multistep form block even more and fix missing params --- .../app/blocks/MultiStepFormblock.svelte | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/client/src/components/app/blocks/MultiStepFormblock.svelte b/packages/client/src/components/app/blocks/MultiStepFormblock.svelte index f47655882d..5cb3640355 100644 --- a/packages/client/src/components/app/blocks/MultiStepFormblock.svelte +++ b/packages/client/src/components/app/blocks/MultiStepFormblock.svelte @@ -28,9 +28,11 @@ $: id = $component.id $: selected = $component.selected + $: inBuilder = $builderStore.inBuilder + $: builderStep = $builderStore.metadata?.step $: fetchSchema(dataSource) - $: updateCurrentStep(enrichedSteps, $builderStore, id, selected) - $: enrichedSteps = enrichSteps(steps, schema, id, $currentStep) + $: enrichedSteps = enrichSteps(steps, schema, id) + $: updateCurrentStep(enrichedSteps, selected, inBuilder, builderStep) // Provide additional data context for live binding eval export const getAdditionalDataContext = () => { @@ -42,17 +44,15 @@ } } - const updateCurrentStep = (steps, builderStore, id, selected) => { - const { componentId, step } = builderStore.metadata || {} - + const updateCurrentStep = (steps, selected, inBuilder, builderStep) => { // If we aren't in the builder or aren't selected then don't update the step // context at all, allowing the normal form to take control. - if (!selected || !builderStore.inBuilder || componentId !== id) { + if (!selected || !inBuilder) { return } // Ensure we have a valid step selected - let newStep = Math.min(step || 0, steps.length - 1) + let newStep = Math.min(builderStep || 0, steps.length - 1) // Sanity check newStep = Math.max(newStep, 0) @@ -61,7 +61,7 @@ currentStep.set(newStep + 1) } - const fetchSchema = async () => { + const fetchSchema = async dataSource => { schema = (await fetchDatasourceSchema(dataSource)) || {} } From c58ac5810ecd3ca354ade57add19f78f146ce5e9 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Wed, 20 Mar 2024 15:53:53 +0000 Subject: [PATCH 05/19] Simplify reactive logic --- .../components/app/blocks/MultiStepFormblock.svelte | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/packages/client/src/components/app/blocks/MultiStepFormblock.svelte b/packages/client/src/components/app/blocks/MultiStepFormblock.svelte index 5cb3640355..bcc62b5229 100644 --- a/packages/client/src/components/app/blocks/MultiStepFormblock.svelte +++ b/packages/client/src/components/app/blocks/MultiStepFormblock.svelte @@ -28,11 +28,10 @@ $: id = $component.id $: selected = $component.selected - $: inBuilder = $builderStore.inBuilder $: builderStep = $builderStore.metadata?.step $: fetchSchema(dataSource) $: enrichedSteps = enrichSteps(steps, schema, id) - $: updateCurrentStep(enrichedSteps, selected, inBuilder, builderStep) + $: updateCurrentStep(enrichedSteps, selected, builderStep) // Provide additional data context for live binding eval export const getAdditionalDataContext = () => { @@ -44,17 +43,15 @@ } } - const updateCurrentStep = (steps, selected, inBuilder, builderStep) => { - // If we aren't in the builder or aren't selected then don't update the step - // context at all, allowing the normal form to take control. - if (!selected || !inBuilder) { + const updateCurrentStep = (steps, selected, builderStep) => { + // If we aren't selected in the builder then just allowing the normal form + // to take control. + if (!selected) { return } // Ensure we have a valid step selected let newStep = Math.min(builderStep || 0, steps.length - 1) - - // Sanity check newStep = Math.max(newStep, 0) // Add 1 because the form component expects 1 indexed rather than 0 indexed From 5acfc3143da29b84c3d38bcc0f49657c9ed68653 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Wed, 20 Mar 2024 17:01:23 +0000 Subject: [PATCH 06/19] Multiple performance improvements to component selection and hovering --- packages/builder/src/stores/builder/hover.js | 13 +++++++++++++ .../components/preview/HoverIndicator.svelte | 5 ++--- .../src/components/preview/Indicator.svelte | 6 +----- .../src/components/preview/IndicatorSet.svelte | 1 + packages/client/src/index.js | 2 +- packages/client/src/stores/hover.js | 18 ++++++++++++++++-- 6 files changed, 34 insertions(+), 11 deletions(-) diff --git a/packages/builder/src/stores/builder/hover.js b/packages/builder/src/stores/builder/hover.js index f0444a7da5..98cdc9e416 100644 --- a/packages/builder/src/stores/builder/hover.js +++ b/packages/builder/src/stores/builder/hover.js @@ -7,12 +7,25 @@ export const INITIAL_HOVER_STATE = { } export class HoverStore extends BudiStore { + hoverTimeout + constructor() { super({ ...INITIAL_HOVER_STATE }) this.hover = this.hover.bind(this) } hover(componentId, notifyClient = true) { + clearTimeout(this.hoverTimeout) + if (componentId) { + this.processHover(componentId, notifyClient) + } else { + this.hoverTimeout = setTimeout(() => { + this.processHover(componentId, notifyClient) + }, 10) + } + } + + processHover(componentId, notifyClient) { if (componentId === get(this.store).componentId) { return } diff --git a/packages/client/src/components/preview/HoverIndicator.svelte b/packages/client/src/components/preview/HoverIndicator.svelte index 164ec32ab4..69e13e4219 100644 --- a/packages/client/src/components/preview/HoverIndicator.svelte +++ b/packages/client/src/components/preview/HoverIndicator.svelte @@ -1,10 +1,9 @@
x.visible) $: offset = $builderStore.inBuilder ? 0 : 2 + $: componentId, debouncedUpdate() let updating = false let observers = [] diff --git a/packages/client/src/index.js b/packages/client/src/index.js index 9c249dd5b3..de6d1bdc12 100644 --- a/packages/client/src/index.js +++ b/packages/client/src/index.js @@ -98,7 +98,7 @@ const loadBudibase = async () => { context: stringifiedContext, }) } else if (type === "hover-component") { - hoverStore.actions.hoverComponent(data) + hoverStore.actions.hoverComponent(data, false) } else if (type === "builder-meta") { builderStore.actions.setMetadata(data) } diff --git a/packages/client/src/stores/hover.js b/packages/client/src/stores/hover.js index 24f315a126..014a9f1aa0 100644 --- a/packages/client/src/stores/hover.js +++ b/packages/client/src/stores/hover.js @@ -5,13 +5,27 @@ const createHoverStore = () => { const store = writable({ hoveredComponentId: null, }) + let hoverTimeout - const hoverComponent = id => { + const hoverComponent = (id, notifyBuilder = true) => { + clearTimeout(hoverTimeout) + if (id) { + processHover(id, notifyBuilder) + } else { + hoverTimeout = setTimeout(() => { + processHover(id, notifyBuilder) + }, 10) + } + } + + const processHover = (id, notifyBuilder = true) => { if (id === get(store).hoveredComponentId) { return } store.set({ hoveredComponentId: id }) - eventStore.actions.dispatchEvent("hover-component", { id }) + if (notifyBuilder) { + eventStore.actions.dispatchEvent("hover-component", { id }) + } } return { From e7dd137b28a88d6d01757ccf765024a70a9a628b Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 21 Mar 2024 09:14:01 +0000 Subject: [PATCH 07/19] Add memo and derivedMemo into SDK --- packages/client/src/sdk.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/client/src/sdk.js b/packages/client/src/sdk.js index d86d635970..1f996bf656 100644 --- a/packages/client/src/sdk.js +++ b/packages/client/src/sdk.js @@ -34,6 +34,8 @@ import { LuceneUtils, Constants, RowUtils, + memo, + derivedMemo, } from "@budibase/frontend-core" export default { @@ -71,6 +73,8 @@ export default { makePropSafe, createContextStore, generateGoldenSample: RowUtils.generateGoldenSample, + memo, + derivedMemo, // Components Provider, From 96f7fe6b125ab6bbf325ebe3bf53dfda0b6dc52d Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 21 Mar 2024 09:27:42 +0000 Subject: [PATCH 08/19] Remove grid layout component --- .../[componentId]/new/_components/componentStructure.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/componentStructure.json b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/componentStructure.json index 96e8faf93c..4edd56dbd2 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/componentStructure.json +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/componentStructure.json @@ -16,7 +16,7 @@ { "name": "Layout", "icon": "ClassicGridView", - "children": ["container", "section", "grid", "sidepanel"] + "children": ["container", "section", "sidepanel"] }, { "name": "Data", From 7d3153601423d83aa3d566a35364852caa1b85cd Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 21 Mar 2024 12:08:24 +0000 Subject: [PATCH 09/19] Fix issue with click_outside where non-function types could be stored as callbacks --- packages/bbui/src/Actions/click_outside.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/bbui/src/Actions/click_outside.js b/packages/bbui/src/Actions/click_outside.js index 2c54427b3a..eafca657f3 100644 --- a/packages/bbui/src/Actions/click_outside.js +++ b/packages/bbui/src/Actions/click_outside.js @@ -79,7 +79,8 @@ const removeHandler = id => { export default (element, opts) => { const id = Math.random() const update = newOpts => { - const callback = newOpts?.callback || newOpts + const callback = + newOpts?.callback || (typeof newOpts === "function" ? newOpts : null) const anchor = newOpts?.anchor || element const allowedType = newOpts?.allowedType || "click" updateHandler(id, element, anchor, callback, allowedType) From 07f8e1981a3527e179be0149c07f6c50f63946c1 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 21 Mar 2024 13:22:03 +0000 Subject: [PATCH 10/19] Improve client indicators by properly caching all properties to avoid inconsistent and stale states --- .../src/components/preview/DNDHandler.svelte | 3 +- .../components/preview/HoverIndicator.svelte | 7 +- .../src/components/preview/Indicator.svelte | 6 -- .../components/preview/IndicatorSet.svelte | 99 ++++++++++--------- .../preview/SelectionIndicator.svelte | 3 +- 5 files changed, 60 insertions(+), 58 deletions(-) diff --git a/packages/client/src/components/preview/DNDHandler.svelte b/packages/client/src/components/preview/DNDHandler.svelte index e93c42b863..767efc9e3a 100644 --- a/packages/client/src/components/preview/DNDHandler.svelte +++ b/packages/client/src/components/preview/DNDHandler.svelte @@ -345,8 +345,7 @@ diff --git a/packages/client/src/components/preview/HoverIndicator.svelte b/packages/client/src/components/preview/HoverIndicator.svelte index 69e13e4219..d204d77f49 100644 --- a/packages/client/src/components/preview/HoverIndicator.svelte +++ b/packages/client/src/components/preview/HoverIndicator.svelte @@ -1,9 +1,11 @@
({ + // Cached props + componentId, + color, + zIndex, + prefix, + allowResizeAnchors, + + // Computed state + indicators: [], + text: null, + icon: null, + insideGrid: false, + error: false, + }) + let interval - let text - let icon - let insideGrid = false - let errorState = false - - $: visibleIndicators = indicators.filter(x => x.visible) - $: offset = $builderStore.inBuilder ? 0 : 2 - $: componentId, debouncedUpdate() - + let state = defaultState() + let nextState = null let updating = false let observers = [] let callbackCount = 0 - let nextIndicators = [] + + $: visibleIndicators = state.indicators.filter(x => x.visible) + $: offset = $builderStore.inBuilder ? 0 : 2 + $: $$props, debouncedUpdate() const checkInsideGrid = id => { const component = document.getElementsByClassName(id)[0] @@ -45,10 +56,10 @@ if (callbackCount >= observers.length) { return } - nextIndicators[idx].visible = - nextIndicators[idx].insideSidePanel || entries[0].isIntersecting + nextState.indicators[idx].visible = + nextState.indicators[idx].insideSidePanel || entries[0].isIntersecting if (++callbackCount === observers.length) { - indicators = nextIndicators + state = nextState updating = false } } @@ -60,7 +71,7 @@ // Sanity check if (!componentId) { - indicators = [] + state = defaultState() return } @@ -69,25 +80,25 @@ callbackCount = 0 observers.forEach(o => o.disconnect()) observers = [] - nextIndicators = [] + nextState = defaultState() // Check if we're inside a grid if (allowResizeAnchors) { - insideGrid = checkInsideGrid(componentId) + nextState.insideGrid = checkInsideGrid(componentId) } // Determine next set of indicators const parents = document.getElementsByClassName(componentId) if (parents.length) { - text = parents[0].dataset.name - if (prefix) { - text = `${prefix} ${text}` + nextState.text = parents[0].dataset.name + if (nextState.prefix) { + nextState.text = `${nextState.prefix} ${nextState.text}` } if (parents[0].dataset.icon) { - icon = parents[0].dataset.icon + nextState.icon = parents[0].dataset.icon } } - errorState = parents?.[0]?.classList.contains("error") + nextState.error = parents?.[0]?.classList.contains("error") // Batch reads to minimize reflow const scrollX = window.scrollX @@ -103,8 +114,9 @@ // If there aren't any nodes then reset if (!children.length) { - indicators = [] + state = defaultState() updating = false + return } const device = document.getElementById("app-root") @@ -120,7 +132,7 @@ observers.push(observer) const elBounds = child.getBoundingClientRect() - nextIndicators.push({ + nextState.indicators.push({ top: elBounds.top + scrollY - deviceBounds.top - offset, left: elBounds.left + scrollX - deviceBounds.left - offset, width: elBounds.width + 4, @@ -145,20 +157,17 @@ }) -{#key componentId} - {#each visibleIndicators as indicator, idx} - - {/each} -{/key} +{#each visibleIndicators as indicator, idx} + +{/each} diff --git a/packages/client/src/components/preview/SelectionIndicator.svelte b/packages/client/src/components/preview/SelectionIndicator.svelte index bca0341628..a271389cbd 100644 --- a/packages/client/src/components/preview/SelectionIndicator.svelte +++ b/packages/client/src/components/preview/SelectionIndicator.svelte @@ -10,7 +10,6 @@ From 8a9bb0294b6f2208fce280569e4d1ee975af0282 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 21 Mar 2024 15:22:07 +0000 Subject: [PATCH 11/19] Allow horizontal overflow in drawer contents --- packages/bbui/src/Drawer/DrawerContent.svelte | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/bbui/src/Drawer/DrawerContent.svelte b/packages/bbui/src/Drawer/DrawerContent.svelte index 490dfecc31..f7345afb11 100644 --- a/packages/bbui/src/Drawer/DrawerContent.svelte +++ b/packages/bbui/src/Drawer/DrawerContent.svelte @@ -42,7 +42,6 @@ .main { height: 100%; overflow: auto; - overflow-x: hidden; } .padding .main { padding: var(--spacing-xl); From c6fca37b43c59a6be56d1383d6a2facc08d437ba Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 21 Mar 2024 16:05:02 +0000 Subject: [PATCH 12/19] Update dataprovider validation which was not aware of global bindings --- packages/builder/src/stores/builder/components.js | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/packages/builder/src/stores/builder/components.js b/packages/builder/src/stores/builder/components.js index 0d7da1ba58..a8522db80c 100644 --- a/packages/builder/src/stores/builder/components.js +++ b/packages/builder/src/stores/builder/components.js @@ -11,6 +11,7 @@ import { findComponentParent, findAllMatchingComponents, makeComponentUnique, + findComponentType, } from "helpers/components" import { getComponentFieldOptions } from "helpers/formFields" import { selectedScreen } from "./screens" @@ -279,12 +280,10 @@ export class ComponentStore extends BudiStore { else { if (setting.type === "dataProvider") { // Validate data provider exists, or else clear it - const treeId = parent?._id || component._id - const path = findComponentPath(screen?.props, treeId) - const providers = path.filter(component => - component._component?.endsWith("/dataprovider") + const providers = findAllMatchingComponents( + screen?.props, + x => x._component === "@budibase/standard-components/dataprovider" ) - // Validate non-empty values const valid = providers?.some(dp => value.includes?.(dp._id)) if (!valid) { if (providers.length) { From d3535a255d6d441c6877088fcc6d640ce4904f54 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 21 Mar 2024 16:24:35 +0000 Subject: [PATCH 13/19] Respect ordering of options when using a data provider options source --- .../src/components/app/forms/optionsParser.js | 24 +++++-------------- 1 file changed, 6 insertions(+), 18 deletions(-) diff --git a/packages/client/src/components/app/forms/optionsParser.js b/packages/client/src/components/app/forms/optionsParser.js index bd69967731..3bb5865774 100644 --- a/packages/client/src/components/app/forms/optionsParser.js +++ b/packages/client/src/components/app/forms/optionsParser.js @@ -6,36 +6,24 @@ export const getOptions = ( valueColumn, customOptions ) => { - const isArray = fieldSchema?.type === "array" // Take options from schema if (optionsSource == null || optionsSource === "schema") { return fieldSchema?.constraints?.inclusion ?? [] } - if (optionsSource === "provider" && isArray) { - let optionsSet = {} - - dataProvider?.rows?.forEach(row => { - const value = row?.[valueColumn] - if (value != null) { - const label = row[labelColumn] || value - optionsSet[value] = { value, label } - } - }) - return Object.values(optionsSet) - } - // Extract options from data provider if (optionsSource === "provider" && valueColumn) { - let optionsSet = {} + let valueCache = {} + let options = [] dataProvider?.rows?.forEach(row => { const value = row?.[valueColumn] - if (value != null) { + if (value != null && !valueCache[value]) { + valueCache[value] = true const label = row[labelColumn] || value - optionsSet[value] = { value, label } + options.push({ value, label }) } }) - return Object.values(optionsSet) + return options } // Extract custom options From 44114d9af10876c85334d6ea221077862bbb51d7 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 21 Mar 2024 16:26:53 +0000 Subject: [PATCH 14/19] Lint --- packages/builder/src/stores/builder/components.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/builder/src/stores/builder/components.js b/packages/builder/src/stores/builder/components.js index a8522db80c..fe5f4e8a05 100644 --- a/packages/builder/src/stores/builder/components.js +++ b/packages/builder/src/stores/builder/components.js @@ -11,7 +11,6 @@ import { findComponentParent, findAllMatchingComponents, makeComponentUnique, - findComponentType, } from "helpers/components" import { getComponentFieldOptions } from "helpers/formFields" import { selectedScreen } from "./screens" From 732c715498470e8557952392d483bf4755b8a6b9 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 22 Mar 2024 12:09:55 +0000 Subject: [PATCH 15/19] Add snippets into context when transforming column values legacy tables --- packages/bbui/src/Table/CellRenderer.svelte | 5 ++++- packages/bbui/src/Table/Table.svelte | 2 ++ .../client/src/components/app/deprecated/table/Table.svelte | 3 +++ 3 files changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/bbui/src/Table/CellRenderer.svelte b/packages/bbui/src/Table/CellRenderer.svelte index 4ad6e22d7e..6f6e210fe1 100644 --- a/packages/bbui/src/Table/CellRenderer.svelte +++ b/packages/bbui/src/Table/CellRenderer.svelte @@ -12,6 +12,7 @@ export let schema export let value export let customRenderers = [] + export let snippets let renderer const typeMap = { @@ -32,6 +33,8 @@ $: renderer = customRenderer?.component ?? typeMap[type] ?? StringRenderer $: cellValue = getCellValue(value, schema.template) + $: console.log(snippets) + const getType = schema => { // Use a string renderer for dates if we use a custom template if (schema?.type === "datetime" && schema?.template) { @@ -44,7 +47,7 @@ if (!template) { return value } - return processStringSync(template, { value }) + return processStringSync(template, { value, snippets }) } diff --git a/packages/bbui/src/Table/Table.svelte b/packages/bbui/src/Table/Table.svelte index 33b9bd9a7e..868f7b3a0b 100644 --- a/packages/bbui/src/Table/Table.svelte +++ b/packages/bbui/src/Table/Table.svelte @@ -42,6 +42,7 @@ export let customPlaceholder = false export let showHeaderBorder = true export let placeholderText = "No rows found" + export let snippets = [] const dispatch = createEventDispatcher() @@ -425,6 +426,7 @@ Date: Fri, 22 Mar 2024 12:10:22 +0000 Subject: [PATCH 16/19] Fix code mirror autocomplete showing NO NAME for certain bindings --- packages/builder/src/components/common/CodeEditor/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/builder/src/components/common/CodeEditor/index.js b/packages/builder/src/components/common/CodeEditor/index.js index f66c84adce..a04a140ad6 100644 --- a/packages/builder/src/components/common/CodeEditor/index.js +++ b/packages/builder/src/components/common/CodeEditor/index.js @@ -313,7 +313,7 @@ export const bindingsToCompletions = (bindings, mode) => { ...bindingByCategory[catKey].reduce((acc, binding) => { let displayType = binding.fieldSchema?.type || binding.display?.type acc.push({ - label: binding.display?.name || "NO NAME", + label: binding.display?.name || binding.readableBinding || "NO NAME", info: completion => { return buildBindingInfoNode(completion, binding) }, From 53cd48e8663a12d6d87dfaa26cb6665ec4772ebe Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 22 Mar 2024 12:11:03 +0000 Subject: [PATCH 17/19] Add value for 'value' binding when editing table columns to improve live eval --- .../components/common/bindings/ClientBindingPanel.svelte | 3 ++- .../settings/controls/ColumnEditor/CellDrawer.svelte | 8 +++++++- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/builder/src/components/common/bindings/ClientBindingPanel.svelte b/packages/builder/src/components/common/bindings/ClientBindingPanel.svelte index cb65d2bbe4..4e5789b563 100644 --- a/packages/builder/src/components/common/bindings/ClientBindingPanel.svelte +++ b/packages/builder/src/components/common/bindings/ClientBindingPanel.svelte @@ -8,6 +8,7 @@ export let allowJS = false export let allowHelpers = true export let autofocusEditor = false + export let context = null $: enrichedBindings = enrichBindings(bindings) @@ -27,7 +28,7 @@ @@ -41,6 +44,9 @@ icon: "TableColumnMerge", }, ]} + context={{ + value: columnValue, + }} /> From a64738fa253a8bcaf7df57267d1e00026740d173 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 22 Mar 2024 12:14:59 +0000 Subject: [PATCH 18/19] Provide live eval context from legacy table components --- .../app/deprecated/table/Table.svelte | 20 +++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/packages/client/src/components/app/deprecated/table/Table.svelte b/packages/client/src/components/app/deprecated/table/Table.svelte index 71f3cc1712..ac3d88d29c 100644 --- a/packages/client/src/components/app/deprecated/table/Table.svelte +++ b/packages/client/src/components/app/deprecated/table/Table.svelte @@ -17,8 +17,14 @@ const component = getContext("component") const context = getContext("context") - const { styleable, getAction, ActionTypes, rowSelectionStore } = - getContext("sdk") + const { + styleable, + getAction, + ActionTypes, + rowSelectionStore, + generateGoldenSample, + } = getContext("sdk") + const customColumnKey = `custom-${Math.random()}` const customRenderers = [ { @@ -63,6 +69,16 @@ selectedRows, } + // Provide additional data context for live binding eval + export const getAdditionalDataContext = () => { + const goldenRow = generateGoldenSample(data) + return { + eventContext: { + row: goldenRow, + }, + } + } + const getFields = ( schema, customColumns, From 9072142ca948a0922915e53b0429719ead04b5fd Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 22 Mar 2024 12:31:35 +0000 Subject: [PATCH 19/19] Remove log --- packages/bbui/src/Table/CellRenderer.svelte | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/bbui/src/Table/CellRenderer.svelte b/packages/bbui/src/Table/CellRenderer.svelte index 6f6e210fe1..eff1178f6d 100644 --- a/packages/bbui/src/Table/CellRenderer.svelte +++ b/packages/bbui/src/Table/CellRenderer.svelte @@ -33,8 +33,6 @@ $: renderer = customRenderer?.component ?? typeMap[type] ?? StringRenderer $: cellValue = getCellValue(value, schema.template) - $: console.log(snippets) - const getType = schema => { // Use a string renderer for dates if we use a custom template if (schema?.type === "datetime" && schema?.template) {