From ab40e3babd706bbbdcc8fa27a34fd0f987604d90 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Wed, 27 Mar 2024 08:41:27 +0000
Subject: [PATCH 001/123] wip

---
 .../bbui/src/Form/Core/Multiselect.svelte     |   4 +
 packages/bbui/src/Form/Core/Picker.svelte     |   3 +-
 .../design/settings/componentSettings.js      |   4 +
 .../settings/controls/ChartFieldSelect.svelte |  53 ++++++++
 .../controls/ChartMultifieldSelect.svelte     |  48 +++++++
 .../design/settings/fieldValidator.js         |  42 ++++++
 .../Component/ComponentSettingsSection.svelte |   3 +
 packages/client/manifest.json                 |  43 +++---
 packages/client/package.json                  |   3 +-
 .../client/src/components/Component.svelte    |   3 +
 .../components/app/charts/ApexChart.svelte    | 122 ++++++++++++++++--
 .../app/charts/ApexOptionsBuilder.js          |  15 ++-
 .../src/components/app/charts/BarChart.svelte |  20 ++-
 .../app/charts/CandleStickChart.svelte        |  12 +-
 .../components/app/charts/LineChart.svelte    |  19 ++-
 yarn.lock                                     |  20 ++-
 16 files changed, 363 insertions(+), 51 deletions(-)
 create mode 100644 packages/builder/src/components/design/settings/controls/ChartFieldSelect.svelte
 create mode 100644 packages/builder/src/components/design/settings/controls/ChartMultifieldSelect.svelte
 create mode 100644 packages/builder/src/components/design/settings/fieldValidator.js

diff --git a/packages/bbui/src/Form/Core/Multiselect.svelte b/packages/bbui/src/Form/Core/Multiselect.svelte
index 2243570cd5..7c1900fe2e 100644
--- a/packages/bbui/src/Form/Core/Multiselect.svelte
+++ b/packages/bbui/src/Form/Core/Multiselect.svelte
@@ -9,6 +9,8 @@
   export let options = []
   export let getOptionLabel = option => option
   export let getOptionValue = option => option
+  export let getOptionsIcon = () => null
+  export let getOptionsIconToolip = () => null
   export let readonly = false
   export let autocomplete = false
   export let sort = false
@@ -80,6 +82,8 @@
 
 <Picker
   on:loadMore
+  {getOptionsIcon}
+  {getOptionsIconTooltip}
   {id}
   {disabled}
   {readonly}
diff --git a/packages/bbui/src/Form/Core/Picker.svelte b/packages/bbui/src/Form/Core/Picker.svelte
index f6bffbbf10..f5c8398bec 100644
--- a/packages/bbui/src/Form/Core/Picker.svelte
+++ b/packages/bbui/src/Form/Core/Picker.svelte
@@ -26,6 +26,7 @@
   export let getOptionLabel = option => option
   export let getOptionValue = option => option
   export let getOptionIcon = () => null
+  export let getOptionIconTooltip = () => null
   export let useOptionIconImage = false
   export let getOptionColour = () => null
   export let getOptionSubtitle = () => null
@@ -202,7 +203,7 @@
           >
             {#if getOptionIcon(option, idx)}
               <span class="option-extra icon">
-                {#if useOptionIconImage}
+                {#if useoptioniconimage}
                   <img
                     src={getOptionIcon(option, idx)}
                     alt="icon"
diff --git a/packages/builder/src/components/design/settings/componentSettings.js b/packages/builder/src/components/design/settings/componentSettings.js
index 2a5483d77c..15f5ee4523 100644
--- a/packages/builder/src/components/design/settings/componentSettings.js
+++ b/packages/builder/src/components/design/settings/componentSettings.js
@@ -9,8 +9,10 @@ import TableSelect from "./controls/TableSelect.svelte"
 import ColorPicker from "./controls/ColorPicker.svelte"
 import { IconSelect } from "./controls/IconSelect"
 import FieldSelect from "./controls/FieldSelect.svelte"
+import ChartFieldSelect from "./controls/ChartFieldSelect.svelte"
 import SortableFieldSelect from "./controls/SortableFieldSelect.svelte"
 import MultiFieldSelect from "./controls/MultiFieldSelect.svelte"
+import ChartMultiFieldSelect from "./controls/ChartMultiFieldSelect.svelte"
 import SearchFieldSelect from "./controls/SearchFieldSelect.svelte"
 import SchemaSelect from "./controls/SchemaSelect.svelte"
 import SectionSelect from "./controls/SectionSelect.svelte"
@@ -46,7 +48,9 @@ const componentMap = {
   color: ColorPicker,
   icon: IconSelect,
   field: FieldSelect,
+  chartfield: ChartFieldSelect,
   multifield: MultiFieldSelect,
+  chartmultifield: ChartMultiFieldSelect,
   searchfield: SearchFieldSelect,
   options: OptionsEditor,
   schema: SchemaSelect,
diff --git a/packages/builder/src/components/design/settings/controls/ChartFieldSelect.svelte b/packages/builder/src/components/design/settings/controls/ChartFieldSelect.svelte
new file mode 100644
index 0000000000..2f65907e47
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/ChartFieldSelect.svelte
@@ -0,0 +1,53 @@
+<script>
+  import { Select } from "@budibase/bbui"
+  import {
+    getDatasourceForProvider,
+    getSchemaForDatasource,
+  } from "dataBinding"
+  import { selectedScreen } from "stores/builder"
+  import { createEventDispatcher } from "svelte"
+
+  export let componentInstance = {}
+  export let value = ""
+  export let placeholder
+
+  const dispatch = createEventDispatcher()
+  $: datasource = getDatasourceForProvider($selectedScreen, componentInstance)
+  $: schema = getSchemaForDatasource($selectedScreen, datasource).schema
+  $: options = Object.keys(schema || {}).filter(key => {
+    return (
+      schema[key].type !== "json" &&
+      schema[key].type !== "array" &&
+      schema[key].type !== "attachment" &&
+      schema[key].type !== "barcodeqr" &&
+      schema[key].type !== "link" &&
+      schema[key].type !== "bb_reference"
+    );
+  });
+  $: boundValue = getValidValue(value, options)
+
+  const getValidValue = (value, options) => {
+    // Reset value if there aren't any options
+    if (!Array.isArray(options)) {
+      return null
+    }
+
+    // Reset value if the value isn't found in the options
+    if (options.indexOf(value) === -1) {
+      return null
+    }
+
+    return value
+  }
+
+  const onChange = value => {
+    boundValue = getValidValue(value.detail, options)
+    dispatch("change", boundValue)
+  }
+
+  $: {
+    console.log(options, schema);
+  }
+</script>
+
+<Select {placeholder} value={boundValue} on:change={onChange} {options} />
diff --git a/packages/builder/src/components/design/settings/controls/ChartMultifieldSelect.svelte b/packages/builder/src/components/design/settings/controls/ChartMultifieldSelect.svelte
new file mode 100644
index 0000000000..2091b16ae4
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/ChartMultifieldSelect.svelte
@@ -0,0 +1,48 @@
+<script>
+  import { Multiselect } from "@budibase/bbui"
+  import { getDatasourceForProvider, getSchemaForDatasource } from "dataBinding"
+  import { selectedScreen } from "stores/builder"
+  import { createEventDispatcher } from "svelte"
+
+  export let componentInstance = {}
+  export let value = ""
+  export let placeholder
+  export let fieldValidator
+
+  const dispatch = createEventDispatcher()
+  $: datasource = getDatasourceForProvider($selectedScreen, componentInstance)
+  $: schema = getSchemaForDatasource($selectedScreen, datasource).schema
+
+  const getOptions = (schema, fieldValidator) => {
+    if (fieldValidator != null) {
+      return Object.keys(schema || {})
+    }
+  }
+
+  $: options = Object.keys(schema || {}).filter(key => {
+    return (
+      schema[key].type !== "json" &&
+      schema[key].type !== "array" &&
+      schema[key].type !== "attachment" &&
+      schema[key].type !== "barcodeqr" &&
+      schema[key].type !== "link" &&
+      schema[key].type !== "bb_reference"
+    );
+  });
+  $: boundValue = getValidOptions(value, options)
+
+  const getValidOptions = (selectedOptions, allOptions) => {
+    // Fix the hardcoded default string value
+    if (!Array.isArray(selectedOptions)) {
+      selectedOptions = []
+    }
+    return selectedOptions.filter(val => allOptions.indexOf(val) !== -1)
+  }
+
+  const setValue = value => {
+    boundValue = getValidOptions(value.detail, options)
+    dispatch("change", boundValue)
+  }
+</script>
+
+<Multiselect {placeholder} value={boundValue} on:change={setValue} {options} />
diff --git a/packages/builder/src/components/design/settings/fieldValidator.js b/packages/builder/src/components/design/settings/fieldValidator.js
new file mode 100644
index 0000000000..7d0523b027
--- /dev/null
+++ b/packages/builder/src/components/design/settings/fieldValidator.js
@@ -0,0 +1,42 @@
+export const unsupported = Symbol("values-validator-unsupported")
+export const partialSupport = Symbol("values-validator-partial-support")
+export const supported = Symbol("values-validator-supported")
+
+const validatorMap = {
+  chart: (fieldSchema) => {
+    if (
+      fieldSchema.type === "json" ||
+      fieldSchema.type === "array" ||
+      fieldSchema.type === "attachment" ||
+      fieldSchema.type === "barcodeqr" ||
+      fieldSchema.type === "link" ||
+      fieldSchema.type === "bb_reference"
+    ) {
+      return {
+        support: unsupported,
+        message: "This field cannot be used as a chart value"
+      }
+    }
+
+    if (fieldSchema.type === "string") {
+      return {
+        support: partialSupport,
+        message: "This field can be used as a chart value, but non-numeric values will not be parsed correctly"
+      }
+    }
+
+    if (fieldSchema.type === "number") {
+      return {
+        support: supported,
+        message: "This field can be used for chart values"
+      }
+    }
+
+    return {
+      support: partialSupport,
+      message: "This field can be used as a chart value, but it may not be parsed correctly"
+    }
+  }
+};
+export default validatorMap;
+
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte
index 9ff2a764b7..e64d161a72 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte
@@ -191,6 +191,9 @@
                 // Number fields
                 min: setting.min ?? null,
                 max: setting.max ?? null,
+
+                // Field select settings
+                fieldValidator: setting.fieldValidator,
               }}
               {bindings}
               {componentBindings}
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index bf73286933..ee092a3a86 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -1629,10 +1629,11 @@
         "required": true
       },
       {
-        "type": "multifield",
+        "type": "chartmultifield",
         "label": "Data columns",
         "key": "valueColumns",
         "dependsOn": "dataProvider",
+        "fieldValidator": "chart",
         "required": true
       },
       {
@@ -1787,7 +1788,7 @@
         "required": true
       },
       {
-        "type": "multifield",
+        "type": "chartmultifield",
         "label": "Data columns",
         "key": "valueColumns",
         "dependsOn": "dataProvider",
@@ -1940,7 +1941,7 @@
         "required": true
       },
       {
-        "type": "multifield",
+        "type": "chartmultifield",
         "label": "Data columns",
         "key": "valueColumns",
         "dependsOn": "dataProvider",
@@ -2105,8 +2106,8 @@
         "required": true
       },
       {
-        "type": "field",
-        "label": "Data columns",
+        "type": "chartfield",
+        "label": "Data column",
         "key": "valueColumn",
         "dependsOn": "dataProvider",
         "required": true
@@ -2234,7 +2235,7 @@
         "required": true
       },
       {
-        "type": "field",
+        "type": "chartfield",
         "label": "Data columns",
         "key": "valueColumn",
         "dependsOn": "dataProvider",
@@ -2363,28 +2364,28 @@
         "required": true
       },
       {
-        "type": "field",
+        "type": "chartfield",
         "label": "Open column",
         "key": "openColumn",
         "dependsOn": "dataProvider",
         "required": true
       },
       {
-        "type": "field",
+        "type": "chartfield",
         "label": "Close column",
         "key": "closeColumn",
         "dependsOn": "dataProvider",
         "required": true
       },
       {
-        "type": "field",
+        "type": "chartfield",
         "label": "High column",
         "key": "highColumn",
         "dependsOn": "dataProvider",
         "required": true
       },
       {
-        "type": "field",
+        "type": "chartfield",
         "label": "Low column",
         "key": "lowColumn",
         "dependsOn": "dataProvider",
@@ -2448,7 +2449,7 @@
         "required": true
       },
       {
-        "type": "field",
+        "type": "chartfield",
         "label": "Data column",
         "key": "valueColumn",
         "dependsOn": "dataProvider",
@@ -5265,7 +5266,7 @@
             "required": true
           },
           {
-            "type": "field",
+            "type": "chartfield",
             "label": "Data column",
             "key": "valueColumn",
             "dependsOn": "dataSource",
@@ -5290,7 +5291,7 @@
             "required": true
           },
           {
-            "type": "field",
+            "type": "chartfield",
             "label": "Data column",
             "key": "valueColumn",
             "dependsOn": "dataSource",
@@ -5315,7 +5316,7 @@
             "required": true
           },
           {
-            "type": "multifield",
+            "type": "chartmultifield",
             "label": "Data columns",
             "key": "valueColumns",
             "dependsOn": "dataSource",
@@ -5362,7 +5363,7 @@
         },
         "settings": [
           {
-            "type": "field",
+            "type": "chartfield",
             "label": "Value column",
             "key": "valueColumn",
             "dependsOn": "dataSource",
@@ -5410,7 +5411,7 @@
             "required": true
           },
           {
-            "type": "multifield",
+            "type": "chartmultifield",
             "label": "Data columns",
             "key": "valueColumns",
             "dependsOn": "dataSource",
@@ -5459,7 +5460,7 @@
             "required": true
           },
           {
-            "type": "multifield",
+            "type": "chartmultifield",
             "label": "Data columns",
             "key": "valueColumns",
             "dependsOn": "dataSource",
@@ -5520,28 +5521,28 @@
             "required": true
           },
           {
-            "type": "field",
+            "type": "chartfield",
             "label": "Open column",
             "key": "openColumn",
             "dependsOn": "dataSource",
             "required": true
           },
           {
-            "type": "field",
+            "type": "chartfield",
             "label": "Close column",
             "key": "closeColumn",
             "dependsOn": "dataSource",
             "required": true
           },
           {
-            "type": "field",
+            "type": "chartfield",
             "label": "High column",
             "key": "highColumn",
             "dependsOn": "dataSource",
             "required": true
           },
           {
-            "type": "field",
+            "type": "chartfield",
             "label": "Low column",
             "key": "lowColumn",
             "dependsOn": "dataSource",
diff --git a/packages/client/package.json b/packages/client/package.json
index 00f89a6445..a576b70ebc 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -32,11 +32,12 @@
     "@spectrum-css/tag": "^3.1.4",
     "@spectrum-css/typography": "^3.0.2",
     "@spectrum-css/vars": "^3.0.1",
-    "apexcharts": "^3.22.1",
+    "apexcharts": "^3.45.2",
     "dayjs": "^1.10.8",
     "downloadjs": "1.4.7",
     "html5-qrcode": "^2.2.1",
     "leaflet": "^1.7.1",
+    "lodash": "^4.17.21",
     "sanitize-html": "^2.7.0",
     "screenfull": "^6.0.1",
     "shortid": "^2.2.15",
diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 378fa64b73..9581ffa5d4 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -283,6 +283,9 @@
         const dependsOnKey = setting.dependsOn.setting || setting.dependsOn
         const dependsOnValue = setting.dependsOn.value
         const realDependentValue = instance[dependsOnKey]
+        if (dependsOnValue === undefined && realDependentValue) {
+          return missing
+        }
         if (dependsOnValue == null && realDependentValue == null) {
           return false
         }
diff --git a/packages/client/src/components/app/charts/ApexChart.svelte b/packages/client/src/components/app/charts/ApexChart.svelte
index b25be421f7..411774c353 100644
--- a/packages/client/src/components/app/charts/ApexChart.svelte
+++ b/packages/client/src/components/app/charts/ApexChart.svelte
@@ -1,25 +1,104 @@
 <script>
   import { getContext } from "svelte"
-  import { chart } from "svelte-apexcharts"
-  import Placeholder from "../Placeholder.svelte"
+  import ApexCharts from 'apexcharts'
+  import { Icon } from "@budibase/bbui"
+  import { cloneDeep } from "lodash";
 
   const { styleable, builderStore } = getContext("sdk")
   const component = getContext("component")
 
   export let options
+  /*
+  export let invalid = false
+
+  const parseValue = (value) => {
+    // A value like [10, 11, 12] actually would be output by parseInt as `10`, but this behaviour is odd and not something a
+    // reasonable user would expect.
+    if (Array.isArray(value)) {
+      return null;
+    }
+
+    const parsedValue = parseInt(value, 10);
+
+    if (Number.isNaN(parsedValue)) {
+      return null;
+    }
+
+    return parsedValue
+  }
+
+  const parseOptions = (options) => {
+    const parsedOptions = { series: [], ...cloneDeep(options)}
+
+    // Object form of series, used by most charts
+    if (parsedOptions.series.some(entry => Array.isArray(entry?.data))) {
+      parsedOptions.series = parsedOptions.series.map(entry => ({ ...entry, data: parseValue})parseValue);
+    } else {
+      // Scalar form of series, used by non-axis charts like pie and donut
+      parsedOptions.series = parsedOptions.series.map(parseValue);
+    }
+
+    return parsedOptions;
+  }
+
+  $: parsedOptions = parseOptions(options);
+  */
+
+  let chartElement;
+  let chart;
+
+  const updateChart = async (newOptions) => {
+    try {
+      await chart?.updateOptions(newOptions)
+    } catch(e) {
+      //console.log(e)
+    }
+  }
+
+  const renderChart = async (newChartElement) => {
+    try {
+      await chart?.destroy()
+      chart = new ApexCharts(newChartElement, options)
+      await chart.render()
+    } catch(e) {
+      //console.log(e)
+    }
+  }
+
+  const isSeriesValid = (series) => {
+    return true
+  }
+
+  $: noData = options == null || options?.series?.length === 0
+  $: hide = noData || !seriesValid
+
+  // Call render chart upon changes to hide, as apex charts has issues with rendering upon changes automatically
+  // if the chart is hidden.
+  $: renderChart(chartElement, hide)
+  $: updateChart(options)
+  $: seriesValid = isSeriesValid(options?.series || [])
 </script>
 
-{#if options}
-  {#key options.customColor}
-    <div use:chart={options} use:styleable={$component.styles} />
-  {/key}
-{:else if $builderStore.inBuilder}
-  <div use:styleable={$component.styles}>
-    <Placeholder />
-  </div>
-{/if}
+{#key options?.customColor}
+  <div class:hide use:styleable={$component.styles} bind:this={chartElement} />
+  {#if $builderStore.inBuilder && noData }
+    <div class="component-placeholder" use:styleable={{ ...$component.styles, normal: {}, custom: null, empty: true }}>
+      <Icon name="Alert" color="var(--spectrum-global-color-static-red-600)" />
+      Add rows to your data source to start using your component
+    </div>
+  {:else if $builderStore.inBuilder && !seriesValid}
+    <div class="component-placeholder" use:styleable={{ ...$component.styles, normal: {}, custom: null, empty: true }}>
+      <Icon name="Alert" color="var(--spectrum-global-color-static-red-600)" />
+      Your selected data cannot be displayed in this chart
+    </div>
+  {/if}
+
+{/key}
 
 <style>
+  .hide {
+    display: none;
+  }
   div :global(.apexcharts-legend-series) {
     display: flex !important;
     text-transform: capitalize;
@@ -59,4 +138,25 @@
     ) {
     padding-bottom: 0;
   }
+
+  .component-placeholder {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    color: var(--spectrum-global-color-gray-600);
+    font-size: var(--font-size-s);
+    padding: var(--spacing-xs);
+    gap: var(--spacing-s);
+  }
+
+  /* Common styles for all error states to use */
+  .component-placeholder :global(mark) {
+    background-color: var(--spectrum-global-color-gray-400);
+    padding: 0 4px;
+    border-radius: 2px;
+  }
+  .component-placeholder :global(.spectrum-Link) {
+    cursor: pointer;
+  }
 </style>
diff --git a/packages/client/src/components/app/charts/ApexOptionsBuilder.js b/packages/client/src/components/app/charts/ApexOptionsBuilder.js
index 04b5805df3..afdc3f780b 100644
--- a/packages/client/src/components/app/charts/ApexOptionsBuilder.js
+++ b/packages/client/src/components/app/charts/ApexOptionsBuilder.js
@@ -7,6 +7,9 @@ export class ApexOptionsBuilder {
     }
     this.options = {
       series: [],
+      noData:{
+        text: "no data to show"
+      },
       legend: {
         show: false,
         position: "top",
@@ -99,7 +102,8 @@ export class ApexOptionsBuilder {
   }
 
   series(series) {
-    return this.setOption(["series"], series)
+    const foo = this.setOption(["series"], series)
+    return foo;
   }
 
   horizontal(horizontal) {
@@ -161,6 +165,15 @@ export class ApexOptionsBuilder {
     )
   }
 
+  candleStick() {
+    //this.options.xaxis.convertedCatToNumeric = false;
+    this.options.xaxis.labels.formatter = (epoch) => {
+      return (new Date(epoch)).toDateString();
+    }
+
+    return this;
+  }
+
   clearXFormatter() {
     delete this.options.xaxis.labels
     return this
diff --git a/packages/client/src/components/app/charts/BarChart.svelte b/packages/client/src/components/app/charts/BarChart.svelte
index fd8443e2d6..4a23393b72 100644
--- a/packages/client/src/components/app/charts/BarChart.svelte
+++ b/packages/client/src/components/app/charts/BarChart.svelte
@@ -1,6 +1,7 @@
 <script>
   import { ApexOptionsBuilder } from "./ApexOptionsBuilder"
   import ApexChart from "./ApexChart.svelte"
+  import { get } from "lodash";
 
   export let title
   export let dataProvider
@@ -71,9 +72,8 @@
 
     // Fetch data
     const { schema, rows } = dataProvider
-    const reducer = row => (valid, column) => valid && row[column] != null
-    const hasAllColumns = row => allCols.reduce(reducer(row), true)
-    const data = rows.filter(row => hasAllColumns(row)).slice(0, 100)
+
+    const data = rows.slice(0, 100)
     if (!schema || !data.length) {
       return null
     }
@@ -105,11 +105,21 @@
       }
       useDates = labelFieldType === "datetime"
     }
-    const series = valueColumns.map(column => ({
+    const series = (valueColumns ?? []).map(column => ({
       name: column,
       data: data.map(row => {
         if (!useDates) {
-          return row[column]
+          const value = get(row, column); 
+
+          if (Array.isArray(value)) {
+            return null;
+          }
+
+          if (Number.isNaN(parseInt(value, 10))) {
+            return null;
+          }
+
+          return value;
         } else {
           return [row[labelColumn], row[column]]
         }
diff --git a/packages/client/src/components/app/charts/CandleStickChart.svelte b/packages/client/src/components/app/charts/CandleStickChart.svelte
index b2760b005e..ee875060d8 100644
--- a/packages/client/src/components/app/charts/CandleStickChart.svelte
+++ b/packages/client/src/components/app/charts/CandleStickChart.svelte
@@ -76,14 +76,16 @@
       .animate(animate)
       .yUnits(yAxisUnits)
       .yTooltip(true)
-      .xType("datetime")
+      //.xType("datetime")
+      .candleStick()
 
     // Add data
+    //const parseDate = d => d
     const parseDate = d => (isNaN(d) ? Date.parse(d).valueOf() : parseInt(d))
-    const chartData = data.map(row => ({
-      x: parseDate(row[dateColumn]),
-      y: [row[openColumn], row[highColumn], row[lowColumn], row[closeColumn]],
-    }))
+    const chartData = data.map(row => ([
+      parseDate(row[dateColumn]),
+      row[openColumn], row[highColumn], row[lowColumn], row[closeColumn]
+    ]))
     builder = builder.series([{ data: chartData }])
 
     // Build chart options
diff --git a/packages/client/src/components/app/charts/LineChart.svelte b/packages/client/src/components/app/charts/LineChart.svelte
index 7f82a833d2..599d150d7b 100644
--- a/packages/client/src/components/app/charts/LineChart.svelte
+++ b/packages/client/src/components/app/charts/LineChart.svelte
@@ -1,6 +1,7 @@
 <script>
   import { ApexOptionsBuilder } from "./ApexOptionsBuilder"
   import ApexChart from "./ApexChart.svelte"
+  import { get } from "lodash";
 
   // Common props
   export let title
@@ -80,9 +81,7 @@
 
     // Fetch, filter and sort data
     const { schema, rows } = dataProvider
-    const reducer = row => (valid, column) => valid && row[column] != null
-    const hasAllColumns = row => allCols.reduce(reducer(row), true)
-    const data = rows.filter(row => hasAllColumns(row))
+    const data = rows
     if (!schema || !data.length) {
       return null
     }
@@ -112,11 +111,21 @@
       builder = builder.xType(labelFieldType)
       useDates = labelFieldType === "datetime"
     }
-    const series = valueColumns.map(column => ({
+    const series = (valueColumns ?? []).map(column => ({
       name: column,
       data: data.map(row => {
         if (!useDates) {
-          return row[column]
+          const value = get(row, column); 
+
+          if (Array.isArray(value)) {
+            return null;
+          }
+
+          if (Number.isNaN(parseInt(value, 10))) {
+            return null;
+          }
+
+          return value;
         } else {
           return [row[labelColumn], row[column]]
         }
diff --git a/yarn.lock b/yarn.lock
index ce39c89075..a49ac599e9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6605,6 +6605,11 @@
     js-yaml "^3.10.0"
     tslib "^2.4.0"
 
+"@yr/monotone-cubic-spline@^1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@yr/monotone-cubic-spline/-/monotone-cubic-spline-1.0.3.tgz#7272d89f8e4f6fb7a1600c28c378cc18d3b577b9"
+  integrity sha512-FQXkOta0XBSUPHndIKON2Y9JeQz5ZeMqLYZVVK93FliNBFm7LNMIZmY6FrMEB9XPcDbE2bekMbZD6kzDkxwYjA==
+
 "@zerodevx/svelte-json-view@^1.0.7":
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/@zerodevx/svelte-json-view/-/svelte-json-view-1.0.7.tgz#abf3efa71dedcb3e9d16bc9cc61d5ea98c8d00b1"
@@ -6907,7 +6912,7 @@ anymatch@^3.0.3, anymatch@~3.1.2:
     normalize-path "^3.0.0"
     picomatch "^2.0.4"
 
-apexcharts@^3.19.2, apexcharts@^3.22.1:
+apexcharts@^3.19.2:
   version "3.37.1"
   resolved "https://registry.yarnpkg.com/apexcharts/-/apexcharts-3.37.1.tgz#50443d302fc7fc72aace9c6c4074baae017c6950"
   integrity sha512-fmQ5Updeb/LASl+S1+mIxXUFxzY0Fa7gexfCs4o+OPP9f2NEBNjvybOtPrah44N4roK7U5o5Jis906QeEQu0cA==
@@ -6919,6 +6924,19 @@ apexcharts@^3.19.2, apexcharts@^3.22.1:
     svg.resize.js "^1.4.3"
     svg.select.js "^3.0.1"
 
+apexcharts@^3.45.2:
+  version "3.48.0"
+  resolved "https://registry.yarnpkg.com/apexcharts/-/apexcharts-3.48.0.tgz#cf0e18f4551b04a242d81942c965c15547f5f1b6"
+  integrity sha512-Lhpj1Ij6lKlrUke8gf+P+SE6uGUn+Pe1TnCJ+zqrY0YMvbqM3LMb1lY+eybbTczUyk0RmMZomlTa2NgX2EUs4Q==
+  dependencies:
+    "@yr/monotone-cubic-spline" "^1.0.3"
+    svg.draggable.js "^2.2.2"
+    svg.easing.js "^2.0.0"
+    svg.filter.js "^2.0.2"
+    svg.pathmorphing.js "^0.1.3"
+    svg.resize.js "^1.4.3"
+    svg.select.js "^3.0.1"
+
 apidoc@0.50.4:
   version "0.50.4"
   resolved "https://registry.yarnpkg.com/apidoc/-/apidoc-0.50.4.tgz#52ff8fb4d067a73faf544455031f44459bd68d75"

From 7eed50707e3442a8ab838898d6b3053ac6ba1fb9 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Mon, 1 Apr 2024 12:31:16 +0100
Subject: [PATCH 002/123] wip

---
 .../bbui/src/Form/Core/Multiselect.svelte     |  14 +-
 packages/bbui/src/Form/Core/Picker.svelte     | 233 +++++++++++-------
 packages/bbui/src/Form/Multiselect.svelte     |  10 +
 packages/bbui/src/Tooltip/Context.svelte      | 129 ++++++++++
 .../settings/controls/FieldSelect.svelte      |  50 +++-
 .../settings/controls/MultiFieldSelect.svelte | 108 +++++++-
 .../design/settings/fieldValidator.js         |   6 +-
 packages/client/manifest.json                 |  40 +--
 8 files changed, 474 insertions(+), 116 deletions(-)
 create mode 100644 packages/bbui/src/Tooltip/Context.svelte

diff --git a/packages/bbui/src/Form/Core/Multiselect.svelte b/packages/bbui/src/Form/Core/Multiselect.svelte
index 7c1900fe2e..959d5c99e0 100644
--- a/packages/bbui/src/Form/Core/Multiselect.svelte
+++ b/packages/bbui/src/Form/Core/Multiselect.svelte
@@ -9,8 +9,10 @@
   export let options = []
   export let getOptionLabel = option => option
   export let getOptionValue = option => option
-  export let getOptionsIcon = () => null
-  export let getOptionsIconToolip = () => null
+  export let getOptionIcon = () => null
+  export let getOptionIconTooltip = () => null
+  export let getOptionTooltip = () => null
+  export let isOptionEnabled = () => true
   export let readonly = false
   export let autocomplete = false
   export let sort = false
@@ -19,6 +21,7 @@
   export let customPopoverHeight
   export let open = false
   export let loading
+  export let align
 
   const dispatch = createEventDispatcher()
 
@@ -82,8 +85,10 @@
 
 <Picker
   on:loadMore
-  {getOptionsIcon}
-  {getOptionsIconTooltip}
+  {isOptionEnabled}
+  {getOptionIcon}
+  {getOptionIconTooltip}
+  {getOptionTooltip}
   {id}
   {disabled}
   {readonly}
@@ -101,4 +106,5 @@
   {autoWidth}
   {customPopoverHeight}
   {loading}
+  {align}
 />
diff --git a/packages/bbui/src/Form/Core/Picker.svelte b/packages/bbui/src/Form/Core/Picker.svelte
index f5c8398bec..d389abe60a 100644
--- a/packages/bbui/src/Form/Core/Picker.svelte
+++ b/packages/bbui/src/Form/Core/Picker.svelte
@@ -11,6 +11,13 @@
   import Tags from "../../Tags/Tags.svelte"
   import Tag from "../../Tags/Tag.svelte"
   import ProgressCircle from "../../ProgressCircle/ProgressCircle.svelte"
+  import {
+    default as AbsTooltip,
+    TooltipPosition,
+    TooltipType,
+  } from "../../Tooltip/AbsTooltip.svelte"
+  import ContextTooltip from "../../Tooltip/Context.svelte"
+
 
   export let id = null
   export let disabled = false
@@ -27,6 +34,7 @@
   export let getOptionValue = option => option
   export let getOptionIcon = () => null
   export let getOptionIconTooltip = () => null
+  export let getOptionTooltip = () => null
   export let useOptionIconImage = false
   export let getOptionColour = () => null
   export let getOptionSubtitle = () => null
@@ -48,6 +56,11 @@
   let button
   let component
 
+  let contextTooltipId = 0;
+  let contextTooltipAnchor = null
+  let contextTooltipOption = null
+  let contextTooltipVisible = false
+
   $: sortedOptions = getSortedOptions(options, getOptionLabel, sort)
   $: filteredOptions = getFilteredOptions(
     sortedOptions,
@@ -103,6 +116,29 @@
   onDestroy(() => {
     component?.removeEventListener("scroll", null)
   })
+
+  const handleMouseenter = (e, option) => {
+    contextTooltipId += 1;
+    const invokedContextTooltipId = contextTooltipId
+
+    setTimeout(() => {
+      if (contextTooltipId === invokedContextTooltipId) {
+        contextTooltipAnchor = e.target;
+        contextTooltipOption = option;
+        contextTooltipVisible = true;
+      } else {
+        console.log("not long enough");
+      }
+    }, 400)
+  }
+
+  const handleMouseleave = (e, option) => {
+    setTimeout(() => {
+      if (option === contextTooltipOption) {
+        contextTooltipVisible = false;
+      }
+    }, 600)
+  }
 </script>
 
 <button
@@ -158,83 +194,29 @@
   customHeight={customPopoverHeight}
 >
   <div
-    class="popover-content"
-    class:auto-width={autoWidth}
-    use:clickOutside={() => (open = false)}
-  >
-    {#if autocomplete}
-      <Search
-        value={searchTerm}
-        on:change={event => (searchTerm = event.detail)}
-        {disabled}
-        placeholder="Search"
-      />
-    {/if}
-    <ul class="spectrum-Menu" role="listbox" bind:this={component}>
-      {#if placeholderOption}
-        <li
-          class="spectrum-Menu-item placeholder"
-          class:is-selected={isPlaceholder}
-          role="option"
-          aria-selected="true"
-          tabindex="0"
-          on:click={() => onSelectOption(null)}
-        >
-          <span class="spectrum-Menu-itemLabel">{placeholderOption}</span>
-          <svg
-            class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
-            focusable="false"
-            aria-hidden="true"
-          >
-            <use xlink:href="#spectrum-css-icon-Checkmark100" />
-          </svg>
-        </li>
+      class="popover-content"
+      class:auto-width={autoWidth}
+      use:clickOutside={() => (open = false)}
+    >
+      {#if autocomplete}
+        <Search
+          value={searchTerm}
+          on:change={event => (searchTerm = event.detail)}
+          {disabled}
+          placeholder="Search"
+        />
       {/if}
-      {#if filteredOptions.length}
-        {#each filteredOptions as option, idx}
+      <ul class="spectrum-Menu" role="listbox" bind:this={component}>
+        {#if placeholderOption}
           <li
-            class="spectrum-Menu-item"
-            class:is-selected={isOptionSelected(getOptionValue(option, idx))}
+            class="spectrum-Menu-item placeholder"
+            class:is-selected={isPlaceholder}
             role="option"
             aria-selected="true"
             tabindex="0"
-            on:click={() => onSelectOption(getOptionValue(option, idx))}
-            class:is-disabled={!isOptionEnabled(option)}
+            on:click={() => onSelectOption(null)}
           >
-            {#if getOptionIcon(option, idx)}
-              <span class="option-extra icon">
-                {#if useoptioniconimage}
-                  <img
-                    src={getOptionIcon(option, idx)}
-                    alt="icon"
-                    width="15"
-                    height="15"
-                  />
-                {:else}
-                  <Icon size="S" name={getOptionIcon(option, idx)} />
-                {/if}
-              </span>
-            {/if}
-            {#if getOptionColour(option, idx)}
-              <span class="option-extra">
-                <StatusLight square color={getOptionColour(option, idx)} />
-              </span>
-            {/if}
-            <span class="spectrum-Menu-itemLabel">
-              {getOptionLabel(option, idx)}
-              {#if getOptionSubtitle(option, idx)}
-                <span class="subtitle-text">
-                  {getOptionSubtitle(option, idx)}
-                </span>
-              {/if}
-            </span>
-            {#if option.tag}
-              <span class="option-tag">
-                <Tags>
-                  <Tag icon="LockClosed">{option.tag}</Tag>
-                </Tags>
-              </span>
-            {/if}
+            <span class="spectrum-Menu-itemLabel">{placeholderOption}</span>
             <svg
               class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
               focusable="false"
@@ -243,25 +225,104 @@
               <use xlink:href="#spectrum-css-icon-Checkmark100" />
             </svg>
           </li>
-        {/each}
+        {/if}
+        {#if filteredOptions.length}
+          {#each filteredOptions as option, idx}
+              <li
+                on:mouseenter={(e) => handleMouseenter(e, option)}
+                on:mouseleave={(e) => handleMouseleave(e, option)}
+                class="spectrum-Menu-item"
+                class:is-selected={isOptionSelected(getOptionValue(option, idx))}
+                role="option"
+                aria-selected="true"
+                tabindex="0"
+                on:click={() => onSelectOption(getOptionValue(option, idx))}
+                class:is-disabled={!isOptionEnabled(option)}
+              >
+                {#if getOptionIcon(option, idx)}
+                  <span class="option-extra icon">
+                    {#if useOptionIconImage}
+                      <img
+                        src={getOptionIcon(option, idx)}
+                        alt="icon"
+                        width="15"
+                        height="15"
+                      />
+                    {:else}
+                      <Icon tooltip={getOptionIconTooltip(option)} size="S" name={getOptionIcon(option, idx)} />
+                    {/if}
+                  </span>
+                {/if}
+                {#if getOptionColour(option, idx)}
+                  <span class="option-extra">
+                    <StatusLight square color={getOptionColour(option, idx)} />
+                  </span>
+                {/if}
+                <span class="spectrum-Menu-itemLabel">
+                  {getOptionLabel(option, idx)}
+                  {#if getOptionSubtitle(option, idx)}
+                    <span class="subtitle-text">
+                      {getOptionSubtitle(option, idx)}
+                    </span>
+                  {/if}
+                </span>
+                {#if option.tag}
+                  <span class="option-tag">
+                    <Tags>
+                      <Tag icon="LockClosed">{option.tag}</Tag>
+                    </Tags>
+                  </span>
+                {/if}
+                <svg
+                  class="selectedIcon spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
+                  focusable="false"
+                  aria-hidden="true"
+                >
+                  <use xlink:href="#spectrum-css-icon-Checkmark100" />
+                </svg>
+              </li>
+          {/each}
+        {/if}
+      </ul>
+
+      {#if loading}
+        <div class="loading" class:loading--withAutocomplete={autocomplete}>
+          <ProgressCircle size="S" />
+        </div>
       {/if}
-    </ul>
 
-    {#if loading}
-      <div class="loading" class:loading--withAutocomplete={autocomplete}>
-        <ProgressCircle size="S" />
-      </div>
-    {/if}
-
-    {#if footer}
-      <div class="footer">
-        {footer}
-      </div>
-    {/if}
+      {#if footer}
+        <div class="footer">
+          {footer}
+        </div>
+      {/if}
+    </div>
+  </Popover>
+  <ContextTooltip
+    visible={contextTooltipVisible}
+    anchor={contextTooltipAnchor}
+  >
+  <div
+    class="tooltipContents"
+  >
+  {contextTooltipOption}
   </div>
-</Popover>
+  </ContextTooltip>
 
 <style>
+  .tooltipContents {
+    width: 300px;
+    background-color: red;
+  }
+
+  .spectrum-Menu {
+    display: block;
+  }
+
+  .spectrum-Menu:hover .context {
+    display: block;
+  }
+
   .spectrum-Picker {
     width: 100%;
     box-shadow: none;
@@ -332,7 +393,7 @@
     right: 2px;
     top: 2px;
   }
-  .popover-content :global(.spectrum-Search .spectrum-Textfield-icon) {
+    .popover-content :global(.spectrum-Search .spectrum-Textfield-icon) {
     top: 9px;
   }
 
diff --git a/packages/bbui/src/Form/Multiselect.svelte b/packages/bbui/src/Form/Multiselect.svelte
index b0246c8530..d99d3d23d5 100644
--- a/packages/bbui/src/Form/Multiselect.svelte
+++ b/packages/bbui/src/Form/Multiselect.svelte
@@ -13,12 +13,17 @@
   export let options = []
   export let getOptionLabel = option => option
   export let getOptionValue = option => option
+  export let getOptionIcon = () => null
+  export let getOptionIconTooltip = () => null
+  export let getOptionTooltip = () => null
+  export let isOptionEnabled = () => true
   export let sort = false
   export let autoWidth = false
   export let autocomplete = false
   export let searchTerm = null
   export let customPopoverHeight
   export let helpText = null
+  export let align
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -29,6 +34,10 @@
 
 <Field {helpText} {label} {labelPosition} {error}>
   <Multiselect
+    {isOptionEnabled}
+    {getOptionIcon}
+    {getOptionIconTooltip}
+  {getOptionTooltip}
     {error}
     {disabled}
     {readonly}
@@ -41,6 +50,7 @@
     {autoWidth}
     {autocomplete}
     {customPopoverHeight}
+    {align}
     bind:searchTerm
     on:change={onChange}
     on:click
diff --git a/packages/bbui/src/Tooltip/Context.svelte b/packages/bbui/src/Tooltip/Context.svelte
new file mode 100644
index 0000000000..d543eb0081
--- /dev/null
+++ b/packages/bbui/src/Tooltip/Context.svelte
@@ -0,0 +1,129 @@
+<script>
+  import Portal from "svelte-portal"
+
+  export let tooltip
+  export let anchor
+  export let visible = false
+  export let hovering = false
+
+  let targetX = 0
+  let targetY = 0
+
+  let animationId = 0;
+
+  let x = 0;
+  let y = 0;
+
+  const updatePositionOnVisibilityChange = (visible, hovering) => {
+    if (!visible && !hovering) {
+      x = 0;
+      y = 0;
+    }
+  }
+
+  const updatePosition = (anchor, tooltip) => {
+    if (anchor == null) {
+      return;
+    }
+
+    const rect = anchor.getBoundingClientRect();
+    const tooltipWidth = tooltip?.getBoundingClientRect()?.width ?? 0;
+
+    targetX = rect.x - tooltipWidth
+    targetY = rect.y
+    animationId += 1
+
+    if (x === 0 && y === 0) {
+      x = targetX
+      y = targetY
+    }
+  }
+
+  const animate = (invokedAnimationId, xRate = null, yRate = null) => {
+    if (invokedAnimationId !== animationId) {
+      console.log("CANCEL ANIMATION ", invokedAnimationId, " ", animationId);
+      return;
+    }
+    console.log("animating");
+
+    const animationDurationInFrames = 10;
+
+    const xDelta = targetX - x
+    const yDelta = targetY - y
+
+    if (xRate === null) {
+      xRate = Math.abs(xDelta) / animationDurationInFrames
+    }
+
+    if (yRate === null) {
+      yRate = Math.abs(yDelta) / animationDurationInFrames
+    }
+
+
+    if (xDelta === 0 && yDelta === 0) return;
+
+    if (
+      (xDelta > 0 && xDelta <= xRate) ||
+      (xDelta < 0 && xDelta >= -xRate)
+    ) {
+      x = targetX;
+    } else if (xDelta > 0) {
+      x = x + xRate;
+    } else if (xDelta < 0) {
+      x = x - xRate;
+    }
+
+    if (
+      (yDelta > 0 && yDelta <= yRate) ||
+      (yDelta < 0 && yDelta >= -yRate)
+    ) {
+      y = targetY;
+    } else if (yDelta > 0) {
+      y = y + yRate;
+    } else if (yDelta < 0) {
+      y = y - yRate;
+    }
+
+    requestAnimationFrame(() => animate(invokedAnimationId, xRate, yRate))
+  }
+
+  $: updatePosition(anchor, tooltip)
+  $: updatePositionOnVisibilityChange(visible, hovering)
+  $: requestAnimationFrame(() => animate(animationId))
+
+  const handleMouseenter = (e) => {
+    hovering = true;
+  }
+
+  const handleMouseleave = (e) => {
+    hovering = false;
+  }
+</script>
+
+<Portal target=".spectrum">
+  <div
+    bind:this={tooltip} 
+    on:mouseenter={handleMouseenter}
+    on:mouseleave={handleMouseleave}
+    style:top={`${y}px`}
+    style:left={`${x}px`}
+    class="tooltip"
+    class:visible={visible || hovering}
+  >
+    <slot />
+  </div>
+</Portal>
+
+<style>
+  .tooltip {
+    position: absolute;
+    z-index: 9999;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .visible {
+    opacity: 1;
+    pointer-events: auto;
+  }
+</style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldSelect.svelte b/packages/builder/src/components/design/settings/controls/FieldSelect.svelte
index e50a0e8030..187bfa190d 100644
--- a/packages/builder/src/components/design/settings/controls/FieldSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldSelect.svelte
@@ -3,14 +3,36 @@
   import { getDatasourceForProvider, getSchemaForDatasource } from "dataBinding"
   import { selectedScreen } from "stores/builder"
   import { createEventDispatcher } from "svelte"
+  import { validators, supported, partialSupport, unsupported } from "../fieldValidator";
 
   export let componentInstance = {}
   export let value = ""
   export let placeholder
+  export let fieldValidator
+
+  $: {
+    console.log(fieldValidator);
+  }
+
+  const getFieldSupport = (schema, fieldValidator) => {
+    if (fieldValidator == null) {
+      return {}
+    }
+
+    const validator = validators[fieldValidator];
+
+    const fieldSupport = {}
+    Object.entries(schema || {}).forEach(([key, value]) => {
+      fieldSupport[key] = validator(value)
+    })
+
+    return fieldSupport
+  }
 
   const dispatch = createEventDispatcher()
   $: datasource = getDatasourceForProvider($selectedScreen, componentInstance)
   $: schema = getSchemaForDatasource($selectedScreen, datasource).schema
+  $: fieldSupport = getFieldSupport(schema, fieldValidator);
   $: options = Object.keys(schema || {})
   $: boundValue = getValidValue(value, options)
 
@@ -32,6 +54,32 @@
     boundValue = getValidValue(value.detail, options)
     dispatch("change", boundValue)
   }
+
+  const getOptionIcon = option => {
+    const support = fieldSupport[option]?.support;
+
+    if (support == null) return null;
+    if (support === supported) return null
+
+    if (support === partialSupport) return "Warning"
+    if (support === unsupported) return "Error"
+  }
+
+  const getOptionIconTooltip = option => {
+  }
+
+  const isOptionEnabled = option => {
+    const support = fieldSupport[option]?.support;
+
+    if (support == null) return true
+    if (support == unsupported) return false
+
+    return true
+  }
 </script>
 
-<Select {placeholder} value={boundValue} on:change={onChange} {options} />
+<Select
+  {isOptionEnabled}
+  {getOptionIcon}
+  {getOptionIconTooltip}
+  {placeholder} value={boundValue} on:change={onChange} {options} />
diff --git a/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte b/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
index d0224fb1db..b2a308596c 100644
--- a/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
@@ -3,17 +3,60 @@
   import { getDatasourceForProvider, getSchemaForDatasource } from "dataBinding"
   import { selectedScreen } from "stores/builder"
   import { createEventDispatcher } from "svelte"
+  import { validators, supported, partialSupport, unsupported } from "../fieldValidator";
 
   export let componentInstance = {}
   export let value = ""
   export let placeholder
+  export let fieldValidator
+
+  const TypeIconMap = {
+    text: "Text",
+    options: "Dropdown",
+    datetime: "Date",
+    barcodeqr: "Camera",
+    longform: "TextAlignLeft",
+    array: "Dropdown",
+    number: "123",
+    boolean: "Boolean",
+    attachment: "AppleFiles",
+    link: "DataCorrelated",
+    formula: "Calculator",
+    json: "Brackets",
+    bigint: "TagBold",
+    bb_reference: {
+      user: "User",
+      users: "UserGroup",
+    },
+  }
+
+
+  const getFieldSupport = (schema, fieldValidator) => {
+    if (fieldValidator == null) {
+      return {}
+    }
+
+    const validator = validators[fieldValidator];
+
+    const fieldSupport = {}
+    Object.entries(schema || {}).forEach(([key, value]) => {
+      fieldSupport[key] = validator(value)
+    })
+
+    return fieldSupport
+  }
 
   const dispatch = createEventDispatcher()
   $: datasource = getDatasourceForProvider($selectedScreen, componentInstance)
   $: schema = getSchemaForDatasource($selectedScreen, datasource).schema
   $: options = Object.keys(schema || {})
+  $: fieldSupport = getFieldSupport(schema, fieldValidator);
   $: boundValue = getValidOptions(value, options)
 
+  $: {
+    console.log(schema)
+  }
+
   const getValidOptions = (selectedOptions, allOptions) => {
     // Fix the hardcoded default string value
     if (!Array.isArray(selectedOptions)) {
@@ -26,6 +69,69 @@
     boundValue = getValidOptions(value.detail, options)
     dispatch("change", boundValue)
   }
+
+  const foo = () => {
+    const support = fieldSupport[option]?.support;
+
+    if (support == null) return null;
+    if (support === supported) return null
+
+    if (support === partialSupport) return "AlertCircleFilled"
+    if (support === unsupported) return "AlertCircleFilled"
+  }
+
+  const getOptionIcon = optionKey => {
+    const option = schema[optionKey]
+    if (option.autocolumn) {
+      return "MagicWand"
+    }
+    const { type, subtype } = option
+
+    const result =
+      typeof TypeIconMap[type] === "object" && subtype
+        ? TypeIconMap[type][subtype]
+        : TypeIconMap[type]
+
+    return result || "Text"
+  }
+
+  const getOptionIconTooltip = optionKey => {
+    const option = schema[optionKey]
+
+    return option.type;
+  }
+
+  const getOptionTooltip = optionKey => {
+    console.log(optionKey)
+    const support = fieldSupport[optionKey]?.support;
+    const message = fieldSupport[optionKey]?.message;
+
+    if (support === unsupported) return message
+
+    return null
+  }
+
+  const isOptionEnabled = optionKey => {
+    // Remain enabled if already selected, so it can be deselected
+    if (value?.includes(optionKey)) return true
+    const support = fieldSupport[optionKey]?.support;
+
+    if (support == null) return true
+    if (support === unsupported) return false
+
+    return true
+  }
 </script>
 
-<Multiselect {placeholder} value={boundValue} on:change={setValue} {options} />
+<Multiselect
+  iconPosition="right"
+  {isOptionEnabled}
+  {getOptionIcon}
+  {getOptionIconTooltip}
+  {getOptionTooltip}
+  {placeholder}
+  value={boundValue}
+  on:change={setValue}
+  {options}
+  align="right"
+/>
diff --git a/packages/builder/src/components/design/settings/fieldValidator.js b/packages/builder/src/components/design/settings/fieldValidator.js
index 7d0523b027..8a3eb89691 100644
--- a/packages/builder/src/components/design/settings/fieldValidator.js
+++ b/packages/builder/src/components/design/settings/fieldValidator.js
@@ -2,7 +2,7 @@ export const unsupported = Symbol("values-validator-unsupported")
 export const partialSupport = Symbol("values-validator-partial-support")
 export const supported = Symbol("values-validator-supported")
 
-const validatorMap = {
+export const validators = {
   chart: (fieldSchema) => {
     if (
       fieldSchema.type === "json" ||
@@ -14,7 +14,7 @@ const validatorMap = {
     ) {
       return {
         support: unsupported,
-        message: "This field cannot be used as a chart value"
+        message: `"${fieldSchema.type}" columns cannot be used as a chart value long long long long long long long long long`
       }
     }
 
@@ -38,5 +38,3 @@ const validatorMap = {
     }
   }
 };
-export default validatorMap;
-
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index ee092a3a86..faec6e374f 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -1629,7 +1629,7 @@
         "required": true
       },
       {
-        "type": "chartmultifield",
+        "type": "multifield",
         "label": "Data columns",
         "key": "valueColumns",
         "dependsOn": "dataProvider",
@@ -1788,7 +1788,7 @@
         "required": true
       },
       {
-        "type": "chartmultifield",
+        "type": "multifield",
         "label": "Data columns",
         "key": "valueColumns",
         "dependsOn": "dataProvider",
@@ -1941,7 +1941,7 @@
         "required": true
       },
       {
-        "type": "chartmultifield",
+        "type": "multifield",
         "label": "Data columns",
         "key": "valueColumns",
         "dependsOn": "dataProvider",
@@ -2106,7 +2106,7 @@
         "required": true
       },
       {
-        "type": "chartfield",
+        "type": "field",
         "label": "Data column",
         "key": "valueColumn",
         "dependsOn": "dataProvider",
@@ -2235,7 +2235,7 @@
         "required": true
       },
       {
-        "type": "chartfield",
+        "type": "field",
         "label": "Data columns",
         "key": "valueColumn",
         "dependsOn": "dataProvider",
@@ -2364,28 +2364,28 @@
         "required": true
       },
       {
-        "type": "chartfield",
+        "type": "field",
         "label": "Open column",
         "key": "openColumn",
         "dependsOn": "dataProvider",
         "required": true
       },
       {
-        "type": "chartfield",
+        "type": "field",
         "label": "Close column",
         "key": "closeColumn",
         "dependsOn": "dataProvider",
         "required": true
       },
       {
-        "type": "chartfield",
+        "type": "field",
         "label": "High column",
         "key": "highColumn",
         "dependsOn": "dataProvider",
         "required": true
       },
       {
-        "type": "chartfield",
+        "type": "field",
         "label": "Low column",
         "key": "lowColumn",
         "dependsOn": "dataProvider",
@@ -2449,7 +2449,7 @@
         "required": true
       },
       {
-        "type": "chartfield",
+        "type": "field",
         "label": "Data column",
         "key": "valueColumn",
         "dependsOn": "dataProvider",
@@ -5266,7 +5266,7 @@
             "required": true
           },
           {
-            "type": "chartfield",
+            "type": "field",
             "label": "Data column",
             "key": "valueColumn",
             "dependsOn": "dataSource",
@@ -5291,7 +5291,7 @@
             "required": true
           },
           {
-            "type": "chartfield",
+            "type": "field",
             "label": "Data column",
             "key": "valueColumn",
             "dependsOn": "dataSource",
@@ -5316,7 +5316,7 @@
             "required": true
           },
           {
-            "type": "chartmultifield",
+            "type": "multifield",
             "label": "Data columns",
             "key": "valueColumns",
             "dependsOn": "dataSource",
@@ -5363,7 +5363,7 @@
         },
         "settings": [
           {
-            "type": "chartfield",
+            "type": "field",
             "label": "Value column",
             "key": "valueColumn",
             "dependsOn": "dataSource",
@@ -5411,7 +5411,7 @@
             "required": true
           },
           {
-            "type": "chartmultifield",
+            "type": "multifield",
             "label": "Data columns",
             "key": "valueColumns",
             "dependsOn": "dataSource",
@@ -5460,7 +5460,7 @@
             "required": true
           },
           {
-            "type": "chartmultifield",
+            "type": "multifield",
             "label": "Data columns",
             "key": "valueColumns",
             "dependsOn": "dataSource",
@@ -5521,28 +5521,28 @@
             "required": true
           },
           {
-            "type": "chartfield",
+            "type": "field",
             "label": "Open column",
             "key": "openColumn",
             "dependsOn": "dataSource",
             "required": true
           },
           {
-            "type": "chartfield",
+            "type": "field",
             "label": "Close column",
             "key": "closeColumn",
             "dependsOn": "dataSource",
             "required": true
           },
           {
-            "type": "chartfield",
+            "type": "field",
             "label": "High column",
             "key": "highColumn",
             "dependsOn": "dataSource",
             "required": true
           },
           {
-            "type": "chartfield",
+            "type": "field",
             "label": "Low column",
             "key": "lowColumn",
             "dependsOn": "dataSource",

From 6fa66aae54f297a46a2c9887c055b54447d12078 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Mon, 1 Apr 2024 12:47:09 +0100
Subject: [PATCH 003/123] use animation time isntead of id

---
 packages/bbui/src/Form/Core/Picker.svelte |  2 +-
 packages/bbui/src/Tooltip/Context.svelte  | 16 +++++++++-------
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/packages/bbui/src/Form/Core/Picker.svelte b/packages/bbui/src/Form/Core/Picker.svelte
index d389abe60a..fa0325e690 100644
--- a/packages/bbui/src/Form/Core/Picker.svelte
+++ b/packages/bbui/src/Form/Core/Picker.svelte
@@ -129,7 +129,7 @@
       } else {
         console.log("not long enough");
       }
-    }, 400)
+    }, 200)
   }
 
   const handleMouseleave = (e, option) => {
diff --git a/packages/bbui/src/Tooltip/Context.svelte b/packages/bbui/src/Tooltip/Context.svelte
index d543eb0081..bd99db61f0 100644
--- a/packages/bbui/src/Tooltip/Context.svelte
+++ b/packages/bbui/src/Tooltip/Context.svelte
@@ -9,7 +9,7 @@
   let targetX = 0
   let targetY = 0
 
-  let animationId = 0;
+  let animationStartTime = 0;
 
   let x = 0;
   let y = 0;
@@ -31,7 +31,7 @@
 
     targetX = rect.x - tooltipWidth
     targetY = rect.y
-    animationId += 1
+    animationStartTime = document.timeline.currentTime
 
     if (x === 0 && y === 0) {
       x = targetX
@@ -39,14 +39,16 @@
     }
   }
 
-  const animate = (invokedAnimationId, xRate = null, yRate = null) => {
-    if (invokedAnimationId !== animationId) {
-      console.log("CANCEL ANIMATION ", invokedAnimationId, " ", animationId);
+  const animate = (invokedAnimationStartTime, frameTime, xRate = null, yRate = null) => {
+    console.log(frameTime);
+    if (invokedAnimationStartTime !== animationStartTime) {
+      console.log("CANCEL ANIMATION ", invokedAnimationStartTime, " ", animationStartTime);
       return;
     }
     console.log("animating");
 
     const animationDurationInFrames = 10;
+    const easingRate = 2;
 
     const xDelta = targetX - x
     const yDelta = targetY - y
@@ -84,12 +86,12 @@
       y = y - yRate;
     }
 
-    requestAnimationFrame(() => animate(invokedAnimationId, xRate, yRate))
+    requestAnimationFrame((newFrameTime) => animate(invokedAnimationStartTime, newFrameTime, xRate, yRate))
   }
 
   $: updatePosition(anchor, tooltip)
   $: updatePositionOnVisibilityChange(visible, hovering)
-  $: requestAnimationFrame(() => animate(animationId))
+  $: requestAnimationFrame((frameTime) => animate(animationStartTime, frameTime, null, null))
 
   const handleMouseenter = (e) => {
     hovering = true;

From 1716321bef13753648c216733b0b753c047c3847 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Mon, 1 Apr 2024 17:14:18 +0100
Subject: [PATCH 004/123] wip

---
 packages/bbui/src/Form/Core/Picker.svelte |  10 ++-
 packages/bbui/src/Tooltip/Context.svelte  | 105 ++++++++++++----------
 2 files changed, 66 insertions(+), 49 deletions(-)

diff --git a/packages/bbui/src/Form/Core/Picker.svelte b/packages/bbui/src/Form/Core/Picker.svelte
index fa0325e690..87827dabbf 100644
--- a/packages/bbui/src/Form/Core/Picker.svelte
+++ b/packages/bbui/src/Form/Core/Picker.svelte
@@ -17,6 +17,7 @@
     TooltipType,
   } from "../../Tooltip/AbsTooltip.svelte"
   import ContextTooltip from "../../Tooltip/Context.svelte"
+  import { fade } from 'svelte/transition';
 
 
   export let id = null
@@ -59,6 +60,7 @@
   let contextTooltipId = 0;
   let contextTooltipAnchor = null
   let contextTooltipOption = null
+  let previousContextTooltipOption = null
   let contextTooltipVisible = false
 
   $: sortedOptions = getSortedOptions(options, getOptionLabel, sort)
@@ -124,10 +126,9 @@
     setTimeout(() => {
       if (contextTooltipId === invokedContextTooltipId) {
         contextTooltipAnchor = e.target;
+        previousContextTooltipOption = contextTooltipOption;
         contextTooltipOption = option;
         contextTooltipVisible = true;
-      } else {
-        console.log("not long enough");
       }
     }, 200)
   }
@@ -307,6 +308,11 @@
   >
   {contextTooltipOption}
   </div>
+  <div slot="previous"
+    class="tooltipContents"
+  >
+  {previousContextTooltipOption}
+  </div>
   </ContextTooltip>
 
 <style>
diff --git a/packages/bbui/src/Tooltip/Context.svelte b/packages/bbui/src/Tooltip/Context.svelte
index bd99db61f0..71e84e6aae 100644
--- a/packages/bbui/src/Tooltip/Context.svelte
+++ b/packages/bbui/src/Tooltip/Context.svelte
@@ -1,18 +1,20 @@
 <script>
   import Portal from "svelte-portal"
+  import { fade } from 'svelte/transition';
 
   export let tooltip
   export let anchor
   export let visible = false
   export let hovering = false
 
-  let targetX = 0
-  let targetY = 0
-
-  let animationStartTime = 0;
+  let startX = 0
+  let startY = 0
+  let endX = 0
+  let endY = 0
 
   let x = 0;
   let y = 0;
+  let animationStartTime = 0;
 
   const updatePositionOnVisibilityChange = (visible, hovering) => {
     if (!visible && !hovering) {
@@ -29,69 +31,77 @@
     const rect = anchor.getBoundingClientRect();
     const tooltipWidth = tooltip?.getBoundingClientRect()?.width ?? 0;
 
-    targetX = rect.x - tooltipWidth
-    targetY = rect.y
+    startX = x
+    startY = y
+
+    endX = rect.x - tooltipWidth
+    endY = rect.y
+
     animationStartTime = document.timeline.currentTime
 
     if (x === 0 && y === 0) {
-      x = targetX
-      y = targetY
+      startX = endX
+      startY = endY
     }
   }
 
-  const animate = (invokedAnimationStartTime, frameTime, xRate = null, yRate = null) => {
-    console.log(frameTime);
+  const getNormalizedTime = (startTime, endTime, currentTime) => {
+    const distanceFromStart = currentTime - startTime;
+    const timeDiff = endTime - startTime;
+
+    return distanceFromStart / timeDiff;
+  }
+
+  const cubicBezierInterpolation = (p1, p2, p3, p4, t) => {
+    return Math.pow(1 - t, 3) * p1 +
+    3 * Math.pow(1 - t, 2) * t * p2 +
+    3 * (1 - t) * Math.pow(t, 2) * p3 +
+    Math.pow(t, 3) * p4;
+  }
+
+  // Made to match the interface of the css bezier curve function
+  const cubicBezierEasing = (a, b, c, d, t) => {
+    // CSS bezier curve function implicitly provides p1 and p4
+    const p1 = { x: 0, y: 0 }
+    const p2 = { x: a, y: b }
+    const p3 = { x: c, y: d }
+    const p4 = { x: 1, y: 1 }
+
+    return {
+      x: cubicBezierInterpolation(p1.x, p2.x, p3.x, p4.x, t),
+      y: cubicBezierInterpolation(p1.y, p2.y, p3.y, p4.y, t)
+    }
+  }
+
+  const linearInterpolation = (p1, p2, t) => {
+    return p1 + t * (p2 - p1);
+  }
+
+  const animate = (invokedAnimationStartTime, frameTime) => {
     if (invokedAnimationStartTime !== animationStartTime) {
       console.log("CANCEL ANIMATION ", invokedAnimationStartTime, " ", animationStartTime);
       return;
     }
-    console.log("animating");
 
-    const animationDurationInFrames = 10;
-    const easingRate = 2;
+    const animationDuration = 200
+    const normalizedTime = getNormalizedTime(invokedAnimationStartTime, invokedAnimationStartTime + animationDuration, frameTime)
 
-    const xDelta = targetX - x
-    const yDelta = targetY - y
-
-    if (xRate === null) {
-      xRate = Math.abs(xDelta) / animationDurationInFrames
+    if (normalizedTime >= 1) {
+      console.log("exiting");
+      return;
     }
 
-    if (yRate === null) {
-      yRate = Math.abs(yDelta) / animationDurationInFrames
-    }
+    const easing = cubicBezierEasing(0.25, 0.1, 0.25, 1, normalizedTime)
 
+    x = linearInterpolation(startX, endX, easing.x)
+    y = linearInterpolation(startY, endY, easing.y)
 
-    if (xDelta === 0 && yDelta === 0) return;
-
-    if (
-      (xDelta > 0 && xDelta <= xRate) ||
-      (xDelta < 0 && xDelta >= -xRate)
-    ) {
-      x = targetX;
-    } else if (xDelta > 0) {
-      x = x + xRate;
-    } else if (xDelta < 0) {
-      x = x - xRate;
-    }
-
-    if (
-      (yDelta > 0 && yDelta <= yRate) ||
-      (yDelta < 0 && yDelta >= -yRate)
-    ) {
-      y = targetY;
-    } else if (yDelta > 0) {
-      y = y + yRate;
-    } else if (yDelta < 0) {
-      y = y - yRate;
-    }
-
-    requestAnimationFrame((newFrameTime) => animate(invokedAnimationStartTime, newFrameTime, xRate, yRate))
+    requestAnimationFrame((newFrameTime) => animate(invokedAnimationStartTime, newFrameTime))
   }
 
   $: updatePosition(anchor, tooltip)
   $: updatePositionOnVisibilityChange(visible, hovering)
-  $: requestAnimationFrame((frameTime) => animate(animationStartTime, frameTime, null, null))
+  $: requestAnimationFrame((frameTime) => animate(animationStartTime, frameTime))
 
   const handleMouseenter = (e) => {
     hovering = true;
@@ -114,6 +124,7 @@
   >
     <slot />
   </div>
+  <slot name="previous" />
 </Portal>
 
 <style>

From fb25c08523e655e8936df2e34bfe57b86dddcdf9 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Tue, 2 Apr 2024 10:54:20 +0100
Subject: [PATCH 005/123] going to try implementing in css

---
 packages/bbui/src/Form/Core/Picker.svelte |   5 +-
 packages/bbui/src/Tooltip/Context.svelte  | 131 +++++++++++++++++-----
 2 files changed, 105 insertions(+), 31 deletions(-)

diff --git a/packages/bbui/src/Form/Core/Picker.svelte b/packages/bbui/src/Form/Core/Picker.svelte
index 87827dabbf..0221c0fbdd 100644
--- a/packages/bbui/src/Form/Core/Picker.svelte
+++ b/packages/bbui/src/Form/Core/Picker.svelte
@@ -317,8 +317,11 @@
 
 <style>
   .tooltipContents {
-    width: 300px;
     background-color: red;
+    max-width: 200px;
+    text-wrap: wrap;
+    display: inline-block;
+    word-break: break-all;
   }
 
   .spectrum-Menu {
diff --git a/packages/bbui/src/Tooltip/Context.svelte b/packages/bbui/src/Tooltip/Context.svelte
index 71e84e6aae..4aa77a7fbb 100644
--- a/packages/bbui/src/Tooltip/Context.svelte
+++ b/packages/bbui/src/Tooltip/Context.svelte
@@ -2,7 +2,8 @@
   import Portal from "svelte-portal"
   import { fade } from 'svelte/transition';
 
-  export let tooltip
+  export let currentTooltip
+  export let previousTooltip
   export let anchor
   export let visible = false
   export let hovering = false
@@ -12,37 +13,63 @@
   let endX = 0
   let endY = 0
 
+  let currentTooltipWidth = 0
+  let currentTooltipHeight = 0
+
+  let previousTooltipWidth = 0
+  let previousTooltipHeight = 0
+
   let x = 0;
   let y = 0;
+  let w = 0;
+  let h = 0;
+
   let animationStartTime = 0;
 
   const updatePositionOnVisibilityChange = (visible, hovering) => {
     if (!visible && !hovering) {
       x = 0;
       y = 0;
-    }
-  }
 
-  const updatePosition = (anchor, tooltip) => {
-    if (anchor == null) {
-      return;
-    }
+      previousTooltipWidth = 0
+      previousTooltipHeight = 0
+    } }
 
-    const rect = anchor.getBoundingClientRect();
-    const tooltipWidth = tooltip?.getBoundingClientRect()?.width ?? 0;
+  const updatePosition = (anchor, currentTooltip, previousTooltip) => {
+    requestAnimationFrame(() => {
+      if (anchor == null || currentTooltip == null || previousTooltip == null) {
+        return;
+      }
 
-    startX = x
-    startY = y
+      const rect = anchor.getBoundingClientRect();
 
-    endX = rect.x - tooltipWidth
-    endY = rect.y
+      currentTooltipWidth = currentTooltip.clientWidth
+      currentTooltipHeight = currentTooltip.clientHeight
 
-    animationStartTime = document.timeline.currentTime
+      previousTooltipWidth = previousTooltip.clientWidth
+      previousTooltipHeight = previousTooltip.clientHeight
 
-    if (x === 0 && y === 0) {
-      startX = endX
-      startY = endY
-    }
+      if (previousTooltipWidth === 0) {
+        previousTooltipWidth = currentTooltipWidth;
+      }
+
+      if (previousTooltipHeight === 0) {
+        previousTooltipHeight = currentTooltipHeight;
+      }
+
+      startX = x
+      startY = y
+
+      endX = rect.x - currentTooltipWidth
+      endY = rect.y
+
+      animationStartTime = document.timeline.currentTime
+
+      if (x === 0 && y === 0) {
+        startX = endX
+        startY = endY
+      }
+    })
   }
 
   const getNormalizedTime = (startTime, endTime, currentTime) => {
@@ -52,11 +79,13 @@
     return distanceFromStart / timeDiff;
   }
 
-  const cubicBezierInterpolation = (p1, p2, p3, p4, t) => {
-    return Math.pow(1 - t, 3) * p1 +
-    3 * Math.pow(1 - t, 2) * t * p2 +
-    3 * (1 - t) * Math.pow(t, 2) * p3 +
-    Math.pow(t, 3) * p4;
+  const cubicBezierInterpolation = (p1, p2, p3, p4, currentTime) => {
+    return (
+      (Math.pow(1 - currentTime, 3) * p1) +
+      (3 * Math.pow(1 - currentTime, 2) * currentTime * p2) +
+      (3 * (1 - currentTime) * Math.pow(currentTime, 2) * p3) +
+      (Math.pow(currentTime, 3) * p4)
+    )
   }
 
   // Made to match the interface of the css bezier curve function
@@ -83,7 +112,7 @@
       return;
     }
 
-    const animationDuration = 200
+    const animationDuration = 300
     const normalizedTime = getNormalizedTime(invokedAnimationStartTime, invokedAnimationStartTime + animationDuration, frameTime)
 
     if (normalizedTime >= 1) {
@@ -95,11 +124,16 @@
 
     x = linearInterpolation(startX, endX, easing.x)
     y = linearInterpolation(startY, endY, easing.y)
+    w = linearInterpolation(previousTooltipWidth, currentTooltipWidth, easing.x)
+    console.log(currentTooltipWidth);
+    console.log(previousTooltipWidth);
+    console.log(w);
+    console.log("")
 
     requestAnimationFrame((newFrameTime) => animate(invokedAnimationStartTime, newFrameTime))
   }
 
-  $: updatePosition(anchor, tooltip)
+  $: updatePosition(anchor, currentTooltip, previousTooltip)
   $: updatePositionOnVisibilityChange(visible, hovering)
   $: requestAnimationFrame((frameTime) => animate(animationStartTime, frameTime))
 
@@ -114,29 +148,66 @@
 
 <Portal target=".spectrum">
   <div
-    bind:this={tooltip} 
     on:mouseenter={handleMouseenter}
     on:mouseleave={handleMouseleave}
-    style:top={`${y}px`}
+    style:width={`${w}px`}
+    style:height={`${currentTooltipHeight}px`}
     style:left={`${x}px`}
+    style:top={`${y}px`}
     class="tooltip"
     class:visible={visible || hovering}
   >
-    <slot />
+    <div class="screenSize">
+      <div
+        bind:this={currentTooltip}
+        class="currentContent"
+        style:left={`${endX - x}px`}
+        style:top={`${endY - y}px`}
+      >
+        <slot />
+      </div>
+    </div>
+    <div class="screenSize">
+      <div
+        bind:this={previousTooltip}
+        class="previousContent"
+        style:left={`${startX - x}px`}
+        style:top={`${startY - y}px`}
+      >
+        <slot name="previous"/>
+      </div>
+    </div>
   </div>
-  <slot name="previous" />
 </Portal>
 
 <style>
+  .screenSize {
+    position: absolute;
+    width: 100vw;
+    height: 100vh;
+  }
+
   .tooltip {
     position: absolute;
     z-index: 9999;
-    opacity: 0;
     pointer-events: none;
+    background-color: red;
+    opacity: 0;
+    overflow: hidden;
   }
 
   .visible {
     opacity: 1;
     pointer-events: auto;
   }
+
+  .currentContent {
+    position: absolute;
+    z-index: 10000;
+  }
+
+  .previousContent {
+    position: absolute;
+    z-index: 10000;
+  }
 </style>

From 108f9667f66984207789ad211ebe561f682279c6 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Tue, 2 Apr 2024 12:07:11 +0100
Subject: [PATCH 006/123] css impl working i think

---
 packages/bbui/src/Tooltip/Context.svelte | 71 ++++++++++++------------
 1 file changed, 34 insertions(+), 37 deletions(-)

diff --git a/packages/bbui/src/Tooltip/Context.svelte b/packages/bbui/src/Tooltip/Context.svelte
index 4aa77a7fbb..db5d5076e4 100644
--- a/packages/bbui/src/Tooltip/Context.svelte
+++ b/packages/bbui/src/Tooltip/Context.svelte
@@ -8,10 +8,10 @@
   export let visible = false
   export let hovering = false
 
-  let startX = 0
-  let startY = 0
-  let endX = 0
-  let endY = 0
+  let previousX = 0
+  let previousY = 0
+  let currentX = 0
+  let currentY = 0
 
   let currentTooltipWidth = 0
   let currentTooltipHeight = 0
@@ -19,17 +19,10 @@
   let previousTooltipWidth = 0
   let previousTooltipHeight = 0
 
-  let x = 0;
-  let y = 0;
-  let w = 0;
-  let h = 0;
-
-  let animationStartTime = 0;
-
   const updatePositionOnVisibilityChange = (visible, hovering) => {
     if (!visible && !hovering) {
-      x = 0;
-      y = 0;
+      previousX = 0;
+      previousY = 0;
 
       previousTooltipWidth = 0
       previousTooltipHeight = 0
@@ -57,21 +50,24 @@
         previousTooltipHeight = currentTooltipHeight;
       }
 
-      startX = x
-      startY = y
+      previousX = currentX
+      previousY = currentY
 
-      endX = rect.x - currentTooltipWidth
-      endY = rect.y
+      // - width to align to left side of anchor
+      currentX = rect.x - currentTooltipWidth
+      currentY = rect.y
 
-      animationStartTime = document.timeline.currentTime
+      if (previousX === 0) {
+        previousX = currentX
+      }
 
-      if (x === 0 && y === 0) {
-        startX = endX
-        startY = endY
+      if (previousY === 0) {
+        previousY = currentY
       }
     })
   }
 
+  /*
   const getNormalizedTime = (startTime, endTime, currentTime) => {
     const distanceFromStart = currentTime - startTime;
     const timeDiff = endTime - startTime;
@@ -125,17 +121,13 @@
     x = linearInterpolation(startX, endX, easing.x)
     y = linearInterpolation(startY, endY, easing.y)
     w = linearInterpolation(previousTooltipWidth, currentTooltipWidth, easing.x)
-    console.log(currentTooltipWidth);
-    console.log(previousTooltipWidth);
-    console.log(w);
-    console.log("")
 
     requestAnimationFrame((newFrameTime) => animate(invokedAnimationStartTime, newFrameTime))
-  }
+  }*/
 
   $: updatePosition(anchor, currentTooltip, previousTooltip)
   $: updatePositionOnVisibilityChange(visible, hovering)
-  $: requestAnimationFrame((frameTime) => animate(animationStartTime, frameTime))
+  /*$: requestAnimationFrame((frameTime) => animate(animationStartTime, frameTime))*/
 
   const handleMouseenter = (e) => {
     hovering = true;
@@ -150,29 +142,30 @@
   <div
     on:mouseenter={handleMouseenter}
     on:mouseleave={handleMouseleave}
-    style:width={`${w}px`}
+    style:width={`${currentTooltipWidth}px`}
     style:height={`${currentTooltipHeight}px`}
-    style:left={`${x}px`}
-    style:top={`${y}px`}
+    style:left={`${currentX}px`}
+    style:top={`${currentY}px`}
     class="tooltip"
     class:visible={visible || hovering}
   >
-    <div class="screenSize">
+  <div class="screenSize"
+    style:left={`${-currentX}px`}
+    style:top={`${-currentY}px`}
+    >
       <div
+        style:left={`${currentX}px`}
+        style:top={`${currentY}px`}
         bind:this={currentTooltip}
         class="currentContent"
-        style:left={`${endX - x}px`}
-        style:top={`${endY - y}px`}
       >
         <slot />
       </div>
-    </div>
-    <div class="screenSize">
       <div
         bind:this={previousTooltip}
         class="previousContent"
-        style:left={`${startX - x}px`}
-        style:top={`${startY - y}px`}
+        style:left={`${previousX}px`}
+        style:top={`${previousY}px`}
       >
         <slot name="previous"/>
       </div>
@@ -181,10 +174,13 @@
 </Portal>
 
 <style>
+  /* Screen width absolute parent for tooltip content so that'd the applied width and height 
+     to the root doesn't affect their size */
   .screenSize {
     position: absolute;
     width: 100vw;
     height: 100vh;
+    transition: top 300ms ease-in, left 300ms ease-in;
   }
 
   .tooltip {
@@ -194,6 +190,7 @@
     background-color: red;
     opacity: 0;
     overflow: hidden;
+    transition: width 300ms ease-in, height 300ms ease-in, top 300ms ease-in, left 300ms ease-in;
   }
 
   .visible {

From 8631b3ae75bb7eb094240e567759623b2b329b13 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Tue, 2 Apr 2024 12:10:26 +0100
Subject: [PATCH 007/123] refactor some

---
 packages/bbui/src/Tooltip/Context.svelte | 25 +++---------------------
 1 file changed, 3 insertions(+), 22 deletions(-)

diff --git a/packages/bbui/src/Tooltip/Context.svelte b/packages/bbui/src/Tooltip/Context.svelte
index db5d5076e4..10549d7b3a 100644
--- a/packages/bbui/src/Tooltip/Context.svelte
+++ b/packages/bbui/src/Tooltip/Context.svelte
@@ -3,7 +3,6 @@
   import { fade } from 'svelte/transition';
 
   export let currentTooltip
-  export let previousTooltip
   export let anchor
   export let visible = false
   export let hovering = false
@@ -16,21 +15,15 @@
   let currentTooltipWidth = 0
   let currentTooltipHeight = 0
 
-  let previousTooltipWidth = 0
-  let previousTooltipHeight = 0
-
   const updatePositionOnVisibilityChange = (visible, hovering) => {
     if (!visible && !hovering) {
       previousX = 0;
       previousY = 0;
-
-      previousTooltipWidth = 0
-      previousTooltipHeight = 0
     } }
 
-  const updatePosition = (anchor, currentTooltip, previousTooltip) => {
+  const updatePosition = (anchor, currentTooltip) => {
     requestAnimationFrame(() => {
-      if (anchor == null || currentTooltip == null || previousTooltip == null) {
+      if (anchor == null || currentTooltip == null) {
         return;
       }
 
@@ -39,17 +32,6 @@
       currentTooltipWidth = currentTooltip.clientWidth
       currentTooltipHeight = currentTooltip.clientHeight
 
-      previousTooltipWidth = previousTooltip.clientWidth
-      previousTooltipHeight = previousTooltip.clientHeight
-
-      if (previousTooltipWidth === 0) {
-        previousTooltipWidth = currentTooltipWidth;
-      }
-
-      if (previousTooltipHeight === 0) {
-        previousTooltipHeight = currentTooltipHeight;
-      }
-
       previousX = currentX
       previousY = currentY
 
@@ -125,7 +107,7 @@
     requestAnimationFrame((newFrameTime) => animate(invokedAnimationStartTime, newFrameTime))
   }*/
 
-  $: updatePosition(anchor, currentTooltip, previousTooltip)
+  $: updatePosition(anchor, currentTooltip)
   $: updatePositionOnVisibilityChange(visible, hovering)
   /*$: requestAnimationFrame((frameTime) => animate(animationStartTime, frameTime))*/
 
@@ -162,7 +144,6 @@
         <slot />
       </div>
       <div
-        bind:this={previousTooltip}
         class="previousContent"
         style:left={`${previousX}px`}
         style:top={`${previousY}px`}

From 09485d654066ef1c1e78a5ad2f762b0ed071bee2 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Tue, 2 Apr 2024 16:46:31 +0100
Subject: [PATCH 008/123] wip

---
 packages/bbui/src/Form/Core/Picker.svelte     |  48 ++++---
 packages/bbui/src/Tooltip/Context.svelte      | 134 +++++++-----------
 .../settings/controls/FieldSelect.svelte      |   4 -
 3 files changed, 83 insertions(+), 103 deletions(-)

diff --git a/packages/bbui/src/Form/Core/Picker.svelte b/packages/bbui/src/Form/Core/Picker.svelte
index 0221c0fbdd..87f2e1c130 100644
--- a/packages/bbui/src/Form/Core/Picker.svelte
+++ b/packages/bbui/src/Form/Core/Picker.svelte
@@ -17,7 +17,8 @@
     TooltipType,
   } from "../../Tooltip/AbsTooltip.svelte"
   import ContextTooltip from "../../Tooltip/Context.svelte"
-  import { fade } from 'svelte/transition';
+  import { Heading } from "@budibase/bbui"
+
 
 
   export let id = null
@@ -119,7 +120,7 @@
     component?.removeEventListener("scroll", null)
   })
 
-  const handleMouseenter = (e, option) => {
+  const handleMouseenter = (e, option, idx) => {
     contextTooltipId += 1;
     const invokedContextTooltipId = contextTooltipId
 
@@ -230,8 +231,8 @@
         {#if filteredOptions.length}
           {#each filteredOptions as option, idx}
               <li
-                on:mouseenter={(e) => handleMouseenter(e, option)}
-                on:mouseleave={(e) => handleMouseleave(e, option)}
+                on:mouseenter={(e) => handleMouseenter(e, option, idx)}
+                on:mouseleave={(e) => handleMouseleave(e, option, idx)}
                 class="spectrum-Menu-item"
                 class:is-selected={isOptionSelected(getOptionValue(option, idx))}
                 role="option"
@@ -303,27 +304,42 @@
     visible={contextTooltipVisible}
     anchor={contextTooltipAnchor}
   >
-  <div
-    class="tooltipContents"
-  >
-  {contextTooltipOption}
-  </div>
-  <div slot="previous"
-    class="tooltipContents"
-  >
-  {previousContextTooltipOption}
-  </div>
+    <div
+      class="tooltipContents"
+    >
+      {#if contextTooltipOption}
+          <Icon name={getOptionIcon(contextTooltipOption)} />
+        <Heading>{contextTooltipOption}</Heading>
+      {/if}
+    </div>
+    <div slot="previous"
+      class="tooltipContents"
+    >
+      {#if previousContextTooltipOption}
+          <Icon name={getOptionIcon(previousContextTooltipOption)} />
+        <Heading>{previousContextTooltipOption}</Heading>
+      {/if}
+    </div>
   </ContextTooltip>
 
 <style>
   .tooltipContents {
-    background-color: red;
     max-width: 200px;
-    text-wrap: wrap;
+    background-color: var(--spectrum-global-color-gray-200);
     display: inline-block;
+  }
+
+  .tooltipContents :global(h1) {
+    font-size: 15px;
+    text-wrap: wrap;
     word-break: break-all;
   }
 
+  .tooltipContents :global(svg) {
+    color: var(--background);
+    fill: var(--background);
+  }
+
   .spectrum-Menu {
     display: block;
   }
diff --git a/packages/bbui/src/Tooltip/Context.svelte b/packages/bbui/src/Tooltip/Context.svelte
index 10549d7b3a..d1220c2198 100644
--- a/packages/bbui/src/Tooltip/Context.svelte
+++ b/packages/bbui/src/Tooltip/Context.svelte
@@ -2,11 +2,14 @@
   import Portal from "svelte-portal"
   import { fade } from 'svelte/transition';
 
+  export let wrapper
+  export let resetWrapper
   export let currentTooltip
   export let anchor
   export let visible = false
   export let hovering = false
 
+  let initialShow = true;
   let previousX = 0
   let previousY = 0
   let currentX = 0
@@ -15,15 +18,15 @@
   let currentTooltipWidth = 0
   let currentTooltipHeight = 0
 
-  const updatePositionOnVisibilityChange = (visible, hovering) => {
+  const handleVisibilityChange = (visible, hovering) => {
     if (!visible && !hovering) {
-      previousX = 0;
-      previousY = 0;
-    } }
+      initialShow = true;
+    }
+  }
 
-  const updatePosition = (anchor, currentTooltip) => {
+  const updatePosition = (anchor, currentTooltip, wrapper, resetWrapper) => {
     requestAnimationFrame(() => {
-      if (anchor == null || currentTooltip == null) {
+      if (anchor == null || currentTooltip == null || wrapper == null || resetWrapper == null) {
         return;
       }
 
@@ -39,77 +42,30 @@
       currentX = rect.x - currentTooltipWidth
       currentY = rect.y
 
-      if (previousX === 0) {
-        previousX = currentX
-      }
+      // Bypass animations if the tooltip has only just been opened
+      if (initialShow) {
+        initialShow = false;
 
-      if (previousY === 0) {
-        previousY = currentY
+        wrapper.style.transition = "none";
+        wrapper.style.width = `${currentTooltipWidth}px`
+        wrapper.style.height = `${currentTooltipHeight}px`
+        wrapper.style.top = `${currentY}px`
+        wrapper.style.left = `${currentX}px`
+
+        resetWrapper.style.transition = "none";
+        resetWrapper.style.top = `${-currentY}px`
+        resetWrapper.style.left = `${-currentX}px`
+
+        requestAnimationFrame(() => {
+          wrapper.style.removeProperty("transition");
+          resetWrapper.style.removeProperty("transition");
+        })
       }
     })
   }
 
-  /*
-  const getNormalizedTime = (startTime, endTime, currentTime) => {
-    const distanceFromStart = currentTime - startTime;
-    const timeDiff = endTime - startTime;
-
-    return distanceFromStart / timeDiff;
-  }
-
-  const cubicBezierInterpolation = (p1, p2, p3, p4, currentTime) => {
-    return (
-      (Math.pow(1 - currentTime, 3) * p1) +
-      (3 * Math.pow(1 - currentTime, 2) * currentTime * p2) +
-      (3 * (1 - currentTime) * Math.pow(currentTime, 2) * p3) +
-      (Math.pow(currentTime, 3) * p4)
-    )
-  }
-
-  // Made to match the interface of the css bezier curve function
-  const cubicBezierEasing = (a, b, c, d, t) => {
-    // CSS bezier curve function implicitly provides p1 and p4
-    const p1 = { x: 0, y: 0 }
-    const p2 = { x: a, y: b }
-    const p3 = { x: c, y: d }
-    const p4 = { x: 1, y: 1 }
-
-    return {
-      x: cubicBezierInterpolation(p1.x, p2.x, p3.x, p4.x, t),
-      y: cubicBezierInterpolation(p1.y, p2.y, p3.y, p4.y, t)
-    }
-  }
-
-  const linearInterpolation = (p1, p2, t) => {
-    return p1 + t * (p2 - p1);
-  }
-
-  const animate = (invokedAnimationStartTime, frameTime) => {
-    if (invokedAnimationStartTime !== animationStartTime) {
-      console.log("CANCEL ANIMATION ", invokedAnimationStartTime, " ", animationStartTime);
-      return;
-    }
-
-    const animationDuration = 300
-    const normalizedTime = getNormalizedTime(invokedAnimationStartTime, invokedAnimationStartTime + animationDuration, frameTime)
-
-    if (normalizedTime >= 1) {
-      console.log("exiting");
-      return;
-    }
-
-    const easing = cubicBezierEasing(0.25, 0.1, 0.25, 1, normalizedTime)
-
-    x = linearInterpolation(startX, endX, easing.x)
-    y = linearInterpolation(startY, endY, easing.y)
-    w = linearInterpolation(previousTooltipWidth, currentTooltipWidth, easing.x)
-
-    requestAnimationFrame((newFrameTime) => animate(invokedAnimationStartTime, newFrameTime))
-  }*/
-
-  $: updatePosition(anchor, currentTooltip)
-  $: updatePositionOnVisibilityChange(visible, hovering)
-  /*$: requestAnimationFrame((frameTime) => animate(animationStartTime, frameTime))*/
+  $: updatePosition(anchor, currentTooltip, wrapper, resetWrapper)
+  $: handleVisibilityChange(visible, hovering)
 
   const handleMouseenter = (e) => {
     hovering = true;
@@ -118,10 +74,19 @@
   const handleMouseleave = (e) => {
     hovering = false;
   }
+
+  $: {
+    console.log(currentX)
+    console.log(currentY)
+    console.log(currentTooltipWidth)
+    console.log(currentTooltipHeight)
+    console.log();
+  }
 </script>
 
 <Portal target=".spectrum">
   <div
+    bind:this={wrapper}
     on:mouseenter={handleMouseenter}
     on:mouseleave={handleMouseleave}
     style:width={`${currentTooltipWidth}px`}
@@ -131,7 +96,11 @@
     class="tooltip"
     class:visible={visible || hovering}
   >
-  <div class="screenSize"
+  <!-- absolutely position element with the opposite positioning, so that the tooltip elements can be positioned
+    using the same values as the root wrapper, while still being occluded by it.
+  -->
+  <div class="screenSizeAbsoluteWrapper"
+    bind:this={resetWrapper}
     style:left={`${-currentX}px`}
     style:top={`${-currentY}px`}
     >
@@ -155,25 +124,24 @@
 </Portal>
 
 <style>
-  /* Screen width absolute parent for tooltip content so that'd the applied width and height 
-     to the root doesn't affect their size */
-  .screenSize {
-    position: absolute;
-    width: 100vw;
-    height: 100vh;
-    transition: top 300ms ease-in, left 300ms ease-in;
-  }
-
   .tooltip {
     position: absolute;
     z-index: 9999;
     pointer-events: none;
-    background-color: red;
+    background-color: var(--spectrum-global-color-gray-200);
+
     opacity: 0;
     overflow: hidden;
     transition: width 300ms ease-in, height 300ms ease-in, top 300ms ease-in, left 300ms ease-in;
   }
 
+  .screenSizeAbsoluteWrapper {
+    position: absolute;
+    width: 100vw;
+    height: 100vh;
+    transition: top 300ms ease-in, left 300ms ease-in;
+  }
+
   .visible {
     opacity: 1;
     pointer-events: auto;
diff --git a/packages/builder/src/components/design/settings/controls/FieldSelect.svelte b/packages/builder/src/components/design/settings/controls/FieldSelect.svelte
index 187bfa190d..9b636b20c2 100644
--- a/packages/builder/src/components/design/settings/controls/FieldSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldSelect.svelte
@@ -10,10 +10,6 @@
   export let placeholder
   export let fieldValidator
 
-  $: {
-    console.log(fieldValidator);
-  }
-
   const getFieldSupport = (schema, fieldValidator) => {
     if (fieldValidator == null) {
       return {}

From 1296f8c6b26ed7f94cee9ba538c2060cf8776227 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Tue, 2 Apr 2024 23:07:48 +0100
Subject: [PATCH 009/123] fade in out

---
 packages/bbui/src/Form/Core/Picker.svelte     | 32 +++++++++++---
 packages/bbui/src/Tooltip/Context.svelte      | 43 +++++++++++--------
 .../settings/controls/MultiFieldSelect.svelte |  1 -
 3 files changed, 51 insertions(+), 25 deletions(-)

diff --git a/packages/bbui/src/Form/Core/Picker.svelte b/packages/bbui/src/Form/Core/Picker.svelte
index 87f2e1c130..7d8b490115 100644
--- a/packages/bbui/src/Form/Core/Picker.svelte
+++ b/packages/bbui/src/Form/Core/Picker.svelte
@@ -303,21 +303,28 @@
   <ContextTooltip
     visible={contextTooltipVisible}
     anchor={contextTooltipAnchor}
+    offset={20}
   >
     <div
       class="tooltipContents"
     >
       {#if contextTooltipOption}
+        <div class="contextTooltipHeader">
           <Icon name={getOptionIcon(contextTooltipOption)} />
-        <Heading>{contextTooltipOption}</Heading>
+          <Heading>{contextTooltipOption}</Heading>
+        </div>
+        <p>{getOptionTooltip(contextTooltipOption)}</p>
       {/if}
     </div>
     <div slot="previous"
       class="tooltipContents"
     >
       {#if previousContextTooltipOption}
+        <div class="contextTooltipHeader">
           <Icon name={getOptionIcon(previousContextTooltipOption)} />
-        <Heading>{previousContextTooltipOption}</Heading>
+          <Heading>{previousContextTooltipOption}</Heading>
+        </div>
+        <p>{getOptionTooltip(previousContextTooltipOption)}</p>
       {/if}
     </div>
   </ContextTooltip>
@@ -327,18 +334,29 @@
     max-width: 200px;
     background-color: var(--spectrum-global-color-gray-200);
     display: inline-block;
+    padding: 12px;
+    border-radius: 5px;
+    box-sizing: border-box;
   }
 
-  .tooltipContents :global(h1) {
+  .contextTooltipHeader {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .contextTooltipHeader :global(svg) {
+    color: var(--background);
+    margin-right: 5px;
+  }
+
+  .contextTooltipHeader :global(h1) {
+    flex-grow: 1;
     font-size: 15px;
     text-wrap: wrap;
     word-break: break-all;
   }
 
-  .tooltipContents :global(svg) {
-    color: var(--background);
-    fill: var(--background);
-  }
 
   .spectrum-Menu {
     display: block;
diff --git a/packages/bbui/src/Tooltip/Context.svelte b/packages/bbui/src/Tooltip/Context.svelte
index d1220c2198..59747f83ed 100644
--- a/packages/bbui/src/Tooltip/Context.svelte
+++ b/packages/bbui/src/Tooltip/Context.svelte
@@ -2,12 +2,15 @@
   import Portal from "svelte-portal"
   import { fade } from 'svelte/transition';
 
-  export let wrapper
-  export let resetWrapper
-  export let currentTooltip
   export let anchor
   export let visible = false
-  export let hovering = false
+  export let offset = 0;
+
+  let hovering = false
+  let wrapper
+  let resetWrapper
+  let currentTooltip
+  let previousTooltip
 
   let initialShow = true;
   let previousX = 0
@@ -24,9 +27,9 @@
     }
   }
 
-  const updatePosition = (anchor, currentTooltip, wrapper, resetWrapper) => {
+  const updatePosition = (anchor, currentTooltip, previousTooltip, wrapper, resetWrapper) => {
     requestAnimationFrame(() => {
-      if (anchor == null || currentTooltip == null || wrapper == null || resetWrapper == null) {
+      if (anchor == null || currentTooltip == null || previousTooltip == null || wrapper == null || resetWrapper == null) {
         return;
       }
 
@@ -39,8 +42,19 @@
       previousY = currentY
 
       // - width to align to left side of anchor
-      currentX = rect.x - currentTooltipWidth
+      currentX = rect.x - currentTooltipWidth - offset
       currentY = rect.y
+      const fadeIn = [{ opacity: "0" }, { opacity: "1" }];
+      const fadeOut = [{ opacity: "1" }, { opacity: "0" }];
+
+      const fadeTiming = {
+        duration: 300,
+        iterations: 1,
+        easing: "ease-in"
+      };
+
+      currentTooltip.animate(fadeIn, fadeTiming);
+      previousTooltip.animate(fadeOut, fadeTiming);
 
       // Bypass animations if the tooltip has only just been opened
       if (initialShow) {
@@ -64,7 +78,7 @@
     })
   }
 
-  $: updatePosition(anchor, currentTooltip, wrapper, resetWrapper)
+  $: updatePosition(anchor, currentTooltip, previousTooltip, wrapper, resetWrapper)
   $: handleVisibilityChange(visible, hovering)
 
   const handleMouseenter = (e) => {
@@ -74,14 +88,6 @@
   const handleMouseleave = (e) => {
     hovering = false;
   }
-
-  $: {
-    console.log(currentX)
-    console.log(currentY)
-    console.log(currentTooltipWidth)
-    console.log(currentTooltipHeight)
-    console.log();
-  }
 </script>
 
 <Portal target=".spectrum">
@@ -116,6 +122,7 @@
         class="previousContent"
         style:left={`${previousX}px`}
         style:top={`${previousY}px`}
+        bind:this={previousTooltip}
       >
         <slot name="previous"/>
       </div>
@@ -129,6 +136,8 @@
     z-index: 9999;
     pointer-events: none;
     background-color: var(--spectrum-global-color-gray-200);
+    border-radius: 5px;
+    box-sizing: border-box;
 
     opacity: 0;
     overflow: hidden;
@@ -149,7 +158,7 @@
 
   .currentContent {
     position: absolute;
-    z-index: 10000;
+    z-index: 10001;
   }
 
   .previousContent {
diff --git a/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte b/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
index b2a308596c..412a797db3 100644
--- a/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
@@ -102,7 +102,6 @@
   }
 
   const getOptionTooltip = optionKey => {
-    console.log(optionKey)
     const support = fieldSupport[optionKey]?.support;
     const message = fieldSupport[optionKey]?.message;
 

From ad1b30431d83dfbf14b81414f332aa7182ad257d Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Wed, 3 Apr 2024 07:50:43 +0100
Subject: [PATCH 010/123] wip

---
 packages/bbui/src/Tooltip/Context.svelte | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/bbui/src/Tooltip/Context.svelte b/packages/bbui/src/Tooltip/Context.svelte
index 59747f83ed..a79b7d369d 100644
--- a/packages/bbui/src/Tooltip/Context.svelte
+++ b/packages/bbui/src/Tooltip/Context.svelte
@@ -48,9 +48,10 @@
       const fadeOut = [{ opacity: "1" }, { opacity: "0" }];
 
       const fadeTiming = {
-        duration: 300,
+        duration: 200,
         iterations: 1,
-        easing: "ease-in"
+        easing: "ease-in",
+        fill: "forwards"
       };
 
       currentTooltip.animate(fadeIn, fadeTiming);
@@ -60,6 +61,8 @@
       if (initialShow) {
         initialShow = false;
 
+        previousTooltip.style.visibility = "hidden"
+
         wrapper.style.transition = "none";
         wrapper.style.width = `${currentTooltipWidth}px`
         wrapper.style.height = `${currentTooltipHeight}px`
@@ -74,6 +77,8 @@
           wrapper.style.removeProperty("transition");
           resetWrapper.style.removeProperty("transition");
         })
+      } else {
+        previousTooltip.style.removeProperty("visibility");
       }
     })
   }

From 96001dd409a9e2c2726b9224ac699569d41eedb2 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Wed, 3 Apr 2024 09:08:31 +0100
Subject: [PATCH 011/123] wip

---
 .../bbui/src/Form/Core/Multiselect.svelte     |   4 +
 packages/bbui/src/Form/Core/Picker.svelte     |  93 +---------------
 packages/bbui/src/Form/Multiselect.svelte     |   4 +
 packages/bbui/src/Tooltip/Context.svelte      |   7 +-
 packages/bbui/src/index.js                    |   1 +
 .../settings/controls/MultiFieldSelect.svelte | 104 ++++++++++++++++--
 6 files changed, 115 insertions(+), 98 deletions(-)

diff --git a/packages/bbui/src/Form/Core/Multiselect.svelte b/packages/bbui/src/Form/Core/Multiselect.svelte
index 959d5c99e0..a9e0efb57b 100644
--- a/packages/bbui/src/Form/Core/Multiselect.svelte
+++ b/packages/bbui/src/Form/Core/Multiselect.svelte
@@ -22,6 +22,8 @@
   export let open = false
   export let loading
   export let align
+  export let onOptionMouseenter = () => {}
+  export let onOptionMouseleave = () => {}
 
   const dispatch = createEventDispatcher()
 
@@ -107,4 +109,6 @@
   {customPopoverHeight}
   {loading}
   {align}
+  {onOptionMouseenter}
+  {onOptionMouseleave}
 />
diff --git a/packages/bbui/src/Form/Core/Picker.svelte b/packages/bbui/src/Form/Core/Picker.svelte
index 7d8b490115..a9a9c01ce0 100644
--- a/packages/bbui/src/Form/Core/Picker.svelte
+++ b/packages/bbui/src/Form/Core/Picker.svelte
@@ -19,8 +19,6 @@
   import ContextTooltip from "../../Tooltip/Context.svelte"
   import { Heading } from "@budibase/bbui"
 
-
-
   export let id = null
   export let disabled = false
   export let fieldText = ""
@@ -52,18 +50,14 @@
   export let footer = null
   export let customAnchor = null
   export let loading
+  export let onOptionMouseenter = () => {}
+  export let onOptionMouseleave = () => {}
 
   const dispatch = createEventDispatcher()
 
   let button
   let component
 
-  let contextTooltipId = 0;
-  let contextTooltipAnchor = null
-  let contextTooltipOption = null
-  let previousContextTooltipOption = null
-  let contextTooltipVisible = false
-
   $: sortedOptions = getSortedOptions(options, getOptionLabel, sort)
   $: filteredOptions = getFilteredOptions(
     sortedOptions,
@@ -119,28 +113,6 @@
   onDestroy(() => {
     component?.removeEventListener("scroll", null)
   })
-
-  const handleMouseenter = (e, option, idx) => {
-    contextTooltipId += 1;
-    const invokedContextTooltipId = contextTooltipId
-
-    setTimeout(() => {
-      if (contextTooltipId === invokedContextTooltipId) {
-        contextTooltipAnchor = e.target;
-        previousContextTooltipOption = contextTooltipOption;
-        contextTooltipOption = option;
-        contextTooltipVisible = true;
-      }
-    }, 200)
-  }
-
-  const handleMouseleave = (e, option) => {
-    setTimeout(() => {
-      if (option === contextTooltipOption) {
-        contextTooltipVisible = false;
-      }
-    }, 600)
-  }
 </script>
 
 <button
@@ -231,8 +203,8 @@
         {#if filteredOptions.length}
           {#each filteredOptions as option, idx}
               <li
-                on:mouseenter={(e) => handleMouseenter(e, option, idx)}
-                on:mouseleave={(e) => handleMouseleave(e, option, idx)}
+                on:mouseenter={(e) => onOptionMouseenter(e, option)}
+                on:mouseleave={(e) => onOptionMouseleave(e, option)}
                 class="spectrum-Menu-item"
                 class:is-selected={isOptionSelected(getOptionValue(option, idx))}
                 role="option"
@@ -300,64 +272,7 @@
       {/if}
     </div>
   </Popover>
-  <ContextTooltip
-    visible={contextTooltipVisible}
-    anchor={contextTooltipAnchor}
-    offset={20}
-  >
-    <div
-      class="tooltipContents"
-    >
-      {#if contextTooltipOption}
-        <div class="contextTooltipHeader">
-          <Icon name={getOptionIcon(contextTooltipOption)} />
-          <Heading>{contextTooltipOption}</Heading>
-        </div>
-        <p>{getOptionTooltip(contextTooltipOption)}</p>
-      {/if}
-    </div>
-    <div slot="previous"
-      class="tooltipContents"
-    >
-      {#if previousContextTooltipOption}
-        <div class="contextTooltipHeader">
-          <Icon name={getOptionIcon(previousContextTooltipOption)} />
-          <Heading>{previousContextTooltipOption}</Heading>
-        </div>
-        <p>{getOptionTooltip(previousContextTooltipOption)}</p>
-      {/if}
-    </div>
-  </ContextTooltip>
-
 <style>
-  .tooltipContents {
-    max-width: 200px;
-    background-color: var(--spectrum-global-color-gray-200);
-    display: inline-block;
-    padding: 12px;
-    border-radius: 5px;
-    box-sizing: border-box;
-  }
-
-  .contextTooltipHeader {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .contextTooltipHeader :global(svg) {
-    color: var(--background);
-    margin-right: 5px;
-  }
-
-  .contextTooltipHeader :global(h1) {
-    flex-grow: 1;
-    font-size: 15px;
-    text-wrap: wrap;
-    word-break: break-all;
-  }
-
-
   .spectrum-Menu {
     display: block;
   }
diff --git a/packages/bbui/src/Form/Multiselect.svelte b/packages/bbui/src/Form/Multiselect.svelte
index d99d3d23d5..fe90665b61 100644
--- a/packages/bbui/src/Form/Multiselect.svelte
+++ b/packages/bbui/src/Form/Multiselect.svelte
@@ -24,6 +24,8 @@
   export let customPopoverHeight
   export let helpText = null
   export let align
+  export let onOptionMouseenter = () => {}
+  export let onOptionMouseleave = () => {}
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -51,6 +53,8 @@
     {autocomplete}
     {customPopoverHeight}
     {align}
+    {onOptionMouseenter}
+    {onOptionMouseleave}
     bind:searchTerm
     on:change={onChange}
     on:click
diff --git a/packages/bbui/src/Tooltip/Context.svelte b/packages/bbui/src/Tooltip/Context.svelte
index a79b7d369d..579884d607 100644
--- a/packages/bbui/src/Tooltip/Context.svelte
+++ b/packages/bbui/src/Tooltip/Context.svelte
@@ -1,11 +1,14 @@
 <script>
   import Portal from "svelte-portal"
-  import { fade } from 'svelte/transition';
+  import { getContext } from "svelte"
+  import Context from "../context"
 
   export let anchor
   export let visible = false
   export let offset = 0;
 
+  $: target = getContext(Context.PopoverRoot) || ".spectrum"
+
   let hovering = false
   let wrapper
   let resetWrapper
@@ -95,7 +98,7 @@
   }
 </script>
 
-<Portal target=".spectrum">
+<Portal {target}>
   <div
     bind:this={wrapper}
     on:mouseenter={handleMouseenter}
diff --git a/packages/bbui/src/index.js b/packages/bbui/src/index.js
index d18c4d6910..174d500c87 100644
--- a/packages/bbui/src/index.js
+++ b/packages/bbui/src/index.js
@@ -43,6 +43,7 @@ export {
   TooltipType,
 } from "./Tooltip/AbsTooltip.svelte"
 export { default as TooltipWrapper } from "./Tooltip/TooltipWrapper.svelte"
+export { default as ContextTooltip } from "./Tooltip/Context.svelte"
 export { default as Menu } from "./Menu/Menu.svelte"
 export { default as MenuSection } from "./Menu/Section.svelte"
 export { default as MenuSeparator } from "./Menu/Separator.svelte"
diff --git a/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte b/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
index 412a797db3..a0ffaad6fa 100644
--- a/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Multiselect } from "@budibase/bbui"
+  import { Icon, Heading, Multiselect, ContextTooltip } from "@budibase/bbui"
   import { getDatasourceForProvider, getSchemaForDatasource } from "dataBinding"
   import { selectedScreen } from "stores/builder"
   import { createEventDispatcher } from "svelte"
@@ -10,6 +10,12 @@
   export let placeholder
   export let fieldValidator
 
+  let contextTooltipId = 0;
+  let contextTooltipAnchor = null
+  let contextTooltipOption = null
+  let previousContextTooltipOption = null
+  let contextTooltipVisible = false
+
   const TypeIconMap = {
     text: "Text",
     options: "Dropdown",
@@ -105,9 +111,7 @@
     const support = fieldSupport[optionKey]?.support;
     const message = fieldSupport[optionKey]?.message;
 
-    if (support === unsupported) return message
-
-    return null
+    return message
   }
 
   const isOptionEnabled = optionKey => {
@@ -120,17 +124,103 @@
 
     return true
   }
+
+  const onOptionMouseenter = (e, option, idx) => {
+    contextTooltipId += 1;
+    const invokedContextTooltipId = contextTooltipId
+
+    setTimeout(() => {
+      if (contextTooltipId === invokedContextTooltipId) {
+        contextTooltipAnchor = e.target;
+        previousContextTooltipOption = contextTooltipOption;
+        contextTooltipOption = option;
+        contextTooltipVisible = true;
+      }
+    }, 200)
+  }
+
+  const onOptionMouseleave = (e, option) => {
+    setTimeout(() => {
+      if (option === contextTooltipOption) {
+        contextTooltipVisible = false;
+      }
+    }, 600)
+  }
 </script>
 
 <Multiselect
   iconPosition="right"
   {isOptionEnabled}
-  {getOptionIcon}
-  {getOptionIconTooltip}
-  {getOptionTooltip}
   {placeholder}
   value={boundValue}
   on:change={setValue}
   {options}
   align="right"
+  {onOptionMouseenter}
+  {onOptionMouseleave}
 />
+<ContextTooltip
+  visible={contextTooltipVisible}
+  anchor={contextTooltipAnchor}
+  offset={20}
+>
+  <div
+    class="tooltipContents"
+  >
+    {#if contextTooltipOption}
+      <div class="contextTooltipHeader">
+        <Icon name={getOptionIcon(contextTooltipOption)} />
+        <span>{contextTooltipOption}</span>
+      </div>
+      <p>{getOptionTooltip(contextTooltipOption)}</p>
+    {/if}
+  </div>
+  <div slot="previous"
+    class="tooltipContents"
+  >
+    {#if previousContextTooltipOption}
+      <div class="contextTooltipHeader">
+        <Icon name={getOptionIcon(previousContextTooltipOption)} />
+        <span>{previousContextTooltipOption}</span>
+      </div>
+      <p>{getOptionTooltip(previousContextTooltipOption)}</p>
+    {/if}
+  </div>
+</ContextTooltip>
+
+<style>
+  .tooltipContents {
+    max-width: 200px;
+    background-color: var(--spectrum-global-color-gray-200);
+    display: inline-block;
+    padding: 12px;
+    border-radius: 5px;
+    box-sizing: border-box;
+  }
+
+  .contextTooltipHeader {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: var(--spectrum-alias-item-height-m);
+    padding: 0px var(--spectrum-alias-item-padding-m);
+    border-width: var(--spectrum-actionbutton-border-size);
+    border-radius: var(--spectrum-alias-border-radius-regular);
+    border: 1px solid
+      var(
+        --spectrum-actionbutton-m-border-color,
+        var(--spectrum-alias-border-color)
+      );
+  }
+
+  .contextTooltipHeader :global(svg) {
+    color: var(--background);
+    margin-right: 5px;
+  }
+
+  .contextTooltipHeader :global(span) {
+ white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  }
+</style>

From 8eb60968d53d73317f53bf427465ea17d852803b Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Wed, 3 Apr 2024 10:02:37 +0100
Subject: [PATCH 012/123] wip

---
 .../settings/controls/FieldSelect.svelte      |  5 +-
 .../settings/controls/MultiFieldSelect.svelte |  5 +-
 .../design/settings/fieldValidator.js         | 82 ++++++++++++-------
 3 files changed, 61 insertions(+), 31 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/FieldSelect.svelte b/packages/builder/src/components/design/settings/controls/FieldSelect.svelte
index 9b636b20c2..3f39c12800 100644
--- a/packages/builder/src/components/design/settings/controls/FieldSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldSelect.svelte
@@ -3,7 +3,7 @@
   import { getDatasourceForProvider, getSchemaForDatasource } from "dataBinding"
   import { selectedScreen } from "stores/builder"
   import { createEventDispatcher } from "svelte"
-  import { validators, supported, partialSupport, unsupported } from "../fieldValidator";
+  import { validators, constants as validatorConstants } from "../fieldValidator";
 
   export let componentInstance = {}
   export let value = ""
@@ -52,6 +52,7 @@
   }
 
   const getOptionIcon = option => {
+    /*
     const support = fieldSupport[option]?.support;
 
     if (support == null) return null;
@@ -59,12 +60,14 @@
 
     if (support === partialSupport) return "Warning"
     if (support === unsupported) return "Error"
+*/
   }
 
   const getOptionIconTooltip = option => {
   }
 
   const isOptionEnabled = option => {
+    return true
     const support = fieldSupport[option]?.support;
 
     if (support == null) return true
diff --git a/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte b/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
index a0ffaad6fa..a2f3dfe24f 100644
--- a/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
@@ -3,7 +3,7 @@
   import { getDatasourceForProvider, getSchemaForDatasource } from "dataBinding"
   import { selectedScreen } from "stores/builder"
   import { createEventDispatcher } from "svelte"
-  import { validators, supported, partialSupport, unsupported } from "../fieldValidator";
+  import { validators, constants as validatorConstants } from "../fieldValidator";
 
   export let componentInstance = {}
   export let value = ""
@@ -77,6 +77,7 @@
   }
 
   const foo = () => {
+    /*
     const support = fieldSupport[option]?.support;
 
     if (support == null) return null;
@@ -84,6 +85,7 @@
 
     if (support === partialSupport) return "AlertCircleFilled"
     if (support === unsupported) return "AlertCircleFilled"
+    */
   }
 
   const getOptionIcon = optionKey => {
@@ -115,6 +117,7 @@
   }
 
   const isOptionEnabled = optionKey => {
+    return true;
     // Remain enabled if already selected, so it can be deselected
     if (value?.includes(optionKey)) return true
     const support = fieldSupport[optionKey]?.support;
diff --git a/packages/builder/src/components/design/settings/fieldValidator.js b/packages/builder/src/components/design/settings/fieldValidator.js
index 8a3eb89691..5bbbaae659 100644
--- a/packages/builder/src/components/design/settings/fieldValidator.js
+++ b/packages/builder/src/components/design/settings/fieldValidator.js
@@ -1,40 +1,64 @@
-export const unsupported = Symbol("values-validator-unsupported")
-export const partialSupport = Symbol("values-validator-partial-support")
-export const supported = Symbol("values-validator-supported")
+export const constants = {
+  warning: Symbol("values-validator-warning"),
+  error: Symbol("values-validator-error"),
+  unsupported: Symbol("values-validator-unsupported"),
+  partialSupport: Symbol("values-validator-partialSupport"),
+  supported: Symbol("values-validator-supported")
+}
 
 export const validators = {
   chart: (fieldSchema) => {
-    if (
-      fieldSchema.type === "json" ||
-      fieldSchema.type === "array" ||
-      fieldSchema.type === "attachment" ||
-      fieldSchema.type === "barcodeqr" ||
-      fieldSchema.type === "link" ||
-      fieldSchema.type === "bb_reference"
-    ) {
-      return {
-        support: unsupported,
-        message: `"${fieldSchema.type}" columns cannot be used as a chart value long long long long long long long long long`
+    try {
+      const response = {
+        support: null,
+        message: null,
+        warnings: [],
+        errors: []
       }
-    }
-
-    if (fieldSchema.type === "string") {
-      return {
-        support: partialSupport,
-        message: "This field can be used as a chart value, but non-numeric values will not be parsed correctly"
+      const generalUnsupportedFields = ["array", "attachment", "barcodeqr", "link", "bb_reference"]
+      if (generalUnsupportedFields.includes(fieldSchema.type)) {
+        response.errors.push(`${fieldSchema.type} columns can not be used as chart inputs.`)
       }
-    }
 
-    if (fieldSchema.type === "number") {
-      return {
-        support: supported,
-        message: "This field can be used for chart values"
+      if (fieldSchema.type === "json") {
+          response.errors.push(`JSON columns can not be used as chart inputs, but individual properties of this JSON field can be be used if supported.`)
       }
-    }
 
-    return {
-      support: partialSupport,
-      message: "This field can be used as a chart value, but it may not be parsed correctly"
+      if (fieldSchema.type === "string") {
+        response.warnings.push(
+          "This column can be used as input for a chart, but non-numeric values may cause unexpected behavior.")
+      }
+      if (fieldSchema.type === "date") {
+        response.warnings.push(
+          "This column can be used as input for a chart, but it is parsed differently for various charts.")
+      }
+
+      const isRequired = fieldSchema?.constraints?.presence?.allowEmpty === false
+      if (!isRequired) {
+        response.warnings.push(
+          "This column is optional, and some rows may not have a value.")
+      }
+
+      if (response.errors.length > 0) {
+        response.support = constants.unsupported
+        response.message = "This column can not be used as a chart input."
+      } else if (response.warnings.length > 0) {
+        response.support = constants.partialSupport
+        response.message = "This column can be used as a chart input, but certain values may cause issues."
+      } else {
+        response.support = constants.supported
+        response.message = "This column can be used as a chart input."
+      }
+
+      return response
+    } catch (e) {
+      console.log(e)
+      return {
+        support: constants.partialSupport,
+        message: "There was an issue validating this field, it may not be fully supported for use with charts.",
+        warnings: [],
+        errors: []
+      }
     }
   }
 };

From b9d36f9802554df4cd42c2c7ea7468bc000bdaf3 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Wed, 3 Apr 2024 10:08:40 +0100
Subject: [PATCH 013/123] wip better fade

---
 packages/bbui/src/Tooltip/Context.svelte          | 15 +++++++++++----
 .../settings/controls/MultiFieldSelect.svelte     | 13 -------------
 2 files changed, 11 insertions(+), 17 deletions(-)

diff --git a/packages/bbui/src/Tooltip/Context.svelte b/packages/bbui/src/Tooltip/Context.svelte
index 579884d607..4719cfffb1 100644
--- a/packages/bbui/src/Tooltip/Context.svelte
+++ b/packages/bbui/src/Tooltip/Context.svelte
@@ -50,15 +50,22 @@
       const fadeIn = [{ opacity: "0" }, { opacity: "1" }];
       const fadeOut = [{ opacity: "1" }, { opacity: "0" }];
 
-      const fadeTiming = {
-        duration: 200,
+      const fadeInTiming = {
+        duration: 150,
+        delay: 150,
+        iterations: 1,
+        easing: "ease-in",
+        fill: "both"
+      };
+      const fadeOutTiming = {
+        duration: 150,
         iterations: 1,
         easing: "ease-in",
         fill: "forwards"
       };
 
-      currentTooltip.animate(fadeIn, fadeTiming);
-      previousTooltip.animate(fadeOut, fadeTiming);
+      currentTooltip.animate(fadeIn, fadeInTiming);
+      previousTooltip.animate(fadeOut, fadeOutTiming);
 
       // Bypass animations if the tooltip has only just been opened
       if (initialShow) {
diff --git a/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte b/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
index a2f3dfe24f..d1b07128b4 100644
--- a/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
@@ -76,18 +76,6 @@
     dispatch("change", boundValue)
   }
 
-  const foo = () => {
-    /*
-    const support = fieldSupport[option]?.support;
-
-    if (support == null) return null;
-    if (support === supported) return null
-
-    if (support === partialSupport) return "AlertCircleFilled"
-    if (support === unsupported) return "AlertCircleFilled"
-    */
-  }
-
   const getOptionIcon = optionKey => {
     const option = schema[optionKey]
     if (option.autocolumn) {
@@ -204,7 +192,6 @@
   .contextTooltipHeader {
     display: flex;
     align-items: center;
-    justify-content: center;
     height: var(--spectrum-alias-item-height-m);
     padding: 0px var(--spectrum-alias-item-padding-m);
     border-width: var(--spectrum-actionbutton-border-size);

From 793e5cb4cb71a77087cbcab4d2c840db62616473 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Thu, 4 Apr 2024 07:53:30 +0100
Subject: [PATCH 014/123] wip????

---
 packages/bbui/src/Tooltip/Context.svelte      |  59 +++---
 .../settings/controls/MultiFieldSelect.svelte | 174 ++++++++++++++----
 .../design/settings/fieldValidator.js         |  17 +-
 3 files changed, 186 insertions(+), 64 deletions(-)

diff --git a/packages/bbui/src/Tooltip/Context.svelte b/packages/bbui/src/Tooltip/Context.svelte
index 4719cfffb1..acb54f3773 100644
--- a/packages/bbui/src/Tooltip/Context.svelte
+++ b/packages/bbui/src/Tooltip/Context.svelte
@@ -11,7 +11,6 @@
 
   let hovering = false
   let wrapper
-  let resetWrapper
   let currentTooltip
   let previousTooltip
 
@@ -30,13 +29,19 @@
     }
   }
 
-  const updatePosition = (anchor, currentTooltip, previousTooltip, wrapper, resetWrapper) => {
+  const updatePosition = (anchor, currentTooltip, previousTooltip, wrapper) => {
     requestAnimationFrame(() => {
-      if (anchor == null || currentTooltip == null || previousTooltip == null || wrapper == null || resetWrapper == null) {
+      if (anchor == null || currentTooltip == null || previousTooltip == null || wrapper == null) {
         return;
       }
 
       const rect = anchor.getBoundingClientRect();
+      const previousStyles = window.getComputedStyle(previousTooltip?.firstChild)
+      const currentStyles = window.getComputedStyle(currentTooltip?.firstChild)
+
+      console.log(previousStyles.backgroundColor);
+      console.log(currentStyles.backgroundColor);
+      console.log("")
 
       currentTooltipWidth = currentTooltip.clientWidth
       currentTooltipHeight = currentTooltip.clientHeight
@@ -49,23 +54,32 @@
       currentY = rect.y
       const fadeIn = [{ opacity: "0" }, { opacity: "1" }];
       const fadeOut = [{ opacity: "1" }, { opacity: "0" }];
+      const color = [{ offset: 0, backgroundColor: previousStyles.backgroundColor }, { offset: 0.85, backgroundColor: currentStyles.backgroundColor }, { offset: 1, backgroundColor: "black" }];
 
       const fadeInTiming = {
-        duration: 150,
-        delay: 150,
+        duration: 100,
+        delay: 100,
         iterations: 1,
         easing: "ease-in",
         fill: "both"
       };
       const fadeOutTiming = {
-        duration: 150,
+        duration: 100,
         iterations: 1,
         easing: "ease-in",
         fill: "forwards"
       };
 
+      const colorTiming = {
+        duration: 300,
+        iterations: 1,
+        easing: "ease-in",
+        fill: "both"
+      };
+
       currentTooltip.animate(fadeIn, fadeInTiming);
       previousTooltip.animate(fadeOut, fadeOutTiming);
+      wrapper.animate(color, colorTiming);
 
       // Bypass animations if the tooltip has only just been opened
       if (initialShow) {
@@ -74,18 +88,14 @@
         previousTooltip.style.visibility = "hidden"
 
         wrapper.style.transition = "none";
-        wrapper.style.width = `${currentTooltipWidth}px`
-        wrapper.style.height = `${currentTooltipHeight}px`
+        //wrapper.style.width = `${currentTooltipWidth}px`
+        //wrapper.style.height = `${currentTooltipHeight}px`
         wrapper.style.top = `${currentY}px`
         wrapper.style.left = `${currentX}px`
 
-        resetWrapper.style.transition = "none";
-        resetWrapper.style.top = `${-currentY}px`
-        resetWrapper.style.left = `${-currentX}px`
 
         requestAnimationFrame(() => {
           wrapper.style.removeProperty("transition");
-          resetWrapper.style.removeProperty("transition");
         })
       } else {
         previousTooltip.style.removeProperty("visibility");
@@ -93,7 +103,7 @@
     })
   }
 
-  $: updatePosition(anchor, currentTooltip, previousTooltip, wrapper, resetWrapper)
+  $: updatePosition(anchor, currentTooltip, previousTooltip, wrapper)
   $: handleVisibilityChange(visible, hovering)
 
   const handleMouseenter = (e) => {
@@ -110,26 +120,25 @@
     bind:this={wrapper}
     on:mouseenter={handleMouseenter}
     on:mouseleave={handleMouseleave}
-    style:width={`${currentTooltipWidth}px`}
-    style:height={`${currentTooltipHeight}px`}
     style:left={`${currentX}px`}
     style:top={`${currentY}px`}
+    style:width={`${currentTooltipWidth}px`}
+    style:height={`${currentTooltipHeight}px`}
     class="tooltip"
     class:visible={visible || hovering}
   >
   <!-- absolutely position element with the opposite positioning, so that the tooltip elements can be positioned
     using the same values as the root wrapper, while still being occluded by it.
   -->
-  <div class="screenSizeAbsoluteWrapper"
-    bind:this={resetWrapper}
-    style:left={`${-currentX}px`}
-    style:top={`${-currentY}px`}
-    >
+    <div class="screenSizeAbsoluteWrapper"
+      style:left={`${-currentX}px`}
+      style:top={`${-currentY}px`}
+      >
       <div
-        style:left={`${currentX}px`}
-        style:top={`${currentY}px`}
         bind:this={currentTooltip}
         class="currentContent"
+        style:left={`${currentX}px`}
+        style:top={`${currentY}px`}
       >
         <slot />
       </div>
@@ -153,16 +162,16 @@
     background-color: var(--spectrum-global-color-gray-200);
     border-radius: 5px;
     box-sizing: border-box;
-
     opacity: 0;
     overflow: hidden;
+
     transition: width 300ms ease-in, height 300ms ease-in, top 300ms ease-in, left 300ms ease-in;
   }
 
   .screenSizeAbsoluteWrapper {
+    width: 200vw;
+    height: 200vh;
     position: absolute;
-    width: 100vw;
-    height: 100vh;
     transition: top 300ms ease-in, left 300ms ease-in;
   }
 
diff --git a/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte b/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
index d1b07128b4..5f2bc6b214 100644
--- a/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
@@ -12,9 +12,12 @@
 
   let contextTooltipId = 0;
   let contextTooltipAnchor = null
-  let contextTooltipOption = null
-  let previousContextTooltipOption = null
+  let currentOption = null
+  let previousOption = null
   let contextTooltipVisible = false
+  let currentOptionSupport = {}
+  let previousOptionSupport = {}
+
 
   const TypeIconMap = {
     text: "Text",
@@ -78,6 +81,8 @@
 
   const getOptionIcon = optionKey => {
     const option = schema[optionKey]
+    if (!option) return ""
+
     if (option.autocolumn) {
       return "MagicWand"
     }
@@ -94,14 +99,7 @@
   const getOptionIconTooltip = optionKey => {
     const option = schema[optionKey]
 
-    return option.type;
-  }
-
-  const getOptionTooltip = optionKey => {
-    const support = fieldSupport[optionKey]?.support;
-    const message = fieldSupport[optionKey]?.message;
-
-    return message
+    return option?.type;
   }
 
   const isOptionEnabled = optionKey => {
@@ -116,23 +114,67 @@
     return true
   }
 
+  const getSupportLevel = (optionKey) => {
+    const level = fieldSupport[optionKey]?.level;
+
+    if (level === validatorConstants.unsupported) {
+      return {
+        class: "supportLevelUnsupported",
+        icon: "Alert",
+        iconTooltip: fieldSupport[optionKey]?.message,
+        text: "Unsupported"
+      }
+    }
+
+    if (level === validatorConstants.partialSupport) {
+      return {
+        class: "supportLevelPartialSupport",
+        icon: "AlertCheck",
+        iconTooltip: fieldSupport[optionKey]?.message,
+        text: "Partial Support"
+      }
+    }
+
+    if (level === validatorConstants.supported) {
+      return {
+        class: "supportLevelSupported",
+        icon: "CheckmarkCircle",
+        iconTooltip: fieldSupport[optionKey]?.message,
+        text: "Supported"
+      }
+    }
+
+    return {
+      class: "supportLevelUnsupported",
+      icon: "Alert",
+      iconTooltip: "",
+      text: "Unsupported"
+    }
+  }
+
+  $: currentOptionSupport = getSupportLevel(currentOption)
+  $: previousOptionSupport = getSupportLevel(previousOption)
+
   const onOptionMouseenter = (e, option, idx) => {
+    console.log(option)
     contextTooltipId += 1;
     const invokedContextTooltipId = contextTooltipId
 
     setTimeout(() => {
       if (contextTooltipId === invokedContextTooltipId) {
         contextTooltipAnchor = e.target;
-        previousContextTooltipOption = contextTooltipOption;
-        contextTooltipOption = option;
+        previousOption = currentOption;
+        currentOption = option;
         contextTooltipVisible = true;
+        currentOptionSupport = getSupportLevel(currentOption)
+        previousOptionSupport = getSupportLevel(previousOption)
       }
     }, 200)
   }
 
   const onOptionMouseleave = (e, option) => {
     setTimeout(() => {
-      if (option === contextTooltipOption) {
+      if (option === currentOption) {
         contextTooltipVisible = false;
       }
     }, 600)
@@ -156,39 +198,80 @@
   offset={20}
 >
   <div
-    class="tooltipContents"
+    class={`tooltipContents ${currentOptionSupport.class}`}
   >
-    {#if contextTooltipOption}
+    <div class={`supportLevel ${currentOptionSupport.class}`}>
+      <Icon tooltip={currentOptionSupport.iconTooltip} name={currentOptionSupport.icon} />
+      <p>{currentOptionSupport.text}</p>
+    </div>
+    <div class="contextTooltipContent">
       <div class="contextTooltipHeader">
-        <Icon name={getOptionIcon(contextTooltipOption)} />
-        <span>{contextTooltipOption}</span>
+        <Icon name={getOptionIcon(currentOption)} />
+        <span>{currentOption}</span>
       </div>
-      <p>{getOptionTooltip(contextTooltipOption)}</p>
-    {/if}
+
+      {#if fieldSupport[currentOption]?.errors?.length > 0}
+        {#each (fieldSupport[currentOption].errors) as datum}
+          <p>{datum}</p>
+        {/each}
+      {:else if fieldSupport[currentOption]?.warnings?.length > 0}
+        {#each (fieldSupport[currentOption].warnings) as datum}
+          <p>{datum}</p>
+        {/each}
+      {/if}
+    </div>
   </div>
   <div slot="previous"
-    class="tooltipContents"
+    class={`tooltipContents ${previousOptionSupport.class}`}
   >
-    {#if previousContextTooltipOption}
+    <div class={`supportLevel ${previousOptionSupport.class}`}>
+      <Icon tooltip={previousOptionSupport.iconTooltip} name={previousOptionSupport.icon} />
+      <p>{previousOptionSupport.text}</p>
+    </div>
+    <div class="contextTooltipContent">
       <div class="contextTooltipHeader">
-        <Icon name={getOptionIcon(previousContextTooltipOption)} />
-        <span>{previousContextTooltipOption}</span>
+        <Icon name={getOptionIcon(previousOption)} />
+        <span>{previousOption}</span>
       </div>
-      <p>{getOptionTooltip(previousContextTooltipOption)}</p>
-    {/if}
+
+      {#if fieldSupport[previousOption]?.errors?.length > 0}
+        {#each (fieldSupport[previousOption].errors) as datum}
+          <p>{datum}</p>
+        {/each}
+      {:else if fieldSupport[previousOption]?.warnings?.length > 0}
+        {#each (fieldSupport[previousOption].warnings) as datum}
+          <p>{datum}</p>
+        {/each}
+      {/if}
+    </div>
   </div>
 </ContextTooltip>
 
 <style>
   .tooltipContents {
-    max-width: 200px;
+    max-width: 400px;
     background-color: var(--spectrum-global-color-gray-200);
-    display: inline-block;
-    padding: 12px;
+    display: block;
+    padding: 0 0 12px 0 ;
     border-radius: 5px;
     box-sizing: border-box;
   }
 
+  .tooltipContents.supportLevelUnsupported {
+    background-color: var(--red);
+    color: var(--ink)
+  }
+
+  .tooltipContents.supportLevelPartialSupport {
+    background-color: var(--yellow);
+    color: var(--ink)
+  }
+
+  .tooltipContents.supportLevelSupported {
+    background-color: var(--green);
+    color: var(--ink)
+  }
+
   .contextTooltipHeader {
     display: flex;
     align-items: center;
@@ -203,14 +286,41 @@
       );
   }
 
+  .contextTooltipContent {
+    padding: 0px 12px;
+  }
+
   .contextTooltipHeader :global(svg) {
-    color: var(--background);
+    color: var(--ink);
     margin-right: 5px;
   }
 
   .contextTooltipHeader :global(span) {
- white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .supportLevel {
+    display: flex;
+    align-items: center;
+    height: var(--spectrum-alias-item-height-m);
+    padding: 0px var(--spectrum-alias-item-padding-m);
+    margin-bottom: 12px;
+  }
+  .supportLevel :global(svg) {
+    margin-right: 5px;
+  }
+
+  .supportLevel.supportLevelUnsupported {
+    background-color: var(--red-light)
+  }
+
+  .supportLevel.supportLevelPartialSupport {
+    background-color: var(--yellow-light)
+  }
+
+  .supportLevel.supportLevelSupported {
+    background-color: var(--green-light)
   }
 </style>
diff --git a/packages/builder/src/components/design/settings/fieldValidator.js b/packages/builder/src/components/design/settings/fieldValidator.js
index 5bbbaae659..43c3f33db9 100644
--- a/packages/builder/src/components/design/settings/fieldValidator.js
+++ b/packages/builder/src/components/design/settings/fieldValidator.js
@@ -1,3 +1,5 @@
+import { capitalize } from 'lodash';
+
 export const constants = {
   warning: Symbol("values-validator-warning"),
   error: Symbol("values-validator-error"),
@@ -8,16 +10,17 @@ export const constants = {
 
 export const validators = {
   chart: (fieldSchema) => {
+    console.log(fieldSchema);
     try {
       const response = {
-        support: null,
+        level: null,
         message: null,
         warnings: [],
         errors: []
       }
       const generalUnsupportedFields = ["array", "attachment", "barcodeqr", "link", "bb_reference"]
       if (generalUnsupportedFields.includes(fieldSchema.type)) {
-        response.errors.push(`${fieldSchema.type} columns can not be used as chart inputs.`)
+        response.errors.push(`${capitalize(fieldSchema.type)} columns are unsupported.`)
       }
 
       if (fieldSchema.type === "json") {
@@ -26,7 +29,7 @@ export const validators = {
 
       if (fieldSchema.type === "string") {
         response.warnings.push(
-          "This column can be used as input for a chart, but non-numeric values may cause unexpected behavior.")
+          "String columns can be used as input for a chart, but non-numeric values may cause unexpected behavior.")
       }
       if (fieldSchema.type === "date") {
         response.warnings.push(
@@ -40,13 +43,13 @@ export const validators = {
       }
 
       if (response.errors.length > 0) {
-        response.support = constants.unsupported
+        response.level = constants.unsupported
         response.message = "This column can not be used as a chart input."
       } else if (response.warnings.length > 0) {
-        response.support = constants.partialSupport
+        response.level = constants.partialSupport
         response.message = "This column can be used as a chart input, but certain values may cause issues."
       } else {
-        response.support = constants.supported
+        response.level = constants.supported
         response.message = "This column can be used as a chart input."
       }
 
@@ -54,7 +57,7 @@ export const validators = {
     } catch (e) {
       console.log(e)
       return {
-        support: constants.partialSupport,
+        level: constants.partialSupport,
         message: "There was an issue validating this field, it may not be fully supported for use with charts.",
         warnings: [],
         errors: []

From 4af2d07ca7871507f6b1f3e9c5e51e15024e3f2d Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Thu, 4 Apr 2024 08:10:10 +0100
Subject: [PATCH 015/123] workingish

---
 packages/bbui/src/Tooltip/Context.svelte | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/packages/bbui/src/Tooltip/Context.svelte b/packages/bbui/src/Tooltip/Context.svelte
index acb54f3773..69f9af5a63 100644
--- a/packages/bbui/src/Tooltip/Context.svelte
+++ b/packages/bbui/src/Tooltip/Context.svelte
@@ -54,17 +54,17 @@
       currentY = rect.y
       const fadeIn = [{ opacity: "0" }, { opacity: "1" }];
       const fadeOut = [{ opacity: "1" }, { opacity: "0" }];
-      const color = [{ offset: 0, backgroundColor: previousStyles.backgroundColor }, { offset: 0.85, backgroundColor: currentStyles.backgroundColor }, { offset: 1, backgroundColor: "black" }];
+      const color = [{ backgroundColor: previousStyles.backgroundColor }, { backgroundColor: currentStyles.backgroundColor }];
 
       const fadeInTiming = {
-        duration: 100,
-        delay: 100,
+        duration: 150,
+        delay: 150,
         iterations: 1,
         easing: "ease-in",
         fill: "both"
       };
       const fadeOutTiming = {
-        duration: 100,
+        duration: 150,
         iterations: 1,
         easing: "ease-in",
         fill: "forwards"
@@ -73,8 +73,7 @@
       const colorTiming = {
         duration: 300,
         iterations: 1,
-        easing: "ease-in",
-        fill: "both"
+        easing: "ease-in"
       };
 
       currentTooltip.animate(fadeIn, fadeInTiming);

From 5e87f1dcd4157f9c303043fefbd9a2e96acf10c8 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Thu, 4 Apr 2024 08:38:25 +0100
Subject: [PATCH 016/123] wippish

---
 packages/bbui/src/Tooltip/Context.svelte                 | 6 +-----
 .../design/settings/controls/MultiFieldSelect.svelte     | 9 ++++++---
 .../src/components/design/settings/fieldValidator.js     | 2 +-
 3 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/packages/bbui/src/Tooltip/Context.svelte b/packages/bbui/src/Tooltip/Context.svelte
index 69f9af5a63..025abb5e65 100644
--- a/packages/bbui/src/Tooltip/Context.svelte
+++ b/packages/bbui/src/Tooltip/Context.svelte
@@ -7,7 +7,7 @@
   export let visible = false
   export let offset = 0;
 
-  $: target = getContext(Context.PopoverRoot) || ".spectrum"
+  $: target = getContext(Context.PopoverRoot) || "#app"
 
   let hovering = false
   let wrapper
@@ -39,10 +39,6 @@
       const previousStyles = window.getComputedStyle(previousTooltip?.firstChild)
       const currentStyles = window.getComputedStyle(currentTooltip?.firstChild)
 
-      console.log(previousStyles.backgroundColor);
-      console.log(currentStyles.backgroundColor);
-      console.log("")
-
       currentTooltipWidth = currentTooltip.clientWidth
       currentTooltipHeight = currentTooltip.clientHeight
 
diff --git a/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte b/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
index 5f2bc6b214..f1478ad2bb 100644
--- a/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
@@ -207,7 +207,7 @@
     <div class="contextTooltipContent">
       <div class="contextTooltipHeader">
         <Icon name={getOptionIcon(currentOption)} />
-        <span>{currentOption}</span>
+        <span>{getOptionIconTooltip(currentOption)}</span>
       </div>
 
       {#if fieldSupport[currentOption]?.errors?.length > 0}
@@ -231,7 +231,7 @@
     <div class="contextTooltipContent">
       <div class="contextTooltipHeader">
         <Icon name={getOptionIcon(previousOption)} />
-        <span>{previousOption}</span>
+        <span>{getOptionIconTooltip(previousOption)}</span>
       </div>
 
       {#if fieldSupport[previousOption]?.errors?.length > 0}
@@ -273,6 +273,8 @@
   }
 
   .contextTooltipHeader {
+    background-color: var(--background-alt);
+    color: var(--ink);
     display: flex;
     align-items: center;
     height: var(--spectrum-alias-item-height-m);
@@ -288,10 +290,10 @@
 
   .contextTooltipContent {
     padding: 0px 12px;
+    color: black;
   }
 
   .contextTooltipHeader :global(svg) {
-    color: var(--ink);
     margin-right: 5px;
   }
 
@@ -307,6 +309,7 @@
     height: var(--spectrum-alias-item-height-m);
     padding: 0px var(--spectrum-alias-item-padding-m);
     margin-bottom: 12px;
+    color: black;
   }
   .supportLevel :global(svg) {
     margin-right: 5px;
diff --git a/packages/builder/src/components/design/settings/fieldValidator.js b/packages/builder/src/components/design/settings/fieldValidator.js
index 43c3f33db9..86412462b3 100644
--- a/packages/builder/src/components/design/settings/fieldValidator.js
+++ b/packages/builder/src/components/design/settings/fieldValidator.js
@@ -31,7 +31,7 @@ export const validators = {
         response.warnings.push(
           "String columns can be used as input for a chart, but non-numeric values may cause unexpected behavior.")
       }
-      if (fieldSchema.type === "date") {
+      if (fieldSchema.type === "datetime") {
         response.warnings.push(
           "This column can be used as input for a chart, but it is parsed differently for various charts.")
       }

From aa8795bc83669b7bc896daaa40a3240a72d67757 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Thu, 4 Apr 2024 08:56:46 +0100
Subject: [PATCH 017/123] Working after breakout

---
 .../controls/FieldContext/Chart.svelte        | 124 ++++++++++++++++++
 .../settings/controls/MultiFieldSelect.svelte |  70 ++++------
 2 files changed, 146 insertions(+), 48 deletions(-)
 create mode 100644 packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte

diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
new file mode 100644
index 0000000000..780ab4c696
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
@@ -0,0 +1,124 @@
+<script>
+  import { Icon, Heading, Multiselect, ContextTooltip } from "@budibase/bbui"
+  import { getDatasourceForProvider, getSchemaForDatasource } from "dataBinding"
+  import { selectedScreen } from "stores/builder"
+  import { createEventDispatcher } from "svelte"
+
+  export let supportLevelClass = ''
+  export let supportLevelIcon = ""
+  export let supportLevelIconTooltip = ""
+  export let supportLevelText = ""
+
+  export let columnIcon
+  export let columnName
+
+  export let errors = []
+  export let warnings = []
+
+</script>
+
+<div
+  class={`tooltipContents ${supportLevelClass}`}
+>
+  <div class={`supportLevel ${supportLevelClass}`}>
+    <Icon tooltip={supportLevelIconTooltip} name={supportLevelIcon} />
+    <p>{supportLevelText}</p>
+  </div>
+  <div class="contextTooltipContent">
+    <div class="contextTooltipHeader">
+      <Icon name={columnIcon} />
+      <span>{columnName}</span>
+    </div>
+
+    {#if errors.length > 0}
+      {#each errors as datum}
+        <p>{datum}</p>
+      {/each}
+    {:else if warnings.length > 0}
+      {#each warnings as datum}
+        <p>{datum}</p>
+      {/each}
+    {/if}
+  </div>
+</div>
+
+<style>
+  .tooltipContents {
+    max-width: 400px;
+    background-color: var(--spectrum-global-color-gray-200);
+    display: block;
+    padding: 0 0 12px 0 ;
+    border-radius: 5px;
+    box-sizing: border-box;
+  }
+
+  .tooltipContents.supportLevelUnsupported {
+    background-color: var(--red);
+    color: var(--ink)
+  }
+
+  .tooltipContents.supportLevelPartialSupport {
+    background-color: var(--yellow);
+    color: var(--ink)
+  }
+
+  .tooltipContents.supportLevelSupported {
+    background-color: var(--green);
+    color: var(--ink)
+  }
+
+  .contextTooltipHeader {
+    background-color: var(--background-alt);
+    color: var(--ink);
+    display: flex;
+    align-items: center;
+    height: var(--spectrum-alias-item-height-m);
+    padding: 0px var(--spectrum-alias-item-padding-m);
+    border-width: var(--spectrum-actionbutton-border-size);
+    border-radius: var(--spectrum-alias-border-radius-regular);
+    border: 1px solid
+      var(
+        --spectrum-actionbutton-m-border-color,
+        var(--spectrum-alias-border-color)
+      );
+  }
+
+  .contextTooltipContent {
+    padding: 0px 12px;
+    color: black;
+  }
+
+  .contextTooltipHeader :global(svg) {
+    margin-right: 5px;
+  }
+
+  .contextTooltipHeader :global(span) {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .supportLevel {
+    display: flex;
+    align-items: center;
+    height: var(--spectrum-alias-item-height-m);
+    padding: 0px var(--spectrum-alias-item-padding-m);
+    margin-bottom: 12px;
+    color: black;
+  }
+  .supportLevel :global(svg) {
+    margin-right: 5px;
+  }
+
+  .supportLevel.supportLevelUnsupported {
+    background-color: var(--red-light)
+  }
+
+  .supportLevel.supportLevelPartialSupport {
+    background-color: var(--yellow-light)
+  }
+
+  .supportLevel.supportLevelSupported {
+    background-color: var(--green-light)
+  }
+</style>
diff --git a/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte b/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
index f1478ad2bb..912292a449 100644
--- a/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
@@ -4,6 +4,7 @@
   import { selectedScreen } from "stores/builder"
   import { createEventDispatcher } from "svelte"
   import { validators, constants as validatorConstants } from "../fieldValidator";
+  import ChartFieldContext from './FieldContext/Chart.svelte'
 
   export let componentInstance = {}
   export let value = ""
@@ -197,54 +198,27 @@
   anchor={contextTooltipAnchor}
   offset={20}
 >
-  <div
-    class={`tooltipContents ${currentOptionSupport.class}`}
-  >
-    <div class={`supportLevel ${currentOptionSupport.class}`}>
-      <Icon tooltip={currentOptionSupport.iconTooltip} name={currentOptionSupport.icon} />
-      <p>{currentOptionSupport.text}</p>
-    </div>
-    <div class="contextTooltipContent">
-      <div class="contextTooltipHeader">
-        <Icon name={getOptionIcon(currentOption)} />
-        <span>{getOptionIconTooltip(currentOption)}</span>
-      </div>
-
-      {#if fieldSupport[currentOption]?.errors?.length > 0}
-        {#each (fieldSupport[currentOption].errors) as datum}
-          <p>{datum}</p>
-        {/each}
-      {:else if fieldSupport[currentOption]?.warnings?.length > 0}
-        {#each (fieldSupport[currentOption].warnings) as datum}
-          <p>{datum}</p>
-        {/each}
-      {/if}
-    </div>
-  </div>
-  <div slot="previous"
-    class={`tooltipContents ${previousOptionSupport.class}`}
-  >
-    <div class={`supportLevel ${previousOptionSupport.class}`}>
-      <Icon tooltip={previousOptionSupport.iconTooltip} name={previousOptionSupport.icon} />
-      <p>{previousOptionSupport.text}</p>
-    </div>
-    <div class="contextTooltipContent">
-      <div class="contextTooltipHeader">
-        <Icon name={getOptionIcon(previousOption)} />
-        <span>{getOptionIconTooltip(previousOption)}</span>
-      </div>
-
-      {#if fieldSupport[previousOption]?.errors?.length > 0}
-        {#each (fieldSupport[previousOption].errors) as datum}
-          <p>{datum}</p>
-        {/each}
-      {:else if fieldSupport[previousOption]?.warnings?.length > 0}
-        {#each (fieldSupport[previousOption].warnings) as datum}
-          <p>{datum}</p>
-        {/each}
-      {/if}
-    </div>
-  </div>
+  <ChartFieldContext
+    supportLevelClass={currentOptionSupport.class}
+    supportLevelIcon={currentOptionSupport.icon}
+    supportLevelIconTooltip={currentOptionSupport.iconTooltip}
+    supportLevelText={currentOptionSupport.text}
+    columnIcon={getOptionIcon(currentOption)}
+    columnName={getOptionIconTooltip(currentOption)}
+    errors={fieldSupport[currentOption]?.errors}
+    warnings={fieldSupport[currentOption]?.warnings}
+  />
+  <ChartFieldContext
+    slot="previous"
+    supportLevelClass={previousOptionSupport.class}
+    supportLevelIcon={previousOptionSupport.icon}
+    supportLevelIconTooltip={previousOptionSupport.iconTooltip}
+    supportLevelText={previousOptionSupport.text}
+    columnIcon={getOptionIcon(previousOption)}
+    columnName={getOptionIconTooltip(previousOption)}
+    errors={fieldSupport[previousOption]?.errors}
+    warnings={fieldSupport[previousOption]?.warnings}
+  />
 </ContextTooltip>
 
 <style>

From 6c823f5c608ff391f7a9fd3aa02ea2a3500583e0 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Thu, 4 Apr 2024 09:31:39 +0100
Subject: [PATCH 018/123] some more wip

---
 .../controls/FieldContext/Chart.svelte        | 45 ++++++++++++++++---
 .../settings/controls/MultiFieldSelect.svelte |  6 ++-
 2 files changed, 42 insertions(+), 9 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
index 780ab4c696..921c7a8871 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
@@ -10,6 +10,7 @@
   export let supportLevelText = ""
 
   export let columnIcon
+  export let columnType
   export let columnName
 
   export let errors = []
@@ -26,8 +27,14 @@
   </div>
   <div class="contextTooltipContent">
     <div class="contextTooltipHeader">
-      <Icon name={columnIcon} />
-      <span>{columnName}</span>
+      <span class="columnName">
+        {columnName} 
+      </span><span> is a </span>
+      <div class="link">
+        <Icon name={columnIcon} />
+        <span>{columnType}</span>
+      </div>
+      <span>column.</span>
     </div>
 
     {#if errors.length > 0}
@@ -68,12 +75,13 @@
   }
 
   .contextTooltipHeader {
+    row-gap: 4px;
     background-color: var(--background-alt);
     color: var(--ink);
     display: flex;
+    flex-wrap: wrap;
     align-items: center;
-    height: var(--spectrum-alias-item-height-m);
-    padding: 0px var(--spectrum-alias-item-padding-m);
+    padding: 4px 4px;
     border-width: var(--spectrum-actionbutton-border-size);
     border-radius: var(--spectrum-alias-border-radius-regular);
     border: 1px solid
@@ -84,15 +92,38 @@
   }
 
   .contextTooltipContent {
-    padding: 0px 12px;
+    color: var(--ink);
+    margin: 0px 12px;
     color: black;
   }
 
-  .contextTooltipHeader :global(svg) {
+  .contextTooltipContent > p {
+  }
+
+  .columnName {
+    padding: 3px 6px;
+    border-radius: 5px;
+    background-color: var(--grey-3);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
     margin-right: 5px;
   }
 
-  .contextTooltipHeader :global(span) {
+  .link {
+    display: inline-flex;
+    padding: 3px 6px;
+    border-radius: 5px;
+    background-color: var(--spectrum-global-color-blue-500);
+    color: white;
+    margin: 0 8px;
+  }
+
+  .link :global(svg) {
+    margin-right: 3px;
+  }
+
+  .link :global(span) {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
diff --git a/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte b/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
index 912292a449..ee450eada1 100644
--- a/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
@@ -204,7 +204,8 @@
     supportLevelIconTooltip={currentOptionSupport.iconTooltip}
     supportLevelText={currentOptionSupport.text}
     columnIcon={getOptionIcon(currentOption)}
-    columnName={getOptionIconTooltip(currentOption)}
+    columnName={currentOption}
+    columnType={getOptionIconTooltip(currentOption)}
     errors={fieldSupport[currentOption]?.errors}
     warnings={fieldSupport[currentOption]?.warnings}
   />
@@ -215,7 +216,8 @@
     supportLevelIconTooltip={previousOptionSupport.iconTooltip}
     supportLevelText={previousOptionSupport.text}
     columnIcon={getOptionIcon(previousOption)}
-    columnName={getOptionIconTooltip(previousOption)}
+    columnName={previousOption}
+    columnType={getOptionIconTooltip(previousOption)}
     errors={fieldSupport[previousOption]?.errors}
     warnings={fieldSupport[previousOption]?.warnings}
   />

From 2e68d8b7d6c51bb2c138584c065eb0d60e46a036 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Thu, 4 Apr 2024 09:53:15 +0100
Subject: [PATCH 019/123] vibing

---
 .../controls/FieldContext/Chart.svelte        | 37 +++++++++++++++----
 .../settings/controls/MultiFieldSelect.svelte | 14 ++++---
 .../design/settings/fieldValidator.js         |  8 ++--
 3 files changed, 43 insertions(+), 16 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
index 921c7a8871..52e5de4416 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
@@ -16,6 +16,22 @@
   export let errors = []
   export let warnings = []
 
+  const getDocLink = (columnType) => {
+    if (columnType === "number") {
+      return "https://docs.budibase.com/docs/number"
+    }
+    if (columnType === "string") {
+      return "https://docs.budibase.com/docs/text"
+    }
+    if (columnType === "attachment") {
+      return "https://docs.budibase.com/docs/attachments"
+    }
+
+    return ""
+  }
+
+  $: docLink = getDocLink(columnType);
+
 </script>
 
 <div
@@ -28,12 +44,12 @@
   <div class="contextTooltipContent">
     <div class="contextTooltipHeader">
       <span class="columnName">
-        {columnName} 
+        {columnName}
       </span><span> is a </span>
-      <div class="link">
+      <a target=”_blank” href={docLink} class="link">
         <Icon name={columnIcon} />
         <span>{columnType}</span>
-      </div>
+      </a>
       <span>column.</span>
     </div>
 
@@ -45,6 +61,8 @@
       {#each warnings as datum}
         <p>{datum}</p>
       {/each}
+    {:else}
+        <p>{supportLevelIconTooltip}</p>
     {/if}
   </div>
 </div>
@@ -75,13 +93,14 @@
   }
 
   .contextTooltipHeader {
-    row-gap: 4px;
+    row-gap: 6px;
+    column-gap: 5px;
     background-color: var(--background-alt);
     color: var(--ink);
     display: flex;
     flex-wrap: wrap;
     align-items: center;
-    padding: 4px 4px;
+    padding: 6px 8px;
     border-width: var(--spectrum-actionbutton-border-size);
     border-radius: var(--spectrum-alias-border-radius-regular);
     border: 1px solid
@@ -107,7 +126,6 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    margin-right: 5px;
   }
 
   .link {
@@ -116,7 +134,12 @@
     border-radius: 5px;
     background-color: var(--spectrum-global-color-blue-500);
     color: white;
-    margin: 0 8px;
+    transition: background-color 300ms
+  }
+
+  .link:hover {
+    background-color: var(--spectrum-global-color-blue-700);
+    cursor: pointer;
   }
 
   .link :global(svg) {
diff --git a/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte b/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
index ee450eada1..ccf3fe4948 100644
--- a/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
@@ -5,6 +5,7 @@
   import { createEventDispatcher } from "svelte"
   import { validators, constants as validatorConstants } from "../fieldValidator";
   import ChartFieldContext from './FieldContext/Chart.svelte'
+  import { FIELDS } from 'constants/backend'
 
   export let componentInstance = {}
   export let value = ""
@@ -63,9 +64,6 @@
   $: fieldSupport = getFieldSupport(schema, fieldValidator);
   $: boundValue = getValidOptions(value, options)
 
-  $: {
-    console.log(schema)
-  }
 
   const getValidOptions = (selectedOptions, allOptions) => {
     // Fix the hardcoded default string value
@@ -100,7 +98,14 @@
   const getOptionIconTooltip = optionKey => {
     const option = schema[optionKey]
 
-    return option?.type;
+    const type = option?.type;
+    const field = Object.values(FIELDS).find(f => f.type === type)
+
+    if (field) {
+      return field.name
+    }
+
+    return ""
   }
 
   const isOptionEnabled = optionKey => {
@@ -157,7 +162,6 @@
   $: previousOptionSupport = getSupportLevel(previousOption)
 
   const onOptionMouseenter = (e, option, idx) => {
-    console.log(option)
     contextTooltipId += 1;
     const invokedContextTooltipId = contextTooltipId
 
diff --git a/packages/builder/src/components/design/settings/fieldValidator.js b/packages/builder/src/components/design/settings/fieldValidator.js
index 86412462b3..0e6537ba60 100644
--- a/packages/builder/src/components/design/settings/fieldValidator.js
+++ b/packages/builder/src/components/design/settings/fieldValidator.js
@@ -20,20 +20,20 @@ export const validators = {
       }
       const generalUnsupportedFields = ["array", "attachment", "barcodeqr", "link", "bb_reference"]
       if (generalUnsupportedFields.includes(fieldSchema.type)) {
-        response.errors.push(`${capitalize(fieldSchema.type)} columns are unsupported.`)
+        response.errors.push('This column can not be used a chart input.')
       }
 
       if (fieldSchema.type === "json") {
-          response.errors.push(`JSON columns can not be used as chart inputs, but individual properties of this JSON field can be be used if supported.`)
+          response.errors.push(`This column can not be used as a chart input, but individual properties of a JSON object can be be used if supported.`)
       }
 
       if (fieldSchema.type === "string") {
         response.warnings.push(
-          "String columns can be used as input for a chart, but non-numeric values may cause unexpected behavior.")
+          "This column can be used as input for a chart, but non-numeric values may cause unexpected behavior.")
       }
       if (fieldSchema.type === "datetime") {
         response.warnings.push(
-          "This column can be used as input for a chart, but it is parsed differently for various charts.")
+          "This column can be used as input for a chart, but it may be parsed differently depending on the which is used.")
       }
 
       const isRequired = fieldSchema?.constraints?.presence?.allowEmpty === false

From e7c62c041bbe72e664e5d7ca20af7f15053e0597 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Thu, 4 Apr 2024 10:29:10 +0100
Subject: [PATCH 020/123] wip working

---
 .../controls/FieldContext/Chart.svelte        | 20 ++++++++++++++++++-
 .../design/settings/fieldValidator.js         |  4 ++--
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
index 52e5de4416..e75edf5b39 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
@@ -26,6 +26,9 @@
     if (columnType === "attachment") {
       return "https://docs.budibase.com/docs/attachments"
     }
+    if (columnType === "array") {
+      return "https://docs.budibase.com/docs/multi-select"
+    }
 
     return ""
   }
@@ -94,7 +97,7 @@
 
   .contextTooltipHeader {
     row-gap: 6px;
-    column-gap: 5px;
+    column-gap: 8px;
     background-color: var(--background-alt);
     color: var(--ink);
     display: flex;
@@ -117,9 +120,24 @@
   }
 
   .contextTooltipContent > p {
+    row-gap: 6px;
+    column-gap: 8px;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    padding: 6px 8px;
+    border-width: var(--spectrum-actionbutton-border-size);
+    border-radius: var(--spectrum-alias-border-radius-regular);
+    border: 1px solid
+      var(
+        --spectrum-actionbutton-m-border-color,
+        var(--spectrum-alias-border-color)
+      );
   }
 
   .columnName {
+
+    font-style: italic;
     padding: 3px 6px;
     border-radius: 5px;
     background-color: var(--grey-3);
diff --git a/packages/builder/src/components/design/settings/fieldValidator.js b/packages/builder/src/components/design/settings/fieldValidator.js
index 0e6537ba60..ff08533f4f 100644
--- a/packages/builder/src/components/design/settings/fieldValidator.js
+++ b/packages/builder/src/components/design/settings/fieldValidator.js
@@ -29,11 +29,11 @@ export const validators = {
 
       if (fieldSchema.type === "string") {
         response.warnings.push(
-          "This column can be used as input for a chart, but non-numeric values may cause unexpected behavior.")
+          "This column can be used as an input for a chart, but non-numeric values may cause unexpected behavior.")
       }
       if (fieldSchema.type === "datetime") {
         response.warnings.push(
-          "This column can be used as input for a chart, but it may be parsed differently depending on the which is used.")
+          "This column can be used as an input for a chart, but it may be parsed differently depending on which is used.")
       }
 
       const isRequired = fieldSchema?.constraints?.presence?.allowEmpty === false

From c0cc6b2afe55c0c4e41f0c62cdb5b9c0b6a6e2bf Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Thu, 4 Apr 2024 14:53:36 +0100
Subject: [PATCH 021/123] wip working looking okayish

---
 packages/bbui/src/Tooltip/Context.svelte      |   1 +
 .../controls/FieldContext/Chart.svelte        | 185 ++++++++----------
 .../settings/controls/MultiFieldSelect.svelte |  10 +-
 .../design/settings/fieldValidator.js         |   4 +-
 4 files changed, 88 insertions(+), 112 deletions(-)

diff --git a/packages/bbui/src/Tooltip/Context.svelte b/packages/bbui/src/Tooltip/Context.svelte
index 025abb5e65..261a34aa72 100644
--- a/packages/bbui/src/Tooltip/Context.svelte
+++ b/packages/bbui/src/Tooltip/Context.svelte
@@ -159,6 +159,7 @@
     box-sizing: border-box;
     opacity: 0;
     overflow: hidden;
+    border: 1px solid var(--grey-4);
 
     transition: width 300ms ease-in, height 300ms ease-in, top 300ms ease-in, left 300ms ease-in;
   }
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
index e75edf5b39..f25c0b0344 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
@@ -40,116 +40,99 @@
 <div
   class={`tooltipContents ${supportLevelClass}`}
 >
-  <div class={`supportLevel ${supportLevelClass}`}>
-    <Icon tooltip={supportLevelIconTooltip} name={supportLevelIcon} />
-    <p>{supportLevelText}</p>
+  <div class="columnName">
+    {columnName}
   </div>
-  <div class="contextTooltipContent">
-    <div class="contextTooltipHeader">
-      <span class="columnName">
-        {columnName}
-      </span><span> is a </span>
-      <a target=”_blank” href={docLink} class="link">
-        <Icon name={columnIcon} />
-        <span>{columnType}</span>
-      </a>
-      <span>column.</span>
+  <div class="divider"></div>
+  <div class="line">
+    <a target=”_blank” href={docLink} class="chip link">
+      <Icon size="S" name={columnIcon} />
+      <span>{columnType} Column</span>
+    </a>
+  </div>
+  <div class={`line ${supportLevelClass}`}>
+    <div class={`chip supportChip ${supportLevelClass}`}>
+      <Icon size="S" tooltip={supportLevelIconTooltip} name={supportLevelIcon} />
+      <span>{supportLevelText}</span>
+    </div>
+    <span>with</span>
+    <div class="chip link">
+      <Icon size="S" name={"GraphPie"} />
+      <span>Chart Components</span>
     </div>
-
-    {#if errors.length > 0}
-      {#each errors as datum}
-        <p>{datum}</p>
-      {/each}
-    {:else if warnings.length > 0}
-      {#each warnings as datum}
-        <p>{datum}</p>
-      {/each}
-    {:else}
-        <p>{supportLevelIconTooltip}</p>
-    {/if}
   </div>
+      {#if warnings.includes("string number warning")}
+  <div class={`line ${supportLevelClass}`}>
+    <span>
+        Non-numeric values will not be displayed
+    </span>
+  </div>
+      {/if}
+
+  <!--
+  {#if errors.length > 0}
+    {#each errors as datum}
+      <p>{datum}</p>
+    {/each}
+  {:else if warnings.length > 0}
+    {#each warnings as datum}
+      <p>{datum}</p>
+    {/each}
+  {:else}
+      <p>{supportLevelIconTooltip}</p>
+  {/if}
+  -->
 </div>
 
 <style>
+  .columnName {
+    font-style: italic;
+    padding: 3px 6px;
+    border-radius: 5px;
+    background-color: var(--grey-2);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: inline-block;
+    max-width: 100%;
+    box-sizing: border-box;
+  }
+
+  .divider {
+    border-bottom: 1px solid var(--grey-4);
+    margin: 6px 0 16px;
+  }
+
   .tooltipContents {
     max-width: 400px;
-    background-color: var(--spectrum-global-color-gray-200);
+    background-color: var(--background-alt);
     display: block;
-    padding: 0 0 12px 0 ;
+    padding: 12px;
     border-radius: 5px;
     box-sizing: border-box;
   }
 
-  .tooltipContents.supportLevelUnsupported {
-    background-color: var(--red);
-    color: var(--ink)
-  }
-
-  .tooltipContents.supportLevelPartialSupport {
-    background-color: var(--yellow);
-    color: var(--ink)
-  }
-
-  .tooltipContents.supportLevelSupported {
-    background-color: var(--green);
-    color: var(--ink)
-  }
-
-  .contextTooltipHeader {
-    row-gap: 6px;
-    column-gap: 8px;
+  .line {
     background-color: var(--background-alt);
     color: var(--ink);
-    display: flex;
-    flex-wrap: wrap;
     align-items: center;
-    padding: 6px 8px;
-    border-width: var(--spectrum-actionbutton-border-size);
-    border-radius: var(--spectrum-alias-border-radius-regular);
-    border: 1px solid
-      var(
-        --spectrum-actionbutton-m-border-color,
-        var(--spectrum-alias-border-color)
-      );
+    margin-bottom: 10px;
   }
 
-  .contextTooltipContent {
-    color: var(--ink);
-    margin: 0px 12px;
-    color: black;
+  .line > span {
+    display: inline;
+    margin-right: 5px;
   }
 
-  .contextTooltipContent > p {
-    row-gap: 6px;
-    column-gap: 8px;
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    padding: 6px 8px;
-    border-width: var(--spectrum-actionbutton-border-size);
-    border-radius: var(--spectrum-alias-border-radius-regular);
-    border: 1px solid
-      var(
-        --spectrum-actionbutton-m-border-color,
-        var(--spectrum-alias-border-color)
-      );
-  }
-
-  .columnName {
-
-    font-style: italic;
-    padding: 3px 6px;
-    border-radius: 5px;
-    background-color: var(--grey-3);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .link {
+  .chip {
     display: inline-flex;
     padding: 3px 6px;
     border-radius: 5px;
+    vertical-align: sub;
+    margin-right: 5px;
+  }
+
+  .link {
     background-color: var(--spectrum-global-color-blue-500);
     color: white;
     transition: background-color 300ms
@@ -164,33 +147,23 @@
     margin-right: 3px;
   }
 
-  .link :global(span) {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .supportLevel {
-    display: flex;
-    align-items: center;
-    height: var(--spectrum-alias-item-height-m);
-    padding: 0px var(--spectrum-alias-item-padding-m);
-    margin-bottom: 12px;
+  .supportChip {
     color: black;
   }
-  .supportLevel :global(svg) {
+
+  .supportChip :global(svg) {
     margin-right: 5px;
   }
 
-  .supportLevel.supportLevelUnsupported {
-    background-color: var(--red-light)
+  .supportChip.supportLevelUnsupported {
+    background-color: var(--red)
   }
 
-  .supportLevel.supportLevelPartialSupport {
-    background-color: var(--yellow-light)
+  .supportChip.supportLevelPartialSupport {
+    background-color: var(--yellow)
   }
 
-  .supportLevel.supportLevelSupported {
-    background-color: var(--green-light)
+  .supportChip.supportLevelSupported {
+    background-color: var(--green)
   }
 </style>
diff --git a/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte b/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
index ccf3fe4948..a06701747c 100644
--- a/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
@@ -128,7 +128,7 @@
         class: "supportLevelUnsupported",
         icon: "Alert",
         iconTooltip: fieldSupport[optionKey]?.message,
-        text: "Unsupported"
+        text: "Not Compatible"
       }
     }
 
@@ -137,7 +137,7 @@
         class: "supportLevelPartialSupport",
         icon: "AlertCheck",
         iconTooltip: fieldSupport[optionKey]?.message,
-        text: "Partial Support"
+        text: "Partially Compatible"
       }
     }
 
@@ -146,7 +146,7 @@
         class: "supportLevelSupported",
         icon: "CheckmarkCircle",
         iconTooltip: fieldSupport[optionKey]?.message,
-        text: "Supported"
+        text: "Compatible"
       }
     }
 
@@ -154,7 +154,7 @@
       class: "supportLevelUnsupported",
       icon: "Alert",
       iconTooltip: "",
-      text: "Unsupported"
+      text: "No Support"
     }
   }
 
@@ -203,6 +203,7 @@
   offset={20}
 >
   <ChartFieldContext
+    support={fieldSupport[previousOption]}
     supportLevelClass={currentOptionSupport.class}
     supportLevelIcon={currentOptionSupport.icon}
     supportLevelIconTooltip={currentOptionSupport.iconTooltip}
@@ -215,6 +216,7 @@
   />
   <ChartFieldContext
     slot="previous"
+    support={fieldSupport[previousOption]}
     supportLevelClass={previousOptionSupport.class}
     supportLevelIcon={previousOptionSupport.icon}
     supportLevelIconTooltip={previousOptionSupport.iconTooltip}
diff --git a/packages/builder/src/components/design/settings/fieldValidator.js b/packages/builder/src/components/design/settings/fieldValidator.js
index ff08533f4f..4eb3705152 100644
--- a/packages/builder/src/components/design/settings/fieldValidator.js
+++ b/packages/builder/src/components/design/settings/fieldValidator.js
@@ -10,7 +10,6 @@ export const constants = {
 
 export const validators = {
   chart: (fieldSchema) => {
-    console.log(fieldSchema);
     try {
       const response = {
         level: null,
@@ -28,8 +27,9 @@ export const validators = {
       }
 
       if (fieldSchema.type === "string") {
+
         response.warnings.push(
-          "This column can be used as an input for a chart, but non-numeric values may cause unexpected behavior.")
+          "string number warning")
       }
       if (fieldSchema.type === "datetime") {
         response.warnings.push(

From 3443fe0c6e10cf7220ccf5d88365910605ccc326 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Thu, 4 Apr 2024 15:05:11 +0100
Subject: [PATCH 022/123] wip

---
 .../controls/FieldContext/Chart.svelte        | 51 ++++++++++++-------
 1 file changed, 33 insertions(+), 18 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
index f25c0b0344..a17c1daceb 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
@@ -40,16 +40,18 @@
 <div
   class={`tooltipContents ${supportLevelClass}`}
 >
-  <div class="columnName">
-    {columnName}
-  </div>
-  <div class="divider"></div>
-  <div class="line">
-    <a target=”_blank” href={docLink} class="chip link">
+
+  <div class="topLine">
+    <div class="chip columnName">
+      {columnName}
+    </div>
+    <span> is a </span>
+    <a target=”_blank” href={docLink} class="chip link topLink">
       <Icon size="S" name={columnIcon} />
       <span>{columnType} Column</span>
     </a>
   </div>
+  <div class="divider"></div>
   <div class={`line ${supportLevelClass}`}>
     <div class={`chip supportChip ${supportLevelClass}`}>
       <Icon size="S" tooltip={supportLevelIconTooltip} name={supportLevelIcon} />
@@ -85,17 +87,28 @@
 </div>
 
 <style>
-  .columnName {
-    font-style: italic;
+  .chip {
+    display: inline-flex;
     padding: 3px 6px;
     border-radius: 5px;
+    vertical-align: sub;
+    margin-right: 5px;
+  }
+
+  .columnName {
+    font-style: italic;
     background-color: var(--grey-2);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    display: inline-block;
-    max-width: 100%;
     box-sizing: border-box;
+    display: block;
+    min-width: 0;
+    margin-right: 0;
+  }
+
+  .topLink {
+    flex-shrink: 0;
   }
 
   .divider {
@@ -112,6 +125,16 @@
     box-sizing: border-box;
   }
 
+  .topLine {
+    display: flex;
+    align-items: center;
+  }
+
+  .topLine > span {
+    flex-shrink: 0;
+    margin: 0 5px;
+  }
+
   .line {
     background-color: var(--background-alt);
     color: var(--ink);
@@ -124,14 +147,6 @@
     margin-right: 5px;
   }
 
-  .chip {
-    display: inline-flex;
-    padding: 3px 6px;
-    border-radius: 5px;
-    vertical-align: sub;
-    margin-right: 5px;
-  }
-
   .link {
     background-color: var(--spectrum-global-color-blue-500);
     color: white;

From c011ff1598053dfbfbb59e4d4bd4baf4db4cdf1e Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Thu, 4 Apr 2024 16:24:24 +0100
Subject: [PATCH 023/123] wipply

---
 .../controls/FieldContext/Chart.svelte        | 85 ++++++++++++++-----
 .../settings/controls/MultiFieldSelect.svelte |  4 +-
 .../design/settings/fieldValidator.js         |  2 +-
 3 files changed, 65 insertions(+), 26 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
index a17c1daceb..fc10fdf335 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
@@ -45,31 +45,55 @@
     <div class="chip columnName">
       {columnName}
     </div>
-    <span> is a </span>
+    <span class="text"> is a </span>
     <a target=”_blank” href={docLink} class="chip link topLink">
       <Icon size="S" name={columnIcon} />
-      <span>{columnType} Column</span>
+      <span class="text">{columnType} column</span>
     </a>
+    <span class="period">.</span>
   </div>
   <div class="divider"></div>
   <div class={`line ${supportLevelClass}`}>
+    <span class="bullet">•</span>
     <div class={`chip supportChip ${supportLevelClass}`}>
       <Icon size="S" tooltip={supportLevelIconTooltip} name={supportLevelIcon} />
-      <span>{supportLevelText}</span>
+      <span class="text">{supportLevelText}</span>
     </div>
-    <span>with</span>
+    <span class="text">with</span>
     <div class="chip link">
       <Icon size="S" name={"GraphPie"} />
-      <span>Chart Components</span>
+      <span class="text">Chart components</span>
     </div>
   </div>
-      {#if warnings.includes("string number warning")}
-  <div class={`line ${supportLevelClass}`}>
-    <span>
-        Non-numeric values will not be displayed
-    </span>
-  </div>
-      {/if}
+  {#if warnings.includes("string number warning")}
+    <div class={`line`}>
+      <span class="bullet">•</span>
+      <div class="chip link">
+        <Icon size="S" name={"123"} />
+        <span class="text">
+        Non-numeric values 
+        </span>
+      </div>
+      <span class="text">
+        will not be displayed
+      </span>
+    </div>
+  {/if}
+  {#if warnings.includes("optional warning")}
+    <div class={`line`}>
+      <span class="bullet">•</span>
+      <span class="text">No</span>
+      <div class="chip link">
+        <Icon size="S" name={"DataUnavailable"} />
+        <span class="text">
+          Required constraint
+        </span>
+      </div>
+      <span class="text">
+        so rows may be missing values
+      </span>
+    </div>
+  {/if}
 
   <!--
   {#if errors.length > 0}
@@ -93,11 +117,17 @@
     border-radius: 5px;
     vertical-align: sub;
     margin-right: 5px;
+    filter: brightness(90%);
+  }
+
+  .chip:hover {
+    filter: brightness(110%);
+    transition: filter 300ms
   }
 
   .columnName {
     font-style: italic;
-    background-color: var(--grey-2);
+    background-color: var(--grey-3);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -107,13 +137,20 @@
     margin-right: 0;
   }
 
+  .bullet {
+    color: var(--grey-5);
+    font-size: 17px;
+    display: inline block;
+    margin-right: 10px;
+  }
+
   .topLink {
     flex-shrink: 0;
   }
 
   .divider {
     border-bottom: 1px solid var(--grey-4);
-    margin: 6px 0 16px;
+    margin: 12px 0 12px;
   }
 
   .tooltipContents {
@@ -130,7 +167,7 @@
     align-items: center;
   }
 
-  .topLine > span {
+  .topLine > .text{
     flex-shrink: 0;
     margin: 0 5px;
   }
@@ -139,22 +176,24 @@
     background-color: var(--background-alt);
     color: var(--ink);
     align-items: center;
-    margin-bottom: 10px;
+    margin-bottom: 12px;
   }
 
-  .line > span {
+  .line:last-child {
+    margin-bottom: 0px;
+  }
+
+  .line > .text {
     display: inline;
     margin-right: 5px;
   }
 
   .link {
-    background-color: var(--spectrum-global-color-blue-500);
+    background-color: var(--bb-indigo);
     color: white;
-    transition: background-color 300ms
   }
 
   .link:hover {
-    background-color: var(--spectrum-global-color-blue-700);
     cursor: pointer;
   }
 
@@ -171,14 +210,14 @@
   }
 
   .supportChip.supportLevelUnsupported {
-    background-color: var(--red)
+    background-color: var(--red);
   }
 
   .supportChip.supportLevelPartialSupport {
-    background-color: var(--yellow)
+    background-color: var(--yellow);
   }
 
   .supportChip.supportLevelSupported {
-    background-color: var(--green)
+    background-color: var(--green);
   }
 </style>
diff --git a/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte b/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
index a06701747c..1d6c01205b 100644
--- a/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
@@ -128,7 +128,7 @@
         class: "supportLevelUnsupported",
         icon: "Alert",
         iconTooltip: fieldSupport[optionKey]?.message,
-        text: "Not Compatible"
+        text: "Not compatible"
       }
     }
 
@@ -137,7 +137,7 @@
         class: "supportLevelPartialSupport",
         icon: "AlertCheck",
         iconTooltip: fieldSupport[optionKey]?.message,
-        text: "Partially Compatible"
+        text: "Partially compatible"
       }
     }
 
diff --git a/packages/builder/src/components/design/settings/fieldValidator.js b/packages/builder/src/components/design/settings/fieldValidator.js
index 4eb3705152..5ecda9b1f8 100644
--- a/packages/builder/src/components/design/settings/fieldValidator.js
+++ b/packages/builder/src/components/design/settings/fieldValidator.js
@@ -39,7 +39,7 @@ export const validators = {
       const isRequired = fieldSchema?.constraints?.presence?.allowEmpty === false
       if (!isRequired) {
         response.warnings.push(
-          "This column is optional, and some rows may not have a value.")
+          "optional warning")
       }
 
       if (response.errors.length > 0) {

From 906f06238e90353c78afe41998d5c8177b9bd8a9 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Thu, 4 Apr 2024 21:40:20 +0100
Subject: [PATCH 024/123] wip my timbers

---
 .../controls/FieldContext/Chart.svelte        | 147 +++++++++++++-----
 1 file changed, 108 insertions(+), 39 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
index fc10fdf335..3f00b51a17 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
@@ -41,100 +41,106 @@
   class={`tooltipContents ${supportLevelClass}`}
 >
 
-  <div class="topLine">
+  <div class="line topLine">
+    <span class="bullet">•</span>
     <div class="chip columnName">
+      <span>
       {columnName}
+      </span>
     </div>
+    <span class="space" />
     <span class="text"> is a </span>
+    <span class="space" />
     <a target=”_blank” href={docLink} class="chip link topLink">
       <Icon size="S" name={columnIcon} />
       <span class="text">{columnType} column</span>
     </a>
     <span class="period">.</span>
   </div>
-  <div class="divider"></div>
   <div class={`line ${supportLevelClass}`}>
     <span class="bullet">•</span>
     <div class={`chip supportChip ${supportLevelClass}`}>
       <Icon size="S" tooltip={supportLevelIconTooltip} name={supportLevelIcon} />
       <span class="text">{supportLevelText}</span>
     </div>
+    <span class="space" />
     <span class="text">with</span>
+    <span class="space" />
     <div class="chip link">
       <Icon size="S" name={"GraphPie"} />
       <span class="text">Chart components</span>
     </div>
+    <span class="period">.</span>
   </div>
   {#if warnings.includes("string number warning")}
     <div class={`line`}>
       <span class="bullet">•</span>
-      <div class="chip link">
+      <span class="text">Any</span>
+    <span class="space" />
+      <div class="chip info">
         <Icon size="S" name={"123"} />
         <span class="text">
-        Non-numeric values 
+        Non-number values
         </span>
       </div>
+    <span class="space" />
       <span class="text">
-        will not be displayed
+        will be ignored
       </span>
+      <span class="period">.</span>
     </div>
   {/if}
   {#if warnings.includes("optional warning")}
     <div class={`line`}>
       <span class="bullet">•</span>
-      <span class="text">No</span>
+      <span class="text">No required</span>
+    <span class="space" />
       <div class="chip link">
         <Icon size="S" name={"DataUnavailable"} />
         <span class="text">
-          Required constraint
+          Constraint
         </span>
       </div>
+      <span class="comma">,</span>
       <span class="text">
-        so rows may be missing values
+        so values may be missing
       </span>
+      <span class="period">.</span>
     </div>
   {/if}
-
-  <!--
-  {#if errors.length > 0}
-    {#each errors as datum}
-      <p>{datum}</p>
-    {/each}
-  {:else if warnings.length > 0}
-    {#each warnings as datum}
-      <p>{datum}</p>
-    {/each}
-  {:else}
-      <p>{supportLevelIconTooltip}</p>
-  {/if}
-  -->
 </div>
 
 <style>
   .chip {
+    box-sizing: border-box;
     display: inline-flex;
     padding: 3px 6px;
     border-radius: 5px;
     vertical-align: sub;
-    margin-right: 5px;
-    filter: brightness(90%);
+    filter: brightness(100%);
   }
 
   .chip:hover {
-    filter: brightness(110%);
+    filter: brightness(120%);
     transition: filter 300ms
   }
 
+  .chip :global(svg) {
+    color:  var(--grey-6);
+  }
+
   .columnName {
-    font-style: italic;
+    vertical-align: baseline;
     background-color: var(--grey-3);
+    display: block;
+    font-style: italic;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     box-sizing: border-box;
-    display: block;
+    flex-grow: 0;
+    flex-shrink: 1;
     min-width: 0;
-    margin-right: 0;
   }
 
   .bullet {
@@ -144,8 +150,27 @@
     margin-right: 10px;
   }
 
-  .topLink {
-    flex-shrink: 0;
+  .period {
+    color: var(--grey-5);
+    font-size: 20px;
+    display: inline block;
+  }
+
+  .comma {
+    color: var(--grey-5);
+    font-size: 20px;
+    display: inline block;
+    margin-right: 4px;
+  }
+
+  .semiColon {
+    color: var(--grey-5);
+    font-size: 16px;
+    display: inline block;
+  }
+
+  .space {
+    margin-right: 5px;
   }
 
   .divider {
@@ -157,7 +182,7 @@
     max-width: 400px;
     background-color: var(--background-alt);
     display: block;
-    padding: 12px;
+    padding: 20px 16px;
     border-radius: 5px;
     box-sizing: border-box;
   }
@@ -167,9 +192,26 @@
     align-items: center;
   }
 
-  .topLine > .text{
+  .topLine .space {
+    margin-right: 7px;
     flex-shrink: 0;
-    margin: 0 5px;
+  }
+
+  .topLine .text {
+    flex-shrink: 0;
+  }
+
+  .topLine .period {
+    flex-shrink: 0;
+  }
+
+  .topLine .bullet {
+    flex-shrink: 0;
+  }
+
+  .topLink {
+    flex-shrink: 0;
+    margin-right: 2px;
   }
 
   .line {
@@ -185,24 +227,39 @@
 
   .line > .text {
     display: inline;
-    margin-right: 5px;
   }
 
   .link {
-    background-color: var(--bb-indigo);
+    background-color: var(--grey-3);
+    border: 1px solid red;
+    box-sizing: border-box;
+    border-color: var(--blue);
     color: white;
   }
 
+  .info {
+    background-color: var(--grey-3);
+    color: white;
+  }
+
+  .info :global(svg) {
+    margin-right: 3px;
+  }
+
   .link:hover {
     cursor: pointer;
   }
 
   .link :global(svg) {
     margin-right: 3px;
+    color: var(--blue);
   }
 
   .supportChip {
-    color: black;
+    background-color: var(--grey-3);
+    color: var(--ink);
+    border: 1px solid red;
+    box-sizing: border-box;
   }
 
   .supportChip :global(svg) {
@@ -210,14 +267,26 @@
   }
 
   .supportChip.supportLevelUnsupported {
-    background-color: var(--red);
+    border-color: var(--red);
+  }
+
+  .supportChip.supportLevelUnsupported :global(svg) {
+    color: var(--red);
   }
 
   .supportChip.supportLevelPartialSupport {
-    background-color: var(--yellow);
+    border-color: var(--yellow);
+  }
+
+  .supportChip.supportLevelPartialSupport :global(svg) {
+    color: var(--yellow);
   }
 
   .supportChip.supportLevelSupported {
-    background-color: var(--green);
+    border-color: var(--green);
+  }
+
+  .supportChip.supportLevelSupported :global(svg) {
+    color: var(--green);
   }
 </style>

From 40288ca3717c9c596cea8659bd9888ef622a91cc Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Thu, 4 Apr 2024 22:16:25 +0100
Subject: [PATCH 025/123] stop overflow at bottom

---
 packages/bbui/src/Tooltip/Context.svelte | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/bbui/src/Tooltip/Context.svelte b/packages/bbui/src/Tooltip/Context.svelte
index 261a34aa72..ba9f953115 100644
--- a/packages/bbui/src/Tooltip/Context.svelte
+++ b/packages/bbui/src/Tooltip/Context.svelte
@@ -39,6 +39,9 @@
       const previousStyles = window.getComputedStyle(previousTooltip?.firstChild)
       const currentStyles = window.getComputedStyle(currentTooltip?.firstChild)
 
+
+      const windowOffset = (window.innerHeight - offset) - (currentTooltip.clientHeight + rect.y)
+
       currentTooltipWidth = currentTooltip.clientWidth
       currentTooltipHeight = currentTooltip.clientHeight
 
@@ -47,7 +50,7 @@
 
       // - width to align to left side of anchor
       currentX = rect.x - currentTooltipWidth - offset
-      currentY = rect.y
+      currentY = windowOffset < 0 ? rect.y + windowOffset : rect.y
       const fadeIn = [{ opacity: "0" }, { opacity: "1" }];
       const fadeOut = [{ opacity: "1" }, { opacity: "0" }];
       const color = [{ backgroundColor: previousStyles.backgroundColor }, { backgroundColor: currentStyles.backgroundColor }];
@@ -166,7 +169,7 @@
 
   .screenSizeAbsoluteWrapper {
     width: 200vw;
-    height: 200vh;
+    height: 100vh;
     position: absolute;
     transition: top 300ms ease-in, left 300ms ease-in;
   }

From 41139a0dd46821222e17db8162e639c2931b33a4 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Fri, 5 Apr 2024 06:52:50 +0100
Subject: [PATCH 026/123] wip

---
 packages/bbui/src/Tooltip/Context.svelte | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/bbui/src/Tooltip/Context.svelte b/packages/bbui/src/Tooltip/Context.svelte
index ba9f953115..bbf137d279 100644
--- a/packages/bbui/src/Tooltip/Context.svelte
+++ b/packages/bbui/src/Tooltip/Context.svelte
@@ -56,14 +56,14 @@
       const color = [{ backgroundColor: previousStyles.backgroundColor }, { backgroundColor: currentStyles.backgroundColor }];
 
       const fadeInTiming = {
-        duration: 150,
-        delay: 150,
+        duration: 200,
+        delay: 100,
         iterations: 1,
         easing: "ease-in",
         fill: "both"
       };
       const fadeOutTiming = {
-        duration: 150,
+        duration: 200,
         iterations: 1,
         easing: "ease-in",
         fill: "forwards"

From 43e60f1305e2eeddfa013e2b0996378476abce0b Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Fri, 5 Apr 2024 06:58:40 +0100
Subject: [PATCH 027/123] wip

---
 .../settings/controls/FieldContext/Chart.svelte   | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
index 3f00b51a17..6cd69a49f3 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
@@ -230,11 +230,21 @@
   }
 
   .link {
-    background-color: var(--grey-3);
+    border-radius: 0;
+    background-color: transparent;
     border: 1px solid red;
+    border-width: 0 0 1px 0;
     box-sizing: border-box;
     border-color: var(--blue);
     color: white;
+    padding-left: 2px;
+    padding-right: 2px;
+    transition: background-color 200ms;
+  }
+
+  .link:hover {
+    cursor: pointer;
+    background-color: #ffffff0a;
   }
 
   .info {
@@ -246,9 +256,6 @@
     margin-right: 3px;
   }
 
-  .link:hover {
-    cursor: pointer;
-  }
 
   .link :global(svg) {
     margin-right: 3px;

From 1d08294c67133ed2642a4de0be326cf8c968548c Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Fri, 5 Apr 2024 07:33:14 +0100
Subject: [PATCH 028/123] before sidecar

---
 packages/bbui/src/Tooltip/Context.svelte | 14 +++-----------
 1 file changed, 3 insertions(+), 11 deletions(-)

diff --git a/packages/bbui/src/Tooltip/Context.svelte b/packages/bbui/src/Tooltip/Context.svelte
index bbf137d279..4f898d04d0 100644
--- a/packages/bbui/src/Tooltip/Context.svelte
+++ b/packages/bbui/src/Tooltip/Context.svelte
@@ -36,8 +36,6 @@
       }
 
       const rect = anchor.getBoundingClientRect();
-      const previousStyles = window.getComputedStyle(previousTooltip?.firstChild)
-      const currentStyles = window.getComputedStyle(currentTooltip?.firstChild)
 
 
       const windowOffset = (window.innerHeight - offset) - (currentTooltip.clientHeight + rect.y)
@@ -53,7 +51,6 @@
       currentY = windowOffset < 0 ? rect.y + windowOffset : rect.y
       const fadeIn = [{ opacity: "0" }, { opacity: "1" }];
       const fadeOut = [{ opacity: "1" }, { opacity: "0" }];
-      const color = [{ backgroundColor: previousStyles.backgroundColor }, { backgroundColor: currentStyles.backgroundColor }];
 
       const fadeInTiming = {
         duration: 200,
@@ -69,15 +66,8 @@
         fill: "forwards"
       };
 
-      const colorTiming = {
-        duration: 300,
-        iterations: 1,
-        easing: "ease-in"
-      };
-
       currentTooltip.animate(fadeIn, fadeInTiming);
       previousTooltip.animate(fadeOut, fadeOutTiming);
-      wrapper.animate(color, colorTiming);
 
       // Bypass animations if the tooltip has only just been opened
       if (initialShow) {
@@ -157,7 +147,9 @@
     position: absolute;
     z-index: 9999;
     pointer-events: none;
-    background-color: var(--spectrum-global-color-gray-200);
+    background-color: var(--background-alt);
+    box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.42);
+
     border-radius: 5px;
     box-sizing: border-box;
     opacity: 0;

From 10fb73b19ed5104b5d804bc53da8ef365b89c108 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Fri, 5 Apr 2024 08:44:00 +0100
Subject: [PATCH 029/123] wip

---
 packages/bbui/src/Tooltip/Context.svelte      |   9 +
 .../controls/FieldContext/Chart.svelte        | 172 +++++++++++++++---
 .../settings/controls/MultiFieldSelect.svelte |   7 +-
 3 files changed, 159 insertions(+), 29 deletions(-)

diff --git a/packages/bbui/src/Tooltip/Context.svelte b/packages/bbui/src/Tooltip/Context.svelte
index 4f898d04d0..d477783950 100644
--- a/packages/bbui/src/Tooltip/Context.svelte
+++ b/packages/bbui/src/Tooltip/Context.svelte
@@ -9,6 +9,7 @@
 
   $: target = getContext(Context.PopoverRoot) || "#app"
 
+  export let arbitrary = ""
   let hovering = false
   let wrapper
   let currentTooltip
@@ -30,10 +31,18 @@
   }
 
   const updatePosition = (anchor, currentTooltip, previousTooltip, wrapper) => {
+      if (arbitrary === "foo") {
+        console.log(currentTooltip, previousTooltip);
+      }
+
     requestAnimationFrame(() => {
       if (anchor == null || currentTooltip == null || previousTooltip == null || wrapper == null) {
         return;
       }
+      if (arbitrary === "foo") {
+        console.log("past here");
+      }
+
 
       const rect = anchor.getBoundingClientRect();
 
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
index 6cd69a49f3..3c0bb3f71a 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
@@ -12,15 +12,18 @@
   export let columnIcon
   export let columnType
   export let columnName
+  export let sidecar = false
 
   export let errors = []
   export let warnings = []
 
+  let root = null;
+
   const getDocLink = (columnType) => {
-    if (columnType === "number") {
+    if (columnType === "Number") {
       return "https://docs.budibase.com/docs/number"
     }
-    if (columnType === "string") {
+    if (columnType === "Text") {
       return "https://docs.budibase.com/docs/text"
     }
     if (columnType === "attachment") {
@@ -35,15 +38,31 @@
 
   $: docLink = getDocLink(columnType);
 
+  let sidecarSubject = null
+
+  const handleMouseenter = (option, idx) => {
+    sidecarSubject = option;
+    root = root
+  }
+
+  const handleMouseleave = (option) => {
+    sidecarSubject = null;
+  }
+
 </script>
 
 <div
+  bind:this={root}
   class={`tooltipContents ${supportLevelClass}`}
 >
 
   <div class="line topLine">
     <span class="bullet">•</span>
-    <div class="chip columnName">
+    <div
+      on:mouseenter={() => handleMouseenter("column")}
+      on:mouseleave={() => handleMouseleave("column")}
+      class="chip columnName"
+    >
       <span>
       {columnName}
       </span>
@@ -51,7 +70,7 @@
     <span class="space" />
     <span class="text"> is a </span>
     <span class="space" />
-    <a target=”_blank” href={docLink} class="chip link topLink">
+    <a target="_blank" rel="noopener noreferrer" href={docLink} class="chip link topLink">
       <Icon size="S" name={columnIcon} />
       <span class="text">{columnType} column</span>
     </a>
@@ -59,17 +78,21 @@
   </div>
   <div class={`line ${supportLevelClass}`}>
     <span class="bullet">•</span>
-    <div class={`chip supportChip ${supportLevelClass}`}>
+    <div 
+      class={`chip supportChip ${supportLevelClass}`}
+      on:mouseenter={() => handleMouseenter("support")}
+      on:mouseleave={() => handleMouseleave("support")}
+      >
       <Icon size="S" tooltip={supportLevelIconTooltip} name={supportLevelIcon} />
       <span class="text">{supportLevelText}</span>
     </div>
     <span class="space" />
     <span class="text">with</span>
     <span class="space" />
-    <div class="chip link">
+    <a target="_blank" rel="noopener noreferrer" href={"https://docs.budibase.com/docs/chart"} class="chip link topLink">
       <Icon size="S" name={"GraphPie"} />
       <span class="text">Chart components</span>
-    </div>
+    </a>
     <span class="period">.</span>
   </div>
   {#if warnings.includes("string number warning")}
@@ -77,10 +100,13 @@
       <span class="bullet">•</span>
       <span class="text">Any</span>
     <span class="space" />
-      <div class="chip info">
-        <Icon size="S" name={"123"} />
+    <div 
+      class="chip info"
+      on:mouseenter={() => handleMouseenter("stringsAndNumbers")}
+      on:mouseleave={() => handleMouseleave("stringsAndNumbers")}
+      >
         <span class="text">
-        Non-number values
+        non-number values
         </span>
       </div>
     <span class="space" />
@@ -93,15 +119,23 @@
   {#if warnings.includes("optional warning")}
     <div class={`line`}>
       <span class="bullet">•</span>
-      <span class="text">No required</span>
+      <span class="text">No</span>
     <span class="space" />
-      <div class="chip link">
+      <div 
+        class="chip info"
+        on:mouseenter={() => handleMouseenter("required")}
+        on:mouseleave={() => handleMouseleave("required")}
+        >
+          <span class="text">
+            required
+          </span>
+        </div>
+    <span class="space" />
+      <a target="_blank" rel="noopener noreferrer" href={"https://docs.budibase.com/docs/budibasedb#constraints"} class="chip link topLink">
         <Icon size="S" name={"DataUnavailable"} />
         <span class="text">
           Constraint
-        </span>
-      </div>
-      <span class="comma">,</span>
+        </span></a><span class="comma">,</span>
       <span class="text">
         so values may be missing
       </span>
@@ -110,7 +144,99 @@
   {/if}
 </div>
 
+{#if sidecar}
+  <ContextTooltip
+    arbitrary="foo"
+    visible={sidecarSubject !== null}
+    anchor={root}
+    offset={20}
+  >
+  <div class="sidecarContent">
+    {#if sidecarSubject === "column"}
+    {:else if sidecarSubject === "support"}
+        <span class="heading">Data/Component Compatibility</span>
+        <div class="divider" />
+        <div class="section">
+          <div
+            class={`chip supportChip supportLevelSupported`}
+            >
+            <Icon size="S" name={"CheckmarkCircle"} />
+            <span class="text">Compatible</span>
+          </div>
+          <span class="body">Fully compatible with the component as long as the data is present.</span>
+        </div>
+        <div class="section">
+          <div
+            class={`chip supportChip supportLevelPartialSupport`}
+            >
+            <Icon size="S" name={"AlertCheck"} />
+            <span class="text">Partially compatible</span>
+          </div>
+          <span class="body">Potentionally compatible with the component, but beware of other caveats mentioned in the context tooltip.</span>
+        </div>
+        <div class="section">
+          <div
+            class={`chip supportChip supportLevelUnsupported`}
+            >
+            <Icon size="S" name={"Alert"} />
+            <span class="text">Not compatible</span>
+          </div>
+          <span class="body">Imcompatible with the component.</span>
+        </div>
+
+
+    {:else if sidecarSubject === "stringsAndNumbers"}
+      <span class="heading">Text as Numbers</span>
+      <div class="divider" />
+      <div class="section">
+        Text can be used in place of numbers in certain scenarios, but care needs to be taken to ensure that non-numerical values aren't also present, otherwise they may be parsed incorrectly and lead to unexpected behavior.
+      </div>
+    {:else if sidecarSubject === "required"}
+      <span class="heading">'Required' Constraint</span>
+      <div class="divider" />
+      <div class="section">
+        <span class="body">A 'required' contraint can be applied to columns to ensure a value is always present. If a column doesn't have this constraint, then rows may be missing values.</span>
+      </div>
+    {/if}
+  </div>
+  </ContextTooltip>
+{/if}
+
 <style>
+  .sidecarContent {
+    max-width: 300px;
+    padding: 16px 12px 18px;
+  }
+
+  .heading {
+    font-weight: 600;
+  }
+
+  .section {
+    margin-bottom: 16px;
+  }
+  .section:last-child {
+    margin-bottom: 16px;
+  }
+
+  .section .body {
+    display: block;
+    margin-top: 5px;
+  }
+
+  /* BETWEEN STUFF */
+  /* BETWEEN STUFF */
+  /* BETWEEN STUFF */
+
+  .tooltipContents {
+    max-width: 450px;
+    background-color: var(--background-alt);
+    display: block;
+    padding: 20px 16px;
+    border-radius: 5px;
+    box-sizing: border-box;
+  }
+
   .chip {
     box-sizing: border-box;
     display: inline-flex;
@@ -178,14 +304,6 @@
     margin: 12px 0 12px;
   }
 
-  .tooltipContents {
-    max-width: 400px;
-    background-color: var(--background-alt);
-    display: block;
-    padding: 20px 16px;
-    border-radius: 5px;
-    box-sizing: border-box;
-  }
 
   .topLine {
     display: flex;
@@ -218,7 +336,7 @@
     background-color: var(--background-alt);
     color: var(--ink);
     align-items: center;
-    margin-bottom: 12px;
+    margin-bottom: 10px;
   }
 
   .line:last-child {
@@ -237,8 +355,8 @@
     box-sizing: border-box;
     border-color: var(--blue);
     color: white;
-    padding-left: 2px;
-    padding-right: 2px;
+    padding-left: 0px;
+    padding-right: 0px;
     transition: background-color 200ms;
   }
 
@@ -248,6 +366,8 @@
   }
 
   .info {
+
+    vertical-align: baseline;
     background-color: var(--grey-3);
     color: white;
   }
diff --git a/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte b/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
index 1d6c01205b..d53dbbf0a9 100644
--- a/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
@@ -151,10 +151,10 @@
     }
 
     return {
-      class: "supportLevelUnsupported",
-      icon: "Alert",
+      class: "supportLevelPartialSupport",
+      icon: "AlertCheck",
       iconTooltip: "",
-      text: "No Support"
+      text: "Partially Compatible"
     }
   }
 
@@ -203,6 +203,7 @@
   offset={20}
 >
   <ChartFieldContext
+    sidecar
     support={fieldSupport[previousOption]}
     supportLevelClass={currentOptionSupport.class}
     supportLevelIcon={currentOptionSupport.icon}

From 573be29452877d6157cf38c1aab6e1aba0b78faa Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Fri, 5 Apr 2024 08:48:34 +0100
Subject: [PATCH 030/123] working okay

---
 .../design/settings/controls/FieldContext/Chart.svelte      | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
index 3c0bb3f71a..290adc7a86 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
@@ -286,7 +286,7 @@
     color: var(--grey-5);
     font-size: 20px;
     display: inline block;
-    margin-right: 4px;
+    margin-right: 5px;
   }
 
   .semiColon {
@@ -311,8 +311,6 @@
   }
 
   .topLine .space {
-    margin-right: 7px;
-    flex-shrink: 0;
   }
 
   .topLine .text {
@@ -336,6 +334,8 @@
     background-color: var(--background-alt);
     color: var(--ink);
     align-items: center;
+    display: flex;
+
     margin-bottom: 10px;
   }
 

From 477813feef88788391c42552d5c2bd4ed9427059 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Fri, 5 Apr 2024 09:46:22 +0100
Subject: [PATCH 031/123] working

---
 packages/bbui/src/Tooltip/Context.svelte      |  8 --
 .../controls/FieldContext/Chart.svelte        | 75 ++++++++++++++++++-
 .../controls/FieldContext/Property.svelte     | 31 ++++++++
 .../settings/controls/MultiFieldSelect.svelte |  3 +-
 .../components/grid/cells/HeaderCell.svelte   |  1 +
 5 files changed, 105 insertions(+), 13 deletions(-)
 create mode 100644 packages/builder/src/components/design/settings/controls/FieldContext/Property.svelte

diff --git a/packages/bbui/src/Tooltip/Context.svelte b/packages/bbui/src/Tooltip/Context.svelte
index d477783950..442672a9c1 100644
--- a/packages/bbui/src/Tooltip/Context.svelte
+++ b/packages/bbui/src/Tooltip/Context.svelte
@@ -9,7 +9,6 @@
 
   $: target = getContext(Context.PopoverRoot) || "#app"
 
-  export let arbitrary = ""
   let hovering = false
   let wrapper
   let currentTooltip
@@ -31,17 +30,10 @@
   }
 
   const updatePosition = (anchor, currentTooltip, previousTooltip, wrapper) => {
-      if (arbitrary === "foo") {
-        console.log(currentTooltip, previousTooltip);
-      }
-
     requestAnimationFrame(() => {
       if (anchor == null || currentTooltip == null || previousTooltip == null || wrapper == null) {
         return;
       }
-      if (arbitrary === "foo") {
-        console.log("past here");
-      }
 
 
       const rect = anchor.getBoundingClientRect();
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
index 290adc7a86..9e96997e9e 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
@@ -3,6 +3,7 @@
   import { getDatasourceForProvider, getSchemaForDatasource } from "dataBinding"
   import { selectedScreen } from "stores/builder"
   import { createEventDispatcher } from "svelte"
+  import Property from './Property.svelte'
 
   export let supportLevelClass = ''
   export let supportLevelIcon = ""
@@ -17,6 +18,12 @@
   export let errors = []
   export let warnings = []
 
+  export let schema
+
+  $: {
+    console.log(schema)
+  }
+
   let root = null;
 
   const getDocLink = (columnType) => {
@@ -26,12 +33,21 @@
     if (columnType === "Text") {
       return "https://docs.budibase.com/docs/text"
     }
-    if (columnType === "attachment") {
+    if (columnType === "Attachment") {
       return "https://docs.budibase.com/docs/attachments"
     }
-    if (columnType === "array") {
+    if (columnType === "Multi-select") {
       return "https://docs.budibase.com/docs/multi-select"
     }
+    if (columnType === "JSON") {
+      return "https://docs.budibase.com/docs/json"
+    }
+    if (columnType === "Date/Time") {
+      return "https://docs.budibase.com/docs/datetime"
+    }
+    if (columnType === "User") {
+      return "https://docs.budibase.com/docs/user"
+    }
 
     return ""
   }
@@ -146,13 +162,61 @@
 
 {#if sidecar}
   <ContextTooltip
-    arbitrary="foo"
+    noAnimation
     visible={sidecarSubject !== null}
     anchor={root}
     offset={20}
   >
   <div class="sidecarContent">
     {#if sidecarSubject === "column"}
+      <div class="heading wrapper">
+      <span class="heading">{columnName}</span>
+      </div>
+      <div class="divider" />
+      <div class="section">
+        {#if schema.type === "string"}
+          <Property
+            name="Max Length"
+            value={schema?.constraints?.length?.maximum ?? "None"}
+          />
+        {:else if schema.type === "datetime"}
+          <Property
+            name="Earliest"
+            value={schema?.constraints?.datetime?.earliest === "" ? "None" : schema?.constraints?.datetime?.earliest}
+          />
+          <Property
+            name="Latest"
+            value={schema?.constraints?.datetime?.latest === "" ? "None" : schema?.constraints?.datetime?.latest}
+          />
+          <Property
+            name="Ignore time zones"
+            value={schema?.ignoreTimeZones === true ? "Yes" : "No"}
+          />
+          <Property
+            name="Date only"
+            value={schema?.dateOnly === true ? "Yes" : "No"}
+          />
+        {:else if schema.type === "number"}
+          <Property
+            name="Min Value"
+            value={schema?.constraints?.numericality?.greaterThanOrEqualTo === "" ? "None" : schema?.constraints?.numericality?.greaterThanOrEqualTo}
+          />
+          <Property
+            name="Max Value"
+            value={schema?.constraints?.numericality?.lessThanOrEqualTo === "" ? "None" : schema?.constraints?.numericality?.lessThanOrEqualTo}
+          />
+        {:else if schema.type === "json"}
+          <Property
+            pre
+            name="Schema"
+            value={JSON.stringify(schema?.schema ?? {}, null, 2)}
+          />
+        {/if}
+        <Property
+          name="Required"
+          value={schema?.constraints?.presence?.allowEmpty === false ? "Yes" : "No"}
+        />
+      </div>
     {:else if sidecarSubject === "support"}
         <span class="heading">Data/Component Compatibility</span>
         <div class="divider" />
@@ -195,7 +259,7 @@
       <span class="heading">'Required' Constraint</span>
       <div class="divider" />
       <div class="section">
-        <span class="body">A 'required' contraint can be applied to columns to ensure a value is always present. If a column doesn't have this constraint, then rows may be missing values.</span>
+        <span class="body">A 'required' contraint can be applied to columns to ensure a value is always present. If a column doesn't have this constraint, then its value for a particular row could he missing.</span>
       </div>
     {/if}
   </div>
@@ -210,6 +274,9 @@
 
   .heading {
     font-weight: 600;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   .section {
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/Property.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/Property.svelte
new file mode 100644
index 0000000000..c929072fed
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/Property.svelte
@@ -0,0 +1,31 @@
+<script>
+  export let name;
+  export let value;
+  export let pre;
+</script>
+
+<div class="property">
+  
+{#if pre}
+<pre class="pre propertyValue">
+{value}
+</pre>
+{:else}
+  <span class="propertyName">
+    {name}
+  </span>
+  <span class="propertyDivider">-</span>
+  <span class="propertyValue">
+    {value}
+  </span>
+{/if}
+</div>
+
+<style>
+.pre {
+  padding: 4px;
+  border-radius: 3px;
+  width: 250px;
+  background-color: black;
+}
+</style>
diff --git a/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte b/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
index d53dbbf0a9..56bc79e6a8 100644
--- a/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
@@ -204,7 +204,8 @@
 >
   <ChartFieldContext
     sidecar
-    support={fieldSupport[previousOption]}
+    schema={schema[currentOption]}
+    support={fieldSupport[currentOption]}
     supportLevelClass={currentOptionSupport.class}
     supportLevelIcon={currentOptionSupport.icon}
     supportLevelIconTooltip={currentOptionSupport.iconTooltip}
diff --git a/packages/frontend-core/src/components/grid/cells/HeaderCell.svelte b/packages/frontend-core/src/components/grid/cells/HeaderCell.svelte
index 657f618759..4f861c84a1 100644
--- a/packages/frontend-core/src/components/grid/cells/HeaderCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/HeaderCell.svelte
@@ -102,6 +102,7 @@
 
   const editColumn = async () => {
     editIsOpen = true
+    console.log(column.schema);
     await tick()
     dispatch("edit-column", column.schema)
   }

From b1aa8b36f2599b1bc1a2685aa725575225c23c9b Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Fri, 5 Apr 2024 09:48:38 +0100
Subject: [PATCH 032/123] no animate

---
 packages/bbui/src/Tooltip/Context.svelte | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/packages/bbui/src/Tooltip/Context.svelte b/packages/bbui/src/Tooltip/Context.svelte
index 442672a9c1..68c4f1336d 100644
--- a/packages/bbui/src/Tooltip/Context.svelte
+++ b/packages/bbui/src/Tooltip/Context.svelte
@@ -6,6 +6,7 @@
   export let anchor
   export let visible = false
   export let offset = 0;
+  export let noAnimation = false
 
   $: target = getContext(Context.PopoverRoot) || "#app"
 
@@ -67,8 +68,10 @@
         fill: "forwards"
       };
 
+      if (!noAnimation) {
       currentTooltip.animate(fadeIn, fadeInTiming);
       previousTooltip.animate(fadeOut, fadeOutTiming);
+      }
 
       // Bypass animations if the tooltip has only just been opened
       if (initialShow) {
@@ -115,6 +118,7 @@
     style:height={`${currentTooltipHeight}px`}
     class="tooltip"
     class:visible={visible || hovering}
+    class:noAnimation
   >
   <!-- absolutely position element with the opposite positioning, so that the tooltip elements can be positioned
     using the same values as the root wrapper, while still being occluded by it.
@@ -122,6 +126,7 @@
     <div class="screenSizeAbsoluteWrapper"
       style:left={`${-currentX}px`}
       style:top={`${-currentY}px`}
+    class:noAnimation
       >
       <div
         bind:this={currentTooltip}
@@ -167,6 +172,10 @@
     transition: top 300ms ease-in, left 300ms ease-in;
   }
 
+  .noAnimation {
+    transition: none;
+  }
+
   .visible {
     opacity: 1;
     pointer-events: auto;

From 707c7de53669f1c1fc029f0e444ce7e4926b584f Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Fri, 5 Apr 2024 10:06:11 +0100
Subject: [PATCH 033/123] working seemingly

---
 .../design/settings/controls/FieldContext/Chart.svelte   | 9 ++++++---
 .../design/settings/controls/MultiFieldSelect.svelte     | 7 +++++++
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
index 9e96997e9e..916ac4446f 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
@@ -17,6 +17,7 @@
 
   export let errors = []
   export let warnings = []
+  export let tableHref = () => {}
 
   export let schema
 
@@ -74,15 +75,17 @@
 
   <div class="line topLine">
     <span class="bullet">•</span>
-    <div
+    <a
+      target="_blank" rel="noopener noreferrer"
       on:mouseenter={() => handleMouseenter("column")}
       on:mouseleave={() => handleMouseleave("column")}
+      href={tableHref}
       class="chip columnName"
     >
       <span>
       {columnName}
       </span>
-    </div>
+    </a>
     <span class="space" />
     <span class="text"> is a </span>
     <span class="space" />
@@ -334,6 +337,7 @@
     flex-grow: 0;
     flex-shrink: 1;
     min-width: 0;
+    color: var(--grey-8);
   }
 
   .bullet {
@@ -436,7 +440,6 @@
 
     vertical-align: baseline;
     background-color: var(--grey-3);
-    color: white;
   }
 
   .info :global(svg) {
diff --git a/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte b/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
index 56bc79e6a8..4b0fd1fa2b 100644
--- a/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
@@ -6,12 +6,17 @@
   import { validators, constants as validatorConstants } from "../fieldValidator";
   import ChartFieldContext from './FieldContext/Chart.svelte'
   import { FIELDS } from 'constants/backend'
+  import { goto, params } from "@roxi/routify"
 
   export let componentInstance = {}
   export let value = ""
   export let placeholder
   export let fieldValidator
 
+  $: {
+    console.log($params)
+  }
+
   let contextTooltipId = 0;
   let contextTooltipAnchor = null
   let currentOption = null
@@ -59,6 +64,7 @@
 
   const dispatch = createEventDispatcher()
   $: datasource = getDatasourceForProvider($selectedScreen, componentInstance)
+  $: console.log(datasource)
   $: schema = getSchemaForDatasource($selectedScreen, datasource).schema
   $: options = Object.keys(schema || {})
   $: fieldSupport = getFieldSupport(schema, fieldValidator);
@@ -204,6 +210,7 @@
 >
   <ChartFieldContext
     sidecar
+    tableHref={`/builder/app/${$params.application}/data/table/${datasource.tableId}`}
     schema={schema[currentOption]}
     support={fieldSupport[currentOption]}
     supportLevelClass={currentOptionSupport.class}

From e2827fd9c1703f696629aeed4f7799b24dd6cd84 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Mon, 8 Apr 2024 01:02:49 +0100
Subject: [PATCH 034/123] wip

---
 .../design/settings/controls/FieldContext/Property.svelte  | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/Property.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/Property.svelte
index c929072fed..cc4e91da75 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/Property.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/Property.svelte
@@ -22,6 +22,13 @@
 </div>
 
 <style>
+  .propertyDivider {
+    padding: 4px;
+  }
+  .propertyName {
+    font-style: italic;
+
+  }
 .pre {
   padding: 4px;
   border-radius: 3px;

From 203d13881dfea46dba988ea3e9af7d836093d727 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Mon, 8 Apr 2024 07:47:31 +0100
Subject: [PATCH 035/123] wip

---
 packages/bbui/src/Tooltip/Context.svelte      |  1 -
 .../controls/FieldContext/Chart.svelte        |  4 ---
 .../settings/controls/MultiFieldSelect.svelte | 34 +++++++++----------
 3 files changed, 16 insertions(+), 23 deletions(-)

diff --git a/packages/bbui/src/Tooltip/Context.svelte b/packages/bbui/src/Tooltip/Context.svelte
index 68c4f1336d..10f050c7b6 100644
--- a/packages/bbui/src/Tooltip/Context.svelte
+++ b/packages/bbui/src/Tooltip/Context.svelte
@@ -36,7 +36,6 @@
         return;
       }
 
-
       const rect = anchor.getBoundingClientRect();
 
 
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
index 916ac4446f..90ea990dfd 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
@@ -21,10 +21,6 @@
 
   export let schema
 
-  $: {
-    console.log(schema)
-  }
-
   let root = null;
 
   const getDocLink = (columnType) => {
diff --git a/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte b/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
index 4b0fd1fa2b..c505d05afd 100644
--- a/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
@@ -7,6 +7,7 @@
   import ChartFieldContext from './FieldContext/Chart.svelte'
   import { FIELDS } from 'constants/backend'
   import { goto, params } from "@roxi/routify"
+  import { debounce } from "lodash"
 
   export let componentInstance = {}
   export let value = ""
@@ -167,28 +168,25 @@
   $: currentOptionSupport = getSupportLevel(currentOption)
   $: previousOptionSupport = getSupportLevel(previousOption)
 
-  const onOptionMouseenter = (e, option, idx) => {
-    contextTooltipId += 1;
-    const invokedContextTooltipId = contextTooltipId
+  const updateTooltip = debounce((e, option) => {
+    if (option == null) {
+        contextTooltipVisible = false;
+    } else {
+    contextTooltipAnchor = e?.target;
+    previousOption = currentOption;
+    currentOption = option;
+    contextTooltipVisible = true;
+    currentOptionSupport = getSupportLevel(currentOption)
+    previousOptionSupport = getSupportLevel(previousOption)
+    }
+  }, 200);
 
-    setTimeout(() => {
-      if (contextTooltipId === invokedContextTooltipId) {
-        contextTooltipAnchor = e.target;
-        previousOption = currentOption;
-        currentOption = option;
-        contextTooltipVisible = true;
-        currentOptionSupport = getSupportLevel(currentOption)
-        previousOptionSupport = getSupportLevel(previousOption)
-      }
-    }, 200)
+  const onOptionMouseenter = (e, option, idx) => {
+    updateTooltip(e, option);
   }
 
   const onOptionMouseleave = (e, option) => {
-    setTimeout(() => {
-      if (option === currentOption) {
-        contextTooltipVisible = false;
-      }
-    }, 600)
+    updateTooltip(e, null);
   }
 </script>
 

From 95878f445a7dd79f0a6474fb0882f58d6d1330fc Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Mon, 8 Apr 2024 08:14:56 +0100
Subject: [PATCH 036/123] wip component infoword

---
 .../controls/FieldContext/Chart.svelte        | 76 ++++++++-----------
 .../controls/FieldContext/InfoWord.svelte     | 50 ++++++++++++
 2 files changed, 83 insertions(+), 43 deletions(-)
 create mode 100644 packages/builder/src/components/design/settings/controls/FieldContext/InfoWord.svelte

diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
index 90ea990dfd..eb7a2ef06e 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
@@ -4,6 +4,7 @@
   import { selectedScreen } from "stores/builder"
   import { createEventDispatcher } from "svelte"
   import Property from './Property.svelte'
+  import InfoWord from './InfoWord.svelte'
 
   export let supportLevelClass = ''
   export let supportLevelIcon = ""
@@ -220,30 +221,27 @@
         <span class="heading">Data/Component Compatibility</span>
         <div class="divider" />
         <div class="section">
-          <div
-            class={`chip supportChip supportLevelSupported`}
-            >
-            <Icon size="S" name={"CheckmarkCircle"} />
-            <span class="text">Compatible</span>
-          </div>
+          <InfoWord
+            icon="CheckmarkCircle"
+            color="var(--green)"
+            text="Compatible"
+          />
           <span class="body">Fully compatible with the component as long as the data is present.</span>
         </div>
         <div class="section">
-          <div
-            class={`chip supportChip supportLevelPartialSupport`}
-            >
-            <Icon size="S" name={"AlertCheck"} />
-            <span class="text">Partially compatible</span>
-          </div>
-          <span class="body">Potentionally compatible with the component, but beware of other caveats mentioned in the context tooltip.</span>
+          <InfoWord
+            icon="AlertCheck"
+            color="var(--yellow)"
+            text="Possibly compatible"
+          />
+          <span class="body">Possibly compatible with the component, but beware of other caveats mentioned in the context tooltip.</span>
         </div>
         <div class="section">
-          <div
-            class={`chip supportChip supportLevelUnsupported`}
-            >
-            <Icon size="S" name={"Alert"} />
-            <span class="text">Not compatible</span>
-          </div>
+          <InfoWord
+            icon="Alert"
+            color="var(--red)"
+            text="Not compatible"
+          />
           <span class="body">Imcompatible with the component.</span>
         </div>
 
@@ -303,24 +301,6 @@
     box-sizing: border-box;
   }
 
-  .chip {
-    box-sizing: border-box;
-    display: inline-flex;
-    padding: 3px 6px;
-    border-radius: 5px;
-    vertical-align: sub;
-    filter: brightness(100%);
-  }
-
-  .chip:hover {
-    filter: brightness(120%);
-    transition: filter 300ms
-  }
-
-  .chip :global(svg) {
-    color:  var(--grey-6);
-  }
-
   .columnName {
     vertical-align: baseline;
     background-color: var(--grey-3);
@@ -380,8 +360,22 @@
   .topLine .space {
   }
 
-  .topLine .text {
-    flex-shrink: 0;
+  .chip {
+    box-sizing: border-box;
+    display: inline-flex;
+    padding: 3px 6px;
+    border-radius: 5px;
+    vertical-align: sub;
+    filter: brightness(100%);
+  }
+
+  .chip:hover {
+    filter: brightness(120%);
+    transition: filter 300ms
+  }
+
+  .chip :global(svg) {
+    color:  var(--grey-6);
   }
 
   .topLine .period {
@@ -410,10 +404,6 @@
     margin-bottom: 0px;
   }
 
-  .line > .text {
-    display: inline;
-  }
-
   .link {
     border-radius: 0;
     background-color: transparent;
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/InfoWord.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/InfoWord.svelte
new file mode 100644
index 0000000000..8abf2ca79d
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/InfoWord.svelte
@@ -0,0 +1,50 @@
+<script>
+  import { Icon } from "@budibase/bbui"
+  export let icon = ""
+  export let color = "initial"
+  export let text = ""
+</script>
+
+<div
+  role="tooltip"
+  class="chip"
+  style:color={color}
+  style:border-color={color}
+  on:mouseenter
+  on:mouseleave
+  >
+  <Icon size="S" name={icon} />
+  <span class="text">
+    <slot>
+      {text}
+    </slot>
+  </span>
+</div>
+
+<style>
+  .chip {
+    display: inline-flex;
+    box-sizing: border-box;
+    padding: 3px 6px;
+    border-radius: 5px;
+    vertical-align: sub;
+    filter: brightness(100%);
+    background-color: var(--grey-3);
+    border: 1px solid var(--grey-3);
+  }
+
+  .chip:hover {
+    filter: brightness(120%);
+    transition: filter 300ms
+  }
+
+  .chip :global(svg) {
+    color: inherit;
+    margin-right: 5px;
+  }
+
+  .text {
+    color: var(--ink);
+    flex-shrink: 0;
+  }
+</style>

From bd002db0e777c038e60faa8640d9e861a7e64220 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Mon, 8 Apr 2024 08:29:55 +0100
Subject: [PATCH 037/123] wip component infoword

---
 .../controls/FieldContext/Chart.svelte        | 15 ++---
 .../controls/FieldContext/InfoWord.svelte     | 64 ++++++++++++++-----
 2 files changed, 54 insertions(+), 25 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
index eb7a2ef06e..30a6faf102 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
@@ -72,17 +72,12 @@
 
   <div class="line topLine">
     <span class="bullet">•</span>
-    <a
-      target="_blank" rel="noopener noreferrer"
+    <InfoWord
       on:mouseenter={() => handleMouseenter("column")}
       on:mouseleave={() => handleMouseleave("column")}
       href={tableHref}
-      class="chip columnName"
-    >
-      <span>
-      {columnName}
-      </span>
-    </a>
+      text={columnName}
+    />
     <span class="space" />
     <span class="text"> is a </span>
     <span class="space" />
@@ -264,6 +259,10 @@
 {/if}
 
 <style>
+  .text {
+    flex-shrink: 0;
+  }
+
   .sidecarContent {
     max-width: 300px;
     padding: 16px 12px 18px;
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/InfoWord.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/InfoWord.svelte
index 8abf2ca79d..632d2a5083 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/InfoWord.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/InfoWord.svelte
@@ -1,25 +1,52 @@
 <script>
   import { Icon } from "@budibase/bbui"
-  export let icon = ""
-  export let color = "initial"
+  export let icon = null
+  export let color = null
   export let text = ""
+  export let href = null
 </script>
 
-<div
-  role="tooltip"
-  class="chip"
-  style:color={color}
-  style:border-color={color}
-  on:mouseenter
-  on:mouseleave
+
+{#if href !== null}
+  <a
+    tabindex="0"
+    {href}
+    rel="noopener noreferrer"
+    target="_blank"
+    class="chip"
+    style:color={color}
+    style:border-color={color}
+    on:mouseenter
+    on:mouseleave
   >
-  <Icon size="S" name={icon} />
-  <span class="text">
-    <slot>
-      {text}
-    </slot>
-  </span>
-</div>
+    {#if icon}
+      <Icon size="S" name={icon} />
+    {/if}
+    <span class="text">
+      <slot>
+        {text}
+      </slot>
+    </span>
+  </a>
+{:else}
+  <div
+    role="tooltip"
+    class="chip"
+    style:color={color}
+    style:border-color={color}
+    on:mouseenter
+    on:mouseleave
+  >
+    {#if icon}
+      <Icon size="S" name={icon} />
+    {/if}
+    <span class="text">
+      <slot>
+        {text}
+      </slot>
+    </span>
+  </div>
+{/if}
 
 <style>
   .chip {
@@ -31,6 +58,7 @@
     filter: brightness(100%);
     background-color: var(--grey-3);
     border: 1px solid var(--grey-3);
+    overflow: hidden;
   }
 
   .chip:hover {
@@ -45,6 +73,8 @@
 
   .text {
     color: var(--ink);
-    flex-shrink: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 </style>

From ca14c97491d244f704cdba5ef7d3c97aa15e3283 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Mon, 8 Apr 2024 08:36:43 +0100
Subject: [PATCH 038/123] infoword imp

---
 .../controls/FieldContext/Chart.svelte        | 36 ++++++++-----------
 .../settings/controls/MultiFieldSelect.svelte |  6 ++++
 2 files changed, 20 insertions(+), 22 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
index 30a6faf102..7ef58adbaa 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
@@ -7,6 +7,7 @@
   import InfoWord from './InfoWord.svelte'
 
   export let supportLevelClass = ''
+  export let supportLevelIconColor = ""
   export let supportLevelIcon = ""
   export let supportLevelIconTooltip = ""
   export let supportLevelText = ""
@@ -89,14 +90,13 @@
   </div>
   <div class={`line ${supportLevelClass}`}>
     <span class="bullet">•</span>
-    <div 
-      class={`chip supportChip ${supportLevelClass}`}
+    <InfoWord
       on:mouseenter={() => handleMouseenter("support")}
       on:mouseleave={() => handleMouseleave("support")}
-      >
-      <Icon size="S" tooltip={supportLevelIconTooltip} name={supportLevelIcon} />
-      <span class="text">{supportLevelText}</span>
-    </div>
+      icon={supportLevelIcon}
+      color={supportLevelIconColor}
+      text={supportLevelText}
+    />
     <span class="space" />
     <span class="text">with</span>
     <span class="space" />
@@ -111,15 +111,11 @@
       <span class="bullet">•</span>
       <span class="text">Any</span>
     <span class="space" />
-    <div 
-      class="chip info"
+    <InfoWord
       on:mouseenter={() => handleMouseenter("stringsAndNumbers")}
       on:mouseleave={() => handleMouseleave("stringsAndNumbers")}
-      >
-        <span class="text">
-        non-number values
-        </span>
-      </div>
+      text="non-number-values"
+    />
     <span class="space" />
       <span class="text">
         will be ignored
@@ -132,15 +128,11 @@
       <span class="bullet">•</span>
       <span class="text">No</span>
     <span class="space" />
-      <div 
-        class="chip info"
-        on:mouseenter={() => handleMouseenter("required")}
-        on:mouseleave={() => handleMouseleave("required")}
-        >
-          <span class="text">
-            required
-          </span>
-        </div>
+    <InfoWord
+      on:mouseenter={() => handleMouseenter("required")}
+      on:mouseleave={() => handleMouseleave("required")}
+      text="required"
+    />
     <span class="space" />
       <a target="_blank" rel="noopener noreferrer" href={"https://docs.budibase.com/docs/budibasedb#constraints"} class="chip link topLink">
         <Icon size="S" name={"DataUnavailable"} />
diff --git a/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte b/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
index c505d05afd..7e71075176 100644
--- a/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
@@ -133,6 +133,7 @@
     if (level === validatorConstants.unsupported) {
       return {
         class: "supportLevelUnsupported",
+        iconColor: "var(--red)",
         icon: "Alert",
         iconTooltip: fieldSupport[optionKey]?.message,
         text: "Not compatible"
@@ -142,6 +143,7 @@
     if (level === validatorConstants.partialSupport) {
       return {
         class: "supportLevelPartialSupport",
+        iconColor: "var(--yellow)",
         icon: "AlertCheck",
         iconTooltip: fieldSupport[optionKey]?.message,
         text: "Partially compatible"
@@ -151,6 +153,7 @@
     if (level === validatorConstants.supported) {
       return {
         class: "supportLevelSupported",
+        iconColor: "var(--green)",
         icon: "CheckmarkCircle",
         iconTooltip: fieldSupport[optionKey]?.message,
         text: "Compatible"
@@ -159,6 +162,7 @@
 
     return {
       class: "supportLevelPartialSupport",
+      iconColor: "var(--yellow)",
       icon: "AlertCheck",
       iconTooltip: "",
       text: "Partially Compatible"
@@ -213,6 +217,7 @@
     support={fieldSupport[currentOption]}
     supportLevelClass={currentOptionSupport.class}
     supportLevelIcon={currentOptionSupport.icon}
+    supportLevelIconColor={currentOptionSupport.iconColor}
     supportLevelIconTooltip={currentOptionSupport.iconTooltip}
     supportLevelText={currentOptionSupport.text}
     columnIcon={getOptionIcon(currentOption)}
@@ -226,6 +231,7 @@
     support={fieldSupport[previousOption]}
     supportLevelClass={previousOptionSupport.class}
     supportLevelIcon={previousOptionSupport.icon}
+    supportLevelIconColor={previousOptionSupport.iconColor}
     supportLevelIconTooltip={previousOptionSupport.iconTooltip}
     supportLevelText={previousOptionSupport.text}
     columnIcon={getOptionIcon(previousOption)}

From fbefadc50f523881f078ec9e78dc124c47983073 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Mon, 8 Apr 2024 08:46:21 +0100
Subject: [PATCH 039/123] wip

---
 .../controls/FieldContext/Chart.svelte        | 20 +++--
 .../FieldContext/DocumentationLink.svelte     | 77 +++++++++++++++++++
 .../controls/FieldContext/InfoWord.svelte     |  3 +-
 3 files changed, 91 insertions(+), 9 deletions(-)
 create mode 100644 packages/builder/src/components/design/settings/controls/FieldContext/DocumentationLink.svelte

diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
index 7ef58adbaa..3033759e88 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
@@ -5,6 +5,7 @@
   import { createEventDispatcher } from "svelte"
   import Property from './Property.svelte'
   import InfoWord from './InfoWord.svelte'
+  import DocumentationLink from './DocumentationLink.svelte'
 
   export let supportLevelClass = ''
   export let supportLevelIconColor = ""
@@ -82,10 +83,11 @@
     <span class="space" />
     <span class="text"> is a </span>
     <span class="space" />
-    <a target="_blank" rel="noopener noreferrer" href={docLink} class="chip link topLink">
-      <Icon size="S" name={columnIcon} />
-      <span class="text">{columnType} column</span>
-    </a>
+    <DocumentationLink
+      href={docLink}
+      icon={columnIcon}
+      text={`${columnType} column`}
+    />
     <span class="period">.</span>
   </div>
   <div class={`line ${supportLevelClass}`}>
@@ -100,10 +102,11 @@
     <span class="space" />
     <span class="text">with</span>
     <span class="space" />
-    <a target="_blank" rel="noopener noreferrer" href={"https://docs.budibase.com/docs/chart"} class="chip link topLink">
-      <Icon size="S" name={"GraphPie"} />
-      <span class="text">Chart components</span>
-    </a>
+    <DocumentationLink
+      href="https://docs.budibase.com/docs/chart"
+      icon="GraphPie"
+      text="Chart components"
+    />
     <span class="period">.</span>
   </div>
   {#if warnings.includes("string number warning")}
@@ -318,6 +321,7 @@
     color: var(--grey-5);
     font-size: 20px;
     display: inline block;
+    margin-left: 3px;
   }
 
   .comma {
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/DocumentationLink.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/DocumentationLink.svelte
new file mode 100644
index 0000000000..0afd5e9545
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/DocumentationLink.svelte
@@ -0,0 +1,77 @@
+<script>
+  import { Icon } from "@budibase/bbui"
+
+  export let icon
+  export let text
+  export let href
+</script>
+
+<a
+  tabindex="0"
+  {href}
+  rel="noopener noreferrer"
+  target="_blank"
+  class="chip link"
+>
+  <Icon size="S" name={icon} />
+  <span class="text">
+    <slot>
+      {text}
+    </slot>
+  </span>
+</a>
+
+<style>
+  .chip {
+    display: inline-flex;
+    box-sizing: border-box;
+    padding: 3px 6px;
+    border-radius: 5px;
+    vertical-align: sub;
+    filter: brightness(100%);
+    background-color: var(--grey-3);
+    border: 1px solid var(--grey-3);
+    overflow: hidden;
+    flex-shrink: 0;
+  }
+
+  .chip:hover {
+    filter: brightness(120%);
+    transition: filter 300ms
+  }
+
+  .chip :global(svg) {
+    color: inherit;
+    margin-right: 5px;
+  }
+
+  .text {
+    color: var(--ink);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .link {
+    border-radius: 0;
+    background-color: transparent;
+    border: 1px solid red;
+    border-width: 0 0 1px 0;
+    box-sizing: border-box;
+    border-color: var(--blue);
+    color: white;
+    padding-left: 0px;
+    padding-right: 0px;
+    transition: background-color 200ms;
+  }
+
+  .link:hover {
+    cursor: pointer;
+    background-color: #ffffff0a;
+  }
+
+  .link :global(svg) {
+    margin-right: 3px;
+    color: var(--blue);
+  }
+</style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/InfoWord.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/InfoWord.svelte
index 632d2a5083..bc95ec7423 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/InfoWord.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/InfoWord.svelte
@@ -1,8 +1,9 @@
 <script>
   import { Icon } from "@budibase/bbui"
+
   export let icon = null
   export let color = null
-  export let text = ""
+  export let text
   export let href = null
 </script>
 

From fab54188e25cf93db84a36148b2b7f13ec4a5c77 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Mon, 8 Apr 2024 08:58:48 +0100
Subject: [PATCH 040/123] clean up new comp styles

---
 .../controls/FieldContext/Chart.svelte        | 12 +++--
 .../FieldContext/DocumentationLink.svelte     | 47 +++++--------------
 .../controls/FieldContext/InfoWord.svelte     | 18 +++----
 3 files changed, 28 insertions(+), 49 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
index 3033759e88..057248a926 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
@@ -137,11 +137,12 @@
       text="required"
     />
     <span class="space" />
-      <a target="_blank" rel="noopener noreferrer" href={"https://docs.budibase.com/docs/budibasedb#constraints"} class="chip link topLink">
-        <Icon size="S" name={"DataUnavailable"} />
-        <span class="text">
-          Constraint
-        </span></a><span class="comma">,</span>
+    <DocumentationLink
+      icon="DataUnavailable"
+      href="https://docs.budibase.com/docs/budibasedb#constraints"
+      text="Constraint"
+    />
+      <span class="comma">,</span>
       <span class="text">
         so values may be missing
       </span>
@@ -325,6 +326,7 @@
   }
 
   .comma {
+    margin-left: 2px;
     color: var(--grey-5);
     font-size: 20px;
     display: inline block;
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/DocumentationLink.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/DocumentationLink.svelte
index 0afd5e9545..66f8ea5790 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/DocumentationLink.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/DocumentationLink.svelte
@@ -11,7 +11,7 @@
   {href}
   rel="noopener noreferrer"
   target="_blank"
-  class="chip link"
+  class="link"
 >
   <Icon size="S" name={icon} />
   <span class="text">
@@ -22,29 +22,6 @@
 </a>
 
 <style>
-  .chip {
-    display: inline-flex;
-    box-sizing: border-box;
-    padding: 3px 6px;
-    border-radius: 5px;
-    vertical-align: sub;
-    filter: brightness(100%);
-    background-color: var(--grey-3);
-    border: 1px solid var(--grey-3);
-    overflow: hidden;
-    flex-shrink: 0;
-  }
-
-  .chip:hover {
-    filter: brightness(120%);
-    transition: filter 300ms
-  }
-
-  .chip :global(svg) {
-    color: inherit;
-    margin-right: 5px;
-  }
-
   .text {
     color: var(--ink);
     white-space: nowrap;
@@ -53,21 +30,21 @@
   }
 
   .link {
-    border-radius: 0;
-    background-color: transparent;
-    border: 1px solid red;
-    border-width: 0 0 1px 0;
+    display: inline-flex;
     box-sizing: border-box;
-    border-color: var(--blue);
-    color: white;
-    padding-left: 0px;
-    padding-right: 0px;
-    transition: background-color 200ms;
+    padding: 3px 0 2px;
+    vertical-align: sub;
+    filter: brightness(100%);
+
+    overflow: hidden;
+    flex-shrink: 0;
+    border-radius: 0;
+    border-bottom: 1px solid var(--blue);
+    transition: filter 300ms;
   }
 
   .link:hover {
-    cursor: pointer;
-    background-color: #ffffff0a;
+    filter: brightness(120%);
   }
 
   .link :global(svg) {
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/InfoWord.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/InfoWord.svelte
index bc95ec7423..11538c3906 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/InfoWord.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/InfoWord.svelte
@@ -14,7 +14,7 @@
     {href}
     rel="noopener noreferrer"
     target="_blank"
-    class="chip"
+    class="infoWord"
     style:color={color}
     style:border-color={color}
     on:mouseenter
@@ -32,7 +32,7 @@
 {:else}
   <div
     role="tooltip"
-    class="chip"
+    class="infoWord"
     style:color={color}
     style:border-color={color}
     on:mouseenter
@@ -50,7 +50,7 @@
 {/if}
 
 <style>
-  .chip {
+  .infoWord {
     display: inline-flex;
     box-sizing: border-box;
     padding: 3px 6px;
@@ -60,16 +60,16 @@
     background-color: var(--grey-3);
     border: 1px solid var(--grey-3);
     overflow: hidden;
-  }
-
-  .chip:hover {
-    filter: brightness(120%);
     transition: filter 300ms
   }
 
-  .chip :global(svg) {
+  .infoWord:hover {
+    filter: brightness(120%);
+  }
+
+  .infoWord :global(svg) {
     color: inherit;
-    margin-right: 5px;
+    margin-right: 4px;
   }
 
   .text {

From d1c043b993756c50229c4880197925d3e48e50df Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Mon, 8 Apr 2024 09:01:29 +0100
Subject: [PATCH 041/123] clean more

---
 .../controls/FieldContext/Chart.svelte        | 129 ++----------------
 1 file changed, 11 insertions(+), 118 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
index 057248a926..92f3277883 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
@@ -72,7 +72,7 @@
   class={`tooltipContents ${supportLevelClass}`}
 >
 
-  <div class="line topLine">
+  <div class="line">
     <span class="bullet">•</span>
     <InfoWord
       on:mouseenter={() => handleMouseenter("column")}
@@ -255,9 +255,6 @@
 {/if}
 
 <style>
-  .text {
-    flex-shrink: 0;
-  }
 
   .sidecarContent {
     max-width: 300px;
@@ -271,6 +268,12 @@
     text-overflow: ellipsis;
   }
 
+  .divider {
+    border-bottom: 1px solid var(--grey-4);
+    margin: 12px 0 12px;
+  }
+
+
   .section {
     margin-bottom: 16px;
   }
@@ -287,6 +290,10 @@
   /* BETWEEN STUFF */
   /* BETWEEN STUFF */
 
+  .text {
+    flex-shrink: 0;
+  }
+
   .tooltipContents {
     max-width: 450px;
     background-color: var(--background-alt);
@@ -343,51 +350,6 @@
     margin-right: 5px;
   }
 
-  .divider {
-    border-bottom: 1px solid var(--grey-4);
-    margin: 12px 0 12px;
-  }
-
-
-  .topLine {
-    display: flex;
-    align-items: center;
-  }
-
-  .topLine .space {
-  }
-
-  .chip {
-    box-sizing: border-box;
-    display: inline-flex;
-    padding: 3px 6px;
-    border-radius: 5px;
-    vertical-align: sub;
-    filter: brightness(100%);
-  }
-
-  .chip:hover {
-    filter: brightness(120%);
-    transition: filter 300ms
-  }
-
-  .chip :global(svg) {
-    color:  var(--grey-6);
-  }
-
-  .topLine .period {
-    flex-shrink: 0;
-  }
-
-  .topLine .bullet {
-    flex-shrink: 0;
-  }
-
-  .topLink {
-    flex-shrink: 0;
-    margin-right: 2px;
-  }
-
   .line {
     background-color: var(--background-alt);
     color: var(--ink);
@@ -400,73 +362,4 @@
   .line:last-child {
     margin-bottom: 0px;
   }
-
-  .link {
-    border-radius: 0;
-    background-color: transparent;
-    border: 1px solid red;
-    border-width: 0 0 1px 0;
-    box-sizing: border-box;
-    border-color: var(--blue);
-    color: white;
-    padding-left: 0px;
-    padding-right: 0px;
-    transition: background-color 200ms;
-  }
-
-  .link:hover {
-    cursor: pointer;
-    background-color: #ffffff0a;
-  }
-
-  .info {
-
-    vertical-align: baseline;
-    background-color: var(--grey-3);
-  }
-
-  .info :global(svg) {
-    margin-right: 3px;
-  }
-
-
-  .link :global(svg) {
-    margin-right: 3px;
-    color: var(--blue);
-  }
-
-  .supportChip {
-    background-color: var(--grey-3);
-    color: var(--ink);
-    border: 1px solid red;
-    box-sizing: border-box;
-  }
-
-  .supportChip :global(svg) {
-    margin-right: 5px;
-  }
-
-  .supportChip.supportLevelUnsupported {
-    border-color: var(--red);
-  }
-
-  .supportChip.supportLevelUnsupported :global(svg) {
-    color: var(--red);
-  }
-
-  .supportChip.supportLevelPartialSupport {
-    border-color: var(--yellow);
-  }
-
-  .supportChip.supportLevelPartialSupport :global(svg) {
-    color: var(--yellow);
-  }
-
-  .supportChip.supportLevelSupported {
-    border-color: var(--green);
-  }
-
-  .supportChip.supportLevelSupported :global(svg) {
-    color: var(--green);
-  }
 </style>

From 906feeca46895681f1fae5ae150f1be52bd7120c Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Mon, 8 Apr 2024 09:18:16 +0100
Subject: [PATCH 042/123] explanation modal

---
 .../controls/FieldContext/Chart.svelte        | 124 ++-------------
 .../ExplanationModal/Property.svelte          |  38 +++++
 .../ExplanationModal/index.svelte             | 150 ++++++++++++++++++
 3 files changed, 202 insertions(+), 110 deletions(-)
 create mode 100644 packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/Property.svelte
 create mode 100644 packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/index.svelte

diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
index 92f3277883..2c054b8904 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
@@ -6,6 +6,7 @@
   import Property from './Property.svelte'
   import InfoWord from './InfoWord.svelte'
   import DocumentationLink from './DocumentationLink.svelte'
+  import ExplanationModal from './ExplanationModal/index.svelte'
 
   export let supportLevelClass = ''
   export let supportLevelIconColor = ""
@@ -16,7 +17,7 @@
   export let columnIcon
   export let columnType
   export let columnName
-  export let sidecar = false
+  export let explanationModal = false
 
   export let errors = []
   export let warnings = []
@@ -54,15 +55,15 @@
 
   $: docLink = getDocLink(columnType);
 
-  let sidecarSubject = null
+  let explanationModalSubject = null
 
   const handleMouseenter = (option, idx) => {
-    sidecarSubject = option;
+    explanationModalSubject = option;
     root = root
   }
 
   const handleMouseleave = (option) => {
-    sidecarSubject = null;
+    explanationModalSubject = null;
   }
 
 </script>
@@ -151,112 +152,15 @@
   {/if}
 </div>
 
-{#if sidecar}
-  <ContextTooltip
-    noAnimation
-    visible={sidecarSubject !== null}
-    anchor={root}
-    offset={20}
-  >
-  <div class="sidecarContent">
-    {#if sidecarSubject === "column"}
-      <div class="heading wrapper">
-      <span class="heading">{columnName}</span>
-      </div>
-      <div class="divider" />
-      <div class="section">
-        {#if schema.type === "string"}
-          <Property
-            name="Max Length"
-            value={schema?.constraints?.length?.maximum ?? "None"}
-          />
-        {:else if schema.type === "datetime"}
-          <Property
-            name="Earliest"
-            value={schema?.constraints?.datetime?.earliest === "" ? "None" : schema?.constraints?.datetime?.earliest}
-          />
-          <Property
-            name="Latest"
-            value={schema?.constraints?.datetime?.latest === "" ? "None" : schema?.constraints?.datetime?.latest}
-          />
-          <Property
-            name="Ignore time zones"
-            value={schema?.ignoreTimeZones === true ? "Yes" : "No"}
-          />
-          <Property
-            name="Date only"
-            value={schema?.dateOnly === true ? "Yes" : "No"}
-          />
-        {:else if schema.type === "number"}
-          <Property
-            name="Min Value"
-            value={schema?.constraints?.numericality?.greaterThanOrEqualTo === "" ? "None" : schema?.constraints?.numericality?.greaterThanOrEqualTo}
-          />
-          <Property
-            name="Max Value"
-            value={schema?.constraints?.numericality?.lessThanOrEqualTo === "" ? "None" : schema?.constraints?.numericality?.lessThanOrEqualTo}
-          />
-        {:else if schema.type === "json"}
-          <Property
-            pre
-            name="Schema"
-            value={JSON.stringify(schema?.schema ?? {}, null, 2)}
-          />
-        {/if}
-        <Property
-          name="Required"
-          value={schema?.constraints?.presence?.allowEmpty === false ? "Yes" : "No"}
-        />
-      </div>
-    {:else if sidecarSubject === "support"}
-        <span class="heading">Data/Component Compatibility</span>
-        <div class="divider" />
-        <div class="section">
-          <InfoWord
-            icon="CheckmarkCircle"
-            color="var(--green)"
-            text="Compatible"
-          />
-          <span class="body">Fully compatible with the component as long as the data is present.</span>
-        </div>
-        <div class="section">
-          <InfoWord
-            icon="AlertCheck"
-            color="var(--yellow)"
-            text="Possibly compatible"
-          />
-          <span class="body">Possibly compatible with the component, but beware of other caveats mentioned in the context tooltip.</span>
-        </div>
-        <div class="section">
-          <InfoWord
-            icon="Alert"
-            color="var(--red)"
-            text="Not compatible"
-          />
-          <span class="body">Imcompatible with the component.</span>
-        </div>
-
-
-    {:else if sidecarSubject === "stringsAndNumbers"}
-      <span class="heading">Text as Numbers</span>
-      <div class="divider" />
-      <div class="section">
-        Text can be used in place of numbers in certain scenarios, but care needs to be taken to ensure that non-numerical values aren't also present, otherwise they may be parsed incorrectly and lead to unexpected behavior.
-      </div>
-    {:else if sidecarSubject === "required"}
-      <span class="heading">'Required' Constraint</span>
-      <div class="divider" />
-      <div class="section">
-        <span class="body">A 'required' contraint can be applied to columns to ensure a value is always present. If a column doesn't have this constraint, then its value for a particular row could he missing.</span>
-      </div>
-    {/if}
-  </div>
-  </ContextTooltip>
-{/if}
+<ExplanationModal
+  anchor={root}
+  {schema}
+  subject={explanationModalSubject}
+/>
 
 <style>
 
-  .sidecarContent {
+  .explanationModalContent {
     max-width: 300px;
     padding: 16px 12px 18px;
   }
@@ -319,14 +223,14 @@
   }
 
   .bullet {
-    color: var(--grey-5);
+    color: var(--grey-6);
     font-size: 17px;
     display: inline block;
     margin-right: 10px;
   }
 
   .period {
-    color: var(--grey-5);
+    color: var(--grey-6);
     font-size: 20px;
     display: inline block;
     margin-left: 3px;
@@ -334,7 +238,7 @@
 
   .comma {
     margin-left: 2px;
-    color: var(--grey-5);
+    color: var(--grey-6);
     font-size: 20px;
     display: inline block;
     margin-right: 5px;
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/Property.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/Property.svelte
new file mode 100644
index 0000000000..cc4e91da75
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/Property.svelte
@@ -0,0 +1,38 @@
+<script>
+  export let name;
+  export let value;
+  export let pre;
+</script>
+
+<div class="property">
+  
+{#if pre}
+<pre class="pre propertyValue">
+{value}
+</pre>
+{:else}
+  <span class="propertyName">
+    {name}
+  </span>
+  <span class="propertyDivider">-</span>
+  <span class="propertyValue">
+    {value}
+  </span>
+{/if}
+</div>
+
+<style>
+  .propertyDivider {
+    padding: 4px;
+  }
+  .propertyName {
+    font-style: italic;
+
+  }
+.pre {
+  padding: 4px;
+  border-radius: 3px;
+  width: 250px;
+  background-color: black;
+}
+</style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/index.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/index.svelte
new file mode 100644
index 0000000000..c1cdb8be18
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/index.svelte
@@ -0,0 +1,150 @@
+<script>
+  import { Icon, Heading, Multiselect, ContextTooltip } from "@budibase/bbui"
+  import { getDatasourceForProvider, getSchemaForDatasource } from "dataBinding"
+  import { selectedScreen } from "stores/builder"
+  import { createEventDispatcher } from "svelte"
+  import Property from './Property.svelte'
+  import InfoWord from '../InfoWord.svelte'
+
+  export let anchor
+  export let schema
+  export let subject = null
+</script>
+
+
+<ContextTooltip
+  noAnimation
+  visible={subject !== null}
+  {anchor}
+  offset={20}
+>
+<div class="explanationModalContent">
+  {#if subject === "column"}
+    <div class="heading wrapper">
+    <span class="heading">Column Overview</span>
+    </div>
+    <div class="divider" />
+    <div class="section">
+      {#if schema.type === "string"}
+        <Property
+          name="Max Length"
+          value={schema?.constraints?.length?.maximum ?? "None"}
+        />
+      {:else if schema.type === "datetime"}
+        <Property
+          name="Earliest"
+          value={schema?.constraints?.datetime?.earliest === "" ? "None" : schema?.constraints?.datetime?.earliest}
+        />
+        <Property
+          name="Latest"
+          value={schema?.constraints?.datetime?.latest === "" ? "None" : schema?.constraints?.datetime?.latest}
+        />
+        <Property
+          name="Ignore time zones"
+          value={schema?.ignoreTimeZones === true ? "Yes" : "No"}
+        />
+        <Property
+          name="Date only"
+          value={schema?.dateOnly === true ? "Yes" : "No"}
+        />
+      {:else if schema.type === "number"}
+        <Property
+          name="Min Value"
+          value={schema?.constraints?.numericality?.greaterThanOrEqualTo === "" ? "None" : schema?.constraints?.numericality?.greaterThanOrEqualTo}
+        />
+        <Property
+          name="Max Value"
+          value={schema?.constraints?.numericality?.lessThanOrEqualTo === "" ? "None" : schema?.constraints?.numericality?.lessThanOrEqualTo}
+        />
+      {:else if schema.type === "json"}
+        <Property
+          pre
+          name="Schema"
+          value={JSON.stringify(schema?.schema ?? {}, null, 2)}
+        />
+      {/if}
+      <Property
+        name="Required"
+        value={schema?.constraints?.presence?.allowEmpty === false ? "Yes" : "No"}
+      />
+    </div>
+  {:else if subject === "support"}
+      <span class="heading">Data/Component Compatibility</span>
+      <div class="divider" />
+      <div class="section">
+        <InfoWord
+          icon="CheckmarkCircle"
+          color="var(--green)"
+          text="Compatible"
+        />
+        <span class="body">Fully compatible with the component as long as the data is present.</span>
+      </div>
+      <div class="section">
+        <InfoWord
+          icon="AlertCheck"
+          color="var(--yellow)"
+          text="Possibly compatible"
+        />
+        <span class="body">Possibly compatible with the component, but beware of other caveats mentioned in the context tooltip.</span>
+      </div>
+      <div class="section">
+        <InfoWord
+          icon="Alert"
+          color="var(--red)"
+          text="Not compatible"
+        />
+        <span class="body">Imcompatible with the component.</span>
+      </div>
+
+
+  {:else if subject === "stringsAndNumbers"}
+    <span class="heading">Text as Numbers</span>
+    <div class="divider" />
+    <div class="section">
+      Text can be used in place of numbers in certain scenarios, but care needs to be taken to ensure that non-numerical values aren't also present, otherwise they may be parsed incorrectly and lead to unexpected behavior.
+    </div>
+  {:else if subject === "required"}
+    <span class="heading">'Required' Constraint</span>
+    <div class="divider" />
+    <div class="section">
+      <span class="body">A 'required' contraint can be applied to columns to ensure a value is always present. If a column doesn't have this constraint, then its value for a particular row could he missing.</span>
+    </div>
+  {/if}
+</div>
+</ContextTooltip>
+
+<style>
+  .explanationModalContent {
+    max-width: 300px;
+    padding: 16px 12px 18px;
+  }
+
+  .heading {
+    font-weight: 600;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .divider {
+    border-bottom: 1px solid var(--grey-4);
+    margin: 12px 0 12px;
+  }
+
+
+  .section {
+    margin-bottom: 16px;
+  }
+  .section:last-child {
+    margin-bottom: 16px;
+  }
+
+  .section .body {
+    display: block;
+    margin-top: 5px;
+  }
+
+  /* BETWEEN STUFF */
+  /* BETWEEN STUFF */
+  /* BETWEEN STUFF */
+</style>

From 01b5c5d69a007105e6f9dcbb16debf4afe14e9ee Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Mon, 8 Apr 2024 09:22:40 +0100
Subject: [PATCH 043/123]  some fixes

---
 .../controls/FieldContext/Chart.svelte        | 52 +------------------
 1 file changed, 1 insertion(+), 51 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
index 2c054b8904..27355b2811 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
@@ -159,41 +159,6 @@
 />
 
 <style>
-
-  .explanationModalContent {
-    max-width: 300px;
-    padding: 16px 12px 18px;
-  }
-
-  .heading {
-    font-weight: 600;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .divider {
-    border-bottom: 1px solid var(--grey-4);
-    margin: 12px 0 12px;
-  }
-
-
-  .section {
-    margin-bottom: 16px;
-  }
-  .section:last-child {
-    margin-bottom: 16px;
-  }
-
-  .section .body {
-    display: block;
-    margin-top: 5px;
-  }
-
-  /* BETWEEN STUFF */
-  /* BETWEEN STUFF */
-  /* BETWEEN STUFF */
-
   .text {
     flex-shrink: 0;
   }
@@ -207,21 +172,6 @@
     box-sizing: border-box;
   }
 
-  .columnName {
-    vertical-align: baseline;
-    background-color: var(--grey-3);
-    display: block;
-    font-style: italic;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    box-sizing: border-box;
-    flex-grow: 0;
-    flex-shrink: 1;
-    min-width: 0;
-    color: var(--grey-8);
-  }
-
   .bullet {
     color: var(--grey-6);
     font-size: 17px;
@@ -239,7 +189,7 @@
   .comma {
     margin-left: 2px;
     color: var(--grey-6);
-    font-size: 20px;
+    font-size: 17px;
     display: inline block;
     margin-right: 5px;
   }

From dc903a43f279c50e682ef315c2788977d7060e50 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Mon, 8 Apr 2024 13:05:15 +0100
Subject: [PATCH 044/123] refactor validation

---
 .../controls/FieldContext/Chart.svelte        |  42 +++--
 .../settings/controls/MultiFieldSelect.svelte | 149 +-----------------
 .../design/settings/fieldValidator.js         |  54 ++++---
 3 files changed, 58 insertions(+), 187 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
index 27355b2811..01454081af 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
@@ -7,20 +7,15 @@
   import InfoWord from './InfoWord.svelte'
   import DocumentationLink from './DocumentationLink.svelte'
   import ExplanationModal from './ExplanationModal/index.svelte'
+  import { warnings, errors } from "../../fieldValidator";
 
-  export let supportLevelClass = ''
-  export let supportLevelIconColor = ""
-  export let supportLevelIcon = ""
-  export let supportLevelIconTooltip = ""
-  export let supportLevelText = ""
+  export let support = {}
 
   export let columnIcon
   export let columnType
   export let columnName
   export let explanationModal = false
 
-  export let errors = []
-  export let warnings = []
   export let tableHref = () => {}
 
   export let schema
@@ -57,12 +52,12 @@
 
   let explanationModalSubject = null
 
-  const handleMouseenter = (option, idx) => {
+  const handleMouseenter = (option) => {
     explanationModalSubject = option;
     root = root
   }
 
-  const handleMouseleave = (option) => {
+  const handleMouseleave = () => {
     explanationModalSubject = null;
   }
 
@@ -70,7 +65,7 @@
 
 <div
   bind:this={root}
-  class={`tooltipContents ${supportLevelClass}`}
+  class="tooltipContents"
 >
 
   <div class="line">
@@ -91,14 +86,14 @@
     />
     <span class="period">.</span>
   </div>
-  <div class={`line ${supportLevelClass}`}>
+  <div class="line">
     <span class="bullet">•</span>
     <InfoWord
       on:mouseenter={() => handleMouseenter("support")}
       on:mouseleave={() => handleMouseleave("support")}
-      icon={supportLevelIcon}
-      color={supportLevelIconColor}
-      text={supportLevelText}
+      icon={support.icon}
+      color={support.iconColor}
+      text={support.text}
     />
     <span class="space" />
     <span class="text">with</span>
@@ -110,7 +105,7 @@
     />
     <span class="period">.</span>
   </div>
-  {#if warnings.includes("string number warning")}
+  {#if support?.warnings?.includes(warnings.stringAsNumber)}
     <div class={`line`}>
       <span class="bullet">•</span>
       <span class="text">Any</span>
@@ -118,7 +113,7 @@
     <InfoWord
       on:mouseenter={() => handleMouseenter("stringsAndNumbers")}
       on:mouseleave={() => handleMouseleave("stringsAndNumbers")}
-      text="non-number-values"
+      text="non-number values"
     />
     <span class="space" />
       <span class="text">
@@ -127,7 +122,7 @@
       <span class="period">.</span>
     </div>
   {/if}
-  {#if warnings.includes("optional warning")}
+  {#if support?.warnings?.includes(warnings.notRequired)}
     <div class={`line`}>
       <span class="bullet">•</span>
       <span class="text">No</span>
@@ -152,11 +147,14 @@
   {/if}
 </div>
 
-<ExplanationModal
-  anchor={root}
-  {schema}
-  subject={explanationModalSubject}
-/>
+
+{#if explanationModal}
+  <ExplanationModal
+    anchor={root}
+    {schema}
+    subject={explanationModalSubject}
+  />
+{/if}
 
 <style>
   .text {
diff --git a/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte b/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
index 7e71075176..b2b7765e86 100644
--- a/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
@@ -14,11 +14,6 @@
   export let placeholder
   export let fieldValidator
 
-  $: {
-    console.log($params)
-  }
-
-  let contextTooltipId = 0;
   let contextTooltipAnchor = null
   let currentOption = null
   let previousOption = null
@@ -127,51 +122,6 @@
     return true
   }
 
-  const getSupportLevel = (optionKey) => {
-    const level = fieldSupport[optionKey]?.level;
-
-    if (level === validatorConstants.unsupported) {
-      return {
-        class: "supportLevelUnsupported",
-        iconColor: "var(--red)",
-        icon: "Alert",
-        iconTooltip: fieldSupport[optionKey]?.message,
-        text: "Not compatible"
-      }
-    }
-
-    if (level === validatorConstants.partialSupport) {
-      return {
-        class: "supportLevelPartialSupport",
-        iconColor: "var(--yellow)",
-        icon: "AlertCheck",
-        iconTooltip: fieldSupport[optionKey]?.message,
-        text: "Partially compatible"
-      }
-    }
-
-    if (level === validatorConstants.supported) {
-      return {
-        class: "supportLevelSupported",
-        iconColor: "var(--green)",
-        icon: "CheckmarkCircle",
-        iconTooltip: fieldSupport[optionKey]?.message,
-        text: "Compatible"
-      }
-    }
-
-    return {
-      class: "supportLevelPartialSupport",
-      iconColor: "var(--yellow)",
-      icon: "AlertCheck",
-      iconTooltip: "",
-      text: "Partially Compatible"
-    }
-  }
-
-  $: currentOptionSupport = getSupportLevel(currentOption)
-  $: previousOptionSupport = getSupportLevel(previousOption)
-
   const updateTooltip = debounce((e, option) => {
     if (option == null) {
         contextTooltipVisible = false;
@@ -180,8 +130,6 @@
     previousOption = currentOption;
     currentOption = option;
     contextTooltipVisible = true;
-    currentOptionSupport = getSupportLevel(currentOption)
-    previousOptionSupport = getSupportLevel(previousOption)
     }
   }, 200);
 
@@ -211,114 +159,23 @@
   offset={20}
 >
   <ChartFieldContext
-    sidecar
-    tableHref={`/builder/app/${$params.application}/data/table/${datasource.tableId}`}
+    explanationModal
+    tableHref={`/builder/app/${$params.application}/data/table/${datasource?.tableId}`}
     schema={schema[currentOption]}
     support={fieldSupport[currentOption]}
-    supportLevelClass={currentOptionSupport.class}
-    supportLevelIcon={currentOptionSupport.icon}
-    supportLevelIconColor={currentOptionSupport.iconColor}
-    supportLevelIconTooltip={currentOptionSupport.iconTooltip}
-    supportLevelText={currentOptionSupport.text}
     columnIcon={getOptionIcon(currentOption)}
     columnName={currentOption}
     columnType={getOptionIconTooltip(currentOption)}
-    errors={fieldSupport[currentOption]?.errors}
-    warnings={fieldSupport[currentOption]?.warnings}
   />
   <ChartFieldContext
     slot="previous"
+    schema={schema[previousOption]}
     support={fieldSupport[previousOption]}
-    supportLevelClass={previousOptionSupport.class}
-    supportLevelIcon={previousOptionSupport.icon}
-    supportLevelIconColor={previousOptionSupport.iconColor}
-    supportLevelIconTooltip={previousOptionSupport.iconTooltip}
-    supportLevelText={previousOptionSupport.text}
     columnIcon={getOptionIcon(previousOption)}
     columnName={previousOption}
     columnType={getOptionIconTooltip(previousOption)}
-    errors={fieldSupport[previousOption]?.errors}
-    warnings={fieldSupport[previousOption]?.warnings}
   />
 </ContextTooltip>
 
 <style>
-  .tooltipContents {
-    max-width: 400px;
-    background-color: var(--spectrum-global-color-gray-200);
-    display: block;
-    padding: 0 0 12px 0 ;
-    border-radius: 5px;
-    box-sizing: border-box;
-  }
-
-  .tooltipContents.supportLevelUnsupported {
-    background-color: var(--red);
-    color: var(--ink)
-  }
-
-  .tooltipContents.supportLevelPartialSupport {
-    background-color: var(--yellow);
-    color: var(--ink)
-  }
-
-  .tooltipContents.supportLevelSupported {
-    background-color: var(--green);
-    color: var(--ink)
-  }
-
-  .contextTooltipHeader {
-    background-color: var(--background-alt);
-    color: var(--ink);
-    display: flex;
-    align-items: center;
-    height: var(--spectrum-alias-item-height-m);
-    padding: 0px var(--spectrum-alias-item-padding-m);
-    border-width: var(--spectrum-actionbutton-border-size);
-    border-radius: var(--spectrum-alias-border-radius-regular);
-    border: 1px solid
-      var(
-        --spectrum-actionbutton-m-border-color,
-        var(--spectrum-alias-border-color)
-      );
-  }
-
-  .contextTooltipContent {
-    padding: 0px 12px;
-    color: black;
-  }
-
-  .contextTooltipHeader :global(svg) {
-    margin-right: 5px;
-  }
-
-  .contextTooltipHeader :global(span) {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .supportLevel {
-    display: flex;
-    align-items: center;
-    height: var(--spectrum-alias-item-height-m);
-    padding: 0px var(--spectrum-alias-item-padding-m);
-    margin-bottom: 12px;
-    color: black;
-  }
-  .supportLevel :global(svg) {
-    margin-right: 5px;
-  }
-
-  .supportLevel.supportLevelUnsupported {
-    background-color: var(--red-light)
-  }
-
-  .supportLevel.supportLevelPartialSupport {
-    background-color: var(--yellow-light)
-  }
-
-  .supportLevel.supportLevelSupported {
-    background-color: var(--green-light)
-  }
 </style>
diff --git a/packages/builder/src/components/design/settings/fieldValidator.js b/packages/builder/src/components/design/settings/fieldValidator.js
index 5ecda9b1f8..4580c41911 100644
--- a/packages/builder/src/components/design/settings/fieldValidator.js
+++ b/packages/builder/src/components/design/settings/fieldValidator.js
@@ -1,8 +1,18 @@
 import { capitalize } from 'lodash';
 
+export const errors = {
+  // fail without explanation
+  general: Symbol("values-validator-general"),
+  jsonPrimitivesOnly: Symbol("values-validator-json-primitives-only"),
+}
+
+export const warnings = {
+  stringAsNumber: Symbol("values-validator-string-as-number"),
+  chartDatetime: Symbol("values-validator-chart-datetime"),
+  notRequired: Symbol("values-validator-not-required"),
+}
+
 export const constants = {
-  warning: Symbol("values-validator-warning"),
-  error: Symbol("values-validator-error"),
   unsupported: Symbol("values-validator-unsupported"),
   partialSupport: Symbol("values-validator-partialSupport"),
   supported: Symbol("values-validator-supported")
@@ -13,54 +23,60 @@ export const validators = {
     try {
       const response = {
         level: null,
-        message: null,
         warnings: [],
-        errors: []
+        errors: [],
+        text: "",
+        icon: "",
+        iconColor: ""
       }
       const generalUnsupportedFields = ["array", "attachment", "barcodeqr", "link", "bb_reference"]
       if (generalUnsupportedFields.includes(fieldSchema.type)) {
-        response.errors.push('This column can not be used a chart input.')
+        response.errors.push(errors.general)
       }
 
       if (fieldSchema.type === "json") {
-          response.errors.push(`This column can not be used as a chart input, but individual properties of a JSON object can be be used if supported.`)
+          response.errors.push(errors.jsonPrimitivesOnly)
       }
 
       if (fieldSchema.type === "string") {
-
-        response.warnings.push(
-          "string number warning")
+        response.warnings.push(warnings.stringAsNumber)
       }
       if (fieldSchema.type === "datetime") {
-        response.warnings.push(
-          "This column can be used as an input for a chart, but it may be parsed differently depending on which is used.")
+        response.warnings.push(warnings.chartDatetime);
+          //"This column can be used as an input for a chart, but it may be parsed differently depending on which is used.
       }
 
       const isRequired = fieldSchema?.constraints?.presence?.allowEmpty === false
       if (!isRequired) {
-        response.warnings.push(
-          "optional warning")
+        response.warnings.push(warnings.notRequired);
       }
 
       if (response.errors.length > 0) {
         response.level = constants.unsupported
-        response.message = "This column can not be used as a chart input."
+        response.text = "Not compatible"
+        response.icon = "Alert"
+        response.iconColor = "var(--red)"
       } else if (response.warnings.length > 0) {
         response.level = constants.partialSupport
-        response.message = "This column can be used as a chart input, but certain values may cause issues."
+        response.text = "Partially compatible"
+        response.icon = "AlertCheck"
+        response.iconColor = "var(--yellow)"
       } else {
         response.level = constants.supported
-        response.message = "This column can be used as a chart input."
+        response.text = "Compatible"
+        response.icon = "CheckmarkCircle"
+        response.iconColor = "var(--green)"
       }
 
       return response
     } catch (e) {
-      console.log(e)
       return {
         level: constants.partialSupport,
-        message: "There was an issue validating this field, it may not be fully supported for use with charts.",
         warnings: [],
-        errors: []
+        errors: [],
+        text: "Partially compatible",
+        icon: "AlertCheck",
+        iconColor: "var(--yellow)"
       }
     }
   }

From 82294c55ce46bd4372fdba329ba4328646c6c300 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Mon, 8 Apr 2024 13:34:25 +0100
Subject: [PATCH 045/123] part reafactor, probs not wroking

---
 .../controls/FieldContext/Chart.svelte        |  9 ++++----
 .../controls/FieldContext/lines/Column.svelte |  9 ++++++++
 .../FieldContext/lines/NotRequired.svelte     |  9 ++++++++
 .../FieldContext/lines/StringNumber.svelte    |  9 ++++++++
 .../FieldContext/lines/Support.svelte         |  8 +++++++
 .../controls/FieldContext/lines/index.js      |  4 ++++
 .../FieldContext/typography/Comma.svelte      | 11 ++++++++++
 .../{ => typography}/DocumentationLink.svelte |  0
 .../{ => typography}/InfoWord.svelte          |  0
 .../FieldContext/typography/Line.svelte       | 22 +++++++++++++++++++
 .../FieldContext/typography/Period.svelte     | 10 +++++++++
 .../FieldContext/typography/Space.svelte      |  7 ++++++
 .../controls/FieldContext/typography/index.js |  5 +++++
 .../settings/controls/MultiFieldSelect.svelte |  5 -----
 14 files changed, 99 insertions(+), 9 deletions(-)
 create mode 100644 packages/builder/src/components/design/settings/controls/FieldContext/lines/Column.svelte
 create mode 100644 packages/builder/src/components/design/settings/controls/FieldContext/lines/NotRequired.svelte
 create mode 100644 packages/builder/src/components/design/settings/controls/FieldContext/lines/StringNumber.svelte
 create mode 100644 packages/builder/src/components/design/settings/controls/FieldContext/lines/Support.svelte
 create mode 100644 packages/builder/src/components/design/settings/controls/FieldContext/lines/index.js
 create mode 100644 packages/builder/src/components/design/settings/controls/FieldContext/typography/Comma.svelte
 rename packages/builder/src/components/design/settings/controls/FieldContext/{ => typography}/DocumentationLink.svelte (100%)
 rename packages/builder/src/components/design/settings/controls/FieldContext/{ => typography}/InfoWord.svelte (100%)
 create mode 100644 packages/builder/src/components/design/settings/controls/FieldContext/typography/Line.svelte
 create mode 100644 packages/builder/src/components/design/settings/controls/FieldContext/typography/Period.svelte
 create mode 100644 packages/builder/src/components/design/settings/controls/FieldContext/typography/Space.svelte
 create mode 100644 packages/builder/src/components/design/settings/controls/FieldContext/typography/index.js

diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
index 01454081af..25ae2f9b33 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
@@ -72,7 +72,7 @@
     <span class="bullet">•</span>
     <InfoWord
       on:mouseenter={() => handleMouseenter("column")}
-      on:mouseleave={() => handleMouseleave("column")}
+      on:mouseleave={handleMouseleave}
       href={tableHref}
       text={columnName}
     />
@@ -90,7 +90,8 @@
     <span class="bullet">•</span>
     <InfoWord
       on:mouseenter={() => handleMouseenter("support")}
-      on:mouseleave={() => handleMouseleave("support")}
+      on:mouseleave={handleMouseleave}
+      href={tableHref}
       icon={support.icon}
       color={support.iconColor}
       text={support.text}
@@ -112,7 +113,7 @@
     <span class="space" />
     <InfoWord
       on:mouseenter={() => handleMouseenter("stringsAndNumbers")}
-      on:mouseleave={() => handleMouseleave("stringsAndNumbers")}
+      on:mouseleave={handleMouseleave}
       text="non-number values"
     />
     <span class="space" />
@@ -129,7 +130,7 @@
     <span class="space" />
     <InfoWord
       on:mouseenter={() => handleMouseenter("required")}
-      on:mouseleave={() => handleMouseleave("required")}
+      on:mouseleave={handleMouseleave}
       text="required"
     />
     <span class="space" />
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/lines/Column.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/lines/Column.svelte
new file mode 100644
index 0000000000..b3bf785afc
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/lines/Column.svelte
@@ -0,0 +1,9 @@
+
+<script>
+</script>
+
+<div>
+</div>
+
+<style>
+</style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/lines/NotRequired.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/lines/NotRequired.svelte
new file mode 100644
index 0000000000..b3bf785afc
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/lines/NotRequired.svelte
@@ -0,0 +1,9 @@
+
+<script>
+</script>
+
+<div>
+</div>
+
+<style>
+</style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/lines/StringNumber.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/lines/StringNumber.svelte
new file mode 100644
index 0000000000..b3bf785afc
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/lines/StringNumber.svelte
@@ -0,0 +1,9 @@
+
+<script>
+</script>
+
+<div>
+</div>
+
+<style>
+</style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/lines/Support.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/lines/Support.svelte
new file mode 100644
index 0000000000..2e58e2fcca
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/lines/Support.svelte
@@ -0,0 +1,8 @@
+<script>
+</script>
+
+<div>
+</div>
+
+<style>
+</style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/lines/index.js b/packages/builder/src/components/design/settings/controls/FieldContext/lines/index.js
new file mode 100644
index 0000000000..bd010a820e
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/lines/index.js
@@ -0,0 +1,4 @@
+export { default as Column } from "./Column.svelte"
+export { default as NotRequired } from "./NotRequired.svelte"
+export { default as StringNumber } from "./StringNumber.svelte"
+export { default as Support } from "./Support.svelte"
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/typography/Comma.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Comma.svelte
new file mode 100644
index 0000000000..f160ea6e50
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Comma.svelte
@@ -0,0 +1,11 @@
+<span class="comma">,</span>
+
+<style>
+  .comma {
+    margin-left: 2px;
+    color: var(--grey-6);
+    font-size: 17px;
+    display: inline block;
+    margin-right: 5px;
+  }
+</style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/DocumentationLink.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/typography/DocumentationLink.svelte
similarity index 100%
rename from packages/builder/src/components/design/settings/controls/FieldContext/DocumentationLink.svelte
rename to packages/builder/src/components/design/settings/controls/FieldContext/typography/DocumentationLink.svelte
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/InfoWord.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/typography/InfoWord.svelte
similarity index 100%
rename from packages/builder/src/components/design/settings/controls/FieldContext/InfoWord.svelte
rename to packages/builder/src/components/design/settings/controls/FieldContext/typography/InfoWord.svelte
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/typography/Line.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Line.svelte
new file mode 100644
index 0000000000..c15dd6c3ef
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Line.svelte
@@ -0,0 +1,22 @@
+<div class="line">
+  <span class="bullet">•</span>
+  <slot />
+</div>
+
+<style>
+  .bullet {
+    color: var(--grey-6);
+    font-size: 17px;
+    display: inline block;
+    margin-right: 10px;
+  }
+
+  .line {
+    background-color: var(--background-alt);
+    color: var(--ink);
+    align-items: center;
+    display: flex;
+
+    margin-bottom: 10px;
+  }
+</style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/typography/Period.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Period.svelte
new file mode 100644
index 0000000000..6697e278a0
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Period.svelte
@@ -0,0 +1,10 @@
+<span class="period">.</span>
+
+<style>
+  .period {
+    color: var(--grey-6);
+    font-size: 20px;
+    display: inline block;
+    margin-left: 3px;
+  }
+</style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/typography/Space.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Space.svelte
new file mode 100644
index 0000000000..ba72455d92
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Space.svelte
@@ -0,0 +1,7 @@
+<span class="space" />
+
+<style>
+  .space {
+    margin-right: 5px;
+  }
+</style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/typography/index.js b/packages/builder/src/components/design/settings/controls/FieldContext/typography/index.js
new file mode 100644
index 0000000000..6c5a1b1866
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/typography/index.js
@@ -0,0 +1,5 @@
+export { default as Space } from "./Space.svelte"
+export { default as Comma } from "./Comma.svelte"
+export { default as Period } from "./Period.svelte"
+export { default as InfoWord } from "./InfoWord.svelte"
+export { default as DocumentationLink } from "./DocumentationLink.svelte"
diff --git a/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte b/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
index b2b7765e86..92d5dd298c 100644
--- a/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
@@ -18,9 +18,6 @@
   let currentOption = null
   let previousOption = null
   let contextTooltipVisible = false
-  let currentOptionSupport = {}
-  let previousOptionSupport = {}
-
 
   const TypeIconMap = {
     text: "Text",
@@ -42,7 +39,6 @@
     },
   }
 
-
   const getFieldSupport = (schema, fieldValidator) => {
     if (fieldValidator == null) {
       return {}
@@ -60,7 +56,6 @@
 
   const dispatch = createEventDispatcher()
   $: datasource = getDatasourceForProvider($selectedScreen, componentInstance)
-  $: console.log(datasource)
   $: schema = getSchemaForDatasource($selectedScreen, datasource).schema
   $: options = Object.keys(schema || {})
   $: fieldSupport = getFieldSupport(schema, fieldValidator);

From b0bc5ff64b2591c6cea3bb5e355f412cf09316a6 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Mon, 8 Apr 2024 23:09:28 +0100
Subject: [PATCH 046/123] refactor stuff

---
 .../controls/FieldContext/Chart.svelte        | 179 ++----------------
 .../ExplanationModal/index.svelte             |   2 +-
 .../controls/FieldContext/lines/Column.svelte |  56 +++++-
 .../FieldContext/lines/NotRequired.svelte     |  27 ++-
 .../FieldContext/lines/StringNumber.svelte    |  20 +-
 .../FieldContext/lines/Support.svelte         |  27 ++-
 .../FieldContext/typography/Text.svelte       |   7 +
 .../controls/FieldContext/typography/index.js |   2 +
 8 files changed, 137 insertions(+), 183 deletions(-)
 create mode 100644 packages/builder/src/components/design/settings/controls/FieldContext/typography/Text.svelte

diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
index 25ae2f9b33..26633d7171 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
@@ -1,13 +1,7 @@
 <script>
-  import { Icon, Heading, Multiselect, ContextTooltip } from "@budibase/bbui"
-  import { getDatasourceForProvider, getSchemaForDatasource } from "dataBinding"
-  import { selectedScreen } from "stores/builder"
-  import { createEventDispatcher } from "svelte"
-  import Property from './Property.svelte'
-  import InfoWord from './InfoWord.svelte'
-  import DocumentationLink from './DocumentationLink.svelte'
   import ExplanationModal from './ExplanationModal/index.svelte'
   import { warnings, errors } from "../../fieldValidator";
+  import { Column, Support, NotRequired, StringNumber } from "./lines"
 
   export let support = {}
 
@@ -22,45 +16,12 @@
 
   let root = null;
 
-  const getDocLink = (columnType) => {
-    if (columnType === "Number") {
-      return "https://docs.budibase.com/docs/number"
-    }
-    if (columnType === "Text") {
-      return "https://docs.budibase.com/docs/text"
-    }
-    if (columnType === "Attachment") {
-      return "https://docs.budibase.com/docs/attachments"
-    }
-    if (columnType === "Multi-select") {
-      return "https://docs.budibase.com/docs/multi-select"
-    }
-    if (columnType === "JSON") {
-      return "https://docs.budibase.com/docs/json"
-    }
-    if (columnType === "Date/Time") {
-      return "https://docs.budibase.com/docs/datetime"
-    }
-    if (columnType === "User") {
-      return "https://docs.budibase.com/docs/user"
-    }
-
-    return ""
-  }
-
-  $: docLink = getDocLink(columnType);
-
   let explanationModalSubject = null
 
-  const handleMouseenter = (option) => {
+  const setExplanationSubject = (option) => {
     explanationModalSubject = option;
     root = root
   }
-
-  const handleMouseleave = () => {
-    explanationModalSubject = null;
-  }
-
 </script>
 
 <div
@@ -68,83 +29,26 @@
   class="tooltipContents"
 >
 
-  <div class="line">
-    <span class="bullet">•</span>
-    <InfoWord
-      on:mouseenter={() => handleMouseenter("column")}
-      on:mouseleave={handleMouseleave}
-      href={tableHref}
-      text={columnName}
-    />
-    <span class="space" />
-    <span class="text"> is a </span>
-    <span class="space" />
-    <DocumentationLink
-      href={docLink}
-      icon={columnIcon}
-      text={`${columnType} column`}
-    />
-    <span class="period">.</span>
-  </div>
-  <div class="line">
-    <span class="bullet">•</span>
-    <InfoWord
-      on:mouseenter={() => handleMouseenter("support")}
-      on:mouseleave={handleMouseleave}
-      href={tableHref}
-      icon={support.icon}
-      color={support.iconColor}
-      text={support.text}
-    />
-    <span class="space" />
-    <span class="text">with</span>
-    <span class="space" />
-    <DocumentationLink
-      href="https://docs.budibase.com/docs/chart"
-      icon="GraphPie"
-      text="Chart components"
-    />
-    <span class="period">.</span>
-  </div>
+<Column
+  {columnName}
+  {columnIcon}
+  {columnType}
+  {tableHref}
+  {setExplanationSubject}
+/>
+<Support
+  {support}
+  {setExplanationSubject}
+/>
   {#if support?.warnings?.includes(warnings.stringAsNumber)}
-    <div class={`line`}>
-      <span class="bullet">•</span>
-      <span class="text">Any</span>
-    <span class="space" />
-    <InfoWord
-      on:mouseenter={() => handleMouseenter("stringsAndNumbers")}
-      on:mouseleave={handleMouseleave}
-      text="non-number values"
+    <StringNumber
+      {setExplanationSubject}
     />
-    <span class="space" />
-      <span class="text">
-        will be ignored
-      </span>
-      <span class="period">.</span>
-    </div>
   {/if}
   {#if support?.warnings?.includes(warnings.notRequired)}
-    <div class={`line`}>
-      <span class="bullet">•</span>
-      <span class="text">No</span>
-    <span class="space" />
-    <InfoWord
-      on:mouseenter={() => handleMouseenter("required")}
-      on:mouseleave={handleMouseleave}
-      text="required"
+    <NotRequired
+      {setExplanationSubject}
     />
-    <span class="space" />
-    <DocumentationLink
-      icon="DataUnavailable"
-      href="https://docs.budibase.com/docs/budibasedb#constraints"
-      text="Constraint"
-    />
-      <span class="comma">,</span>
-      <span class="text">
-        so values may be missing
-      </span>
-      <span class="period">.</span>
-    </div>
   {/if}
 </div>
 
@@ -158,10 +62,6 @@
 {/if}
 
 <style>
-  .text {
-    flex-shrink: 0;
-  }
-
   .tooltipContents {
     max-width: 450px;
     background-color: var(--background-alt);
@@ -170,49 +70,4 @@
     border-radius: 5px;
     box-sizing: border-box;
   }
-
-  .bullet {
-    color: var(--grey-6);
-    font-size: 17px;
-    display: inline block;
-    margin-right: 10px;
-  }
-
-  .period {
-    color: var(--grey-6);
-    font-size: 20px;
-    display: inline block;
-    margin-left: 3px;
-  }
-
-  .comma {
-    margin-left: 2px;
-    color: var(--grey-6);
-    font-size: 17px;
-    display: inline block;
-    margin-right: 5px;
-  }
-
-  .semiColon {
-    color: var(--grey-5);
-    font-size: 16px;
-    display: inline block;
-  }
-
-  .space {
-    margin-right: 5px;
-  }
-
-  .line {
-    background-color: var(--background-alt);
-    color: var(--ink);
-    align-items: center;
-    display: flex;
-
-    margin-bottom: 10px;
-  }
-
-  .line:last-child {
-    margin-bottom: 0px;
-  }
 </style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/index.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/index.svelte
index c1cdb8be18..f587d51d19 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/index.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/index.svelte
@@ -4,7 +4,7 @@
   import { selectedScreen } from "stores/builder"
   import { createEventDispatcher } from "svelte"
   import Property from './Property.svelte'
-  import InfoWord from '../InfoWord.svelte'
+  import { InfoWord } from '../typography'
 
   export let anchor
   export let schema
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/lines/Column.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/lines/Column.svelte
index b3bf785afc..b00d414613 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/lines/Column.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/lines/Column.svelte
@@ -1,9 +1,53 @@
-
 <script>
+  import { Line, InfoWord, DocumentationLink, Space, Text, Period } from "../typography"
+
+  export let columnName
+  export let columnIcon
+  export let columnType
+  export let tableHref
+  export let setExplanationSubject
+
+  const getDocLink = (columnType) => {
+    if (columnType === "Number") {
+      return "https://docs.budibase.com/docs/number"
+    }
+    if (columnType === "Text") {
+      return "https://docs.budibase.com/docs/text"
+    }
+    if (columnType === "Attachment") {
+      return "https://docs.budibase.com/docs/attachments"
+    }
+    if (columnType === "Multi-select") {
+      return "https://docs.budibase.com/docs/multi-select"
+    }
+    if (columnType === "JSON") {
+      return "https://docs.budibase.com/docs/json"
+    }
+    if (columnType === "Date/Time") {
+      return "https://docs.budibase.com/docs/datetime"
+    }
+    if (columnType === "User") {
+      return "https://docs.budibase.com/docs/user"
+    }
+
+    return ""
+  }
 </script>
 
-<div>
-</div>
-
-<style>
-</style>
+<Line>
+  <InfoWord
+    on:mouseenter={() => setExplanationSubject("column")}
+    on:mouseleave={() => setExplanationSubject(null)}
+    href={tableHref}
+    text={columnName}
+  />
+  <Space />
+  <Text>is a</Text>
+  <Space />
+  <DocumentationLink
+    href={getDocLink(columnType)}
+    icon={columnIcon}
+    text={`${columnType} column`}
+  />
+  <Period />
+</Line>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/lines/NotRequired.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/lines/NotRequired.svelte
index b3bf785afc..8fd1e4acfa 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/lines/NotRequired.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/lines/NotRequired.svelte
@@ -1,9 +1,30 @@
-
 <script>
+  import { Line, InfoWord, DocumentationLink, Space, Text, Period, Comma } from "../typography"
+
+  export let setExplanationSubject
 </script>
 
-<div>
-</div>
+
+<Line>
+  <Text>No</Text>
+  <Space />
+  <InfoWord
+  on:mouseenter={() => setExplanationSubject("required")}
+  on:mouseleave={() => setExplanationSubject(null)}
+    text="required"
+  />
+  <Space />
+  <DocumentationLink
+    icon="DataUnavailable"
+    href="https://docs.budibase.com/docs/budibasedb#constraints"
+    text="Constraint"
+  />
+  <Comma />
+  <Text>
+    so values may be missing
+  </Text>
+  <Period />
+</Line>
 
 <style>
 </style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/lines/StringNumber.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/lines/StringNumber.svelte
index b3bf785afc..ee304e32cc 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/lines/StringNumber.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/lines/StringNumber.svelte
@@ -1,9 +1,17 @@
-
 <script>
+  import { Line, InfoWord, DocumentationLink, Space, Text, Period } from "../typography"
+  export let setExplanationSubject
 </script>
 
-<div>
-</div>
-
-<style>
-</style>
+<Line>
+  <Text>Any</Text>
+  <Space />
+<InfoWord
+    on:mouseenter={() => setExplanationSubject("stringsAndNumbers")}
+    on:mouseleave={() => setExplanationSubject(null)}
+  text="non-number values"
+/>
+  <Space />
+  <Text>will be ignored</Text>
+  <Period />
+</Line>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/lines/Support.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/lines/Support.svelte
index 2e58e2fcca..92f817af09 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/lines/Support.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/lines/Support.svelte
@@ -1,8 +1,25 @@
 <script>
+  import { Line, InfoWord, DocumentationLink, Space, Text, Period } from "../typography"
+
+  export let setExplanationSubject
+  export let support
 </script>
 
-<div>
-</div>
-
-<style>
-</style>
+<Line>
+  <InfoWord
+    on:mouseenter={() => setExplanationSubject("support")}
+    on:mouseleave={() => setExplanationSubject(null)}
+    icon={support.icon}
+    color={support.iconColor}
+    text={support.text}
+  />
+  <Space />
+  <Text>with</Text>
+  <Space />
+  <DocumentationLink
+    href="https://docs.budibase.com/docs/chart"
+    icon="GraphPie"
+    text="Chart components"
+  />
+  <Period />
+</Line>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/typography/Text.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Text.svelte
new file mode 100644
index 0000000000..1527651a9c
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Text.svelte
@@ -0,0 +1,7 @@
+<span class="text"><slot /></span>
+
+<style>
+  .text {
+    flex-shrink: 0;
+  }
+</style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/typography/index.js b/packages/builder/src/components/design/settings/controls/FieldContext/typography/index.js
index 6c5a1b1866..102b65190d 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/typography/index.js
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/typography/index.js
@@ -1,5 +1,7 @@
 export { default as Space } from "./Space.svelte"
 export { default as Comma } from "./Comma.svelte"
 export { default as Period } from "./Period.svelte"
+export { default as Text } from "./Text.svelte"
 export { default as InfoWord } from "./InfoWord.svelte"
 export { default as DocumentationLink } from "./DocumentationLink.svelte"
+export { default as Line } from "./Line.svelte"

From c30f5f57813901450ad724d1627068520ac3ca7e Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Tue, 9 Apr 2024 08:38:23 +0100
Subject: [PATCH 047/123] wip

---
 .../controls/FieldContext/Chart.svelte        |  2 +-
 .../controls/FieldContext/Property.svelte     | 38 -------------------
 2 files changed, 1 insertion(+), 39 deletions(-)
 delete mode 100644 packages/builder/src/components/design/settings/controls/FieldContext/Property.svelte

diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
index 26633d7171..87510e5827 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
@@ -66,7 +66,7 @@
     max-width: 450px;
     background-color: var(--background-alt);
     display: block;
-    padding: 20px 16px;
+    padding: 20px 16px 10px;
     border-radius: 5px;
     box-sizing: border-box;
   }
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/Property.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/Property.svelte
deleted file mode 100644
index cc4e91da75..0000000000
--- a/packages/builder/src/components/design/settings/controls/FieldContext/Property.svelte
+++ /dev/null
@@ -1,38 +0,0 @@
-<script>
-  export let name;
-  export let value;
-  export let pre;
-</script>
-
-<div class="property">
-  
-{#if pre}
-<pre class="pre propertyValue">
-{value}
-</pre>
-{:else}
-  <span class="propertyName">
-    {name}
-  </span>
-  <span class="propertyDivider">-</span>
-  <span class="propertyValue">
-    {value}
-  </span>
-{/if}
-</div>
-
-<style>
-  .propertyDivider {
-    padding: 4px;
-  }
-  .propertyName {
-    font-style: italic;
-
-  }
-.pre {
-  padding: 4px;
-  border-radius: 3px;
-  width: 250px;
-  background-color: black;
-}
-</style>

From 38e4b92ae86899972afd6b838a5bed080e703913 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Tue, 9 Apr 2024 10:50:38 +0100
Subject: [PATCH 048/123] Refactor subjects

---
 .../ExplanationModal/index.svelte             | 143 ++----------------
 .../ExplanationModal/subjects/Column.svelte   |  53 +++++++
 .../subjects/NotRequired.svelte               |   9 ++
 .../subjects/StringsAsNumbers.svelte          |   9 ++
 .../ExplanationModal/subjects/Support.svelte  |  38 +++++
 .../{ => subjects/components}/Property.svelte |   0
 .../subjects/components/Section.svelte        |   9 ++
 .../subjects/components/Subject.svelte        |  27 ++++
 .../subjects/components/index.js              |   3 +
 .../ExplanationModal/subjects/index.js        |   4 +
 10 files changed, 166 insertions(+), 129 deletions(-)
 create mode 100644 packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/Column.svelte
 create mode 100644 packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/NotRequired.svelte
 create mode 100644 packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/StringsAsNumbers.svelte
 create mode 100644 packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/Support.svelte
 rename packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/{ => subjects/components}/Property.svelte (100%)
 create mode 100644 packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Section.svelte
 create mode 100644 packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Subject.svelte
 create mode 100644 packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/index.js
 create mode 100644 packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/index.js

diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/index.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/index.svelte
index f587d51d19..227e5b46fc 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/index.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/index.svelte
@@ -1,10 +1,6 @@
 <script>
-  import { Icon, Heading, Multiselect, ContextTooltip } from "@budibase/bbui"
-  import { getDatasourceForProvider, getSchemaForDatasource } from "dataBinding"
-  import { selectedScreen } from "stores/builder"
-  import { createEventDispatcher } from "svelte"
-  import Property from './Property.svelte'
-  import { InfoWord } from '../typography'
+  import { ContextTooltip } from "@budibase/bbui"
+  import { Column, Support, NotRequired, StringsAsNumbers } from './subjects'
 
   export let anchor
   export let schema
@@ -18,133 +14,22 @@
   {anchor}
   offset={20}
 >
-<div class="explanationModalContent">
-  {#if subject === "column"}
-    <div class="heading wrapper">
-    <span class="heading">Column Overview</span>
-    </div>
-    <div class="divider" />
-    <div class="section">
-      {#if schema.type === "string"}
-        <Property
-          name="Max Length"
-          value={schema?.constraints?.length?.maximum ?? "None"}
-        />
-      {:else if schema.type === "datetime"}
-        <Property
-          name="Earliest"
-          value={schema?.constraints?.datetime?.earliest === "" ? "None" : schema?.constraints?.datetime?.earliest}
-        />
-        <Property
-          name="Latest"
-          value={schema?.constraints?.datetime?.latest === "" ? "None" : schema?.constraints?.datetime?.latest}
-        />
-        <Property
-          name="Ignore time zones"
-          value={schema?.ignoreTimeZones === true ? "Yes" : "No"}
-        />
-        <Property
-          name="Date only"
-          value={schema?.dateOnly === true ? "Yes" : "No"}
-        />
-      {:else if schema.type === "number"}
-        <Property
-          name="Min Value"
-          value={schema?.constraints?.numericality?.greaterThanOrEqualTo === "" ? "None" : schema?.constraints?.numericality?.greaterThanOrEqualTo}
-        />
-        <Property
-          name="Max Value"
-          value={schema?.constraints?.numericality?.lessThanOrEqualTo === "" ? "None" : schema?.constraints?.numericality?.lessThanOrEqualTo}
-        />
-      {:else if schema.type === "json"}
-        <Property
-          pre
-          name="Schema"
-          value={JSON.stringify(schema?.schema ?? {}, null, 2)}
-        />
-      {/if}
-      <Property
-        name="Required"
-        value={schema?.constraints?.presence?.allowEmpty === false ? "Yes" : "No"}
-      />
-    </div>
-  {:else if subject === "support"}
-      <span class="heading">Data/Component Compatibility</span>
-      <div class="divider" />
-      <div class="section">
-        <InfoWord
-          icon="CheckmarkCircle"
-          color="var(--green)"
-          text="Compatible"
-        />
-        <span class="body">Fully compatible with the component as long as the data is present.</span>
-      </div>
-      <div class="section">
-        <InfoWord
-          icon="AlertCheck"
-          color="var(--yellow)"
-          text="Possibly compatible"
-        />
-        <span class="body">Possibly compatible with the component, but beware of other caveats mentioned in the context tooltip.</span>
-      </div>
-      <div class="section">
-        <InfoWord
-          icon="Alert"
-          color="var(--red)"
-          text="Not compatible"
-        />
-        <span class="body">Imcompatible with the component.</span>
-      </div>
-
-
-  {:else if subject === "stringsAndNumbers"}
-    <span class="heading">Text as Numbers</span>
-    <div class="divider" />
-    <div class="section">
-      Text can be used in place of numbers in certain scenarios, but care needs to be taken to ensure that non-numerical values aren't also present, otherwise they may be parsed incorrectly and lead to unexpected behavior.
-    </div>
-  {:else if subject === "required"}
-    <span class="heading">'Required' Constraint</span>
-    <div class="divider" />
-    <div class="section">
-      <span class="body">A 'required' contraint can be applied to columns to ensure a value is always present. If a column doesn't have this constraint, then its value for a particular row could he missing.</span>
-    </div>
-  {/if}
-</div>
+  <div class="explanationModalContent">
+    {#if subject === "column"}
+      <Column {schema} />
+    {:else if subject === "support"}
+      <Support />
+    {:else if subject === "stringsAndNumbers"}
+      <StringsAsNumbers />
+    {:else if subject === "required"}
+      <NotRequired />
+    {/if}
+  </div>
 </ContextTooltip>
 
 <style>
   .explanationModalContent {
     max-width: 300px;
-    padding: 16px 12px 18px;
+    padding: 16px 12px 6px;
   }
-
-  .heading {
-    font-weight: 600;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .divider {
-    border-bottom: 1px solid var(--grey-4);
-    margin: 12px 0 12px;
-  }
-
-
-  .section {
-    margin-bottom: 16px;
-  }
-  .section:last-child {
-    margin-bottom: 16px;
-  }
-
-  .section .body {
-    display: block;
-    margin-top: 5px;
-  }
-
-  /* BETWEEN STUFF */
-  /* BETWEEN STUFF */
-  /* BETWEEN STUFF */
 </style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/Column.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/Column.svelte
new file mode 100644
index 0000000000..fb5c26fac9
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/Column.svelte
@@ -0,0 +1,53 @@
+<script>
+  import { Subject, Property, Section }  from './components'
+
+  export let schema
+</script>
+
+
+<Subject heading="Column Overview">
+  <Section>
+  {#if schema.type === "string"}
+    <Property
+      name="Max Length"
+      value={schema?.constraints?.length?.maximum ?? "None"}
+    />
+  {:else if schema.type === "datetime"}
+    <Property
+      name="Earliest"
+      value={schema?.constraints?.datetime?.earliest === "" ? "None" : schema?.constraints?.datetime?.earliest}
+    />
+    <Property
+      name="Latest"
+      value={schema?.constraints?.datetime?.latest === "" ? "None" : schema?.constraints?.datetime?.latest}
+    />
+    <Property
+      name="Ignore time zones"
+      value={schema?.ignoreTimeZones === true ? "Yes" : "No"}
+    />
+    <Property
+      name="Date only"
+      value={schema?.dateOnly === true ? "Yes" : "No"}
+    />
+  {:else if schema.type === "number"}
+    <Property
+      name="Min Value"
+      value={schema?.constraints?.numericality?.greaterThanOrEqualTo === "" ? "None" : schema?.constraints?.numericality?.greaterThanOrEqualTo}
+    />
+    <Property
+      name="Max Value"
+      value={schema?.constraints?.numericality?.lessThanOrEqualTo === "" ? "None" : schema?.constraints?.numericality?.lessThanOrEqualTo}
+    />
+  {:else if schema.type === "json"}
+    <Property
+      pre
+      name="Schema"
+      value={JSON.stringify(schema?.schema ?? {}, null, 2)}
+    />
+  {/if}
+  <Property
+    name="Required"
+    value={schema?.constraints?.presence?.allowEmpty === false ? "Yes" : "No"}
+   />
+   </Section>
+</Subject>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/NotRequired.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/NotRequired.svelte
new file mode 100644
index 0000000000..f9a00ebcd8
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/NotRequired.svelte
@@ -0,0 +1,9 @@
+<script>
+  import { Subject, Section } from './components'
+</script>
+
+<Subject heading="'Required' Constraint">
+  <Section>
+      A 'required' contraint can be applied to columns to ensure a value is always present. If a column doesn't have this constraint, then its value for a particular row could he missing.
+  </Section>
+</Subject>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/StringsAsNumbers.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/StringsAsNumbers.svelte
new file mode 100644
index 0000000000..27e28c13e6
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/StringsAsNumbers.svelte
@@ -0,0 +1,9 @@
+<script>
+  import { Subject, Section } from './components'
+</script>
+
+<Subject heading="Text as Numbers">
+  <Section>
+    Text can be used in place of numbers in certain scenarios, but care needs to be taken to ensure that non-numerical values aren't also present, otherwise they may be parsed incorrectly and lead to unexpected behavior.
+  </Section>
+</Subject>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/Support.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/Support.svelte
new file mode 100644
index 0000000000..e15c231f0e
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/Support.svelte
@@ -0,0 +1,38 @@
+<script>
+  import { InfoWord } from '../../typography'
+  import { Subject, Section } from './components'
+</script>
+
+<Subject heading="Data/Component Compatibility">
+  <Section>
+    <InfoWord
+      icon="CheckmarkCircle"
+      color="var(--green)"
+      text="Compatible"
+    />
+    <span class="body">Fully compatible with the component as long as the data is present.</span>
+  </Section>
+  <Section>
+    <InfoWord
+      icon="AlertCheck"
+      color="var(--yellow)"
+      text="Possibly compatible"
+    />
+    <span class="body">Possibly compatible with the component, but beware of other caveats mentioned in the context tooltip.</span>
+  </Section>
+  <Section>
+    <InfoWord
+      icon="Alert"
+      color="var(--red)"
+      text="Not compatible"
+    />
+    <span class="body">Imcompatible with the component.</span>
+  </Section>
+</Subject>
+
+<style>
+  .body {
+    display: block;
+    margin-top: 5px;
+  }
+</style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/Property.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Property.svelte
similarity index 100%
rename from packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/Property.svelte
rename to packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Property.svelte
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Section.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Section.svelte
new file mode 100644
index 0000000000..41f919fd10
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Section.svelte
@@ -0,0 +1,9 @@
+<div class="section">
+  <slot />
+</div>
+
+<style>
+  .section {
+    margin-bottom: 16px;
+  }
+</style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Subject.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Subject.svelte
new file mode 100644
index 0000000000..2231a048ce
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Subject.svelte
@@ -0,0 +1,27 @@
+<script>
+  export let heading = ""
+</script>
+
+<div class="heading">
+  <span class="heading">
+    <slot name="heading">
+      {heading}
+    </slot>
+  </span>
+</div>
+<div class="divider" />
+<slot />
+
+<style>
+  .heading {
+    font-weight: 600;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .divider {
+    border-bottom: 1px solid var(--grey-4);
+    margin: 12px 0 12px;
+  }
+</style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/index.js b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/index.js
new file mode 100644
index 0000000000..4ea7a2ca88
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/index.js
@@ -0,0 +1,3 @@
+export { default as Subject } from "./Subject.svelte"
+export { default as Property } from "./Property.svelte"
+export { default as Section } from "./Section.svelte"
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/index.js b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/index.js
new file mode 100644
index 0000000000..5dd1ed5410
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/index.js
@@ -0,0 +1,4 @@
+export { default as Column } from "./Column.svelte"
+export { default as NotRequired } from "./NotRequired.svelte"
+export { default as StringsAsNumbers } from "./StringsAsNumbers.svelte"
+export { default as Support } from "./Support.svelte"

From 6bedafbdb10fba1adc67ddfd1dc867fe85562335 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Tue, 9 Apr 2024 12:50:26 +0100
Subject: [PATCH 049/123] refactor

---
 .../settings/controls/FieldContext/Chart.svelte     |  3 ++-
 .../FieldContext/ExplanationModal/index.svelte      | 13 +++++++------
 .../controls/FieldContext/lines/Column.svelte       |  5 +++--
 .../controls/FieldContext/lines/NotRequired.svelte  |  5 +++--
 .../controls/FieldContext/lines/StringNumber.svelte |  6 ++++--
 .../controls/FieldContext/lines/Support.svelte      |  5 +++--
 .../settings/controls/FieldContext/subjects.js      |  9 +++++++++
 7 files changed, 31 insertions(+), 15 deletions(-)
 create mode 100644 packages/builder/src/components/design/settings/controls/FieldContext/subjects.js

diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
index 87510e5827..b60c242b5a 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
@@ -2,6 +2,7 @@
   import ExplanationModal from './ExplanationModal/index.svelte'
   import { warnings, errors } from "../../fieldValidator";
   import { Column, Support, NotRequired, StringNumber } from "./lines"
+  import subjects from './subjects';
 
   export let support = {}
 
@@ -16,7 +17,7 @@
 
   let root = null;
 
-  let explanationModalSubject = null
+  let explanationModalSubject = subjects.none
 
   const setExplanationSubject = (option) => {
     explanationModalSubject = option;
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/index.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/index.svelte
index 227e5b46fc..133b2a51b4 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/index.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/index.svelte
@@ -1,27 +1,28 @@
 <script>
   import { ContextTooltip } from "@budibase/bbui"
   import { Column, Support, NotRequired, StringsAsNumbers } from './subjects'
+  import subjects from '../subjects'
 
   export let anchor
   export let schema
-  export let subject = null
+  export let subject = subjects.none
 </script>
 
 
 <ContextTooltip
   noAnimation
-  visible={subject !== null}
+  visible={subject !== subjects.none}
   {anchor}
   offset={20}
 >
   <div class="explanationModalContent">
-    {#if subject === "column"}
+    {#if subject === subjects.column}
       <Column {schema} />
-    {:else if subject === "support"}
+    {:else if subject === subjects.support}
       <Support />
-    {:else if subject === "stringsAndNumbers"}
+    {:else if subject === subjects.stringsAsNumbers}
       <StringsAsNumbers />
-    {:else if subject === "required"}
+    {:else if subject === subjects.notRequired}
       <NotRequired />
     {/if}
   </div>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/lines/Column.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/lines/Column.svelte
index b00d414613..e1952fd67d 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/lines/Column.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/lines/Column.svelte
@@ -1,5 +1,6 @@
 <script>
   import { Line, InfoWord, DocumentationLink, Space, Text, Period } from "../typography"
+  import subjects from '../subjects'
 
   export let columnName
   export let columnIcon
@@ -36,8 +37,8 @@
 
 <Line>
   <InfoWord
-    on:mouseenter={() => setExplanationSubject("column")}
-    on:mouseleave={() => setExplanationSubject(null)}
+    on:mouseenter={() => setExplanationSubject(subjects.column)}
+    on:mouseleave={() => setExplanationSubject(subjects.none)}
     href={tableHref}
     text={columnName}
   />
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/lines/NotRequired.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/lines/NotRequired.svelte
index 8fd1e4acfa..4c90e73916 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/lines/NotRequired.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/lines/NotRequired.svelte
@@ -1,5 +1,6 @@
 <script>
   import { Line, InfoWord, DocumentationLink, Space, Text, Period, Comma } from "../typography"
+  import subjects from '../subjects'
 
   export let setExplanationSubject
 </script>
@@ -9,8 +10,8 @@
   <Text>No</Text>
   <Space />
   <InfoWord
-  on:mouseenter={() => setExplanationSubject("required")}
-  on:mouseleave={() => setExplanationSubject(null)}
+  on:mouseenter={() => setExplanationSubject(subjects.notRequired)}
+  on:mouseleave={() => setExplanationSubject(subjects.none)}
     text="required"
   />
   <Space />
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/lines/StringNumber.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/lines/StringNumber.svelte
index ee304e32cc..b3499a9733 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/lines/StringNumber.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/lines/StringNumber.svelte
@@ -1,5 +1,7 @@
 <script>
   import { Line, InfoWord, DocumentationLink, Space, Text, Period } from "../typography"
+  import subjects from '../subjects'
+
   export let setExplanationSubject
 </script>
 
@@ -7,8 +9,8 @@
   <Text>Any</Text>
   <Space />
 <InfoWord
-    on:mouseenter={() => setExplanationSubject("stringsAndNumbers")}
-    on:mouseleave={() => setExplanationSubject(null)}
+    on:mouseenter={() => setExplanationSubject(subjects.stringsAsNumbers)}
+    on:mouseleave={() => setExplanationSubject(subjects.none)}
   text="non-number values"
 />
   <Space />
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/lines/Support.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/lines/Support.svelte
index 92f817af09..4fbfe87c76 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/lines/Support.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/lines/Support.svelte
@@ -1,5 +1,6 @@
 <script>
   import { Line, InfoWord, DocumentationLink, Space, Text, Period } from "../typography"
+  import subjects from '../subjects'
 
   export let setExplanationSubject
   export let support
@@ -7,8 +8,8 @@
 
 <Line>
   <InfoWord
-    on:mouseenter={() => setExplanationSubject("support")}
-    on:mouseleave={() => setExplanationSubject(null)}
+    on:mouseenter={() => setExplanationSubject(subjects.support)}
+    on:mouseleave={() => setExplanationSubject(subjects.none)}
     icon={support.icon}
     color={support.iconColor}
     text={support.text}
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/subjects.js b/packages/builder/src/components/design/settings/controls/FieldContext/subjects.js
new file mode 100644
index 0000000000..a0f6ea912c
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/subjects.js
@@ -0,0 +1,9 @@
+const subjects = {
+  column: Symbol("explanation-modal-column"),
+  support: Symbol("explanation-modal-support"),
+  stringsAsNumbers: Symbol("explanation-modal-strings-as-numbers"),
+  notRequired: Symbol("explanation-modal-not-required"),
+  none: Symbol("explanation-modal-none")
+}
+
+export default subjects;

From e08d7453608d99b1829c02c6ce159c7f958ba3c5 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Wed, 10 Apr 2024 07:19:29 +0100
Subject: [PATCH 050/123] wip

---
 .../controls/FieldContext/Chart.svelte        |  2 +-
 .../controls/FieldContext/validator.js        | 82 +++++++++++++++++++
 .../settings/controls/MultiFieldSelect.svelte |  2 +-
 .../design/settings/fieldValidator.js         |  1 -
 4 files changed, 84 insertions(+), 3 deletions(-)
 create mode 100644 packages/builder/src/components/design/settings/controls/FieldContext/validator.js

diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
index b60c242b5a..82e755036e 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
@@ -1,6 +1,6 @@
 <script>
   import ExplanationModal from './ExplanationModal/index.svelte'
-  import { warnings, errors } from "../../fieldValidator";
+  import { warnings, errors } from "./validator";
   import { Column, Support, NotRequired, StringNumber } from "./lines"
   import subjects from './subjects';
 
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/validator.js b/packages/builder/src/components/design/settings/controls/FieldContext/validator.js
new file mode 100644
index 0000000000..3c30d5bd33
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/validator.js
@@ -0,0 +1,82 @@
+import { capitalize } from 'lodash';
+
+export const errors = {
+  general: Symbol("values-validator-general"),
+  jsonPrimitivesOnly: Symbol("values-validator-json-primitives-only"),
+}
+
+export const warnings = {
+  stringAsNumber: Symbol("values-validator-string-as-number"),
+  chartDatetime: Symbol("values-validator-chart-datetime"),
+  notRequired: Symbol("values-validator-not-required"),
+}
+
+export const constants = {
+  unsupported: Symbol("values-validator-unsupported"),
+  partialSupport: Symbol("values-validator-partialSupport"),
+  supported: Symbol("values-validator-supported")
+}
+
+export const validators = {
+  chart: (fieldSchema) => {
+    try {
+      const response = {
+        level: null,
+        warnings: [],
+        errors: [],
+        text: "",
+        icon: "",
+        iconColor: ""
+      }
+      const generalUnsupportedFields = ["array", "attachment", "barcodeqr", "link", "bb_reference"]
+      if (generalUnsupportedFields.includes(fieldSchema.type)) {
+        response.errors.push(errors.general)
+      }
+
+      if (fieldSchema.type === "json") {
+          response.errors.push(errors.jsonPrimitivesOnly)
+      }
+
+      if (fieldSchema.type === "string") {
+        response.warnings.push(warnings.stringAsNumber)
+      }
+      if (fieldSchema.type === "datetime") {
+        response.warnings.push(warnings.chartDatetime);
+          //"This column can be used as an input for a chart, but it may be parsed differently depending on which is used.
+      }
+
+      const isRequired = fieldSchema?.constraints?.presence?.allowEmpty === false
+      if (!isRequired) {
+        response.warnings.push(warnings.notRequired);
+      }
+
+      if (response.errors.length > 0) {
+        response.level = constants.unsupported
+        response.text = "Not compatible"
+        response.icon = "Alert"
+        response.iconColor = "var(--red)"
+      } else if (response.warnings.length > 0) {
+        response.level = constants.partialSupport
+        response.text = "Partially compatible"
+        response.icon = "AlertCheck"
+        response.iconColor = "var(--yellow)"
+      } else {
+        response.level = constants.supported
+        response.text = "Compatible"
+        response.icon = "CheckmarkCircle"
+        response.iconColor = "var(--green)"
+      }
+
+      return response
+    } catch (e) {
+      return {
+        level: constants.partialSupport,
+        warnings: [],
+        errors: [],
+        text: "Partially compatible",
+        icon: "AlertCheck",
+        iconColor: "var(--yellow)"
+      }
+    }
+  }
+};
diff --git a/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte b/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
index 92d5dd298c..ed92fb9f3d 100644
--- a/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
@@ -3,7 +3,7 @@
   import { getDatasourceForProvider, getSchemaForDatasource } from "dataBinding"
   import { selectedScreen } from "stores/builder"
   import { createEventDispatcher } from "svelte"
-  import { validators, constants as validatorConstants } from "../fieldValidator";
+  import { validators } from "./FieldContext/Validator";
   import ChartFieldContext from './FieldContext/Chart.svelte'
   import { FIELDS } from 'constants/backend'
   import { goto, params } from "@roxi/routify"
diff --git a/packages/builder/src/components/design/settings/fieldValidator.js b/packages/builder/src/components/design/settings/fieldValidator.js
index 4580c41911..3c30d5bd33 100644
--- a/packages/builder/src/components/design/settings/fieldValidator.js
+++ b/packages/builder/src/components/design/settings/fieldValidator.js
@@ -1,7 +1,6 @@
 import { capitalize } from 'lodash';
 
 export const errors = {
-  // fail without explanation
   general: Symbol("values-validator-general"),
   jsonPrimitivesOnly: Symbol("values-validator-json-primitives-only"),
 }

From cd36056124cbb15b04a33603045e61729227a84c Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Wed, 10 Apr 2024 08:37:33 +0100
Subject: [PATCH 051/123] wip refactor manifest

---
 packages/bbui/src/Form/Core/Select.svelte     |   4 +
 packages/bbui/src/Form/Select.svelte          |   5 +
 .../{Chart.svelte => FieldContext.svelte}     |   0
 .../settings/controls/FieldContext/index.js   |   2 +
 .../controls/FieldContext/validator.js        | 110 ++++++++--------
 .../settings/controls/FieldSelect.svelte      | 118 +++++++++++++-----
 .../settings/controls/MultiFieldSelect.svelte | 100 +++++++--------
 .../design/settings/fieldValidator.js         |  82 ------------
 .../Component/ComponentSettingsSection.svelte |   3 +-
 packages/client/manifest.json                 |   4 +-
 10 files changed, 201 insertions(+), 227 deletions(-)
 rename packages/builder/src/components/design/settings/controls/FieldContext/{Chart.svelte => FieldContext.svelte} (100%)
 create mode 100644 packages/builder/src/components/design/settings/controls/FieldContext/index.js
 delete mode 100644 packages/builder/src/components/design/settings/fieldValidator.js

diff --git a/packages/bbui/src/Form/Core/Select.svelte b/packages/bbui/src/Form/Core/Select.svelte
index 5754c683ed..0111bd6bcf 100644
--- a/packages/bbui/src/Form/Core/Select.svelte
+++ b/packages/bbui/src/Form/Core/Select.svelte
@@ -26,6 +26,8 @@
   export let tag = null
   export let searchTerm = null
   export let loading
+  export let onOptionMouseenter = () => {}
+  export let onOptionMouseleave = () => {}
 
   const dispatch = createEventDispatcher()
 
@@ -95,6 +97,8 @@
   {autocomplete}
   {sort}
   {tag}
+  {onOptionMouseenter}
+  {onOptionMouseleave}
   isPlaceholder={value == null || value === ""}
   placeholderOption={placeholder === false ? null : placeholder}
   isOptionSelected={option => compareOptionAndValue(option, value)}
diff --git a/packages/bbui/src/Form/Select.svelte b/packages/bbui/src/Form/Select.svelte
index 2119a37980..260090c7b7 100644
--- a/packages/bbui/src/Form/Select.svelte
+++ b/packages/bbui/src/Form/Select.svelte
@@ -29,6 +29,9 @@
   export let tag = null
   export let helpText = null
   export let compare
+  export let onOptionMouseenter = () => {}
+  export let onOptionMouseleave = () => {}
+
   const dispatch = createEventDispatcher()
   const onChange = e => {
     value = e.detail
@@ -67,6 +70,8 @@
     {customPopoverHeight}
     {tag}
     {compare}
+    {onOptionMouseenter}
+    {onOptionMouseleave}
     on:change={onChange}
     on:click
   />
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/FieldContext.svelte
similarity index 100%
rename from packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
rename to packages/builder/src/components/design/settings/controls/FieldContext/FieldContext.svelte
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/index.js b/packages/builder/src/components/design/settings/controls/FieldContext/index.js
new file mode 100644
index 0000000000..ba7f152627
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/index.js
@@ -0,0 +1,2 @@
+export { default as FieldContext } from "./FieldContext.svelte"
+export * from "./validator"
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/validator.js b/packages/builder/src/components/design/settings/controls/FieldContext/validator.js
index 3c30d5bd33..cb4e309148 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/validator.js
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/validator.js
@@ -17,66 +17,64 @@ export const constants = {
   supported: Symbol("values-validator-supported")
 }
 
-export const validators = {
-  chart: (fieldSchema) => {
-    try {
-      const response = {
-        level: null,
-        warnings: [],
-        errors: [],
-        text: "",
-        icon: "",
-        iconColor: ""
-      }
-      const generalUnsupportedFields = ["array", "attachment", "barcodeqr", "link", "bb_reference"]
-      if (generalUnsupportedFields.includes(fieldSchema.type)) {
-        response.errors.push(errors.general)
-      }
+export const validate = (fieldSchema) => {
+  try {
+    const response = {
+      level: null,
+      warnings: [],
+      errors: [],
+      text: "",
+      icon: "",
+      iconColor: ""
+    }
+    const generalUnsupportedFields = ["array", "attachment", "barcodeqr", "link", "bb_reference"]
+    if (generalUnsupportedFields.includes(fieldSchema.type)) {
+      response.errors.push(errors.general)
+    }
 
-      if (fieldSchema.type === "json") {
-          response.errors.push(errors.jsonPrimitivesOnly)
-      }
+    if (fieldSchema.type === "json") {
+        response.errors.push(errors.jsonPrimitivesOnly)
+    }
 
-      if (fieldSchema.type === "string") {
-        response.warnings.push(warnings.stringAsNumber)
-      }
-      if (fieldSchema.type === "datetime") {
-        response.warnings.push(warnings.chartDatetime);
-          //"This column can be used as an input for a chart, but it may be parsed differently depending on which is used.
-      }
+    if (fieldSchema.type === "string") {
+      response.warnings.push(warnings.stringAsNumber)
+    }
+    if (fieldSchema.type === "datetime") {
+      response.warnings.push(warnings.chartDatetime);
+        //"This column can be used as an input for a chart, but it may be parsed differently depending on which is used.
+    }
 
-      const isRequired = fieldSchema?.constraints?.presence?.allowEmpty === false
-      if (!isRequired) {
-        response.warnings.push(warnings.notRequired);
-      }
+    const isRequired = fieldSchema?.constraints?.presence?.allowEmpty === false
+    if (!isRequired) {
+      response.warnings.push(warnings.notRequired);
+    }
 
-      if (response.errors.length > 0) {
-        response.level = constants.unsupported
-        response.text = "Not compatible"
-        response.icon = "Alert"
-        response.iconColor = "var(--red)"
-      } else if (response.warnings.length > 0) {
-        response.level = constants.partialSupport
-        response.text = "Partially compatible"
-        response.icon = "AlertCheck"
-        response.iconColor = "var(--yellow)"
-      } else {
-        response.level = constants.supported
-        response.text = "Compatible"
-        response.icon = "CheckmarkCircle"
-        response.iconColor = "var(--green)"
-      }
+    if (response.errors.length > 0) {
+      response.level = constants.unsupported
+      response.text = "Not compatible"
+      response.icon = "Alert"
+      response.iconColor = "var(--red)"
+    } else if (response.warnings.length > 0) {
+      response.level = constants.partialSupport
+      response.text = "Partially compatible"
+      response.icon = "AlertCheck"
+      response.iconColor = "var(--yellow)"
+    } else {
+      response.level = constants.supported
+      response.text = "Compatible"
+      response.icon = "CheckmarkCircle"
+      response.iconColor = "var(--green)"
+    }
 
-      return response
-    } catch (e) {
-      return {
-        level: constants.partialSupport,
-        warnings: [],
-        errors: [],
-        text: "Partially compatible",
-        icon: "AlertCheck",
-        iconColor: "var(--yellow)"
-      }
+    return response
+  } catch (e) {
+    return {
+      level: constants.partialSupport,
+      warnings: [],
+      errors: [],
+      text: "Partially compatible",
+      icon: "AlertCheck",
+      iconColor: "var(--yellow)"
     }
   }
-};
+}
diff --git a/packages/builder/src/components/design/settings/controls/FieldSelect.svelte b/packages/builder/src/components/design/settings/controls/FieldSelect.svelte
index 3f39c12800..ecb506f656 100644
--- a/packages/builder/src/components/design/settings/controls/FieldSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldSelect.svelte
@@ -1,25 +1,32 @@
 <script>
-  import { Select } from "@budibase/bbui"
+  import { Select, ContextTooltip } from "@budibase/bbui"
   import { getDatasourceForProvider, getSchemaForDatasource } from "dataBinding"
   import { selectedScreen } from "stores/builder"
   import { createEventDispatcher } from "svelte"
-  import { validators, constants as validatorConstants } from "../fieldValidator";
+  import { FieldContext, validate } from './FieldContext'
+  import { debounce } from "lodash"
+  import { goto, params } from "@roxi/routify"
+  import { Constants } from "@budibase/frontend-core"
+  import { FIELDS } from 'constants/backend'
 
   export let componentInstance = {}
   export let value = ""
   export let placeholder
-  export let fieldValidator
+  export let columnContext
 
-  const getFieldSupport = (schema, fieldValidator) => {
-    if (fieldValidator == null) {
+  let contextTooltipAnchor = null
+  let currentOption = null
+  let previousOption = null
+  let contextTooltipVisible = false
+
+  const getFieldSupport = (schema, columnContext) => {
+    if (!columnContext) {
       return {}
     }
 
-    const validator = validators[fieldValidator];
-
     const fieldSupport = {}
     Object.entries(schema || {}).forEach(([key, value]) => {
-      fieldSupport[key] = validator(value)
+      fieldSupport[key] = validate(value)
     })
 
     return fieldSupport
@@ -28,7 +35,7 @@
   const dispatch = createEventDispatcher()
   $: datasource = getDatasourceForProvider($selectedScreen, componentInstance)
   $: schema = getSchemaForDatasource($selectedScreen, datasource).schema
-  $: fieldSupport = getFieldSupport(schema, fieldValidator);
+  $: fieldSupport = getFieldSupport(schema, columnContext);
   $: options = Object.keys(schema || {})
   $: boundValue = getValidValue(value, options)
 
@@ -51,34 +58,87 @@
     dispatch("change", boundValue)
   }
 
-  const getOptionIcon = option => {
-    /*
-    const support = fieldSupport[option]?.support;
+  const updateTooltip = debounce((e, option) => {
+    if (option == null) {
+        contextTooltipVisible = false;
+    } else {
+    contextTooltipAnchor = e?.target;
+    previousOption = currentOption;
+    currentOption = option;
+    contextTooltipVisible = true;
+    }
+  }, 200);
 
-    if (support == null) return null;
-    if (support === supported) return null
-
-    if (support === partialSupport) return "Warning"
-    if (support === unsupported) return "Error"
-*/
+  const onOptionMouseenter = (e, option, idx) => {
+    updateTooltip(e, option);
   }
 
-  const getOptionIconTooltip = option => {
+  const onOptionMouseleave = (e, option) => {
+    updateTooltip(e, null);
+  }
+  const getOptionIcon = optionKey => {
+    const option = schema[optionKey]
+    if (!option) return ""
+
+    if (option.autocolumn) {
+      return "MagicWand"
+    }
+    const { type, subtype } = option
+
+    const result =
+      typeof Constants.TypeIconMap[type] === "object" && subtype
+        ? Constants.TypeIconMap[type][subtype]
+        : Constants.TypeIconMap[type]
+
+    return result || "Text"
   }
 
-  const isOptionEnabled = option => {
-    return true
-    const support = fieldSupport[option]?.support;
+  const getOptionIconTooltip = optionKey => {
+    const option = schema[optionKey]
 
-    if (support == null) return true
-    if (support == unsupported) return false
+    const type = option?.type;
+    const field = Object.values(FIELDS).find(f => f.type === type)
 
-    return true
+    if (field) {
+      return field.name
+    }
+
+    return ""
   }
+
 </script>
 
 <Select
-  {isOptionEnabled}
-  {getOptionIcon}
-  {getOptionIconTooltip}
-  {placeholder} value={boundValue} on:change={onChange} {options} />
+  {placeholder}
+  value={boundValue}
+  on:change={onChange} 
+  {options}
+  {onOptionMouseenter}
+  {onOptionMouseleave}
+/>
+
+{#if columnContext}
+  <ContextTooltip
+    visible={contextTooltipVisible}
+    anchor={contextTooltipAnchor}
+    offset={20}
+  >
+    <FieldContext
+      explanationModal
+      tableHref={`/builder/app/${$params.application}/data/table/${datasource?.tableId}`}
+      schema={schema[currentOption]}
+      support={fieldSupport[currentOption]}
+      columnIcon={getOptionIcon(currentOption)}
+      columnName={currentOption}
+      columnType={getOptionIconTooltip(currentOption)}
+    />
+    <FieldContext
+      slot="previous"
+      schema={schema[previousOption]}
+      support={fieldSupport[previousOption]}
+      columnIcon={getOptionIcon(previousOption)}
+      columnName={previousOption}
+      columnType={getOptionIconTooltip(previousOption)}
+    />
+  </ContextTooltip>
+{/if}
diff --git a/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte b/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
index ed92fb9f3d..4ff293e415 100644
--- a/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
@@ -1,54 +1,39 @@
 <script>
   import { Icon, Heading, Multiselect, ContextTooltip } from "@budibase/bbui"
   import { getDatasourceForProvider, getSchemaForDatasource } from "dataBinding"
-  import { selectedScreen } from "stores/builder"
+  import { selectedScreen,
+    componentStore,
+  } from "stores/builder"
   import { createEventDispatcher } from "svelte"
-  import { validators } from "./FieldContext/Validator";
-  import ChartFieldContext from './FieldContext/Chart.svelte'
+  import { FieldContext, validate } from './FieldContext'
   import { FIELDS } from 'constants/backend'
   import { goto, params } from "@roxi/routify"
   import { debounce } from "lodash"
+  import { Constants } from "@budibase/frontend-core"
 
   export let componentInstance = {}
   export let value = ""
   export let placeholder
-  export let fieldValidator
+  export let columnContext
+  export let valueTypes
 
   let contextTooltipAnchor = null
   let currentOption = null
   let previousOption = null
   let contextTooltipVisible = false
 
-  const TypeIconMap = {
-    text: "Text",
-    options: "Dropdown",
-    datetime: "Date",
-    barcodeqr: "Camera",
-    longform: "TextAlignLeft",
-    array: "Dropdown",
-    number: "123",
-    boolean: "Boolean",
-    attachment: "AppleFiles",
-    link: "DataCorrelated",
-    formula: "Calculator",
-    json: "Brackets",
-    bigint: "TagBold",
-    bb_reference: {
-      user: "User",
-      users: "UserGroup",
-    },
-  }
+  $: componentDefinition = componentStore.getDefinition(
+    componentInstance?._component
+  )
 
-  const getFieldSupport = (schema, fieldValidator) => {
-    if (fieldValidator == null) {
+  const getFieldSupport = (schema, columnContext) => {
+    if (!columnContext) {
       return {}
     }
 
-    const validator = validators[fieldValidator];
-
     const fieldSupport = {}
     Object.entries(schema || {}).forEach(([key, value]) => {
-      fieldSupport[key] = validator(value)
+      fieldSupport[key] = validate(value)
     })
 
     return fieldSupport
@@ -58,7 +43,7 @@
   $: datasource = getDatasourceForProvider($selectedScreen, componentInstance)
   $: schema = getSchemaForDatasource($selectedScreen, datasource).schema
   $: options = Object.keys(schema || {})
-  $: fieldSupport = getFieldSupport(schema, fieldValidator);
+  $: fieldSupport = getFieldSupport(schema, columnContext);
   $: boundValue = getValidOptions(value, options)
 
 
@@ -85,9 +70,9 @@
     const { type, subtype } = option
 
     const result =
-      typeof TypeIconMap[type] === "object" && subtype
-        ? TypeIconMap[type][subtype]
-        : TypeIconMap[type]
+      typeof Constants.TypeIconMap[type] === "object" && subtype
+        ? Constants.TypeIconMap[type][subtype]
+        : Constants.TypeIconMap[type]
 
     return result || "Text"
   }
@@ -139,7 +124,6 @@
 
 <Multiselect
   iconPosition="right"
-  {isOptionEnabled}
   {placeholder}
   value={boundValue}
   on:change={setValue}
@@ -148,29 +132,29 @@
   {onOptionMouseenter}
   {onOptionMouseleave}
 />
-<ContextTooltip
-  visible={contextTooltipVisible}
-  anchor={contextTooltipAnchor}
-  offset={20}
->
-  <ChartFieldContext
-    explanationModal
-    tableHref={`/builder/app/${$params.application}/data/table/${datasource?.tableId}`}
-    schema={schema[currentOption]}
-    support={fieldSupport[currentOption]}
-    columnIcon={getOptionIcon(currentOption)}
-    columnName={currentOption}
-    columnType={getOptionIconTooltip(currentOption)}
-  />
-  <ChartFieldContext
-    slot="previous"
-    schema={schema[previousOption]}
-    support={fieldSupport[previousOption]}
-    columnIcon={getOptionIcon(previousOption)}
-    columnName={previousOption}
-    columnType={getOptionIconTooltip(previousOption)}
-  />
-</ContextTooltip>
 
-<style>
-</style>
+{#if columnContext}
+  <ContextTooltip
+    visible={contextTooltipVisible}
+    anchor={contextTooltipAnchor}
+    offset={20}
+  >
+    <FieldContext
+      explanationModal
+      tableHref={`/builder/app/${$params.application}/data/table/${datasource?.tableId}`}
+      schema={schema[currentOption]}
+      support={fieldSupport[currentOption]}
+      columnIcon={getOptionIcon(currentOption)}
+      columnName={currentOption}
+      columnType={getOptionIconTooltip(currentOption)}
+    />
+    <FieldContext
+      slot="previous"
+      schema={schema[previousOption]}
+      support={fieldSupport[previousOption]}
+      columnIcon={getOptionIcon(previousOption)}
+      columnName={previousOption}
+      columnType={getOptionIconTooltip(previousOption)}
+    />
+  </ContextTooltip>
+{/if}
diff --git a/packages/builder/src/components/design/settings/fieldValidator.js b/packages/builder/src/components/design/settings/fieldValidator.js
deleted file mode 100644
index 3c30d5bd33..0000000000
--- a/packages/builder/src/components/design/settings/fieldValidator.js
+++ /dev/null
@@ -1,82 +0,0 @@
-import { capitalize } from 'lodash';
-
-export const errors = {
-  general: Symbol("values-validator-general"),
-  jsonPrimitivesOnly: Symbol("values-validator-json-primitives-only"),
-}
-
-export const warnings = {
-  stringAsNumber: Symbol("values-validator-string-as-number"),
-  chartDatetime: Symbol("values-validator-chart-datetime"),
-  notRequired: Symbol("values-validator-not-required"),
-}
-
-export const constants = {
-  unsupported: Symbol("values-validator-unsupported"),
-  partialSupport: Symbol("values-validator-partialSupport"),
-  supported: Symbol("values-validator-supported")
-}
-
-export const validators = {
-  chart: (fieldSchema) => {
-    try {
-      const response = {
-        level: null,
-        warnings: [],
-        errors: [],
-        text: "",
-        icon: "",
-        iconColor: ""
-      }
-      const generalUnsupportedFields = ["array", "attachment", "barcodeqr", "link", "bb_reference"]
-      if (generalUnsupportedFields.includes(fieldSchema.type)) {
-        response.errors.push(errors.general)
-      }
-
-      if (fieldSchema.type === "json") {
-          response.errors.push(errors.jsonPrimitivesOnly)
-      }
-
-      if (fieldSchema.type === "string") {
-        response.warnings.push(warnings.stringAsNumber)
-      }
-      if (fieldSchema.type === "datetime") {
-        response.warnings.push(warnings.chartDatetime);
-          //"This column can be used as an input for a chart, but it may be parsed differently depending on which is used.
-      }
-
-      const isRequired = fieldSchema?.constraints?.presence?.allowEmpty === false
-      if (!isRequired) {
-        response.warnings.push(warnings.notRequired);
-      }
-
-      if (response.errors.length > 0) {
-        response.level = constants.unsupported
-        response.text = "Not compatible"
-        response.icon = "Alert"
-        response.iconColor = "var(--red)"
-      } else if (response.warnings.length > 0) {
-        response.level = constants.partialSupport
-        response.text = "Partially compatible"
-        response.icon = "AlertCheck"
-        response.iconColor = "var(--yellow)"
-      } else {
-        response.level = constants.supported
-        response.text = "Compatible"
-        response.icon = "CheckmarkCircle"
-        response.iconColor = "var(--green)"
-      }
-
-      return response
-    } catch (e) {
-      return {
-        level: constants.partialSupport,
-        warnings: [],
-        errors: [],
-        text: "Partially compatible",
-        icon: "AlertCheck",
-        iconColor: "var(--yellow)"
-      }
-    }
-  }
-};
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte
index e64d161a72..474132d40d 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte
@@ -193,7 +193,8 @@
                 max: setting.max ?? null,
 
                 // Field select settings
-                fieldValidator: setting.fieldValidator,
+                columnContext: setting.columnContext,
+                valueTypes: setting.valueTypes
               }}
               {bindings}
               {componentBindings}
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index faec6e374f..a7a27db577 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -1602,6 +1602,7 @@
     ]
   },
   "bar": {
+    "documentationLink": "https://docs.budibase.com/docs/bar-chart",
     "name": "Bar Chart",
     "description": "Bar chart",
     "icon": "GraphBarVertical",
@@ -1633,7 +1634,8 @@
         "label": "Data columns",
         "key": "valueColumns",
         "dependsOn": "dataProvider",
-        "fieldValidator": "chart",
+        "valueTypes": ["number"],
+        "columnContext": true,
         "required": true
       },
       {

From 293a969f5fc59ad96ef05d20d012948f0aa8a0f6 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Thu, 11 Apr 2024 10:56:08 +0100
Subject: [PATCH 052/123] wip

---
 .../controls/FieldContext/FieldContext.svelte | 28 +++----
 .../controls/FieldContext/columnInfo.js       | 77 ++++++++++++++++++
 .../settings/controls/FieldContext/index.js   |  2 +-
 .../FieldContext/lines/Support.svelte         | 41 +++++++++-
 .../controls/FieldContext/validator.js        | 80 -------------------
 .../settings/controls/FieldSelect.svelte      | 14 ++--
 .../settings/controls/MultiFieldSelect.svelte | 18 +++--
 .../Component/ComponentSettingsSection.svelte |  2 +-
 packages/client/manifest.json                 | 14 +++-
 9 files changed, 160 insertions(+), 116 deletions(-)
 create mode 100644 packages/builder/src/components/design/settings/controls/FieldContext/columnInfo.js
 delete mode 100644 packages/builder/src/components/design/settings/controls/FieldContext/validator.js

diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/FieldContext.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/FieldContext.svelte
index 82e755036e..50fbc5273c 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/FieldContext.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/FieldContext.svelte
@@ -1,6 +1,6 @@
 <script>
   import ExplanationModal from './ExplanationModal/index.svelte'
-  import { warnings, errors } from "./validator";
+  import { messages } from "./columnInfo";
   import { Column, Support, NotRequired, StringNumber } from "./lines"
   import subjects from './subjects';
 
@@ -30,23 +30,23 @@
   class="tooltipContents"
 >
 
-<Column
-  {columnName}
-  {columnIcon}
-  {columnType}
-  {tableHref}
-  {setExplanationSubject}
-/>
-<Support
-  {support}
-  {setExplanationSubject}
-/>
-  {#if support?.warnings?.includes(warnings.stringAsNumber)}
+  <Column
+    {columnName}
+    {columnIcon}
+    {columnType}
+    {tableHref}
+    {setExplanationSubject}
+  />
+  <Support
+    support={support.support}
+    {setExplanationSubject}
+  />
+  {#if support?.messages?.includes(messages.stringAsNumber)}
     <StringNumber
       {setExplanationSubject}
     />
   {/if}
-  {#if support?.warnings?.includes(warnings.notRequired)}
+  {#if support?.messages?.includes(messages.notRequired)}
     <NotRequired
       {setExplanationSubject}
     />
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/columnInfo.js b/packages/builder/src/components/design/settings/controls/FieldContext/columnInfo.js
new file mode 100644
index 0000000000..0faea209f0
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/columnInfo.js
@@ -0,0 +1,77 @@
+import { capitalize } from 'lodash';
+
+export const messages = {
+  jsonPrimitivesOnly: Symbol("column-info-json-primitives-only"),
+  stringAsNumber: Symbol("column-info-string-as-number"),
+  chartDatetime: Symbol("column-info-chart-datetime"),
+  notRequired: Symbol("column-info-not-required"),
+  contextError: Symbol("column-info-context-error"),
+}
+
+export const support = {
+  unsupported: Symbol("column-info-unsupported"),
+  partialSupport: Symbol("column-info-partialSupport"),
+  supported: Symbol("column-info-supported")
+}
+
+
+const getSupport = (type, columnInfo) => {
+  if (!columnInfo?.typeSupport) {
+    return support.supported
+  }
+
+  if (columnInfo?.typeSupport?.supported?.find(mapping => mapping === type || mapping?.type === type)) {
+    return support.supported;
+  }
+
+  if (columnInfo?.typeSupport?.partialSupport?.find(mapping => mapping === type || mapping?.type === type)) {
+    return support.partialSupport;
+  }
+
+  return support.unsupported
+}
+
+const getSupportMessage = (type, columnInfo) => {
+  if (!columnInfo?.typeSupport) {
+    return null
+  }
+
+  const supported = columnInfo?.typeSupport?.supported?.find(mapping => mapping?.type === type)
+  if (supported) {
+    return messages[supported?.message]
+  }
+
+  const partialSupport = columnInfo?.typeSupport?.partialSupport?.find(mapping => mapping?.type === type)
+  if (partialSupport) {
+    return messages[partialSupport?.message]
+  }
+
+  const unsupported = columnInfo?.typeSupport?.unsupported?.find(mapping => mapping?.type === type)
+  if (unsupported) {
+    return messages[unsupported?.message]
+  }
+
+  return null
+}
+
+export const getColumnInfoMessagesAndSupport = (fieldSchema, columnInfo) => {
+
+  try {
+    const columnInfoMessagesAndSupport = {
+      support: getSupport(fieldSchema.type, columnInfo),
+      messages: [getSupportMessage(fieldSchema.type, columnInfo)],
+    }
+
+    const isRequired = fieldSchema?.constraints?.presence?.allowEmpty === false
+    if (!isRequired) {
+      columnInfoMessagesAndSupport.messages.push(messages.notRequired);
+    }
+
+    return columnInfoMessagesAndSupport;
+  } catch (e) {
+    return {
+      support: support.partialSupport,
+      messages: [messages.contextError]
+    }
+  }
+}
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/index.js b/packages/builder/src/components/design/settings/controls/FieldContext/index.js
index ba7f152627..110c8eea85 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/index.js
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/index.js
@@ -1,2 +1,2 @@
 export { default as FieldContext } from "./FieldContext.svelte"
-export * from "./validator"
+export * from "./columnInfo"
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/lines/Support.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/lines/Support.svelte
index 4fbfe87c76..cfb4831ccb 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/lines/Support.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/lines/Support.svelte
@@ -1,18 +1,53 @@
 <script>
   import { Line, InfoWord, DocumentationLink, Space, Text, Period } from "../typography"
   import subjects from '../subjects'
+  import * as columnInfo from '../columnInfo'
 
   export let setExplanationSubject
   export let support
+
+  const getIcon = (support) => {
+    if (support === columnInfo.support.unsupported) {
+      return "Alert"
+    } else if (support === columnInfo.support.supported) {
+      return "CheckmarkCircle"
+    }
+
+    return "AlertCheck"
+  }
+
+  const getColor = (support) => {
+    if (support === columnInfo.support.unsupported) {
+      return "var(--red)"
+    } else if (support === columnInfo.support.supported) {
+      return "var(--green)"
+    }
+
+    return "var(--yellow)"
+  }
+
+  const getText = (support) => {
+    if (support === columnInfo.support.unsupported) {
+      return "Not compatible"
+    } else if (support === columnInfo.support.supported) {
+      return "Compatible"
+    }
+
+    return "Partially compatible"
+  }
+
+  $: icon = getIcon(support);
+  $: color = getColor(support);
+  $: text = getText(support);
 </script>
 
 <Line>
   <InfoWord
     on:mouseenter={() => setExplanationSubject(subjects.support)}
     on:mouseleave={() => setExplanationSubject(subjects.none)}
-    icon={support.icon}
-    color={support.iconColor}
-    text={support.text}
+    {icon}
+    {color}
+    {text}
   />
   <Space />
   <Text>with</Text>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/validator.js b/packages/builder/src/components/design/settings/controls/FieldContext/validator.js
deleted file mode 100644
index cb4e309148..0000000000
--- a/packages/builder/src/components/design/settings/controls/FieldContext/validator.js
+++ /dev/null
@@ -1,80 +0,0 @@
-import { capitalize } from 'lodash';
-
-export const errors = {
-  general: Symbol("values-validator-general"),
-  jsonPrimitivesOnly: Symbol("values-validator-json-primitives-only"),
-}
-
-export const warnings = {
-  stringAsNumber: Symbol("values-validator-string-as-number"),
-  chartDatetime: Symbol("values-validator-chart-datetime"),
-  notRequired: Symbol("values-validator-not-required"),
-}
-
-export const constants = {
-  unsupported: Symbol("values-validator-unsupported"),
-  partialSupport: Symbol("values-validator-partialSupport"),
-  supported: Symbol("values-validator-supported")
-}
-
-export const validate = (fieldSchema) => {
-  try {
-    const response = {
-      level: null,
-      warnings: [],
-      errors: [],
-      text: "",
-      icon: "",
-      iconColor: ""
-    }
-    const generalUnsupportedFields = ["array", "attachment", "barcodeqr", "link", "bb_reference"]
-    if (generalUnsupportedFields.includes(fieldSchema.type)) {
-      response.errors.push(errors.general)
-    }
-
-    if (fieldSchema.type === "json") {
-        response.errors.push(errors.jsonPrimitivesOnly)
-    }
-
-    if (fieldSchema.type === "string") {
-      response.warnings.push(warnings.stringAsNumber)
-    }
-    if (fieldSchema.type === "datetime") {
-      response.warnings.push(warnings.chartDatetime);
-        //"This column can be used as an input for a chart, but it may be parsed differently depending on which is used.
-    }
-
-    const isRequired = fieldSchema?.constraints?.presence?.allowEmpty === false
-    if (!isRequired) {
-      response.warnings.push(warnings.notRequired);
-    }
-
-    if (response.errors.length > 0) {
-      response.level = constants.unsupported
-      response.text = "Not compatible"
-      response.icon = "Alert"
-      response.iconColor = "var(--red)"
-    } else if (response.warnings.length > 0) {
-      response.level = constants.partialSupport
-      response.text = "Partially compatible"
-      response.icon = "AlertCheck"
-      response.iconColor = "var(--yellow)"
-    } else {
-      response.level = constants.supported
-      response.text = "Compatible"
-      response.icon = "CheckmarkCircle"
-      response.iconColor = "var(--green)"
-    }
-
-    return response
-  } catch (e) {
-    return {
-      level: constants.partialSupport,
-      warnings: [],
-      errors: [],
-      text: "Partially compatible",
-      icon: "AlertCheck",
-      iconColor: "var(--yellow)"
-    }
-  }
-}
diff --git a/packages/builder/src/components/design/settings/controls/FieldSelect.svelte b/packages/builder/src/components/design/settings/controls/FieldSelect.svelte
index ecb506f656..e28718d86e 100644
--- a/packages/builder/src/components/design/settings/controls/FieldSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldSelect.svelte
@@ -3,7 +3,7 @@
   import { getDatasourceForProvider, getSchemaForDatasource } from "dataBinding"
   import { selectedScreen } from "stores/builder"
   import { createEventDispatcher } from "svelte"
-  import { FieldContext, validate } from './FieldContext'
+  import { FieldContext, getColumnInfoMessagesAndSupport } from './FieldContext'
   import { debounce } from "lodash"
   import { goto, params } from "@roxi/routify"
   import { Constants } from "@budibase/frontend-core"
@@ -12,21 +12,21 @@
   export let componentInstance = {}
   export let value = ""
   export let placeholder
-  export let columnContext
+  export let columnInfo
 
   let contextTooltipAnchor = null
   let currentOption = null
   let previousOption = null
   let contextTooltipVisible = false
 
-  const getFieldSupport = (schema, columnContext) => {
-    if (!columnContext) {
+  const getFieldSupport = (schema, columnInfo) => {
+    if (columnInfo == null) {
       return {}
     }
 
     const fieldSupport = {}
     Object.entries(schema || {}).forEach(([key, value]) => {
-      fieldSupport[key] = validate(value)
+      fieldSupport[key] = getColumnInfoMessagesAndSupport(value)
     })
 
     return fieldSupport
@@ -35,7 +35,7 @@
   const dispatch = createEventDispatcher()
   $: datasource = getDatasourceForProvider($selectedScreen, componentInstance)
   $: schema = getSchemaForDatasource($selectedScreen, datasource).schema
-  $: fieldSupport = getFieldSupport(schema, columnContext);
+  $: fieldSupport = getFieldSupport(schema, columnInfo);
   $: options = Object.keys(schema || {})
   $: boundValue = getValidValue(value, options)
 
@@ -117,7 +117,7 @@
   {onOptionMouseleave}
 />
 
-{#if columnContext}
+{#if columnInfo}
   <ContextTooltip
     visible={contextTooltipVisible}
     anchor={contextTooltipAnchor}
diff --git a/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte b/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
index 4ff293e415..647df2f04c 100644
--- a/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
@@ -5,7 +5,7 @@
     componentStore,
   } from "stores/builder"
   import { createEventDispatcher } from "svelte"
-  import { FieldContext, validate } from './FieldContext'
+  import { FieldContext, getColumnInfoMessagesAndSupport } from './FieldContext'
   import { FIELDS } from 'constants/backend'
   import { goto, params } from "@roxi/routify"
   import { debounce } from "lodash"
@@ -14,8 +14,7 @@
   export let componentInstance = {}
   export let value = ""
   export let placeholder
-  export let columnContext
-  export let valueTypes
+  export let columnInfo
 
   let contextTooltipAnchor = null
   let currentOption = null
@@ -26,14 +25,15 @@
     componentInstance?._component
   )
 
-  const getFieldSupport = (schema, columnContext) => {
-    if (!columnContext) {
+  const getFieldSupport = (schema, columnInfo) => {
+    if (columnInfo == null) {
       return {}
     }
 
     const fieldSupport = {}
     Object.entries(schema || {}).forEach(([key, value]) => {
-      fieldSupport[key] = validate(value)
+      // super TODO: nicer to do this at the component level jit and store each value seperately so i don't have this long ass name???
+      fieldSupport[key] = getColumnInfoMessagesAndSupport(value, columnInfo)
     })
 
     return fieldSupport
@@ -43,9 +43,11 @@
   $: datasource = getDatasourceForProvider($selectedScreen, componentInstance)
   $: schema = getSchemaForDatasource($selectedScreen, datasource).schema
   $: options = Object.keys(schema || {})
-  $: fieldSupport = getFieldSupport(schema, columnContext);
+  $: fieldSupport = getFieldSupport(schema, columnInfo);
   $: boundValue = getValidOptions(value, options)
 
+  $: console.log(fieldSupport)
+
 
   const getValidOptions = (selectedOptions, allOptions) => {
     // Fix the hardcoded default string value
@@ -133,7 +135,7 @@
   {onOptionMouseleave}
 />
 
-{#if columnContext}
+{#if columnInfo}
   <ContextTooltip
     visible={contextTooltipVisible}
     anchor={contextTooltipAnchor}
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte
index 474132d40d..c861249e17 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte
@@ -193,7 +193,7 @@
                 max: setting.max ?? null,
 
                 // Field select settings
-                columnContext: setting.columnContext,
+                columnInfo: setting.columnInfo,
                 valueTypes: setting.valueTypes
               }}
               {bindings}
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index a7a27db577..1975feab58 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -1634,8 +1634,18 @@
         "label": "Data columns",
         "key": "valueColumns",
         "dependsOn": "dataProvider",
-        "valueTypes": ["number"],
-        "columnContext": true,
+        "columnInfo": {
+          "typeSupport": {
+            "supported": ["number", "boolean"],
+            "partialSupport": [
+              { "type": "string", "message": "stringAsNumber" },
+              { "type": "datetime", "message": "datetimeChart"}
+            ],
+            "unsupported": [
+              { "type": "json", "message": "jsonPrimitivesOnly" }
+            ]
+          }
+        },
         "required": true
       },
       {

From 2af464791c57cd00af8a4c10ff606754a4a3ee46 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Thu, 11 Apr 2024 11:42:31 +0100
Subject: [PATCH 053/123] wip

---
 .../controls/FieldContext/FieldContext.svelte | 20 +++++++----
 .../settings/controls/FieldContext/index.js   |  1 -
 .../settings/controls/FieldSelect.svelte      | 20 ++---------
 .../settings/controls/MultiFieldSelect.svelte | 35 ++-----------------
 4 files changed, 20 insertions(+), 56 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/FieldContext.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/FieldContext.svelte
index 50fbc5273c..667774d7c8 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/FieldContext.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/FieldContext.svelte
@@ -1,11 +1,10 @@
 <script>
   import ExplanationModal from './ExplanationModal/index.svelte'
-  import { messages } from "./columnInfo";
+  import { messages as messageConstants, getColumnInfoMessagesAndSupport } from "./columnInfo";
   import { Column, Support, NotRequired, StringNumber } from "./lines"
   import subjects from './subjects';
 
-  export let support = {}
-
+  export let columnInfo
   export let columnIcon
   export let columnType
   export let columnName
@@ -15,6 +14,15 @@
 
   export let schema
 
+  let support
+  let messages = []
+
+  $: {
+    const columnInfoMessagesAndSupport = getColumnInfoMessagesAndSupport(schema, columnInfo)
+    support = columnInfoMessagesAndSupport.support
+    messages = columnInfoMessagesAndSupport.messages
+  }
+
   let root = null;
 
   let explanationModalSubject = subjects.none
@@ -38,15 +46,15 @@
     {setExplanationSubject}
   />
   <Support
-    support={support.support}
+    {support}
     {setExplanationSubject}
   />
-  {#if support?.messages?.includes(messages.stringAsNumber)}
+  {#if messages.includes(messageConstants.stringAsNumber)}
     <StringNumber
       {setExplanationSubject}
     />
   {/if}
-  {#if support?.messages?.includes(messages.notRequired)}
+  {#if messages.includes(messageConstants.notRequired)}
     <NotRequired
       {setExplanationSubject}
     />
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/index.js b/packages/builder/src/components/design/settings/controls/FieldContext/index.js
index 110c8eea85..a89adba95e 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/index.js
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/index.js
@@ -1,2 +1 @@
 export { default as FieldContext } from "./FieldContext.svelte"
-export * from "./columnInfo"
diff --git a/packages/builder/src/components/design/settings/controls/FieldSelect.svelte b/packages/builder/src/components/design/settings/controls/FieldSelect.svelte
index e28718d86e..7dd346d701 100644
--- a/packages/builder/src/components/design/settings/controls/FieldSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldSelect.svelte
@@ -3,7 +3,7 @@
   import { getDatasourceForProvider, getSchemaForDatasource } from "dataBinding"
   import { selectedScreen } from "stores/builder"
   import { createEventDispatcher } from "svelte"
-  import { FieldContext, getColumnInfoMessagesAndSupport } from './FieldContext'
+  import { FieldContext } from './FieldContext'
   import { debounce } from "lodash"
   import { goto, params } from "@roxi/routify"
   import { Constants } from "@budibase/frontend-core"
@@ -19,23 +19,9 @@
   let previousOption = null
   let contextTooltipVisible = false
 
-  const getFieldSupport = (schema, columnInfo) => {
-    if (columnInfo == null) {
-      return {}
-    }
-
-    const fieldSupport = {}
-    Object.entries(schema || {}).forEach(([key, value]) => {
-      fieldSupport[key] = getColumnInfoMessagesAndSupport(value)
-    })
-
-    return fieldSupport
-  }
-
   const dispatch = createEventDispatcher()
   $: datasource = getDatasourceForProvider($selectedScreen, componentInstance)
   $: schema = getSchemaForDatasource($selectedScreen, datasource).schema
-  $: fieldSupport = getFieldSupport(schema, columnInfo);
   $: options = Object.keys(schema || {})
   $: boundValue = getValidValue(value, options)
 
@@ -127,18 +113,18 @@
       explanationModal
       tableHref={`/builder/app/${$params.application}/data/table/${datasource?.tableId}`}
       schema={schema[currentOption]}
-      support={fieldSupport[currentOption]}
       columnIcon={getOptionIcon(currentOption)}
       columnName={currentOption}
       columnType={getOptionIconTooltip(currentOption)}
+      {columnInfo}
     />
     <FieldContext
       slot="previous"
       schema={schema[previousOption]}
-      support={fieldSupport[previousOption]}
       columnIcon={getOptionIcon(previousOption)}
       columnName={previousOption}
       columnType={getOptionIconTooltip(previousOption)}
+      {columnInfo}
     />
   </ContextTooltip>
 {/if}
diff --git a/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte b/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
index 647df2f04c..9f0f9a4561 100644
--- a/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
@@ -5,7 +5,7 @@
     componentStore,
   } from "stores/builder"
   import { createEventDispatcher } from "svelte"
-  import { FieldContext, getColumnInfoMessagesAndSupport } from './FieldContext'
+  import { FieldContext } from './FieldContext'
   import { FIELDS } from 'constants/backend'
   import { goto, params } from "@roxi/routify"
   import { debounce } from "lodash"
@@ -25,29 +25,12 @@
     componentInstance?._component
   )
 
-  const getFieldSupport = (schema, columnInfo) => {
-    if (columnInfo == null) {
-      return {}
-    }
-
-    const fieldSupport = {}
-    Object.entries(schema || {}).forEach(([key, value]) => {
-      // super TODO: nicer to do this at the component level jit and store each value seperately so i don't have this long ass name???
-      fieldSupport[key] = getColumnInfoMessagesAndSupport(value, columnInfo)
-    })
-
-    return fieldSupport
-  }
-
   const dispatch = createEventDispatcher()
   $: datasource = getDatasourceForProvider($selectedScreen, componentInstance)
   $: schema = getSchemaForDatasource($selectedScreen, datasource).schema
   $: options = Object.keys(schema || {})
-  $: fieldSupport = getFieldSupport(schema, columnInfo);
   $: boundValue = getValidOptions(value, options)
 
-  $: console.log(fieldSupport)
-
 
   const getValidOptions = (selectedOptions, allOptions) => {
     // Fix the hardcoded default string value
@@ -92,18 +75,6 @@
     return ""
   }
 
-  const isOptionEnabled = optionKey => {
-    return true;
-    // Remain enabled if already selected, so it can be deselected
-    if (value?.includes(optionKey)) return true
-    const support = fieldSupport[optionKey]?.support;
-
-    if (support == null) return true
-    if (support === unsupported) return false
-
-    return true
-  }
-
   const updateTooltip = debounce((e, option) => {
     if (option == null) {
         contextTooltipVisible = false;
@@ -145,18 +116,18 @@
       explanationModal
       tableHref={`/builder/app/${$params.application}/data/table/${datasource?.tableId}`}
       schema={schema[currentOption]}
-      support={fieldSupport[currentOption]}
       columnIcon={getOptionIcon(currentOption)}
       columnName={currentOption}
       columnType={getOptionIconTooltip(currentOption)}
+      {columnInfo}
     />
     <FieldContext
       slot="previous"
       schema={schema[previousOption]}
-      support={fieldSupport[previousOption]}
       columnIcon={getOptionIcon(previousOption)}
       columnName={previousOption}
       columnType={getOptionIconTooltip(previousOption)}
+      {columnInfo}
     />
   </ContextTooltip>
 {/if}

From 29253124384f3c4aaefaa784aa4a076bf2e0fce3 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Thu, 11 Apr 2024 14:40:12 +0100
Subject: [PATCH 054/123] wip

---
 .../controls/FieldContext/FieldContext.svelte |  7 ++++-
 .../lines/JSONPrimitivesOnly.svelte           | 16 +++++++++++
 .../controls/FieldContext/lines/index.js      |  1 +
 .../FieldContext/typography/Comma.svelte      |  3 +-
 .../typography/DocumentationLink.svelte       |  1 +
 .../FieldContext/typography/Line.svelte       | 28 +++++++++++++++----
 .../FieldContext/typography/Period.svelte     |  3 +-
 .../FieldContext/typography/Space.svelte      |  1 +
 .../FieldContext/typography/Text.svelte       |  1 +
 9 files changed, 52 insertions(+), 9 deletions(-)
 create mode 100644 packages/builder/src/components/design/settings/controls/FieldContext/lines/JSONPrimitivesOnly.svelte

diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/FieldContext.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/FieldContext.svelte
index 667774d7c8..95b7c537ae 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/FieldContext.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/FieldContext.svelte
@@ -1,7 +1,7 @@
 <script>
   import ExplanationModal from './ExplanationModal/index.svelte'
   import { messages as messageConstants, getColumnInfoMessagesAndSupport } from "./columnInfo";
-  import { Column, Support, NotRequired, StringNumber } from "./lines"
+  import { Column, Support, NotRequired, StringNumber, JSONPrimitivesOnly } from "./lines"
   import subjects from './subjects';
 
   export let columnInfo
@@ -59,6 +59,11 @@
       {setExplanationSubject}
     />
   {/if}
+  {#if messages.includes(messageConstants.jsonPrimitivesOnly)}
+    <JSONPrimitivesOnly
+      {setExplanationSubject}
+    />
+  {/if}
 </div>
 
 
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/lines/JSONPrimitivesOnly.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/lines/JSONPrimitivesOnly.svelte
new file mode 100644
index 0000000000..f2ad385d57
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/lines/JSONPrimitivesOnly.svelte
@@ -0,0 +1,16 @@
+<script>
+  import { Line, InfoWord, DocumentationLink, Space, Text, Period, Comma } from "../typography"
+  import subjects from '../subjects'
+
+  export let setExplanationSubject
+</script>
+
+
+<Line wrap>
+  <Text>
+    JSON Objects cannot be used, but scalar child values can be if their types are supported
+  </Text><Period />
+</Line>
+
+<style>
+</style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/lines/index.js b/packages/builder/src/components/design/settings/controls/FieldContext/lines/index.js
index bd010a820e..2b593faa83 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/lines/index.js
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/lines/index.js
@@ -2,3 +2,4 @@ export { default as Column } from "./Column.svelte"
 export { default as NotRequired } from "./NotRequired.svelte"
 export { default as StringNumber } from "./StringNumber.svelte"
 export { default as Support } from "./Support.svelte"
+export { default as JSONPrimitivesOnly } from "./JSONPrimitivesOnly.svelte"
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/typography/Comma.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Comma.svelte
index f160ea6e50..a1221d5321 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/typography/Comma.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Comma.svelte
@@ -2,10 +2,11 @@
 
 <style>
   .comma {
-    margin-left: 2px;
     color: var(--grey-6);
     font-size: 17px;
     display: inline block;
     margin-right: 5px;
+    line-height: 26px;
+    margin-left: 2px;
   }
 </style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/typography/DocumentationLink.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/typography/DocumentationLink.svelte
index 66f8ea5790..dbff157c50 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/typography/DocumentationLink.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/typography/DocumentationLink.svelte
@@ -41,6 +41,7 @@
     border-radius: 0;
     border-bottom: 1px solid var(--blue);
     transition: filter 300ms;
+    margin-right: 0px;
   }
 
   .link:hover {
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/typography/Line.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Line.svelte
index c15dd6c3ef..2dc61fa593 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/typography/Line.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Line.svelte
@@ -1,22 +1,38 @@
+<script>
+  export let wrap = false
+</script>
 <div class="line">
   <span class="bullet">•</span>
-  <slot />
+  <div class="content" class:wrap>
+    <slot />
+  </div>
 </div>
 
 <style>
+  .line {
+    background-color: var(--background-alt);
+    color: var(--ink);
+    align-items: flex-start;
+    display: flex;
+
+    margin-bottom: 10px;
+  }
+
   .bullet {
     color: var(--grey-6);
     font-size: 17px;
     display: inline block;
     margin-right: 10px;
+    line-height: 26px;
   }
 
-  .line {
-    background-color: var(--background-alt);
-    color: var(--ink);
-    align-items: center;
+  .content {
     display: flex;
+    min-width: 0;
+    align-items: center;
+  }
 
-    margin-bottom: 10px;
+  .wrap {
+    display: block;
   }
 </style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/typography/Period.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Period.svelte
index 6697e278a0..c5ab3b498b 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/typography/Period.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Period.svelte
@@ -5,6 +5,7 @@
     color: var(--grey-6);
     font-size: 20px;
     display: inline block;
-    margin-left: 3px;
+    line-height: 26px;
+    margin-left: 2px;
   }
 </style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/typography/Space.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Space.svelte
index ba72455d92..e6a1000762 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/typography/Space.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Space.svelte
@@ -3,5 +3,6 @@
 <style>
   .space {
     margin-right: 5px;
+    line-height: 26px;
   }
 </style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/typography/Text.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Text.svelte
index 1527651a9c..0b688e7e06 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/typography/Text.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Text.svelte
@@ -3,5 +3,6 @@
 <style>
   .text {
     flex-shrink: 0;
+    line-height: 26px;
   }
 </style>

From 4a80af1bc66778d18b098550f6ddb27704fd1595 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Fri, 12 Apr 2024 09:32:35 +0100
Subject: [PATCH 055/123] some line refactor

---
 packages/bbui/src/Tooltip/Context.svelte      |  2 -
 .../controls/FieldContext/lines/Column.svelte |  8 +--
 .../lines/JSONPrimitivesOnly.svelte           | 12 ++--
 .../FieldContext/lines/NotRequired.svelte     |  9 +--
 .../FieldContext/lines/StringNumber.svelte    | 17 ++---
 .../FieldContext/lines/Support.svelte         |  4 +-
 .../FieldContext/typography/Comma.svelte      |  3 +-
 .../FieldContext/typography/InfoWord.svelte   |  5 +-
 .../FieldContext/typography/Line.svelte       | 12 ++--
 .../FieldContext/typography/Period.svelte     |  1 +
 .../FieldContext/typography/Space.svelte      |  6 +-
 .../FieldContext/typography/Text.svelte       | 70 ++++++++++++++++++-
 12 files changed, 108 insertions(+), 41 deletions(-)

diff --git a/packages/bbui/src/Tooltip/Context.svelte b/packages/bbui/src/Tooltip/Context.svelte
index 10f050c7b6..d5afad9fa2 100644
--- a/packages/bbui/src/Tooltip/Context.svelte
+++ b/packages/bbui/src/Tooltip/Context.svelte
@@ -157,8 +157,6 @@
 
     border-radius: 5px;
     box-sizing: border-box;
-    opacity: 0;
-    overflow: hidden;
     border: 1px solid var(--grey-4);
 
     transition: width 300ms ease-in, height 300ms ease-in, top 300ms ease-in, left 300ms ease-in;
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/lines/Column.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/lines/Column.svelte
index e1952fd67d..d28748d8e0 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/lines/Column.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/lines/Column.svelte
@@ -35,16 +35,16 @@
   }
 </script>
 
-<Line>
+<Line noWrap>
   <InfoWord
     on:mouseenter={() => setExplanationSubject(subjects.column)}
     on:mouseleave={() => setExplanationSubject(subjects.none)}
     href={tableHref}
     text={columnName}
   />
-  <Space />
-  <Text>is a</Text>
-  <Space />
+  <Text
+    value=" is a "
+  />
   <DocumentationLink
     href={getDocLink(columnType)}
     icon={columnIcon}
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/lines/JSONPrimitivesOnly.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/lines/JSONPrimitivesOnly.svelte
index f2ad385d57..f4726d754b 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/lines/JSONPrimitivesOnly.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/lines/JSONPrimitivesOnly.svelte
@@ -6,10 +6,14 @@
 </script>
 
 
-<Line wrap>
-  <Text>
-    JSON Objects cannot be used, but scalar child values can be if their types are supported
-  </Text><Period />
+<Line>
+  <Text
+    value="JSON Objects cannot be used, but scalar"
+  />
+  <Text
+    value=" child values can be if their individual types are supported"
+  />
+  <Period />
 </Line>
 
 <style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/lines/NotRequired.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/lines/NotRequired.svelte
index 4c90e73916..30dc48fabd 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/lines/NotRequired.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/lines/NotRequired.svelte
@@ -7,8 +7,7 @@
 
 
 <Line>
-  <Text>No</Text>
-  <Space />
+  <Text value="No " />
   <InfoWord
   on:mouseenter={() => setExplanationSubject(subjects.notRequired)}
   on:mouseleave={() => setExplanationSubject(subjects.none)}
@@ -20,11 +19,7 @@
     href="https://docs.budibase.com/docs/budibasedb#constraints"
     text="Constraint"
   />
-  <Comma />
-  <Text>
-    so values may be missing
-  </Text>
-  <Period />
+  <Text value=", so values may be missing." />
 </Line>
 
 <style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/lines/StringNumber.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/lines/StringNumber.svelte
index b3499a9733..da9e2ea28e 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/lines/StringNumber.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/lines/StringNumber.svelte
@@ -6,14 +6,11 @@
 </script>
 
 <Line>
-  <Text>Any</Text>
-  <Space />
-<InfoWord
-    on:mouseenter={() => setExplanationSubject(subjects.stringsAsNumbers)}
-    on:mouseleave={() => setExplanationSubject(subjects.none)}
-  text="non-number values"
-/>
-  <Space />
-  <Text>will be ignored</Text>
-  <Period />
+  <Text value="Any " />
+  <InfoWord
+      on:mouseenter={() => setExplanationSubject(subjects.stringsAsNumbers)}
+      on:mouseleave={() => setExplanationSubject(subjects.none)}
+    text="non-number values"
+  />
+  <Text value=" will be ignored." />
 </Line>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/lines/Support.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/lines/Support.svelte
index cfb4831ccb..89d6015560 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/lines/Support.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/lines/Support.svelte
@@ -49,9 +49,7 @@
     {color}
     {text}
   />
-  <Space />
-  <Text>with</Text>
-  <Space />
+  <Text value=" with " />
   <DocumentationLink
     href="https://docs.budibase.com/docs/chart"
     icon="GraphPie"
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/typography/Comma.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Comma.svelte
index a1221d5321..03a7f0d51e 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/typography/Comma.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Comma.svelte
@@ -5,8 +5,9 @@
     color: var(--grey-6);
     font-size: 17px;
     display: inline block;
-    margin-right: 5px;
     line-height: 26px;
     margin-left: 2px;
+    margin-right: 2px;
+    flex-shrink: 0;
   }
 </style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/typography/InfoWord.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/typography/InfoWord.svelte
index 11538c3906..7ace69daf3 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/typography/InfoWord.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/typography/InfoWord.svelte
@@ -51,16 +51,17 @@
 
 <style>
   .infoWord {
+    vertical-align: bottom;
     display: inline-flex;
     box-sizing: border-box;
     padding: 3px 6px;
     border-radius: 5px;
-    vertical-align: sub;
     filter: brightness(100%);
     background-color: var(--grey-3);
     border: 1px solid var(--grey-3);
     overflow: hidden;
-    transition: filter 300ms
+    transition: filter 300ms;
+    align-items: center;
   }
 
   .infoWord:hover {
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/typography/Line.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Line.svelte
index 2dc61fa593..7b0c71a604 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/typography/Line.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Line.svelte
@@ -1,9 +1,9 @@
 <script>
-  export let wrap = false
+  export let noWrap = false
 </script>
 <div class="line">
   <span class="bullet">•</span>
-  <div class="content" class:wrap>
+  <div class="content" class:noWrap>
     <slot />
   </div>
 </div>
@@ -27,12 +27,14 @@
   }
 
   .content {
-    display: flex;
     min-width: 0;
     align-items: center;
+    display: flex;
+    flex-wrap: wrap;
   }
 
-  .wrap {
-    display: block;
+  .noWrap {
+    display: flex;
+    flex-wrap: nowrap;
   }
 </style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/typography/Period.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Period.svelte
index c5ab3b498b..8faf71d3ba 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/typography/Period.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Period.svelte
@@ -7,5 +7,6 @@
     display: inline block;
     line-height: 26px;
     margin-left: 2px;
+    flex-shrink: 0;
   }
 </style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/typography/Space.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Space.svelte
index e6a1000762..1003a8c577 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/typography/Space.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Space.svelte
@@ -1,8 +1,10 @@
-<span class="space" />
+<span class="space">{" "}</span>
 
 <style>
   .space {
-    margin-right: 5px;
+    white-space: pre;
     line-height: 26px;
+    width: 5px;
+    flex-shrink: 0;
   }
 </style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/typography/Text.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Text.svelte
index 0b688e7e06..a9b137e025 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/typography/Text.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Text.svelte
@@ -1,8 +1,76 @@
-<span class="text"><slot /></span>
+<script>
+  import Comma from "./Comma.svelte";
+  import Period from "./Period.svelte";
+  import Space from "./Space.svelte";
+
+  export let value = null
+
+  const punctuation = [" ", ",", "."]
+
+  const getWords = (value) => {
+    if (typeof value !== "string") {
+      return [];
+    }
+
+    const newWords = [];
+    let lastIndex = 0;
+
+    const makeWord = (i) => {
+      // No word to make, multiple spaces, spaces at start of text etc
+      if (i - lastIndex > 0) {
+        newWords.push(value.substring(lastIndex, i));
+      }
+
+      lastIndex = i + 1;
+    }
+
+    value.split("").forEach((character, i) => {
+      if (punctuation.includes(character)) {
+        makeWord(i);
+        newWords.push(character);
+      }
+    })
+
+    makeWord(value.length);
+
+    return newWords;
+  }
+
+  $: words = getWords(value)
+  $: console.log(words);
+</script>
+
+{#if words.length}
+  {#each words as word}
+    {#if word === " "}
+      <Space />
+    {:else if word === ","}
+      <Comma />
+    {:else if word === "."}
+      <Period />
+    {:else}
+      <span class="text">
+        {word}
+      </span>
+    {/if}
+  {/each}
+{:else}
+  <span class="text"><slot /></span>
+{/if}
 
 <style>
   .text {
     flex-shrink: 0;
     line-height: 26px;
+    vertical-align: middle;
+  }
+
+  .space {
+    margin-right: 5px;
+  }
+
+  .punctuation {
+    color: red;
+    font-size: 20px;
   }
 </style>

From fcca165a2e5f8374a42f92d75b01bc395b76e489 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Fri, 12 Apr 2024 09:41:31 +0100
Subject: [PATCH 056/123] wip

---
 packages/bbui/src/Tooltip/Context.svelte                    | 2 ++
 .../settings/controls/FieldContext/FieldContext.svelte      | 5 +++++
 .../settings/controls/FieldContext/typography/Text.svelte   | 2 +-
 packages/client/src/components/app/charts/BarChart.svelte   | 6 ++++++
 4 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/packages/bbui/src/Tooltip/Context.svelte b/packages/bbui/src/Tooltip/Context.svelte
index d5afad9fa2..10f050c7b6 100644
--- a/packages/bbui/src/Tooltip/Context.svelte
+++ b/packages/bbui/src/Tooltip/Context.svelte
@@ -157,6 +157,8 @@
 
     border-radius: 5px;
     box-sizing: border-box;
+    opacity: 0;
+    overflow: hidden;
     border: 1px solid var(--grey-4);
 
     transition: width 300ms ease-in, height 300ms ease-in, top 300ms ease-in, left 300ms ease-in;
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/FieldContext.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/FieldContext.svelte
index 95b7c537ae..51bd717ffa 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/FieldContext.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/FieldContext.svelte
@@ -64,6 +64,11 @@
       {setExplanationSubject}
     />
   {/if}
+  {#if messages.includes(messageConstants.chartDatetime)}
+    <JSONPrimitivesOnly
+      {setExplanationSubject}
+    />
+  {/if}
 </div>
 
 
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/typography/Text.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Text.svelte
index a9b137e025..dcb589fad0 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/typography/Text.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Text.svelte
@@ -7,6 +7,7 @@
 
   const punctuation = [" ", ",", "."]
 
+  // TODO regex might work here now
   const getWords = (value) => {
     if (typeof value !== "string") {
       return [];
@@ -37,7 +38,6 @@
   }
 
   $: words = getWords(value)
-  $: console.log(words);
 </script>
 
 {#if words.length}
diff --git a/packages/client/src/components/app/charts/BarChart.svelte b/packages/client/src/components/app/charts/BarChart.svelte
index 4a23393b72..e79b8113de 100644
--- a/packages/client/src/components/app/charts/BarChart.svelte
+++ b/packages/client/src/components/app/charts/BarChart.svelte
@@ -97,12 +97,14 @@
     // Add data
     let useDates = false
     if (schema[labelColumn]) {
+      console.log("in here?");
       const labelFieldType = schema[labelColumn].type
       if (horizontal) {
         builder = builder.yType(labelFieldType).xUnits(yAxisUnits)
       } else {
         builder = builder.xType(labelFieldType).yUnits(yAxisUnits)
       }
+      console.log(labelFieldType);
       useDates = labelFieldType === "datetime"
     }
     const series = (valueColumns ?? []).map(column => ({
@@ -110,6 +112,8 @@
       data: data.map(row => {
         if (!useDates) {
           const value = get(row, column); 
+          console.log("one");
+          console.log(value);
 
           if (Array.isArray(value)) {
             return null;
@@ -121,6 +125,8 @@
 
           return value;
         } else {
+          console.log("two");
+          console.log([row[labelColumn], row[column]]);
           return [row[labelColumn], row[column]]
         }
       }),

From d506e0724e25d55e096bc8917361d4695e459127 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Fri, 12 Apr 2024 10:17:15 +0100
Subject: [PATCH 057/123] refactor

---
 .../FieldContext/ExplanationModal/index.svelte   |  4 +++-
 .../subjects/DatesAsNumbers.svelte               |  9 +++++++++
 .../ExplanationModal/subjects/index.js           |  1 +
 .../controls/FieldContext/FieldContext.svelte    | 10 +++++++---
 .../settings/controls/FieldContext/columnInfo.js |  3 +--
 .../FieldContext/lines/DateAsNumber.svelte       | 16 ++++++++++++++++
 .../controls/FieldContext/lines/index.js         |  1 +
 .../settings/controls/FieldContext/subjects.js   |  1 +
 packages/client/manifest.json                    |  2 +-
 .../src/components/app/charts/BarChart.svelte    | 13 ++++++-------
 10 files changed, 46 insertions(+), 14 deletions(-)
 create mode 100644 packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/DatesAsNumbers.svelte
 create mode 100644 packages/builder/src/components/design/settings/controls/FieldContext/lines/DateAsNumber.svelte

diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/index.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/index.svelte
index 133b2a51b4..4c9e54ee31 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/index.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/index.svelte
@@ -1,6 +1,6 @@
 <script>
   import { ContextTooltip } from "@budibase/bbui"
-  import { Column, Support, NotRequired, StringsAsNumbers } from './subjects'
+  import { Column, Support, NotRequired, StringsAsNumbers, DatesAsNumbers } from './subjects'
   import subjects from '../subjects'
 
   export let anchor
@@ -24,6 +24,8 @@
       <StringsAsNumbers />
     {:else if subject === subjects.notRequired}
       <NotRequired />
+    {:else if subject === subjects.datesAsNumbers}
+      <DatesAsNumbers />
     {/if}
   </div>
 </ContextTooltip>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/DatesAsNumbers.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/DatesAsNumbers.svelte
new file mode 100644
index 0000000000..683fa24356
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/DatesAsNumbers.svelte
@@ -0,0 +1,9 @@
+<script>
+  import { Subject, Section } from './components'
+</script>
+
+<Subject heading="Dates as Numbers">
+  <Section>
+    A Date can be used in place of a numeric value, but it will be parsed as a UNIX epoch timestamp, which is the number of milliseconds since Jan 1st 1970.
+  </Section>
+</Subject>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/index.js b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/index.js
index 5dd1ed5410..32d04e8b0e 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/index.js
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/index.js
@@ -2,3 +2,4 @@ export { default as Column } from "./Column.svelte"
 export { default as NotRequired } from "./NotRequired.svelte"
 export { default as StringsAsNumbers } from "./StringsAsNumbers.svelte"
 export { default as Support } from "./Support.svelte"
+export { default as DatesAsNumbers } from "./DatesAsNumbers.svelte"
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/FieldContext.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/FieldContext.svelte
index 51bd717ffa..efa8f86bd0 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/FieldContext.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/FieldContext.svelte
@@ -1,7 +1,7 @@
 <script>
   import ExplanationModal from './ExplanationModal/index.svelte'
   import { messages as messageConstants, getColumnInfoMessagesAndSupport } from "./columnInfo";
-  import { Column, Support, NotRequired, StringNumber, JSONPrimitivesOnly } from "./lines"
+  import { Column, Support, NotRequired, StringNumber, JSONPrimitivesOnly, DateAsNumber } from "./lines"
   import subjects from './subjects';
 
   export let columnInfo
@@ -31,6 +31,10 @@
     explanationModalSubject = option;
     root = root
   }
+
+  $: {
+    console.log(messages);
+  }
 </script>
 
 <div
@@ -64,8 +68,8 @@
       {setExplanationSubject}
     />
   {/if}
-  {#if messages.includes(messageConstants.chartDatetime)}
-    <JSONPrimitivesOnly
+  {#if messages.includes(messageConstants.dateAsNumber)}
+    <DateAsNumber
       {setExplanationSubject}
     />
   {/if}
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/columnInfo.js b/packages/builder/src/components/design/settings/controls/FieldContext/columnInfo.js
index 0faea209f0..5588e44bbc 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/columnInfo.js
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/columnInfo.js
@@ -3,7 +3,7 @@ import { capitalize } from 'lodash';
 export const messages = {
   jsonPrimitivesOnly: Symbol("column-info-json-primitives-only"),
   stringAsNumber: Symbol("column-info-string-as-number"),
-  chartDatetime: Symbol("column-info-chart-datetime"),
+  dateAsNumber: Symbol("column-info-date-as-number"),
   notRequired: Symbol("column-info-not-required"),
   contextError: Symbol("column-info-context-error"),
 }
@@ -55,7 +55,6 @@ const getSupportMessage = (type, columnInfo) => {
 }
 
 export const getColumnInfoMessagesAndSupport = (fieldSchema, columnInfo) => {
-
   try {
     const columnInfoMessagesAndSupport = {
       support: getSupport(fieldSchema.type, columnInfo),
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/lines/DateAsNumber.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/lines/DateAsNumber.svelte
new file mode 100644
index 0000000000..c2c6ca3bd1
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/lines/DateAsNumber.svelte
@@ -0,0 +1,16 @@
+<script>
+  import { Line, InfoWord, DocumentationLink, Space, Text, Period } from "../typography"
+  import subjects from '../subjects'
+
+  export let setExplanationSubject
+</script>
+
+<Line>
+  <Text value="Will be parsed as a " />
+  <InfoWord
+      on:mouseenter={() => setExplanationSubject(subjects.datesAsNumbers)}
+      on:mouseleave={() => setExplanationSubject(subjects.none)}
+    text="UNIX epoch timestamp"
+  />
+  <Period />
+</Line>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/lines/index.js b/packages/builder/src/components/design/settings/controls/FieldContext/lines/index.js
index 2b593faa83..da819ee9d7 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/lines/index.js
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/lines/index.js
@@ -3,3 +3,4 @@ export { default as NotRequired } from "./NotRequired.svelte"
 export { default as StringNumber } from "./StringNumber.svelte"
 export { default as Support } from "./Support.svelte"
 export { default as JSONPrimitivesOnly } from "./JSONPrimitivesOnly.svelte"
+export { default as DateAsNumber } from "./DateAsNumber.svelte"
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/subjects.js b/packages/builder/src/components/design/settings/controls/FieldContext/subjects.js
index a0f6ea912c..bad3c88df2 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/subjects.js
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/subjects.js
@@ -2,6 +2,7 @@ const subjects = {
   column: Symbol("explanation-modal-column"),
   support: Symbol("explanation-modal-support"),
   stringsAsNumbers: Symbol("explanation-modal-strings-as-numbers"),
+  datesAsNumbers: Symbol("explanation-modal-dates-as-numbers"),
   notRequired: Symbol("explanation-modal-not-required"),
   none: Symbol("explanation-modal-none")
 }
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 1975feab58..128e5fe6a7 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -1639,7 +1639,7 @@
             "supported": ["number", "boolean"],
             "partialSupport": [
               { "type": "string", "message": "stringAsNumber" },
-              { "type": "datetime", "message": "datetimeChart"}
+              { "type": "datetime", "message": "dateAsNumber"}
             ],
             "unsupported": [
               { "type": "json", "message": "jsonPrimitivesOnly" }
diff --git a/packages/client/src/components/app/charts/BarChart.svelte b/packages/client/src/components/app/charts/BarChart.svelte
index e79b8113de..532ce11306 100644
--- a/packages/client/src/components/app/charts/BarChart.svelte
+++ b/packages/client/src/components/app/charts/BarChart.svelte
@@ -97,23 +97,23 @@
     // Add data
     let useDates = false
     if (schema[labelColumn]) {
-      console.log("in here?");
       const labelFieldType = schema[labelColumn].type
       if (horizontal) {
         builder = builder.yType(labelFieldType).xUnits(yAxisUnits)
       } else {
         builder = builder.xType(labelFieldType).yUnits(yAxisUnits)
       }
-      console.log(labelFieldType);
       useDates = labelFieldType === "datetime"
     }
     const series = (valueColumns ?? []).map(column => ({
       name: column,
       data: data.map(row => {
         if (!useDates) {
-          const value = get(row, column); 
-          console.log("one");
-          console.log(value);
+          const value = get(row, column);
+
+          if (schema[column].type === 'datetime') {
+            return Date.parse(value)
+          }
 
           if (Array.isArray(value)) {
             return null;
@@ -125,8 +125,7 @@
 
           return value;
         } else {
-          console.log("two");
-          console.log([row[labelColumn], row[column]]);
+          // TODO datetimes as labels are passed in this way, but this only updates on value change, so it's broken until you also change the value
           return [row[labelColumn], row[column]]
         }
       }),

From 18581ba982f400609f90807b6d1f0a74e9553254 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Fri, 12 Apr 2024 14:18:41 +0100
Subject: [PATCH 058/123] wip

---
 .../ExplanationModal/index.svelte             |  5 +-
 .../subjects/DatesAsNumbers.svelte            |  2 +-
 .../subjects/ScalarJsonOnly.svelte            | 64 +++++++++++++++++++
 .../subjects/components/Block.svelte          | 26 ++++++++
 .../subjects/components/Section.svelte        |  2 +
 .../subjects/components/index.js              |  1 +
 .../ExplanationModal/subjects/index.js        |  1 +
 .../controls/FieldContext/FieldContext.svelte |  1 +
 .../lines/JSONPrimitivesOnly.svelte           |  9 +--
 .../FieldContext/lines/StringNumber.svelte    |  4 +-
 .../controls/FieldContext/subjects.js         |  1 +
 .../FieldContext/typography/Comma.svelte      |  3 +-
 .../typography/DocumentationLink.svelte       |  3 +-
 .../FieldContext/typography/InfoWord.svelte   |  7 +-
 .../FieldContext/typography/Line.svelte       |  3 +-
 .../FieldContext/typography/Period.svelte     |  3 +-
 .../FieldContext/typography/Space.svelte      |  1 -
 .../FieldContext/typography/Text.svelte       | 46 +++++--------
 18 files changed, 134 insertions(+), 48 deletions(-)
 create mode 100644 packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/ScalarJsonOnly.svelte
 create mode 100644 packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Block.svelte

diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/index.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/index.svelte
index 4c9e54ee31..0bb714cab6 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/index.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/index.svelte
@@ -1,10 +1,11 @@
 <script>
   import { ContextTooltip } from "@budibase/bbui"
-  import { Column, Support, NotRequired, StringsAsNumbers, DatesAsNumbers } from './subjects'
+  import { ScalarJsonOnly, Column, Support, NotRequired, StringsAsNumbers, DatesAsNumbers } from './subjects'
   import subjects from '../subjects'
 
   export let anchor
   export let schema
+  export let columnName
   export let subject = subjects.none
 </script>
 
@@ -26,6 +27,8 @@
       <NotRequired />
     {:else if subject === subjects.datesAsNumbers}
       <DatesAsNumbers />
+    {:else if subject === subjects.scalarJsonOnly}
+      <ScalarJsonOnly {columnName} {schema} />
     {/if}
   </div>
 </ContextTooltip>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/DatesAsNumbers.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/DatesAsNumbers.svelte
index 683fa24356..3a51eace80 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/DatesAsNumbers.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/DatesAsNumbers.svelte
@@ -4,6 +4,6 @@
 
 <Subject heading="Dates as Numbers">
   <Section>
-    A Date can be used in place of a numeric value, but it will be parsed as a UNIX epoch timestamp, which is the number of milliseconds since Jan 1st 1970.
+    A date can be used in place of a numeric value, but it will be parsed as a UNIX epoch timestamp, which is the number of milliseconds since Jan 1st 1970.
   </Section>
 </Subject>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/ScalarJsonOnly.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/ScalarJsonOnly.svelte
new file mode 100644
index 0000000000..102c7718d0
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/ScalarJsonOnly.svelte
@@ -0,0 +1,64 @@
+<script>
+  import { Body } from "@budibase/bbui"
+  import { Block, Subject, Section } from './components'
+
+  export let schema
+  export let columnName
+
+  const maxScalarDescendantsToFind = 3;
+
+  const getScalarDescendants = (schema) => {
+    const newScalarDescendants = [];
+
+    const getScalarDescendantFromSchema = (path, schema) => {
+      if (newScalarDescendants.length >= maxScalarDescendantsToFind) {
+        return;
+      }
+
+      if (["string", "number", "boolean"].includes(schema.type)) {
+        newScalarDescendants.push(path.join("."))
+      } else if (schema.type === "json") {
+        Object.entries(schema.schema ?? {}).forEach(([childName, childSchema]) => 
+        getScalarDescendantFromSchema([...path, childName], childSchema))
+      }
+    }
+
+    Object.entries(schema?.schema ?? {}).forEach(([childName, childSchema]) => 
+        getScalarDescendantFromSchema([columnName, childName], childSchema))
+
+    return newScalarDescendants;
+  }
+
+  $: scalarDescendants = getScalarDescendants(schema)
+  $: console.log(scalarDescendants);
+  $: console.log(schema);
+</script>
+
+<Subject heading="Using Scalar JSON Values">
+  <Section>
+    <Block>JSON objects</Block> can't be used here, but any <Block>number</Block>, <Block>string</Block> or <Block>boolean</Block> values nested within said object can be if they are otherwise compatible with the component. These scalar values can be selected from the same menu as this parent and take the form <Block>parent.child</Block>.
+  </Section>
+
+  {#if scalarDescendants.length > 0}
+    <Section>
+      Examples of scalar descendants of this object are:
+      {#if scalarDescendants[0]}
+        <Block>{scalarDescendants[0]}</Block>
+      {/if}
+      {#if scalarDescendants.length === 2}
+        {" and "}
+      {:else if scalarDescendants.length === 3}
+        {", "}
+      {/if}
+      {#if scalarDescendants[1]}
+        <Block>{scalarDescendants[1]}</Block>
+      {/if}
+      {#if scalarDescendants.length === 3}
+        {" and "}
+      {/if}
+      {#if scalarDescendants[2]}
+        <Block>{scalarDescendants[2]}</Block>
+      {/if}
+    </Section>
+  {/if}
+</Subject>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Block.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Block.svelte
new file mode 100644
index 0000000000..95fa9309dd
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Block.svelte
@@ -0,0 +1,26 @@
+<script>
+  export let truncate = false
+</script>
+
+<span class:truncate class="block">
+  <slot />
+</span>
+
+<style>
+  .block {
+    font-style: italic;
+    padding: 0px 3px;
+    border-radius: 1px;
+    background-color: var(--grey-3);
+    color: var(--ink);
+    word-break: break-all;
+  }
+
+  .truncate {
+    display: inline-block;
+    max-width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+</style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Section.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Section.svelte
index 41f919fd10..f4b25bc19c 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Section.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Section.svelte
@@ -4,6 +4,8 @@
 
 <style>
   .section {
+    line-height: 22px;
     margin-bottom: 16px;
+    overflow: hidden;
   }
 </style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/index.js b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/index.js
index 4ea7a2ca88..57e512f5ce 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/index.js
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/index.js
@@ -1,3 +1,4 @@
 export { default as Subject } from "./Subject.svelte"
 export { default as Property } from "./Property.svelte"
 export { default as Section } from "./Section.svelte"
+export { default as Block } from "./Block.svelte"
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/index.js b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/index.js
index 32d04e8b0e..e77d12d2bf 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/index.js
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/index.js
@@ -3,3 +3,4 @@ export { default as NotRequired } from "./NotRequired.svelte"
 export { default as StringsAsNumbers } from "./StringsAsNumbers.svelte"
 export { default as Support } from "./Support.svelte"
 export { default as DatesAsNumbers } from "./DatesAsNumbers.svelte"
+export { default as ScalarJsonOnly } from "./ScalarJsonOnly.svelte"
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/FieldContext.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/FieldContext.svelte
index efa8f86bd0..3cc353c3a9 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/FieldContext.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/FieldContext.svelte
@@ -78,6 +78,7 @@
 
 {#if explanationModal}
   <ExplanationModal
+    {columnName}
     anchor={root}
     {schema}
     subject={explanationModalSubject}
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/lines/JSONPrimitivesOnly.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/lines/JSONPrimitivesOnly.svelte
index f4726d754b..ee4b258b80 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/lines/JSONPrimitivesOnly.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/lines/JSONPrimitivesOnly.svelte
@@ -7,11 +7,12 @@
 
 
 <Line>
+  <InfoWord
+  on:mouseenter={() => setExplanationSubject(subjects.scalarJsonOnly)}
+  on:mouseleave={() => setExplanationSubject(subjects.none)}
+>Scalar JSON values</InfoWord>
   <Text
-    value="JSON Objects cannot be used, but scalar"
-  />
-  <Text
-    value=" child values can be if their individual types are supported"
+    value=" can be used with this component if their individual types are supported"
   />
   <Period />
 </Line>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/lines/StringNumber.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/lines/StringNumber.svelte
index da9e2ea28e..9c9f001f48 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/lines/StringNumber.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/lines/StringNumber.svelte
@@ -6,11 +6,11 @@
 </script>
 
 <Line>
-  <Text value="Any " />
+  <Text value="The component will ignore any " />
   <InfoWord
       on:mouseenter={() => setExplanationSubject(subjects.stringsAsNumbers)}
       on:mouseleave={() => setExplanationSubject(subjects.none)}
     text="non-number values"
   />
-  <Text value=" will be ignored." />
+  <Period />
 </Line>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/subjects.js b/packages/builder/src/components/design/settings/controls/FieldContext/subjects.js
index bad3c88df2..a58564d2bd 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/subjects.js
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/subjects.js
@@ -4,6 +4,7 @@ const subjects = {
   stringsAsNumbers: Symbol("explanation-modal-strings-as-numbers"),
   datesAsNumbers: Symbol("explanation-modal-dates-as-numbers"),
   notRequired: Symbol("explanation-modal-not-required"),
+  scalarJsonOnly: Symbol("explanation-scalar-json-only"),
   none: Symbol("explanation-modal-none")
 }
 
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/typography/Comma.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Comma.svelte
index 03a7f0d51e..f16bd16054 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/typography/Comma.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Comma.svelte
@@ -5,9 +5,10 @@
     color: var(--grey-6);
     font-size: 17px;
     display: inline block;
-    line-height: 26px;
     margin-left: 2px;
     margin-right: 2px;
     flex-shrink: 0;
+    position: relative;
+    bottom: 2px;
   }
 </style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/typography/DocumentationLink.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/typography/DocumentationLink.svelte
index dbff157c50..982745ac07 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/typography/DocumentationLink.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/typography/DocumentationLink.svelte
@@ -32,8 +32,7 @@
   .link {
     display: inline-flex;
     box-sizing: border-box;
-    padding: 3px 0 2px;
-    vertical-align: sub;
+    padding: 1px 0;
     filter: brightness(100%);
 
     overflow: hidden;
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/typography/InfoWord.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/typography/InfoWord.svelte
index 7ace69daf3..582e07f9fe 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/typography/InfoWord.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/typography/InfoWord.svelte
@@ -51,17 +51,14 @@
 
 <style>
   .infoWord {
-    vertical-align: bottom;
     display: inline-flex;
     box-sizing: border-box;
-    padding: 3px 6px;
-    border-radius: 5px;
+    padding: 1px 0;
     filter: brightness(100%);
-    background-color: var(--grey-3);
-    border: 1px solid var(--grey-3);
     overflow: hidden;
     transition: filter 300ms;
     align-items: center;
+    border-bottom: 1px solid var(--grey-6);
   }
 
   .infoWord:hover {
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/typography/Line.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Line.svelte
index 7b0c71a604..50e0c70abb 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/typography/Line.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Line.svelte
@@ -23,14 +23,15 @@
     font-size: 17px;
     display: inline block;
     margin-right: 10px;
-    line-height: 26px;
   }
 
   .content {
+    line-height: 17px;
     min-width: 0;
     align-items: center;
     display: flex;
     flex-wrap: wrap;
+    row-gap: 6px;
   }
 
   .noWrap {
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/typography/Period.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Period.svelte
index 8faf71d3ba..d1bbafe6a6 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/typography/Period.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Period.svelte
@@ -5,8 +5,9 @@
     color: var(--grey-6);
     font-size: 20px;
     display: inline block;
-    line-height: 26px;
     margin-left: 2px;
     flex-shrink: 0;
+    position: relative;
+    bottom: 2px;
   }
 </style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/typography/Space.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Space.svelte
index 1003a8c577..30aeefef16 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/typography/Space.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Space.svelte
@@ -3,7 +3,6 @@
 <style>
   .space {
     white-space: pre;
-    line-height: 26px;
     width: 5px;
     flex-shrink: 0;
   }
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/typography/Text.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Text.svelte
index dcb589fad0..42983a1b0c 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/typography/Text.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Text.svelte
@@ -40,37 +40,25 @@
   $: words = getWords(value)
 </script>
 
-{#if words.length}
-  {#each words as word}
-    {#if word === " "}
-      <Space />
-    {:else if word === ","}
-      <Comma />
-    {:else if word === "."}
-      <Period />
-    {:else}
-      <span class="text">
-        {word}
-      </span>
-    {/if}
-  {/each}
-{:else}
-  <span class="text"><slot /></span>
-{/if}
+{#each words as word}
+  {#if word === " "}
+    <Space />
+  {:else if word === ","}
+    <Comma />
+  {:else if word === "."}
+    <Period />
+  {:else}
+    <span class="text">
+      {word}
+    </span>
+  {/if}
+{/each}
 
 <style>
   .text {
-    flex-shrink: 0;
-    line-height: 26px;
-    vertical-align: middle;
-  }
-
-  .space {
-    margin-right: 5px;
-  }
-
-  .punctuation {
-    color: red;
-    font-size: 20px;
+    /* invisible properties to match other inline text elements that do have borders. If we don't match here we run into subpixel issues */
+    box-sizing: border-box;
+    border-bottom: 1px solid transparent;
+    padding: 1px 0;
   }
 </style>

From 2317003fbf134cc0c4f864257ba6321fd21473fd Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Sat, 13 Apr 2024 09:50:19 +0100
Subject: [PATCH 059/123] scrolling

---
 .../ExplanationModal/index.svelte             |  2 +-
 .../ExplanationModal/subjects/Column.svelte   | 25 +++++++++++++++--
 .../subjects/ScalarJsonOnly.svelte            |  2 --
 .../subjects/components/Block.svelte          | 14 +---------
 .../subjects/components/Property.svelte       | 21 ++++++++++-----
 .../subjects/components/Subject.svelte        | 27 ++++++++++++++++++-
 .../controls/FieldContext/FieldContext.svelte |  5 ----
 7 files changed, 65 insertions(+), 31 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/index.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/index.svelte
index 0bb714cab6..08fb5ff1c4 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/index.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/index.svelte
@@ -18,7 +18,7 @@
 >
   <div class="explanationModalContent">
     {#if subject === subjects.column}
-      <Column {schema} />
+      <Column {columnName} {schema} />
     {:else if subject === subjects.support}
       <Support />
     {:else if subject === subjects.stringsAsNumbers}
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/Column.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/Column.svelte
index fb5c26fac9..a1c278fffb 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/Column.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/Column.svelte
@@ -1,11 +1,15 @@
 <script>
-  import { Subject, Property, Section }  from './components'
+  import { Block, Subject, Property, Section }  from './components'
 
   export let schema
+  export let columnName
 </script>
 
 
-<Subject heading="Column Overview">
+<Subject>
+  <div class="heading" slot="heading">
+    Column Overview for <Block>{columnName}</Block>
+  </div>
   <Section>
   {#if schema.type === "string"}
     <Property
@@ -51,3 +55,20 @@
    />
    </Section>
 </Subject>
+
+<style>
+  .heading {
+    display: flex;
+    align-items: center;
+  }
+
+  .heading > :global(.block) {
+    margin-left: 4px;
+    flex-grow: 0;
+    flex-shrink: 1;
+    display: inline-block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+</style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/ScalarJsonOnly.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/ScalarJsonOnly.svelte
index 102c7718d0..c6e3b5aabf 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/ScalarJsonOnly.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/ScalarJsonOnly.svelte
@@ -30,8 +30,6 @@
   }
 
   $: scalarDescendants = getScalarDescendants(schema)
-  $: console.log(scalarDescendants);
-  $: console.log(schema);
 </script>
 
 <Subject heading="Using Scalar JSON Values">
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Block.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Block.svelte
index 95fa9309dd..e90bbc6bf9 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Block.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Block.svelte
@@ -1,8 +1,4 @@
-<script>
-  export let truncate = false
-</script>
-
-<span class:truncate class="block">
+<span class="block">
   <slot />
 </span>
 
@@ -15,12 +11,4 @@
     color: var(--ink);
     word-break: break-all;
   }
-
-  .truncate {
-    display: inline-block;
-    max-width: 100%;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
 </style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Property.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Property.svelte
index cc4e91da75..39e758d1a3 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Property.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Property.svelte
@@ -7,6 +7,10 @@
 <div class="property">
   
 {#if pre}
+<span class="propertyName">
+  {name}
+</span>
+  <span class="propertyDivider">-</span>
 <pre class="pre propertyValue">
 {value}
 </pre>
@@ -27,12 +31,15 @@
   }
   .propertyName {
     font-style: italic;
-
   }
-.pre {
-  padding: 4px;
-  border-radius: 3px;
-  width: 250px;
-  background-color: black;
-}
+
+  .pre {
+    margin: 0;
+    margin-top: 3px;
+    padding: 4px;
+    border-radius: 3px;
+    width: 250px;
+    box-sizing: border-box;
+    background-color: black;
+  }
 </style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Subject.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Subject.svelte
index 2231a048ce..77b8354e56 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Subject.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Subject.svelte
@@ -1,5 +1,23 @@
 <script>
+  import { onMount } from "svelte"
+
   export let heading = ""
+  let body;
+
+  const handleScroll = (e) => {
+    console.log("scroll");
+    if (!body) return;
+
+    body.scrollTo({ top: body.scrollTop + e.deltaY, behavior: "smooth" })
+  }
+
+  onMount(() => {
+    window.addEventListener("wheel", handleScroll)
+
+    return () => {
+      window.removeEventListener("wheel", handleScroll)
+    }
+  });
 </script>
 
 <div class="heading">
@@ -10,7 +28,9 @@
   </span>
 </div>
 <div class="divider" />
-<slot />
+<div bind:this={body} class="body">
+  <slot />
+</div>
 
 <style>
   .heading {
@@ -24,4 +44,9 @@
     border-bottom: 1px solid var(--grey-4);
     margin: 12px 0 12px;
   }
+
+  .body {
+    max-height: 300px;
+    overflow-y: auto;
+  }
 </style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/FieldContext.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/FieldContext.svelte
index 3cc353c3a9..ee558cbf95 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/FieldContext.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/FieldContext.svelte
@@ -31,17 +31,12 @@
     explanationModalSubject = option;
     root = root
   }
-
-  $: {
-    console.log(messages);
-  }
 </script>
 
 <div
   bind:this={root}
   class="tooltipContents"
 >
-
   <Column
     {columnName}
     {columnIcon}

From 7fcea91ab461040b34bc430c099f2506b6312fa5 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Sat, 13 Apr 2024 11:05:08 +0100
Subject: [PATCH 060/123] stuff

---
 .../ExplanationModal/subjects/Column.svelte   |  4 ++--
 .../subjects/NotRequired.svelte               |  6 +++---
 .../subjects/StringsAsNumbers.svelte          | 20 +++++++++++++++++--
 .../subjects/components/Block.svelte          |  4 ++--
 .../typography/DocumentationLink.svelte       |  5 +++--
 .../FieldContext/typography/InfoWord.svelte   |  6 +++---
 .../FieldContext/typography/Text.svelte       |  2 +-
 .../settings/controls/MultiFieldSelect.svelte |  6 ++++++
 8 files changed, 38 insertions(+), 15 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/Column.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/Column.svelte
index a1c278fffb..ab43b6658a 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/Column.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/Column.svelte
@@ -36,11 +36,11 @@
   {:else if schema.type === "number"}
     <Property
       name="Min Value"
-      value={schema?.constraints?.numericality?.greaterThanOrEqualTo === "" ? "None" : schema?.constraints?.numericality?.greaterThanOrEqualTo}
+      value={[null, undefined, ""].includes(schema?.constraints?.numericality?.greaterThanOrEqualTo) ? "None" : schema?.constraints?.numericality?.greaterThanOrEqualTo}
     />
     <Property
       name="Max Value"
-      value={schema?.constraints?.numericality?.lessThanOrEqualTo === "" ? "None" : schema?.constraints?.numericality?.lessThanOrEqualTo}
+      value={[null, undefined, ""].includes(schema?.constraints?.numericality?.lessThanOrEqualTo)? "None" : schema?.constraints?.numericality?.lessThanOrEqualTo}
     />
   {:else if schema.type === "json"}
     <Property
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/NotRequired.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/NotRequired.svelte
index f9a00ebcd8..3ad33feb81 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/NotRequired.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/NotRequired.svelte
@@ -1,9 +1,9 @@
 <script>
-  import { Subject, Section } from './components'
+  import { Block, Subject, Section } from './components'
 </script>
 
-<Subject heading="'Required' Constraint">
+<Subject heading="Required Constraint">
   <Section>
-      A 'required' contraint can be applied to columns to ensure a value is always present. If a column doesn't have this constraint, then its value for a particular row could he missing.
+    A <Block>required</Block> constraint can be applied to columns to ensure a value is always present. If a column doesn't have this constraint, then its value for a particular row could he missing.
   </Section>
 </Subject>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/StringsAsNumbers.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/StringsAsNumbers.svelte
index 27e28c13e6..0accdcd197 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/StringsAsNumbers.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/StringsAsNumbers.svelte
@@ -1,9 +1,25 @@
 <script>
-  import { Subject, Section } from './components'
+  import { Block, Subject, Section } from './components'
 </script>
 
 <Subject heading="Text as Numbers">
   <Section>
-    Text can be used in place of numbers in certain scenarios, but care needs to be taken to ensure that non-numerical values aren't also present, otherwise they may be parsed incorrectly and lead to unexpected behavior.
+    Text can be used in place of numbers in certain scenarios, but care needs to be taken, as text that doesn't contain a strictly base-ten, non-decimal value may lead to unexpected behavior.
+  </Section>
+
+  <Section>
+    Examples:
+    <br />
+    <Block>"100"</Block>{" -> "}<Block>100</Block>
+    <br />
+    <Block>"100k"</Block>{" -> "}<Block>100</Block>
+    <br />
+    <Block>"100,000"</Block>{" -> "}<Block>100</Block>
+    <br />
+    <Block>"100 million"</Block>{" -> "}<Block>100</Block>
+    <br />
+    <Block>"100.9"</Block>{" -> "}<Block>100</Block>
+    <br />
+    <Block>"One hundred"</Block>{" -> "}<Block>Error</Block>
   </Section>
 </Subject>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Block.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Block.svelte
index e90bbc6bf9..b2e2d8330c 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Block.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Block.svelte
@@ -5,10 +5,10 @@
 <style>
   .block {
     font-style: italic;
-    padding: 0px 3px;
+    padding: 0px 5px 0px 3px;
     border-radius: 1px;
     background-color: var(--grey-3);
     color: var(--ink);
-    word-break: break-all;
+    word-break: break-word;
   }
 </style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/typography/DocumentationLink.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/typography/DocumentationLink.svelte
index 982745ac07..d4d9bebdc4 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/typography/DocumentationLink.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/typography/DocumentationLink.svelte
@@ -13,7 +13,7 @@
   target="_blank"
   class="link"
 >
-  <Icon size="S" name={icon} />
+  <Icon size="XS" name={icon} />
   <span class="text">
     <slot>
       {text}
@@ -32,8 +32,9 @@
   .link {
     display: inline-flex;
     box-sizing: border-box;
-    padding: 1px 0;
+    padding: 1px 0 2px;
     filter: brightness(100%);
+    align-items: center;
 
     overflow: hidden;
     flex-shrink: 0;
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/typography/InfoWord.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/typography/InfoWord.svelte
index 582e07f9fe..9e6dd29ba0 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/typography/InfoWord.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/typography/InfoWord.svelte
@@ -21,7 +21,7 @@
     on:mouseleave
   >
     {#if icon}
-      <Icon size="S" name={icon} />
+      <Icon size="XS" name={icon} />
     {/if}
     <span class="text">
       <slot>
@@ -39,7 +39,7 @@
     on:mouseleave
   >
     {#if icon}
-      <Icon size="S" name={icon} />
+      <Icon size="XS" name={icon} />
     {/if}
     <span class="text">
       <slot>
@@ -53,7 +53,7 @@
   .infoWord {
     display: inline-flex;
     box-sizing: border-box;
-    padding: 1px 0;
+    padding: 1px 0 2px;
     filter: brightness(100%);
     overflow: hidden;
     transition: filter 300ms;
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/typography/Text.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Text.svelte
index 42983a1b0c..d7dc4d053d 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/typography/Text.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Text.svelte
@@ -59,6 +59,6 @@
     /* invisible properties to match other inline text elements that do have borders. If we don't match here we run into subpixel issues */
     box-sizing: border-box;
     border-bottom: 1px solid transparent;
-    padding: 1px 0;
+    padding: 1px 0 2px;
   }
 </style>
diff --git a/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte b/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
index 9f0f9a4561..0fd92477f3 100644
--- a/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
@@ -70,6 +70,10 @@
 
     if (field) {
       return field.name
+    } else if (type === "jsonarray") {
+      // `jsonarray` isn't present in the above FIELDS constant
+
+      return "JSON Array"
     }
 
     return ""
@@ -93,6 +97,8 @@
   const onOptionMouseleave = (e, option) => {
     updateTooltip(e, null);
   }
+
+  $: console.log(schema)
 </script>
 
 <Multiselect

From 2c6dd23df11791706e6e291c5a083f8e57777ccb Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Sun, 14 Apr 2024 09:01:38 +0100
Subject: [PATCH 061/123] fix text alignment

---
 .../settings/controls/FieldContext/typography/Line.svelte       | 2 +-
 .../settings/controls/FieldContext/typography/Space.svelte      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/typography/Line.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Line.svelte
index 50e0c70abb..5a98f8026c 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/typography/Line.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Line.svelte
@@ -31,7 +31,7 @@
     align-items: center;
     display: flex;
     flex-wrap: wrap;
-    row-gap: 6px;
+    row-gap: 4px;
   }
 
   .noWrap {
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/typography/Space.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Space.svelte
index 30aeefef16..b88831d760 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/typography/Space.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Space.svelte
@@ -3,7 +3,7 @@
 <style>
   .space {
     white-space: pre;
-    width: 5px;
+    width: 3px;
     flex-shrink: 0;
   }
 </style>

From aba14f0e1684b85652fbe26602e41535bf3172a2 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Sun, 14 Apr 2024 09:47:16 +0100
Subject: [PATCH 062/123] array type info

---
 packages/bbui/src/Tooltip/Context.svelte      |  2 -
 .../ExplanationModal/subjects/Column.svelte   | 25 +++++++-
 .../subjects/components/JSONProperty.svelte   | 42 +++++++++++++
 .../subjects/components/Property.svelte       | 60 ++++++++++---------
 .../subjects/components/Section.svelte        |  4 +-
 .../subjects/components/index.js              |  1 +
 .../controls/FieldContext/lines/Column.svelte |  1 -
 7 files changed, 99 insertions(+), 36 deletions(-)
 create mode 100644 packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/JSONProperty.svelte

diff --git a/packages/bbui/src/Tooltip/Context.svelte b/packages/bbui/src/Tooltip/Context.svelte
index 10f050c7b6..d5afad9fa2 100644
--- a/packages/bbui/src/Tooltip/Context.svelte
+++ b/packages/bbui/src/Tooltip/Context.svelte
@@ -157,8 +157,6 @@
 
     border-radius: 5px;
     box-sizing: border-box;
-    opacity: 0;
-    overflow: hidden;
     border: 1px solid var(--grey-4);
 
     transition: width 300ms ease-in, height 300ms ease-in, top 300ms ease-in, left 300ms ease-in;
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/Column.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/Column.svelte
index ab43b6658a..819d87fcd1 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/Column.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/Column.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Block, Subject, Property, Section }  from './components'
+  import { Block, Subject, JSONProperty, Property, Section }  from './components'
 
   export let schema
   export let columnName
@@ -42,9 +42,18 @@
       name="Max Value"
       value={[null, undefined, ""].includes(schema?.constraints?.numericality?.lessThanOrEqualTo)? "None" : schema?.constraints?.numericality?.lessThanOrEqualTo}
     />
+  {:else if schema.type === "array"}
+
+    {#each (schema?.constraints?.inclusion ?? []) as option, index}
+      <Property
+        name={`Option ${index + 1}`}
+        truncate
+      >
+      <span style:background-color={schema?.optionColors?.[option]} class="optionCircle" />{option}
+      </Property>
+    {/each}
   {:else if schema.type === "json"}
-    <Property
-      pre
+    <JSONProperty
       name="Schema"
       value={JSON.stringify(schema?.schema ?? {}, null, 2)}
     />
@@ -71,4 +80,14 @@
     overflow: hidden;
     text-overflow: ellipsis;
   }
+
+  .optionCircle {
+    display: inline-block;
+    background-color: hsla(0, 1%, 50%, 0.3);
+    border-radius: 100%;
+    width: 10px;
+    height: 10px;
+    vertical-align: middle;
+    margin-right: 5px;
+  }
 </style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/JSONProperty.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/JSONProperty.svelte
new file mode 100644
index 0000000000..eadaea537b
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/JSONProperty.svelte
@@ -0,0 +1,42 @@
+<script>
+  export let name;
+  export let value;
+</script>
+
+<div class="property">
+  <span class="propertyName">
+    <slot name="name">
+      {name}
+    </slot>
+  </span>
+  <span class="propertyDivider">-</span>
+  <pre class="pre propertyValue">
+    <slot>
+      {value}
+    </slot>
+  </pre>
+</div>
+
+<style>
+  .property {
+    margin-bottom: 12px;
+  }
+
+  .propertyName {
+    font-style: italic;
+  }
+
+  .propertyDivider {
+    padding: 4px;
+  }
+
+  .pre {
+    margin: 0;
+    margin-top: 3px;
+    padding: 4px;
+    border-radius: 3px;
+    width: 250px;
+    box-sizing: border-box;
+    background-color: black;
+  }
+</style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Property.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Property.svelte
index 39e758d1a3..d0f71c39b9 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Property.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Property.svelte
@@ -1,45 +1,49 @@
 <script>
   export let name;
   export let value;
-  export let pre;
+  export let truncate = false;
 </script>
 
-<div class="property">
-  
-{#if pre}
-<span class="propertyName">
-  {name}
-</span>
-  <span class="propertyDivider">-</span>
-<pre class="pre propertyValue">
-{value}
-</pre>
-{:else}
+<div class:truncate class="property">
   <span class="propertyName">
-    {name}
+    <slot name="name">
+      {name}
+    </slot>
   </span>
   <span class="propertyDivider">-</span>
   <span class="propertyValue">
-    {value}
+    <slot>
+      {value}
+    </slot>
   </span>
-{/if}
 </div>
 
 <style>
-  .propertyDivider {
-    padding: 4px;
-  }
-  .propertyName {
-    font-style: italic;
+  .property {
+    max-width: 100%;
   }
 
-  .pre {
-    margin: 0;
-    margin-top: 3px;
-    padding: 4px;
-    border-radius: 3px;
-    width: 250px;
-    box-sizing: border-box;
-    background-color: black;
+  .truncate {
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+  }
+
+  .propertyName {
+    font-style: italic;
+    flex-shrink: 0;
+  }
+
+
+  .propertyDivider {
+    padding: 0 6px;
+    flex-shrink: 0;
+  }
+
+  .propertyValue {
+    word-break: break-word;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 </style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Section.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Section.svelte
index f4b25bc19c..486e111725 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Section.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Section.svelte
@@ -4,8 +4,8 @@
 
 <style>
   .section {
-    line-height: 22px;
-    margin-bottom: 16px;
+    line-height: 20px;
+    margin-bottom: 13px;
     overflow: hidden;
   }
 </style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/index.js b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/index.js
index 57e512f5ce..9761fd31aa 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/index.js
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/index.js
@@ -1,4 +1,5 @@
 export { default as Subject } from "./Subject.svelte"
 export { default as Property } from "./Property.svelte"
+export { default as JSONProperty } from "./JSONProperty.svelte"
 export { default as Section } from "./Section.svelte"
 export { default as Block } from "./Block.svelte"
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/lines/Column.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/lines/Column.svelte
index d28748d8e0..4399f3e52b 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/lines/Column.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/lines/Column.svelte
@@ -38,7 +38,6 @@
 <Line noWrap>
   <InfoWord
     on:mouseenter={() => setExplanationSubject(subjects.column)}
-    on:mouseleave={() => setExplanationSubject(subjects.none)}
     href={tableHref}
     text={columnName}
   />

From 30449ee65b8522e4b364d867d29afa44fdbc42f5 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Sun, 14 Apr 2024 09:50:56 +0100
Subject: [PATCH 063/123] options info

---
 .../FieldContext/ExplanationModal/subjects/Column.svelte | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/Column.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/Column.svelte
index 819d87fcd1..e94ae9cb44 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/Column.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/Column.svelte
@@ -44,6 +44,15 @@
     />
   {:else if schema.type === "array"}
 
+    {#each (schema?.constraints?.inclusion ?? []) as option, index}
+      <Property
+        name={`Option ${index + 1}`}
+        truncate
+      >
+      <span style:background-color={schema?.optionColors?.[option]} class="optionCircle" />{option}
+      </Property>
+    {/each}
+  {:else if schema.type === "options"}
     {#each (schema?.constraints?.inclusion ?? []) as option, index}
       <Property
         name={`Option ${index + 1}`}

From deca9d4e6c7acffdef4a7702b41791a907180d58 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Sun, 14 Apr 2024 09:53:34 +0100
Subject: [PATCH 064/123] make options partially supported like strings

---
 packages/client/manifest.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 128e5fe6a7..bacbf98bff 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -1639,6 +1639,7 @@
             "supported": ["number", "boolean"],
             "partialSupport": [
               { "type": "string", "message": "stringAsNumber" },
+              { "type": "options", "message": "stringAsNumber" },
               { "type": "datetime", "message": "dateAsNumber"}
             ],
             "unsupported": [

From bfa2d53e391e33a38e62306474ec83f7c1c06aa3 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Mon, 15 Apr 2024 06:12:02 +0100
Subject: [PATCH 065/123] bindings wip

---
 .../common/CodeEditor/CodeEditor.svelte       |  4 ++
 .../ExplanationModal/subjects/Column.svelte   | 19 ++++++++--
 .../components/BindingProperty.svelte         | 38 +++++++++++++++++++
 .../subjects/components/JSONProperty.svelte   | 29 ++------------
 .../subjects/components/index.js              |  1 +
 .../settings/controls/MultiFieldSelect.svelte |  1 -
 packages/client/manifest.json                 |  3 ++
 7 files changed, 64 insertions(+), 31 deletions(-)
 create mode 100644 packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/BindingProperty.svelte

diff --git a/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte b/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
index ba5f75083a..0102d8f7a9 100644
--- a/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
+++ b/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
@@ -54,6 +54,7 @@
   export let autofocus = false
   export let jsBindingWrapping = true
   export let readonly = false
+  export let readonlyLineNumbers = false
 
   const dispatch = createEventDispatcher()
 
@@ -240,6 +241,9 @@
 
     if (readonly) {
       complete.push(EditorState.readOnly.of(true))
+      if (readonlyLineNumbers) {
+        complete.push(lineNumbers())
+      }
     } else {
       complete = [
         ...complete,
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/Column.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/Column.svelte
index e94ae9cb44..038ecfe1b0 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/Column.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/Column.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Block, Subject, JSONProperty, Property, Section }  from './components'
+  import { BindingProperty, Block, Subject, JSONProperty, Property, Section }  from './components'
 
   export let schema
   export let columnName
@@ -62,10 +62,21 @@
       </Property>
     {/each}
   {:else if schema.type === "json"}
-    <JSONProperty
-      name="Schema"
-      value={JSON.stringify(schema?.schema ?? {}, null, 2)}
+    <Property name="Schema">
+      <JSONProperty
+        value={JSON.stringify(schema?.schema ?? {}, null, 2)}
+      />
+    </Property>
+  {:else if schema.type === "formula"}
+    <Property
+      name="Formula type"
+      value={schema?.formulaType === "dynamic" ? "Dynamic" : "Static"}
     />
+    <Property name="Formula">
+    <BindingProperty
+      value={schema?.formula}
+    />
+    </Property>
   {/if}
   <Property
     name="Required"
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/BindingProperty.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/BindingProperty.svelte
new file mode 100644
index 0000000000..3e366928f4
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/BindingProperty.svelte
@@ -0,0 +1,38 @@
+
+<script>
+  import {
+    decodeJSBinding,
+  } from "@budibase/string-templates"
+  import CodeEditor from "components/common/CodeEditor/CodeEditor.svelte"
+  import {
+    EditorModes,
+  } from "components/common/CodeEditor"
+  import {
+    readableToRuntimeBinding,
+    runtimeToReadableBinding,
+    getDatasourceForProvider
+  } from "dataBinding"
+  import { tables, datasources, selectedScreen, selectedComponent } from "stores/builder"
+  import { getBindings } from "components/backend/DataTable/formula"
+
+  export let value
+  $: datasource = getDatasourceForProvider($selectedScreen, $selectedComponent)
+  $: tableId = datasource.tableId
+  $: table = $tables?.list?.find(table => table._id === tableId)
+  $: bindings = getBindings({ table });
+
+  $: readableBinding = runtimeToReadableBinding(bindings, value)
+
+  $: isJs = value?.startsWith?.("{{ js ")
+</script>
+
+<CodeEditor
+  readonly
+  readonlyLineNumbers
+  value={isJs ? decodeJSBinding(readableBinding) : readableBinding}
+  jsBindingWrapping={isJs}
+  mode={isJs ? EditorModes.JS :EditorModes.Handlebars}
+/>
+
+<style>
+</style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/JSONProperty.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/JSONProperty.svelte
index eadaea537b..f4787067ed 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/JSONProperty.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/JSONProperty.svelte
@@ -1,35 +1,12 @@
 <script>
-  export let name;
   export let value;
 </script>
 
-<div class="property">
-  <span class="propertyName">
-    <slot name="name">
-      {name}
-    </slot>
-  </span>
-  <span class="propertyDivider">-</span>
-  <pre class="pre propertyValue">
-    <slot>
-      {value}
-    </slot>
-  </pre>
-</div>
+<pre class="pre">
+  {value}
+</pre>
 
 <style>
-  .property {
-    margin-bottom: 12px;
-  }
-
-  .propertyName {
-    font-style: italic;
-  }
-
-  .propertyDivider {
-    padding: 4px;
-  }
-
   .pre {
     margin: 0;
     margin-top: 3px;
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/index.js b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/index.js
index 9761fd31aa..6c07b6eab9 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/index.js
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/index.js
@@ -1,5 +1,6 @@
 export { default as Subject } from "./Subject.svelte"
 export { default as Property } from "./Property.svelte"
 export { default as JSONProperty } from "./JSONProperty.svelte"
+export { default as BindingProperty } from "./BindingProperty.svelte"
 export { default as Section } from "./Section.svelte"
 export { default as Block } from "./Block.svelte"
diff --git a/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte b/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
index 0fd92477f3..36bc9e027e 100644
--- a/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
@@ -31,7 +31,6 @@
   $: options = Object.keys(schema || {})
   $: boundValue = getValidOptions(value, options)
 
-
   const getValidOptions = (selectedOptions, allOptions) => {
     // Fix the hardcoded default string value
     if (!Array.isArray(selectedOptions)) {
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index bacbf98bff..9afcbc5c6c 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -1638,8 +1638,11 @@
           "typeSupport": {
             "supported": ["number", "boolean"],
             "partialSupport": [
+              { "type": "longform", "message": "stringAsNumber" },
               { "type": "string", "message": "stringAsNumber" },
+              { "type": "bigint", "message": "stringAsNumber" },
               { "type": "options", "message": "stringAsNumber" },
+              { "type": "formula", "message": "stringAsNumber" },
               { "type": "datetime", "message": "dateAsNumber"}
             ],
             "unsupported": [

From 4d2109008b5cbad465ee4211af2f16d362a70876 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Mon, 15 Apr 2024 06:22:49 +0100
Subject: [PATCH 066/123] binding and json changes

---
 .../FieldContext/ExplanationModal/subjects/Column.svelte   | 6 +++---
 .../{BindingProperty.svelte => BindingValue.svelte}        | 7 +++++++
 .../components/{JSONProperty.svelte => JSONValue.svelte}   | 3 +++
 .../ExplanationModal/subjects/components/Property.svelte   | 1 +
 .../ExplanationModal/subjects/components/index.js          | 4 ++--
 5 files changed, 16 insertions(+), 5 deletions(-)
 rename packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/{BindingProperty.svelte => BindingValue.svelte} (89%)
 rename packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/{JSONProperty.svelte => JSONValue.svelte} (75%)

diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/Column.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/Column.svelte
index 038ecfe1b0..ea35e58d3a 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/Column.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/Column.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { BindingProperty, Block, Subject, JSONProperty, Property, Section }  from './components'
+  import { BindingValue, Block, Subject, JSONValue, Property, Section }  from './components'
 
   export let schema
   export let columnName
@@ -63,7 +63,7 @@
     {/each}
   {:else if schema.type === "json"}
     <Property name="Schema">
-      <JSONProperty
+      <JSONValue
         value={JSON.stringify(schema?.schema ?? {}, null, 2)}
       />
     </Property>
@@ -73,7 +73,7 @@
       value={schema?.formulaType === "dynamic" ? "Dynamic" : "Static"}
     />
     <Property name="Formula">
-    <BindingProperty
+    <BindingValue
       value={schema?.formula}
     />
     </Property>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/BindingProperty.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/BindingValue.svelte
similarity index 89%
rename from packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/BindingProperty.svelte
rename to packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/BindingValue.svelte
index 3e366928f4..ca01d71774 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/BindingProperty.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/BindingValue.svelte
@@ -26,6 +26,7 @@
   $: isJs = value?.startsWith?.("{{ js ")
 </script>
 
+<div class="editor">
 <CodeEditor
   readonly
   readonlyLineNumbers
@@ -33,6 +34,12 @@
   jsBindingWrapping={isJs}
   mode={isJs ? EditorModes.JS :EditorModes.Handlebars}
 />
+</div>
 
 <style>
+  .editor {
+    border: 1px solid var(--grey-2);
+    border-radius: 2px;
+    overflow: hidden;
+  }
 </style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/JSONProperty.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/JSONValue.svelte
similarity index 75%
rename from packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/JSONProperty.svelte
rename to packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/JSONValue.svelte
index f4787067ed..57b586bc20 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/JSONProperty.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/JSONValue.svelte
@@ -8,6 +8,9 @@
 
 <style>
   .pre {
+    border: 1px solid var(--grey-2);
+    border-radius: 2px;
+    overflow: hidden;
     margin: 0;
     margin-top: 3px;
     padding: 4px;
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Property.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Property.svelte
index d0f71c39b9..0569127f9f 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Property.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Property.svelte
@@ -21,6 +21,7 @@
 <style>
   .property {
     max-width: 100%;
+    margin-bottom: 5px;
   }
 
   .truncate {
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/index.js b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/index.js
index 6c07b6eab9..4fde1de91f 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/index.js
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/index.js
@@ -1,6 +1,6 @@
 export { default as Subject } from "./Subject.svelte"
 export { default as Property } from "./Property.svelte"
-export { default as JSONProperty } from "./JSONProperty.svelte"
-export { default as BindingProperty } from "./BindingProperty.svelte"
+export { default as JSONValue } from "./JSONValue.svelte"
+export { default as BindingValue } from "./BindingValue.svelte"
 export { default as Section } from "./Section.svelte"
 export { default as Block } from "./Block.svelte"

From 12d2982c67a8c50267eedd5078cf1cea4be4bb93 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Mon, 15 Apr 2024 07:10:46 +0100
Subject: [PATCH 067/123] nicer time

---
 .../ExplanationModal/index.svelte             |  2 +-
 .../ExplanationModal/subjects/Column.svelte   | 10 +++---
 .../subjects/DatesAsNumbers.svelte            | 35 +++++++++++++++++--
 .../subjects/components/Property.svelte       |  6 ++--
 4 files changed, 42 insertions(+), 11 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/index.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/index.svelte
index 08fb5ff1c4..3dd64cfc71 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/index.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/index.svelte
@@ -36,6 +36,6 @@
 <style>
   .explanationModalContent {
     max-width: 300px;
-    padding: 16px 12px 6px;
+    padding: 16px 12px 0px;
   }
 </style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/Column.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/Column.svelte
index ea35e58d3a..47100b91fc 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/Column.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/Column.svelte
@@ -68,15 +68,15 @@
       />
     </Property>
   {:else if schema.type === "formula"}
+    <Property name="Formula">
+      <BindingValue
+        value={schema?.formula}
+      />
+    </Property>
     <Property
       name="Formula type"
       value={schema?.formulaType === "dynamic" ? "Dynamic" : "Static"}
     />
-    <Property name="Formula">
-    <BindingValue
-      value={schema?.formula}
-    />
-    </Property>
   {/if}
   <Property
     name="Required"
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/DatesAsNumbers.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/DatesAsNumbers.svelte
index 3a51eace80..31d0c980ee 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/DatesAsNumbers.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/DatesAsNumbers.svelte
@@ -1,9 +1,40 @@
 <script>
-  import { Subject, Section } from './components'
+  import { onMount } from "svelte"
+  import { Block, Subject, Section } from './components'
+
+  let timestamp = Date.now();
+
+  onMount(() => {
+    let run = true;
+
+    const updateTimeStamp = () => {
+      timestamp = Date.now();
+      console.log(timestamp);
+      if (run) {
+        setTimeout(updateTimeStamp, 200)
+      }
+    }
+
+    updateTimeStamp();
+
+    return () => {
+      run = false;
+    }
+  })
 </script>
 
 <Subject heading="Dates as Numbers">
   <Section>
-    A date can be used in place of a numeric value, but it will be parsed as a UNIX epoch timestamp, which is the number of milliseconds since Jan 1st 1970.
+    A date can be used in place of a numeric value, but it will be parsed as a UNIX epoch timestamp, which is the number of milliseconds since Jan 1st 1970. A more recent Date/Time will be a higher number.
+  </Section>
+
+  <Section>
+    Examples:
+    <br />
+    1st Jan 2000: <Block>946684800000</Block>
+    <br />
+    1st Jan 2020: <Block>1577836800000</Block>
+    <br />
+    Now: <Block>{timestamp}</Block>
   </Section>
 </Subject>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Property.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Property.svelte
index 0569127f9f..0f958fa66f 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Property.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Property.svelte
@@ -21,7 +21,7 @@
 <style>
   .property {
     max-width: 100%;
-    margin-bottom: 5px;
+    margin-bottom: 8px;
   }
 
   .truncate {
@@ -31,13 +31,13 @@
   }
 
   .propertyName {
-    font-style: italic;
+    font-weight: 600;
     flex-shrink: 0;
   }
 
 
   .propertyDivider {
-    padding: 0 6px;
+    padding: 0 2px;
     flex-shrink: 0;
   }
 

From 585b4e07adf123d8d89674d52b38b4fddc9553be Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Mon, 15 Apr 2024 07:27:10 +0100
Subject: [PATCH 068/123] users and relationships

---
 .../ExplanationModal/subjects/Column.svelte   | 22 +++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/Column.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/Column.svelte
index 47100b91fc..d717a15def 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/Column.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/Column.svelte
@@ -1,6 +1,10 @@
 <script>
+  import { tables } from "stores/builder"
   import { BindingValue, Block, Subject, JSONValue, Property, Section }  from './components'
 
+  $: {
+    console.log($tables)
+  }
   export let schema
   export let columnName
 </script>
@@ -77,6 +81,24 @@
       name="Formula type"
       value={schema?.formulaType === "dynamic" ? "Dynamic" : "Static"}
     />
+  {:else if schema.type === "link"}
+    <Property
+      name="Type"
+      value={schema?.relationshipType}
+    />
+    <Property
+      name="Related Table"
+      value={$tables?.list?.find(table => table._id === schema?.tableId)?.name}
+    />
+    <Property
+      name="Column in Related Table"
+      value={schema?.fieldName}
+    />
+  {:else if schema.type === "bb_reference"}
+    <Property
+      name="Allow multiple users"
+      value={schema?.relationshipType === "many-to-many" ? "Yes" : "No"}
+    />
   {/if}
   <Property
     name="Required"

From 70ac56522fd7faab380cf0f7cd600cc2104e0fad Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Mon, 15 Apr 2024 07:37:39 +0100
Subject: [PATCH 069/123] nicer dates

---
 packages/bbui/src/Tooltip/Context.svelte          |  2 ++
 .../ExplanationModal/subjects/Column.svelte       | 15 +++++++++++++--
 .../subjects/components/Property.svelte           |  2 +-
 .../controls/FieldContext/lines/Column.svelte     |  1 +
 4 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/packages/bbui/src/Tooltip/Context.svelte b/packages/bbui/src/Tooltip/Context.svelte
index d5afad9fa2..10f050c7b6 100644
--- a/packages/bbui/src/Tooltip/Context.svelte
+++ b/packages/bbui/src/Tooltip/Context.svelte
@@ -157,6 +157,8 @@
 
     border-radius: 5px;
     box-sizing: border-box;
+    opacity: 0;
+    overflow: hidden;
     border: 1px solid var(--grey-4);
 
     transition: width 300ms ease-in, height 300ms ease-in, top 300ms ease-in, left 300ms ease-in;
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/Column.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/Column.svelte
index d717a15def..f8363bdcd4 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/Column.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/Column.svelte
@@ -7,6 +7,17 @@
   }
   export let schema
   export let columnName
+
+  const parseDate = (isoString) => {
+    if ([null, undefined, ""].includes(isoString)) {
+      return "None"
+    }
+
+    const epoch = Date.parse(isoString);
+    const date = new Date(epoch);
+
+    return date.toLocaleString();
+  }
 </script>
 
 
@@ -23,11 +34,11 @@
   {:else if schema.type === "datetime"}
     <Property
       name="Earliest"
-      value={schema?.constraints?.datetime?.earliest === "" ? "None" : schema?.constraints?.datetime?.earliest}
+      value={parseDate(schema?.constraints?.datetime?.earliest)}
     />
     <Property
       name="Latest"
-      value={schema?.constraints?.datetime?.latest === "" ? "None" : schema?.constraints?.datetime?.latest}
+      value={parseDate(schema?.constraints?.datetime?.latest)}
     />
     <Property
       name="Ignore time zones"
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Property.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Property.svelte
index 0f958fa66f..fd62584a45 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Property.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Property.svelte
@@ -37,7 +37,7 @@
 
 
   .propertyDivider {
-    padding: 0 2px;
+    padding: 0 4px;
     flex-shrink: 0;
   }
 
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/lines/Column.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/lines/Column.svelte
index 4399f3e52b..d28748d8e0 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/lines/Column.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/lines/Column.svelte
@@ -38,6 +38,7 @@
 <Line noWrap>
   <InfoWord
     on:mouseenter={() => setExplanationSubject(subjects.column)}
+    on:mouseleave={() => setExplanationSubject(subjects.none)}
     href={tableHref}
     text={columnName}
   />

From a806bd87bfa6b50fb3b6e2d4e83245dd665e24b7 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Mon, 15 Apr 2024 08:37:30 +0100
Subject: [PATCH 070/123] wip

---
 .../ExplanationModal/subjects/StringsAsNumbers.svelte     | 4 ++--
 packages/client/src/components/app/charts/PieChart.svelte | 8 +++++++-
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/StringsAsNumbers.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/StringsAsNumbers.svelte
index 0accdcd197..f2148a6255 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/StringsAsNumbers.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/StringsAsNumbers.svelte
@@ -4,7 +4,7 @@
 
 <Subject heading="Text as Numbers">
   <Section>
-    Text can be used in place of numbers in certain scenarios, but care needs to be taken, as text that doesn't contain a strictly base-ten, non-decimal value may lead to unexpected behavior.
+    Text can be used in place of numbers in certain scenarios, but care needs to be taken, as text that doesn't contain a strictly base-ten integer or decimal value may lead to unexpected behavior.
   </Section>
 
   <Section>
@@ -18,7 +18,7 @@
     <br />
     <Block>"100 million"</Block>{" -> "}<Block>100</Block>
     <br />
-    <Block>"100.9"</Block>{" -> "}<Block>100</Block>
+    <Block>"100.9"</Block>{" -> "}<Block>100.9</Block>
     <br />
     <Block>"One hundred"</Block>{" -> "}<Block>Error</Block>
   </Section>
diff --git a/packages/client/src/components/app/charts/PieChart.svelte b/packages/client/src/components/app/charts/PieChart.svelte
index 8cb7317d94..feaa0bcab9 100644
--- a/packages/client/src/components/app/charts/PieChart.svelte
+++ b/packages/client/src/components/app/charts/PieChart.svelte
@@ -80,7 +80,13 @@
       .colors(customColor ? colors : null)
 
     // Add data if valid datasource
-    const series = data.map(row => parseFloat(row[valueColumn]))
+    const series = data.map(row => {
+      if (schema[valueColumn].type === 'datetime') {
+        return Date.parse(row[valueColumn])
+      }
+
+      return parseFloat(row[valueColumn])
+    })
     const labels = data.map(row => row[labelColumn])
     builder = builder.series(series).labels(labels)
 

From 56f7dd33c7041eb3cf27b9cf6cdf12868f5fb39c Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Mon, 15 Apr 2024 08:56:56 +0100
Subject: [PATCH 071/123] wip

---
 packages/client/manifest.json                            | 9 ++++-----
 .../client/src/components/app/blocks/ChartBlock.svelte   | 4 ++--
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 9afcbc5c6c..1192a93375 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -5284,7 +5284,7 @@
           {
             "type": "field",
             "label": "Data column",
-            "key": "valueColumn",
+            "key": "valueColumns",
             "dependsOn": "dataSource",
             "required": true
           }
@@ -5309,7 +5309,7 @@
           {
             "type": "field",
             "label": "Data column",
-            "key": "valueColumn",
+            "key": "valueColumns",
             "dependsOn": "dataSource",
             "required": true
           }
@@ -5381,7 +5381,7 @@
           {
             "type": "field",
             "label": "Value column",
-            "key": "valueColumn",
+            "key": "valueColumns",
             "dependsOn": "dataSource",
             "required": true
           },
@@ -5533,8 +5533,7 @@
             "type": "field",
             "label": "Date column",
             "key": "dateColumn",
-            "dependsOn": "dataSource",
-            "required": true
+            "dependsOn": "dataSource"
           },
           {
             "type": "field",
diff --git a/packages/client/src/components/app/blocks/ChartBlock.svelte b/packages/client/src/components/app/blocks/ChartBlock.svelte
index 2767c44b8e..9ea054391b 100644
--- a/packages/client/src/components/app/blocks/ChartBlock.svelte
+++ b/packages/client/src/components/app/blocks/ChartBlock.svelte
@@ -24,7 +24,7 @@
   export let width
 
   // Pie/Donut
-  export let valueColumn
+  // export let valueColumn
 
   // Bar
   export let stacked
@@ -78,7 +78,7 @@
           width,
           title: chartTitle,
           labelColumn,
-          valueColumn,
+          valueColumn: valueColumns,
           valueColumns,
           palette,
           dataLabels,

From 4b52508625cc3b2b2304742defa16f12999d6d6f Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Tue, 16 Apr 2024 10:27:52 +0100
Subject: [PATCH 072/123] validation issue half working, fixing some bugs with
 context menu

---
 .../FieldContext/ExplanationModal/index.svelte        |  2 +-
 .../ExplanationModal/subjects/DatesAsNumbers.svelte   |  2 +-
 packages/client/manifest.json                         |  9 +++++----
 packages/client/src/components/Component.svelte       | 11 ++++++++++-
 .../src/components/app/blocks/ChartBlock.svelte       |  4 ++--
 .../client/src/components/app/charts/BarChart.svelte  |  2 +-
 6 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/index.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/index.svelte
index 3dd64cfc71..7c6d886548 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/index.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/index.svelte
@@ -36,6 +36,6 @@
 <style>
   .explanationModalContent {
     max-width: 300px;
-    padding: 16px 12px 0px;
+    padding: 16px 12px 2px;
   }
 </style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/DatesAsNumbers.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/DatesAsNumbers.svelte
index 31d0c980ee..0c851d77a2 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/DatesAsNumbers.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/DatesAsNumbers.svelte
@@ -25,7 +25,7 @@
 
 <Subject heading="Dates as Numbers">
   <Section>
-    A date can be used in place of a numeric value, but it will be parsed as a UNIX epoch timestamp, which is the number of milliseconds since Jan 1st 1970. A more recent Date/Time will be a higher number.
+    A date can be used in place of a numeric value, but it will be parsed as a <Block>UNIX epoch</Block> timestamp, which is the number of milliseconds since Jan 1st 1970. A more recent moment in time will be a higher number.
   </Section>
 
   <Section>
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 1192a93375..9afcbc5c6c 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -5284,7 +5284,7 @@
           {
             "type": "field",
             "label": "Data column",
-            "key": "valueColumns",
+            "key": "valueColumn",
             "dependsOn": "dataSource",
             "required": true
           }
@@ -5309,7 +5309,7 @@
           {
             "type": "field",
             "label": "Data column",
-            "key": "valueColumns",
+            "key": "valueColumn",
             "dependsOn": "dataSource",
             "required": true
           }
@@ -5381,7 +5381,7 @@
           {
             "type": "field",
             "label": "Value column",
-            "key": "valueColumns",
+            "key": "valueColumn",
             "dependsOn": "dataSource",
             "required": true
           },
@@ -5533,7 +5533,8 @@
             "type": "field",
             "label": "Date column",
             "key": "dateColumn",
-            "dependsOn": "dataSource"
+            "dependsOn": "dataSource",
+            "required": true
           },
           {
             "type": "field",
diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 9581ffa5d4..323d196395 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -273,8 +273,9 @@
     staticSettings = instanceSettings.staticSettings
     dynamicSettings = instanceSettings.dynamicSettings
 
+    console.log(settingsDefinition, settingsDefinitionMap);
     // Check if we have any missing required settings
-    missingRequiredSettings = settingsDefinition.filter(setting => {
+    missingRequiredSettings = Object.values(settingsDefinitionMap).filter(setting => {
       let empty = instance[setting.key] == null || instance[setting.key] === ""
       let missing = setting.required && empty
 
@@ -283,13 +284,21 @@
         const dependsOnKey = setting.dependsOn.setting || setting.dependsOn
         const dependsOnValue = setting.dependsOn.value
         const realDependentValue = instance[dependsOnKey]
+        let foo = false && instance._component === "@budibase/standard-components/chartblock" && setting.type === "multifield"
+        if (foo) {
+          console.log(setting)
+          console.log(instance);
+        }
         if (dependsOnValue === undefined && realDependentValue) {
+          if (foo) console.log("in 0");
           return missing
         }
         if (dependsOnValue == null && realDependentValue == null) {
+          if (foo) console.log("in 1");
           return false
         }
         if (dependsOnValue !== realDependentValue) {
+          if (foo) console.log("in 2");
           return false
         }
       }
diff --git a/packages/client/src/components/app/blocks/ChartBlock.svelte b/packages/client/src/components/app/blocks/ChartBlock.svelte
index 9ea054391b..2767c44b8e 100644
--- a/packages/client/src/components/app/blocks/ChartBlock.svelte
+++ b/packages/client/src/components/app/blocks/ChartBlock.svelte
@@ -24,7 +24,7 @@
   export let width
 
   // Pie/Donut
-  // export let valueColumn
+  export let valueColumn
 
   // Bar
   export let stacked
@@ -78,7 +78,7 @@
           width,
           title: chartTitle,
           labelColumn,
-          valueColumn: valueColumns,
+          valueColumn,
           valueColumns,
           palette,
           dataLabels,
diff --git a/packages/client/src/components/app/charts/BarChart.svelte b/packages/client/src/components/app/charts/BarChart.svelte
index 532ce11306..764394316a 100644
--- a/packages/client/src/components/app/charts/BarChart.svelte
+++ b/packages/client/src/components/app/charts/BarChart.svelte
@@ -111,7 +111,7 @@
         if (!useDates) {
           const value = get(row, column);
 
-          if (schema[column].type === 'datetime') {
+          if (schema?.[column]?.type === 'datetime') {
             return Date.parse(value)
           }
 

From 7b52811f102d1573051e3b3447d15a64a85e4d5a Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Tue, 16 Apr 2024 11:00:23 +0100
Subject: [PATCH 073/123] wip

---
 packages/bbui/src/Tooltip/Context.svelte      |  2 -
 .../subjects/ScalarJsonOnly.svelte            | 40 ++++++++++---------
 .../subjects/components/Block.svelte          | 16 +++++++-
 .../subjects/components/Section.svelte        |  4 ++
 .../lines/JSONPrimitivesOnly.svelte           |  1 -
 .../FieldContext/typography/Line.svelte       |  2 +-
 6 files changed, 41 insertions(+), 24 deletions(-)

diff --git a/packages/bbui/src/Tooltip/Context.svelte b/packages/bbui/src/Tooltip/Context.svelte
index 10f050c7b6..d5afad9fa2 100644
--- a/packages/bbui/src/Tooltip/Context.svelte
+++ b/packages/bbui/src/Tooltip/Context.svelte
@@ -157,8 +157,6 @@
 
     border-radius: 5px;
     box-sizing: border-box;
-    opacity: 0;
-    overflow: hidden;
     border: 1px solid var(--grey-4);
 
     transition: width 300ms ease-in, height 300ms ease-in, top 300ms ease-in, left 300ms ease-in;
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/ScalarJsonOnly.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/ScalarJsonOnly.svelte
index c6e3b5aabf..2690607cf3 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/ScalarJsonOnly.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/ScalarJsonOnly.svelte
@@ -16,7 +16,7 @@
       }
 
       if (["string", "number", "boolean"].includes(schema.type)) {
-        newScalarDescendants.push(path.join("."))
+        newScalarDescendants.push({ name: path.join("."), type: schema.type })
       } else if (schema.type === "json") {
         Object.entries(schema.schema ?? {}).forEach(([childName, childSchema]) => 
         getScalarDescendantFromSchema([...path, childName], childSchema))
@@ -39,24 +39,26 @@
 
   {#if scalarDescendants.length > 0}
     <Section>
-      Examples of scalar descendants of this object are:
-      {#if scalarDescendants[0]}
-        <Block>{scalarDescendants[0]}</Block>
-      {/if}
-      {#if scalarDescendants.length === 2}
-        {" and "}
-      {:else if scalarDescendants.length === 3}
-        {", "}
-      {/if}
-      {#if scalarDescendants[1]}
-        <Block>{scalarDescendants[1]}</Block>
-      {/if}
-      {#if scalarDescendants.length === 3}
-        {" and "}
-      {/if}
-      {#if scalarDescendants[2]}
-        <Block>{scalarDescendants[2]}</Block>
-      {/if}
+      Examples scalar descendants of this object:
+      <br />
+
+      {#each scalarDescendants as descendant}
+        <div class="example">
+          <Block truncate>{descendant.name}</Block><span class="separator">-</span><Block truncate noShrink>{descendant.type}</Block>
+          </div>
+      {/each}
     </Section>
   {/if}
 </Subject>
+
+<style>
+  .example {
+    display: flex;
+    margin-bottom: 2px;
+  }
+
+  .separator {
+    margin: 0 4px;
+    flex-shrink: 0;
+  }
+</style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Block.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Block.svelte
index b2e2d8330c..761abfbdc8 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Block.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Block.svelte
@@ -1,4 +1,8 @@
-<span class="block">
+<script>
+  export let truncate = false
+  export let noShrink = false
+</script>
+<span class:truncate class:noShrink class="block">
   <slot />
 </span>
 
@@ -11,4 +15,14 @@
     color: var(--ink);
     word-break: break-word;
   }
+
+  .truncate {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .noShrink {
+    flex-shrink: 0;
+  }
 </style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Section.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Section.svelte
index 486e111725..3bc3ec945d 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Section.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Section.svelte
@@ -8,4 +8,8 @@
     margin-bottom: 13px;
     overflow: hidden;
   }
+
+  .section :global(ul) {
+    padding-left: 24px;
+  }
 </style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/lines/JSONPrimitivesOnly.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/lines/JSONPrimitivesOnly.svelte
index ee4b258b80..5b27a3142a 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/lines/JSONPrimitivesOnly.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/lines/JSONPrimitivesOnly.svelte
@@ -9,7 +9,6 @@
 <Line>
   <InfoWord
   on:mouseenter={() => setExplanationSubject(subjects.scalarJsonOnly)}
-  on:mouseleave={() => setExplanationSubject(subjects.none)}
 >Scalar JSON values</InfoWord>
   <Text
     value=" can be used with this component if their individual types are supported"
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/typography/Line.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Line.svelte
index 5a98f8026c..31e1cc3c87 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/typography/Line.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Line.svelte
@@ -31,7 +31,7 @@
     align-items: center;
     display: flex;
     flex-wrap: wrap;
-    row-gap: 4px;
+    row-gap: 3px;
   }
 
   .noWrap {

From feef3450b7abe50d41cbabc3f36cf3c344be9633 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Wed, 17 Apr 2024 07:54:53 +0100
Subject: [PATCH 074/123] example section

---
 .../subjects/DatesAsNumbers.svelte            | 30 ++++++++----
 .../subjects/ScalarJsonOnly.svelte            | 20 +++-----
 .../subjects/StringsAsNumbers.svelte          | 46 ++++++++++++-------
 .../subjects/components/Block.svelte          |  1 +
 .../subjects/components/ExampleLine.svelte    | 12 +++++
 .../subjects/components/ExampleSection.svelte | 31 +++++++++++++
 .../subjects/components/Section.svelte        |  4 --
 .../subjects/components/index.js              |  2 +
 .../lines/JSONPrimitivesOnly.svelte           |  1 +
 9 files changed, 104 insertions(+), 43 deletions(-)
 create mode 100644 packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/ExampleLine.svelte
 create mode 100644 packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/ExampleSection.svelte

diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/DatesAsNumbers.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/DatesAsNumbers.svelte
index 0c851d77a2..3effc88640 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/DatesAsNumbers.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/DatesAsNumbers.svelte
@@ -1,6 +1,6 @@
 <script>
   import { onMount } from "svelte"
-  import { Block, Subject, Section } from './components'
+  import { ExampleSection, ExampleLine, Block, Subject, Section } from './components'
 
   let timestamp = Date.now();
 
@@ -28,13 +28,23 @@
     A date can be used in place of a numeric value, but it will be parsed as a <Block>UNIX epoch</Block> timestamp, which is the number of milliseconds since Jan 1st 1970. A more recent moment in time will be a higher number.
   </Section>
 
-  <Section>
-    Examples:
-    <br />
-    1st Jan 2000: <Block>946684800000</Block>
-    <br />
-    1st Jan 2020: <Block>1577836800000</Block>
-    <br />
-    Now: <Block>{timestamp}</Block>
-  </Section>
+    <ExampleSection
+      heading="Examples:"
+    >
+      <ExampleLine>
+        1st Jan 2000<span class="separator">: </span><Block>946684800000</Block>
+      </ExampleLine>
+      <ExampleLine>
+        1st Jan 2020<span class="separator">: </span><Block>1577836800000</Block>
+      </ExampleLine>
+      <ExampleLine>
+        Now<span class="separator">:</span> <Block>{timestamp}</Block>
+      </ExampleLine>
+    </ExampleSection>
 </Subject>
+
+<style>
+  .separator {
+    margin-right: 5px;
+  }
+</style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/ScalarJsonOnly.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/ScalarJsonOnly.svelte
index 2690607cf3..962f007daa 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/ScalarJsonOnly.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/ScalarJsonOnly.svelte
@@ -1,6 +1,6 @@
 <script>
   import { Body } from "@budibase/bbui"
-  import { Block, Subject, Section } from './components'
+  import { ExampleSection, ExampleLine, Block, Subject, Section } from './components'
 
   export let schema
   export let columnName
@@ -38,25 +38,19 @@
   </Section>
 
   {#if scalarDescendants.length > 0}
-    <Section>
-      Examples scalar descendants of this object:
-      <br />
-
+    <ExampleSection
+      heading="Examples scalar descendants of this object:"
+    >
       {#each scalarDescendants as descendant}
-        <div class="example">
+        <ExampleLine>
           <Block truncate>{descendant.name}</Block><span class="separator">-</span><Block truncate noShrink>{descendant.type}</Block>
-          </div>
+        </ExampleLine>
       {/each}
-    </Section>
+    </ExampleSection>
   {/if}
 </Subject>
 
 <style>
-  .example {
-    display: flex;
-    margin-bottom: 2px;
-  }
-
   .separator {
     margin: 0 4px;
     flex-shrink: 0;
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/StringsAsNumbers.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/StringsAsNumbers.svelte
index f2148a6255..0a466bf193 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/StringsAsNumbers.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/StringsAsNumbers.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Block, Subject, Section } from './components'
+  import { ExampleSection, ExampleLine, Block, Subject, Section } from './components'
 </script>
 
 <Subject heading="Text as Numbers">
@@ -7,19 +7,33 @@
     Text can be used in place of numbers in certain scenarios, but care needs to be taken, as text that doesn't contain a strictly base-ten integer or decimal value may lead to unexpected behavior.
   </Section>
 
-  <Section>
-    Examples:
-    <br />
-    <Block>"100"</Block>{" -> "}<Block>100</Block>
-    <br />
-    <Block>"100k"</Block>{" -> "}<Block>100</Block>
-    <br />
-    <Block>"100,000"</Block>{" -> "}<Block>100</Block>
-    <br />
-    <Block>"100 million"</Block>{" -> "}<Block>100</Block>
-    <br />
-    <Block>"100.9"</Block>{" -> "}<Block>100.9</Block>
-    <br />
-    <Block>"One hundred"</Block>{" -> "}<Block>Error</Block>
-  </Section>
+  <ExampleSection
+    heading="Examples:"
+  >
+    <ExampleLine>
+      <Block>"100"</Block><span class="separator">{"->"}</span><Block>100</Block>
+    </ExampleLine>
+    <ExampleLine>
+      <Block>"100k"</Block><span class="separator">{"->"}</span><Block>100</Block>
+    </ExampleLine>
+    <ExampleLine>
+      <Block>"100,000"</Block><span class="separator">{"->"}</span><Block>100</Block>
+    </ExampleLine>
+    <ExampleLine>
+      <Block>"100 million"</Block><span class="separator">{"->"}</span><Block>100</Block>
+    </ExampleLine>
+    <ExampleLine>
+      <Block>"100.9"</Block><span class="separator">{"->"}</span><Block>100.9</Block>
+    </ExampleLine>
+    <ExampleLine>
+      <Block>"One hundred"</Block><span class="separator">{"->"}</span><Block>Error</Block>
+    </ExampleLine>
+  </ExampleSection>
 </Subject>
+
+<style>
+  .separator {
+    margin: 0 4px;
+    flex-shrink: 0;
+  }
+</style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Block.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Block.svelte
index 761abfbdc8..6ee93ff1a6 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Block.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Block.svelte
@@ -2,6 +2,7 @@
   export let truncate = false
   export let noShrink = false
 </script>
+
 <span class:truncate class:noShrink class="block">
   <slot />
 </span>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/ExampleLine.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/ExampleLine.svelte
new file mode 100644
index 0000000000..f72417354c
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/ExampleLine.svelte
@@ -0,0 +1,12 @@
+<li>
+<div class="exampleLine">
+  <slot />
+</div>
+</li>
+
+<style>
+  .exampleLine {
+    display: flex;
+    margin-bottom: 2px;
+  }
+</style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/ExampleSection.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/ExampleSection.svelte
new file mode 100644
index 0000000000..fa5fd8e081
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/ExampleSection.svelte
@@ -0,0 +1,31 @@
+<script>
+  import Section from "./Section.svelte"
+  export let heading
+</script>
+
+<Section>
+  <span class="exampleSectionHeading">
+    <slot name="heading">
+      {heading}
+    </slot>
+  </span>
+  <ul>
+    <slot />
+  </ul>
+</Section>
+
+<style>
+  .exampleSectionHeading {
+    display: inline-block;
+    margin-bottom: 2px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+  }
+
+  ul {
+    padding: 0 0 0 23px;
+    margin: 0;
+  }
+</style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Section.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Section.svelte
index 3bc3ec945d..486e111725 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Section.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Section.svelte
@@ -8,8 +8,4 @@
     margin-bottom: 13px;
     overflow: hidden;
   }
-
-  .section :global(ul) {
-    padding-left: 24px;
-  }
 </style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/index.js b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/index.js
index 4fde1de91f..d174f4d6cc 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/index.js
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/index.js
@@ -4,3 +4,5 @@ export { default as JSONValue } from "./JSONValue.svelte"
 export { default as BindingValue } from "./BindingValue.svelte"
 export { default as Section } from "./Section.svelte"
 export { default as Block } from "./Block.svelte"
+export { default as ExampleSection } from "./ExampleSection.svelte"
+export { default as ExampleLine } from "./ExampleLine.svelte"
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/lines/JSONPrimitivesOnly.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/lines/JSONPrimitivesOnly.svelte
index 5b27a3142a..ee4b258b80 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/lines/JSONPrimitivesOnly.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/lines/JSONPrimitivesOnly.svelte
@@ -9,6 +9,7 @@
 <Line>
   <InfoWord
   on:mouseenter={() => setExplanationSubject(subjects.scalarJsonOnly)}
+  on:mouseleave={() => setExplanationSubject(subjects.none)}
 >Scalar JSON values</InfoWord>
   <Text
     value=" can be used with this component if their individual types are supported"

From 7890b4e6cb57b0683a262efd3c1b84e600cea2a2 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Wed, 17 Apr 2024 10:09:31 +0100
Subject: [PATCH 075/123] wip

---
 packages/bbui/src/Tooltip/Context.svelte      |  2 +
 .../settings/controls/MultiFieldSelect.svelte |  2 -
 .../client/src/components/Component.svelte    | 39 ++++++++++++-------
 packages/client/src/utils/componentProps.js   |  4 +-
 4 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/packages/bbui/src/Tooltip/Context.svelte b/packages/bbui/src/Tooltip/Context.svelte
index d5afad9fa2..f25abc6d6b 100644
--- a/packages/bbui/src/Tooltip/Context.svelte
+++ b/packages/bbui/src/Tooltip/Context.svelte
@@ -158,6 +158,8 @@
     border-radius: 5px;
     box-sizing: border-box;
     border: 1px solid var(--grey-4);
+    opacity: 0;
+    pointer-events: none;
 
     transition: width 300ms ease-in, height 300ms ease-in, top 300ms ease-in, left 300ms ease-in;
   }
diff --git a/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte b/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
index 36bc9e027e..2c043c1da2 100644
--- a/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
@@ -96,8 +96,6 @@
   const onOptionMouseleave = (e, option) => {
     updateTooltip(e, null);
   }
-
-  $: console.log(schema)
 </script>
 
 <Multiselect
diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 323d196395..05068edad6 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -273,9 +273,8 @@
     staticSettings = instanceSettings.staticSettings
     dynamicSettings = instanceSettings.dynamicSettings
 
-    console.log(settingsDefinition, settingsDefinitionMap);
     // Check if we have any missing required settings
-    missingRequiredSettings = Object.values(settingsDefinitionMap).filter(setting => {
+    missingRequiredSettings = settingsDefinition.filter(setting => {
       let empty = instance[setting.key] == null || instance[setting.key] === ""
       let missing = setting.required && empty
 
@@ -284,22 +283,32 @@
         const dependsOnKey = setting.dependsOn.setting || setting.dependsOn
         const dependsOnValue = setting.dependsOn.value
         const realDependentValue = instance[dependsOnKey]
-        let foo = false && instance._component === "@budibase/standard-components/chartblock" && setting.type === "multifield"
+
+        const sectionDependsOnKey = setting.sectionDependsOn?.setting || setting.sectionDependsOn
+        const sectionDependsOnValue = setting.sectionDependsOn?.value
+        const sectionRealDependentValue = instance[sectionDependsOnKey]
+
+
+        let foo =  instance._component === "@budibase/standard-components/chartblock" && setting.type === "multifield"
+        if (dependsOnValue == null && realDependentValue == null) {
+          return false
+        }
+        if (dependsOnValue != null && dependsOnValue !== realDependentValue) {
+          return false
+        }
+
+        if (sectionDependsOnValue == null && sectionRealDependentValue == null) {
+          return false
+        }
+        if (sectionDependsOnValue != null && sectionDependsOnValue !== sectionRealDependentValue) {
+          return false
+        }
         if (foo) {
           console.log(setting)
           console.log(instance);
-        }
-        if (dependsOnValue === undefined && realDependentValue) {
-          if (foo) console.log("in 0");
-          return missing
-        }
-        if (dependsOnValue == null && realDependentValue == null) {
-          if (foo) console.log("in 1");
-          return false
-        }
-        if (dependsOnValue !== realDependentValue) {
-          if (foo) console.log("in 2");
-          return false
+          console.log(dependsOnValue);
+          console.log(realDependentValue);
+          console.log("")
         }
       }
 
diff --git a/packages/client/src/utils/componentProps.js b/packages/client/src/utils/componentProps.js
index efe69938e7..9fe09968cf 100644
--- a/packages/client/src/utils/componentProps.js
+++ b/packages/client/src/utils/componentProps.js
@@ -101,14 +101,14 @@ export const propsUseBinding = (props, bindingKey) => {
 /**
  * Gets the definition of this component's settings from the manifest
  */
-export const getSettingsDefinition = definition => {
+export const getSettingsDefinition = (definition) => {
   if (!definition) {
     return []
   }
   let settings = []
   definition.settings?.forEach(setting => {
     if (setting.section) {
-      settings = settings.concat(setting.settings || [])
+      settings = settings.concat((setting.settings || [])?.map(childSetting => ({ ...childSetting, sectionDependsOn: setting.dependsOn })))
     } else {
       settings.push(setting)
     }

From 1a1a417d94a72f4abfefaab8530c88e795019dac Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Wed, 17 Apr 2024 21:43:33 +0100
Subject: [PATCH 076/123] hmm

---
 packages/client/package.json                  |  2 +-
 .../client/src/components/Component.svelte    |  8 ---
 .../components/app/charts/ApexChart.svelte    |  3 +
 .../app/charts/ApexOptionsBuilder.js          |  3 +-
 .../src/components/app/charts/BarChart.svelte | 57 +++++++++----------
 yarn.lock                                     |  2 +-
 6 files changed, 32 insertions(+), 43 deletions(-)

diff --git a/packages/client/package.json b/packages/client/package.json
index a576b70ebc..1bbf7319cb 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -32,7 +32,7 @@
     "@spectrum-css/tag": "^3.1.4",
     "@spectrum-css/typography": "^3.0.2",
     "@spectrum-css/vars": "^3.0.1",
-    "apexcharts": "^3.45.2",
+    "apexcharts": "^3.48.0",
     "dayjs": "^1.10.8",
     "downloadjs": "1.4.7",
     "html5-qrcode": "^2.2.1",
diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 05068edad6..de9ed4a7b8 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -289,7 +289,6 @@
         const sectionRealDependentValue = instance[sectionDependsOnKey]
 
 
-        let foo =  instance._component === "@budibase/standard-components/chartblock" && setting.type === "multifield"
         if (dependsOnValue == null && realDependentValue == null) {
           return false
         }
@@ -303,13 +302,6 @@
         if (sectionDependsOnValue != null && sectionDependsOnValue !== sectionRealDependentValue) {
           return false
         }
-        if (foo) {
-          console.log(setting)
-          console.log(instance);
-          console.log(dependsOnValue);
-          console.log(realDependentValue);
-          console.log("")
-        }
       }
 
       return missing
diff --git a/packages/client/src/components/app/charts/ApexChart.svelte b/packages/client/src/components/app/charts/ApexChart.svelte
index 411774c353..0583652ad9 100644
--- a/packages/client/src/components/app/charts/ApexChart.svelte
+++ b/packages/client/src/components/app/charts/ApexChart.svelte
@@ -8,6 +8,9 @@
   const component = getContext("component")
 
   export let options
+  $: {
+    console.log(options);
+  }
   /*
   export let invalid = false
 
diff --git a/packages/client/src/components/app/charts/ApexOptionsBuilder.js b/packages/client/src/components/app/charts/ApexOptionsBuilder.js
index afdc3f780b..bd3146acaa 100644
--- a/packages/client/src/components/app/charts/ApexOptionsBuilder.js
+++ b/packages/client/src/components/app/charts/ApexOptionsBuilder.js
@@ -1,7 +1,7 @@
 export class ApexOptionsBuilder {
   constructor() {
     this.formatters = {
-      ["Default"]: val => (isNaN(val) ? val : Math.round(val * 100) / 100),
+      ["Default"]: val => val,
       ["Thousands"]: val => `${Math.round(val / 1000)}K`,
       ["Millions"]: val => `${Math.round(val / 1000000)}M`,
     }
@@ -166,7 +166,6 @@ export class ApexOptionsBuilder {
   }
 
   candleStick() {
-    //this.options.xaxis.convertedCatToNumeric = false;
     this.options.xaxis.labels.formatter = (epoch) => {
       return (new Date(epoch)).toDateString();
     }
diff --git a/packages/client/src/components/app/charts/BarChart.svelte b/packages/client/src/components/app/charts/BarChart.svelte
index 764394316a..b9586b280e 100644
--- a/packages/client/src/components/app/charts/BarChart.svelte
+++ b/packages/client/src/components/app/charts/BarChart.svelte
@@ -95,52 +95,47 @@
       .colors(customColor ? colors : null)
 
     // Add data
-    let useDates = false
     if (schema[labelColumn]) {
       const labelFieldType = schema[labelColumn].type
       if (horizontal) {
-        builder = builder.yType(labelFieldType).xUnits(yAxisUnits)
+        builder = builder.xUnits(yAxisUnits)
       } else {
-        builder = builder.xType(labelFieldType).yUnits(yAxisUnits)
+        builder = builder.yUnits(yAxisUnits)
       }
-      useDates = labelFieldType === "datetime"
     }
     const series = (valueColumns ?? []).map(column => ({
       name: column,
       data: data.map(row => {
-        if (!useDates) {
-          const value = get(row, column);
+        const value = get(row, column);
 
-          if (schema?.[column]?.type === 'datetime') {
-            return Date.parse(value)
-          }
-
-          if (Array.isArray(value)) {
-            return null;
-          }
-
-          if (Number.isNaN(parseInt(value, 10))) {
-            return null;
-          }
-
-          return value;
-        } else {
-          // TODO datetimes as labels are passed in this way, but this only updates on value change, so it's broken until you also change the value
-          return [row[labelColumn], row[column]]
+        if (schema?.[column]?.type === 'datetime') {
+          return Date.parse(value)
         }
+
+        if (Array.isArray(value)) {
+          return null;
+        }
+
+        if (Number.isNaN(parseInt(value, 10))) {
+          return null;
+        }
+
+        return value;
       }),
     }))
     builder = builder.series(series)
-    if (!useDates) {
-      builder = builder.xCategories(data.map(row => row[labelColumn]))
-    } else {
-      // Horizontal dates don't work anyway, but this is the correct logic
-      if (horizontal) {
-        builder = builder.clearYFormatter()
-      } else {
-        builder = builder.clearXFormatter()
+    builder = builder.xCategories(data.map(row => {
+      const value = row[labelColumn]
+      if (schema[labelColumn]?.type === 'datetime') {
+        const dateString = (new Date(Date.parse(value))).toLocaleDateString()
+        console.log(value)
+        console.log(dateString)
+        console.log()
+        return dateString
       }
-    }
+
+      return value ?? ""
+    }))
 
     // Build chart options
     return builder.getOptions()
diff --git a/yarn.lock b/yarn.lock
index a49ac599e9..df06dd4f5d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6924,7 +6924,7 @@ apexcharts@^3.19.2:
     svg.resize.js "^1.4.3"
     svg.select.js "^3.0.1"
 
-apexcharts@^3.45.2:
+apexcharts@^3.48.0:
   version "3.48.0"
   resolved "https://registry.yarnpkg.com/apexcharts/-/apexcharts-3.48.0.tgz#cf0e18f4551b04a242d81942c965c15547f5f1b6"
   integrity sha512-Lhpj1Ij6lKlrUke8gf+P+SE6uGUn+Pe1TnCJ+zqrY0YMvbqM3LMb1lY+eybbTczUyk0RmMZomlTa2NgX2EUs4Q==

From 8d77bb016f5602036231d1f69e893a896f22c066 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Thu, 18 Apr 2024 06:51:54 +0100
Subject: [PATCH 077/123] refactor of bar done i think

---
 packages/bbui/src/Tooltip/Context.svelte      |   2 +-
 packages/client/manifest.json                 | 166 +++++++--------
 .../components/app/charts/ApexChart.svelte    |   3 -
 .../src/components/app/charts/BarChart.svelte | 192 ++++++++----------
 4 files changed, 166 insertions(+), 197 deletions(-)

diff --git a/packages/bbui/src/Tooltip/Context.svelte b/packages/bbui/src/Tooltip/Context.svelte
index f25abc6d6b..e0abd882c8 100644
--- a/packages/bbui/src/Tooltip/Context.svelte
+++ b/packages/bbui/src/Tooltip/Context.svelte
@@ -159,7 +159,7 @@
     box-sizing: border-box;
     border: 1px solid var(--grey-4);
     opacity: 0;
-    pointer-events: none;
+    overflow: hidden;
 
     transition: width 300ms ease-in, height 300ms ease-in, top 300ms ease-in, left 300ms ease-in;
   }
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 9afcbc5c6c..84abe7be6d 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -1684,19 +1684,19 @@
         "type": "select",
         "label": "Colors",
         "key": "palette",
-        "defaultValue": "Palette 1",
+        "defaultValue": "palette1",
         "options": [
-          "Custom",
-          "Palette 1",
-          "Palette 2",
-          "Palette 3",
-          "Palette 4",
-          "Palette 5",
-          "Palette 6",
-          "Palette 7",
-          "Palette 8",
-          "Palette 9",
-          "Palette 10"
+          { "label": "Custom", "value": "Custom" },
+          { "label": "Palette 1", "value": "palette1" },
+          { "label": "Palette 2", "value": "palette2" },
+          { "label": "Palette 3", "value": "palette3" },
+          { "label": "Palette 4", "value": "palette4" },
+          { "label": "Palette 5", "value": "palette5" },
+          { "label": "Palette 6", "value": "palette6" },
+          { "label": "Palette 7", "value": "palette7" },
+          { "label": "Palette 8", "value": "palette8" },
+          { "label": "Palette 9", "value": "palette9" },
+          { "label": "Palette 10", "value": "palette10" }
         ]
       },
       {
@@ -1844,17 +1844,17 @@
         "key": "palette",
         "defaultValue": "Palette 1",
         "options": [
-          "Custom",
-          "Palette 1",
-          "Palette 2",
-          "Palette 3",
-          "Palette 4",
-          "Palette 5",
-          "Palette 6",
-          "Palette 7",
-          "Palette 8",
-          "Palette 9",
-          "Palette 10"
+          { "label": "Custom", "value": "Custom" },
+          { "label": "Palette 1", "value": "palette1" },
+          { "label": "Palette 2", "value": "palette2" },
+          { "label": "Palette 3", "value": "palette3" },
+          { "label": "Palette 4", "value": "palette4" },
+          { "label": "Palette 5", "value": "palette5" },
+          { "label": "Palette 6", "value": "palette6" },
+          { "label": "Palette 7", "value": "palette7" },
+          { "label": "Palette 8", "value": "palette8" },
+          { "label": "Palette 9", "value": "palette9" },
+          { "label": "Palette 10", "value": "palette10" }
         ]
       },
       {
@@ -1995,19 +1995,19 @@
         "type": "select",
         "label": "Colors",
         "key": "palette",
-        "defaultValue": "Palette 1",
+        "defaultValue": "palette1",
         "options": [
-          "Custom",
-          "Palette 1",
-          "Palette 2",
-          "Palette 3",
-          "Palette 4",
-          "Palette 5",
-          "Palette 6",
-          "Palette 7",
-          "Palette 8",
-          "Palette 9",
-          "Palette 10"
+          { "label": "Custom", "value": "Custom" },
+          { "label": "Palette 1", "value": "palette1" },
+          { "label": "Palette 2", "value": "palette2" },
+          { "label": "Palette 3", "value": "palette3" },
+          { "label": "Palette 4", "value": "palette4" },
+          { "label": "Palette 5", "value": "palette5" },
+          { "label": "Palette 6", "value": "palette6" },
+          { "label": "Palette 7", "value": "palette7" },
+          { "label": "Palette 8", "value": "palette8" },
+          { "label": "Palette 9", "value": "palette9" },
+          { "label": "Palette 10", "value": "palette10" }
         ]
       },
       {
@@ -2143,19 +2143,19 @@
         "type": "select",
         "label": "Colors",
         "key": "palette",
-        "defaultValue": "Palette 1",
+        "defaultValue": "palette1",
         "options": [
-          "Custom",
-          "Palette 1",
-          "Palette 2",
-          "Palette 3",
-          "Palette 4",
-          "Palette 5",
-          "Palette 6",
-          "Palette 7",
-          "Palette 8",
-          "Palette 9",
-          "Palette 10"
+          { "label": "Custom", "value": "Custom" },
+          { "label": "Palette 1", "value": "palette1" },
+          { "label": "Palette 2", "value": "palette2" },
+          { "label": "Palette 3", "value": "palette3" },
+          { "label": "Palette 4", "value": "palette4" },
+          { "label": "Palette 5", "value": "palette5" },
+          { "label": "Palette 6", "value": "palette6" },
+          { "label": "Palette 7", "value": "palette7" },
+          { "label": "Palette 8", "value": "palette8" },
+          { "label": "Palette 9", "value": "palette9" },
+          { "label": "Palette 10", "value": "palette10" }
         ]
       },
       {
@@ -2272,19 +2272,19 @@
         "type": "select",
         "label": "Colors",
         "key": "palette",
-        "defaultValue": "Palette 1",
+        "defaultValue": "palette1",
         "options": [
-          "Custom",
-          "Palette 1",
-          "Palette 2",
-          "Palette 3",
-          "Palette 4",
-          "Palette 5",
-          "Palette 6",
-          "Palette 7",
-          "Palette 8",
-          "Palette 9",
-          "Palette 10"
+          { "label": "Custom", "value": "Custom" },
+          { "label": "Palette 1", "value": "palette1" },
+          { "label": "Palette 2", "value": "palette2" },
+          { "label": "Palette 3", "value": "palette3" },
+          { "label": "Palette 4", "value": "palette4" },
+          { "label": "Palette 5", "value": "palette5" },
+          { "label": "Palette 6", "value": "palette6" },
+          { "label": "Palette 7", "value": "palette7" },
+          { "label": "Palette 8", "value": "palette8" },
+          { "label": "Palette 9", "value": "palette9" },
+          { "label": "Palette 10", "value": "palette10" }
         ]
       },
       {
@@ -2510,19 +2510,19 @@
         "type": "select",
         "label": "Colors",
         "key": "palette",
-        "defaultValue": "Palette 1",
+        "defaultValue": "palette1",
         "options": [
-          "Custom",
-          "Palette 1",
-          "Palette 2",
-          "Palette 3",
-          "Palette 4",
-          "Palette 5",
-          "Palette 6",
-          "Palette 7",
-          "Palette 8",
-          "Palette 9",
-          "Palette 10"
+          { "label": "Custom", "value": "Custom" },
+          { "label": "Palette 1", "value": "palette1" },
+          { "label": "Palette 2", "value": "palette2" },
+          { "label": "Palette 3", "value": "palette3" },
+          { "label": "Palette 4", "value": "palette4" },
+          { "label": "Palette 5", "value": "palette5" },
+          { "label": "Palette 6", "value": "palette6" },
+          { "label": "Palette 7", "value": "palette7" },
+          { "label": "Palette 8", "value": "palette8" },
+          { "label": "Palette 9", "value": "palette9" },
+          { "label": "Palette 10", "value": "palette10" }
         ]
       },
       {
@@ -5187,19 +5187,19 @@
         "type": "select",
         "label": "Colors",
         "key": "palette",
-        "defaultValue": "Palette 1",
+        "defaultValue": "palette1",
         "options": [
-          "Custom",
-          "Palette 1",
-          "Palette 2",
-          "Palette 3",
-          "Palette 4",
-          "Palette 5",
-          "Palette 6",
-          "Palette 7",
-          "Palette 8",
-          "Palette 9",
-          "Palette 10"
+          { "label": "Custom", "value": "Custom" },
+          { "label": "Palette 1", "value": "palette1" },
+          { "label": "Palette 2", "value": "palette2" },
+          { "label": "Palette 3", "value": "palette3" },
+          { "label": "Palette 4", "value": "palette4" },
+          { "label": "Palette 5", "value": "palette5" },
+          { "label": "Palette 6", "value": "palette6" },
+          { "label": "Palette 7", "value": "palette7" },
+          { "label": "Palette 8", "value": "palette8" },
+          { "label": "Palette 9", "value": "palette9" },
+          { "label": "Palette 10", "value": "palette10" }
         ]
       },
       {
diff --git a/packages/client/src/components/app/charts/ApexChart.svelte b/packages/client/src/components/app/charts/ApexChart.svelte
index 0583652ad9..411774c353 100644
--- a/packages/client/src/components/app/charts/ApexChart.svelte
+++ b/packages/client/src/components/app/charts/ApexChart.svelte
@@ -8,9 +8,6 @@
   const component = getContext("component")
 
   export let options
-  $: {
-    console.log(options);
-  }
   /*
   export let invalid = false
 
diff --git a/packages/client/src/components/app/charts/BarChart.svelte b/packages/client/src/components/app/charts/BarChart.svelte
index b9586b280e..e18ac77cf7 100644
--- a/packages/client/src/components/app/charts/BarChart.svelte
+++ b/packages/client/src/components/app/charts/BarChart.svelte
@@ -3,10 +3,11 @@
   import ApexChart from "./ApexChart.svelte"
   import { get } from "lodash";
 
-  export let title
   export let dataProvider
   export let labelColumn
   export let valueColumns
+
+  export let title
   export let xAxisLabel
   export let yAxisLabel
   export let height
@@ -20,126 +21,97 @@
   export let c1, c2, c3, c4, c5
   export let horizontal
 
-  $: options = setUpChart(
-    title,
-    dataProvider,
-    labelColumn,
-    valueColumns,
-    xAxisLabel,
-    yAxisLabel,
-    height,
-    width,
-    dataLabels,
-    animate,
-    legend,
-    stacked,
-    yAxisUnits,
-    palette,
-    horizontal,
-    c1 && c2 && c3 && c4 && c5 ? [c1, c2, c3, c4, c5] : null,
-    customColor
-  )
+  const formatters = {
+    ["Default"]: val => val,
+    ["Thousands"]: val => `${Math.round(val / 1000)}K`,
+    ["Millions"]: val => `${Math.round(val / 1000000)}M`,
+  }
 
-  $: customColor = palette === "Custom"
+  $: series = getSeries(dataProvider, valueColumns)
+  $: categories = getCategories(dataProvider, labelColumn);
 
-  const setUpChart = (
-    title,
-    dataProvider,
-    labelColumn,
-    valueColumns,
-    xAxisLabel,
-    yAxisLabel,
-    height,
-    width,
-    dataLabels,
-    animate,
-    legend,
-    stacked,
-    yAxisUnits,
-    palette,
-    horizontal,
-    colors,
-    customColor
-  ) => {
-    const allCols = [labelColumn, ...(valueColumns || [null])]
-    if (
-      !dataProvider ||
-      !dataProvider.rows?.length ||
-      allCols.find(x => x == null)
-    ) {
-      return null
-    }
+  $: dataType = dataProvider?.schema?.[labelColumn]?.type === 'datetime' ? 
+    "datetime" : "category"
 
-    // Fetch data
-    const { schema, rows } = dataProvider
-
-    const data = rows.slice(0, 100)
-    if (!schema || !data.length) {
-      return null
-    }
-
-    // Initialise default chart
-    let builder = new ApexOptionsBuilder()
-      .type("bar")
-      .title(title)
-      .width(width)
-      .height(height)
-      .xLabel(xAxisLabel)
-      .yLabel(yAxisLabel)
-      .dataLabels(dataLabels)
-      .animate(animate)
-      .legend(legend)
-      .stacked(stacked)
-      .palette(palette)
-      .horizontal(horizontal)
-      .colors(customColor ? colors : null)
-
-    // Add data
-    if (schema[labelColumn]) {
-      const labelFieldType = schema[labelColumn].type
-      if (horizontal) {
-        builder = builder.xUnits(yAxisUnits)
-      } else {
-        builder = builder.yUnits(yAxisUnits)
+  $: options = {
+    series,
+    colors: palette === "Custom" ? [c1, c2, c3, c4, c5] : [],
+    theme: {
+      palette: palette === "Custom" ? null : palette
+    },
+    legend: {
+      show: legend,
+      position: "top",
+      horizontalAlign: "right",
+      showForSingleSeries: true,
+      showForNullSeries: true,
+      showForZeroSeries: true,
+    },
+    title: {
+      text: title,
+    },
+    dataLabels: {
+      enabled: dataLabels
+    },
+    chart: {
+      height: height == null || height === "" ? "auto" : height,
+      width: width == null || width === "" ? "100%" : width,
+      type: "bar",
+      stacked,
+      animations: {
+        enabled: animate
+      },
+      toolbar: {
+        show: false,
+      },
+      zoom: {
+        enabled: false,
+      },
+    },
+    xaxis: {
+      type: dataType,
+      categories,
+      title: {
+        text: xAxisLabel
+      }
+    },
+    yaxis: {
+      title: {
+        text: yAxisLabel
+      },
+      labels: {
+        formatter: formatters[yAxisUnits]
       }
     }
-    const series = (valueColumns ?? []).map(column => ({
+  }
+
+  const getSeries = (datasource, valueColumns = []) => {
+    const rows = datasource.rows ?? [];
+
+    return valueColumns.map(column => ({
       name: column,
-      data: data.map(row => {
-        const value = get(row, column);
-
-        if (schema?.[column]?.type === 'datetime') {
-          return Date.parse(value)
-        }
-
-        if (Array.isArray(value)) {
-          return null;
-        }
-
-        if (Number.isNaN(parseInt(value, 10))) {
-          return null;
-        }
-
-        return value;
+      data: rows.map(row => {
+        return row?.[column]
       }),
     }))
-    builder = builder.series(series)
-    builder = builder.xCategories(data.map(row => {
-      const value = row[labelColumn]
-      if (schema[labelColumn]?.type === 'datetime') {
-        const dateString = (new Date(Date.parse(value))).toLocaleDateString()
-        console.log(value)
-        console.log(dateString)
-        console.log()
-        return dateString
+  }
+
+  const getCategories = (datasource, labelColumn) => {
+    const rows = datasource.rows ?? [];
+
+    return rows.map(row => {
+      const value = row?.[labelColumn]
+
+      // If a nullish or non-scalar type, replace it with an empty string
+      if (!["string", "number", "boolean"].includes(typeof value)) {
+        return ""
       }
 
-      return value ?? ""
-    }))
-
-    // Build chart options
-    return builder.getOptions()
+      return value;
+    })
   }
+
+  $: console.log("opt", options);
 </script>
 
 <ApexChart {options} />

From 257fde14812645fb08f78062a42033cafa193c98 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Thu, 18 Apr 2024 08:08:45 +0100
Subject: [PATCH 078/123] Datetime working now on bar charts i thjink

---
 packages/client/manifest.json                 | 16 ++++-----
 .../components/app/charts/ApexChart.svelte    | 19 +++++-----
 .../src/components/app/charts/BarChart.svelte | 35 +++++++++++++++----
 3 files changed, 48 insertions(+), 22 deletions(-)

diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 84abe7be6d..36bb026d96 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -1655,7 +1655,7 @@
       {
         "type": "select",
         "label": "Format",
-        "key": "yAxisUnits",
+        "key": "valueUnits",
         "options": ["Default", "Thousands", "Millions"],
         "defaultValue": "Default"
       },
@@ -1813,7 +1813,7 @@
       {
         "type": "select",
         "label": "Format",
-        "key": "yAxisUnits",
+        "key": "valueUnits",
         "options": ["Default", "Thousands", "Millions"],
         "defaultValue": "Default"
       },
@@ -1966,7 +1966,7 @@
       {
         "type": "select",
         "label": "Format",
-        "key": "yAxisUnits",
+        "key": "valueUnits",
         "options": ["Default", "Thousands", "Millions"],
         "defaultValue": "Default"
       },
@@ -2410,7 +2410,7 @@
       {
         "type": "select",
         "label": "Format",
-        "key": "yAxisUnits",
+        "key": "valueUnits",
         "options": ["Default", "Thousands", "Millions"],
         "defaultValue": "Default"
       },
@@ -5341,7 +5341,7 @@
           {
             "type": "select",
             "label": "Format",
-            "key": "yAxisUnits",
+            "key": "valueUnits",
             "options": ["Default", "Thousands", "Millions"],
             "defaultValue": "Default"
           },
@@ -5436,7 +5436,7 @@
           {
             "type": "select",
             "label": "Format",
-            "key": "yAxisUnits",
+            "key": "valueUnits",
             "options": ["Default", "Thousands", "Millions"],
             "defaultValue": "Default"
           },
@@ -5485,7 +5485,7 @@
           {
             "type": "select",
             "label": "Format",
-            "key": "yAxisUnits",
+            "key": "valueUnits",
             "options": ["Default", "Thousands", "Millions"],
             "defaultValue": "Default"
           },
@@ -5567,7 +5567,7 @@
           {
             "type": "select",
             "label": "Format",
-            "key": "yAxisUnits",
+            "key": "valueUnits",
             "options": ["Default", "Thousands", "Millions"],
             "defaultValue": "Default"
           },
diff --git a/packages/client/src/components/app/charts/ApexChart.svelte b/packages/client/src/components/app/charts/ApexChart.svelte
index 411774c353..3f0ce221e5 100644
--- a/packages/client/src/components/app/charts/ApexChart.svelte
+++ b/packages/client/src/components/app/charts/ApexChart.svelte
@@ -8,6 +8,9 @@
   const component = getContext("component")
 
   export let options
+
+  // Apex charts directly modifies the options object with default properties and internal variables. These being present could unintentionally cause issues to the provider of this prop as the changes are reflected in that component as well. To prevent any issues we clone this here to provide a buffer.
+  $: optionsCopy = cloneDeep(options);
   /*
   export let invalid = false
 
@@ -27,8 +30,8 @@
     return parsedValue
   }
 
-  const parseOptions = (options) => {
-    const parsedOptions = { series: [], ...cloneDeep(options)}
+  const parseOptions = (optionsCopy) => {
+    const parsedOptions = { series: [], ...cloneDeep(optionsCopy)}
 
     // Object form of series, used by most charts
     if (parsedOptions.series.some(entry => Array.isArray(entry?.data))) {
@@ -41,7 +44,7 @@
     return parsedOptions;
   }
 
-  $: parsedOptions = parseOptions(options);
+  $: parsedOptions = parseOptions(optionsCopy);
   */
 
   let chartElement;
@@ -58,7 +61,7 @@
   const renderChart = async (newChartElement) => {
     try {
       await chart?.destroy()
-      chart = new ApexCharts(newChartElement, options)
+      chart = new ApexCharts(newChartElement, optionsCopy)
       await chart.render()
     } catch(e) {
       //console.log(e)
@@ -69,17 +72,17 @@
     return true
   }
 
-  $: noData = options == null || options?.series?.length === 0
+  $: noData = optionsCopy == null || optionsCopy?.series?.length === 0
   $: hide = noData || !seriesValid
 
   // Call render chart upon changes to hide, as apex charts has issues with rendering upon changes automatically
   // if the chart is hidden.
   $: renderChart(chartElement, hide)
-  $: updateChart(options)
-  $: seriesValid = isSeriesValid(options?.series || [])
+  $: updateChart(optionsCopy)
+  $: seriesValid = isSeriesValid(optionsCopy?.series || [])
 </script>
 
-{#key options?.customColor}
+{#key optionsCopy?.customColor}
   <div class:hide use:styleable={$component.styles} bind:this={chartElement} />
   {#if $builderStore.inBuilder && noData }
     <div class="component-placeholder" use:styleable={{ ...$component.styles, normal: {}, custom: null, empty: true }}>
diff --git a/packages/client/src/components/app/charts/BarChart.svelte b/packages/client/src/components/app/charts/BarChart.svelte
index e18ac77cf7..5e3aa104b2 100644
--- a/packages/client/src/components/app/charts/BarChart.svelte
+++ b/packages/client/src/components/app/charts/BarChart.svelte
@@ -16,7 +16,7 @@
   export let animate
   export let legend
   export let stacked
-  export let yAxisUnits
+  export let valueUnits
   export let palette
   export let c1, c2, c3, c4, c5
   export let horizontal
@@ -25,13 +25,17 @@
     ["Default"]: val => val,
     ["Thousands"]: val => `${Math.round(val / 1000)}K`,
     ["Millions"]: val => `${Math.round(val / 1000000)}M`,
+    ["Datetime"]: val => (new Date(val)).toLocaleString()
   }
 
   $: series = getSeries(dataProvider, valueColumns)
   $: categories = getCategories(dataProvider, labelColumn);
 
-  $: dataType = dataProvider?.schema?.[labelColumn]?.type === 'datetime' ? 
+  $: labelType = dataProvider?.schema?.[labelColumn]?.type === 'datetime' ? 
     "datetime" : "category"
+  $: formatter = getFormatter(labelType, valueUnits)
+  $: xAxisFormatter = getFormatter(labelType, valueUnits, horizontal, "x")
+  $: yAxisFormatter = getFormatter(labelType, valueUnits, horizontal, "y")
 
   $: options = {
     series,
@@ -68,19 +72,29 @@
         enabled: false,
       },
     },
+    plotOptions: {
+      bar: {
+        horizontal
+      }
+    },
+    // We can just always provide the categories to the xaxis and horizontal mode automatically handles "tranposing" the categories to the yaxis, but certain things like labels need to be manually put on a certain axis based on the selected mode. Titles do not need to be handled this way, they are exposed to the user as "X axis" and Y Axis" so flipping them would be confusing.
     xaxis: {
-      type: dataType,
+      type: labelType,
       categories,
+      labels: {
+        formatter: xAxisFormatter
+      },
       title: {
         text: xAxisLabel
       }
     },
+    // bar charts in horizontal mode don't have a default setting for parsing the labels of dates, and will just spit out the unix epoch value. It also doesn't seem to respect any date based formatting properties passed in. So we'll just manualy format the labels, the chart still sorts the dates correctly in any case
     yaxis: {
+      labels: {
+        formatter: yAxisFormatter
+      },
       title: {
         text: yAxisLabel
-      },
-      labels: {
-        formatter: formatters[yAxisUnits]
       }
     }
   }
@@ -111,6 +125,15 @@
     })
   }
 
+  const getFormatter = (labelType, valueUnits, horizontal, axis) => {
+    const isLabelAxis = (axis === "y" && horizontal) || axis === "x" && !horizontal
+    if (labelType === "datetime" && isLabelAxis) {
+      return formatters["Datetime"]
+    }
+
+    return formatters[valueUnits]
+  }
+
   $: console.log("opt", options);
 </script>
 

From b75d054cddceaafc1132aea845841d91396ce06c Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Thu, 18 Apr 2024 08:13:56 +0100
Subject: [PATCH 079/123] bar chart working?

---
 packages/client/src/components/app/charts/BarChart.svelte | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/client/src/components/app/charts/BarChart.svelte b/packages/client/src/components/app/charts/BarChart.svelte
index 5e3aa104b2..40ae3960a3 100644
--- a/packages/client/src/components/app/charts/BarChart.svelte
+++ b/packages/client/src/components/app/charts/BarChart.svelte
@@ -88,7 +88,7 @@
         text: xAxisLabel
       }
     },
-    // bar charts in horizontal mode don't have a default setting for parsing the labels of dates, and will just spit out the unix epoch value. It also doesn't seem to respect any date based formatting properties passed in. So we'll just manualy format the labels, the chart still sorts the dates correctly in any case
+    // Providing `type: "datetime"` normally makes Apex Charts parse epochs nicely with no additonal config, but bar charts in horizontal mode don't have a default setting for parsing the labels of dates, and will just spit out the unix epoch value. It also doesn't seem to respect any date based formatting properties passed in. So we'll just manualy format the labels, the chart still sorts the dates correctly in any case
     yaxis: {
       labels: {
         formatter: yAxisFormatter
@@ -131,6 +131,10 @@
       return formatters["Datetime"]
     }
 
+    if (isLabelAxis) {
+      return formatters["Default"]
+    }
+
     return formatters[valueUnits]
   }
 

From f5345fd4f30344eb8b5a5d5f76d1fceb1d501556 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Thu, 18 Apr 2024 08:23:19 +0100
Subject: [PATCH 080/123]  dont hide chart errors

---
 .../client/src/components/Component.svelte    |  3 -
 .../components/app/charts/ApexChart.svelte    | 64 ++-----------------
 2 files changed, 5 insertions(+), 62 deletions(-)

diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index de9ed4a7b8..43dda3729b 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -296,9 +296,6 @@
           return false
         }
 
-        if (sectionDependsOnValue == null && sectionRealDependentValue == null) {
-          return false
-        }
         if (sectionDependsOnValue != null && sectionDependsOnValue !== sectionRealDependentValue) {
           return false
         }
diff --git a/packages/client/src/components/app/charts/ApexChart.svelte b/packages/client/src/components/app/charts/ApexChart.svelte
index 3f0ce221e5..2765fa2370 100644
--- a/packages/client/src/components/app/charts/ApexChart.svelte
+++ b/packages/client/src/components/app/charts/ApexChart.svelte
@@ -11,75 +11,27 @@
 
   // Apex charts directly modifies the options object with default properties and internal variables. These being present could unintentionally cause issues to the provider of this prop as the changes are reflected in that component as well. To prevent any issues we clone this here to provide a buffer.
   $: optionsCopy = cloneDeep(options);
-  /*
-  export let invalid = false
-
-  const parseValue = (value) => {
-    // A value like [10, 11, 12] actually would be output by parseInt as `10`, but this behaviour is odd and not something a
-    // reasonable user would expect.
-    if (Array.isArray(value)) {
-      return null;
-    }
-
-    const parsedValue = parseInt(value, 10);
-
-    if (Number.isNaN(parsedValue)) {
-      return null;
-    }
-
-    return parsedValue
-  }
-
-  const parseOptions = (optionsCopy) => {
-    const parsedOptions = { series: [], ...cloneDeep(optionsCopy)}
-
-    // Object form of series, used by most charts
-    if (parsedOptions.series.some(entry => Array.isArray(entry?.data))) {
-      parsedOptions.series = parsedOptions.series.map(entry => ({ ...entry, data: parseValue})parseValue);
-    } else {
-      // Scalar form of series, used by non-axis charts like pie and donut
-      parsedOptions.series = parsedOptions.series.map(parseValue);
-    }
-
-    return parsedOptions;
-  }
-
-  $: parsedOptions = parseOptions(optionsCopy);
-  */
 
   let chartElement;
   let chart;
 
   const updateChart = async (newOptions) => {
-    try {
-      await chart?.updateOptions(newOptions)
-    } catch(e) {
-      //console.log(e)
-    }
+    await chart?.updateOptions(newOptions)
   }
 
   const renderChart = async (newChartElement) => {
-    try {
-      await chart?.destroy()
-      chart = new ApexCharts(newChartElement, optionsCopy)
-      await chart.render()
-    } catch(e) {
-      //console.log(e)
-    }
-  }
-
-  const isSeriesValid = (series) => {
-    return true
+    await chart?.destroy()
+    chart = new ApexCharts(newChartElement, optionsCopy)
+    await chart.render()
   }
 
   $: noData = optionsCopy == null || optionsCopy?.series?.length === 0
-  $: hide = noData || !seriesValid
+  $: hide = noData
 
   // Call render chart upon changes to hide, as apex charts has issues with rendering upon changes automatically
   // if the chart is hidden.
   $: renderChart(chartElement, hide)
   $: updateChart(optionsCopy)
-  $: seriesValid = isSeriesValid(optionsCopy?.series || [])
 </script>
 
 {#key optionsCopy?.customColor}
@@ -89,13 +41,7 @@
       <Icon name="Alert" color="var(--spectrum-global-color-static-red-600)" />
       Add rows to your data source to start using your component
     </div>
-  {:else if $builderStore.inBuilder && !seriesValid}
-    <div class="component-placeholder" use:styleable={{ ...$component.styles, normal: {}, custom: null, empty: true }}>
-      <Icon name="Alert" color="var(--spectrum-global-color-static-red-600)" />
-      Your selected data cannot be displayed in this chart
-    </div>
   {/if}
-
 {/key}
 
 <style>

From 5751e92bbd27484d6d017fd030518c4e7cb606a5 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Thu, 18 Apr 2024 08:32:36 +0100
Subject: [PATCH 081/123] refactor line area

---
 packages/client/manifest.json                 | 38 +++++++++++++++++++
 .../components/app/charts/ApexChart.svelte    |  2 +-
 2 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 36bb026d96..008496a8e9 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -1777,6 +1777,7 @@
     ]
   },
   "line": {
+    "documentationLink": "https://docs.budibase.com/docs/line-chart",
     "name": "Line Chart",
     "description": "Line chart",
     "icon": "GraphTrend",
@@ -1808,6 +1809,22 @@
         "label": "Data columns",
         "key": "valueColumns",
         "dependsOn": "dataProvider",
+        "columnInfo": {
+          "typeSupport": {
+            "supported": ["number", "boolean"],
+            "partialSupport": [
+              { "type": "longform", "message": "stringAsNumber" },
+              { "type": "string", "message": "stringAsNumber" },
+              { "type": "bigint", "message": "stringAsNumber" },
+              { "type": "options", "message": "stringAsNumber" },
+              { "type": "formula", "message": "stringAsNumber" },
+              { "type": "datetime", "message": "dateAsNumber"}
+            ],
+            "unsupported": [
+              { "type": "json", "message": "jsonPrimitivesOnly" }
+            ]
+          }
+        },
         "required": true
       },
       {
@@ -1930,6 +1947,7 @@
     ]
   },
   "area": {
+    "documentationLink": "https://docs.budibase.com/docs/area-chart",
     "name": "Area Chart",
     "description": "Line chart",
     "icon": "GraphAreaStacked",
@@ -1961,6 +1979,22 @@
         "label": "Data columns",
         "key": "valueColumns",
         "dependsOn": "dataProvider",
+        "columnInfo": {
+          "typeSupport": {
+            "supported": ["number", "boolean"],
+            "partialSupport": [
+              { "type": "longform", "message": "stringAsNumber" },
+              { "type": "string", "message": "stringAsNumber" },
+              { "type": "bigint", "message": "stringAsNumber" },
+              { "type": "options", "message": "stringAsNumber" },
+              { "type": "formula", "message": "stringAsNumber" },
+              { "type": "datetime", "message": "dateAsNumber"}
+            ],
+            "unsupported": [
+              { "type": "json", "message": "jsonPrimitivesOnly" }
+            ]
+          }
+        },
         "required": true
       },
       {
@@ -2095,6 +2129,7 @@
     ]
   },
   "pie": {
+    "documentationLink": "https://docs.budibase.com/docs/pie-donut-chart",
     "name": "Pie Chart",
     "description": "Pie chart",
     "icon": "GraphPie",
@@ -2224,6 +2259,7 @@
     ]
   },
   "donut": {
+    "documentationLink": "https://docs.budibase.com/docs/pie-donut-chart",
     "name": "Donut Chart",
     "description": "Donut chart",
     "icon": "GraphDonut",
@@ -2353,6 +2389,7 @@
     ]
   },
   "candlestick": {
+    "documentationLink": "https://docs.budibase.com/docs/candlestick-chart",
     "name": "Candlestick Chart",
     "description": "Candlestick chart",
     "icon": "GraphBarVerticalStacked",
@@ -2444,6 +2481,7 @@
     ]
   },
   "histogram": {
+    "documentationLink": "https://docs.budibase.com/docs/histogram-chart",
     "name": "Histogram Chart",
     "description": "Histogram chart",
     "icon": "Histogram",
diff --git a/packages/client/src/components/app/charts/ApexChart.svelte b/packages/client/src/components/app/charts/ApexChart.svelte
index 2765fa2370..55e37a44f2 100644
--- a/packages/client/src/components/app/charts/ApexChart.svelte
+++ b/packages/client/src/components/app/charts/ApexChart.svelte
@@ -9,7 +9,7 @@
 
   export let options
 
-  // Apex charts directly modifies the options object with default properties and internal variables. These being present could unintentionally cause issues to the provider of this prop as the changes are reflected in that component as well. To prevent any issues we clone this here to provide a buffer.
+  // Apex charts directly modifies the options object with default properties and internal variables. These being present could unintentionally cause issues to the provider of this prop as the changes are reflected in that component as well. To prevent any issues we clone options here to provide a buffer.
   $: optionsCopy = cloneDeep(options);
 
   let chartElement;

From 441595dd6d900ecaac1dc115168762ee33d7f141 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Thu, 18 Apr 2024 10:04:01 +0100
Subject: [PATCH 082/123] line chart

---
 packages/client/manifest.json                 |   2 +-
 .../components/app/charts/ApexChart.svelte    |   3 +
 .../src/components/app/charts/BarChart.svelte |   1 -
 .../components/app/charts/LineChart.svelte    | 214 +++++++++---------
 4 files changed, 112 insertions(+), 108 deletions(-)

diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 008496a8e9..96cdcf4927 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -1859,7 +1859,7 @@
         "type": "select",
         "label": "Colors",
         "key": "palette",
-        "defaultValue": "Palette 1",
+        "defaultValue": "palette1",
         "options": [
           { "label": "Custom", "value": "Custom" },
           { "label": "Palette 1", "value": "palette1" },
diff --git a/packages/client/src/components/app/charts/ApexChart.svelte b/packages/client/src/components/app/charts/ApexChart.svelte
index 55e37a44f2..db99a00834 100644
--- a/packages/client/src/components/app/charts/ApexChart.svelte
+++ b/packages/client/src/components/app/charts/ApexChart.svelte
@@ -16,6 +16,9 @@
   let chart;
 
   const updateChart = async (newOptions) => {
+    // Line charts won't transition from category to datetime types properly without
+    // calling this with an empty object first; I don't know why this works.
+    await chart?.updateOptions({})
     await chart?.updateOptions(newOptions)
   }
 
diff --git a/packages/client/src/components/app/charts/BarChart.svelte b/packages/client/src/components/app/charts/BarChart.svelte
index 40ae3960a3..dc71792053 100644
--- a/packages/client/src/components/app/charts/BarChart.svelte
+++ b/packages/client/src/components/app/charts/BarChart.svelte
@@ -33,7 +33,6 @@
 
   $: labelType = dataProvider?.schema?.[labelColumn]?.type === 'datetime' ? 
     "datetime" : "category"
-  $: formatter = getFormatter(labelType, valueUnits)
   $: xAxisFormatter = getFormatter(labelType, valueUnits, horizontal, "x")
   $: yAxisFormatter = getFormatter(labelType, valueUnits, horizontal, "y")
 
diff --git a/packages/client/src/components/app/charts/LineChart.svelte b/packages/client/src/components/app/charts/LineChart.svelte
index 599d150d7b..c91bb56e07 100644
--- a/packages/client/src/components/app/charts/LineChart.svelte
+++ b/packages/client/src/components/app/charts/LineChart.svelte
@@ -16,7 +16,7 @@
   export let dataLabels
   export let curve
   export let legend
-  export let yAxisUnits
+  export let valueUnits
   export let palette
   export let c1, c2, c3, c4, c5
 
@@ -25,122 +25,124 @@
   export let stacked
   export let gradient
 
-  $: options = setUpChart(
-    title,
-    dataProvider,
-    labelColumn,
-    valueColumns,
-    xAxisLabel,
-    yAxisLabel,
-    height,
-    width,
-    animate,
-    dataLabels,
-    curve,
-    legend,
-    yAxisUnits,
-    palette,
-    area,
-    stacked,
-    gradient,
-    c1 && c2 && c3 && c4 && c5 ? [c1, c2, c3, c4, c5] : null,
-    customColor
-  )
+  $: {
+    console.log(palette);
+  }
 
-  $: customColor = palette === "Custom"
+  const formatters = {
+    ["Default"]: val => val,
+    ["Thousands"]: val => `${Math.round(val / 1000)}K`,
+    ["Millions"]: val => `${Math.round(val / 1000000)}M`,
+    ["Datetime"]: val => (new Date(val)).toLocaleString()
+  }
 
-  const setUpChart = (
-    title,
-    dataProvider,
-    labelColumn,
-    valueColumns,
-    xAxisLabel,
-    yAxisLabel,
-    height,
-    width,
-    animate,
-    dataLabels,
-    curve,
-    legend,
-    yAxisUnits,
-    palette,
-    area,
-    stacked,
-    gradient,
-    colors,
-    customColor
-  ) => {
-    const allCols = [labelColumn, ...(valueColumns || [null])]
-    if (
-      !dataProvider ||
-      !dataProvider.rows?.length ||
-      allCols.find(x => x == null)
-    ) {
-      return null
+  $: series = getSeries(dataProvider, valueColumns)
+  $: categories = getCategories(dataProvider, labelColumn);
+
+  $: labelType = dataProvider?.schema?.[labelColumn]?.type === 'datetime' ? 
+    "datetime" : "category"
+  $: xAxisFormatter = getFormatter(labelType, valueUnits, "x")
+  $: yAxisFormatter = getFormatter(labelType, valueUnits, "y")
+
+  $: options = {
+    series,
+    stroke: {
+      curve: curve.toLowerCase()
+    },
+    colors: palette === "Custom" ? [c1, c2, c3, c4, c5] : [],
+    theme: {
+      palette: palette === "Custom" ? null : palette
+    },
+    legend: {
+      show: legend,
+      position: "top",
+      horizontalAlign: "right",
+      showForSingleSeries: true,
+      showForNullSeries: true,
+      showForZeroSeries: true,
+    },
+    title: {
+      text: title,
+    },
+    dataLabels: {
+      enabled: dataLabels
+    },
+    chart: {
+      height: height == null || height === "" ? "auto" : height,
+      width: width == null || width === "" ? "100%" : width,
+      type: "line",
+      stacked,
+      animations: {
+        enabled: animate
+      },
+      toolbar: {
+        show: false,
+      },
+      zoom: {
+        enabled: false,
+      },
+    },
+    xaxis: {
+      type: labelType,
+      categories,
+      labels: {
+        formatter: xAxisFormatter
+      },
+      title: {
+        text: xAxisLabel
+      }
+    },
+    yaxis: {
+      labels: {
+        formatter: yAxisFormatter
+      },
+      title: {
+        text: yAxisLabel
+      }
     }
+  }
 
-    // Fetch, filter and sort data
-    const { schema, rows } = dataProvider
-    const data = rows
-    if (!schema || !data.length) {
-      return null
-    }
+  const getSeries = (datasource, valueColumns = []) => {
+    const rows = datasource.rows ?? [];
 
-    // Initialise default chart
-    let builder = new ApexOptionsBuilder()
-      .title(title)
-      .type(area ? "area" : "line")
-      .width(width)
-      .height(height)
-      .xLabel(xAxisLabel)
-      .yLabel(yAxisLabel)
-      .dataLabels(dataLabels)
-      .animate(animate)
-      .curve(curve.toLowerCase())
-      .gradient(gradient)
-      .stacked(stacked)
-      .legend(legend)
-      .yUnits(yAxisUnits)
-      .palette(palette)
-      .colors(customColor ? colors : null)
-
-    // Add data
-    let useDates = false
-    if (schema[labelColumn]) {
-      const labelFieldType = schema[labelColumn].type
-      builder = builder.xType(labelFieldType)
-      useDates = labelFieldType === "datetime"
-    }
-    const series = (valueColumns ?? []).map(column => ({
+    return valueColumns.map(column => ({
       name: column,
-      data: data.map(row => {
-        if (!useDates) {
-          const value = get(row, column); 
-
-          if (Array.isArray(value)) {
-            return null;
-          }
-
-          if (Number.isNaN(parseInt(value, 10))) {
-            return null;
-          }
-
-          return value;
-        } else {
-          return [row[labelColumn], row[column]]
-        }
+      data: rows.map(row => {
+        return row?.[column]
       }),
     }))
-    builder = builder.series(series)
-    if (!useDates) {
-      builder = builder.xCategories(data.map(row => row[labelColumn]))
-    } else {
-      builder = builder.clearXFormatter()
+  }
+
+  const getCategories = (datasource, labelColumn) => {
+    const rows = datasource.rows ?? [];
+
+    return rows.map(row => {
+      const value = row?.[labelColumn]
+
+      // If a nullish or non-scalar type, replace it with an empty string
+      if (!["string", "number", "boolean"].includes(typeof value)) {
+        return ""
+      }
+
+      return value;
+    })
+  }
+
+  const getFormatter = (labelType, valueUnits, axis) => {
+    const isLabelAxis = axis === "x"
+
+    if (labelType === "datetime" && isLabelAxis) {
+      return formatters["Datetime"]
     }
 
-    // Build chart options
-    return builder.getOptions()
+    if (isLabelAxis) {
+      return formatters["Default"]
+    }
+
+    return formatters[valueUnits]
   }
+
+  $: console.log("opt", options);
 </script>
 
 <ApexChart {options} />

From 3ec5bbaa09daa67b0669829dac471b4c6fa7400d Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Thu, 18 Apr 2024 10:12:34 +0100
Subject: [PATCH 083/123] wip

---
 .../components/app/charts/AreaChart.svelte    | 161 +++++++++++++++++-
 .../components/app/charts/LineChart.svelte    |  10 --
 2 files changed, 159 insertions(+), 12 deletions(-)

diff --git a/packages/client/src/components/app/charts/AreaChart.svelte b/packages/client/src/components/app/charts/AreaChart.svelte
index dc80b2b9da..888b1c8820 100644
--- a/packages/client/src/components/app/charts/AreaChart.svelte
+++ b/packages/client/src/components/app/charts/AreaChart.svelte
@@ -1,5 +1,162 @@
 <script>
-  import LineChart from "./LineChart.svelte"
+  import { ApexOptionsBuilder } from "./ApexOptionsBuilder"
+  import ApexChart from "./ApexChart.svelte"
+  import { get } from "lodash";
+
+  // Common props
+  export let title
+  export let dataProvider
+  export let labelColumn
+  export let valueColumns
+  export let xAxisLabel
+  export let yAxisLabel
+  export let height
+  export let width
+  export let animate
+  export let dataLabels
+  export let curve
+  export let legend
+  export let valueUnits
+  export let palette
+  export let c1, c2, c3, c4, c5
+
+  // Area specific props
+  export let area
+  export let stacked
+  export let gradient
+
+  const formatters = {
+    ["Default"]: val => val,
+    ["Thousands"]: val => `${Math.round(val / 1000)}K`,
+    ["Millions"]: val => `${Math.round(val / 1000000)}M`,
+    ["Datetime"]: val => (new Date(val)).toLocaleString()
+  }
+
+  $: series = getSeries(dataProvider, valueColumns)
+  $: categories = getCategories(dataProvider, labelColumn);
+
+  $: labelType = dataProvider?.schema?.[labelColumn]?.type === 'datetime' ? 
+    "datetime" : "category"
+  $: xAxisFormatter = getFormatter(labelType, valueUnits, "x")
+  $: yAxisFormatter = getFormatter(labelType, valueUnits, "y")
+  $: fill = getFill(gradient)
+
+  $: options = {
+    series,
+    stroke: {
+      curve: curve.toLowerCase()
+    },
+    colors: palette === "Custom" ? [c1, c2, c3, c4, c5] : [],
+    theme: {
+      palette: palette === "Custom" ? null : palette
+    },
+    fill,
+    legend: {
+      show: legend,
+      position: "top",
+      horizontalAlign: "right",
+      showForSingleSeries: true,
+      showForNullSeries: true,
+      showForZeroSeries: true,
+    },
+    title: {
+      text: title,
+    },
+    dataLabels: {
+      enabled: dataLabels
+    },
+    chart: {
+      height: height == null || height === "" ? "auto" : height,
+      width: width == null || width === "" ? "100%" : width,
+      type: "area",
+      stacked,
+      animations: {
+        enabled: animate
+      },
+      toolbar: {
+        show: false,
+      },
+      zoom: {
+        enabled: false,
+      },
+    },
+    xaxis: {
+      type: labelType,
+      categories,
+      labels: {
+        formatter: xAxisFormatter
+      },
+      title: {
+        text: xAxisLabel
+      }
+    },
+    yaxis: {
+      labels: {
+        formatter: yAxisFormatter
+      },
+      title: {
+        text: yAxisLabel
+      }
+    }
+  }
+
+  const getSeries = (datasource, valueColumns = []) => {
+    const rows = datasource.rows ?? [];
+
+    return valueColumns.map(column => ({
+      name: column,
+      data: rows.map(row => {
+        return row?.[column]
+      }),
+    }))
+  }
+
+  const getCategories = (datasource, labelColumn) => {
+    const rows = datasource.rows ?? [];
+
+    return rows.map(row => {
+      const value = row?.[labelColumn]
+
+      // If a nullish or non-scalar type, replace it with an empty string
+      if (!["string", "number", "boolean"].includes(typeof value)) {
+        return ""
+      }
+
+      return value;
+    })
+  }
+
+  const getFormatter = (labelType, valueUnits, axis) => {
+    const isLabelAxis = axis === "x"
+
+    if (labelType === "datetime" && isLabelAxis) {
+      return formatters["Datetime"]
+    }
+
+    if (isLabelAxis) {
+      return formatters["Default"]
+    }
+
+    return formatters[valueUnits]
+  }
+
+  const getFill = (gradient) => {
+    if (gradient) {
+      return {
+        type: "gradient",
+        gradient: {
+          shadeIntensity: 1,
+          opacityFrom: 0.7,
+          opacityTo: 0.9,
+          stops: [0, 90, 100],
+        }
+      }
+    }
+
+    return {}
+  }
+
+  $: console.log("opt", options);
 </script>
 
-<LineChart {...$$props} area />
+<ApexChart {options} />
diff --git a/packages/client/src/components/app/charts/LineChart.svelte b/packages/client/src/components/app/charts/LineChart.svelte
index c91bb56e07..a29f5ad5b3 100644
--- a/packages/client/src/components/app/charts/LineChart.svelte
+++ b/packages/client/src/components/app/charts/LineChart.svelte
@@ -20,15 +20,6 @@
   export let palette
   export let c1, c2, c3, c4, c5
 
-  // Area specific props
-  export let area
-  export let stacked
-  export let gradient
-
-  $: {
-    console.log(palette);
-  }
-
   const formatters = {
     ["Default"]: val => val,
     ["Thousands"]: val => `${Math.round(val / 1000)}K`,
@@ -71,7 +62,6 @@
       height: height == null || height === "" ? "auto" : height,
       width: width == null || width === "" ? "100%" : width,
       type: "line",
-      stacked,
       animations: {
         enabled: animate
       },

From 78bb19967f685206e6a650617097be57867f061e Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Thu, 18 Apr 2024 11:33:22 +0100
Subject: [PATCH 084/123] wip

---
 .../src/components/app/charts/ApexChart.svelte      | 13 +++++++++++--
 .../src/components/app/charts/AreaChart.svelte      |  2 +-
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/packages/client/src/components/app/charts/ApexChart.svelte b/packages/client/src/components/app/charts/ApexChart.svelte
index db99a00834..7d78a1ad98 100644
--- a/packages/client/src/components/app/charts/ApexChart.svelte
+++ b/packages/client/src/components/app/charts/ApexChart.svelte
@@ -14,17 +14,26 @@
 
   let chartElement;
   let chart;
+  let currentType = null
 
   const updateChart = async (newOptions) => {
+    console.log('update')
     // Line charts won't transition from category to datetime types properly without
     // calling this with an empty object first; I don't know why this works.
-    await chart?.updateOptions({})
-    await chart?.updateOptions(newOptions)
+    if (newOptions?.xaxis?.type && newOptions.xaxis.type !== currentType ) {
+      console.log('calling render')
+      await renderChart(chartElement);
+
+    } else {
+      await chart?.updateOptions(newOptions)
+    }
   }
 
   const renderChart = async (newChartElement) => {
+    console.log('render')
     await chart?.destroy()
     chart = new ApexCharts(newChartElement, optionsCopy)
+    currentType = optionsCopy?.xaxis?.type
     await chart.render()
   }
 
diff --git a/packages/client/src/components/app/charts/AreaChart.svelte b/packages/client/src/components/app/charts/AreaChart.svelte
index 888b1c8820..93dbb29393 100644
--- a/packages/client/src/components/app/charts/AreaChart.svelte
+++ b/packages/client/src/components/app/charts/AreaChart.svelte
@@ -153,7 +153,7 @@
       }
     }
 
-    return {}
+    return { type: 'solid' }
   }
 
   $: console.log("opt", options);

From 337214d48c98bad1dac8ae33cfea5019c6207a68 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Thu, 18 Apr 2024 13:03:18 +0100
Subject: [PATCH 085/123] pie

---
 .../components/app/charts/ApexChart.svelte    |   1 +
 .../components/app/charts/AreaChart.svelte    |   1 -
 .../components/app/charts/LineChart.svelte    |   1 -
 .../src/components/app/charts/PieChart.svelte | 142 +++++++++---------
 .../src/components/app/charts/formatters.js   |   8 +
 5 files changed, 77 insertions(+), 76 deletions(-)
 create mode 100644 packages/client/src/components/app/charts/formatters.js

diff --git a/packages/client/src/components/app/charts/ApexChart.svelte b/packages/client/src/components/app/charts/ApexChart.svelte
index 7d78a1ad98..09771ce9a5 100644
--- a/packages/client/src/components/app/charts/ApexChart.svelte
+++ b/packages/client/src/components/app/charts/ApexChart.svelte
@@ -11,6 +11,7 @@
 
   // Apex charts directly modifies the options object with default properties and internal variables. These being present could unintentionally cause issues to the provider of this prop as the changes are reflected in that component as well. To prevent any issues we clone options here to provide a buffer.
   $: optionsCopy = cloneDeep(options);
+  $: console.log(cloneDeep(options));
 
   let chartElement;
   let chart;
diff --git a/packages/client/src/components/app/charts/AreaChart.svelte b/packages/client/src/components/app/charts/AreaChart.svelte
index 93dbb29393..f85c0f9d58 100644
--- a/packages/client/src/components/app/charts/AreaChart.svelte
+++ b/packages/client/src/components/app/charts/AreaChart.svelte
@@ -3,7 +3,6 @@
   import ApexChart from "./ApexChart.svelte"
   import { get } from "lodash";
 
-  // Common props
   export let title
   export let dataProvider
   export let labelColumn
diff --git a/packages/client/src/components/app/charts/LineChart.svelte b/packages/client/src/components/app/charts/LineChart.svelte
index a29f5ad5b3..547032e89b 100644
--- a/packages/client/src/components/app/charts/LineChart.svelte
+++ b/packages/client/src/components/app/charts/LineChart.svelte
@@ -3,7 +3,6 @@
   import ApexChart from "./ApexChart.svelte"
   import { get } from "lodash";
 
-  // Common props
   export let title
   export let dataProvider
   export let labelColumn
diff --git a/packages/client/src/components/app/charts/PieChart.svelte b/packages/client/src/components/app/charts/PieChart.svelte
index feaa0bcab9..91a4ee87f9 100644
--- a/packages/client/src/components/app/charts/PieChart.svelte
+++ b/packages/client/src/components/app/charts/PieChart.svelte
@@ -1,6 +1,6 @@
 <script>
-  import { ApexOptionsBuilder } from "./ApexOptionsBuilder"
   import ApexChart from "./ApexChart.svelte"
+  import formatters from "./formatters";
 
   export let title
   export let dataProvider
@@ -8,91 +8,85 @@
   export let valueColumn
   export let height
   export let width
-  export let dataLabels
   export let animate
+  export let dataLabels
   export let legend
-  export let donut
   export let palette
   export let c1, c2, c3, c4, c5
 
-  $: options = setUpChart(
-    title,
-    dataProvider,
-    labelColumn,
-    valueColumn,
-    height,
-    width,
-    dataLabels,
-    animate,
-    legend,
-    donut,
-    palette,
-    c1 && c2 && c3 && c4 && c5 ? [c1, c2, c3, c4, c5] : null,
-    customColor
-  )
+  $: labelType = dataProvider?.schema?.[labelColumn]?.type === 'datetime' ? 
+    "datetime" : "category"
+  $: series = getSeries(dataProvider, valueColumn)
+  $: labels = getLabels(dataProvider, labelColumn, labelType);
 
-  $: customColor = palette === "Custom"
+  $: options = {
+    series,
+    labels,
+    colors: palette === "Custom" ? [c1, c2, c3, c4, c5] : [],
+    theme: {
+      palette: palette === "Custom" ? null : palette
+    },
+    legend: {
+      show: legend,
+      position: "top",
+      horizontalAlign: "right",
+      showForSingleSeries: true,
+      showForNullSeries: true,
+      showForZeroSeries: true,
+    },
+    title: {
+      text: title,
+    },
+    dataLabels: {
+      enabled: dataLabels
+    },
+    chart: {
+      height: height == null || height === "" ? "auto" : height,
+      width: width == null || width === "" ? "100%" : width,
+      type: "pie",
+      animations: {
+        enabled: animate
+      },
+      toolbar: {
+        show: false,
+      },
+      zoom: {
+        enabled: false,
+      },
+    },
+  }
 
-  const setUpChart = (
-    title,
-    dataProvider,
-    labelColumn,
-    valueColumn,
-    height,
-    width,
-    dataLabels,
-    animate,
-    legend,
-    donut,
-    palette,
-    colors,
-    customColor
-  ) => {
-    if (
-      !dataProvider ||
-      !dataProvider.rows?.length ||
-      !labelColumn ||
-      !valueColumn
-    ) {
-      return null
-    }
+  const getSeries = (datasource, valueColumn) => {
+    const rows = datasource.rows ?? [];
 
-    // Fetch, filter and sort data
-    const { schema, rows } = dataProvider
-    const data = rows
-      .filter(row => row[labelColumn] != null && row[valueColumn] != null)
-      .slice(0, 100)
-    if (!schema || !data.length) {
-      return null
-    }
-
-    // Initialise default chart
-    let builder = new ApexOptionsBuilder()
-      .title(title)
-      .type(donut ? "donut" : "pie")
-      .width(width)
-      .height(height)
-      .dataLabels(dataLabels)
-      .animate(animate)
-      .legend(legend)
-      .legendPosition("right")
-      .palette(palette)
-      .colors(customColor ? colors : null)
-
-    // Add data if valid datasource
-    const series = data.map(row => {
-      if (schema[valueColumn].type === 'datetime') {
-        return Date.parse(row[valueColumn])
+    return rows.map(row => {
+      const value = row?.[valueColumn]
+      const numValue = parseFloat(value);
+      if (isNaN(numValue)) {
+        return 0;
       }
 
-      return parseFloat(row[valueColumn])
+      return numValue;
     })
-    const labels = data.map(row => row[labelColumn])
-    builder = builder.series(series).labels(labels)
-
-    // Build chart options
-    return builder.getOptions()
   }
+
+  const getLabels = (datasource, labelColumn, labelType) => {
+    const rows = datasource.rows ?? [];
+
+    return rows.map(row => {
+      const value = row?.[labelColumn]
+
+      // If a nullish or non-scalar type, replace it with an empty string
+      if (!["string", "number", "boolean"].includes(typeof value)) {
+        return ""
+      } else if (labelType === "datetime") {
+        return formatters["Datetime"](value)
+      }
+
+      return value;
+    })
+  }
+  $: console.log("opt", options);
 </script>
 
 <ApexChart {options} />
diff --git a/packages/client/src/components/app/charts/formatters.js b/packages/client/src/components/app/charts/formatters.js
new file mode 100644
index 0000000000..76a471f57e
--- /dev/null
+++ b/packages/client/src/components/app/charts/formatters.js
@@ -0,0 +1,8 @@
+const formatters = {
+  ["Default"]: val => val,
+  ["Thousands"]: val => `${Math.round(val / 1000)}K`,
+  ["Millions"]: val => `${Math.round(val / 1000000)}M`,
+  ["Datetime"]: val => (new Date(val)).toLocaleString()
+}
+
+export default formatters

From 6176381f5bca82a8412e38759e8bce0a47cff69a Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Thu, 18 Apr 2024 13:15:27 +0100
Subject: [PATCH 086/123] donut

---
 .../components/app/charts/AreaChart.svelte    |  2 -
 .../components/app/charts/DonutChart.svelte   | 90 ++++++++++++++++++-
 .../components/app/charts/LineChart.svelte    |  2 -
 .../src/components/app/charts/PieChart.svelte |  1 -
 4 files changed, 88 insertions(+), 7 deletions(-)

diff --git a/packages/client/src/components/app/charts/AreaChart.svelte b/packages/client/src/components/app/charts/AreaChart.svelte
index f85c0f9d58..8419068b82 100644
--- a/packages/client/src/components/app/charts/AreaChart.svelte
+++ b/packages/client/src/components/app/charts/AreaChart.svelte
@@ -154,8 +154,6 @@
 
     return { type: 'solid' }
   }
-
-  $: console.log("opt", options);
 </script>
 
 <ApexChart {options} />
diff --git a/packages/client/src/components/app/charts/DonutChart.svelte b/packages/client/src/components/app/charts/DonutChart.svelte
index 721a09053a..3946a89459 100644
--- a/packages/client/src/components/app/charts/DonutChart.svelte
+++ b/packages/client/src/components/app/charts/DonutChart.svelte
@@ -1,5 +1,91 @@
 <script>
-  import PieChart from "./PieChart.svelte"
+  import ApexChart from "./ApexChart.svelte"
+  import formatters from "./formatters";
+
+  export let title
+  export let dataProvider
+  export let labelColumn
+  export let valueColumn
+  export let height
+  export let width
+  export let animate
+  export let dataLabels
+  export let legend
+  export let palette
+  export let c1, c2, c3, c4, c5
+
+  $: labelType = dataProvider?.schema?.[labelColumn]?.type === 'datetime' ? 
+    "datetime" : "category"
+  $: series = getSeries(dataProvider, valueColumn)
+  $: labels = getLabels(dataProvider, labelColumn, labelType);
+
+  $: options = {
+    series,
+    labels,
+    colors: palette === "Custom" ? [c1, c2, c3, c4, c5] : [],
+    theme: {
+      palette: palette === "Custom" ? null : palette
+    },
+    legend: {
+      show: legend,
+      position: "top",
+      horizontalAlign: "right",
+      showForSingleSeries: true,
+      showForNullSeries: true,
+      showForZeroSeries: true,
+    },
+    title: {
+      text: title,
+    },
+    dataLabels: {
+      enabled: dataLabels
+    },
+    chart: {
+      height: height == null || height === "" ? "auto" : height,
+      width: width == null || width === "" ? "100%" : width,
+      type: "donut",
+      animations: {
+        enabled: animate
+      },
+      toolbar: {
+        show: false,
+      },
+      zoom: {
+        enabled: false,
+      },
+    },
+  }
+
+  const getSeries = (datasource, valueColumn) => {
+    const rows = datasource.rows ?? [];
+
+    return rows.map(row => {
+      const value = row?.[valueColumn]
+      const numValue = parseFloat(value);
+      if (isNaN(numValue)) {
+        return 0;
+      }
+
+      return numValue;
+    })
+  }
+
+  const getLabels = (datasource, labelColumn, labelType) => {
+    const rows = datasource.rows ?? [];
+
+    return rows.map(row => {
+      const value = row?.[labelColumn]
+
+      // If a nullish or non-scalar type, replace it with an empty string
+      if (!["string", "number", "boolean"].includes(typeof value)) {
+        return ""
+      } else if (labelType === "datetime") {
+        return formatters["Datetime"](value)
+      }
+
+      return value;
+    })
+  }
 </script>
 
-<PieChart {...$$props} donut />
+<ApexChart {options} />
diff --git a/packages/client/src/components/app/charts/LineChart.svelte b/packages/client/src/components/app/charts/LineChart.svelte
index 547032e89b..d7d379b426 100644
--- a/packages/client/src/components/app/charts/LineChart.svelte
+++ b/packages/client/src/components/app/charts/LineChart.svelte
@@ -130,8 +130,6 @@
 
     return formatters[valueUnits]
   }
-
-  $: console.log("opt", options);
 </script>
 
 <ApexChart {options} />
diff --git a/packages/client/src/components/app/charts/PieChart.svelte b/packages/client/src/components/app/charts/PieChart.svelte
index 91a4ee87f9..94ca6c7c64 100644
--- a/packages/client/src/components/app/charts/PieChart.svelte
+++ b/packages/client/src/components/app/charts/PieChart.svelte
@@ -86,7 +86,6 @@
       return value;
     })
   }
-  $: console.log("opt", options);
 </script>
 
 <ApexChart {options} />

From 415b109f23b966523b85582fcbe46765e86ee990 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Thu, 18 Apr 2024 14:22:36 +0100
Subject: [PATCH 087/123] candlestick

---
 .../components/app/charts/AreaChart.svelte    |   8 +-
 .../src/components/app/charts/BarChart.svelte |   8 +-
 .../app/charts/CandleStickChart.svelte        | 117 +++++++++---------
 .../components/app/charts/DonutChart.svelte   |   8 +-
 .../components/app/charts/LineChart.svelte    |   8 +-
 .../src/components/app/charts/PieChart.svelte |   8 +-
 6 files changed, 77 insertions(+), 80 deletions(-)

diff --git a/packages/client/src/components/app/charts/AreaChart.svelte b/packages/client/src/components/app/charts/AreaChart.svelte
index 8419068b82..2d7886abfd 100644
--- a/packages/client/src/components/app/charts/AreaChart.svelte
+++ b/packages/client/src/components/app/charts/AreaChart.svelte
@@ -99,8 +99,8 @@
     }
   }
 
-  const getSeries = (datasource, valueColumns = []) => {
-    const rows = datasource.rows ?? [];
+  const getSeries = (dataProvider, valueColumns = []) => {
+    const rows = dataProvider.rows ?? [];
 
     return valueColumns.map(column => ({
       name: column,
@@ -110,8 +110,8 @@
     }))
   }
 
-  const getCategories = (datasource, labelColumn) => {
-    const rows = datasource.rows ?? [];
+  const getCategories = (dataProvider, labelColumn) => {
+    const rows = dataProvider.rows ?? [];
 
     return rows.map(row => {
       const value = row?.[labelColumn]
diff --git a/packages/client/src/components/app/charts/BarChart.svelte b/packages/client/src/components/app/charts/BarChart.svelte
index dc71792053..3996f31710 100644
--- a/packages/client/src/components/app/charts/BarChart.svelte
+++ b/packages/client/src/components/app/charts/BarChart.svelte
@@ -98,8 +98,8 @@
     }
   }
 
-  const getSeries = (datasource, valueColumns = []) => {
-    const rows = datasource.rows ?? [];
+  const getSeries = (dataProvider, valueColumns = []) => {
+    const rows = dataProvider.rows ?? [];
 
     return valueColumns.map(column => ({
       name: column,
@@ -109,8 +109,8 @@
     }))
   }
 
-  const getCategories = (datasource, labelColumn) => {
-    const rows = datasource.rows ?? [];
+  const getCategories = (dataProvider, labelColumn) => {
+    const rows = dataProvider.rows ?? [];
 
     return rows.map(row => {
       const value = row?.[labelColumn]
diff --git a/packages/client/src/components/app/charts/CandleStickChart.svelte b/packages/client/src/components/app/charts/CandleStickChart.svelte
index ee875060d8..0cee9e0e1e 100644
--- a/packages/client/src/components/app/charts/CandleStickChart.svelte
+++ b/packages/client/src/components/app/charts/CandleStickChart.svelte
@@ -1,6 +1,7 @@
 <script>
   import { ApexOptionsBuilder } from "./ApexOptionsBuilder"
   import ApexChart from "./ApexChart.svelte"
+  import formatters from './formatters';
 
   export let title
   export let dataProvider
@@ -14,82 +15,78 @@
   export let height
   export let width
   export let animate
-  export let yAxisUnits
+  export let valueUnits
 
-  $: options = setUpChart(
-    title,
+  $: series = getSeries(
     dataProvider,
     dateColumn,
     openColumn,
     highColumn,
     lowColumn,
-    closeColumn,
-    xAxisLabel,
-    yAxisLabel,
-    height,
-    width,
-    animate,
-    yAxisUnits
+    closeColumn
   )
 
-  const setUpChart = (
-    title,
+  $: options = {
+    series,
+    title: {
+      text: title,
+    },
+    chart: {
+      height: height == null || height === "" ? "auto" : height,
+      width: width == null || width === "" ? "100%" : width,
+      type: "candlestick",
+      animations: {
+        enabled: animate
+      },
+      toolbar: {
+        show: false,
+      },
+      zoom: {
+        enabled: false,
+      },
+    },
+    xaxis: {
+      tooltip: {
+        formatter: formatters["Datetime"]
+      },
+      type: "datetime",
+      title: {
+        text: xAxisLabel
+      }
+    },
+    yaxis: {
+      title: {
+        text: yAxisLabel
+      }
+    }
+  }
+
+  const getSeries = (
     dataProvider,
     dateColumn,
     openColumn,
     highColumn,
     lowColumn,
-    closeColumn,
-    xAxisLabel,
-    yAxisLabel,
-    height,
-    width,
-    animate,
-    yAxisUnits
+    closeColumn
   ) => {
-    const allCols = [dateColumn, openColumn, highColumn, lowColumn, closeColumn]
-    if (
-      !dataProvider ||
-      !dataProvider.rows?.length ||
-      allCols.find(x => x == null)
-    ) {
-      return null
-    }
+    const rows = dataProvider.rows ?? [];
 
-    // Fetch data
-    const { schema, rows } = dataProvider
-    const reducer = row => (valid, column) => valid && row[column] != null
-    const hasAllColumns = row => allCols.reduce(reducer(row), true)
-    const data = rows.filter(row => hasAllColumns(row))
-    if (!schema || !data.length) {
-      return null
-    }
+    return [{
+      data: rows.map(row => {
+        const open = parseFloat(row[openColumn])
+        const high = parseFloat(row[highColumn])
+        const low = parseFloat(row[lowColumn])
+        const close = parseFloat(row[closeColumn])
 
-    // Initialise default chart
-    let builder = new ApexOptionsBuilder()
-      .type("candlestick")
-      .title(title)
-      .width(width)
-      .height(height)
-      .xLabel(xAxisLabel)
-      .yLabel(yAxisLabel)
-      .animate(animate)
-      .yUnits(yAxisUnits)
-      .yTooltip(true)
-      //.xType("datetime")
-      .candleStick()
-
-    // Add data
-    //const parseDate = d => d
-    const parseDate = d => (isNaN(d) ? Date.parse(d).valueOf() : parseInt(d))
-    const chartData = data.map(row => ([
-      parseDate(row[dateColumn]),
-      row[openColumn], row[highColumn], row[lowColumn], row[closeColumn]
-    ]))
-    builder = builder.series([{ data: chartData }])
-
-    // Build chart options
-    return builder.getOptions()
+        return [
+          Date.parse(row[dateColumn]),
+          isNaN(open) ? 0 : open,
+          isNaN(high) ? 0 : high,
+          isNaN(low) ? 0 : low,
+          isNaN(close) ? 0 : close,
+        ]
+      })
+    }]
   }
 </script>
 
diff --git a/packages/client/src/components/app/charts/DonutChart.svelte b/packages/client/src/components/app/charts/DonutChart.svelte
index 3946a89459..23b0d5d0e5 100644
--- a/packages/client/src/components/app/charts/DonutChart.svelte
+++ b/packages/client/src/components/app/charts/DonutChart.svelte
@@ -56,8 +56,8 @@
     },
   }
 
-  const getSeries = (datasource, valueColumn) => {
-    const rows = datasource.rows ?? [];
+  const getSeries = (dataProvider, valueColumn) => {
+    const rows = dataProvider.rows ?? [];
 
     return rows.map(row => {
       const value = row?.[valueColumn]
@@ -70,8 +70,8 @@
     })
   }
 
-  const getLabels = (datasource, labelColumn, labelType) => {
-    const rows = datasource.rows ?? [];
+  const getLabels = (dataProvider, labelColumn, labelType) => {
+    const rows = dataProvider.rows ?? [];
 
     return rows.map(row => {
       const value = row?.[labelColumn]
diff --git a/packages/client/src/components/app/charts/LineChart.svelte b/packages/client/src/components/app/charts/LineChart.svelte
index d7d379b426..858b7eb64b 100644
--- a/packages/client/src/components/app/charts/LineChart.svelte
+++ b/packages/client/src/components/app/charts/LineChart.svelte
@@ -91,8 +91,8 @@
     }
   }
 
-  const getSeries = (datasource, valueColumns = []) => {
-    const rows = datasource.rows ?? [];
+  const getSeries = (dataProvider, valueColumns = []) => {
+    const rows = dataProvider.rows ?? [];
 
     return valueColumns.map(column => ({
       name: column,
@@ -102,8 +102,8 @@
     }))
   }
 
-  const getCategories = (datasource, labelColumn) => {
-    const rows = datasource.rows ?? [];
+  const getCategories = (dataProvider, labelColumn) => {
+    const rows = dataProvider.rows ?? [];
 
     return rows.map(row => {
       const value = row?.[labelColumn]
diff --git a/packages/client/src/components/app/charts/PieChart.svelte b/packages/client/src/components/app/charts/PieChart.svelte
index 94ca6c7c64..7b73bf9da0 100644
--- a/packages/client/src/components/app/charts/PieChart.svelte
+++ b/packages/client/src/components/app/charts/PieChart.svelte
@@ -56,8 +56,8 @@
     },
   }
 
-  const getSeries = (datasource, valueColumn) => {
-    const rows = datasource.rows ?? [];
+  const getSeries = (dataProvider, valueColumn) => {
+    const rows = dataProvider.rows ?? [];
 
     return rows.map(row => {
       const value = row?.[valueColumn]
@@ -70,8 +70,8 @@
     })
   }
 
-  const getLabels = (datasource, labelColumn, labelType) => {
-    const rows = datasource.rows ?? [];
+  const getLabels = (dataProvider, labelColumn, labelType) => {
+    const rows = dataProvider.rows ?? [];
 
     return rows.map(row => {
       const value = row?.[labelColumn]

From 1a196b78e61aa451176119bb0f620aeb2ef05c85 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Thu, 18 Apr 2024 14:32:48 +0100
Subject: [PATCH 088/123] Refactor

---
 .../client/src/components/app/charts/AreaChart.svelte     | 8 +-------
 packages/client/src/components/app/charts/BarChart.svelte | 8 +-------
 .../client/src/components/app/charts/LineChart.svelte     | 8 +-------
 3 files changed, 3 insertions(+), 21 deletions(-)

diff --git a/packages/client/src/components/app/charts/AreaChart.svelte b/packages/client/src/components/app/charts/AreaChart.svelte
index 2d7886abfd..08f64c7bd6 100644
--- a/packages/client/src/components/app/charts/AreaChart.svelte
+++ b/packages/client/src/components/app/charts/AreaChart.svelte
@@ -2,6 +2,7 @@
   import { ApexOptionsBuilder } from "./ApexOptionsBuilder"
   import ApexChart from "./ApexChart.svelte"
   import { get } from "lodash";
+  import formatters from "./formatters"
 
   export let title
   export let dataProvider
@@ -24,13 +25,6 @@
   export let stacked
   export let gradient
 
-  const formatters = {
-    ["Default"]: val => val,
-    ["Thousands"]: val => `${Math.round(val / 1000)}K`,
-    ["Millions"]: val => `${Math.round(val / 1000000)}M`,
-    ["Datetime"]: val => (new Date(val)).toLocaleString()
-  }
-
   $: series = getSeries(dataProvider, valueColumns)
   $: categories = getCategories(dataProvider, labelColumn);
 
diff --git a/packages/client/src/components/app/charts/BarChart.svelte b/packages/client/src/components/app/charts/BarChart.svelte
index 3996f31710..fdf582a0c3 100644
--- a/packages/client/src/components/app/charts/BarChart.svelte
+++ b/packages/client/src/components/app/charts/BarChart.svelte
@@ -2,6 +2,7 @@
   import { ApexOptionsBuilder } from "./ApexOptionsBuilder"
   import ApexChart from "./ApexChart.svelte"
   import { get } from "lodash";
+  import formatters from "./formatters"
 
   export let dataProvider
   export let labelColumn
@@ -21,13 +22,6 @@
   export let c1, c2, c3, c4, c5
   export let horizontal
 
-  const formatters = {
-    ["Default"]: val => val,
-    ["Thousands"]: val => `${Math.round(val / 1000)}K`,
-    ["Millions"]: val => `${Math.round(val / 1000000)}M`,
-    ["Datetime"]: val => (new Date(val)).toLocaleString()
-  }
-
   $: series = getSeries(dataProvider, valueColumns)
   $: categories = getCategories(dataProvider, labelColumn);
 
diff --git a/packages/client/src/components/app/charts/LineChart.svelte b/packages/client/src/components/app/charts/LineChart.svelte
index 858b7eb64b..c80597f110 100644
--- a/packages/client/src/components/app/charts/LineChart.svelte
+++ b/packages/client/src/components/app/charts/LineChart.svelte
@@ -2,6 +2,7 @@
   import { ApexOptionsBuilder } from "./ApexOptionsBuilder"
   import ApexChart from "./ApexChart.svelte"
   import { get } from "lodash";
+  import formatters from "./formatters"
 
   export let title
   export let dataProvider
@@ -19,13 +20,6 @@
   export let palette
   export let c1, c2, c3, c4, c5
 
-  const formatters = {
-    ["Default"]: val => val,
-    ["Thousands"]: val => `${Math.round(val / 1000)}K`,
-    ["Millions"]: val => `${Math.round(val / 1000000)}M`,
-    ["Datetime"]: val => (new Date(val)).toLocaleString()
-  }
-
   $: series = getSeries(dataProvider, valueColumns)
   $: categories = getCategories(dataProvider, labelColumn);
 

From 500a733cec9c1e9bfee610b09f967ebbfba8c5c7 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Fri, 19 Apr 2024 07:36:09 +0100
Subject: [PATCH 089/123] buckets

---
 .../components/app/charts/ApexChart.svelte    |  10 +-
 .../app/charts/HistogramChart.svelte          | 222 +++++++++---------
 2 files changed, 115 insertions(+), 117 deletions(-)

diff --git a/packages/client/src/components/app/charts/ApexChart.svelte b/packages/client/src/components/app/charts/ApexChart.svelte
index 09771ce9a5..506143852c 100644
--- a/packages/client/src/components/app/charts/ApexChart.svelte
+++ b/packages/client/src/components/app/charts/ApexChart.svelte
@@ -11,27 +11,23 @@
 
   // Apex charts directly modifies the options object with default properties and internal variables. These being present could unintentionally cause issues to the provider of this prop as the changes are reflected in that component as well. To prevent any issues we clone options here to provide a buffer.
   $: optionsCopy = cloneDeep(options);
-  $: console.log(cloneDeep(options));
 
   let chartElement;
   let chart;
   let currentType = null
 
   const updateChart = async (newOptions) => {
-    console.log('update')
-    // Line charts won't transition from category to datetime types properly without
-    // calling this with an empty object first; I don't know why this works.
+    // Line charts have issues transitioning between "datetime" and "category" types, and will ignore the provided formatters
+    // in certain scenarios. Rerendering the chart when the user changes label type fixes this, but unfortunately it does
+    // cause a little bit of jankiness with animations.
     if (newOptions?.xaxis?.type && newOptions.xaxis.type !== currentType ) {
-      console.log('calling render')
       await renderChart(chartElement);
-
     } else {
       await chart?.updateOptions(newOptions)
     }
   }
 
   const renderChart = async (newChartElement) => {
-    console.log('render')
     await chart?.destroy()
     chart = new ApexCharts(newChartElement, optionsCopy)
     currentType = optionsCopy?.xaxis?.type
diff --git a/packages/client/src/components/app/charts/HistogramChart.svelte b/packages/client/src/components/app/charts/HistogramChart.svelte
index 26b9028550..0cc74cc0ce 100644
--- a/packages/client/src/components/app/charts/HistogramChart.svelte
+++ b/packages/client/src/components/app/charts/HistogramChart.svelte
@@ -1,135 +1,137 @@
 <script>
   import { ApexOptionsBuilder } from "./ApexOptionsBuilder"
   import ApexChart from "./ApexChart.svelte"
+  import { get } from "lodash";
+  import formatters from "./formatters"
 
-  export let title
   export let dataProvider
   export let valueColumn
+  export let title
   export let xAxisLabel
   export let yAxisLabel
   export let height
   export let width
   export let dataLabels
   export let animate
+  export let legend
+  export let stacked
   export let palette
   export let c1, c2, c3, c4, c5
   export let horizontal
   export let bucketCount = 10
 
-  $: options = setUpChart(
-    title,
-    dataProvider,
-    valueColumn,
-    xAxisLabel || valueColumn,
-    yAxisLabel,
-    height,
-    width,
-    dataLabels,
-    animate,
-    palette,
-    horizontal,
-    c1 && c2 && c3 && c4 && c5 ? [c1, c2, c3, c4, c5] : null,
-    customColor,
-    bucketCount
-  )
+  $: series = getSeries(dataProvider, valueColumn, bucketCount)
 
-  $: customColor = palette === "Custom"
-
-  const setUpChart = (
-    title,
-    dataProvider,
-    valueColumn,
-    xAxisLabel, //freqAxisLabel
-    yAxisLabel, //valueAxisLabel
-    height,
-    width,
-    dataLabels,
-    animate,
-    palette,
-    horizontal,
-    colors,
-    customColor,
-    bucketCount
-  ) => {
-    const allCols = [valueColumn]
-    if (
-      !dataProvider ||
-      !dataProvider.rows?.length ||
-      allCols.find(x => x == null)
-    ) {
-      return null
-    }
-
-    // Fetch data
-    const { schema, rows } = dataProvider
-    const reducer = row => (valid, column) => valid && row[column] != null
-    const hasAllColumns = row => allCols.reduce(reducer(row), true)
-    const data = rows.filter(row => hasAllColumns(row)).slice(0, 100)
-    if (!schema || !data.length) {
-      return null
-    }
-
-    // Initialise default chart
-    let builder = new ApexOptionsBuilder()
-      .type("bar")
-      .title(title)
-      .width(width)
-      .height(height)
-      .xLabel(horizontal ? yAxisLabel : xAxisLabel)
-      .yLabel(horizontal ? xAxisLabel : yAxisLabel)
-      .dataLabels(dataLabels)
-      .animate(animate)
-      .palette(palette)
-      .horizontal(horizontal)
-      .colors(customColor ? colors : null)
-
-    if (horizontal) {
-      builder = builder.setOption(["plotOptions", "bar", "barHeight"], "90%")
-    } else {
-      builder = builder.setOption(["plotOptions", "bar", "columnWidth"], "99%")
-    }
-
-    // Pull occurences of the value.
-    let flatlist = data.map(row => {
-      return row[valueColumn]
-    })
-
-    // Build range buckets
-    let interval = Math.max(...flatlist) / bucketCount
-    let counts = Array(bucketCount).fill(0)
-
-    // Assign row data to a bucket
-    let buckets = flatlist.reduce((acc, val) => {
-      let dest = Math.min(Math.floor(val / interval), bucketCount - 1)
-      acc[dest] = acc[dest] + 1
-      return acc
-    }, counts)
-
-    const rangeLabel = bucketIdx => {
-      return `${Math.floor(interval * bucketIdx)} - ${Math.floor(
-        interval * (bucketIdx + 1)
-      )}`
-    }
-
-    const series = [
-      {
-        name: yAxisLabel,
-        data: Array.from({ length: buckets.length }, (_, i) => ({
-          x: rangeLabel(i),
-          y: buckets[i],
-        })),
+  $: options = {
+    /*
+    series,
+    colors: palette === "Custom" ? [c1, c2, c3, c4, c5] : [],
+    theme: {
+      palette: palette === "Custom" ? null : palette
+    },
+    legend: {
+      show: legend,
+      position: "top",
+      horizontalAlign: "right",
+      showForSingleSeries: true,
+      showForNullSeries: true,
+      showForZeroSeries: true,
+    },
+    title: {
+      text: title,
+    },
+    dataLabels: {
+      enabled: dataLabels
+    },
+    chart: {
+      height: height == null || height === "" ? "auto" : height,
+      width: width == null || width === "" ? "100%" : width,
+      type: "bar",
+      stacked,
+      animations: {
+        enabled: animate
       },
-    ]
-
-    builder = builder.setOption(["xaxis", "labels"], {
-      formatter: x => {
-        return x + ""
+      toolbar: {
+        show: false,
       },
-    })
+      zoom: {
+        enabled: false,
+      },
+    },
+    plotOptions: {
+      bar: {
+        horizontal
+      }
+    },
+    // We can just always provide the categories to the xaxis and horizontal mode automatically handles "tranposing" the categories to the yaxis, but certain things like labels need to be manually put on a certain axis based on the selected mode. Titles do not need to be handled this way, they are exposed to the user as "X axis" and Y Axis" so flipping them would be confusing.
+    xaxis: {
+      type: labelType,
+      categories,
+      labels: {
+        formatter: xAxisFormatter
+      },
+      title: {
+        text: xAxisLabel
+      }
+    },
+    // Providing `type: "datetime"` normally makes Apex Charts parse epochs nicely with no additonal config, but bar charts in horizontal mode don't have a default setting for parsing the labels of dates, and will just spit out the unix epoch value. It also doesn't seem to respect any date based formatting properties passed in. So we'll just manualy format the labels, the chart still sorts the dates correctly in any case
+    yaxis: {
+      labels: {
+        formatter: yAxisFormatter
+      },
+      title: {
+        text: yAxisLabel
+      }
+    }
+*/
+  }
 
-    builder = builder.series(series)
+  const getSeries = (dataProvider, valueColumn, bucketCount) => {
+    const rows = dataProvider.rows ?? [];
+
+    const values = rows.map(row => parseFloat(row[valueColumn]))
+    const [min, max] = getValuesRange(values)
+    console.log(min, max);
+    const buckets = getBuckets(min, max, bucketCount)
+  }
+
+  const getValuesRange = (values) => {
+    // Ensure min is nearest integer including the actual minimum e.g.`-10.2` -> `-11`
+    const min = Math.floor(Math.min(...values))
+    // Ensure max is nearest integer including the actual maximum e.g. `20.2` -> `21`
+    const max = Math.ceil(Math.max(...values))
+
+    return [min, max]
+  }
+
+  const getBuckets = (min, max, bucketCount) => {
+    // Assure bucketCount is >= 2 and an integer
+    bucketCount = bucketCount < 2 ? 2 : Math.floor(bucketCount)
+
+    const range = max - min
+    // Assure bucketSize is never a decimal value, we'll redistribute any size truncated here later
+    const bucketSize = Math.floor(range / bucketCount)
+    let bucketRemainder = range - (bucketSize * bucketCount)
+
+    const buckets = []
+
+    for (let i = 0; i < bucketCount; i++) {
+      const lastBucketMax = buckets?.[buckets.length - 1]?.max ?? min
+      const remainderPadding = i < bucketRemainder ? 1 : 0
+
+      buckets.push({
+        min: lastBucketMax,
+        max: lastBucketMax + bucketSize + remainderPadding
+      })
+    }
+
+    console.log(range);
+    console.log(bucketSize);
+    console.log(bucketRemainder)
+    console.log(buckets);
+
+    return buckets;
 
-    return builder.getOptions()
   }
 </script>
 

From 3f433bb71006a6f5a44fe911004e051e9f28c53c Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Fri, 19 Apr 2024 08:22:39 +0100
Subject: [PATCH 090/123] histogram

---
 .../app/charts/HistogramChart.svelte          | 54 ++++++++++++-------
 1 file changed, 34 insertions(+), 20 deletions(-)

diff --git a/packages/client/src/components/app/charts/HistogramChart.svelte b/packages/client/src/components/app/charts/HistogramChart.svelte
index 0cc74cc0ce..75e4456102 100644
--- a/packages/client/src/components/app/charts/HistogramChart.svelte
+++ b/packages/client/src/components/app/charts/HistogramChart.svelte
@@ -22,8 +22,10 @@
 
   $: series = getSeries(dataProvider, valueColumn, bucketCount)
 
+  $: xAxisFormatter = getFormatter(horizontal, "x")
+  $: yAxisFormatter = getFormatter(horizontal, "y")
+
   $: options = {
-    /*
     series,
     colors: palette === "Custom" ? [c1, c2, c3, c4, c5] : [],
     theme: {
@@ -63,36 +65,45 @@
         horizontal
       }
     },
-    // We can just always provide the categories to the xaxis and horizontal mode automatically handles "tranposing" the categories to the yaxis, but certain things like labels need to be manually put on a certain axis based on the selected mode. Titles do not need to be handled this way, they are exposed to the user as "X axis" and Y Axis" so flipping them would be confusing.
     xaxis: {
-      type: labelType,
-      categories,
+      type: 'category',
+      title: {
+        text: xAxisLabel
+      },
       labels: {
         formatter: xAxisFormatter
       },
-      title: {
-        text: xAxisLabel
-      }
     },
-    // Providing `type: "datetime"` normally makes Apex Charts parse epochs nicely with no additonal config, but bar charts in horizontal mode don't have a default setting for parsing the labels of dates, and will just spit out the unix epoch value. It also doesn't seem to respect any date based formatting properties passed in. So we'll just manualy format the labels, the chart still sorts the dates correctly in any case
     yaxis: {
+      decimalsInFloat: 0,
+      title: {
+        text: yAxisLabel
+      },
       labels: {
         formatter: yAxisFormatter
       },
-      title: {
-        text: yAxisLabel
-      }
     }
-*/
   }
 
   const getSeries = (dataProvider, valueColumn, bucketCount) => {
     const rows = dataProvider.rows ?? [];
 
-    const values = rows.map(row => parseFloat(row[valueColumn]))
+    const values = rows.map(row => parseFloat(row[valueColumn])).filter(value => !isNaN(value))
     const [min, max] = getValuesRange(values)
-    console.log(min, max);
     const buckets = getBuckets(min, max, bucketCount)
+    const counts = Array(bucketCount).fill(0);
+
+    values.forEach(value => {
+      const bucketIndex = buckets.findIndex(bucket => bucket.min <= value && value <= bucket.max)
+
+      counts[bucketIndex]++
+    });
+
+    const series = buckets.map((bucket, index) => ({ x: `${bucket.min} – ${bucket.max}`, y: counts[index] }))
+
+    return [
+      { data: series }
+    ]
   }
 
   const getValuesRange = (values) => {
@@ -111,12 +122,13 @@
     const range = max - min
     // Assure bucketSize is never a decimal value, we'll redistribute any size truncated here later
     const bucketSize = Math.floor(range / bucketCount)
-    let bucketRemainder = range - (bucketSize * bucketCount)
+    const bucketRemainder = range - (bucketSize * bucketCount)
 
     const buckets = []
 
     for (let i = 0; i < bucketCount; i++) {
       const lastBucketMax = buckets?.[buckets.length - 1]?.max ?? min
+      // Distribute any remaining size, the remainder will never be larger than the number of buckets
       const remainderPadding = i < bucketRemainder ? 1 : 0
 
       buckets.push({
@@ -125,13 +137,15 @@
       })
     }
 
-    console.log(range);
-    console.log(bucketSize);
-    console.log(bucketRemainder)
-    console.log(buckets);
-
     return buckets;
+  }
 
+  const getFormatter = (horizontal, axis) => {
+    if ((horizontal && axis === "x") || (!horizontal && axis === "y")) {
+      return (value) => value.toFixed(0)
+    }
+
+    return (value) => value
   }
 </script>
 

From 46ae350370efbb436225d7e9d6a5ee5c00536dac Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Fri, 19 Apr 2024 09:25:59 +0100
Subject: [PATCH 091/123] think all charts and blocks are good

---
 .../components/app/blocks/ChartBlock.svelte   |  4 ++--
 .../app/charts/CandleStickChart.svelte        |  3 +++
 .../app/charts/HistogramChart.svelte          | 20 +++++++++----------
 3 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/packages/client/src/components/app/blocks/ChartBlock.svelte b/packages/client/src/components/app/blocks/ChartBlock.svelte
index 2767c44b8e..433d163909 100644
--- a/packages/client/src/components/app/blocks/ChartBlock.svelte
+++ b/packages/client/src/components/app/blocks/ChartBlock.svelte
@@ -32,7 +32,7 @@
 
   // Bar/Line/Area
   export let valueColumns
-  export let yAxisUnits
+  export let valueUnits
   export let yAxisLabel
   export let xAxisLabel
   export let curve
@@ -85,7 +85,7 @@
           legend,
           animate,
           ...colors,
-          yAxisUnits,
+          valueUnits,
           yAxisLabel,
           xAxisLabel,
           stacked,
diff --git a/packages/client/src/components/app/charts/CandleStickChart.svelte b/packages/client/src/components/app/charts/CandleStickChart.svelte
index 0cee9e0e1e..11d491471f 100644
--- a/packages/client/src/components/app/charts/CandleStickChart.svelte
+++ b/packages/client/src/components/app/charts/CandleStickChart.svelte
@@ -55,6 +55,9 @@
       }
     },
     yaxis: {
+      labels: {
+        formatter: formatters[valueUnits]
+      },
       title: {
         text: yAxisLabel
       }
diff --git a/packages/client/src/components/app/charts/HistogramChart.svelte b/packages/client/src/components/app/charts/HistogramChart.svelte
index 75e4456102..58a461d61e 100644
--- a/packages/client/src/components/app/charts/HistogramChart.svelte
+++ b/packages/client/src/components/app/charts/HistogramChart.svelte
@@ -13,7 +13,6 @@
   export let width
   export let dataLabels
   export let animate
-  export let legend
   export let stacked
   export let palette
   export let c1, c2, c3, c4, c5
@@ -31,14 +30,6 @@
     theme: {
       palette: palette === "Custom" ? null : palette
     },
-    legend: {
-      show: legend,
-      position: "top",
-      horizontalAlign: "right",
-      showForSingleSeries: true,
-      showForNullSeries: true,
-      showForZeroSeries: true,
-    },
     title: {
       text: title,
     },
@@ -141,8 +132,17 @@
   }
 
   const getFormatter = (horizontal, axis) => {
+    // Don't display decimals in between integers on the value axis
     if ((horizontal && axis === "x") || (!horizontal && axis === "y")) {
-      return (value) => value.toFixed(0)
+      return (value) => {
+        if (Math.floor(value) === value) {
+          return value;
+        }
+
+        // Returning an empty string or even a normal space here causes Apex Charts to push the value axis label of the screen
+        // This is an `em space`, `U+2003`
+        return " ";
+      }
     }
 
     return (value) => value

From 199005fc380c09d643b2567c81af643020dce438 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Fri, 19 Apr 2024 09:40:15 +0100
Subject: [PATCH 092/123] chart clean up

---
 .../client/src/components/app/charts/AreaChart.svelte  |  8 +++++++-
 .../client/src/components/app/charts/BarChart.svelte   | 10 +++++++---
 .../client/src/components/app/charts/DonutChart.svelte |  6 ++++++
 .../client/src/components/app/charts/LineChart.svelte  |  8 +++++++-
 .../client/src/components/app/charts/PieChart.svelte   |  6 ++++++
 5 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/packages/client/src/components/app/charts/AreaChart.svelte b/packages/client/src/components/app/charts/AreaChart.svelte
index 08f64c7bd6..56d1975245 100644
--- a/packages/client/src/components/app/charts/AreaChart.svelte
+++ b/packages/client/src/components/app/charts/AreaChart.svelte
@@ -99,7 +99,13 @@
     return valueColumns.map(column => ({
       name: column,
       data: rows.map(row => {
-        return row?.[column]
+        const value = row?.[column]
+
+        if (dataProvider?.schema?.[column]?.type === "datetime" && value) {
+          return Date.parse(value);
+        }
+
+        return value
       }),
     }))
   }
diff --git a/packages/client/src/components/app/charts/BarChart.svelte b/packages/client/src/components/app/charts/BarChart.svelte
index fdf582a0c3..e30697955d 100644
--- a/packages/client/src/components/app/charts/BarChart.svelte
+++ b/packages/client/src/components/app/charts/BarChart.svelte
@@ -98,7 +98,13 @@
     return valueColumns.map(column => ({
       name: column,
       data: rows.map(row => {
-        return row?.[column]
+        const value = row?.[column]
+
+        if (dataProvider?.schema?.[column]?.type === "datetime" && value) {
+          return Date.parse(value);
+        }
+
+        return value
       }),
     }))
   }
@@ -130,8 +136,6 @@
 
     return formatters[valueUnits]
   }
-
-  $: console.log("opt", options);
 </script>
 
 <ApexChart {options} />
diff --git a/packages/client/src/components/app/charts/DonutChart.svelte b/packages/client/src/components/app/charts/DonutChart.svelte
index 23b0d5d0e5..64c13dd1d0 100644
--- a/packages/client/src/components/app/charts/DonutChart.svelte
+++ b/packages/client/src/components/app/charts/DonutChart.svelte
@@ -61,6 +61,12 @@
 
     return rows.map(row => {
       const value = row?.[valueColumn]
+
+      if (dataProvider?.schema?.[valueColumn]?.type === "datetime" && value) {
+        return Date.parse(value);
+      }
+
+      // This chart doesn't automatically parse strings into numbers
       const numValue = parseFloat(value);
       if (isNaN(numValue)) {
         return 0;
diff --git a/packages/client/src/components/app/charts/LineChart.svelte b/packages/client/src/components/app/charts/LineChart.svelte
index c80597f110..cc14fa6d2c 100644
--- a/packages/client/src/components/app/charts/LineChart.svelte
+++ b/packages/client/src/components/app/charts/LineChart.svelte
@@ -91,7 +91,13 @@
     return valueColumns.map(column => ({
       name: column,
       data: rows.map(row => {
-        return row?.[column]
+        const value = row?.[column]
+
+        if (dataProvider?.schema?.[column]?.type === "datetime" && value) {
+          return Date.parse(value);
+        }
+
+        return value
       }),
     }))
   }
diff --git a/packages/client/src/components/app/charts/PieChart.svelte b/packages/client/src/components/app/charts/PieChart.svelte
index 7b73bf9da0..16eca7e1c3 100644
--- a/packages/client/src/components/app/charts/PieChart.svelte
+++ b/packages/client/src/components/app/charts/PieChart.svelte
@@ -61,6 +61,12 @@
 
     return rows.map(row => {
       const value = row?.[valueColumn]
+
+      if (dataProvider?.schema?.[valueColumn]?.type === "datetime" && value) {
+        return Date.parse(value);
+      }
+
+      // This chart doesn't automatically parse strings into numbers
       const numValue = parseFloat(value);
       if (isNaN(numValue)) {
         return 0;

From e4386ed78156dfc99a515ac26a087dfd5978976f Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Fri, 19 Apr 2024 12:03:50 +0100
Subject: [PATCH 093/123] rekmove builder

---
 .../app/charts/ApexOptionsBuilder.js          | 207 ------------------
 .../components/app/charts/AreaChart.svelte    |   2 -
 .../src/components/app/charts/BarChart.svelte |   2 -
 .../app/charts/CandleStickChart.svelte        |   1 -
 .../app/charts/HistogramChart.svelte          |   3 -
 .../components/app/charts/LineChart.svelte    |   2 -
 6 files changed, 217 deletions(-)
 delete mode 100644 packages/client/src/components/app/charts/ApexOptionsBuilder.js

diff --git a/packages/client/src/components/app/charts/ApexOptionsBuilder.js b/packages/client/src/components/app/charts/ApexOptionsBuilder.js
deleted file mode 100644
index bd3146acaa..0000000000
--- a/packages/client/src/components/app/charts/ApexOptionsBuilder.js
+++ /dev/null
@@ -1,207 +0,0 @@
-export class ApexOptionsBuilder {
-  constructor() {
-    this.formatters = {
-      ["Default"]: val => val,
-      ["Thousands"]: val => `${Math.round(val / 1000)}K`,
-      ["Millions"]: val => `${Math.round(val / 1000000)}M`,
-    }
-    this.options = {
-      series: [],
-      noData:{
-        text: "no data to show"
-      },
-      legend: {
-        show: false,
-        position: "top",
-        horizontalAlign: "right",
-        showForSingleSeries: true,
-        showForNullSeries: true,
-        showForZeroSeries: true,
-      },
-      chart: {
-        toolbar: {
-          show: false,
-        },
-        zoom: {
-          enabled: false,
-        },
-      },
-      xaxis: {
-        labels: {
-          formatter: this.formatters.Default,
-        },
-      },
-      yaxis: {
-        labels: {
-          formatter: this.formatters.Default,
-        },
-      },
-    }
-  }
-
-  setOption(path, value) {
-    if (value == null || value === "") {
-      return this
-    }
-    let tmp = this.options
-    for (let i = 0; i < path.length - 1; i++) {
-      const step = path[i]
-      if (!tmp[step]) {
-        tmp[step] = {}
-      }
-      tmp = tmp[step]
-    }
-    tmp[path[path.length - 1]] = value
-    return this
-  }
-
-  getOptions() {
-    return this.options
-  }
-
-  type(type) {
-    return this.setOption(["chart", "type"], type)
-  }
-
-  title(title) {
-    return this.setOption(["title", "text"], title)
-  }
-
-  colors(colors) {
-    if (!colors) {
-      delete this.options.colors
-      this.options["customColor"] = false
-      return this
-    }
-    this.options["customColor"] = true
-    return this.setOption(["colors"], colors)
-  }
-
-  width(width) {
-    return this.setOption(["chart", "width"], width || undefined)
-  }
-
-  height(height) {
-    return this.setOption(["chart", "height"], height || undefined)
-  }
-
-  xLabel(label) {
-    return this.setOption(["xaxis", "title", "text"], label)
-  }
-
-  yLabel(label) {
-    return this.setOption(["yaxis", "title", "text"], label)
-  }
-
-  xCategories(categories) {
-    return this.setOption(["xaxis", "categories"], categories)
-  }
-
-  yCategories(categories) {
-    return this.setOption(["yaxis", "categories"], categories)
-  }
-
-  series(series) {
-    const foo = this.setOption(["series"], series)
-    return foo;
-  }
-
-  horizontal(horizontal) {
-    return this.setOption(["plotOptions", "bar", "horizontal"], horizontal)
-  }
-
-  dataLabels(dataLabels) {
-    return this.setOption(["dataLabels", "enabled"], dataLabels)
-  }
-
-  animate(animate) {
-    return this.setOption(["chart", "animations", "enabled"], animate)
-  }
-
-  curve(curve) {
-    return this.setOption(["stroke", "curve"], curve)
-  }
-
-  gradient(gradient) {
-    const fill = {
-      type: "gradient",
-      gradient: {
-        shadeIntensity: 1,
-        opacityFrom: 0.7,
-        opacityTo: 0.9,
-        stops: [0, 90, 100],
-      },
-    }
-    return this.setOption(["fill"], gradient ? fill : undefined)
-  }
-
-  legend(legend) {
-    return this.setOption(["legend", "show"], legend)
-  }
-
-  legendPosition(position) {
-    return this.setOption(["legend", "position"], position)
-  }
-
-  stacked(stacked) {
-    return this.setOption(["chart", "stacked"], stacked)
-  }
-
-  labels(labels) {
-    return this.setOption(["labels"], labels)
-  }
-
-  xUnits(units) {
-    return this.setOption(
-      ["xaxis", "labels", "formatter"],
-      this.formatters[units || "Default"]
-    )
-  }
-
-  yUnits(units) {
-    return this.setOption(
-      ["yaxis", "labels", "formatter"],
-      this.formatters[units || "Default"]
-    )
-  }
-
-  candleStick() {
-    this.options.xaxis.labels.formatter = (epoch) => {
-      return (new Date(epoch)).toDateString();
-    }
-
-    return this;
-  }
-
-  clearXFormatter() {
-    delete this.options.xaxis.labels
-    return this
-  }
-
-  clearYFormatter() {
-    delete this.options.yaxis.labels
-    return this
-  }
-
-  xType(type) {
-    return this.setOption(["xaxis", "type"], type)
-  }
-
-  yType(type) {
-    return this.setOption(["yaxis", "type"], type)
-  }
-
-  yTooltip(yTooltip) {
-    return this.setOption(["yaxis", "tooltip", "enabled"], yTooltip)
-  }
-
-  palette(palette) {
-    if (!palette) {
-      return this
-    }
-    return this.setOption(
-      ["theme", "palette"],
-      palette.toLowerCase().replace(/[\W]/g, "")
-    )
-  }
-}
diff --git a/packages/client/src/components/app/charts/AreaChart.svelte b/packages/client/src/components/app/charts/AreaChart.svelte
index 56d1975245..1bbb551551 100644
--- a/packages/client/src/components/app/charts/AreaChart.svelte
+++ b/packages/client/src/components/app/charts/AreaChart.svelte
@@ -1,7 +1,5 @@
 <script>
-  import { ApexOptionsBuilder } from "./ApexOptionsBuilder"
   import ApexChart from "./ApexChart.svelte"
-  import { get } from "lodash";
   import formatters from "./formatters"
 
   export let title
diff --git a/packages/client/src/components/app/charts/BarChart.svelte b/packages/client/src/components/app/charts/BarChart.svelte
index e30697955d..8fa2a29b9a 100644
--- a/packages/client/src/components/app/charts/BarChart.svelte
+++ b/packages/client/src/components/app/charts/BarChart.svelte
@@ -1,7 +1,5 @@
 <script>
-  import { ApexOptionsBuilder } from "./ApexOptionsBuilder"
   import ApexChart from "./ApexChart.svelte"
-  import { get } from "lodash";
   import formatters from "./formatters"
 
   export let dataProvider
diff --git a/packages/client/src/components/app/charts/CandleStickChart.svelte b/packages/client/src/components/app/charts/CandleStickChart.svelte
index 11d491471f..776de908c6 100644
--- a/packages/client/src/components/app/charts/CandleStickChart.svelte
+++ b/packages/client/src/components/app/charts/CandleStickChart.svelte
@@ -1,5 +1,4 @@
 <script>
-  import { ApexOptionsBuilder } from "./ApexOptionsBuilder"
   import ApexChart from "./ApexChart.svelte"
   import formatters from './formatters';
 
diff --git a/packages/client/src/components/app/charts/HistogramChart.svelte b/packages/client/src/components/app/charts/HistogramChart.svelte
index 58a461d61e..95f43dfb31 100644
--- a/packages/client/src/components/app/charts/HistogramChart.svelte
+++ b/packages/client/src/components/app/charts/HistogramChart.svelte
@@ -1,8 +1,5 @@
 <script>
-  import { ApexOptionsBuilder } from "./ApexOptionsBuilder"
   import ApexChart from "./ApexChart.svelte"
-  import { get } from "lodash";
-  import formatters from "./formatters"
 
   export let dataProvider
   export let valueColumn
diff --git a/packages/client/src/components/app/charts/LineChart.svelte b/packages/client/src/components/app/charts/LineChart.svelte
index cc14fa6d2c..712cfde3a8 100644
--- a/packages/client/src/components/app/charts/LineChart.svelte
+++ b/packages/client/src/components/app/charts/LineChart.svelte
@@ -1,7 +1,5 @@
 <script>
-  import { ApexOptionsBuilder } from "./ApexOptionsBuilder"
   import ApexChart from "./ApexChart.svelte"
-  import { get } from "lodash";
   import formatters from "./formatters"
 
   export let title

From 4690f787750a88d8421108bab49c527c6e3f5334 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Fri, 19 Apr 2024 13:45:01 +0100
Subject: [PATCH 094/123] add explanation modal type presets

---
 .../controls/FieldContext/FieldContext.svelte | 10 ++-
 .../controls/FieldContext/columnInfo.js       | 13 +++-
 .../settings/controls/FieldSelect.svelte      |  8 +--
 .../settings/controls/MultiFieldSelect.svelte | 12 ++--
 .../Component/ComponentSettingsSection.svelte |  3 +-
 .../builder/src/stores/builder/components.js  |  2 +
 packages/client/manifest.json                 | 61 +++++++------------
 .../server/src/api/controllers/component.ts   |  2 +-
 8 files changed, 57 insertions(+), 54 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/FieldContext.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/FieldContext.svelte
index ee558cbf95..0587ba73c6 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/FieldContext.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/FieldContext.svelte
@@ -1,10 +1,13 @@
 <script>
   import ExplanationModal from './ExplanationModal/index.svelte'
-  import { messages as messageConstants, getColumnInfoMessagesAndSupport } from "./columnInfo";
+  import { messages as messageConstants, getColumnInfoMessagesAndSupport, getExplanationWithPresets } from "./columnInfo";
   import { Column, Support, NotRequired, StringNumber, JSONPrimitivesOnly, DateAsNumber } from "./lines"
   import subjects from './subjects';
+  import {
+    componentStore,
+  } from "stores/builder"
 
-  export let columnInfo
+  export let explanation
   export let columnIcon
   export let columnType
   export let columnName
@@ -14,11 +17,12 @@
 
   export let schema
 
+  $: explanationWithPresets = getExplanationWithPresets(explanation, $componentStore.typeSupportPresets)
   let support
   let messages = []
 
   $: {
-    const columnInfoMessagesAndSupport = getColumnInfoMessagesAndSupport(schema, columnInfo)
+    const columnInfoMessagesAndSupport = getColumnInfoMessagesAndSupport(schema, explanationWithPresets)
     support = columnInfoMessagesAndSupport.support
     messages = columnInfoMessagesAndSupport.messages
   }
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/columnInfo.js b/packages/builder/src/components/design/settings/controls/FieldContext/columnInfo.js
index 5588e44bbc..efc5b0421d 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/columnInfo.js
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/columnInfo.js
@@ -54,7 +54,7 @@ const getSupportMessage = (type, columnInfo) => {
   return null
 }
 
-export const getColumnInfoMessagesAndSupport = (fieldSchema, columnInfo) => {
+export const getColumnInfoMessagesAndSupport = (fieldSchema, columnInfo, typeSupportPresets) => {
   try {
     const columnInfoMessagesAndSupport = {
       support: getSupport(fieldSchema.type, columnInfo),
@@ -74,3 +74,14 @@ export const getColumnInfoMessagesAndSupport = (fieldSchema, columnInfo) => {
     }
   }
 }
+
+export const getExplanationWithPresets = (explanation, presets) => {
+  if (explanation?.typeSupport?.preset) {
+    return {
+      ...explanation,
+      typeSupport: presets[explanation?.typeSupport?.preset]
+    }
+  }
+
+  return explanation
+}
diff --git a/packages/builder/src/components/design/settings/controls/FieldSelect.svelte b/packages/builder/src/components/design/settings/controls/FieldSelect.svelte
index 7dd346d701..78bbf2cb24 100644
--- a/packages/builder/src/components/design/settings/controls/FieldSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldSelect.svelte
@@ -12,7 +12,7 @@
   export let componentInstance = {}
   export let value = ""
   export let placeholder
-  export let columnInfo
+  export let explanation
 
   let contextTooltipAnchor = null
   let currentOption = null
@@ -103,7 +103,7 @@
   {onOptionMouseleave}
 />
 
-{#if columnInfo}
+{#if explanation}
   <ContextTooltip
     visible={contextTooltipVisible}
     anchor={contextTooltipAnchor}
@@ -116,7 +116,7 @@
       columnIcon={getOptionIcon(currentOption)}
       columnName={currentOption}
       columnType={getOptionIconTooltip(currentOption)}
-      {columnInfo}
+      {explanation}
     />
     <FieldContext
       slot="previous"
@@ -124,7 +124,7 @@
       columnIcon={getOptionIcon(previousOption)}
       columnName={previousOption}
       columnType={getOptionIconTooltip(previousOption)}
-      {columnInfo}
+      {explanation}
     />
   </ContextTooltip>
 {/if}
diff --git a/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte b/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
index 2c043c1da2..1e8431db45 100644
--- a/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
@@ -14,7 +14,11 @@
   export let componentInstance = {}
   export let value = ""
   export let placeholder
-  export let columnInfo
+  export let explanation
+
+  $: {
+    console.log($componentStore);
+  }
 
   let contextTooltipAnchor = null
   let currentOption = null
@@ -109,7 +113,7 @@
   {onOptionMouseleave}
 />
 
-{#if columnInfo}
+{#if explanation}
   <ContextTooltip
     visible={contextTooltipVisible}
     anchor={contextTooltipAnchor}
@@ -122,7 +126,7 @@
       columnIcon={getOptionIcon(currentOption)}
       columnName={currentOption}
       columnType={getOptionIconTooltip(currentOption)}
-      {columnInfo}
+      {explanation}
     />
     <FieldContext
       slot="previous"
@@ -130,7 +134,7 @@
       columnIcon={getOptionIcon(previousOption)}
       columnName={previousOption}
       columnType={getOptionIconTooltip(previousOption)}
-      {columnInfo}
+      {explanation}
     />
   </ContextTooltip>
 {/if}
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte
index c861249e17..54241ea1cc 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte
@@ -193,8 +193,7 @@
                 max: setting.max ?? null,
 
                 // Field select settings
-                columnInfo: setting.columnInfo,
-                valueTypes: setting.valueTypes
+                explanation: setting.explanation,
               }}
               {bindings}
               {componentBindings}
diff --git a/packages/builder/src/stores/builder/components.js b/packages/builder/src/stores/builder/components.js
index fe5f4e8a05..c88864de89 100644
--- a/packages/builder/src/stores/builder/components.js
+++ b/packages/builder/src/stores/builder/components.js
@@ -95,6 +95,7 @@ export class ComponentStore extends BudiStore {
     // Fetch definitions and filter out custom component definitions so we
     // can flag them
     const components = await API.fetchComponentLibDefinitions(appId)
+    console.log(components);
     const customComponents = Object.keys(components).filter(key =>
       key.startsWith("plugin/")
     )
@@ -104,6 +105,7 @@ export class ComponentStore extends BudiStore {
       ...state,
       components,
       customComponents,
+      typeSupportPresets: components?.typeSupportPresets ?? {}
     }))
 
     // Sync client features to app store
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 96cdcf4927..3253cbcc98 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -13,6 +13,22 @@
     "sidePanel": true,
     "skeletonLoader": true
   },
+  "typeSupportPresets": {
+    "chartValue": {
+      "supported": ["number", "boolean"],
+      "partialSupport": [
+        { "type": "longform", "message": "stringAsNumber" },
+        { "type": "string", "message": "stringAsNumber" },
+        { "type": "bigint", "message": "stringAsNumber" },
+        { "type": "options", "message": "stringAsNumber" },
+        { "type": "formula", "message": "stringAsNumber" },
+        { "type": "datetime", "message": "dateAsNumber"}
+      ],
+      "unsupported": [
+        { "type": "json", "message": "jsonPrimitivesOnly" }
+      ]
+    }
+  },
   "layout": {
     "name": "Layout",
     "description": "This component is specific only to layouts",
@@ -1634,20 +1650,9 @@
         "label": "Data columns",
         "key": "valueColumns",
         "dependsOn": "dataProvider",
-        "columnInfo": {
+        "explanation": {
           "typeSupport": {
-            "supported": ["number", "boolean"],
-            "partialSupport": [
-              { "type": "longform", "message": "stringAsNumber" },
-              { "type": "string", "message": "stringAsNumber" },
-              { "type": "bigint", "message": "stringAsNumber" },
-              { "type": "options", "message": "stringAsNumber" },
-              { "type": "formula", "message": "stringAsNumber" },
-              { "type": "datetime", "message": "dateAsNumber"}
-            ],
-            "unsupported": [
-              { "type": "json", "message": "jsonPrimitivesOnly" }
-            ]
+            "preset": "chartValue"
           }
         },
         "required": true
@@ -1809,20 +1814,9 @@
         "label": "Data columns",
         "key": "valueColumns",
         "dependsOn": "dataProvider",
-        "columnInfo": {
+        "explanation": {
           "typeSupport": {
-            "supported": ["number", "boolean"],
-            "partialSupport": [
-              { "type": "longform", "message": "stringAsNumber" },
-              { "type": "string", "message": "stringAsNumber" },
-              { "type": "bigint", "message": "stringAsNumber" },
-              { "type": "options", "message": "stringAsNumber" },
-              { "type": "formula", "message": "stringAsNumber" },
-              { "type": "datetime", "message": "dateAsNumber"}
-            ],
-            "unsupported": [
-              { "type": "json", "message": "jsonPrimitivesOnly" }
-            ]
+            "preset": "chartValue"
           }
         },
         "required": true
@@ -1979,20 +1973,9 @@
         "label": "Data columns",
         "key": "valueColumns",
         "dependsOn": "dataProvider",
-        "columnInfo": {
+        "explanation": {
           "typeSupport": {
-            "supported": ["number", "boolean"],
-            "partialSupport": [
-              { "type": "longform", "message": "stringAsNumber" },
-              { "type": "string", "message": "stringAsNumber" },
-              { "type": "bigint", "message": "stringAsNumber" },
-              { "type": "options", "message": "stringAsNumber" },
-              { "type": "formula", "message": "stringAsNumber" },
-              { "type": "datetime", "message": "dateAsNumber"}
-            ],
-            "unsupported": [
-              { "type": "json", "message": "jsonPrimitivesOnly" }
-            ]
+            "preset": "chartValue"
           }
         },
         "required": true
diff --git a/packages/server/src/api/controllers/component.ts b/packages/server/src/api/controllers/component.ts
index 12051be770..44d7255ecb 100644
--- a/packages/server/src/api/controllers/component.ts
+++ b/packages/server/src/api/controllers/component.ts
@@ -20,7 +20,7 @@ export async function fetchAppComponentDefinitions(ctx: UserCtx) {
     const definitions: { [key: string]: any } = {}
     for (let { manifest, library } of componentManifests) {
       for (let key of Object.keys(manifest)) {
-        if (key === "features") {
+        if (key === "features" || key === "typeSupportPresets") {
           definitions[key] = manifest[key]
         } else {
           const fullComponentName = `${library}/${key}`.toLowerCase()

From dc0bbbd450eb80e19fae23945e539214621714ee Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Fri, 19 Apr 2024 13:49:31 +0100
Subject: [PATCH 095/123] rename

---
 .../controls/FieldContext/FieldContext.svelte |  4 +-
 .../controls/FieldContext/columnInfo.js       | 46 +++++++++----------
 2 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/FieldContext.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/FieldContext.svelte
index 0587ba73c6..d96dd6b098 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/FieldContext.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/FieldContext.svelte
@@ -1,6 +1,6 @@
 <script>
   import ExplanationModal from './ExplanationModal/index.svelte'
-  import { messages as messageConstants, getColumnInfoMessagesAndSupport, getExplanationWithPresets } from "./columnInfo";
+  import { messages as messageConstants, getExplanationMessagesAndSupport, getExplanationWithPresets } from "./columnInfo";
   import { Column, Support, NotRequired, StringNumber, JSONPrimitivesOnly, DateAsNumber } from "./lines"
   import subjects from './subjects';
   import {
@@ -22,7 +22,7 @@
   let messages = []
 
   $: {
-    const columnInfoMessagesAndSupport = getColumnInfoMessagesAndSupport(schema, explanationWithPresets)
+    const columnInfoMessagesAndSupport = getExplanationMessagesAndSupport(schema, explanationWithPresets)
     support = columnInfoMessagesAndSupport.support
     messages = columnInfoMessagesAndSupport.messages
   }
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/columnInfo.js b/packages/builder/src/components/design/settings/controls/FieldContext/columnInfo.js
index efc5b0421d..fa04fbe0ec 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/columnInfo.js
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/columnInfo.js
@@ -1,52 +1,52 @@
 import { capitalize } from 'lodash';
 
 export const messages = {
-  jsonPrimitivesOnly: Symbol("column-info-json-primitives-only"),
-  stringAsNumber: Symbol("column-info-string-as-number"),
-  dateAsNumber: Symbol("column-info-date-as-number"),
-  notRequired: Symbol("column-info-not-required"),
-  contextError: Symbol("column-info-context-error"),
+  jsonPrimitivesOnly: Symbol("explanation-json-primitives-only"),
+  stringAsNumber: Symbol("explanation-string-as-number"),
+  dateAsNumber: Symbol("explanation-date-as-number"),
+  notRequired: Symbol("explanation-not-required"),
+  contextError: Symbol("explanation-context-error"),
 }
 
 export const support = {
-  unsupported: Symbol("column-info-unsupported"),
-  partialSupport: Symbol("column-info-partialSupport"),
-  supported: Symbol("column-info-supported")
+  unsupported: Symbol("explanation-unsupported"),
+  partialSupport: Symbol("explanation-partialSupport"),
+  supported: Symbol("explanation-supported")
 }
 
 
-const getSupport = (type, columnInfo) => {
-  if (!columnInfo?.typeSupport) {
+const getSupport = (type, explanation) => {
+  if (!explanation?.typeSupport) {
     return support.supported
   }
 
-  if (columnInfo?.typeSupport?.supported?.find(mapping => mapping === type || mapping?.type === type)) {
+  if (explanation?.typeSupport?.supported?.find(mapping => mapping === type || mapping?.type === type)) {
     return support.supported;
   }
 
-  if (columnInfo?.typeSupport?.partialSupport?.find(mapping => mapping === type || mapping?.type === type)) {
+  if (explanation?.typeSupport?.partialSupport?.find(mapping => mapping === type || mapping?.type === type)) {
     return support.partialSupport;
   }
 
   return support.unsupported
 }
 
-const getSupportMessage = (type, columnInfo) => {
-  if (!columnInfo?.typeSupport) {
+const getSupportMessage = (type, explanation) => {
+  if (!explanation?.typeSupport) {
     return null
   }
 
-  const supported = columnInfo?.typeSupport?.supported?.find(mapping => mapping?.type === type)
+  const supported = explanation?.typeSupport?.supported?.find(mapping => mapping?.type === type)
   if (supported) {
     return messages[supported?.message]
   }
 
-  const partialSupport = columnInfo?.typeSupport?.partialSupport?.find(mapping => mapping?.type === type)
+  const partialSupport = explanation?.typeSupport?.partialSupport?.find(mapping => mapping?.type === type)
   if (partialSupport) {
     return messages[partialSupport?.message]
   }
 
-  const unsupported = columnInfo?.typeSupport?.unsupported?.find(mapping => mapping?.type === type)
+  const unsupported = explanation?.typeSupport?.unsupported?.find(mapping => mapping?.type === type)
   if (unsupported) {
     return messages[unsupported?.message]
   }
@@ -54,19 +54,19 @@ const getSupportMessage = (type, columnInfo) => {
   return null
 }
 
-export const getColumnInfoMessagesAndSupport = (fieldSchema, columnInfo, typeSupportPresets) => {
+export const getExplanationMessagesAndSupport = (fieldSchema, explanation, typeSupportPresets) => {
   try {
-    const columnInfoMessagesAndSupport = {
-      support: getSupport(fieldSchema.type, columnInfo),
-      messages: [getSupportMessage(fieldSchema.type, columnInfo)],
+    const explanationMessagesAndSupport = {
+      support: getSupport(fieldSchema.type, explanation),
+      messages: [getSupportMessage(fieldSchema.type, explanation)],
     }
 
     const isRequired = fieldSchema?.constraints?.presence?.allowEmpty === false
     if (!isRequired) {
-      columnInfoMessagesAndSupport.messages.push(messages.notRequired);
+      explanationMessagesAndSupport.messages.push(messages.notRequired);
     }
 
-    return columnInfoMessagesAndSupport;
+    return explanationMessagesAndSupport;
   } catch (e) {
     return {
       support: support.partialSupport,

From b0e7892e7bd272c6b0b26f8634f1ee229558f3b4 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Fri, 19 Apr 2024 14:12:32 +0100
Subject: [PATCH 096/123] rename

---
 .../FieldContext.svelte => Explanation/Explanation.svelte}  | 0
 .../ExplanationModal/index.svelte                           | 0
 .../ExplanationModal/subjects/Column.svelte                 | 0
 .../ExplanationModal/subjects/DatesAsNumbers.svelte         | 0
 .../ExplanationModal/subjects/NotRequired.svelte            | 0
 .../ExplanationModal/subjects/ScalarJsonOnly.svelte         | 0
 .../ExplanationModal/subjects/StringsAsNumbers.svelte       | 0
 .../ExplanationModal/subjects/Support.svelte                | 0
 .../subjects/components/BindingValue.svelte                 | 0
 .../ExplanationModal/subjects/components/Block.svelte       | 0
 .../ExplanationModal/subjects/components/ExampleLine.svelte | 0
 .../subjects/components/ExampleSection.svelte               | 0
 .../ExplanationModal/subjects/components/JSONValue.svelte   | 0
 .../ExplanationModal/subjects/components/Property.svelte    | 0
 .../ExplanationModal/subjects/components/Section.svelte     | 0
 .../ExplanationModal/subjects/components/Subject.svelte     | 0
 .../ExplanationModal/subjects/components/index.js           | 0
 .../ExplanationModal/subjects/index.js                      | 0
 .../controls/{FieldContext => Explanation}/columnInfo.js    | 0
 .../design/settings/controls/Explanation/index.js           | 1 +
 .../{FieldContext => Explanation}/lines/Column.svelte       | 0
 .../{FieldContext => Explanation}/lines/DateAsNumber.svelte | 0
 .../lines/JSONPrimitivesOnly.svelte                         | 0
 .../{FieldContext => Explanation}/lines/NotRequired.svelte  | 0
 .../{FieldContext => Explanation}/lines/StringNumber.svelte | 0
 .../{FieldContext => Explanation}/lines/Support.svelte      | 0
 .../controls/{FieldContext => Explanation}/lines/index.js   | 0
 .../controls/{FieldContext => Explanation}/subjects.js      | 0
 .../{FieldContext => Explanation}/typography/Comma.svelte   | 0
 .../typography/DocumentationLink.svelte                     | 0
 .../typography/InfoWord.svelte                              | 0
 .../{FieldContext => Explanation}/typography/Line.svelte    | 0
 .../{FieldContext => Explanation}/typography/Period.svelte  | 0
 .../{FieldContext => Explanation}/typography/Space.svelte   | 0
 .../{FieldContext => Explanation}/typography/Text.svelte    | 0
 .../{FieldContext => Explanation}/typography/index.js       | 0
 .../design/settings/controls/FieldContext/index.js          | 1 -
 .../components/design/settings/controls/FieldSelect.svelte  | 6 +++---
 .../design/settings/controls/MultiFieldSelect.svelte        | 6 +++---
 39 files changed, 7 insertions(+), 7 deletions(-)
 rename packages/builder/src/components/design/settings/controls/{FieldContext/FieldContext.svelte => Explanation/Explanation.svelte} (100%)
 rename packages/builder/src/components/design/settings/controls/{FieldContext => Explanation}/ExplanationModal/index.svelte (100%)
 rename packages/builder/src/components/design/settings/controls/{FieldContext => Explanation}/ExplanationModal/subjects/Column.svelte (100%)
 rename packages/builder/src/components/design/settings/controls/{FieldContext => Explanation}/ExplanationModal/subjects/DatesAsNumbers.svelte (100%)
 rename packages/builder/src/components/design/settings/controls/{FieldContext => Explanation}/ExplanationModal/subjects/NotRequired.svelte (100%)
 rename packages/builder/src/components/design/settings/controls/{FieldContext => Explanation}/ExplanationModal/subjects/ScalarJsonOnly.svelte (100%)
 rename packages/builder/src/components/design/settings/controls/{FieldContext => Explanation}/ExplanationModal/subjects/StringsAsNumbers.svelte (100%)
 rename packages/builder/src/components/design/settings/controls/{FieldContext => Explanation}/ExplanationModal/subjects/Support.svelte (100%)
 rename packages/builder/src/components/design/settings/controls/{FieldContext => Explanation}/ExplanationModal/subjects/components/BindingValue.svelte (100%)
 rename packages/builder/src/components/design/settings/controls/{FieldContext => Explanation}/ExplanationModal/subjects/components/Block.svelte (100%)
 rename packages/builder/src/components/design/settings/controls/{FieldContext => Explanation}/ExplanationModal/subjects/components/ExampleLine.svelte (100%)
 rename packages/builder/src/components/design/settings/controls/{FieldContext => Explanation}/ExplanationModal/subjects/components/ExampleSection.svelte (100%)
 rename packages/builder/src/components/design/settings/controls/{FieldContext => Explanation}/ExplanationModal/subjects/components/JSONValue.svelte (100%)
 rename packages/builder/src/components/design/settings/controls/{FieldContext => Explanation}/ExplanationModal/subjects/components/Property.svelte (100%)
 rename packages/builder/src/components/design/settings/controls/{FieldContext => Explanation}/ExplanationModal/subjects/components/Section.svelte (100%)
 rename packages/builder/src/components/design/settings/controls/{FieldContext => Explanation}/ExplanationModal/subjects/components/Subject.svelte (100%)
 rename packages/builder/src/components/design/settings/controls/{FieldContext => Explanation}/ExplanationModal/subjects/components/index.js (100%)
 rename packages/builder/src/components/design/settings/controls/{FieldContext => Explanation}/ExplanationModal/subjects/index.js (100%)
 rename packages/builder/src/components/design/settings/controls/{FieldContext => Explanation}/columnInfo.js (100%)
 create mode 100644 packages/builder/src/components/design/settings/controls/Explanation/index.js
 rename packages/builder/src/components/design/settings/controls/{FieldContext => Explanation}/lines/Column.svelte (100%)
 rename packages/builder/src/components/design/settings/controls/{FieldContext => Explanation}/lines/DateAsNumber.svelte (100%)
 rename packages/builder/src/components/design/settings/controls/{FieldContext => Explanation}/lines/JSONPrimitivesOnly.svelte (100%)
 rename packages/builder/src/components/design/settings/controls/{FieldContext => Explanation}/lines/NotRequired.svelte (100%)
 rename packages/builder/src/components/design/settings/controls/{FieldContext => Explanation}/lines/StringNumber.svelte (100%)
 rename packages/builder/src/components/design/settings/controls/{FieldContext => Explanation}/lines/Support.svelte (100%)
 rename packages/builder/src/components/design/settings/controls/{FieldContext => Explanation}/lines/index.js (100%)
 rename packages/builder/src/components/design/settings/controls/{FieldContext => Explanation}/subjects.js (100%)
 rename packages/builder/src/components/design/settings/controls/{FieldContext => Explanation}/typography/Comma.svelte (100%)
 rename packages/builder/src/components/design/settings/controls/{FieldContext => Explanation}/typography/DocumentationLink.svelte (100%)
 rename packages/builder/src/components/design/settings/controls/{FieldContext => Explanation}/typography/InfoWord.svelte (100%)
 rename packages/builder/src/components/design/settings/controls/{FieldContext => Explanation}/typography/Line.svelte (100%)
 rename packages/builder/src/components/design/settings/controls/{FieldContext => Explanation}/typography/Period.svelte (100%)
 rename packages/builder/src/components/design/settings/controls/{FieldContext => Explanation}/typography/Space.svelte (100%)
 rename packages/builder/src/components/design/settings/controls/{FieldContext => Explanation}/typography/Text.svelte (100%)
 rename packages/builder/src/components/design/settings/controls/{FieldContext => Explanation}/typography/index.js (100%)
 delete mode 100644 packages/builder/src/components/design/settings/controls/FieldContext/index.js

diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/FieldContext.svelte b/packages/builder/src/components/design/settings/controls/Explanation/Explanation.svelte
similarity index 100%
rename from packages/builder/src/components/design/settings/controls/FieldContext/FieldContext.svelte
rename to packages/builder/src/components/design/settings/controls/Explanation/Explanation.svelte
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/index.svelte b/packages/builder/src/components/design/settings/controls/Explanation/ExplanationModal/index.svelte
similarity index 100%
rename from packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/index.svelte
rename to packages/builder/src/components/design/settings/controls/Explanation/ExplanationModal/index.svelte
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/Column.svelte b/packages/builder/src/components/design/settings/controls/Explanation/ExplanationModal/subjects/Column.svelte
similarity index 100%
rename from packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/Column.svelte
rename to packages/builder/src/components/design/settings/controls/Explanation/ExplanationModal/subjects/Column.svelte
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/DatesAsNumbers.svelte b/packages/builder/src/components/design/settings/controls/Explanation/ExplanationModal/subjects/DatesAsNumbers.svelte
similarity index 100%
rename from packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/DatesAsNumbers.svelte
rename to packages/builder/src/components/design/settings/controls/Explanation/ExplanationModal/subjects/DatesAsNumbers.svelte
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/NotRequired.svelte b/packages/builder/src/components/design/settings/controls/Explanation/ExplanationModal/subjects/NotRequired.svelte
similarity index 100%
rename from packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/NotRequired.svelte
rename to packages/builder/src/components/design/settings/controls/Explanation/ExplanationModal/subjects/NotRequired.svelte
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/ScalarJsonOnly.svelte b/packages/builder/src/components/design/settings/controls/Explanation/ExplanationModal/subjects/ScalarJsonOnly.svelte
similarity index 100%
rename from packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/ScalarJsonOnly.svelte
rename to packages/builder/src/components/design/settings/controls/Explanation/ExplanationModal/subjects/ScalarJsonOnly.svelte
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/StringsAsNumbers.svelte b/packages/builder/src/components/design/settings/controls/Explanation/ExplanationModal/subjects/StringsAsNumbers.svelte
similarity index 100%
rename from packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/StringsAsNumbers.svelte
rename to packages/builder/src/components/design/settings/controls/Explanation/ExplanationModal/subjects/StringsAsNumbers.svelte
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/Support.svelte b/packages/builder/src/components/design/settings/controls/Explanation/ExplanationModal/subjects/Support.svelte
similarity index 100%
rename from packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/Support.svelte
rename to packages/builder/src/components/design/settings/controls/Explanation/ExplanationModal/subjects/Support.svelte
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/BindingValue.svelte b/packages/builder/src/components/design/settings/controls/Explanation/ExplanationModal/subjects/components/BindingValue.svelte
similarity index 100%
rename from packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/BindingValue.svelte
rename to packages/builder/src/components/design/settings/controls/Explanation/ExplanationModal/subjects/components/BindingValue.svelte
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Block.svelte b/packages/builder/src/components/design/settings/controls/Explanation/ExplanationModal/subjects/components/Block.svelte
similarity index 100%
rename from packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Block.svelte
rename to packages/builder/src/components/design/settings/controls/Explanation/ExplanationModal/subjects/components/Block.svelte
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/ExampleLine.svelte b/packages/builder/src/components/design/settings/controls/Explanation/ExplanationModal/subjects/components/ExampleLine.svelte
similarity index 100%
rename from packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/ExampleLine.svelte
rename to packages/builder/src/components/design/settings/controls/Explanation/ExplanationModal/subjects/components/ExampleLine.svelte
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/ExampleSection.svelte b/packages/builder/src/components/design/settings/controls/Explanation/ExplanationModal/subjects/components/ExampleSection.svelte
similarity index 100%
rename from packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/ExampleSection.svelte
rename to packages/builder/src/components/design/settings/controls/Explanation/ExplanationModal/subjects/components/ExampleSection.svelte
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/JSONValue.svelte b/packages/builder/src/components/design/settings/controls/Explanation/ExplanationModal/subjects/components/JSONValue.svelte
similarity index 100%
rename from packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/JSONValue.svelte
rename to packages/builder/src/components/design/settings/controls/Explanation/ExplanationModal/subjects/components/JSONValue.svelte
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Property.svelte b/packages/builder/src/components/design/settings/controls/Explanation/ExplanationModal/subjects/components/Property.svelte
similarity index 100%
rename from packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Property.svelte
rename to packages/builder/src/components/design/settings/controls/Explanation/ExplanationModal/subjects/components/Property.svelte
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Section.svelte b/packages/builder/src/components/design/settings/controls/Explanation/ExplanationModal/subjects/components/Section.svelte
similarity index 100%
rename from packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Section.svelte
rename to packages/builder/src/components/design/settings/controls/Explanation/ExplanationModal/subjects/components/Section.svelte
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Subject.svelte b/packages/builder/src/components/design/settings/controls/Explanation/ExplanationModal/subjects/components/Subject.svelte
similarity index 100%
rename from packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Subject.svelte
rename to packages/builder/src/components/design/settings/controls/Explanation/ExplanationModal/subjects/components/Subject.svelte
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/index.js b/packages/builder/src/components/design/settings/controls/Explanation/ExplanationModal/subjects/components/index.js
similarity index 100%
rename from packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/index.js
rename to packages/builder/src/components/design/settings/controls/Explanation/ExplanationModal/subjects/components/index.js
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/index.js b/packages/builder/src/components/design/settings/controls/Explanation/ExplanationModal/subjects/index.js
similarity index 100%
rename from packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/index.js
rename to packages/builder/src/components/design/settings/controls/Explanation/ExplanationModal/subjects/index.js
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/columnInfo.js b/packages/builder/src/components/design/settings/controls/Explanation/columnInfo.js
similarity index 100%
rename from packages/builder/src/components/design/settings/controls/FieldContext/columnInfo.js
rename to packages/builder/src/components/design/settings/controls/Explanation/columnInfo.js
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/index.js b/packages/builder/src/components/design/settings/controls/Explanation/index.js
new file mode 100644
index 0000000000..5780c1de14
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/Explanation/index.js
@@ -0,0 +1 @@
+export { default as Explanation } from "./Explanation.svelte"
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/lines/Column.svelte b/packages/builder/src/components/design/settings/controls/Explanation/lines/Column.svelte
similarity index 100%
rename from packages/builder/src/components/design/settings/controls/FieldContext/lines/Column.svelte
rename to packages/builder/src/components/design/settings/controls/Explanation/lines/Column.svelte
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/lines/DateAsNumber.svelte b/packages/builder/src/components/design/settings/controls/Explanation/lines/DateAsNumber.svelte
similarity index 100%
rename from packages/builder/src/components/design/settings/controls/FieldContext/lines/DateAsNumber.svelte
rename to packages/builder/src/components/design/settings/controls/Explanation/lines/DateAsNumber.svelte
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/lines/JSONPrimitivesOnly.svelte b/packages/builder/src/components/design/settings/controls/Explanation/lines/JSONPrimitivesOnly.svelte
similarity index 100%
rename from packages/builder/src/components/design/settings/controls/FieldContext/lines/JSONPrimitivesOnly.svelte
rename to packages/builder/src/components/design/settings/controls/Explanation/lines/JSONPrimitivesOnly.svelte
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/lines/NotRequired.svelte b/packages/builder/src/components/design/settings/controls/Explanation/lines/NotRequired.svelte
similarity index 100%
rename from packages/builder/src/components/design/settings/controls/FieldContext/lines/NotRequired.svelte
rename to packages/builder/src/components/design/settings/controls/Explanation/lines/NotRequired.svelte
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/lines/StringNumber.svelte b/packages/builder/src/components/design/settings/controls/Explanation/lines/StringNumber.svelte
similarity index 100%
rename from packages/builder/src/components/design/settings/controls/FieldContext/lines/StringNumber.svelte
rename to packages/builder/src/components/design/settings/controls/Explanation/lines/StringNumber.svelte
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/lines/Support.svelte b/packages/builder/src/components/design/settings/controls/Explanation/lines/Support.svelte
similarity index 100%
rename from packages/builder/src/components/design/settings/controls/FieldContext/lines/Support.svelte
rename to packages/builder/src/components/design/settings/controls/Explanation/lines/Support.svelte
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/lines/index.js b/packages/builder/src/components/design/settings/controls/Explanation/lines/index.js
similarity index 100%
rename from packages/builder/src/components/design/settings/controls/FieldContext/lines/index.js
rename to packages/builder/src/components/design/settings/controls/Explanation/lines/index.js
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/subjects.js b/packages/builder/src/components/design/settings/controls/Explanation/subjects.js
similarity index 100%
rename from packages/builder/src/components/design/settings/controls/FieldContext/subjects.js
rename to packages/builder/src/components/design/settings/controls/Explanation/subjects.js
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/typography/Comma.svelte b/packages/builder/src/components/design/settings/controls/Explanation/typography/Comma.svelte
similarity index 100%
rename from packages/builder/src/components/design/settings/controls/FieldContext/typography/Comma.svelte
rename to packages/builder/src/components/design/settings/controls/Explanation/typography/Comma.svelte
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/typography/DocumentationLink.svelte b/packages/builder/src/components/design/settings/controls/Explanation/typography/DocumentationLink.svelte
similarity index 100%
rename from packages/builder/src/components/design/settings/controls/FieldContext/typography/DocumentationLink.svelte
rename to packages/builder/src/components/design/settings/controls/Explanation/typography/DocumentationLink.svelte
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/typography/InfoWord.svelte b/packages/builder/src/components/design/settings/controls/Explanation/typography/InfoWord.svelte
similarity index 100%
rename from packages/builder/src/components/design/settings/controls/FieldContext/typography/InfoWord.svelte
rename to packages/builder/src/components/design/settings/controls/Explanation/typography/InfoWord.svelte
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/typography/Line.svelte b/packages/builder/src/components/design/settings/controls/Explanation/typography/Line.svelte
similarity index 100%
rename from packages/builder/src/components/design/settings/controls/FieldContext/typography/Line.svelte
rename to packages/builder/src/components/design/settings/controls/Explanation/typography/Line.svelte
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/typography/Period.svelte b/packages/builder/src/components/design/settings/controls/Explanation/typography/Period.svelte
similarity index 100%
rename from packages/builder/src/components/design/settings/controls/FieldContext/typography/Period.svelte
rename to packages/builder/src/components/design/settings/controls/Explanation/typography/Period.svelte
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/typography/Space.svelte b/packages/builder/src/components/design/settings/controls/Explanation/typography/Space.svelte
similarity index 100%
rename from packages/builder/src/components/design/settings/controls/FieldContext/typography/Space.svelte
rename to packages/builder/src/components/design/settings/controls/Explanation/typography/Space.svelte
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/typography/Text.svelte b/packages/builder/src/components/design/settings/controls/Explanation/typography/Text.svelte
similarity index 100%
rename from packages/builder/src/components/design/settings/controls/FieldContext/typography/Text.svelte
rename to packages/builder/src/components/design/settings/controls/Explanation/typography/Text.svelte
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/typography/index.js b/packages/builder/src/components/design/settings/controls/Explanation/typography/index.js
similarity index 100%
rename from packages/builder/src/components/design/settings/controls/FieldContext/typography/index.js
rename to packages/builder/src/components/design/settings/controls/Explanation/typography/index.js
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/index.js b/packages/builder/src/components/design/settings/controls/FieldContext/index.js
deleted file mode 100644
index a89adba95e..0000000000
--- a/packages/builder/src/components/design/settings/controls/FieldContext/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default as FieldContext } from "./FieldContext.svelte"
diff --git a/packages/builder/src/components/design/settings/controls/FieldSelect.svelte b/packages/builder/src/components/design/settings/controls/FieldSelect.svelte
index 78bbf2cb24..9691b4caf2 100644
--- a/packages/builder/src/components/design/settings/controls/FieldSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldSelect.svelte
@@ -3,7 +3,7 @@
   import { getDatasourceForProvider, getSchemaForDatasource } from "dataBinding"
   import { selectedScreen } from "stores/builder"
   import { createEventDispatcher } from "svelte"
-  import { FieldContext } from './FieldContext'
+  import { Explanation } from './Explanation'
   import { debounce } from "lodash"
   import { goto, params } from "@roxi/routify"
   import { Constants } from "@budibase/frontend-core"
@@ -109,7 +109,7 @@
     anchor={contextTooltipAnchor}
     offset={20}
   >
-    <FieldContext
+    <Explanation
       explanationModal
       tableHref={`/builder/app/${$params.application}/data/table/${datasource?.tableId}`}
       schema={schema[currentOption]}
@@ -118,7 +118,7 @@
       columnType={getOptionIconTooltip(currentOption)}
       {explanation}
     />
-    <FieldContext
+    <Explanation
       slot="previous"
       schema={schema[previousOption]}
       columnIcon={getOptionIcon(previousOption)}
diff --git a/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte b/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
index 1e8431db45..6f95ab3bf9 100644
--- a/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
@@ -5,7 +5,7 @@
     componentStore,
   } from "stores/builder"
   import { createEventDispatcher } from "svelte"
-  import { FieldContext } from './FieldContext'
+  import { Explanation } from './Explanation'
   import { FIELDS } from 'constants/backend'
   import { goto, params } from "@roxi/routify"
   import { debounce } from "lodash"
@@ -119,7 +119,7 @@
     anchor={contextTooltipAnchor}
     offset={20}
   >
-    <FieldContext
+    <Explanation
       explanationModal
       tableHref={`/builder/app/${$params.application}/data/table/${datasource?.tableId}`}
       schema={schema[currentOption]}
@@ -128,7 +128,7 @@
       columnType={getOptionIconTooltip(currentOption)}
       {explanation}
     />
-    <FieldContext
+    <Explanation
       slot="previous"
       schema={schema[previousOption]}
       columnIcon={getOptionIcon(previousOption)}

From 97c0c272a8927f29fda020f5bf0e271aedeaa931 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Fri, 19 Apr 2024 14:29:41 +0100
Subject: [PATCH 097/123] wip

---
 .../controls/Explanation/Explanation.svelte        |  2 +-
 .../Explanation/{columnInfo.js => explanation.js}  |  0
 .../controls/Explanation/lines/Support.svelte      | 14 +++++++-------
 .../settings/controls/Explanation/subjects.js      | 12 ++++++------
 4 files changed, 14 insertions(+), 14 deletions(-)
 rename packages/builder/src/components/design/settings/controls/Explanation/{columnInfo.js => explanation.js} (100%)

diff --git a/packages/builder/src/components/design/settings/controls/Explanation/Explanation.svelte b/packages/builder/src/components/design/settings/controls/Explanation/Explanation.svelte
index d96dd6b098..0c7682ddac 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/Explanation.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/Explanation.svelte
@@ -1,6 +1,6 @@
 <script>
   import ExplanationModal from './ExplanationModal/index.svelte'
-  import { messages as messageConstants, getExplanationMessagesAndSupport, getExplanationWithPresets } from "./columnInfo";
+  import { messages as messageConstants, getExplanationMessagesAndSupport, getExplanationWithPresets } from "./explanation";
   import { Column, Support, NotRequired, StringNumber, JSONPrimitivesOnly, DateAsNumber } from "./lines"
   import subjects from './subjects';
   import {
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/columnInfo.js b/packages/builder/src/components/design/settings/controls/Explanation/explanation.js
similarity index 100%
rename from packages/builder/src/components/design/settings/controls/Explanation/columnInfo.js
rename to packages/builder/src/components/design/settings/controls/Explanation/explanation.js
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/lines/Support.svelte b/packages/builder/src/components/design/settings/controls/Explanation/lines/Support.svelte
index 89d6015560..cad31e588b 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/lines/Support.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/lines/Support.svelte
@@ -1,15 +1,15 @@
 <script>
   import { Line, InfoWord, DocumentationLink, Space, Text, Period } from "../typography"
   import subjects from '../subjects'
-  import * as columnInfo from '../columnInfo'
+  import * as explanation from '../explanation'
 
   export let setExplanationSubject
   export let support
 
   const getIcon = (support) => {
-    if (support === columnInfo.support.unsupported) {
+    if (support === explanation.support.unsupported) {
       return "Alert"
-    } else if (support === columnInfo.support.supported) {
+    } else if (support === explanation.support.supported) {
       return "CheckmarkCircle"
     }
 
@@ -17,9 +17,9 @@
   }
 
   const getColor = (support) => {
-    if (support === columnInfo.support.unsupported) {
+    if (support === explanation.support.unsupported) {
       return "var(--red)"
-    } else if (support === columnInfo.support.supported) {
+    } else if (support === explanation.support.supported) {
       return "var(--green)"
     }
 
@@ -27,9 +27,9 @@
   }
 
   const getText = (support) => {
-    if (support === columnInfo.support.unsupported) {
+    if (support === explanation.support.unsupported) {
       return "Not compatible"
-    } else if (support === columnInfo.support.supported) {
+    } else if (support === explanation.support.supported) {
       return "Compatible"
     }
 
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/subjects.js b/packages/builder/src/components/design/settings/controls/Explanation/subjects.js
index a58564d2bd..549ec0e075 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/subjects.js
+++ b/packages/builder/src/components/design/settings/controls/Explanation/subjects.js
@@ -1,11 +1,11 @@
 const subjects = {
-  column: Symbol("explanation-modal-column"),
-  support: Symbol("explanation-modal-support"),
-  stringsAsNumbers: Symbol("explanation-modal-strings-as-numbers"),
-  datesAsNumbers: Symbol("explanation-modal-dates-as-numbers"),
-  notRequired: Symbol("explanation-modal-not-required"),
+  column: Symbol("details-modal-column"),
+  support: Symbol("details-modal-support"),
+  stringsAsNumbers: Symbol("details-modal-strings-as-numbers"),
+  datesAsNumbers: Symbol("details-modal-dates-as-numbers"),
+  notRequired: Symbol("details-modal-not-required"),
   scalarJsonOnly: Symbol("explanation-scalar-json-only"),
-  none: Symbol("explanation-modal-none")
+  none: Symbol("details-modal-none")
 }
 
 export default subjects;

From 98cb16cc95e5a7756db570f0889a5471f61a4d8e Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Fri, 19 Apr 2024 14:45:46 +0100
Subject: [PATCH 098/123] rename

---
 .../index.svelte                              |  0
 .../subjects/Column.svelte                    |  0
 .../subjects/DatesAsNumbers.svelte            |  0
 .../subjects/NotRequired.svelte               |  0
 .../subjects/ScalarJsonOnly.svelte            |  0
 .../subjects/StringsAsNumbers.svelte          |  0
 .../subjects/Support.svelte                   |  0
 .../subjects/components/BindingValue.svelte   |  0
 .../subjects/components/Block.svelte          |  0
 .../subjects/components/ExampleLine.svelte    |  0
 .../subjects/components/ExampleSection.svelte |  0
 .../subjects/components/JSONValue.svelte      |  0
 .../subjects/components/Property.svelte       |  0
 .../subjects/components/Section.svelte        |  0
 .../subjects/components/Subject.svelte        |  0
 .../subjects/components/index.js              |  0
 .../subjects/index.js                         |  0
 .../controls/Explanation/Explanation.svelte   | 21 +++++++++----------
 .../settings/controls/MultiFieldSelect.svelte |  2 +-
 19 files changed, 11 insertions(+), 12 deletions(-)
 rename packages/builder/src/components/design/settings/controls/Explanation/{ExplanationModal => DetailsModal}/index.svelte (100%)
 rename packages/builder/src/components/design/settings/controls/Explanation/{ExplanationModal => DetailsModal}/subjects/Column.svelte (100%)
 rename packages/builder/src/components/design/settings/controls/Explanation/{ExplanationModal => DetailsModal}/subjects/DatesAsNumbers.svelte (100%)
 rename packages/builder/src/components/design/settings/controls/Explanation/{ExplanationModal => DetailsModal}/subjects/NotRequired.svelte (100%)
 rename packages/builder/src/components/design/settings/controls/Explanation/{ExplanationModal => DetailsModal}/subjects/ScalarJsonOnly.svelte (100%)
 rename packages/builder/src/components/design/settings/controls/Explanation/{ExplanationModal => DetailsModal}/subjects/StringsAsNumbers.svelte (100%)
 rename packages/builder/src/components/design/settings/controls/Explanation/{ExplanationModal => DetailsModal}/subjects/Support.svelte (100%)
 rename packages/builder/src/components/design/settings/controls/Explanation/{ExplanationModal => DetailsModal}/subjects/components/BindingValue.svelte (100%)
 rename packages/builder/src/components/design/settings/controls/Explanation/{ExplanationModal => DetailsModal}/subjects/components/Block.svelte (100%)
 rename packages/builder/src/components/design/settings/controls/Explanation/{ExplanationModal => DetailsModal}/subjects/components/ExampleLine.svelte (100%)
 rename packages/builder/src/components/design/settings/controls/Explanation/{ExplanationModal => DetailsModal}/subjects/components/ExampleSection.svelte (100%)
 rename packages/builder/src/components/design/settings/controls/Explanation/{ExplanationModal => DetailsModal}/subjects/components/JSONValue.svelte (100%)
 rename packages/builder/src/components/design/settings/controls/Explanation/{ExplanationModal => DetailsModal}/subjects/components/Property.svelte (100%)
 rename packages/builder/src/components/design/settings/controls/Explanation/{ExplanationModal => DetailsModal}/subjects/components/Section.svelte (100%)
 rename packages/builder/src/components/design/settings/controls/Explanation/{ExplanationModal => DetailsModal}/subjects/components/Subject.svelte (100%)
 rename packages/builder/src/components/design/settings/controls/Explanation/{ExplanationModal => DetailsModal}/subjects/components/index.js (100%)
 rename packages/builder/src/components/design/settings/controls/Explanation/{ExplanationModal => DetailsModal}/subjects/index.js (100%)

diff --git a/packages/builder/src/components/design/settings/controls/Explanation/ExplanationModal/index.svelte b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/index.svelte
similarity index 100%
rename from packages/builder/src/components/design/settings/controls/Explanation/ExplanationModal/index.svelte
rename to packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/index.svelte
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/ExplanationModal/subjects/Column.svelte b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/Column.svelte
similarity index 100%
rename from packages/builder/src/components/design/settings/controls/Explanation/ExplanationModal/subjects/Column.svelte
rename to packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/Column.svelte
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/ExplanationModal/subjects/DatesAsNumbers.svelte b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/DatesAsNumbers.svelte
similarity index 100%
rename from packages/builder/src/components/design/settings/controls/Explanation/ExplanationModal/subjects/DatesAsNumbers.svelte
rename to packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/DatesAsNumbers.svelte
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/ExplanationModal/subjects/NotRequired.svelte b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/NotRequired.svelte
similarity index 100%
rename from packages/builder/src/components/design/settings/controls/Explanation/ExplanationModal/subjects/NotRequired.svelte
rename to packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/NotRequired.svelte
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/ExplanationModal/subjects/ScalarJsonOnly.svelte b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/ScalarJsonOnly.svelte
similarity index 100%
rename from packages/builder/src/components/design/settings/controls/Explanation/ExplanationModal/subjects/ScalarJsonOnly.svelte
rename to packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/ScalarJsonOnly.svelte
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/ExplanationModal/subjects/StringsAsNumbers.svelte b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/StringsAsNumbers.svelte
similarity index 100%
rename from packages/builder/src/components/design/settings/controls/Explanation/ExplanationModal/subjects/StringsAsNumbers.svelte
rename to packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/StringsAsNumbers.svelte
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/ExplanationModal/subjects/Support.svelte b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/Support.svelte
similarity index 100%
rename from packages/builder/src/components/design/settings/controls/Explanation/ExplanationModal/subjects/Support.svelte
rename to packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/Support.svelte
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/ExplanationModal/subjects/components/BindingValue.svelte b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/BindingValue.svelte
similarity index 100%
rename from packages/builder/src/components/design/settings/controls/Explanation/ExplanationModal/subjects/components/BindingValue.svelte
rename to packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/BindingValue.svelte
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/ExplanationModal/subjects/components/Block.svelte b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/Block.svelte
similarity index 100%
rename from packages/builder/src/components/design/settings/controls/Explanation/ExplanationModal/subjects/components/Block.svelte
rename to packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/Block.svelte
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/ExplanationModal/subjects/components/ExampleLine.svelte b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/ExampleLine.svelte
similarity index 100%
rename from packages/builder/src/components/design/settings/controls/Explanation/ExplanationModal/subjects/components/ExampleLine.svelte
rename to packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/ExampleLine.svelte
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/ExplanationModal/subjects/components/ExampleSection.svelte b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/ExampleSection.svelte
similarity index 100%
rename from packages/builder/src/components/design/settings/controls/Explanation/ExplanationModal/subjects/components/ExampleSection.svelte
rename to packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/ExampleSection.svelte
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/ExplanationModal/subjects/components/JSONValue.svelte b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/JSONValue.svelte
similarity index 100%
rename from packages/builder/src/components/design/settings/controls/Explanation/ExplanationModal/subjects/components/JSONValue.svelte
rename to packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/JSONValue.svelte
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/ExplanationModal/subjects/components/Property.svelte b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/Property.svelte
similarity index 100%
rename from packages/builder/src/components/design/settings/controls/Explanation/ExplanationModal/subjects/components/Property.svelte
rename to packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/Property.svelte
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/ExplanationModal/subjects/components/Section.svelte b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/Section.svelte
similarity index 100%
rename from packages/builder/src/components/design/settings/controls/Explanation/ExplanationModal/subjects/components/Section.svelte
rename to packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/Section.svelte
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/ExplanationModal/subjects/components/Subject.svelte b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/Subject.svelte
similarity index 100%
rename from packages/builder/src/components/design/settings/controls/Explanation/ExplanationModal/subjects/components/Subject.svelte
rename to packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/Subject.svelte
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/ExplanationModal/subjects/components/index.js b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/index.js
similarity index 100%
rename from packages/builder/src/components/design/settings/controls/Explanation/ExplanationModal/subjects/components/index.js
rename to packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/index.js
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/ExplanationModal/subjects/index.js b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/index.js
similarity index 100%
rename from packages/builder/src/components/design/settings/controls/Explanation/ExplanationModal/subjects/index.js
rename to packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/index.js
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/Explanation.svelte b/packages/builder/src/components/design/settings/controls/Explanation/Explanation.svelte
index 0c7682ddac..2413b6dc0b 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/Explanation.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/Explanation.svelte
@@ -1,5 +1,5 @@
 <script>
-  import ExplanationModal from './ExplanationModal/index.svelte'
+  import DetailsModal from './DetailsModal/index.svelte'
   import { messages as messageConstants, getExplanationMessagesAndSupport, getExplanationWithPresets } from "./explanation";
   import { Column, Support, NotRequired, StringNumber, JSONPrimitivesOnly, DateAsNumber } from "./lines"
   import subjects from './subjects';
@@ -11,7 +11,7 @@
   export let columnIcon
   export let columnType
   export let columnName
-  export let explanationModal = false
+  export let showDetails = false
 
   export let tableHref = () => {}
 
@@ -22,17 +22,17 @@
   let messages = []
 
   $: {
-    const columnInfoMessagesAndSupport = getExplanationMessagesAndSupport(schema, explanationWithPresets)
-    support = columnInfoMessagesAndSupport.support
-    messages = columnInfoMessagesAndSupport.messages
+    const explanationMessagesAndSupport = getExplanationMessagesAndSupport(schema, explanationWithPresets)
+    support = explanationMessagesAndSupport.support
+    messages = explanationMessagesAndSupport.messages
   }
 
   let root = null;
 
-  let explanationModalSubject = subjects.none
+  let detailsModalSubject = subjects.none
 
   const setExplanationSubject = (option) => {
-    explanationModalSubject = option;
+    detailsModalSubject = option;
     root = root
   }
 </script>
@@ -74,13 +74,12 @@
   {/if}
 </div>
 
-
-{#if explanationModal}
-  <ExplanationModal
+{#if showDetails}
+  <DetailsModal
     {columnName}
     anchor={root}
     {schema}
-    subject={explanationModalSubject}
+    subject={detailsModalSubject}
   />
 {/if}
 
diff --git a/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte b/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
index 6f95ab3bf9..bc3603c62a 100644
--- a/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
@@ -120,7 +120,7 @@
     offset={20}
   >
     <Explanation
-      explanationModal
+      showDetails
       tableHref={`/builder/app/${$params.application}/data/table/${datasource?.tableId}`}
       schema={schema[currentOption]}
       columnIcon={getOptionIcon(currentOption)}

From d7f9b1f5eec6e02c1f77e3169570e9ea51d4ce08 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Sat, 20 Apr 2024 09:33:42 +0100
Subject: [PATCH 099/123] better date parsing for candlestick

---
 .../subjects/DatesAsNumbers.svelte            |  3 +-
 .../subjects/StringsAsDates.svelte            | 50 +++++++++++++++++++
 .../settings/controls/FieldSelect.svelte      |  2 +-
 packages/client/manifest.json                 | 44 ++++++++++++++--
 .../app/charts/CandleStickChart.svelte        | 43 +++++++++++++++-
 5 files changed, 133 insertions(+), 9 deletions(-)
 create mode 100644 packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/StringsAsDates.svelte

diff --git a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/DatesAsNumbers.svelte b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/DatesAsNumbers.svelte
index 3effc88640..7a2f1ed9ef 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/DatesAsNumbers.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/DatesAsNumbers.svelte
@@ -9,7 +9,6 @@
 
     const updateTimeStamp = () => {
       timestamp = Date.now();
-      console.log(timestamp);
       if (run) {
         setTimeout(updateTimeStamp, 200)
       }
@@ -25,7 +24,7 @@
 
 <Subject heading="Dates as Numbers">
   <Section>
-    A date can be used in place of a numeric value, but it will be parsed as a <Block>UNIX epoch</Block> timestamp, which is the number of milliseconds since Jan 1st 1970. A more recent moment in time will be a higher number.
+    A date can be used in place of a numeric value, but it will be parsed as a <Block>UNIX time</Block> timestamp, which is the number of milliseconds since Jan 1st 1970. A more recent moment in time will be a higher number.
   </Section>
 
     <ExampleSection
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/StringsAsDates.svelte b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/StringsAsDates.svelte
new file mode 100644
index 0000000000..3effc88640
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/StringsAsDates.svelte
@@ -0,0 +1,50 @@
+<script>
+  import { onMount } from "svelte"
+  import { ExampleSection, ExampleLine, Block, Subject, Section } from './components'
+
+  let timestamp = Date.now();
+
+  onMount(() => {
+    let run = true;
+
+    const updateTimeStamp = () => {
+      timestamp = Date.now();
+      console.log(timestamp);
+      if (run) {
+        setTimeout(updateTimeStamp, 200)
+      }
+    }
+
+    updateTimeStamp();
+
+    return () => {
+      run = false;
+    }
+  })
+</script>
+
+<Subject heading="Dates as Numbers">
+  <Section>
+    A date can be used in place of a numeric value, but it will be parsed as a <Block>UNIX epoch</Block> timestamp, which is the number of milliseconds since Jan 1st 1970. A more recent moment in time will be a higher number.
+  </Section>
+
+    <ExampleSection
+      heading="Examples:"
+    >
+      <ExampleLine>
+        1st Jan 2000<span class="separator">: </span><Block>946684800000</Block>
+      </ExampleLine>
+      <ExampleLine>
+        1st Jan 2020<span class="separator">: </span><Block>1577836800000</Block>
+      </ExampleLine>
+      <ExampleLine>
+        Now<span class="separator">:</span> <Block>{timestamp}</Block>
+      </ExampleLine>
+    </ExampleSection>
+</Subject>
+
+<style>
+  .separator {
+    margin-right: 5px;
+  }
+</style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldSelect.svelte b/packages/builder/src/components/design/settings/controls/FieldSelect.svelte
index 9691b4caf2..28abd66764 100644
--- a/packages/builder/src/components/design/settings/controls/FieldSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldSelect.svelte
@@ -110,7 +110,7 @@
     offset={20}
   >
     <Explanation
-      explanationModal
+      showDetails
       tableHref={`/builder/app/${$params.application}/data/table/${datasource?.tableId}`}
       schema={schema[currentOption]}
       columnIcon={getOptionIcon(currentOption)}
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 3253cbcc98..99810b2a29 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -14,7 +14,7 @@
     "skeletonLoader": true
   },
   "typeSupportPresets": {
-    "chartValue": {
+    "numberLike": {
       "supported": ["number", "boolean"],
       "partialSupport": [
         { "type": "longform", "message": "stringAsNumber" },
@@ -27,6 +27,26 @@
       "unsupported": [
         { "type": "json", "message": "jsonPrimitivesOnly" }
       ]
+    },
+    "datetimeLike": {
+      "supported": ["datetime"],
+      "partialSupport": [
+        { "type": "longform", "message": "stringAsDate" },
+        { "type": "string", "message": "stringAsDate" },
+        { "type": "options", "message": "stringAsDate" },
+        { "type": "formula", "message": "stringAsDate" },
+        { "type": "bigint", "message": "stringAsDate" },
+        { "type": "number", "message": "numberAsDate"}
+      ],
+      "unsupported": [
+        { "type": "json", "message": "jsonPrimitivesOnly" }
+      ]
+    },
+    "stringLike": {
+      "supported": ["string", "number", "bigint", "options", "longform", "boolean", "datetime"],
+      "unsupported": [
+        { "type": "json", "message": "jsonPrimitivesOnly" }
+      ]
     }
   },
   "layout": {
@@ -1652,7 +1672,7 @@
         "dependsOn": "dataProvider",
         "explanation": {
           "typeSupport": {
-            "preset": "chartValue"
+            "preset": "numberLike"
           }
         },
         "required": true
@@ -1816,7 +1836,7 @@
         "dependsOn": "dataProvider",
         "explanation": {
           "typeSupport": {
-            "preset": "chartValue"
+            "preset": "numberLike"
           }
         },
         "required": true
@@ -1975,7 +1995,7 @@
         "dependsOn": "dataProvider",
         "explanation": {
           "typeSupport": {
-            "preset": "chartValue"
+            "preset": "numberLike"
           }
         },
         "required": true
@@ -2144,6 +2164,11 @@
         "label": "Data column",
         "key": "valueColumn",
         "dependsOn": "dataProvider",
+        "explanation": {
+          "typeSupport": {
+            "preset": "numberLike"
+          }
+        },
         "required": true
       },
       {
@@ -2274,6 +2299,11 @@
         "label": "Data columns",
         "key": "valueColumn",
         "dependsOn": "dataProvider",
+        "explanation": {
+          "typeSupport": {
+            "preset": "numberLike"
+          }
+        },
         "required": true
       },
       {
@@ -2472,7 +2502,6 @@
       "width": 600,
       "height": 400
     },
-    "requiredAncestors": ["dataprovider"],
     "settings": [
       {
         "type": "text",
@@ -2490,6 +2519,11 @@
         "label": "Data column",
         "key": "valueColumn",
         "dependsOn": "dataProvider",
+        "explanation": {
+          "typeSupport": {
+            "preset": "numberLike"
+          }
+        },
         "required": true
       },
       {
diff --git a/packages/client/src/components/app/charts/CandleStickChart.svelte b/packages/client/src/components/app/charts/CandleStickChart.svelte
index 776de908c6..50e4df27a9 100644
--- a/packages/client/src/components/app/charts/CandleStickChart.svelte
+++ b/packages/client/src/components/app/charts/CandleStickChart.svelte
@@ -63,6 +63,47 @@
     }
   }
 
+  const getValueAsUnixEpoch = (dataprovider, dateColumn, row) => {
+    const value = row[dateColumn]
+
+    if (dataProvider?.schema?.[dateColumn]?.type === 'datetime') {
+      return Date.parse(value);
+    }
+
+    // Unix epoch
+    if (typeof value === "number") {
+      return value;
+    }
+
+    const isString = typeof value === "string";
+    // "2025" could be either an ISO 8601 date time string or Unix time.
+    // There's no way to tell the user's intent without providing more
+    // granular controls.
+    // We'll just assume any string without dashes is Unix time.
+
+    if (isString && value.includes("-")) {
+      const unixTime = Date.parse(value);
+
+      if (isNaN(unixTime)) {
+        return null
+      }
+
+      return unixTime
+    }
+
+    if (isString) {
+      const unixTime = parseInt(value, 10);
+
+      if (isNaN(unixTime)) {
+        return null
+      }
+
+      return unixTime
+    }
+
+    return null;
+  }
+
   const getSeries = (
     dataProvider,
     dateColumn,
@@ -81,7 +122,7 @@
         const close = parseFloat(row[closeColumn])
 
         return [
-          Date.parse(row[dateColumn]),
+          getValueAsUnixEpoch(dataProvider, dateColumn, row),
           isNaN(open) ? 0 : open,
           isNaN(high) ? 0 : high,
           isNaN(low) ? 0 : low,

From 498a562b074a1cd681f0819dfffe56387c8c65f1 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Sun, 21 Apr 2024 08:05:30 +0100
Subject: [PATCH 100/123] lines for dates

---
 .../Explanation/DetailsModal/index.svelte     |  6 +++-
 .../DetailsModal/subjects/Column.svelte       |  3 --
 .../subjects/DatesAsNumbers.svelte            |  2 +-
 .../subjects/NumbersAsDates.svelte            |  9 ++++++
 .../subjects/ScalarJsonOnly.svelte            |  2 +-
 .../DetailsModal/subjects/Support.svelte      |  6 ++--
 .../DetailsModal/subjects/index.js            |  2 ++
 .../controls/Explanation/Explanation.svelte   | 14 +++++++--
 .../controls/Explanation/explanation.js       |  2 ++
 .../Explanation/lines/DateAsNumber.svelte     |  4 +--
 .../lines/JSONPrimitivesOnly.svelte           |  2 +-
 .../Explanation/lines/NumberAsDate.svelte     | 16 ++++++++++
 .../Explanation/lines/StringAsDate.svelte     | 16 ++++++++++
 ...ingNumber.svelte => StringAsNumber.svelte} |  2 +-
 .../controls/Explanation/lines/Support.svelte |  6 ++--
 .../controls/Explanation/lines/index.js       |  4 ++-
 .../settings/controls/Explanation/subjects.js |  2 ++
 .../settings/controls/MultiFieldSelect.svelte |  4 ---
 .../builder/src/stores/builder/components.js  |  1 -
 packages/client/manifest.json                 | 30 ++++++++++---------
 .../components/app/charts/ApexChart.svelte    | 17 ++++++++---
 21 files changed, 108 insertions(+), 42 deletions(-)
 create mode 100644 packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/NumbersAsDates.svelte
 create mode 100644 packages/builder/src/components/design/settings/controls/Explanation/lines/NumberAsDate.svelte
 create mode 100644 packages/builder/src/components/design/settings/controls/Explanation/lines/StringAsDate.svelte
 rename packages/builder/src/components/design/settings/controls/Explanation/lines/{StringNumber.svelte => StringAsNumber.svelte} (88%)

diff --git a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/index.svelte b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/index.svelte
index 7c6d886548..f6310fdaba 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/index.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/index.svelte
@@ -1,6 +1,6 @@
 <script>
   import { ContextTooltip } from "@budibase/bbui"
-  import { ScalarJsonOnly, Column, Support, NotRequired, StringsAsNumbers, DatesAsNumbers } from './subjects'
+  import { StringsAsDates, NumbersAsDates, ScalarJsonOnly, Column, Support, NotRequired, StringsAsNumbers, DatesAsNumbers } from './subjects'
   import subjects from '../subjects'
 
   export let anchor
@@ -29,6 +29,10 @@
       <DatesAsNumbers />
     {:else if subject === subjects.scalarJsonOnly}
       <ScalarJsonOnly {columnName} {schema} />
+    {:else if subject === subjects.numbersAsDates}
+      <NumbersAsDates {columnName} />
+    {:else if subject === subjects.stringsAsDates}
+      <StringsAsDates {columnName} />
     {/if}
   </div>
 </ContextTooltip>
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/Column.svelte b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/Column.svelte
index f8363bdcd4..d23d70d34c 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/Column.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/Column.svelte
@@ -2,9 +2,6 @@
   import { tables } from "stores/builder"
   import { BindingValue, Block, Subject, JSONValue, Property, Section }  from './components'
 
-  $: {
-    console.log($tables)
-  }
   export let schema
   export let columnName
 
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/DatesAsNumbers.svelte b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/DatesAsNumbers.svelte
index 7a2f1ed9ef..4921ac5823 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/DatesAsNumbers.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/DatesAsNumbers.svelte
@@ -24,7 +24,7 @@
 
 <Subject heading="Dates as Numbers">
   <Section>
-    A date can be used in place of a numeric value, but it will be parsed as a <Block>UNIX time</Block> timestamp, which is the number of milliseconds since Jan 1st 1970. A more recent moment in time will be a higher number.
+    A date can be used in place of a numeric value, but it will be converted to a <Block>UNIX time</Block> timestamp, which is the number of milliseconds since Jan 1st 1970. A more recent moment in time will be a higher number.
   </Section>
 
     <ExampleSection
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/NumbersAsDates.svelte b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/NumbersAsDates.svelte
new file mode 100644
index 0000000000..b3bf785afc
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/NumbersAsDates.svelte
@@ -0,0 +1,9 @@
+
+<script>
+</script>
+
+<div>
+</div>
+
+<style>
+</style>
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/ScalarJsonOnly.svelte b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/ScalarJsonOnly.svelte
index 962f007daa..49f4b7cc53 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/ScalarJsonOnly.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/ScalarJsonOnly.svelte
@@ -34,7 +34,7 @@
 
 <Subject heading="Using Scalar JSON Values">
   <Section>
-    <Block>JSON objects</Block> can't be used here, but any <Block>number</Block>, <Block>string</Block> or <Block>boolean</Block> values nested within said object can be if they are otherwise compatible with the component. These scalar values can be selected from the same menu as this parent and take the form <Block>parent.child</Block>.
+    <Block>JSON objects</Block> can't be used here, but any <Block>number</Block>, <Block>string</Block> or <Block>boolean</Block> values nested within said object can be if they are otherwise compatible with the input. These scalar values can be selected from the same menu as this parent and take the form <Block>parent.child</Block>.
   </Section>
 
   {#if scalarDescendants.length > 0}
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/Support.svelte b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/Support.svelte
index e15c231f0e..c37bc3a46f 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/Support.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/Support.svelte
@@ -10,15 +10,15 @@
       color="var(--green)"
       text="Compatible"
     />
-    <span class="body">Fully compatible with the component as long as the data is present.</span>
+    <span class="body">Fully compatible with the input as long as the data is present.</span>
   </Section>
   <Section>
     <InfoWord
       icon="AlertCheck"
       color="var(--yellow)"
-      text="Possibly compatible"
+      text="Partially compatible"
     />
-    <span class="body">Possibly compatible with the component, but beware of other caveats mentioned in the context tooltip.</span>
+    <span class="body">Partially compatible with the input, but beware of other caveats mentioned.</span>
   </Section>
   <Section>
     <InfoWord
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/index.js b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/index.js
index e77d12d2bf..c7f54d6415 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/index.js
+++ b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/index.js
@@ -4,3 +4,5 @@ export { default as StringsAsNumbers } from "./StringsAsNumbers.svelte"
 export { default as Support } from "./Support.svelte"
 export { default as DatesAsNumbers } from "./DatesAsNumbers.svelte"
 export { default as ScalarJsonOnly } from "./ScalarJsonOnly.svelte"
+export { default as StringsAsDates } from "./StringsAsDates.svelte"
+export { default as NumbersAsDates } from "./NumbersAsDates.svelte"
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/Explanation.svelte b/packages/builder/src/components/design/settings/controls/Explanation/Explanation.svelte
index 2413b6dc0b..e5c9e9e752 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/Explanation.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/Explanation.svelte
@@ -1,7 +1,7 @@
 <script>
   import DetailsModal from './DetailsModal/index.svelte'
   import { messages as messageConstants, getExplanationMessagesAndSupport, getExplanationWithPresets } from "./explanation";
-  import { Column, Support, NotRequired, StringNumber, JSONPrimitivesOnly, DateAsNumber } from "./lines"
+  import { StringAsDate, NumberAsDate, Column, Support, NotRequired, StringAsNumber, JSONPrimitivesOnly, DateAsNumber } from "./lines"
   import subjects from './subjects';
   import {
     componentStore,
@@ -53,7 +53,7 @@
     {setExplanationSubject}
   />
   {#if messages.includes(messageConstants.stringAsNumber)}
-    <StringNumber
+    <StringAsNumber
       {setExplanationSubject}
     />
   {/if}
@@ -72,6 +72,16 @@
       {setExplanationSubject}
     />
   {/if}
+  {#if messages.includes(messageConstants.numberAsDate)}
+    <NumberAsDate
+      {setExplanationSubject}
+    />
+  {/if}
+  {#if messages.includes(messageConstants.stringAsDate)}
+    <StringAsDate
+      {setExplanationSubject}
+    />
+  {/if}
 </div>
 
 {#if showDetails}
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/explanation.js b/packages/builder/src/components/design/settings/controls/Explanation/explanation.js
index fa04fbe0ec..4321fb14b6 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/explanation.js
+++ b/packages/builder/src/components/design/settings/controls/Explanation/explanation.js
@@ -4,6 +4,8 @@ export const messages = {
   jsonPrimitivesOnly: Symbol("explanation-json-primitives-only"),
   stringAsNumber: Symbol("explanation-string-as-number"),
   dateAsNumber: Symbol("explanation-date-as-number"),
+  numberAsDate: Symbol("explanation-number-as-date"),
+  stringAsDate: Symbol("explanation-string-as-date"),
   notRequired: Symbol("explanation-not-required"),
   contextError: Symbol("explanation-context-error"),
 }
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/lines/DateAsNumber.svelte b/packages/builder/src/components/design/settings/controls/Explanation/lines/DateAsNumber.svelte
index c2c6ca3bd1..b2b23c3803 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/lines/DateAsNumber.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/lines/DateAsNumber.svelte
@@ -6,11 +6,11 @@
 </script>
 
 <Line>
-  <Text value="Will be parsed as a " />
+  <Text value="Will be converted to a " />
   <InfoWord
       on:mouseenter={() => setExplanationSubject(subjects.datesAsNumbers)}
       on:mouseleave={() => setExplanationSubject(subjects.none)}
-    text="UNIX epoch timestamp"
+    text="UNIX time value"
   />
   <Period />
 </Line>
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/lines/JSONPrimitivesOnly.svelte b/packages/builder/src/components/design/settings/controls/Explanation/lines/JSONPrimitivesOnly.svelte
index ee4b258b80..d2aefc06b3 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/lines/JSONPrimitivesOnly.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/lines/JSONPrimitivesOnly.svelte
@@ -12,7 +12,7 @@
   on:mouseleave={() => setExplanationSubject(subjects.none)}
 >Scalar JSON values</InfoWord>
   <Text
-    value=" can be used with this component if their individual types are supported"
+    value=" can be used with this input if their individual types are supported"
   />
   <Period />
 </Line>
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/lines/NumberAsDate.svelte b/packages/builder/src/components/design/settings/controls/Explanation/lines/NumberAsDate.svelte
new file mode 100644
index 0000000000..8820cc9667
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/Explanation/lines/NumberAsDate.svelte
@@ -0,0 +1,16 @@
+<script>
+  import { Line, InfoWord, DocumentationLink, Space, Text, Period } from "../typography"
+  import subjects from '../subjects'
+
+  export let setExplanationSubject
+</script>
+
+<Line>
+  <Text value="Will be treated as a " />
+  <InfoWord
+      on:mouseenter={() => setExplanationSubject(subjects.numbersAsDates)}
+      on:mouseleave={() => setExplanationSubject(subjects.none)}
+    text="UNIX time value"
+  />
+  <Period />
+</Line>
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/lines/StringAsDate.svelte b/packages/builder/src/components/design/settings/controls/Explanation/lines/StringAsDate.svelte
new file mode 100644
index 0000000000..ab94e96ba6
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/Explanation/lines/StringAsDate.svelte
@@ -0,0 +1,16 @@
+<script>
+  import { Line, InfoWord, DocumentationLink, Space, Text, Period } from "../typography"
+  import subjects from '../subjects'
+
+  export let setExplanationSubject
+</script>
+
+<Line>
+  <Text value="Will be treated as a " />
+  <InfoWord
+      on:mouseenter={() => setExplanationSubject(subjects.stringsAsDates)}
+      on:mouseleave={() => setExplanationSubject(subjects.none)}
+    text="UNIX time or ISO 8601 value"
+  />
+  <Period />
+</Line>
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/lines/StringNumber.svelte b/packages/builder/src/components/design/settings/controls/Explanation/lines/StringAsNumber.svelte
similarity index 88%
rename from packages/builder/src/components/design/settings/controls/Explanation/lines/StringNumber.svelte
rename to packages/builder/src/components/design/settings/controls/Explanation/lines/StringAsNumber.svelte
index 9c9f001f48..ae63c25733 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/lines/StringNumber.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/lines/StringAsNumber.svelte
@@ -6,7 +6,7 @@
 </script>
 
 <Line>
-  <Text value="The component will ignore any " />
+  <Text value="The input will ignore any " />
   <InfoWord
       on:mouseenter={() => setExplanationSubject(subjects.stringsAsNumbers)}
       on:mouseleave={() => setExplanationSubject(subjects.none)}
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/lines/Support.svelte b/packages/builder/src/components/design/settings/controls/Explanation/lines/Support.svelte
index cad31e588b..539cca18f1 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/lines/Support.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/lines/Support.svelte
@@ -49,11 +49,11 @@
     {color}
     {text}
   />
-  <Text value=" with " />
+  <Text value=" with this " />
   <DocumentationLink
     href="https://docs.budibase.com/docs/chart"
     icon="GraphPie"
-    text="Chart components"
+    text="Chart component"
   />
-  <Period />
+  <Text value=" input." />
 </Line>
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/lines/index.js b/packages/builder/src/components/design/settings/controls/Explanation/lines/index.js
index da819ee9d7..beff239398 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/lines/index.js
+++ b/packages/builder/src/components/design/settings/controls/Explanation/lines/index.js
@@ -1,6 +1,8 @@
 export { default as Column } from "./Column.svelte"
 export { default as NotRequired } from "./NotRequired.svelte"
-export { default as StringNumber } from "./StringNumber.svelte"
+export { default as StringAsNumber } from "./StringAsNumber.svelte"
 export { default as Support } from "./Support.svelte"
 export { default as JSONPrimitivesOnly } from "./JSONPrimitivesOnly.svelte"
 export { default as DateAsNumber } from "./DateAsNumber.svelte"
+export { default as NumberAsDate } from "./NumberAsDate.svelte"
+export { default as StringAsDate } from "./StringAsDate.svelte"
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/subjects.js b/packages/builder/src/components/design/settings/controls/Explanation/subjects.js
index 549ec0e075..70471ec6d4 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/subjects.js
+++ b/packages/builder/src/components/design/settings/controls/Explanation/subjects.js
@@ -3,6 +3,8 @@ const subjects = {
   support: Symbol("details-modal-support"),
   stringsAsNumbers: Symbol("details-modal-strings-as-numbers"),
   datesAsNumbers: Symbol("details-modal-dates-as-numbers"),
+  numbersAsDates: Symbol("explanation-numbers-as-dates"),
+  stringsAsDates: Symbol("explanation-strings-as-dates"),
   notRequired: Symbol("details-modal-not-required"),
   scalarJsonOnly: Symbol("explanation-scalar-json-only"),
   none: Symbol("details-modal-none")
diff --git a/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte b/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
index bc3603c62a..721ac7bb88 100644
--- a/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
@@ -16,10 +16,6 @@
   export let placeholder
   export let explanation
 
-  $: {
-    console.log($componentStore);
-  }
-
   let contextTooltipAnchor = null
   let currentOption = null
   let previousOption = null
diff --git a/packages/builder/src/stores/builder/components.js b/packages/builder/src/stores/builder/components.js
index c88864de89..4003f5ed4c 100644
--- a/packages/builder/src/stores/builder/components.js
+++ b/packages/builder/src/stores/builder/components.js
@@ -95,7 +95,6 @@ export class ComponentStore extends BudiStore {
     // Fetch definitions and filter out custom component definitions so we
     // can flag them
     const components = await API.fetchComponentLibDefinitions(appId)
-    console.log(components);
     const customComponents = Object.keys(components).filter(key =>
       key.startsWith("plugin/")
     )
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 99810b2a29..10da498e3d 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -28,20 +28,6 @@
         { "type": "json", "message": "jsonPrimitivesOnly" }
       ]
     },
-    "datetimeLike": {
-      "supported": ["datetime"],
-      "partialSupport": [
-        { "type": "longform", "message": "stringAsDate" },
-        { "type": "string", "message": "stringAsDate" },
-        { "type": "options", "message": "stringAsDate" },
-        { "type": "formula", "message": "stringAsDate" },
-        { "type": "bigint", "message": "stringAsDate" },
-        { "type": "number", "message": "numberAsDate"}
-      ],
-      "unsupported": [
-        { "type": "json", "message": "jsonPrimitivesOnly" }
-      ]
-    },
     "stringLike": {
       "supported": ["string", "number", "bigint", "options", "longform", "boolean", "datetime"],
       "unsupported": [
@@ -2427,6 +2413,22 @@
         "label": "Date column",
         "key": "dateColumn",
         "dependsOn": "dataProvider",
+        "explanation": {
+          "typeSupport": {
+            "supported": ["datetime"],
+            "partialSupport": [
+              { "type": "longform", "message": "stringAsDate" },
+              { "type": "string", "message": "stringAsDate" },
+              { "type": "options", "message": "stringAsDate" },
+              { "type": "formula", "message": "stringAsDate" },
+              { "type": "bigint", "message": "stringAsDate" },
+              { "type": "number", "message": "numberAsDate"}
+            ],
+            "unsupported": [
+              { "type": "json", "message": "jsonPrimitivesOnly" }
+            ]
+          }
+        },
         "required": true
       },
       {
diff --git a/packages/client/src/components/app/charts/ApexChart.svelte b/packages/client/src/components/app/charts/ApexChart.svelte
index 506143852c..b40ebefeab 100644
--- a/packages/client/src/components/app/charts/ApexChart.svelte
+++ b/packages/client/src/components/app/charts/ApexChart.svelte
@@ -28,10 +28,19 @@
   }
 
   const renderChart = async (newChartElement) => {
-    await chart?.destroy()
-    chart = new ApexCharts(newChartElement, optionsCopy)
-    currentType = optionsCopy?.xaxis?.type
-    await chart.render()
+    try {
+      await chart?.destroy()
+      chart = new ApexCharts(newChartElement, optionsCopy)
+      currentType = optionsCopy?.xaxis?.type
+      await chart.render()
+    } catch (e) {
+      // Apex for some reason throws this error when creating a new chart.
+      // It doesn't actually cause any issues with the function of the chart, so
+      // just suppress it so the console doesn't get spammed
+      if (e.message !== "Cannot read properties of undefined (reading 'parentNode')") {
+        throw e
+      }
+    }
   }
 
   $: noData = optionsCopy == null || optionsCopy?.series?.length === 0

From d9e7202e3b1d6a86047fcf67f8ee78c625e2fe68 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Mon, 22 Apr 2024 07:10:00 +0100
Subject: [PATCH 101/123] wip

---
 .../subjects/DatesAsNumbers.svelte            | 16 +++--
 .../subjects/NumbersAsDates.svelte            | 57 +++++++++++++++-
 .../subjects/StringsAsDates.svelte            | 65 +++++++++++++++++--
 3 files changed, 123 insertions(+), 15 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/DatesAsNumbers.svelte b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/DatesAsNumbers.svelte
index 4921ac5823..e920395672 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/DatesAsNumbers.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/DatesAsNumbers.svelte
@@ -24,26 +24,32 @@
 
 <Subject heading="Dates as Numbers">
   <Section>
-    A date can be used in place of a numeric value, but it will be converted to a <Block>UNIX time</Block> timestamp, which is the number of milliseconds since Jan 1st 1970. A more recent moment in time will be a higher number.
+    A datetime value can be used in place of a numeric value, but it will be converted to a <Block>UNIX time</Block> timestamp, which is the number of milliseconds since Jan 1st 1970. A more recent moment in time will be a higher number.
   </Section>
 
     <ExampleSection
       heading="Examples:"
     >
       <ExampleLine>
-        1st Jan 2000<span class="separator">: </span><Block>946684800000</Block>
+        <Block>
+          {(new Date(946684800000).toLocaleString())}
+        </Block>
+          <span class="separator">{"->"} </span><Block>946684800000</Block>
       </ExampleLine>
       <ExampleLine>
-        1st Jan 2020<span class="separator">: </span><Block>1577836800000</Block>
+        <Block>
+          {(new Date(1577836800000).toLocaleString())}
+        </Block>
+          <span class="separator">{"->"} </span><Block>1577836800000</Block>
       </ExampleLine>
       <ExampleLine>
-        Now<span class="separator">:</span> <Block>{timestamp}</Block>
+        <Block>Now</Block><span class="separator">{"->"} </span><Block>{timestamp}</Block>
       </ExampleLine>
     </ExampleSection>
 </Subject>
 
 <style>
   .separator {
-    margin-right: 5px;
+    margin: 0 5px;
   }
 </style>
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/NumbersAsDates.svelte b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/NumbersAsDates.svelte
index b3bf785afc..f448a376d2 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/NumbersAsDates.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/NumbersAsDates.svelte
@@ -1,9 +1,60 @@
-
 <script>
+  import { onMount } from "svelte"
+  import { ExampleSection, ExampleLine, Block, Subject, Section } from './components'
+
+  let timestamp = Date.now();
+
+  onMount(() => {
+    let run = true;
+
+    const updateTimeStamp = () => {
+      timestamp = Date.now();
+      console.log(timestamp);
+      if (run) {
+        setTimeout(updateTimeStamp, 200)
+      }
+    }
+
+    updateTimeStamp();
+
+    return () => {
+      run = false;
+    }
+  })
 </script>
 
-<div>
-</div>
+<Subject heading="Numbers as Dates">
+  <Section>
+    A number value can be used in place of a datetime value, but it will be parsed as a <Block>UNIX time</Block> timestamp, which is the number of milliseconds since Jan 1st 1970. A more recent moment in time will be a higher number.
+  </Section>
+
+    <ExampleSection
+      heading="Examples:"
+    >
+      <ExampleLine>
+        <Block>946684800000</Block>
+        <span class="separator">{"->"}</span>
+        <Block>
+          {(new Date(946684800000).toLocaleString())}
+        </Block>
+      </ExampleLine>
+      <ExampleLine>
+        <Block>1577836800000</Block>
+        <span class="separator">{"->"}</span>
+        <Block>
+          {(new Date(1577836800000).toLocaleString())}
+        </Block>
+      </ExampleLine>
+      <ExampleLine>
+      <Block>{timestamp}</Block>
+      <span class="separator">{"->"}</span>
+        <Block>Now</Block>
+      </ExampleLine>
+    </ExampleSection>
+</Subject>
 
 <style>
+  .separator {
+    margin: 0 5px;
+  }
 </style>
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/StringsAsDates.svelte b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/StringsAsDates.svelte
index 3effc88640..af1336c28a 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/StringsAsDates.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/StringsAsDates.svelte
@@ -3,13 +3,13 @@
   import { ExampleSection, ExampleLine, Block, Subject, Section } from './components'
 
   let timestamp = Date.now();
+  $: iso = (new Date(timestamp)).toISOString();
 
   onMount(() => {
     let run = true;
 
     const updateTimeStamp = () => {
       timestamp = Date.now();
-      console.log(timestamp);
       if (run) {
         setTimeout(updateTimeStamp, 200)
       }
@@ -23,28 +23,79 @@
   })
 </script>
 
-<Subject heading="Dates as Numbers">
+<Subject heading="Strings as Dates">
   <Section>
-    A date can be used in place of a numeric value, but it will be parsed as a <Block>UNIX epoch</Block> timestamp, which is the number of milliseconds since Jan 1st 1970. A more recent moment in time will be a higher number.
+    A string value can be used in place of a datetime value, but it will be parsed as:
+  </Section>
+  <Section>
+    A <Block>UNIX time</Block> timestamp, which is the number of milliseconds since Jan 1st 1970. A more recent moment in time will be a higher number.
   </Section>
 
     <ExampleSection
       heading="Examples:"
     >
       <ExampleLine>
-        1st Jan 2000<span class="separator">: </span><Block>946684800000</Block>
+        <Block>946684800000</Block>
+        <span class="separator">{"->"}</span>
+        <Block>
+          {(new Date(946684800000).toLocaleString())}
+        </Block>
       </ExampleLine>
       <ExampleLine>
-        1st Jan 2020<span class="separator">: </span><Block>1577836800000</Block>
+        <Block>1577836800000</Block>
+        <span class="separator">{"->"}</span>
+        <Block>
+          {(new Date(1577836800000).toLocaleString())}
+        </Block>
       </ExampleLine>
       <ExampleLine>
-        Now<span class="separator">:</span> <Block>{timestamp}</Block>
+      <Block>{timestamp}</Block>
+      <span class="separator">{"->"}</span>
+        <Block>Now</Block>
       </ExampleLine>
     </ExampleSection>
+  <Section>
+    An <Block>ISO 8601</Block> datetime string. which is the number of milliseconds since Jan 1st 1970. A more recent moment in time will be a higher number.
+  </Section>
+    <div class="isoExamples">
+      <ExampleSection
+        heading="Examples:"
+      >
+        <ExampleLine>
+          <Block>2000-01-01T00:00:00.000Z</Block>
+          <span class="separator">{"->"}</span>
+          <Block>
+            {(new Date(946684800000).toLocaleString())}
+          </Block>
+        </ExampleLine>
+        <ExampleLine>
+          <Block>2000-01-01T00:00:00.000Z</Block>
+          <span class="separator">{"->"}</span>
+          <Block>
+            {(new Date(1577836800000).toLocaleString())}
+          </Block>
+        </ExampleLine>
+        <ExampleLine>
+        <Block>{iso}</Block>
+        <span class="separator">{"->"}</span>
+          <Block>Now</Block>
+        </ExampleLine>
+      </ExampleSection>
+    </div>
+
 </Subject>
 
 <style>
   .separator {
-    margin-right: 5px;
+    flex-shrink: 0;
+    margin: 0 5px;
+  }
+
+  .isoExamples :global(.block) {
+    word-break: break-all;
+  }
+
+  .isoExamples :global(.exampleLine) {
+    align-items: center;
   }
 </style>

From f629b95605cec34200a1aceb424c1b4c0063c737 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Mon, 22 Apr 2024 07:23:30 +0100
Subject: [PATCH 102/123] string dates

---
 .../DetailsModal/subjects/StringsAsDates.svelte     | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/StringsAsDates.svelte b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/StringsAsDates.svelte
index af1336c28a..852e1b12dc 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/StringsAsDates.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/StringsAsDates.svelte
@@ -55,7 +55,7 @@
       </ExampleLine>
     </ExampleSection>
   <Section>
-    An <Block>ISO 8601</Block> datetime string. which is the number of milliseconds since Jan 1st 1970. A more recent moment in time will be a higher number.
+    An <Block>ISO 8601</Block> datetime string, which represents an exact moment in time as well as the potentional to store the timezone it occured in. 
   </Section>
     <div class="isoExamples">
       <ExampleSection
@@ -63,21 +63,21 @@
       >
         <ExampleLine>
           <Block>2000-01-01T00:00:00.000Z</Block>
-          <span class="separator">{"->"}</span>
+          <span class="separator">↓</span>
           <Block>
             {(new Date(946684800000).toLocaleString())}
           </Block>
         </ExampleLine>
         <ExampleLine>
           <Block>2000-01-01T00:00:00.000Z</Block>
-          <span class="separator">{"->"}</span>
+          <span class="separator">↓</span>
           <Block>
             {(new Date(1577836800000).toLocaleString())}
           </Block>
         </ExampleLine>
         <ExampleLine>
         <Block>{iso}</Block>
-        <span class="separator">{"->"}</span>
+        <span class="separator">↓</span>
           <Block>Now</Block>
         </ExampleLine>
       </ExampleSection>
@@ -87,15 +87,18 @@
 
 <style>
   .separator {
-    flex-shrink: 0;
     margin: 0 5px;
   }
 
+
   .isoExamples :global(.block) {
     word-break: break-all;
   }
 
   .isoExamples :global(.exampleLine) {
     align-items: center;
+    flex-direction: column;
+    margin-bottom: 16px;
+    width: 162px;
   }
 </style>

From bdb67bcd35407cd7c1df2e55c5cc0ef177577062 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Mon, 22 Apr 2024 07:48:35 +0100
Subject: [PATCH 103/123] all chart inputs have the explanation modal

---
 .../subjects/StringsAsNumbers.svelte          |   2 +-
 .../Explanation/lines/StringAsNumber.svelte   |   4 +-
 packages/client/manifest.json                 | 152 ++++++++++++++++--
 3 files changed, 143 insertions(+), 15 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/StringsAsNumbers.svelte b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/StringsAsNumbers.svelte
index 0a466bf193..7d629ec396 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/StringsAsNumbers.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/StringsAsNumbers.svelte
@@ -4,7 +4,7 @@
 
 <Subject heading="Text as Numbers">
   <Section>
-    Text can be used in place of numbers in certain scenarios, but care needs to be taken, as text that doesn't contain a strictly base-ten integer or decimal value may lead to unexpected behavior.
+    Text can be used in place of numbers in certain scenarios, but care needs to be taken; if the value isn't purely numerical it may be converted in an unexpected way.
   </Section>
 
   <ExampleSection
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/lines/StringAsNumber.svelte b/packages/builder/src/components/design/settings/controls/Explanation/lines/StringAsNumber.svelte
index ae63c25733..da46c3163b 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/lines/StringAsNumber.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/lines/StringAsNumber.svelte
@@ -6,11 +6,11 @@
 </script>
 
 <Line>
-  <Text value="The input will ignore any " />
+  <Text value="Will be converted to a number, ignoring any " />
   <InfoWord
       on:mouseenter={() => setExplanationSubject(subjects.stringsAsNumbers)}
       on:mouseleave={() => setExplanationSubject(subjects.none)}
-    text="non-number values"
+    text="non-numerical values"
   />
   <Period />
 </Line>
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 10da498e3d..fb87020148 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -33,6 +33,20 @@
       "unsupported": [
         { "type": "json", "message": "jsonPrimitivesOnly" }
       ]
+    },
+    "datetimeLike": {
+      "supported": ["datetime"],
+      "partialSupport": [
+        { "type": "longform", "message": "stringAsDate" },
+        { "type": "string", "message": "stringAsDate" },
+        { "type": "options", "message": "stringAsDate" },
+        { "type": "formula", "message": "stringAsDate" },
+        { "type": "bigint", "message": "stringAsDate" },
+        { "type": "number", "message": "numberAsDate"}
+      ],
+      "unsupported": [
+        { "type": "json", "message": "jsonPrimitivesOnly" }
+      ]
     }
   },
   "layout": {
@@ -1649,6 +1663,11 @@
         "label": "Label column",
         "key": "labelColumn",
         "dependsOn": "dataProvider",
+        "explanation": {
+          "typeSupport": {
+            "preset": "stringLike"
+          }
+        },
         "required": true
       },
       {
@@ -1813,6 +1832,11 @@
         "label": "Label column",
         "key": "labelColumn",
         "dependsOn": "dataProvider",
+        "explanation": {
+          "typeSupport": {
+            "preset": "stringLike"
+          }
+        },
         "required": true
       },
       {
@@ -1972,6 +1996,11 @@
         "label": "Label column",
         "key": "labelColumn",
         "dependsOn": "dataProvider",
+        "explanation": {
+          "typeSupport": {
+            "preset": "stringLike"
+          }
+        },
         "required": true
       },
       {
@@ -2143,6 +2172,11 @@
         "label": "Label column",
         "key": "labelColumn",
         "dependsOn": "dataProvider",
+        "explanation": {
+          "typeSupport": {
+            "preset": "stringLike"
+          }
+        },
         "required": true
       },
       {
@@ -2278,6 +2312,11 @@
         "label": "Label column",
         "key": "labelColumn",
         "dependsOn": "dataProvider",
+        "explanation": {
+          "typeSupport": {
+            "preset": "stringLike"
+          }
+        },
         "required": true
       },
       {
@@ -2415,18 +2454,7 @@
         "dependsOn": "dataProvider",
         "explanation": {
           "typeSupport": {
-            "supported": ["datetime"],
-            "partialSupport": [
-              { "type": "longform", "message": "stringAsDate" },
-              { "type": "string", "message": "stringAsDate" },
-              { "type": "options", "message": "stringAsDate" },
-              { "type": "formula", "message": "stringAsDate" },
-              { "type": "bigint", "message": "stringAsDate" },
-              { "type": "number", "message": "numberAsDate"}
-            ],
-            "unsupported": [
-              { "type": "json", "message": "jsonPrimitivesOnly" }
-            ]
+            "preset": "datetimeLike"
           }
         },
         "required": true
@@ -2436,6 +2464,11 @@
         "label": "Open column",
         "key": "openColumn",
         "dependsOn": "dataProvider",
+        "explanation": {
+          "typeSupport": {
+            "preset": "numberLike"
+          }
+        },
         "required": true
       },
       {
@@ -2443,6 +2476,11 @@
         "label": "Close column",
         "key": "closeColumn",
         "dependsOn": "dataProvider",
+        "explanation": {
+          "typeSupport": {
+            "preset": "numberLike"
+          }
+        },
         "required": true
       },
       {
@@ -2450,6 +2488,11 @@
         "label": "High column",
         "key": "highColumn",
         "dependsOn": "dataProvider",
+        "explanation": {
+          "typeSupport": {
+            "preset": "numberLike"
+          }
+        },
         "required": true
       },
       {
@@ -2457,6 +2500,11 @@
         "label": "Low column",
         "key": "lowColumn",
         "dependsOn": "dataProvider",
+        "explanation": {
+          "typeSupport": {
+            "preset": "numberLike"
+          }
+        },
         "required": true
       },
       {
@@ -5336,6 +5384,11 @@
             "label": "Label column",
             "key": "labelColumn",
             "dependsOn": "dataSource",
+            "explanation": {
+              "typeSupport": {
+                "preset": "stringLike"
+              }
+            },
             "required": true
           },
           {
@@ -5343,6 +5396,11 @@
             "label": "Data column",
             "key": "valueColumn",
             "dependsOn": "dataSource",
+            "explanation": {
+              "typeSupport": {
+                "preset": "numberLike"
+              }
+            },
             "required": true
           }
         ]
@@ -5361,6 +5419,11 @@
             "label": "Label column",
             "key": "labelColumn",
             "dependsOn": "dataSource",
+            "explanation": {
+              "typeSupport": {
+                "preset": "stringLike"
+              }
+            },
             "required": true
           },
           {
@@ -5368,6 +5431,11 @@
             "label": "Data column",
             "key": "valueColumn",
             "dependsOn": "dataSource",
+            "explanation": {
+              "typeSupport": {
+                "preset": "numberLike"
+              }
+            },
             "required": true
           }
         ]
@@ -5386,6 +5454,11 @@
             "label": "Label column",
             "key": "labelColumn",
             "dependsOn": "dataSource",
+            "explanation": {
+              "typeSupport": {
+                "preset": "stringLike"
+              }
+            },
             "required": true
           },
           {
@@ -5393,6 +5466,11 @@
             "label": "Data columns",
             "key": "valueColumns",
             "dependsOn": "dataSource",
+            "explanation": {
+              "typeSupport": {
+                "preset": "numberLike"
+              }
+            },
             "required": true
           },
           {
@@ -5440,6 +5518,11 @@
             "label": "Value column",
             "key": "valueColumn",
             "dependsOn": "dataSource",
+            "explanation": {
+              "typeSupport": {
+                "preset": "numberLike"
+              }
+            },
             "required": true
           },
           {
@@ -5481,6 +5564,11 @@
             "label": "Label column",
             "key": "labelColumn",
             "dependsOn": "dataSource",
+            "explanation": {
+              "typeSupport": {
+                "preset": "stringLike"
+              }
+            },
             "required": true
           },
           {
@@ -5488,6 +5576,11 @@
             "label": "Data columns",
             "key": "valueColumns",
             "dependsOn": "dataSource",
+            "explanation": {
+              "typeSupport": {
+                "preset": "numberLike"
+              }
+            },
             "required": true
           },
           {
@@ -5530,6 +5623,11 @@
             "label": "Label columns",
             "key": "labelColumn",
             "dependsOn": "dataSource",
+            "explanation": {
+              "typeSupport": {
+                "preset": "stringLike"
+              }
+            },
             "required": true
           },
           {
@@ -5537,6 +5635,11 @@
             "label": "Data columns",
             "key": "valueColumns",
             "dependsOn": "dataSource",
+            "explanation": {
+              "typeSupport": {
+                "preset": "numberLike"
+              }
+            },
             "required": true
           },
           {
@@ -5591,6 +5694,11 @@
             "label": "Date column",
             "key": "dateColumn",
             "dependsOn": "dataSource",
+            "explanation": {
+              "typeSupport": {
+                "preset": "datetimeLike"
+              }
+            },
             "required": true
           },
           {
@@ -5598,6 +5706,11 @@
             "label": "Open column",
             "key": "openColumn",
             "dependsOn": "dataSource",
+            "explanation": {
+              "typeSupport": {
+                "preset": "numberLike"
+              }
+            },
             "required": true
           },
           {
@@ -5605,6 +5718,11 @@
             "label": "Close column",
             "key": "closeColumn",
             "dependsOn": "dataSource",
+            "explanation": {
+              "typeSupport": {
+                "preset": "numberLike"
+              }
+            },
             "required": true
           },
           {
@@ -5612,6 +5730,11 @@
             "label": "High column",
             "key": "highColumn",
             "dependsOn": "dataSource",
+            "explanation": {
+              "typeSupport": {
+                "preset": "numberLike"
+              }
+            },
             "required": true
           },
           {
@@ -5619,6 +5742,11 @@
             "label": "Low column",
             "key": "lowColumn",
             "dependsOn": "dataSource",
+            "explanation": {
+              "typeSupport": {
+                "preset": "numberLike"
+              }
+            },
             "required": true
           },
           {

From 06bab3397fed48dd03e78acb96b2428d8e98b90a Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Mon, 22 Apr 2024 08:15:08 +0100
Subject: [PATCH 104/123] remove previous option stuff and animations

---
 packages/bbui/src/Tooltip/Context.svelte      | 159 +++---------------
 .../Explanation/DetailsModal/index.svelte     |   1 -
 .../controls/Explanation/Explanation.svelte   |   3 +-
 .../settings/controls/FieldSelect.svelte      |  11 --
 .../settings/controls/MultiFieldSelect.svelte |  19 +--
 5 files changed, 28 insertions(+), 165 deletions(-)

diff --git a/packages/bbui/src/Tooltip/Context.svelte b/packages/bbui/src/Tooltip/Context.svelte
index e0abd882c8..624ec90da1 100644
--- a/packages/bbui/src/Tooltip/Context.svelte
+++ b/packages/bbui/src/Tooltip/Context.svelte
@@ -6,96 +6,30 @@
   export let anchor
   export let visible = false
   export let offset = 0;
-  export let noAnimation = false
 
   $: target = getContext(Context.PopoverRoot) || "#app"
 
   let hovering = false
-  let wrapper
-  let currentTooltip
-  let previousTooltip
+  let tooltip
+  let x = 0
+  let y = 0
 
-  let initialShow = true;
-  let previousX = 0
-  let previousY = 0
-  let currentX = 0
-  let currentY = 0
-
-  let currentTooltipWidth = 0
-  let currentTooltipHeight = 0
-
-  const handleVisibilityChange = (visible, hovering) => {
-    if (!visible && !hovering) {
-      initialShow = true;
+  const updatePosition = (anchor, tooltip) => {
+    if (anchor == null || tooltip == null) {
+      return;
     }
-  }
 
-  const updatePosition = (anchor, currentTooltip, previousTooltip, wrapper) => {
     requestAnimationFrame(() => {
-      if (anchor == null || currentTooltip == null || previousTooltip == null || wrapper == null) {
-        return;
-      }
-
       const rect = anchor.getBoundingClientRect();
+      const windowOffset = (window.innerHeight - offset) - (tooltip.clientHeight + rect.y)
+      const tooltipWidth = tooltip.clientWidth
 
-
-      const windowOffset = (window.innerHeight - offset) - (currentTooltip.clientHeight + rect.y)
-
-      currentTooltipWidth = currentTooltip.clientWidth
-      currentTooltipHeight = currentTooltip.clientHeight
-
-      previousX = currentX
-      previousY = currentY
-
-      // - width to align to left side of anchor
-      currentX = rect.x - currentTooltipWidth - offset
-      currentY = windowOffset < 0 ? rect.y + windowOffset : rect.y
-      const fadeIn = [{ opacity: "0" }, { opacity: "1" }];
-      const fadeOut = [{ opacity: "1" }, { opacity: "0" }];
-
-      const fadeInTiming = {
-        duration: 200,
-        delay: 100,
-        iterations: 1,
-        easing: "ease-in",
-        fill: "both"
-      };
-      const fadeOutTiming = {
-        duration: 200,
-        iterations: 1,
-        easing: "ease-in",
-        fill: "forwards"
-      };
-
-      if (!noAnimation) {
-      currentTooltip.animate(fadeIn, fadeInTiming);
-      previousTooltip.animate(fadeOut, fadeOutTiming);
-      }
-
-      // Bypass animations if the tooltip has only just been opened
-      if (initialShow) {
-        initialShow = false;
-
-        previousTooltip.style.visibility = "hidden"
-
-        wrapper.style.transition = "none";
-        //wrapper.style.width = `${currentTooltipWidth}px`
-        //wrapper.style.height = `${currentTooltipHeight}px`
-        wrapper.style.top = `${currentY}px`
-        wrapper.style.left = `${currentX}px`
-
-
-        requestAnimationFrame(() => {
-          wrapper.style.removeProperty("transition");
-        })
-      } else {
-        previousTooltip.style.removeProperty("visibility");
-      }
+      x = rect.x - tooltipWidth - offset
+      y = windowOffset < 0 ? rect.y + windowOffset : rect.y
     })
   }
 
-  $: updatePosition(anchor, currentTooltip, previousTooltip, wrapper)
-  $: handleVisibilityChange(visible, hovering)
+  $: updatePosition(anchor, tooltip)
 
   const handleMouseenter = (e) => {
     hovering = true;
@@ -108,85 +42,38 @@
 
 <Portal {target}>
   <div
-    bind:this={wrapper}
     on:mouseenter={handleMouseenter}
     on:mouseleave={handleMouseleave}
-    style:left={`${currentX}px`}
-    style:top={`${currentY}px`}
-    style:width={`${currentTooltipWidth}px`}
-    style:height={`${currentTooltipHeight}px`}
-    class="tooltip"
+    style:left={`${x}px`}
+    style:top={`${y}px`}
+    class="wrapper"
     class:visible={visible || hovering}
-    class:noAnimation
   >
-  <!-- absolutely position element with the opposite positioning, so that the tooltip elements can be positioned
-    using the same values as the root wrapper, while still being occluded by it.
-  -->
-    <div class="screenSizeAbsoluteWrapper"
-      style:left={`${-currentX}px`}
-      style:top={`${-currentY}px`}
-    class:noAnimation
-      >
-      <div
-        bind:this={currentTooltip}
-        class="currentContent"
-        style:left={`${currentX}px`}
-        style:top={`${currentY}px`}
-      >
-        <slot />
-      </div>
-      <div
-        class="previousContent"
-        style:left={`${previousX}px`}
-        style:top={`${previousY}px`}
-        bind:this={previousTooltip}
-      >
-        <slot name="previous"/>
-      </div>
+    <div
+      bind:this={tooltip}
+      class="tooltip"
+    >
+      <slot />
     </div>
   </div>
 </Portal>
 
 <style>
-  .tooltip {
-    position: absolute;
-    z-index: 9999;
-    pointer-events: none;
+  .wrapper {
     background-color: var(--background-alt);
     box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.42);
+    opacity: 0;
+    overflow: hidden;
 
     border-radius: 5px;
     box-sizing: border-box;
     border: 1px solid var(--grey-4);
-    opacity: 0;
-    overflow: hidden;
-
-    transition: width 300ms ease-in, height 300ms ease-in, top 300ms ease-in, left 300ms ease-in;
-  }
-
-  .screenSizeAbsoluteWrapper {
-    width: 200vw;
-    height: 100vh;
     position: absolute;
-    transition: top 300ms ease-in, left 300ms ease-in;
-  }
-
-  .noAnimation {
-    transition: none;
+    z-index: 1000;
   }
 
   .visible {
     opacity: 1;
     pointer-events: auto;
   }
-
-  .currentContent {
-    position: absolute;
-    z-index: 10001;
-  }
-
-  .previousContent {
-    position: absolute;
-    z-index: 10000;
-  }
 </style>
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/index.svelte b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/index.svelte
index f6310fdaba..2650124ea5 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/index.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/index.svelte
@@ -11,7 +11,6 @@
 
 
 <ContextTooltip
-  noAnimation
   visible={subject !== subjects.none}
   {anchor}
   offset={20}
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/Explanation.svelte b/packages/builder/src/components/design/settings/controls/Explanation/Explanation.svelte
index e5c9e9e752..0bc11a937e 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/Explanation.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/Explanation.svelte
@@ -11,7 +11,6 @@
   export let columnIcon
   export let columnType
   export let columnName
-  export let showDetails = false
 
   export let tableHref = () => {}
 
@@ -84,7 +83,7 @@
   {/if}
 </div>
 
-{#if showDetails}
+{#if detailsModalSubject !== subjects.none}
   <DetailsModal
     {columnName}
     anchor={root}
diff --git a/packages/builder/src/components/design/settings/controls/FieldSelect.svelte b/packages/builder/src/components/design/settings/controls/FieldSelect.svelte
index 28abd66764..54fdbff2c5 100644
--- a/packages/builder/src/components/design/settings/controls/FieldSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldSelect.svelte
@@ -16,7 +16,6 @@
 
   let contextTooltipAnchor = null
   let currentOption = null
-  let previousOption = null
   let contextTooltipVisible = false
 
   const dispatch = createEventDispatcher()
@@ -49,7 +48,6 @@
         contextTooltipVisible = false;
     } else {
     contextTooltipAnchor = e?.target;
-    previousOption = currentOption;
     currentOption = option;
     contextTooltipVisible = true;
     }
@@ -110,7 +108,6 @@
     offset={20}
   >
     <Explanation
-      showDetails
       tableHref={`/builder/app/${$params.application}/data/table/${datasource?.tableId}`}
       schema={schema[currentOption]}
       columnIcon={getOptionIcon(currentOption)}
@@ -118,13 +115,5 @@
       columnType={getOptionIconTooltip(currentOption)}
       {explanation}
     />
-    <Explanation
-      slot="previous"
-      schema={schema[previousOption]}
-      columnIcon={getOptionIcon(previousOption)}
-      columnName={previousOption}
-      columnType={getOptionIconTooltip(previousOption)}
-      {explanation}
-    />
   </ContextTooltip>
 {/if}
diff --git a/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte b/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
index 721ac7bb88..eb46999cda 100644
--- a/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
@@ -18,7 +18,6 @@
 
   let contextTooltipAnchor = null
   let currentOption = null
-  let previousOption = null
   let contextTooltipVisible = false
 
   $: componentDefinition = componentStore.getDefinition(
@@ -80,12 +79,11 @@
 
   const updateTooltip = debounce((e, option) => {
     if (option == null) {
-        contextTooltipVisible = false;
+      contextTooltipVisible = false;
     } else {
-    contextTooltipAnchor = e?.target;
-    previousOption = currentOption;
-    currentOption = option;
-    contextTooltipVisible = true;
+      contextTooltipAnchor = e?.target;
+      currentOption = option;
+      contextTooltipVisible = true;
     }
   }, 200);
 
@@ -116,7 +114,6 @@
     offset={20}
   >
     <Explanation
-      showDetails
       tableHref={`/builder/app/${$params.application}/data/table/${datasource?.tableId}`}
       schema={schema[currentOption]}
       columnIcon={getOptionIcon(currentOption)}
@@ -124,13 +121,5 @@
       columnType={getOptionIconTooltip(currentOption)}
       {explanation}
     />
-    <Explanation
-      slot="previous"
-      schema={schema[previousOption]}
-      columnIcon={getOptionIcon(previousOption)}
-      columnName={previousOption}
-      columnType={getOptionIconTooltip(previousOption)}
-      {explanation}
-    />
   </ContextTooltip>
 {/if}

From 222bed8a7e77d8ae6e7e885b161b46e333df8eb4 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Mon, 22 Apr 2024 08:17:23 +0100
Subject: [PATCH 105/123] wip

---
 packages/bbui/src/Tooltip/Context.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/bbui/src/Tooltip/Context.svelte b/packages/bbui/src/Tooltip/Context.svelte
index 624ec90da1..ea63fe2455 100644
--- a/packages/bbui/src/Tooltip/Context.svelte
+++ b/packages/bbui/src/Tooltip/Context.svelte
@@ -69,6 +69,7 @@
     box-sizing: border-box;
     border: 1px solid var(--grey-4);
     position: absolute;
+    pointer-events: none;
     z-index: 1000;
   }
 

From a94953289eeb6d168b45d4e7d41443b1d44cf170 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Mon, 22 Apr 2024 08:23:38 +0100
Subject: [PATCH 106/123] Remove old stuff i aded to selects and picker

---
 .../bbui/src/Form/Core/Multiselect.svelte     |  10 -
 packages/bbui/src/Form/Core/Picker.svelte     | 198 ++++++++----------
 packages/bbui/src/Form/Multiselect.svelte     |  10 -
 3 files changed, 92 insertions(+), 126 deletions(-)

diff --git a/packages/bbui/src/Form/Core/Multiselect.svelte b/packages/bbui/src/Form/Core/Multiselect.svelte
index a9e0efb57b..4873430fa0 100644
--- a/packages/bbui/src/Form/Core/Multiselect.svelte
+++ b/packages/bbui/src/Form/Core/Multiselect.svelte
@@ -9,10 +9,6 @@
   export let options = []
   export let getOptionLabel = option => option
   export let getOptionValue = option => option
-  export let getOptionIcon = () => null
-  export let getOptionIconTooltip = () => null
-  export let getOptionTooltip = () => null
-  export let isOptionEnabled = () => true
   export let readonly = false
   export let autocomplete = false
   export let sort = false
@@ -21,7 +17,6 @@
   export let customPopoverHeight
   export let open = false
   export let loading
-  export let align
   export let onOptionMouseenter = () => {}
   export let onOptionMouseleave = () => {}
 
@@ -87,10 +82,6 @@
 
 <Picker
   on:loadMore
-  {isOptionEnabled}
-  {getOptionIcon}
-  {getOptionIconTooltip}
-  {getOptionTooltip}
   {id}
   {disabled}
   {readonly}
@@ -108,7 +99,6 @@
   {autoWidth}
   {customPopoverHeight}
   {loading}
-  {align}
   {onOptionMouseenter}
   {onOptionMouseleave}
 />
diff --git a/packages/bbui/src/Form/Core/Picker.svelte b/packages/bbui/src/Form/Core/Picker.svelte
index a9a9c01ce0..55bd95b5e2 100644
--- a/packages/bbui/src/Form/Core/Picker.svelte
+++ b/packages/bbui/src/Form/Core/Picker.svelte
@@ -11,13 +11,6 @@
   import Tags from "../../Tags/Tags.svelte"
   import Tag from "../../Tags/Tag.svelte"
   import ProgressCircle from "../../ProgressCircle/ProgressCircle.svelte"
-  import {
-    default as AbsTooltip,
-    TooltipPosition,
-    TooltipType,
-  } from "../../Tooltip/AbsTooltip.svelte"
-  import ContextTooltip from "../../Tooltip/Context.svelte"
-  import { Heading } from "@budibase/bbui"
 
   export let id = null
   export let disabled = false
@@ -33,8 +26,6 @@
   export let getOptionLabel = option => option
   export let getOptionValue = option => option
   export let getOptionIcon = () => null
-  export let getOptionIconTooltip = () => null
-  export let getOptionTooltip = () => null
   export let useOptionIconImage = false
   export let getOptionColour = () => null
   export let getOptionSubtitle = () => null
@@ -56,6 +47,7 @@
   const dispatch = createEventDispatcher()
 
   let button
+  let popover
   let component
 
   $: sortedOptions = getSortedOptions(options, getOptionLabel, sort)
@@ -161,6 +153,7 @@
 <Popover
   anchor={customAnchor ? customAnchor : button}
   align={align || "left"}
+  bind:this={popover}
   {open}
   on:close={() => (open = false)}
   useAnchorWidth={!autoWidth}
@@ -168,29 +161,85 @@
   customHeight={customPopoverHeight}
 >
   <div
-      class="popover-content"
-      class:auto-width={autoWidth}
-      use:clickOutside={() => (open = false)}
-    >
-      {#if autocomplete}
-        <Search
-          value={searchTerm}
-          on:change={event => (searchTerm = event.detail)}
-          {disabled}
-          placeholder="Search"
-        />
+    class="popover-content"
+    class:auto-width={autoWidth}
+    use:clickOutside={() => (open = false)}
+  >
+    {#if autocomplete}
+      <Search
+        value={searchTerm}
+        on:change={event => (searchTerm = event.detail)}
+        {disabled}
+        placeholder="Search"
+      />
+    {/if}
+    <ul class="spectrum-Menu" role="listbox" bind:this={component}>
+      {#if placeholderOption}
+        <li
+          class="spectrum-Menu-item placeholder"
+          class:is-selected={isPlaceholder}
+          role="option"
+          aria-selected="true"
+          tabindex="0"
+          on:click={() => onSelectOption(null)}
+        >
+          <span class="spectrum-Menu-itemLabel">{placeholderOption}</span>
+          <svg
+            class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
+            focusable="false"
+            aria-hidden="true"
+          >
+            <use xlink:href="#spectrum-css-icon-Checkmark100" />
+          </svg>
+        </li>
       {/if}
-      <ul class="spectrum-Menu" role="listbox" bind:this={component}>
-        {#if placeholderOption}
+      {#if filteredOptions.length}
+        {#each filteredOptions as option, idx}
           <li
-            class="spectrum-Menu-item placeholder"
-            class:is-selected={isPlaceholder}
+            class="spectrum-Menu-item"
+            class:is-selected={isOptionSelected(getOptionValue(option, idx))}
             role="option"
             aria-selected="true"
             tabindex="0"
-            on:click={() => onSelectOption(null)}
+            on:click={() => onSelectOption(getOptionValue(option, idx))}
+            on:mouseenter={(e) => onOptionMouseenter(e, option)}
+            on:mouseleave={(e) => onOptionMouseleave(e, option)}
+            class:is-disabled={!isOptionEnabled(option)}
           >
-            <span class="spectrum-Menu-itemLabel">{placeholderOption}</span>
+            {#if getOptionIcon(option, idx)}
+              <span class="option-extra icon">
+                {#if useOptionIconImage}
+                  <img
+                    src={getOptionIcon(option, idx)}
+                    alt="icon"
+                    width="15"
+                    height="15"
+                  />
+                {:else}
+                  <Icon size="S" name={getOptionIcon(option, idx)} />
+                {/if}
+              </span>
+            {/if}
+            {#if getOptionColour(option, idx)}
+              <span class="option-extra">
+                <StatusLight square color={getOptionColour(option, idx)} />
+              </span>
+            {/if}
+            <span class="spectrum-Menu-itemLabel">
+              {getOptionLabel(option, idx)}
+              {#if getOptionSubtitle(option, idx)}
+                <span class="subtitle-text">
+                  {getOptionSubtitle(option, idx)}
+                </span>
+              {/if}
+            </span>
+            {#if option.tag}
+              <span class="option-tag">
+                <Tags>
+                  <Tag icon="LockClosed">{option.tag}</Tag>
+                </Tags>
+              </span>
+            {/if}
             <svg
               class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
               focusable="false"
@@ -199,88 +248,25 @@
               <use xlink:href="#spectrum-css-icon-Checkmark100" />
             </svg>
           </li>
-        {/if}
-        {#if filteredOptions.length}
-          {#each filteredOptions as option, idx}
-              <li
-                on:mouseenter={(e) => onOptionMouseenter(e, option)}
-                on:mouseleave={(e) => onOptionMouseleave(e, option)}
-                class="spectrum-Menu-item"
-                class:is-selected={isOptionSelected(getOptionValue(option, idx))}
-                role="option"
-                aria-selected="true"
-                tabindex="0"
-                on:click={() => onSelectOption(getOptionValue(option, idx))}
-                class:is-disabled={!isOptionEnabled(option)}
-              >
-                {#if getOptionIcon(option, idx)}
-                  <span class="option-extra icon">
-                    {#if useOptionIconImage}
-                      <img
-                        src={getOptionIcon(option, idx)}
-                        alt="icon"
-                        width="15"
-                        height="15"
-                      />
-                    {:else}
-                      <Icon tooltip={getOptionIconTooltip(option)} size="S" name={getOptionIcon(option, idx)} />
-                    {/if}
-                  </span>
-                {/if}
-                {#if getOptionColour(option, idx)}
-                  <span class="option-extra">
-                    <StatusLight square color={getOptionColour(option, idx)} />
-                  </span>
-                {/if}
-                <span class="spectrum-Menu-itemLabel">
-                  {getOptionLabel(option, idx)}
-                  {#if getOptionSubtitle(option, idx)}
-                    <span class="subtitle-text">
-                      {getOptionSubtitle(option, idx)}
-                    </span>
-                  {/if}
-                </span>
-                {#if option.tag}
-                  <span class="option-tag">
-                    <Tags>
-                      <Tag icon="LockClosed">{option.tag}</Tag>
-                    </Tags>
-                  </span>
-                {/if}
-                <svg
-                  class="selectedIcon spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
-                  focusable="false"
-                  aria-hidden="true"
-                >
-                  <use xlink:href="#spectrum-css-icon-Checkmark100" />
-                </svg>
-              </li>
-          {/each}
-        {/if}
-      </ul>
-
-      {#if loading}
-        <div class="loading" class:loading--withAutocomplete={autocomplete}>
-          <ProgressCircle size="S" />
-        </div>
+        {/each}
       {/if}
+    </ul>
+
+    {#if loading}
+      <div class="loading" class:loading--withAutocomplete={autocomplete}>
+        <ProgressCircle size="S" />
+      </div>
+    {/if}
+
+    {#if footer}
+      <div class="footer">
+        {footer}
+      </div>
+    {/if}
+  </div>
+</Popover>
 
-      {#if footer}
-        <div class="footer">
-          {footer}
-        </div>
-      {/if}
-    </div>
-  </Popover>
 <style>
-  .spectrum-Menu {
-    display: block;
-  }
-
-  .spectrum-Menu:hover .context {
-    display: block;
-  }
-
   .spectrum-Picker {
     width: 100%;
     box-shadow: none;
@@ -351,7 +337,7 @@
     right: 2px;
     top: 2px;
   }
-    .popover-content :global(.spectrum-Search .spectrum-Textfield-icon) {
+  .popover-content :global(.spectrum-Search .spectrum-Textfield-icon) {
     top: 9px;
   }
 
diff --git a/packages/bbui/src/Form/Multiselect.svelte b/packages/bbui/src/Form/Multiselect.svelte
index fe90665b61..9878605f4b 100644
--- a/packages/bbui/src/Form/Multiselect.svelte
+++ b/packages/bbui/src/Form/Multiselect.svelte
@@ -13,17 +13,12 @@
   export let options = []
   export let getOptionLabel = option => option
   export let getOptionValue = option => option
-  export let getOptionIcon = () => null
-  export let getOptionIconTooltip = () => null
-  export let getOptionTooltip = () => null
-  export let isOptionEnabled = () => true
   export let sort = false
   export let autoWidth = false
   export let autocomplete = false
   export let searchTerm = null
   export let customPopoverHeight
   export let helpText = null
-  export let align
   export let onOptionMouseenter = () => {}
   export let onOptionMouseleave = () => {}
 
@@ -36,10 +31,6 @@
 
 <Field {helpText} {label} {labelPosition} {error}>
   <Multiselect
-    {isOptionEnabled}
-    {getOptionIcon}
-    {getOptionIconTooltip}
-  {getOptionTooltip}
     {error}
     {disabled}
     {readonly}
@@ -52,7 +43,6 @@
     {autoWidth}
     {autocomplete}
     {customPopoverHeight}
-    {align}
     {onOptionMouseenter}
     {onOptionMouseleave}
     bind:searchTerm

From 0249912154ba877632f552e5864f47ca3412d2d7 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Mon, 22 Apr 2024 08:27:09 +0100
Subject: [PATCH 107/123] remove old chart inputs

---
 .../design/settings/componentSettings.js      |  4 --
 .../settings/controls/ChartFieldSelect.svelte | 53 -------------------
 .../controls/ChartMultifieldSelect.svelte     | 48 -----------------
 .../DetailsModal/subjects/Column.svelte       |  4 +-
 .../src/components/app/charts/BarChart.svelte |  2 +-
 .../app/charts/CandleStickChart.svelte        |  5 +-
 6 files changed, 5 insertions(+), 111 deletions(-)
 delete mode 100644 packages/builder/src/components/design/settings/controls/ChartFieldSelect.svelte
 delete mode 100644 packages/builder/src/components/design/settings/controls/ChartMultifieldSelect.svelte

diff --git a/packages/builder/src/components/design/settings/componentSettings.js b/packages/builder/src/components/design/settings/componentSettings.js
index 15f5ee4523..2a5483d77c 100644
--- a/packages/builder/src/components/design/settings/componentSettings.js
+++ b/packages/builder/src/components/design/settings/componentSettings.js
@@ -9,10 +9,8 @@ import TableSelect from "./controls/TableSelect.svelte"
 import ColorPicker from "./controls/ColorPicker.svelte"
 import { IconSelect } from "./controls/IconSelect"
 import FieldSelect from "./controls/FieldSelect.svelte"
-import ChartFieldSelect from "./controls/ChartFieldSelect.svelte"
 import SortableFieldSelect from "./controls/SortableFieldSelect.svelte"
 import MultiFieldSelect from "./controls/MultiFieldSelect.svelte"
-import ChartMultiFieldSelect from "./controls/ChartMultiFieldSelect.svelte"
 import SearchFieldSelect from "./controls/SearchFieldSelect.svelte"
 import SchemaSelect from "./controls/SchemaSelect.svelte"
 import SectionSelect from "./controls/SectionSelect.svelte"
@@ -48,9 +46,7 @@ const componentMap = {
   color: ColorPicker,
   icon: IconSelect,
   field: FieldSelect,
-  chartfield: ChartFieldSelect,
   multifield: MultiFieldSelect,
-  chartmultifield: ChartMultiFieldSelect,
   searchfield: SearchFieldSelect,
   options: OptionsEditor,
   schema: SchemaSelect,
diff --git a/packages/builder/src/components/design/settings/controls/ChartFieldSelect.svelte b/packages/builder/src/components/design/settings/controls/ChartFieldSelect.svelte
deleted file mode 100644
index 2f65907e47..0000000000
--- a/packages/builder/src/components/design/settings/controls/ChartFieldSelect.svelte
+++ /dev/null
@@ -1,53 +0,0 @@
-<script>
-  import { Select } from "@budibase/bbui"
-  import {
-    getDatasourceForProvider,
-    getSchemaForDatasource,
-  } from "dataBinding"
-  import { selectedScreen } from "stores/builder"
-  import { createEventDispatcher } from "svelte"
-
-  export let componentInstance = {}
-  export let value = ""
-  export let placeholder
-
-  const dispatch = createEventDispatcher()
-  $: datasource = getDatasourceForProvider($selectedScreen, componentInstance)
-  $: schema = getSchemaForDatasource($selectedScreen, datasource).schema
-  $: options = Object.keys(schema || {}).filter(key => {
-    return (
-      schema[key].type !== "json" &&
-      schema[key].type !== "array" &&
-      schema[key].type !== "attachment" &&
-      schema[key].type !== "barcodeqr" &&
-      schema[key].type !== "link" &&
-      schema[key].type !== "bb_reference"
-    );
-  });
-  $: boundValue = getValidValue(value, options)
-
-  const getValidValue = (value, options) => {
-    // Reset value if there aren't any options
-    if (!Array.isArray(options)) {
-      return null
-    }
-
-    // Reset value if the value isn't found in the options
-    if (options.indexOf(value) === -1) {
-      return null
-    }
-
-    return value
-  }
-
-  const onChange = value => {
-    boundValue = getValidValue(value.detail, options)
-    dispatch("change", boundValue)
-  }
-
-  $: {
-    console.log(options, schema);
-  }
-</script>
-
-<Select {placeholder} value={boundValue} on:change={onChange} {options} />
diff --git a/packages/builder/src/components/design/settings/controls/ChartMultifieldSelect.svelte b/packages/builder/src/components/design/settings/controls/ChartMultifieldSelect.svelte
deleted file mode 100644
index 2091b16ae4..0000000000
--- a/packages/builder/src/components/design/settings/controls/ChartMultifieldSelect.svelte
+++ /dev/null
@@ -1,48 +0,0 @@
-<script>
-  import { Multiselect } from "@budibase/bbui"
-  import { getDatasourceForProvider, getSchemaForDatasource } from "dataBinding"
-  import { selectedScreen } from "stores/builder"
-  import { createEventDispatcher } from "svelte"
-
-  export let componentInstance = {}
-  export let value = ""
-  export let placeholder
-  export let fieldValidator
-
-  const dispatch = createEventDispatcher()
-  $: datasource = getDatasourceForProvider($selectedScreen, componentInstance)
-  $: schema = getSchemaForDatasource($selectedScreen, datasource).schema
-
-  const getOptions = (schema, fieldValidator) => {
-    if (fieldValidator != null) {
-      return Object.keys(schema || {})
-    }
-  }
-
-  $: options = Object.keys(schema || {}).filter(key => {
-    return (
-      schema[key].type !== "json" &&
-      schema[key].type !== "array" &&
-      schema[key].type !== "attachment" &&
-      schema[key].type !== "barcodeqr" &&
-      schema[key].type !== "link" &&
-      schema[key].type !== "bb_reference"
-    );
-  });
-  $: boundValue = getValidOptions(value, options)
-
-  const getValidOptions = (selectedOptions, allOptions) => {
-    // Fix the hardcoded default string value
-    if (!Array.isArray(selectedOptions)) {
-      selectedOptions = []
-    }
-    return selectedOptions.filter(val => allOptions.indexOf(val) !== -1)
-  }
-
-  const setValue = value => {
-    boundValue = getValidOptions(value.detail, options)
-    dispatch("change", boundValue)
-  }
-</script>
-
-<Multiselect {placeholder} value={boundValue} on:change={setValue} {options} />
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/Column.svelte b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/Column.svelte
index d23d70d34c..ef2242dd99 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/Column.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/Column.svelte
@@ -10,8 +10,8 @@
       return "None"
     }
 
-    const epoch = Date.parse(isoString);
-    const date = new Date(epoch);
+    const unixTime = Date.parse(isoString);
+    const date = new Date(unixTime);
 
     return date.toLocaleString();
   }
diff --git a/packages/client/src/components/app/charts/BarChart.svelte b/packages/client/src/components/app/charts/BarChart.svelte
index 8fa2a29b9a..2682fac4d4 100644
--- a/packages/client/src/components/app/charts/BarChart.svelte
+++ b/packages/client/src/components/app/charts/BarChart.svelte
@@ -79,7 +79,7 @@
         text: xAxisLabel
       }
     },
-    // Providing `type: "datetime"` normally makes Apex Charts parse epochs nicely with no additonal config, but bar charts in horizontal mode don't have a default setting for parsing the labels of dates, and will just spit out the unix epoch value. It also doesn't seem to respect any date based formatting properties passed in. So we'll just manualy format the labels, the chart still sorts the dates correctly in any case
+    // Providing `type: "datetime"` normally makes Apex Charts parse unix time nicely with no additonal config, but bar charts in horizontal mode don't have a default setting for parsing the labels of dates, and will just spit out the unix time value. It also doesn't seem to respect any date based formatting properties passed in. So we'll just manualy format the labels, the chart still sorts the dates correctly in any case
     yaxis: {
       labels: {
         formatter: yAxisFormatter
diff --git a/packages/client/src/components/app/charts/CandleStickChart.svelte b/packages/client/src/components/app/charts/CandleStickChart.svelte
index 50e4df27a9..224e87c067 100644
--- a/packages/client/src/components/app/charts/CandleStickChart.svelte
+++ b/packages/client/src/components/app/charts/CandleStickChart.svelte
@@ -63,14 +63,13 @@
     }
   }
 
-  const getValueAsUnixEpoch = (dataprovider, dateColumn, row) => {
+  const getValueAsUnixTime = (dataprovider, dateColumn, row) => {
     const value = row[dateColumn]
 
     if (dataProvider?.schema?.[dateColumn]?.type === 'datetime') {
       return Date.parse(value);
     }
 
-    // Unix epoch
     if (typeof value === "number") {
       return value;
     }
@@ -122,7 +121,7 @@
         const close = parseFloat(row[closeColumn])
 
         return [
-          getValueAsUnixEpoch(dataProvider, dateColumn, row),
+          getValueAsUnixTime(dataProvider, dateColumn, row),
           isNaN(open) ? 0 : open,
           isNaN(high) ? 0 : high,
           isNaN(low) ? 0 : low,

From 248764ce9861c1c579f4363cebcd7f017e6abc6e Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Mon, 22 Apr 2024 08:38:19 +0100
Subject: [PATCH 108/123] cleanup

---
 packages/client/src/components/app/charts/BarChart.svelte       | 2 +-
 .../client/src/components/app/charts/CandleStickChart.svelte    | 2 +-
 .../frontend-core/src/components/grid/cells/HeaderCell.svelte   | 1 -
 3 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/client/src/components/app/charts/BarChart.svelte b/packages/client/src/components/app/charts/BarChart.svelte
index 2682fac4d4..3fa03e2caf 100644
--- a/packages/client/src/components/app/charts/BarChart.svelte
+++ b/packages/client/src/components/app/charts/BarChart.svelte
@@ -79,7 +79,7 @@
         text: xAxisLabel
       }
     },
-    // Providing `type: "datetime"` normally makes Apex Charts parse unix time nicely with no additonal config, but bar charts in horizontal mode don't have a default setting for parsing the labels of dates, and will just spit out the unix time value. It also doesn't seem to respect any date based formatting properties passed in. So we'll just manualy format the labels, the chart still sorts the dates correctly in any case
+    // Providing `type: "datetime"` normally makes Apex Charts parse unix time nicely with no additonal config, but bar charts in horizontal mode don't have a default setting for parsing the labels of dates, and will just spit out the unix time value. It also doesn't seem to respect any date based formatting properties passed in. So we'll just manually format the labels, the chart still sorts the dates correctly in any case
     yaxis: {
       labels: {
         formatter: yAxisFormatter
diff --git a/packages/client/src/components/app/charts/CandleStickChart.svelte b/packages/client/src/components/app/charts/CandleStickChart.svelte
index 224e87c067..3ff272b1e0 100644
--- a/packages/client/src/components/app/charts/CandleStickChart.svelte
+++ b/packages/client/src/components/app/charts/CandleStickChart.svelte
@@ -75,7 +75,7 @@
     }
 
     const isString = typeof value === "string";
-    // "2025" could be either an ISO 8601 date time string or Unix time.
+    // "2025" could be either an ISO 8601 datetime string or Unix time.
     // There's no way to tell the user's intent without providing more
     // granular controls.
     // We'll just assume any string without dashes is Unix time.
diff --git a/packages/frontend-core/src/components/grid/cells/HeaderCell.svelte b/packages/frontend-core/src/components/grid/cells/HeaderCell.svelte
index 4f861c84a1..657f618759 100644
--- a/packages/frontend-core/src/components/grid/cells/HeaderCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/HeaderCell.svelte
@@ -102,7 +102,6 @@
 
   const editColumn = async () => {
     editIsOpen = true
-    console.log(column.schema);
     await tick()
     dispatch("edit-column", column.schema)
   }

From 9d4283e9ba127636a96ceb838f24a91577864f3e Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Mon, 22 Apr 2024 08:46:00 +0100
Subject: [PATCH 109/123] linting

---
 packages/bbui/src/Tooltip/Context.svelte             |  5 +++--
 .../DetailsModal/subjects/NumbersAsDates.svelte      |  1 -
 .../DetailsModal/subjects/ScalarJsonOnly.svelte      |  1 -
 .../subjects/components/BindingValue.svelte          |  4 +---
 .../subjects/components/ExampleSection.svelte        |  1 +
 .../DetailsModal/subjects/components/Subject.svelte  |  1 -
 .../settings/controls/Explanation/explanation.js     |  4 +---
 .../controls/Explanation/lines/Column.svelte         |  2 +-
 .../controls/Explanation/lines/DateAsNumber.svelte   |  2 +-
 .../Explanation/lines/JSONPrimitivesOnly.svelte      |  2 +-
 .../controls/Explanation/lines/NotRequired.svelte    |  2 +-
 .../controls/Explanation/lines/NumberAsDate.svelte   |  2 +-
 .../controls/Explanation/lines/StringAsDate.svelte   |  2 +-
 .../controls/Explanation/lines/StringAsNumber.svelte |  2 +-
 .../controls/Explanation/lines/Support.svelte        |  2 +-
 .../design/settings/controls/FieldSelect.svelte      |  6 +++---
 .../design/settings/controls/MultiFieldSelect.svelte | 12 ++++--------
 17 files changed, 21 insertions(+), 30 deletions(-)

diff --git a/packages/bbui/src/Tooltip/Context.svelte b/packages/bbui/src/Tooltip/Context.svelte
index ea63fe2455..006bfd1a80 100644
--- a/packages/bbui/src/Tooltip/Context.svelte
+++ b/packages/bbui/src/Tooltip/Context.svelte
@@ -31,17 +31,18 @@
 
   $: updatePosition(anchor, tooltip)
 
-  const handleMouseenter = (e) => {
+  const handleMouseenter = () => {
     hovering = true;
   }
 
-  const handleMouseleave = (e) => {
+  const handleMouseleave = () => {
     hovering = false;
   }
 </script>
 
 <Portal {target}>
   <div
+    role="tooltip"
     on:mouseenter={handleMouseenter}
     on:mouseleave={handleMouseleave}
     style:left={`${x}px`}
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/NumbersAsDates.svelte b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/NumbersAsDates.svelte
index f448a376d2..465cd723a4 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/NumbersAsDates.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/NumbersAsDates.svelte
@@ -9,7 +9,6 @@
 
     const updateTimeStamp = () => {
       timestamp = Date.now();
-      console.log(timestamp);
       if (run) {
         setTimeout(updateTimeStamp, 200)
       }
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/ScalarJsonOnly.svelte b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/ScalarJsonOnly.svelte
index 49f4b7cc53..86148287e9 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/ScalarJsonOnly.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/ScalarJsonOnly.svelte
@@ -1,5 +1,4 @@
 <script>
-  import { Body } from "@budibase/bbui"
   import { ExampleSection, ExampleLine, Block, Subject, Section } from './components'
 
   export let schema
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/BindingValue.svelte b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/BindingValue.svelte
index ca01d71774..91a15d3f0a 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/BindingValue.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/BindingValue.svelte
@@ -1,4 +1,3 @@
-
 <script>
   import {
     decodeJSBinding,
@@ -8,11 +7,10 @@
     EditorModes,
   } from "components/common/CodeEditor"
   import {
-    readableToRuntimeBinding,
     runtimeToReadableBinding,
     getDatasourceForProvider
   } from "dataBinding"
-  import { tables, datasources, selectedScreen, selectedComponent } from "stores/builder"
+  import { tables, selectedScreen, selectedComponent } from "stores/builder"
   import { getBindings } from "components/backend/DataTable/formula"
 
   export let value
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/ExampleSection.svelte b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/ExampleSection.svelte
index fa5fd8e081..4da4f5141b 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/ExampleSection.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/ExampleSection.svelte
@@ -1,5 +1,6 @@
 <script>
   import Section from "./Section.svelte"
+
   export let heading
 </script>
 
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/Subject.svelte b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/Subject.svelte
index 77b8354e56..05889335a7 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/Subject.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/Subject.svelte
@@ -5,7 +5,6 @@
   let body;
 
   const handleScroll = (e) => {
-    console.log("scroll");
     if (!body) return;
 
     body.scrollTo({ top: body.scrollTop + e.deltaY, behavior: "smooth" })
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/explanation.js b/packages/builder/src/components/design/settings/controls/Explanation/explanation.js
index 4321fb14b6..3865c8b8fb 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/explanation.js
+++ b/packages/builder/src/components/design/settings/controls/Explanation/explanation.js
@@ -1,5 +1,3 @@
-import { capitalize } from 'lodash';
-
 export const messages = {
   jsonPrimitivesOnly: Symbol("explanation-json-primitives-only"),
   stringAsNumber: Symbol("explanation-string-as-number"),
@@ -56,7 +54,7 @@ const getSupportMessage = (type, explanation) => {
   return null
 }
 
-export const getExplanationMessagesAndSupport = (fieldSchema, explanation, typeSupportPresets) => {
+export const getExplanationMessagesAndSupport = (fieldSchema, explanation) => {
   try {
     const explanationMessagesAndSupport = {
       support: getSupport(fieldSchema.type, explanation),
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/lines/Column.svelte b/packages/builder/src/components/design/settings/controls/Explanation/lines/Column.svelte
index d28748d8e0..004bbbfab9 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/lines/Column.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/lines/Column.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Line, InfoWord, DocumentationLink, Space, Text, Period } from "../typography"
+  import { Line, InfoWord, DocumentationLink, Text, Period } from "../typography"
   import subjects from '../subjects'
 
   export let columnName
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/lines/DateAsNumber.svelte b/packages/builder/src/components/design/settings/controls/Explanation/lines/DateAsNumber.svelte
index b2b23c3803..59f3e6e464 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/lines/DateAsNumber.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/lines/DateAsNumber.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Line, InfoWord, DocumentationLink, Space, Text, Period } from "../typography"
+  import { Line, InfoWord, Text, Period } from "../typography"
   import subjects from '../subjects'
 
   export let setExplanationSubject
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/lines/JSONPrimitivesOnly.svelte b/packages/builder/src/components/design/settings/controls/Explanation/lines/JSONPrimitivesOnly.svelte
index d2aefc06b3..cff7ebab0e 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/lines/JSONPrimitivesOnly.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/lines/JSONPrimitivesOnly.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Line, InfoWord, DocumentationLink, Space, Text, Period, Comma } from "../typography"
+  import { Line, InfoWord, Text, Period } from "../typography"
   import subjects from '../subjects'
 
   export let setExplanationSubject
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/lines/NotRequired.svelte b/packages/builder/src/components/design/settings/controls/Explanation/lines/NotRequired.svelte
index 30dc48fabd..849eba669f 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/lines/NotRequired.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/lines/NotRequired.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Line, InfoWord, DocumentationLink, Space, Text, Period, Comma } from "../typography"
+  import { Line, InfoWord, DocumentationLink, Space, Text } from "../typography"
   import subjects from '../subjects'
 
   export let setExplanationSubject
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/lines/NumberAsDate.svelte b/packages/builder/src/components/design/settings/controls/Explanation/lines/NumberAsDate.svelte
index 8820cc9667..c7e5b0ddda 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/lines/NumberAsDate.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/lines/NumberAsDate.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Line, InfoWord, DocumentationLink, Space, Text, Period } from "../typography"
+  import { Line, InfoWord, Text, Period } from "../typography"
   import subjects from '../subjects'
 
   export let setExplanationSubject
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/lines/StringAsDate.svelte b/packages/builder/src/components/design/settings/controls/Explanation/lines/StringAsDate.svelte
index ab94e96ba6..445fc4f21a 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/lines/StringAsDate.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/lines/StringAsDate.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Line, InfoWord, DocumentationLink, Space, Text, Period } from "../typography"
+  import { Line, InfoWord, Text, Period } from "../typography"
   import subjects from '../subjects'
 
   export let setExplanationSubject
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/lines/StringAsNumber.svelte b/packages/builder/src/components/design/settings/controls/Explanation/lines/StringAsNumber.svelte
index da46c3163b..f59aa09a58 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/lines/StringAsNumber.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/lines/StringAsNumber.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Line, InfoWord, DocumentationLink, Space, Text, Period } from "../typography"
+  import { Line, InfoWord, Text, Period } from "../typography"
   import subjects from '../subjects'
 
   export let setExplanationSubject
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/lines/Support.svelte b/packages/builder/src/components/design/settings/controls/Explanation/lines/Support.svelte
index 539cca18f1..4b2ed7e1a7 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/lines/Support.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/lines/Support.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Line, InfoWord, DocumentationLink, Space, Text, Period } from "../typography"
+  import { Line, InfoWord, DocumentationLink, Text } from "../typography"
   import subjects from '../subjects'
   import * as explanation from '../explanation'
 
diff --git a/packages/builder/src/components/design/settings/controls/FieldSelect.svelte b/packages/builder/src/components/design/settings/controls/FieldSelect.svelte
index 54fdbff2c5..dbb90820fe 100644
--- a/packages/builder/src/components/design/settings/controls/FieldSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldSelect.svelte
@@ -5,7 +5,7 @@
   import { createEventDispatcher } from "svelte"
   import { Explanation } from './Explanation'
   import { debounce } from "lodash"
-  import { goto, params } from "@roxi/routify"
+  import { params } from "@roxi/routify"
   import { Constants } from "@budibase/frontend-core"
   import { FIELDS } from 'constants/backend'
 
@@ -53,11 +53,11 @@
     }
   }, 200);
 
-  const onOptionMouseenter = (e, option, idx) => {
+  const onOptionMouseenter = (e, option) => {
     updateTooltip(e, option);
   }
 
-  const onOptionMouseleave = (e, option) => {
+  const onOptionMouseleave = (e) => {
     updateTooltip(e, null);
   }
   const getOptionIcon = optionKey => {
diff --git a/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte b/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
index eb46999cda..4c40c35ba0 100644
--- a/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Icon, Heading, Multiselect, ContextTooltip } from "@budibase/bbui"
+  import { Multiselect, ContextTooltip } from "@budibase/bbui"
   import { getDatasourceForProvider, getSchemaForDatasource } from "dataBinding"
   import { selectedScreen,
     componentStore,
@@ -7,7 +7,7 @@
   import { createEventDispatcher } from "svelte"
   import { Explanation } from './Explanation'
   import { FIELDS } from 'constants/backend'
-  import { goto, params } from "@roxi/routify"
+  import { params } from "@roxi/routify"
   import { debounce } from "lodash"
   import { Constants } from "@budibase/frontend-core"
 
@@ -20,10 +20,6 @@
   let currentOption = null
   let contextTooltipVisible = false
 
-  $: componentDefinition = componentStore.getDefinition(
-    componentInstance?._component
-  )
-
   const dispatch = createEventDispatcher()
   $: datasource = getDatasourceForProvider($selectedScreen, componentInstance)
   $: schema = getSchemaForDatasource($selectedScreen, datasource).schema
@@ -87,11 +83,11 @@
     }
   }, 200);
 
-  const onOptionMouseenter = (e, option, idx) => {
+  const onOptionMouseenter = (e, option) => {
     updateTooltip(e, option);
   }
 
-  const onOptionMouseleave = (e, option) => {
+  const onOptionMouseleave = (e) => {
     updateTooltip(e, null);
   }
 </script>

From 53553d8dd6cb66fb3d1c285ac5d8b8dde071bee3 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Mon, 22 Apr 2024 08:50:33 +0100
Subject: [PATCH 110/123] linting

---
 packages/bbui/src/Form/Core/Picker.svelte     |   4 +-
 packages/bbui/src/Tooltip/Context.svelte      |  20 +-
 .../Explanation/DetailsModal/index.svelte     |  20 +-
 .../DetailsModal/subjects/Column.svelte       | 182 +++++++++---------
 .../subjects/DatesAsNumbers.svelte            |  60 +++---
 .../DetailsModal/subjects/NotRequired.svelte  |   6 +-
 .../subjects/NumbersAsDates.svelte            |  62 +++---
 .../subjects/ScalarJsonOnly.svelte            |  44 +++--
 .../subjects/StringsAsDates.svelte            | 117 +++++------
 .../subjects/StringsAsNumbers.svelte          |  39 ++--
 .../DetailsModal/subjects/Support.svelte      |  25 ++-
 .../subjects/components/BindingValue.svelte   |  26 ++-
 .../subjects/components/ExampleLine.svelte    |   6 +-
 .../subjects/components/JSONValue.svelte      |   2 +-
 .../subjects/components/Property.svelte       |   7 +-
 .../subjects/components/Subject.svelte        |   8 +-
 .../controls/Explanation/Explanation.svelte   |  73 ++++---
 .../controls/Explanation/explanation.js       |  39 ++--
 .../controls/Explanation/lines/Column.svelte  |  16 +-
 .../Explanation/lines/DateAsNumber.svelte     |   6 +-
 .../lines/JSONPrimitivesOnly.svelte           |  10 +-
 .../Explanation/lines/NotRequired.svelte      |   7 +-
 .../Explanation/lines/NumberAsDate.svelte     |   6 +-
 .../Explanation/lines/StringAsDate.svelte     |   6 +-
 .../Explanation/lines/StringAsNumber.svelte   |   6 +-
 .../controls/Explanation/lines/Support.svelte |  16 +-
 .../settings/controls/Explanation/subjects.js |   4 +-
 .../typography/DocumentationLink.svelte       |   8 +-
 .../Explanation/typography/InfoWord.svelte    |   5 +-
 .../Explanation/typography/Line.svelte        |   1 +
 .../Explanation/typography/Text.svelte        |  28 +--
 .../settings/controls/FieldSelect.svelte      |  25 ++-
 .../settings/controls/MultiFieldSelect.svelte |  26 ++-
 .../builder/src/stores/builder/components.js  |   2 +-
 .../client/src/components/Component.svelte    |   9 +-
 .../components/app/charts/ApexChart.svelte    |  35 ++--
 .../components/app/charts/AreaChart.svelte    |  44 +++--
 .../src/components/app/charts/BarChart.svelte |  43 +++--
 .../app/charts/CandleStickChart.svelte        |  66 ++++---
 .../components/app/charts/DonutChart.svelte   |  30 +--
 .../app/charts/HistogramChart.svelte          |  61 +++---
 .../components/app/charts/LineChart.svelte    |  38 ++--
 .../src/components/app/charts/PieChart.svelte |  30 +--
 .../src/components/app/charts/formatters.js   |   2 +-
 packages/client/src/utils/componentProps.js   |   9 +-
 45 files changed, 685 insertions(+), 594 deletions(-)

diff --git a/packages/bbui/src/Form/Core/Picker.svelte b/packages/bbui/src/Form/Core/Picker.svelte
index 55bd95b5e2..235f8ecc9e 100644
--- a/packages/bbui/src/Form/Core/Picker.svelte
+++ b/packages/bbui/src/Form/Core/Picker.svelte
@@ -202,8 +202,8 @@
             aria-selected="true"
             tabindex="0"
             on:click={() => onSelectOption(getOptionValue(option, idx))}
-            on:mouseenter={(e) => onOptionMouseenter(e, option)}
-            on:mouseleave={(e) => onOptionMouseleave(e, option)}
+            on:mouseenter={e => onOptionMouseenter(e, option)}
+            on:mouseleave={e => onOptionMouseleave(e, option)}
             class:is-disabled={!isOptionEnabled(option)}
           >
             {#if getOptionIcon(option, idx)}
diff --git a/packages/bbui/src/Tooltip/Context.svelte b/packages/bbui/src/Tooltip/Context.svelte
index 006bfd1a80..0a0a48172b 100644
--- a/packages/bbui/src/Tooltip/Context.svelte
+++ b/packages/bbui/src/Tooltip/Context.svelte
@@ -5,7 +5,7 @@
 
   export let anchor
   export let visible = false
-  export let offset = 0;
+  export let offset = 0
 
   $: target = getContext(Context.PopoverRoot) || "#app"
 
@@ -16,12 +16,13 @@
 
   const updatePosition = (anchor, tooltip) => {
     if (anchor == null || tooltip == null) {
-      return;
+      return
     }
 
     requestAnimationFrame(() => {
-      const rect = anchor.getBoundingClientRect();
-      const windowOffset = (window.innerHeight - offset) - (tooltip.clientHeight + rect.y)
+      const rect = anchor.getBoundingClientRect()
+      const windowOffset =
+        window.innerHeight - offset - (tooltip.clientHeight + rect.y)
       const tooltipWidth = tooltip.clientWidth
 
       x = rect.x - tooltipWidth - offset
@@ -32,11 +33,11 @@
   $: updatePosition(anchor, tooltip)
 
   const handleMouseenter = () => {
-    hovering = true;
+    hovering = true
   }
 
   const handleMouseleave = () => {
-    hovering = false;
+    hovering = false
   }
 </script>
 
@@ -50,10 +51,7 @@
     class="wrapper"
     class:visible={visible || hovering}
   >
-    <div
-      bind:this={tooltip}
-      class="tooltip"
-    >
+    <div bind:this={tooltip} class="tooltip">
       <slot />
     </div>
   </div>
@@ -62,7 +60,7 @@
 <style>
   .wrapper {
     background-color: var(--background-alt);
-    box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.42);
+    box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.42);
     opacity: 0;
     overflow: hidden;
 
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/index.svelte b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/index.svelte
index 2650124ea5..d9714c2e7a 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/index.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/index.svelte
@@ -1,7 +1,16 @@
 <script>
   import { ContextTooltip } from "@budibase/bbui"
-  import { StringsAsDates, NumbersAsDates, ScalarJsonOnly, Column, Support, NotRequired, StringsAsNumbers, DatesAsNumbers } from './subjects'
-  import subjects from '../subjects'
+  import {
+    StringsAsDates,
+    NumbersAsDates,
+    ScalarJsonOnly,
+    Column,
+    Support,
+    NotRequired,
+    StringsAsNumbers,
+    DatesAsNumbers,
+  } from "./subjects"
+  import subjects from "../subjects"
 
   export let anchor
   export let schema
@@ -9,12 +18,7 @@
   export let subject = subjects.none
 </script>
 
-
-<ContextTooltip
-  visible={subject !== subjects.none}
-  {anchor}
-  offset={20}
->
+<ContextTooltip visible={subject !== subjects.none} {anchor} offset={20}>
   <div class="explanationModalContent">
     {#if subject === subjects.column}
       <Column {columnName} {schema} />
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/Column.svelte b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/Column.svelte
index ef2242dd99..7fbac09827 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/Column.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/Column.svelte
@@ -1,118 +1,122 @@
 <script>
   import { tables } from "stores/builder"
-  import { BindingValue, Block, Subject, JSONValue, Property, Section }  from './components'
+  import {
+    BindingValue,
+    Block,
+    Subject,
+    JSONValue,
+    Property,
+    Section,
+  } from "./components"
 
   export let schema
   export let columnName
 
-  const parseDate = (isoString) => {
+  const parseDate = isoString => {
     if ([null, undefined, ""].includes(isoString)) {
       return "None"
     }
 
-    const unixTime = Date.parse(isoString);
-    const date = new Date(unixTime);
+    const unixTime = Date.parse(isoString)
+    const date = new Date(unixTime)
 
-    return date.toLocaleString();
+    return date.toLocaleString()
   }
 </script>
 
-
 <Subject>
   <div class="heading" slot="heading">
     Column Overview for <Block>{columnName}</Block>
   </div>
   <Section>
-  {#if schema.type === "string"}
-    <Property
-      name="Max Length"
-      value={schema?.constraints?.length?.maximum ?? "None"}
-    />
-  {:else if schema.type === "datetime"}
-    <Property
-      name="Earliest"
-      value={parseDate(schema?.constraints?.datetime?.earliest)}
-    />
-    <Property
-      name="Latest"
-      value={parseDate(schema?.constraints?.datetime?.latest)}
-    />
-    <Property
-      name="Ignore time zones"
-      value={schema?.ignoreTimeZones === true ? "Yes" : "No"}
-    />
-    <Property
-      name="Date only"
-      value={schema?.dateOnly === true ? "Yes" : "No"}
-    />
-  {:else if schema.type === "number"}
-    <Property
-      name="Min Value"
-      value={[null, undefined, ""].includes(schema?.constraints?.numericality?.greaterThanOrEqualTo) ? "None" : schema?.constraints?.numericality?.greaterThanOrEqualTo}
-    />
-    <Property
-      name="Max Value"
-      value={[null, undefined, ""].includes(schema?.constraints?.numericality?.lessThanOrEqualTo)? "None" : schema?.constraints?.numericality?.lessThanOrEqualTo}
-    />
-  {:else if schema.type === "array"}
-
-    {#each (schema?.constraints?.inclusion ?? []) as option, index}
+    {#if schema.type === "string"}
       <Property
-        name={`Option ${index + 1}`}
-        truncate
-      >
-      <span style:background-color={schema?.optionColors?.[option]} class="optionCircle" />{option}
-      </Property>
-    {/each}
-  {:else if schema.type === "options"}
-    {#each (schema?.constraints?.inclusion ?? []) as option, index}
+        name="Max Length"
+        value={schema?.constraints?.length?.maximum ?? "None"}
+      />
+    {:else if schema.type === "datetime"}
       <Property
-        name={`Option ${index + 1}`}
-        truncate
-      >
-      <span style:background-color={schema?.optionColors?.[option]} class="optionCircle" />{option}
+        name="Earliest"
+        value={parseDate(schema?.constraints?.datetime?.earliest)}
+      />
+      <Property
+        name="Latest"
+        value={parseDate(schema?.constraints?.datetime?.latest)}
+      />
+      <Property
+        name="Ignore time zones"
+        value={schema?.ignoreTimeZones === true ? "Yes" : "No"}
+      />
+      <Property
+        name="Date only"
+        value={schema?.dateOnly === true ? "Yes" : "No"}
+      />
+    {:else if schema.type === "number"}
+      <Property
+        name="Min Value"
+        value={[null, undefined, ""].includes(
+          schema?.constraints?.numericality?.greaterThanOrEqualTo
+        )
+          ? "None"
+          : schema?.constraints?.numericality?.greaterThanOrEqualTo}
+      />
+      <Property
+        name="Max Value"
+        value={[null, undefined, ""].includes(
+          schema?.constraints?.numericality?.lessThanOrEqualTo
+        )
+          ? "None"
+          : schema?.constraints?.numericality?.lessThanOrEqualTo}
+      />
+    {:else if schema.type === "array"}
+      {#each schema?.constraints?.inclusion ?? [] as option, index}
+        <Property name={`Option ${index + 1}`} truncate>
+          <span
+            style:background-color={schema?.optionColors?.[option]}
+            class="optionCircle"
+          />{option}
+        </Property>
+      {/each}
+    {:else if schema.type === "options"}
+      {#each schema?.constraints?.inclusion ?? [] as option, index}
+        <Property name={`Option ${index + 1}`} truncate>
+          <span
+            style:background-color={schema?.optionColors?.[option]}
+            class="optionCircle"
+          />{option}
+        </Property>
+      {/each}
+    {:else if schema.type === "json"}
+      <Property name="Schema">
+        <JSONValue value={JSON.stringify(schema?.schema ?? {}, null, 2)} />
       </Property>
-    {/each}
-  {:else if schema.type === "json"}
-    <Property name="Schema">
-      <JSONValue
-        value={JSON.stringify(schema?.schema ?? {}, null, 2)}
+    {:else if schema.type === "formula"}
+      <Property name="Formula">
+        <BindingValue value={schema?.formula} />
+      </Property>
+      <Property
+        name="Formula type"
+        value={schema?.formulaType === "dynamic" ? "Dynamic" : "Static"}
       />
-    </Property>
-  {:else if schema.type === "formula"}
-    <Property name="Formula">
-      <BindingValue
-        value={schema?.formula}
+    {:else if schema.type === "link"}
+      <Property name="Type" value={schema?.relationshipType} />
+      <Property
+        name="Related Table"
+        value={$tables?.list?.find(table => table._id === schema?.tableId)
+          ?.name}
       />
-    </Property>
+      <Property name="Column in Related Table" value={schema?.fieldName} />
+    {:else if schema.type === "bb_reference"}
+      <Property
+        name="Allow multiple users"
+        value={schema?.relationshipType === "many-to-many" ? "Yes" : "No"}
+      />
+    {/if}
     <Property
-      name="Formula type"
-      value={schema?.formulaType === "dynamic" ? "Dynamic" : "Static"}
+      name="Required"
+      value={schema?.constraints?.presence?.allowEmpty === false ? "Yes" : "No"}
     />
-  {:else if schema.type === "link"}
-    <Property
-      name="Type"
-      value={schema?.relationshipType}
-    />
-    <Property
-      name="Related Table"
-      value={$tables?.list?.find(table => table._id === schema?.tableId)?.name}
-    />
-    <Property
-      name="Column in Related Table"
-      value={schema?.fieldName}
-    />
-  {:else if schema.type === "bb_reference"}
-    <Property
-      name="Allow multiple users"
-      value={schema?.relationshipType === "many-to-many" ? "Yes" : "No"}
-    />
-  {/if}
-  <Property
-    name="Required"
-    value={schema?.constraints?.presence?.allowEmpty === false ? "Yes" : "No"}
-   />
-   </Section>
+  </Section>
 </Subject>
 
 <style>
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/DatesAsNumbers.svelte b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/DatesAsNumbers.svelte
index e920395672..e5cab5dc15 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/DatesAsNumbers.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/DatesAsNumbers.svelte
@@ -1,51 +1,59 @@
 <script>
   import { onMount } from "svelte"
-  import { ExampleSection, ExampleLine, Block, Subject, Section } from './components'
+  import {
+    ExampleSection,
+    ExampleLine,
+    Block,
+    Subject,
+    Section,
+  } from "./components"
 
-  let timestamp = Date.now();
+  let timestamp = Date.now()
 
   onMount(() => {
-    let run = true;
+    let run = true
 
     const updateTimeStamp = () => {
-      timestamp = Date.now();
+      timestamp = Date.now()
       if (run) {
         setTimeout(updateTimeStamp, 200)
       }
     }
 
-    updateTimeStamp();
+    updateTimeStamp()
 
     return () => {
-      run = false;
+      run = false
     }
   })
 </script>
 
 <Subject heading="Dates as Numbers">
   <Section>
-    A datetime value can be used in place of a numeric value, but it will be converted to a <Block>UNIX time</Block> timestamp, which is the number of milliseconds since Jan 1st 1970. A more recent moment in time will be a higher number.
+    A datetime value can be used in place of a numeric value, but it will be
+    converted to a <Block>UNIX time</Block> timestamp, which is the number of milliseconds
+    since Jan 1st 1970. A more recent moment in time will be a higher number.
   </Section>
 
-    <ExampleSection
-      heading="Examples:"
-    >
-      <ExampleLine>
-        <Block>
-          {(new Date(946684800000).toLocaleString())}
-        </Block>
-          <span class="separator">{"->"} </span><Block>946684800000</Block>
-      </ExampleLine>
-      <ExampleLine>
-        <Block>
-          {(new Date(1577836800000).toLocaleString())}
-        </Block>
-          <span class="separator">{"->"} </span><Block>1577836800000</Block>
-      </ExampleLine>
-      <ExampleLine>
-        <Block>Now</Block><span class="separator">{"->"} </span><Block>{timestamp}</Block>
-      </ExampleLine>
-    </ExampleSection>
+  <ExampleSection heading="Examples:">
+    <ExampleLine>
+      <Block>
+        {new Date(946684800000).toLocaleString()}
+      </Block>
+      <span class="separator">{"->"} </span><Block>946684800000</Block>
+    </ExampleLine>
+    <ExampleLine>
+      <Block>
+        {new Date(1577836800000).toLocaleString()}
+      </Block>
+      <span class="separator">{"->"} </span><Block>1577836800000</Block>
+    </ExampleLine>
+    <ExampleLine>
+      <Block>Now</Block><span class="separator">{"->"} </span><Block
+        >{timestamp}</Block
+      >
+    </ExampleLine>
+  </ExampleSection>
 </Subject>
 
 <style>
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/NotRequired.svelte b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/NotRequired.svelte
index 3ad33feb81..f28e9a227e 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/NotRequired.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/NotRequired.svelte
@@ -1,9 +1,11 @@
 <script>
-  import { Block, Subject, Section } from './components'
+  import { Block, Subject, Section } from "./components"
 </script>
 
 <Subject heading="Required Constraint">
   <Section>
-    A <Block>required</Block> constraint can be applied to columns to ensure a value is always present. If a column doesn't have this constraint, then its value for a particular row could he missing.
+    A <Block>required</Block> constraint can be applied to columns to ensure a value
+    is always present. If a column doesn't have this constraint, then its value for
+    a particular row could he missing.
   </Section>
 </Subject>
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/NumbersAsDates.svelte b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/NumbersAsDates.svelte
index 465cd723a4..d69228544e 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/NumbersAsDates.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/NumbersAsDates.svelte
@@ -1,55 +1,61 @@
 <script>
   import { onMount } from "svelte"
-  import { ExampleSection, ExampleLine, Block, Subject, Section } from './components'
+  import {
+    ExampleSection,
+    ExampleLine,
+    Block,
+    Subject,
+    Section,
+  } from "./components"
 
-  let timestamp = Date.now();
+  let timestamp = Date.now()
 
   onMount(() => {
-    let run = true;
+    let run = true
 
     const updateTimeStamp = () => {
-      timestamp = Date.now();
+      timestamp = Date.now()
       if (run) {
         setTimeout(updateTimeStamp, 200)
       }
     }
 
-    updateTimeStamp();
+    updateTimeStamp()
 
     return () => {
-      run = false;
+      run = false
     }
   })
 </script>
 
 <Subject heading="Numbers as Dates">
   <Section>
-    A number value can be used in place of a datetime value, but it will be parsed as a <Block>UNIX time</Block> timestamp, which is the number of milliseconds since Jan 1st 1970. A more recent moment in time will be a higher number.
+    A number value can be used in place of a datetime value, but it will be
+    parsed as a <Block>UNIX time</Block> timestamp, which is the number of milliseconds
+    since Jan 1st 1970. A more recent moment in time will be a higher number.
   </Section>
 
-    <ExampleSection
-      heading="Examples:"
-    >
-      <ExampleLine>
-        <Block>946684800000</Block>
-        <span class="separator">{"->"}</span>
-        <Block>
-          {(new Date(946684800000).toLocaleString())}
-        </Block>
-      </ExampleLine>
-      <ExampleLine>
-        <Block>1577836800000</Block>
-        <span class="separator">{"->"}</span>
-        <Block>
-          {(new Date(1577836800000).toLocaleString())}
-        </Block>
-      </ExampleLine>
-      <ExampleLine>
+  <ExampleSection heading="Examples:">
+    <ExampleLine>
+      <Block>946684800000</Block>
+      <span class="separator">{"->"}</span>
+      <Block>
+        {new Date(946684800000).toLocaleString()}
+      </Block>
+    </ExampleLine>
+    <ExampleLine>
+      <Block>1577836800000</Block>
+      <span class="separator">{"->"}</span>
+      <Block>
+        {new Date(1577836800000).toLocaleString()}
+      </Block>
+    </ExampleLine>
+    <ExampleLine>
       <Block>{timestamp}</Block>
       <span class="separator">{"->"}</span>
-        <Block>Now</Block>
-      </ExampleLine>
-    </ExampleSection>
+      <Block>Now</Block>
+    </ExampleLine>
+  </ExampleSection>
 </Subject>
 
 <style>
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/ScalarJsonOnly.svelte b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/ScalarJsonOnly.svelte
index 86148287e9..11fe3c7838 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/ScalarJsonOnly.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/ScalarJsonOnly.svelte
@@ -1,31 +1,40 @@
 <script>
-  import { ExampleSection, ExampleLine, Block, Subject, Section } from './components'
+  import {
+    ExampleSection,
+    ExampleLine,
+    Block,
+    Subject,
+    Section,
+  } from "./components"
 
   export let schema
   export let columnName
 
-  const maxScalarDescendantsToFind = 3;
+  const maxScalarDescendantsToFind = 3
 
-  const getScalarDescendants = (schema) => {
-    const newScalarDescendants = [];
+  const getScalarDescendants = schema => {
+    const newScalarDescendants = []
 
     const getScalarDescendantFromSchema = (path, schema) => {
       if (newScalarDescendants.length >= maxScalarDescendantsToFind) {
-        return;
+        return
       }
 
       if (["string", "number", "boolean"].includes(schema.type)) {
         newScalarDescendants.push({ name: path.join("."), type: schema.type })
       } else if (schema.type === "json") {
-        Object.entries(schema.schema ?? {}).forEach(([childName, childSchema]) => 
-        getScalarDescendantFromSchema([...path, childName], childSchema))
+        Object.entries(schema.schema ?? {}).forEach(
+          ([childName, childSchema]) =>
+            getScalarDescendantFromSchema([...path, childName], childSchema)
+        )
       }
     }
 
-    Object.entries(schema?.schema ?? {}).forEach(([childName, childSchema]) => 
-        getScalarDescendantFromSchema([columnName, childName], childSchema))
+    Object.entries(schema?.schema ?? {}).forEach(([childName, childSchema]) =>
+      getScalarDescendantFromSchema([columnName, childName], childSchema)
+    )
 
-    return newScalarDescendants;
+    return newScalarDescendants
   }
 
   $: scalarDescendants = getScalarDescendants(schema)
@@ -33,16 +42,21 @@
 
 <Subject heading="Using Scalar JSON Values">
   <Section>
-    <Block>JSON objects</Block> can't be used here, but any <Block>number</Block>, <Block>string</Block> or <Block>boolean</Block> values nested within said object can be if they are otherwise compatible with the input. These scalar values can be selected from the same menu as this parent and take the form <Block>parent.child</Block>.
+    <Block>JSON objects</Block> can't be used here, but any <Block>number</Block
+    >, <Block>string</Block> or <Block>boolean</Block> values nested within said
+    object can be if they are otherwise compatible with the input. These scalar values
+    can be selected from the same menu as this parent and take the form <Block
+      >parent.child</Block
+    >.
   </Section>
 
   {#if scalarDescendants.length > 0}
-    <ExampleSection
-      heading="Examples scalar descendants of this object:"
-    >
+    <ExampleSection heading="Examples scalar descendants of this object:">
       {#each scalarDescendants as descendant}
         <ExampleLine>
-          <Block truncate>{descendant.name}</Block><span class="separator">-</span><Block truncate noShrink>{descendant.type}</Block>
+          <Block truncate>{descendant.name}</Block><span class="separator"
+            >-</span
+          ><Block truncate noShrink>{descendant.type}</Block>
         </ExampleLine>
       {/each}
     </ExampleSection>
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/StringsAsDates.svelte b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/StringsAsDates.svelte
index 852e1b12dc..7303eac7cb 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/StringsAsDates.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/StringsAsDates.svelte
@@ -1,88 +1,92 @@
 <script>
   import { onMount } from "svelte"
-  import { ExampleSection, ExampleLine, Block, Subject, Section } from './components'
+  import {
+    ExampleSection,
+    ExampleLine,
+    Block,
+    Subject,
+    Section,
+  } from "./components"
 
-  let timestamp = Date.now();
-  $: iso = (new Date(timestamp)).toISOString();
+  let timestamp = Date.now()
+  $: iso = new Date(timestamp).toISOString()
 
   onMount(() => {
-    let run = true;
+    let run = true
 
     const updateTimeStamp = () => {
-      timestamp = Date.now();
+      timestamp = Date.now()
       if (run) {
         setTimeout(updateTimeStamp, 200)
       }
     }
 
-    updateTimeStamp();
+    updateTimeStamp()
 
     return () => {
-      run = false;
+      run = false
     }
   })
 </script>
 
 <Subject heading="Strings as Dates">
   <Section>
-    A string value can be used in place of a datetime value, but it will be parsed as:
+    A string value can be used in place of a datetime value, but it will be
+    parsed as:
   </Section>
   <Section>
-    A <Block>UNIX time</Block> timestamp, which is the number of milliseconds since Jan 1st 1970. A more recent moment in time will be a higher number.
+    A <Block>UNIX time</Block> timestamp, which is the number of milliseconds since
+    Jan 1st 1970. A more recent moment in time will be a higher number.
   </Section>
 
-    <ExampleSection
-      heading="Examples:"
-    >
-      <ExampleLine>
-        <Block>946684800000</Block>
-        <span class="separator">{"->"}</span>
-        <Block>
-          {(new Date(946684800000).toLocaleString())}
-        </Block>
-      </ExampleLine>
-      <ExampleLine>
-        <Block>1577836800000</Block>
-        <span class="separator">{"->"}</span>
-        <Block>
-          {(new Date(1577836800000).toLocaleString())}
-        </Block>
-      </ExampleLine>
-      <ExampleLine>
+  <ExampleSection heading="Examples:">
+    <ExampleLine>
+      <Block>946684800000</Block>
+      <span class="separator">{"->"}</span>
+      <Block>
+        {new Date(946684800000).toLocaleString()}
+      </Block>
+    </ExampleLine>
+    <ExampleLine>
+      <Block>1577836800000</Block>
+      <span class="separator">{"->"}</span>
+      <Block>
+        {new Date(1577836800000).toLocaleString()}
+      </Block>
+    </ExampleLine>
+    <ExampleLine>
       <Block>{timestamp}</Block>
       <span class="separator">{"->"}</span>
+      <Block>Now</Block>
+    </ExampleLine>
+  </ExampleSection>
+  <Section>
+    An <Block>ISO 8601</Block> datetime string, which represents an exact moment
+    in time as well as the potentional to store the timezone it occured in.
+  </Section>
+  <div class="isoExamples">
+    <ExampleSection heading="Examples:">
+      <ExampleLine>
+        <Block>2000-01-01T00:00:00.000Z</Block>
+        <span class="separator">↓</span>
+        <Block>
+          {new Date(946684800000).toLocaleString()}
+        </Block>
+      </ExampleLine>
+      <ExampleLine>
+        <Block>2000-01-01T00:00:00.000Z</Block>
+        <span class="separator">↓</span>
+        <Block>
+          {new Date(1577836800000).toLocaleString()}
+        </Block>
+      </ExampleLine>
+      <ExampleLine>
+        <Block>{iso}</Block>
+        <span class="separator">↓</span>
         <Block>Now</Block>
       </ExampleLine>
     </ExampleSection>
-  <Section>
-    An <Block>ISO 8601</Block> datetime string, which represents an exact moment in time as well as the potentional to store the timezone it occured in. 
-  </Section>
-    <div class="isoExamples">
-      <ExampleSection
-        heading="Examples:"
-      >
-        <ExampleLine>
-          <Block>2000-01-01T00:00:00.000Z</Block>
-          <span class="separator">↓</span>
-          <Block>
-            {(new Date(946684800000).toLocaleString())}
-          </Block>
-        </ExampleLine>
-        <ExampleLine>
-          <Block>2000-01-01T00:00:00.000Z</Block>
-          <span class="separator">↓</span>
-          <Block>
-            {(new Date(1577836800000).toLocaleString())}
-          </Block>
-        </ExampleLine>
-        <ExampleLine>
-        <Block>{iso}</Block>
-        <span class="separator">↓</span>
-          <Block>Now</Block>
-        </ExampleLine>
-      </ExampleSection>
-    </div>
-
+  </div>
 </Subject>
 
 <style>
@@ -90,7 +94,6 @@
     margin: 0 5px;
   }
 
-
   .isoExamples :global(.block) {
     word-break: break-all;
   }
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/StringsAsNumbers.svelte b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/StringsAsNumbers.svelte
index 7d629ec396..e30a450d80 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/StringsAsNumbers.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/StringsAsNumbers.svelte
@@ -1,32 +1,49 @@
 <script>
-  import { ExampleSection, ExampleLine, Block, Subject, Section } from './components'
+  import {
+    ExampleSection,
+    ExampleLine,
+    Block,
+    Subject,
+    Section,
+  } from "./components"
 </script>
 
 <Subject heading="Text as Numbers">
   <Section>
-    Text can be used in place of numbers in certain scenarios, but care needs to be taken; if the value isn't purely numerical it may be converted in an unexpected way.
+    Text can be used in place of numbers in certain scenarios, but care needs to
+    be taken; if the value isn't purely numerical it may be converted in an
+    unexpected way.
   </Section>
 
-  <ExampleSection
-    heading="Examples:"
-  >
+  <ExampleSection heading="Examples:">
     <ExampleLine>
-      <Block>"100"</Block><span class="separator">{"->"}</span><Block>100</Block>
+      <Block>"100"</Block><span class="separator">{"->"}</span><Block>100</Block
+      >
     </ExampleLine>
     <ExampleLine>
-      <Block>"100k"</Block><span class="separator">{"->"}</span><Block>100</Block>
+      <Block>"100k"</Block><span class="separator">{"->"}</span><Block
+        >100</Block
+      >
     </ExampleLine>
     <ExampleLine>
-      <Block>"100,000"</Block><span class="separator">{"->"}</span><Block>100</Block>
+      <Block>"100,000"</Block><span class="separator">{"->"}</span><Block
+        >100</Block
+      >
     </ExampleLine>
     <ExampleLine>
-      <Block>"100 million"</Block><span class="separator">{"->"}</span><Block>100</Block>
+      <Block>"100 million"</Block><span class="separator">{"->"}</span><Block
+        >100</Block
+      >
     </ExampleLine>
     <ExampleLine>
-      <Block>"100.9"</Block><span class="separator">{"->"}</span><Block>100.9</Block>
+      <Block>"100.9"</Block><span class="separator">{"->"}</span><Block
+        >100.9</Block
+      >
     </ExampleLine>
     <ExampleLine>
-      <Block>"One hundred"</Block><span class="separator">{"->"}</span><Block>Error</Block>
+      <Block>"One hundred"</Block><span class="separator">{"->"}</span><Block
+        >Error</Block
+      >
     </ExampleLine>
   </ExampleSection>
 </Subject>
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/Support.svelte b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/Support.svelte
index c37bc3a46f..a04e38ad3a 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/Support.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/Support.svelte
@@ -1,16 +1,14 @@
 <script>
-  import { InfoWord } from '../../typography'
-  import { Subject, Section } from './components'
+  import { InfoWord } from "../../typography"
+  import { Subject, Section } from "./components"
 </script>
 
 <Subject heading="Data/Component Compatibility">
   <Section>
-    <InfoWord
-      icon="CheckmarkCircle"
-      color="var(--green)"
-      text="Compatible"
-    />
-    <span class="body">Fully compatible with the input as long as the data is present.</span>
+    <InfoWord icon="CheckmarkCircle" color="var(--green)" text="Compatible" />
+    <span class="body"
+      >Fully compatible with the input as long as the data is present.</span
+    >
   </Section>
   <Section>
     <InfoWord
@@ -18,14 +16,13 @@
       color="var(--yellow)"
       text="Partially compatible"
     />
-    <span class="body">Partially compatible with the input, but beware of other caveats mentioned.</span>
+    <span class="body"
+      >Partially compatible with the input, but beware of other caveats
+      mentioned.</span
+    >
   </Section>
   <Section>
-    <InfoWord
-      icon="Alert"
-      color="var(--red)"
-      text="Not compatible"
-    />
+    <InfoWord icon="Alert" color="var(--red)" text="Not compatible" />
     <span class="body">Imcompatible with the component.</span>
   </Section>
 </Subject>
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/BindingValue.svelte b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/BindingValue.svelte
index 91a15d3f0a..811283ba51 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/BindingValue.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/BindingValue.svelte
@@ -1,14 +1,10 @@
 <script>
-  import {
-    decodeJSBinding,
-  } from "@budibase/string-templates"
+  import { decodeJSBinding } from "@budibase/string-templates"
   import CodeEditor from "components/common/CodeEditor/CodeEditor.svelte"
-  import {
-    EditorModes,
-  } from "components/common/CodeEditor"
+  import { EditorModes } from "components/common/CodeEditor"
   import {
     runtimeToReadableBinding,
-    getDatasourceForProvider
+    getDatasourceForProvider,
   } from "dataBinding"
   import { tables, selectedScreen, selectedComponent } from "stores/builder"
   import { getBindings } from "components/backend/DataTable/formula"
@@ -17,7 +13,7 @@
   $: datasource = getDatasourceForProvider($selectedScreen, $selectedComponent)
   $: tableId = datasource.tableId
   $: table = $tables?.list?.find(table => table._id === tableId)
-  $: bindings = getBindings({ table });
+  $: bindings = getBindings({ table })
 
   $: readableBinding = runtimeToReadableBinding(bindings, value)
 
@@ -25,13 +21,13 @@
 </script>
 
 <div class="editor">
-<CodeEditor
-  readonly
-  readonlyLineNumbers
-  value={isJs ? decodeJSBinding(readableBinding) : readableBinding}
-  jsBindingWrapping={isJs}
-  mode={isJs ? EditorModes.JS :EditorModes.Handlebars}
-/>
+  <CodeEditor
+    readonly
+    readonlyLineNumbers
+    value={isJs ? decodeJSBinding(readableBinding) : readableBinding}
+    jsBindingWrapping={isJs}
+    mode={isJs ? EditorModes.JS : EditorModes.Handlebars}
+  />
 </div>
 
 <style>
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/ExampleLine.svelte b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/ExampleLine.svelte
index f72417354c..6dd3e10a39 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/ExampleLine.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/ExampleLine.svelte
@@ -1,7 +1,7 @@
 <li>
-<div class="exampleLine">
-  <slot />
-</div>
+  <div class="exampleLine">
+    <slot />
+  </div>
 </li>
 
 <style>
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/JSONValue.svelte b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/JSONValue.svelte
index 57b586bc20..4703398b2d 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/JSONValue.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/JSONValue.svelte
@@ -1,5 +1,5 @@
 <script>
-  export let value;
+  export let value
 </script>
 
 <pre class="pre">
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/Property.svelte b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/Property.svelte
index fd62584a45..8d6e853ab4 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/Property.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/Property.svelte
@@ -1,7 +1,7 @@
 <script>
-  export let name;
-  export let value;
-  export let truncate = false;
+  export let name
+  export let value
+  export let truncate = false
 </script>
 
 <div class:truncate class="property">
@@ -35,7 +35,6 @@
     flex-shrink: 0;
   }
 
-
   .propertyDivider {
     padding: 0 4px;
     flex-shrink: 0;
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/Subject.svelte b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/Subject.svelte
index 05889335a7..4e21160cae 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/Subject.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/Subject.svelte
@@ -2,10 +2,10 @@
   import { onMount } from "svelte"
 
   export let heading = ""
-  let body;
+  let body
 
-  const handleScroll = (e) => {
-    if (!body) return;
+  const handleScroll = e => {
+    if (!body) return
 
     body.scrollTo({ top: body.scrollTop + e.deltaY, behavior: "smooth" })
   }
@@ -16,7 +16,7 @@
     return () => {
       window.removeEventListener("wheel", handleScroll)
     }
-  });
+  })
 </script>
 
 <div class="heading">
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/Explanation.svelte b/packages/builder/src/components/design/settings/controls/Explanation/Explanation.svelte
index 0bc11a937e..a7b7e17e2d 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/Explanation.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/Explanation.svelte
@@ -1,11 +1,22 @@
 <script>
-  import DetailsModal from './DetailsModal/index.svelte'
-  import { messages as messageConstants, getExplanationMessagesAndSupport, getExplanationWithPresets } from "./explanation";
-  import { StringAsDate, NumberAsDate, Column, Support, NotRequired, StringAsNumber, JSONPrimitivesOnly, DateAsNumber } from "./lines"
-  import subjects from './subjects';
+  import DetailsModal from "./DetailsModal/index.svelte"
   import {
-    componentStore,
-  } from "stores/builder"
+    messages as messageConstants,
+    getExplanationMessagesAndSupport,
+    getExplanationWithPresets,
+  } from "./explanation"
+  import {
+    StringAsDate,
+    NumberAsDate,
+    Column,
+    Support,
+    NotRequired,
+    StringAsNumber,
+    JSONPrimitivesOnly,
+    DateAsNumber,
+  } from "./lines"
+  import subjects from "./subjects"
+  import { componentStore } from "stores/builder"
 
   export let explanation
   export let columnIcon
@@ -16,30 +27,33 @@
 
   export let schema
 
-  $: explanationWithPresets = getExplanationWithPresets(explanation, $componentStore.typeSupportPresets)
+  $: explanationWithPresets = getExplanationWithPresets(
+    explanation,
+    $componentStore.typeSupportPresets
+  )
   let support
   let messages = []
 
   $: {
-    const explanationMessagesAndSupport = getExplanationMessagesAndSupport(schema, explanationWithPresets)
+    const explanationMessagesAndSupport = getExplanationMessagesAndSupport(
+      schema,
+      explanationWithPresets
+    )
     support = explanationMessagesAndSupport.support
     messages = explanationMessagesAndSupport.messages
   }
 
-  let root = null;
+  let root = null
 
   let detailsModalSubject = subjects.none
 
-  const setExplanationSubject = (option) => {
-    detailsModalSubject = option;
+  const setExplanationSubject = option => {
+    detailsModalSubject = option
     root = root
   }
 </script>
 
-<div
-  bind:this={root}
-  class="tooltipContents"
->
+<div bind:this={root} class="tooltipContents">
   <Column
     {columnName}
     {columnIcon}
@@ -47,39 +61,24 @@
     {tableHref}
     {setExplanationSubject}
   />
-  <Support
-    {support}
-    {setExplanationSubject}
-  />
+  <Support {support} {setExplanationSubject} />
   {#if messages.includes(messageConstants.stringAsNumber)}
-    <StringAsNumber
-      {setExplanationSubject}
-    />
+    <StringAsNumber {setExplanationSubject} />
   {/if}
   {#if messages.includes(messageConstants.notRequired)}
-    <NotRequired
-      {setExplanationSubject}
-    />
+    <NotRequired {setExplanationSubject} />
   {/if}
   {#if messages.includes(messageConstants.jsonPrimitivesOnly)}
-    <JSONPrimitivesOnly
-      {setExplanationSubject}
-    />
+    <JSONPrimitivesOnly {setExplanationSubject} />
   {/if}
   {#if messages.includes(messageConstants.dateAsNumber)}
-    <DateAsNumber
-      {setExplanationSubject}
-    />
+    <DateAsNumber {setExplanationSubject} />
   {/if}
   {#if messages.includes(messageConstants.numberAsDate)}
-    <NumberAsDate
-      {setExplanationSubject}
-    />
+    <NumberAsDate {setExplanationSubject} />
   {/if}
   {#if messages.includes(messageConstants.stringAsDate)}
-    <StringAsDate
-      {setExplanationSubject}
-    />
+    <StringAsDate {setExplanationSubject} />
   {/if}
 </div>
 
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/explanation.js b/packages/builder/src/components/design/settings/controls/Explanation/explanation.js
index 3865c8b8fb..4e024c67fc 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/explanation.js
+++ b/packages/builder/src/components/design/settings/controls/Explanation/explanation.js
@@ -11,21 +11,28 @@ export const messages = {
 export const support = {
   unsupported: Symbol("explanation-unsupported"),
   partialSupport: Symbol("explanation-partialSupport"),
-  supported: Symbol("explanation-supported")
+  supported: Symbol("explanation-supported"),
 }
 
-
 const getSupport = (type, explanation) => {
   if (!explanation?.typeSupport) {
     return support.supported
   }
 
-  if (explanation?.typeSupport?.supported?.find(mapping => mapping === type || mapping?.type === type)) {
-    return support.supported;
+  if (
+    explanation?.typeSupport?.supported?.find(
+      mapping => mapping === type || mapping?.type === type
+    )
+  ) {
+    return support.supported
   }
 
-  if (explanation?.typeSupport?.partialSupport?.find(mapping => mapping === type || mapping?.type === type)) {
-    return support.partialSupport;
+  if (
+    explanation?.typeSupport?.partialSupport?.find(
+      mapping => mapping === type || mapping?.type === type
+    )
+  ) {
+    return support.partialSupport
   }
 
   return support.unsupported
@@ -36,17 +43,23 @@ const getSupportMessage = (type, explanation) => {
     return null
   }
 
-  const supported = explanation?.typeSupport?.supported?.find(mapping => mapping?.type === type)
+  const supported = explanation?.typeSupport?.supported?.find(
+    mapping => mapping?.type === type
+  )
   if (supported) {
     return messages[supported?.message]
   }
 
-  const partialSupport = explanation?.typeSupport?.partialSupport?.find(mapping => mapping?.type === type)
+  const partialSupport = explanation?.typeSupport?.partialSupport?.find(
+    mapping => mapping?.type === type
+  )
   if (partialSupport) {
     return messages[partialSupport?.message]
   }
 
-  const unsupported = explanation?.typeSupport?.unsupported?.find(mapping => mapping?.type === type)
+  const unsupported = explanation?.typeSupport?.unsupported?.find(
+    mapping => mapping?.type === type
+  )
   if (unsupported) {
     return messages[unsupported?.message]
   }
@@ -63,14 +76,14 @@ export const getExplanationMessagesAndSupport = (fieldSchema, explanation) => {
 
     const isRequired = fieldSchema?.constraints?.presence?.allowEmpty === false
     if (!isRequired) {
-      explanationMessagesAndSupport.messages.push(messages.notRequired);
+      explanationMessagesAndSupport.messages.push(messages.notRequired)
     }
 
-    return explanationMessagesAndSupport;
+    return explanationMessagesAndSupport
   } catch (e) {
     return {
       support: support.partialSupport,
-      messages: [messages.contextError]
+      messages: [messages.contextError],
     }
   }
 }
@@ -79,7 +92,7 @@ export const getExplanationWithPresets = (explanation, presets) => {
   if (explanation?.typeSupport?.preset) {
     return {
       ...explanation,
-      typeSupport: presets[explanation?.typeSupport?.preset]
+      typeSupport: presets[explanation?.typeSupport?.preset],
     }
   }
 
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/lines/Column.svelte b/packages/builder/src/components/design/settings/controls/Explanation/lines/Column.svelte
index 004bbbfab9..04d7f1adc1 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/lines/Column.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/lines/Column.svelte
@@ -1,6 +1,12 @@
 <script>
-  import { Line, InfoWord, DocumentationLink, Text, Period } from "../typography"
-  import subjects from '../subjects'
+  import {
+    Line,
+    InfoWord,
+    DocumentationLink,
+    Text,
+    Period,
+  } from "../typography"
+  import subjects from "../subjects"
 
   export let columnName
   export let columnIcon
@@ -8,7 +14,7 @@
   export let tableHref
   export let setExplanationSubject
 
-  const getDocLink = (columnType) => {
+  const getDocLink = columnType => {
     if (columnType === "Number") {
       return "https://docs.budibase.com/docs/number"
     }
@@ -42,9 +48,7 @@
     href={tableHref}
     text={columnName}
   />
-  <Text
-    value=" is a "
-  />
+  <Text value=" is a " />
   <DocumentationLink
     href={getDocLink(columnType)}
     icon={columnIcon}
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/lines/DateAsNumber.svelte b/packages/builder/src/components/design/settings/controls/Explanation/lines/DateAsNumber.svelte
index 59f3e6e464..ba5eb9b0e1 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/lines/DateAsNumber.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/lines/DateAsNumber.svelte
@@ -1,6 +1,6 @@
 <script>
   import { Line, InfoWord, Text, Period } from "../typography"
-  import subjects from '../subjects'
+  import subjects from "../subjects"
 
   export let setExplanationSubject
 </script>
@@ -8,8 +8,8 @@
 <Line>
   <Text value="Will be converted to a " />
   <InfoWord
-      on:mouseenter={() => setExplanationSubject(subjects.datesAsNumbers)}
-      on:mouseleave={() => setExplanationSubject(subjects.none)}
+    on:mouseenter={() => setExplanationSubject(subjects.datesAsNumbers)}
+    on:mouseleave={() => setExplanationSubject(subjects.none)}
     text="UNIX time value"
   />
   <Period />
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/lines/JSONPrimitivesOnly.svelte b/packages/builder/src/components/design/settings/controls/Explanation/lines/JSONPrimitivesOnly.svelte
index cff7ebab0e..2286c09044 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/lines/JSONPrimitivesOnly.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/lines/JSONPrimitivesOnly.svelte
@@ -1,16 +1,16 @@
 <script>
   import { Line, InfoWord, Text, Period } from "../typography"
-  import subjects from '../subjects'
+  import subjects from "../subjects"
 
   export let setExplanationSubject
 </script>
 
-
 <Line>
   <InfoWord
-  on:mouseenter={() => setExplanationSubject(subjects.scalarJsonOnly)}
-  on:mouseleave={() => setExplanationSubject(subjects.none)}
->Scalar JSON values</InfoWord>
+    on:mouseenter={() => setExplanationSubject(subjects.scalarJsonOnly)}
+    on:mouseleave={() => setExplanationSubject(subjects.none)}
+    >Scalar JSON values</InfoWord
+  >
   <Text
     value=" can be used with this input if their individual types are supported"
   />
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/lines/NotRequired.svelte b/packages/builder/src/components/design/settings/controls/Explanation/lines/NotRequired.svelte
index 849eba669f..e705bd68e6 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/lines/NotRequired.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/lines/NotRequired.svelte
@@ -1,16 +1,15 @@
 <script>
   import { Line, InfoWord, DocumentationLink, Space, Text } from "../typography"
-  import subjects from '../subjects'
+  import subjects from "../subjects"
 
   export let setExplanationSubject
 </script>
 
-
 <Line>
   <Text value="No " />
   <InfoWord
-  on:mouseenter={() => setExplanationSubject(subjects.notRequired)}
-  on:mouseleave={() => setExplanationSubject(subjects.none)}
+    on:mouseenter={() => setExplanationSubject(subjects.notRequired)}
+    on:mouseleave={() => setExplanationSubject(subjects.none)}
     text="required"
   />
   <Space />
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/lines/NumberAsDate.svelte b/packages/builder/src/components/design/settings/controls/Explanation/lines/NumberAsDate.svelte
index c7e5b0ddda..c6413c13a5 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/lines/NumberAsDate.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/lines/NumberAsDate.svelte
@@ -1,6 +1,6 @@
 <script>
   import { Line, InfoWord, Text, Period } from "../typography"
-  import subjects from '../subjects'
+  import subjects from "../subjects"
 
   export let setExplanationSubject
 </script>
@@ -8,8 +8,8 @@
 <Line>
   <Text value="Will be treated as a " />
   <InfoWord
-      on:mouseenter={() => setExplanationSubject(subjects.numbersAsDates)}
-      on:mouseleave={() => setExplanationSubject(subjects.none)}
+    on:mouseenter={() => setExplanationSubject(subjects.numbersAsDates)}
+    on:mouseleave={() => setExplanationSubject(subjects.none)}
     text="UNIX time value"
   />
   <Period />
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/lines/StringAsDate.svelte b/packages/builder/src/components/design/settings/controls/Explanation/lines/StringAsDate.svelte
index 445fc4f21a..72267b6f47 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/lines/StringAsDate.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/lines/StringAsDate.svelte
@@ -1,6 +1,6 @@
 <script>
   import { Line, InfoWord, Text, Period } from "../typography"
-  import subjects from '../subjects'
+  import subjects from "../subjects"
 
   export let setExplanationSubject
 </script>
@@ -8,8 +8,8 @@
 <Line>
   <Text value="Will be treated as a " />
   <InfoWord
-      on:mouseenter={() => setExplanationSubject(subjects.stringsAsDates)}
-      on:mouseleave={() => setExplanationSubject(subjects.none)}
+    on:mouseenter={() => setExplanationSubject(subjects.stringsAsDates)}
+    on:mouseleave={() => setExplanationSubject(subjects.none)}
     text="UNIX time or ISO 8601 value"
   />
   <Period />
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/lines/StringAsNumber.svelte b/packages/builder/src/components/design/settings/controls/Explanation/lines/StringAsNumber.svelte
index f59aa09a58..937545c1c3 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/lines/StringAsNumber.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/lines/StringAsNumber.svelte
@@ -1,6 +1,6 @@
 <script>
   import { Line, InfoWord, Text, Period } from "../typography"
-  import subjects from '../subjects'
+  import subjects from "../subjects"
 
   export let setExplanationSubject
 </script>
@@ -8,8 +8,8 @@
 <Line>
   <Text value="Will be converted to a number, ignoring any " />
   <InfoWord
-      on:mouseenter={() => setExplanationSubject(subjects.stringsAsNumbers)}
-      on:mouseleave={() => setExplanationSubject(subjects.none)}
+    on:mouseenter={() => setExplanationSubject(subjects.stringsAsNumbers)}
+    on:mouseleave={() => setExplanationSubject(subjects.none)}
     text="non-numerical values"
   />
   <Period />
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/lines/Support.svelte b/packages/builder/src/components/design/settings/controls/Explanation/lines/Support.svelte
index 4b2ed7e1a7..848ab208fb 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/lines/Support.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/lines/Support.svelte
@@ -1,12 +1,12 @@
 <script>
   import { Line, InfoWord, DocumentationLink, Text } from "../typography"
-  import subjects from '../subjects'
-  import * as explanation from '../explanation'
+  import subjects from "../subjects"
+  import * as explanation from "../explanation"
 
   export let setExplanationSubject
   export let support
 
-  const getIcon = (support) => {
+  const getIcon = support => {
     if (support === explanation.support.unsupported) {
       return "Alert"
     } else if (support === explanation.support.supported) {
@@ -16,7 +16,7 @@
     return "AlertCheck"
   }
 
-  const getColor = (support) => {
+  const getColor = support => {
     if (support === explanation.support.unsupported) {
       return "var(--red)"
     } else if (support === explanation.support.supported) {
@@ -26,7 +26,7 @@
     return "var(--yellow)"
   }
 
-  const getText = (support) => {
+  const getText = support => {
     if (support === explanation.support.unsupported) {
       return "Not compatible"
     } else if (support === explanation.support.supported) {
@@ -36,9 +36,9 @@
     return "Partially compatible"
   }
 
-  $: icon = getIcon(support);
-  $: color = getColor(support);
-  $: text = getText(support);
+  $: icon = getIcon(support)
+  $: color = getColor(support)
+  $: text = getText(support)
 </script>
 
 <Line>
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/subjects.js b/packages/builder/src/components/design/settings/controls/Explanation/subjects.js
index 70471ec6d4..1f94fa6fd0 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/subjects.js
+++ b/packages/builder/src/components/design/settings/controls/Explanation/subjects.js
@@ -7,7 +7,7 @@ const subjects = {
   stringsAsDates: Symbol("explanation-strings-as-dates"),
   notRequired: Symbol("details-modal-not-required"),
   scalarJsonOnly: Symbol("explanation-scalar-json-only"),
-  none: Symbol("details-modal-none")
+  none: Symbol("details-modal-none"),
 }
 
-export default subjects;
+export default subjects
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/typography/DocumentationLink.svelte b/packages/builder/src/components/design/settings/controls/Explanation/typography/DocumentationLink.svelte
index d4d9bebdc4..ce74c1fa57 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/typography/DocumentationLink.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/typography/DocumentationLink.svelte
@@ -6,13 +6,7 @@
   export let href
 </script>
 
-<a
-  tabindex="0"
-  {href}
-  rel="noopener noreferrer"
-  target="_blank"
-  class="link"
->
+<a tabindex="0" {href} rel="noopener noreferrer" target="_blank" class="link">
   <Icon size="XS" name={icon} />
   <span class="text">
     <slot>
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/typography/InfoWord.svelte b/packages/builder/src/components/design/settings/controls/Explanation/typography/InfoWord.svelte
index 9e6dd29ba0..cac12cbfb5 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/typography/InfoWord.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/typography/InfoWord.svelte
@@ -7,7 +7,6 @@
   export let href = null
 </script>
 
-
 {#if href !== null}
   <a
     tabindex="0"
@@ -15,7 +14,7 @@
     rel="noopener noreferrer"
     target="_blank"
     class="infoWord"
-    style:color={color}
+    style:color
     style:border-color={color}
     on:mouseenter
     on:mouseleave
@@ -33,7 +32,7 @@
   <div
     role="tooltip"
     class="infoWord"
-    style:color={color}
+    style:color
     style:border-color={color}
     on:mouseenter
     on:mouseleave
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/typography/Line.svelte b/packages/builder/src/components/design/settings/controls/Explanation/typography/Line.svelte
index 31e1cc3c87..75575c94aa 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/typography/Line.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/typography/Line.svelte
@@ -1,6 +1,7 @@
 <script>
   export let noWrap = false
 </script>
+
 <div class="line">
   <span class="bullet">•</span>
   <div class="content" class:noWrap>
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/typography/Text.svelte b/packages/builder/src/components/design/settings/controls/Explanation/typography/Text.svelte
index d7dc4d053d..6562c9e864 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/typography/Text.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/typography/Text.svelte
@@ -1,40 +1,40 @@
 <script>
-  import Comma from "./Comma.svelte";
-  import Period from "./Period.svelte";
-  import Space from "./Space.svelte";
+  import Comma from "./Comma.svelte"
+  import Period from "./Period.svelte"
+  import Space from "./Space.svelte"
 
   export let value = null
 
   const punctuation = [" ", ",", "."]
 
   // TODO regex might work here now
-  const getWords = (value) => {
+  const getWords = value => {
     if (typeof value !== "string") {
-      return [];
+      return []
     }
 
-    const newWords = [];
-    let lastIndex = 0;
+    const newWords = []
+    let lastIndex = 0
 
-    const makeWord = (i) => {
+    const makeWord = i => {
       // No word to make, multiple spaces, spaces at start of text etc
       if (i - lastIndex > 0) {
-        newWords.push(value.substring(lastIndex, i));
+        newWords.push(value.substring(lastIndex, i))
       }
 
-      lastIndex = i + 1;
+      lastIndex = i + 1
     }
 
     value.split("").forEach((character, i) => {
       if (punctuation.includes(character)) {
-        makeWord(i);
-        newWords.push(character);
+        makeWord(i)
+        newWords.push(character)
       }
     })
 
-    makeWord(value.length);
+    makeWord(value.length)
 
-    return newWords;
+    return newWords
   }
 
   $: words = getWords(value)
diff --git a/packages/builder/src/components/design/settings/controls/FieldSelect.svelte b/packages/builder/src/components/design/settings/controls/FieldSelect.svelte
index dbb90820fe..15b67ded18 100644
--- a/packages/builder/src/components/design/settings/controls/FieldSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldSelect.svelte
@@ -3,11 +3,11 @@
   import { getDatasourceForProvider, getSchemaForDatasource } from "dataBinding"
   import { selectedScreen } from "stores/builder"
   import { createEventDispatcher } from "svelte"
-  import { Explanation } from './Explanation'
+  import { Explanation } from "./Explanation"
   import { debounce } from "lodash"
   import { params } from "@roxi/routify"
   import { Constants } from "@budibase/frontend-core"
-  import { FIELDS } from 'constants/backend'
+  import { FIELDS } from "constants/backend"
 
   export let componentInstance = {}
   export let value = ""
@@ -45,20 +45,20 @@
 
   const updateTooltip = debounce((e, option) => {
     if (option == null) {
-        contextTooltipVisible = false;
+      contextTooltipVisible = false
     } else {
-    contextTooltipAnchor = e?.target;
-    currentOption = option;
-    contextTooltipVisible = true;
+      contextTooltipAnchor = e?.target
+      currentOption = option
+      contextTooltipVisible = true
     }
-  }, 200);
+  }, 200)
 
   const onOptionMouseenter = (e, option) => {
-    updateTooltip(e, option);
+    updateTooltip(e, option)
   }
 
-  const onOptionMouseleave = (e) => {
-    updateTooltip(e, null);
+  const onOptionMouseleave = e => {
+    updateTooltip(e, null)
   }
   const getOptionIcon = optionKey => {
     const option = schema[optionKey]
@@ -80,7 +80,7 @@
   const getOptionIconTooltip = optionKey => {
     const option = schema[optionKey]
 
-    const type = option?.type;
+    const type = option?.type
     const field = Object.values(FIELDS).find(f => f.type === type)
 
     if (field) {
@@ -89,13 +89,12 @@
 
     return ""
   }
-
 </script>
 
 <Select
   {placeholder}
   value={boundValue}
-  on:change={onChange} 
+  on:change={onChange}
   {options}
   {onOptionMouseenter}
   {onOptionMouseleave}
diff --git a/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte b/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
index 4c40c35ba0..d6c9a0b1e3 100644
--- a/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
@@ -1,12 +1,10 @@
 <script>
   import { Multiselect, ContextTooltip } from "@budibase/bbui"
   import { getDatasourceForProvider, getSchemaForDatasource } from "dataBinding"
-  import { selectedScreen,
-    componentStore,
-  } from "stores/builder"
+  import { selectedScreen } from "stores/builder"
   import { createEventDispatcher } from "svelte"
-  import { Explanation } from './Explanation'
-  import { FIELDS } from 'constants/backend'
+  import { Explanation } from "./Explanation"
+  import { FIELDS } from "constants/backend"
   import { params } from "@roxi/routify"
   import { debounce } from "lodash"
   import { Constants } from "@budibase/frontend-core"
@@ -59,7 +57,7 @@
   const getOptionIconTooltip = optionKey => {
     const option = schema[optionKey]
 
-    const type = option?.type;
+    const type = option?.type
     const field = Object.values(FIELDS).find(f => f.type === type)
 
     if (field) {
@@ -75,20 +73,20 @@
 
   const updateTooltip = debounce((e, option) => {
     if (option == null) {
-      contextTooltipVisible = false;
+      contextTooltipVisible = false
     } else {
-      contextTooltipAnchor = e?.target;
-      currentOption = option;
-      contextTooltipVisible = true;
+      contextTooltipAnchor = e?.target
+      currentOption = option
+      contextTooltipVisible = true
     }
-  }, 200);
+  }, 200)
 
   const onOptionMouseenter = (e, option) => {
-    updateTooltip(e, option);
+    updateTooltip(e, option)
   }
 
-  const onOptionMouseleave = (e) => {
-    updateTooltip(e, null);
+  const onOptionMouseleave = e => {
+    updateTooltip(e, null)
   }
 </script>
 
diff --git a/packages/builder/src/stores/builder/components.js b/packages/builder/src/stores/builder/components.js
index 4003f5ed4c..ce34714b15 100644
--- a/packages/builder/src/stores/builder/components.js
+++ b/packages/builder/src/stores/builder/components.js
@@ -104,7 +104,7 @@ export class ComponentStore extends BudiStore {
       ...state,
       components,
       customComponents,
-      typeSupportPresets: components?.typeSupportPresets ?? {}
+      typeSupportPresets: components?.typeSupportPresets ?? {},
     }))
 
     // Sync client features to app store
diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 43dda3729b..a3dfc07430 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -284,11 +284,11 @@
         const dependsOnValue = setting.dependsOn.value
         const realDependentValue = instance[dependsOnKey]
 
-        const sectionDependsOnKey = setting.sectionDependsOn?.setting || setting.sectionDependsOn
+        const sectionDependsOnKey =
+          setting.sectionDependsOn?.setting || setting.sectionDependsOn
         const sectionDependsOnValue = setting.sectionDependsOn?.value
         const sectionRealDependentValue = instance[sectionDependsOnKey]
 
-
         if (dependsOnValue == null && realDependentValue == null) {
           return false
         }
@@ -296,7 +296,10 @@
           return false
         }
 
-        if (sectionDependsOnValue != null && sectionDependsOnValue !== sectionRealDependentValue) {
+        if (
+          sectionDependsOnValue != null &&
+          sectionDependsOnValue !== sectionRealDependentValue
+        ) {
           return false
         }
       }
diff --git a/packages/client/src/components/app/charts/ApexChart.svelte b/packages/client/src/components/app/charts/ApexChart.svelte
index b40ebefeab..ee0e0480e7 100644
--- a/packages/client/src/components/app/charts/ApexChart.svelte
+++ b/packages/client/src/components/app/charts/ApexChart.svelte
@@ -1,8 +1,8 @@
 <script>
   import { getContext } from "svelte"
-  import ApexCharts from 'apexcharts'
+  import ApexCharts from "apexcharts"
   import { Icon } from "@budibase/bbui"
-  import { cloneDeep } from "lodash";
+  import { cloneDeep } from "lodash"
 
   const { styleable, builderStore } = getContext("sdk")
   const component = getContext("component")
@@ -10,24 +10,24 @@
   export let options
 
   // Apex charts directly modifies the options object with default properties and internal variables. These being present could unintentionally cause issues to the provider of this prop as the changes are reflected in that component as well. To prevent any issues we clone options here to provide a buffer.
-  $: optionsCopy = cloneDeep(options);
+  $: optionsCopy = cloneDeep(options)
 
-  let chartElement;
-  let chart;
+  let chartElement
+  let chart
   let currentType = null
 
-  const updateChart = async (newOptions) => {
+  const updateChart = async newOptions => {
     // Line charts have issues transitioning between "datetime" and "category" types, and will ignore the provided formatters
     // in certain scenarios. Rerendering the chart when the user changes label type fixes this, but unfortunately it does
     // cause a little bit of jankiness with animations.
-    if (newOptions?.xaxis?.type && newOptions.xaxis.type !== currentType ) {
-      await renderChart(chartElement);
+    if (newOptions?.xaxis?.type && newOptions.xaxis.type !== currentType) {
+      await renderChart(chartElement)
     } else {
       await chart?.updateOptions(newOptions)
     }
   }
 
-  const renderChart = async (newChartElement) => {
+  const renderChart = async newChartElement => {
     try {
       await chart?.destroy()
       chart = new ApexCharts(newChartElement, optionsCopy)
@@ -37,7 +37,10 @@
       // Apex for some reason throws this error when creating a new chart.
       // It doesn't actually cause any issues with the function of the chart, so
       // just suppress it so the console doesn't get spammed
-      if (e.message !== "Cannot read properties of undefined (reading 'parentNode')") {
+      if (
+        e.message !==
+        "Cannot read properties of undefined (reading 'parentNode')"
+      ) {
         throw e
       }
     }
@@ -54,8 +57,16 @@
 
 {#key optionsCopy?.customColor}
   <div class:hide use:styleable={$component.styles} bind:this={chartElement} />
-  {#if $builderStore.inBuilder && noData }
-    <div class="component-placeholder" use:styleable={{ ...$component.styles, normal: {}, custom: null, empty: true }}>
+  {#if $builderStore.inBuilder && noData}
+    <div
+      class="component-placeholder"
+      use:styleable={{
+        ...$component.styles,
+        normal: {},
+        custom: null,
+        empty: true,
+      }}
+    >
       <Icon name="Alert" color="var(--spectrum-global-color-static-red-600)" />
       Add rows to your data source to start using your component
     </div>
diff --git a/packages/client/src/components/app/charts/AreaChart.svelte b/packages/client/src/components/app/charts/AreaChart.svelte
index 1bbb551551..d30365e4d0 100644
--- a/packages/client/src/components/app/charts/AreaChart.svelte
+++ b/packages/client/src/components/app/charts/AreaChart.svelte
@@ -24,10 +24,12 @@
   export let gradient
 
   $: series = getSeries(dataProvider, valueColumns)
-  $: categories = getCategories(dataProvider, labelColumn);
+  $: categories = getCategories(dataProvider, labelColumn)
 
-  $: labelType = dataProvider?.schema?.[labelColumn]?.type === 'datetime' ? 
-    "datetime" : "category"
+  $: labelType =
+    dataProvider?.schema?.[labelColumn]?.type === "datetime"
+      ? "datetime"
+      : "category"
   $: xAxisFormatter = getFormatter(labelType, valueUnits, "x")
   $: yAxisFormatter = getFormatter(labelType, valueUnits, "y")
   $: fill = getFill(gradient)
@@ -35,11 +37,11 @@
   $: options = {
     series,
     stroke: {
-      curve: curve.toLowerCase()
+      curve: curve.toLowerCase(),
     },
     colors: palette === "Custom" ? [c1, c2, c3, c4, c5] : [],
     theme: {
-      palette: palette === "Custom" ? null : palette
+      palette: palette === "Custom" ? null : palette,
     },
     fill,
     legend: {
@@ -54,7 +56,7 @@
       text: title,
     },
     dataLabels: {
-      enabled: dataLabels
+      enabled: dataLabels,
     },
     chart: {
       height: height == null || height === "" ? "auto" : height,
@@ -62,7 +64,7 @@
       type: "area",
       stacked,
       animations: {
-        enabled: animate
+        enabled: animate,
       },
       toolbar: {
         show: false,
@@ -75,24 +77,24 @@
       type: labelType,
       categories,
       labels: {
-        formatter: xAxisFormatter
+        formatter: xAxisFormatter,
       },
       title: {
-        text: xAxisLabel
-      }
+        text: xAxisLabel,
+      },
     },
     yaxis: {
       labels: {
-        formatter: yAxisFormatter
+        formatter: yAxisFormatter,
       },
       title: {
-        text: yAxisLabel
-      }
-    }
+        text: yAxisLabel,
+      },
+    },
   }
 
   const getSeries = (dataProvider, valueColumns = []) => {
-    const rows = dataProvider.rows ?? [];
+    const rows = dataProvider.rows ?? []
 
     return valueColumns.map(column => ({
       name: column,
@@ -100,7 +102,7 @@
         const value = row?.[column]
 
         if (dataProvider?.schema?.[column]?.type === "datetime" && value) {
-          return Date.parse(value);
+          return Date.parse(value)
         }
 
         return value
@@ -109,7 +111,7 @@
   }
 
   const getCategories = (dataProvider, labelColumn) => {
-    const rows = dataProvider.rows ?? [];
+    const rows = dataProvider.rows ?? []
 
     return rows.map(row => {
       const value = row?.[labelColumn]
@@ -119,7 +121,7 @@
         return ""
       }
 
-      return value;
+      return value
     })
   }
 
@@ -137,7 +139,7 @@
     return formatters[valueUnits]
   }
 
-  const getFill = (gradient) => {
+  const getFill = gradient => {
     if (gradient) {
       return {
         type: "gradient",
@@ -146,11 +148,11 @@
           opacityFrom: 0.7,
           opacityTo: 0.9,
           stops: [0, 90, 100],
-        }
+        },
       }
     }
 
-    return { type: 'solid' }
+    return { type: "solid" }
   }
 </script>
 
diff --git a/packages/client/src/components/app/charts/BarChart.svelte b/packages/client/src/components/app/charts/BarChart.svelte
index 3fa03e2caf..bd1a2f768a 100644
--- a/packages/client/src/components/app/charts/BarChart.svelte
+++ b/packages/client/src/components/app/charts/BarChart.svelte
@@ -21,10 +21,12 @@
   export let horizontal
 
   $: series = getSeries(dataProvider, valueColumns)
-  $: categories = getCategories(dataProvider, labelColumn);
+  $: categories = getCategories(dataProvider, labelColumn)
 
-  $: labelType = dataProvider?.schema?.[labelColumn]?.type === 'datetime' ? 
-    "datetime" : "category"
+  $: labelType =
+    dataProvider?.schema?.[labelColumn]?.type === "datetime"
+      ? "datetime"
+      : "category"
   $: xAxisFormatter = getFormatter(labelType, valueUnits, horizontal, "x")
   $: yAxisFormatter = getFormatter(labelType, valueUnits, horizontal, "y")
 
@@ -32,7 +34,7 @@
     series,
     colors: palette === "Custom" ? [c1, c2, c3, c4, c5] : [],
     theme: {
-      palette: palette === "Custom" ? null : palette
+      palette: palette === "Custom" ? null : palette,
     },
     legend: {
       show: legend,
@@ -46,7 +48,7 @@
       text: title,
     },
     dataLabels: {
-      enabled: dataLabels
+      enabled: dataLabels,
     },
     chart: {
       height: height == null || height === "" ? "auto" : height,
@@ -54,7 +56,7 @@
       type: "bar",
       stacked,
       animations: {
-        enabled: animate
+        enabled: animate,
       },
       toolbar: {
         show: false,
@@ -65,33 +67,33 @@
     },
     plotOptions: {
       bar: {
-        horizontal
-      }
+        horizontal,
+      },
     },
     // We can just always provide the categories to the xaxis and horizontal mode automatically handles "tranposing" the categories to the yaxis, but certain things like labels need to be manually put on a certain axis based on the selected mode. Titles do not need to be handled this way, they are exposed to the user as "X axis" and Y Axis" so flipping them would be confusing.
     xaxis: {
       type: labelType,
       categories,
       labels: {
-        formatter: xAxisFormatter
+        formatter: xAxisFormatter,
       },
       title: {
-        text: xAxisLabel
-      }
+        text: xAxisLabel,
+      },
     },
     // Providing `type: "datetime"` normally makes Apex Charts parse unix time nicely with no additonal config, but bar charts in horizontal mode don't have a default setting for parsing the labels of dates, and will just spit out the unix time value. It also doesn't seem to respect any date based formatting properties passed in. So we'll just manually format the labels, the chart still sorts the dates correctly in any case
     yaxis: {
       labels: {
-        formatter: yAxisFormatter
+        formatter: yAxisFormatter,
       },
       title: {
-        text: yAxisLabel
-      }
-    }
+        text: yAxisLabel,
+      },
+    },
   }
 
   const getSeries = (dataProvider, valueColumns = []) => {
-    const rows = dataProvider.rows ?? [];
+    const rows = dataProvider.rows ?? []
 
     return valueColumns.map(column => ({
       name: column,
@@ -99,7 +101,7 @@
         const value = row?.[column]
 
         if (dataProvider?.schema?.[column]?.type === "datetime" && value) {
-          return Date.parse(value);
+          return Date.parse(value)
         }
 
         return value
@@ -108,7 +110,7 @@
   }
 
   const getCategories = (dataProvider, labelColumn) => {
-    const rows = dataProvider.rows ?? [];
+    const rows = dataProvider.rows ?? []
 
     return rows.map(row => {
       const value = row?.[labelColumn]
@@ -118,12 +120,13 @@
         return ""
       }
 
-      return value;
+      return value
     })
   }
 
   const getFormatter = (labelType, valueUnits, horizontal, axis) => {
-    const isLabelAxis = (axis === "y" && horizontal) || axis === "x" && !horizontal
+    const isLabelAxis =
+      (axis === "y" && horizontal) || (axis === "x" && !horizontal)
     if (labelType === "datetime" && isLabelAxis) {
       return formatters["Datetime"]
     }
diff --git a/packages/client/src/components/app/charts/CandleStickChart.svelte b/packages/client/src/components/app/charts/CandleStickChart.svelte
index 3ff272b1e0..06e0409add 100644
--- a/packages/client/src/components/app/charts/CandleStickChart.svelte
+++ b/packages/client/src/components/app/charts/CandleStickChart.svelte
@@ -1,6 +1,6 @@
 <script>
   import ApexChart from "./ApexChart.svelte"
-  import formatters from './formatters';
+  import formatters from "./formatters"
 
   export let title
   export let dataProvider
@@ -35,7 +35,7 @@
       width: width == null || width === "" ? "100%" : width,
       type: "candlestick",
       animations: {
-        enabled: animate
+        enabled: animate,
       },
       toolbar: {
         show: false,
@@ -46,42 +46,42 @@
     },
     xaxis: {
       tooltip: {
-        formatter: formatters["Datetime"]
+        formatter: formatters["Datetime"],
       },
       type: "datetime",
       title: {
-        text: xAxisLabel
-      }
+        text: xAxisLabel,
+      },
     },
     yaxis: {
       labels: {
-        formatter: formatters[valueUnits]
+        formatter: formatters[valueUnits],
       },
       title: {
-        text: yAxisLabel
-      }
-    }
+        text: yAxisLabel,
+      },
+    },
   }
 
   const getValueAsUnixTime = (dataprovider, dateColumn, row) => {
     const value = row[dateColumn]
 
-    if (dataProvider?.schema?.[dateColumn]?.type === 'datetime') {
-      return Date.parse(value);
+    if (dataProvider?.schema?.[dateColumn]?.type === "datetime") {
+      return Date.parse(value)
     }
 
     if (typeof value === "number") {
-      return value;
+      return value
     }
 
-    const isString = typeof value === "string";
+    const isString = typeof value === "string"
     // "2025" could be either an ISO 8601 datetime string or Unix time.
     // There's no way to tell the user's intent without providing more
     // granular controls.
     // We'll just assume any string without dashes is Unix time.
 
     if (isString && value.includes("-")) {
-      const unixTime = Date.parse(value);
+      const unixTime = Date.parse(value)
 
       if (isNaN(unixTime)) {
         return null
@@ -91,7 +91,7 @@
     }
 
     if (isString) {
-      const unixTime = parseInt(value, 10);
+      const unixTime = parseInt(value, 10)
 
       if (isNaN(unixTime)) {
         return null
@@ -100,7 +100,7 @@
       return unixTime
     }
 
-    return null;
+    return null
   }
 
   const getSeries = (
@@ -111,24 +111,26 @@
     lowColumn,
     closeColumn
   ) => {
-    const rows = dataProvider.rows ?? [];
+    const rows = dataProvider.rows ?? []
 
-    return [{
-      data: rows.map(row => {
-        const open = parseFloat(row[openColumn])
-        const high = parseFloat(row[highColumn])
-        const low = parseFloat(row[lowColumn])
-        const close = parseFloat(row[closeColumn])
+    return [
+      {
+        data: rows.map(row => {
+          const open = parseFloat(row[openColumn])
+          const high = parseFloat(row[highColumn])
+          const low = parseFloat(row[lowColumn])
+          const close = parseFloat(row[closeColumn])
 
-        return [
-          getValueAsUnixTime(dataProvider, dateColumn, row),
-          isNaN(open) ? 0 : open,
-          isNaN(high) ? 0 : high,
-          isNaN(low) ? 0 : low,
-          isNaN(close) ? 0 : close,
-        ]
-      })
-    }]
+          return [
+            getValueAsUnixTime(dataProvider, dateColumn, row),
+            isNaN(open) ? 0 : open,
+            isNaN(high) ? 0 : high,
+            isNaN(low) ? 0 : low,
+            isNaN(close) ? 0 : close,
+          ]
+        }),
+      },
+    ]
   }
 </script>
 
diff --git a/packages/client/src/components/app/charts/DonutChart.svelte b/packages/client/src/components/app/charts/DonutChart.svelte
index 64c13dd1d0..5fab53a25c 100644
--- a/packages/client/src/components/app/charts/DonutChart.svelte
+++ b/packages/client/src/components/app/charts/DonutChart.svelte
@@ -1,6 +1,6 @@
 <script>
   import ApexChart from "./ApexChart.svelte"
-  import formatters from "./formatters";
+  import formatters from "./formatters"
 
   export let title
   export let dataProvider
@@ -14,17 +14,19 @@
   export let palette
   export let c1, c2, c3, c4, c5
 
-  $: labelType = dataProvider?.schema?.[labelColumn]?.type === 'datetime' ? 
-    "datetime" : "category"
+  $: labelType =
+    dataProvider?.schema?.[labelColumn]?.type === "datetime"
+      ? "datetime"
+      : "category"
   $: series = getSeries(dataProvider, valueColumn)
-  $: labels = getLabels(dataProvider, labelColumn, labelType);
+  $: labels = getLabels(dataProvider, labelColumn, labelType)
 
   $: options = {
     series,
     labels,
     colors: palette === "Custom" ? [c1, c2, c3, c4, c5] : [],
     theme: {
-      palette: palette === "Custom" ? null : palette
+      palette: palette === "Custom" ? null : palette,
     },
     legend: {
       show: legend,
@@ -38,14 +40,14 @@
       text: title,
     },
     dataLabels: {
-      enabled: dataLabels
+      enabled: dataLabels,
     },
     chart: {
       height: height == null || height === "" ? "auto" : height,
       width: width == null || width === "" ? "100%" : width,
       type: "donut",
       animations: {
-        enabled: animate
+        enabled: animate,
       },
       toolbar: {
         show: false,
@@ -57,27 +59,27 @@
   }
 
   const getSeries = (dataProvider, valueColumn) => {
-    const rows = dataProvider.rows ?? [];
+    const rows = dataProvider.rows ?? []
 
     return rows.map(row => {
       const value = row?.[valueColumn]
 
       if (dataProvider?.schema?.[valueColumn]?.type === "datetime" && value) {
-        return Date.parse(value);
+        return Date.parse(value)
       }
 
       // This chart doesn't automatically parse strings into numbers
-      const numValue = parseFloat(value);
+      const numValue = parseFloat(value)
       if (isNaN(numValue)) {
-        return 0;
+        return 0
       }
 
-      return numValue;
+      return numValue
     })
   }
 
   const getLabels = (dataProvider, labelColumn, labelType) => {
-    const rows = dataProvider.rows ?? [];
+    const rows = dataProvider.rows ?? []
 
     return rows.map(row => {
       const value = row?.[labelColumn]
@@ -89,7 +91,7 @@
         return formatters["Datetime"](value)
       }
 
-      return value;
+      return value
     })
   }
 </script>
diff --git a/packages/client/src/components/app/charts/HistogramChart.svelte b/packages/client/src/components/app/charts/HistogramChart.svelte
index 95f43dfb31..294a2b9aed 100644
--- a/packages/client/src/components/app/charts/HistogramChart.svelte
+++ b/packages/client/src/components/app/charts/HistogramChart.svelte
@@ -25,13 +25,13 @@
     series,
     colors: palette === "Custom" ? [c1, c2, c3, c4, c5] : [],
     theme: {
-      palette: palette === "Custom" ? null : palette
+      palette: palette === "Custom" ? null : palette,
     },
     title: {
       text: title,
     },
     dataLabels: {
-      enabled: dataLabels
+      enabled: dataLabels,
     },
     chart: {
       height: height == null || height === "" ? "auto" : height,
@@ -39,7 +39,7 @@
       type: "bar",
       stacked,
       animations: {
-        enabled: animate
+        enabled: animate,
       },
       toolbar: {
         show: false,
@@ -50,51 +50,56 @@
     },
     plotOptions: {
       bar: {
-        horizontal
-      }
+        horizontal,
+      },
     },
     xaxis: {
-      type: 'category',
+      type: "category",
       title: {
-        text: xAxisLabel
+        text: xAxisLabel,
       },
       labels: {
-        formatter: xAxisFormatter
+        formatter: xAxisFormatter,
       },
     },
     yaxis: {
       decimalsInFloat: 0,
       title: {
-        text: yAxisLabel
+        text: yAxisLabel,
       },
       labels: {
-        formatter: yAxisFormatter
+        formatter: yAxisFormatter,
       },
-    }
+    },
   }
 
   const getSeries = (dataProvider, valueColumn, bucketCount) => {
-    const rows = dataProvider.rows ?? [];
+    const rows = dataProvider.rows ?? []
 
-    const values = rows.map(row => parseFloat(row[valueColumn])).filter(value => !isNaN(value))
+    const values = rows
+      .map(row => parseFloat(row[valueColumn]))
+      .filter(value => !isNaN(value))
     const [min, max] = getValuesRange(values)
     const buckets = getBuckets(min, max, bucketCount)
-    const counts = Array(bucketCount).fill(0);
+    const counts = Array(bucketCount).fill(0)
 
     values.forEach(value => {
-      const bucketIndex = buckets.findIndex(bucket => bucket.min <= value && value <= bucket.max)
+      const bucketIndex = buckets.findIndex(
+        bucket => bucket.min <= value && value <= bucket.max
+      )
 
       counts[bucketIndex]++
-    });
+    })
 
-    const series = buckets.map((bucket, index) => ({ x: `${bucket.min} – ${bucket.max}`, y: counts[index] }))
+    const series = buckets.map((bucket, index) => ({
+      x: `${bucket.min} – ${bucket.max}`,
+      y: counts[index],
+    }))
 
-    return [
-      { data: series }
-    ]
+    return [{ data: series }]
   }
 
-  const getValuesRange = (values) => {
+  const getValuesRange = values => {
     // Ensure min is nearest integer including the actual minimum e.g.`-10.2` -> `-11`
     const min = Math.floor(Math.min(...values))
     // Ensure max is nearest integer including the actual maximum e.g. `20.2` -> `21`
@@ -110,7 +115,7 @@
     const range = max - min
     // Assure bucketSize is never a decimal value, we'll redistribute any size truncated here later
     const bucketSize = Math.floor(range / bucketCount)
-    const bucketRemainder = range - (bucketSize * bucketCount)
+    const bucketRemainder = range - bucketSize * bucketCount
 
     const buckets = []
 
@@ -121,28 +126,28 @@
 
       buckets.push({
         min: lastBucketMax,
-        max: lastBucketMax + bucketSize + remainderPadding
+        max: lastBucketMax + bucketSize + remainderPadding,
       })
     }
 
-    return buckets;
+    return buckets
   }
 
   const getFormatter = (horizontal, axis) => {
     // Don't display decimals in between integers on the value axis
     if ((horizontal && axis === "x") || (!horizontal && axis === "y")) {
-      return (value) => {
+      return value => {
         if (Math.floor(value) === value) {
-          return value;
+          return value
         }
 
         // Returning an empty string or even a normal space here causes Apex Charts to push the value axis label of the screen
         // This is an `em space`, `U+2003`
-        return " ";
+        return " "
       }
     }
 
-    return (value) => value
+    return value => value
   }
 </script>
 
diff --git a/packages/client/src/components/app/charts/LineChart.svelte b/packages/client/src/components/app/charts/LineChart.svelte
index 712cfde3a8..4fced54066 100644
--- a/packages/client/src/components/app/charts/LineChart.svelte
+++ b/packages/client/src/components/app/charts/LineChart.svelte
@@ -19,21 +19,23 @@
   export let c1, c2, c3, c4, c5
 
   $: series = getSeries(dataProvider, valueColumns)
-  $: categories = getCategories(dataProvider, labelColumn);
+  $: categories = getCategories(dataProvider, labelColumn)
 
-  $: labelType = dataProvider?.schema?.[labelColumn]?.type === 'datetime' ? 
-    "datetime" : "category"
+  $: labelType =
+    dataProvider?.schema?.[labelColumn]?.type === "datetime"
+      ? "datetime"
+      : "category"
   $: xAxisFormatter = getFormatter(labelType, valueUnits, "x")
   $: yAxisFormatter = getFormatter(labelType, valueUnits, "y")
 
   $: options = {
     series,
     stroke: {
-      curve: curve.toLowerCase()
+      curve: curve.toLowerCase(),
     },
     colors: palette === "Custom" ? [c1, c2, c3, c4, c5] : [],
     theme: {
-      palette: palette === "Custom" ? null : palette
+      palette: palette === "Custom" ? null : palette,
     },
     legend: {
       show: legend,
@@ -47,14 +49,14 @@
       text: title,
     },
     dataLabels: {
-      enabled: dataLabels
+      enabled: dataLabels,
     },
     chart: {
       height: height == null || height === "" ? "auto" : height,
       width: width == null || width === "" ? "100%" : width,
       type: "line",
       animations: {
-        enabled: animate
+        enabled: animate,
       },
       toolbar: {
         show: false,
@@ -67,24 +69,24 @@
       type: labelType,
       categories,
       labels: {
-        formatter: xAxisFormatter
+        formatter: xAxisFormatter,
       },
       title: {
-        text: xAxisLabel
-      }
+        text: xAxisLabel,
+      },
     },
     yaxis: {
       labels: {
-        formatter: yAxisFormatter
+        formatter: yAxisFormatter,
       },
       title: {
-        text: yAxisLabel
-      }
-    }
+        text: yAxisLabel,
+      },
+    },
   }
 
   const getSeries = (dataProvider, valueColumns = []) => {
-    const rows = dataProvider.rows ?? [];
+    const rows = dataProvider.rows ?? []
 
     return valueColumns.map(column => ({
       name: column,
@@ -92,7 +94,7 @@
         const value = row?.[column]
 
         if (dataProvider?.schema?.[column]?.type === "datetime" && value) {
-          return Date.parse(value);
+          return Date.parse(value)
         }
 
         return value
@@ -101,7 +103,7 @@
   }
 
   const getCategories = (dataProvider, labelColumn) => {
-    const rows = dataProvider.rows ?? [];
+    const rows = dataProvider.rows ?? []
 
     return rows.map(row => {
       const value = row?.[labelColumn]
@@ -111,7 +113,7 @@
         return ""
       }
 
-      return value;
+      return value
     })
   }
 
diff --git a/packages/client/src/components/app/charts/PieChart.svelte b/packages/client/src/components/app/charts/PieChart.svelte
index 16eca7e1c3..5ddf88d43d 100644
--- a/packages/client/src/components/app/charts/PieChart.svelte
+++ b/packages/client/src/components/app/charts/PieChart.svelte
@@ -1,6 +1,6 @@
 <script>
   import ApexChart from "./ApexChart.svelte"
-  import formatters from "./formatters";
+  import formatters from "./formatters"
 
   export let title
   export let dataProvider
@@ -14,17 +14,19 @@
   export let palette
   export let c1, c2, c3, c4, c5
 
-  $: labelType = dataProvider?.schema?.[labelColumn]?.type === 'datetime' ? 
-    "datetime" : "category"
+  $: labelType =
+    dataProvider?.schema?.[labelColumn]?.type === "datetime"
+      ? "datetime"
+      : "category"
   $: series = getSeries(dataProvider, valueColumn)
-  $: labels = getLabels(dataProvider, labelColumn, labelType);
+  $: labels = getLabels(dataProvider, labelColumn, labelType)
 
   $: options = {
     series,
     labels,
     colors: palette === "Custom" ? [c1, c2, c3, c4, c5] : [],
     theme: {
-      palette: palette === "Custom" ? null : palette
+      palette: palette === "Custom" ? null : palette,
     },
     legend: {
       show: legend,
@@ -38,14 +40,14 @@
       text: title,
     },
     dataLabels: {
-      enabled: dataLabels
+      enabled: dataLabels,
     },
     chart: {
       height: height == null || height === "" ? "auto" : height,
       width: width == null || width === "" ? "100%" : width,
       type: "pie",
       animations: {
-        enabled: animate
+        enabled: animate,
       },
       toolbar: {
         show: false,
@@ -57,27 +59,27 @@
   }
 
   const getSeries = (dataProvider, valueColumn) => {
-    const rows = dataProvider.rows ?? [];
+    const rows = dataProvider.rows ?? []
 
     return rows.map(row => {
       const value = row?.[valueColumn]
 
       if (dataProvider?.schema?.[valueColumn]?.type === "datetime" && value) {
-        return Date.parse(value);
+        return Date.parse(value)
       }
 
       // This chart doesn't automatically parse strings into numbers
-      const numValue = parseFloat(value);
+      const numValue = parseFloat(value)
       if (isNaN(numValue)) {
-        return 0;
+        return 0
       }
 
-      return numValue;
+      return numValue
     })
   }
 
   const getLabels = (dataProvider, labelColumn, labelType) => {
-    const rows = dataProvider.rows ?? [];
+    const rows = dataProvider.rows ?? []
 
     return rows.map(row => {
       const value = row?.[labelColumn]
@@ -89,7 +91,7 @@
         return formatters["Datetime"](value)
       }
 
-      return value;
+      return value
     })
   }
 </script>
diff --git a/packages/client/src/components/app/charts/formatters.js b/packages/client/src/components/app/charts/formatters.js
index 76a471f57e..72a59ad56e 100644
--- a/packages/client/src/components/app/charts/formatters.js
+++ b/packages/client/src/components/app/charts/formatters.js
@@ -2,7 +2,7 @@ const formatters = {
   ["Default"]: val => val,
   ["Thousands"]: val => `${Math.round(val / 1000)}K`,
   ["Millions"]: val => `${Math.round(val / 1000000)}M`,
-  ["Datetime"]: val => (new Date(val)).toLocaleString()
+  ["Datetime"]: val => new Date(val).toLocaleString(),
 }
 
 export default formatters
diff --git a/packages/client/src/utils/componentProps.js b/packages/client/src/utils/componentProps.js
index 9fe09968cf..bdf74c8014 100644
--- a/packages/client/src/utils/componentProps.js
+++ b/packages/client/src/utils/componentProps.js
@@ -101,14 +101,19 @@ export const propsUseBinding = (props, bindingKey) => {
 /**
  * Gets the definition of this component's settings from the manifest
  */
-export const getSettingsDefinition = (definition) => {
+export const getSettingsDefinition = definition => {
   if (!definition) {
     return []
   }
   let settings = []
   definition.settings?.forEach(setting => {
     if (setting.section) {
-      settings = settings.concat((setting.settings || [])?.map(childSetting => ({ ...childSetting, sectionDependsOn: setting.dependsOn })))
+      settings = settings.concat(
+        (setting.settings || [])?.map(childSetting => ({
+          ...childSetting,
+          sectionDependsOn: setting.dependsOn,
+        }))
+      )
     } else {
       settings.push(setting)
     }

From 914beb890fe23dd500c176db05c3327d7d858a21 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Mon, 13 May 2024 13:44:54 +0100
Subject: [PATCH 111/123] add missing data type links, add missing state

---
 packages/bbui/src/Form/Core/Picker.svelte     |  2 --
 .../controls/Explanation/lines/Column.svelte  | 30 +++++++++++++++++--
 .../typography/DocumentationLink.svelte       | 12 +++++++-
 3 files changed, 39 insertions(+), 5 deletions(-)

diff --git a/packages/bbui/src/Form/Core/Picker.svelte b/packages/bbui/src/Form/Core/Picker.svelte
index 235f8ecc9e..ef514a8a8b 100644
--- a/packages/bbui/src/Form/Core/Picker.svelte
+++ b/packages/bbui/src/Form/Core/Picker.svelte
@@ -47,7 +47,6 @@
   const dispatch = createEventDispatcher()
 
   let button
-  let popover
   let component
 
   $: sortedOptions = getSortedOptions(options, getOptionLabel, sort)
@@ -153,7 +152,6 @@
 <Popover
   anchor={customAnchor ? customAnchor : button}
   align={align || "left"}
-  bind:this={popover}
   {open}
   on:close={() => (open = false)}
   useAnchorWidth={!autoWidth}
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/lines/Column.svelte b/packages/builder/src/components/design/settings/controls/Explanation/lines/Column.svelte
index 04d7f1adc1..f80c1dbc14 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/lines/Column.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/lines/Column.svelte
@@ -36,9 +36,34 @@
     if (columnType === "User") {
       return "https://docs.budibase.com/docs/user"
     }
+    if (columnType === "QR") {
+      return "https://docs.budibase.com/docs/barcodeqr"
+    }
+    if (columnType === "Relationship") {
+      return "https://docs.budibase.com/docs/relationships"
+    }
+    if (columnType === "Formula") {
+      return "https://docs.budibase.com/docs/formula"
+    }
+    if (columnType === "Options") {
+      return "https://docs.budibase.com/docs/options"
+    }
+    if (columnType === "BigInt") {
+      // No BigInt docs
+      return null
+    }
+    if (columnType === "Boolean") {
+      return "https://docs.budibase.com/docs/boolean-truefalse"
+    }
+    if (columnType === "Signature") {
+      // No Signature docs
+      return null
+    }
 
-    return ""
+    return null
   }
+
+  $: docLink = getDocLink(columnType);
 </script>
 
 <Line noWrap>
@@ -50,7 +75,8 @@
   />
   <Text value=" is a " />
   <DocumentationLink
-    href={getDocLink(columnType)}
+    disabled={docLink === null}
+    href={docLink}
     icon={columnIcon}
     text={`${columnType} column`}
   />
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/typography/DocumentationLink.svelte b/packages/builder/src/components/design/settings/controls/Explanation/typography/DocumentationLink.svelte
index ce74c1fa57..08fa285164 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/typography/DocumentationLink.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/typography/DocumentationLink.svelte
@@ -4,9 +4,10 @@
   export let icon
   export let text
   export let href
+  export let disabled = false
 </script>
 
-<a tabindex="0" {href} rel="noopener noreferrer" target="_blank" class="link">
+<a class:disabled tabindex="0" {href} rel="noopener noreferrer" target="_blank" class="link">
   <Icon size="XS" name={icon} />
   <span class="text">
     <slot>
@@ -42,8 +43,17 @@
     filter: brightness(120%);
   }
 
+  .disabled {
+    filter: brightness(100%);
+    border-bottom: 1px solid var(--grey-6);
+  }
+
   .link :global(svg) {
     margin-right: 3px;
     color: var(--blue);
   }
+
+  .disabled :global(svg){
+    color: var(--grey-6);
+  }
 </style>

From a95941b1e2dc342d120eaa9b34d30711bbbd9890 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Mon, 13 May 2024 22:26:43 +0100
Subject: [PATCH 112/123] add tests and move type support presets to app store

---
 .../settings/controls/Explanation/Explanation.svelte      | 4 ++--
 packages/builder/src/stores/builder/app.js                | 8 ++++++++
 packages/builder/src/stores/builder/components.js         | 4 ++--
 packages/builder/src/stores/builder/tests/app.test.js     | 6 ++++++
 .../builder/src/stores/builder/tests/component.test.js    | 1 +
 5 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/Explanation/Explanation.svelte b/packages/builder/src/components/design/settings/controls/Explanation/Explanation.svelte
index a7b7e17e2d..f65673d788 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/Explanation.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/Explanation.svelte
@@ -16,7 +16,7 @@
     DateAsNumber,
   } from "./lines"
   import subjects from "./subjects"
-  import { componentStore } from "stores/builder"
+  import { appStore } from "stores/builder"
 
   export let explanation
   export let columnIcon
@@ -29,7 +29,7 @@
 
   $: explanationWithPresets = getExplanationWithPresets(
     explanation,
-    $componentStore.typeSupportPresets
+    $appStore.typeSupportPresets
   )
   let support
   let messages = []
diff --git a/packages/builder/src/stores/builder/app.js b/packages/builder/src/stores/builder/app.js
index 7dfee4daa9..26f223da8e 100644
--- a/packages/builder/src/stores/builder/app.js
+++ b/packages/builder/src/stores/builder/app.js
@@ -19,6 +19,7 @@ export const INITIAL_APP_META_STATE = {
     showNotificationAction: false,
     sidePanel: false,
   },
+  typeSupportPresets: {},
   features: {
     componentValidation: false,
     disableUserMetadata: false,
@@ -79,6 +80,13 @@ export class AppMetaStore extends BudiStore {
     }))
   }
 
+  syncClientTypeSupportPresets(typeSupportPresets) {
+    this.update(state => ({
+      ...state,
+      typeSupportPresets
+    }))
+  }
+
   async syncAppRoutes() {
     const resp = await API.fetchAppRoutes()
     this.update(state => ({
diff --git a/packages/builder/src/stores/builder/components.js b/packages/builder/src/stores/builder/components.js
index ce34714b15..1b04d6c1bb 100644
--- a/packages/builder/src/stores/builder/components.js
+++ b/packages/builder/src/stores/builder/components.js
@@ -103,12 +103,12 @@ export class ComponentStore extends BudiStore {
     this.update(state => ({
       ...state,
       components,
-      customComponents,
-      typeSupportPresets: components?.typeSupportPresets ?? {},
+      customComponents
     }))
 
     // Sync client features to app store
     appStore.syncClientFeatures(components.features)
+    appStore.syncClientTypeSupportPresets(components?.typeSupportPresets ?? {})
 
     return components
   }
diff --git a/packages/builder/src/stores/builder/tests/app.test.js b/packages/builder/src/stores/builder/tests/app.test.js
index e0e5d17ba6..5cebc34e93 100644
--- a/packages/builder/src/stores/builder/tests/app.test.js
+++ b/packages/builder/src/stores/builder/tests/app.test.js
@@ -91,6 +91,12 @@ describe("Application Meta Store", () => {
     })
   })
 
+  it("Sync type support information to state", async ctx => {
+    ctx.test.appStore.syncClientTypeSupportPresets({ preset: "information" })
+
+    expect(ctx.test.store.typeSupportPresets).toStrictEqual({ preset: "information" })
+  })
+
   it("Sync component feature flags to state", async ctx => {
     ctx.test.appStore.syncClientFeatures(clientFeaturesResp)
 
diff --git a/packages/builder/src/stores/builder/tests/component.test.js b/packages/builder/src/stores/builder/tests/component.test.js
index b6c9ca27cd..b8baefc5e6 100644
--- a/packages/builder/src/stores/builder/tests/component.test.js
+++ b/packages/builder/src/stores/builder/tests/component.test.js
@@ -42,6 +42,7 @@ vi.mock("stores/builder", async () => {
     update: mockAppStore.update,
     set: mockAppStore.set,
     syncClientFeatures: vi.fn(),
+    syncClientTypeSupportPresets: vi.fn(),
   }
   const mockTableStore = writable()
   const tables = {

From 60f65533407d1d4be0d7305762ddfb70c815e358 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Mon, 13 May 2024 22:33:17 +0100
Subject: [PATCH 113/123] remove hide var from apexchart component

---
 packages/client/src/components/app/charts/ApexChart.svelte | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/client/src/components/app/charts/ApexChart.svelte b/packages/client/src/components/app/charts/ApexChart.svelte
index ee0e0480e7..6010c326ac 100644
--- a/packages/client/src/components/app/charts/ApexChart.svelte
+++ b/packages/client/src/components/app/charts/ApexChart.svelte
@@ -47,16 +47,15 @@
   }
 
   $: noData = optionsCopy == null || optionsCopy?.series?.length === 0
-  $: hide = noData
 
-  // Call render chart upon changes to hide, as apex charts has issues with rendering upon changes automatically
+  // Call render chart upon changes to noData, as apex charts has issues with rendering upon changes automatically
   // if the chart is hidden.
-  $: renderChart(chartElement, hide)
+  $: renderChart(chartElement, noData)
   $: updateChart(optionsCopy)
 </script>
 
 {#key optionsCopy?.customColor}
-  <div class:hide use:styleable={$component.styles} bind:this={chartElement} />
+  <div class:hide={noData} use:styleable={$component.styles} bind:this={chartElement} />
   {#if $builderStore.inBuilder && noData}
     <div
       class="component-placeholder"

From 5cee165db0e4d5bc4f87d68b19ba55012e277e7b Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Mon, 13 May 2024 22:35:16 +0100
Subject: [PATCH 114/123] feedback

---
 .../controls/Explanation/DetailsModal/subjects/Support.svelte   | 2 +-
 .../Explanation/DetailsModal/subjects/components/Block.svelte   | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/Support.svelte b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/Support.svelte
index a04e38ad3a..0419c0ad16 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/Support.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/Support.svelte
@@ -23,7 +23,7 @@
   </Section>
   <Section>
     <InfoWord icon="Alert" color="var(--red)" text="Not compatible" />
-    <span class="body">Imcompatible with the component.</span>
+    <span class="body">Incompatible with the component.</span>
   </Section>
 </Subject>
 
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/Block.svelte b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/Block.svelte
index 6ee93ff1a6..449b40304d 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/Block.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/components/Block.svelte
@@ -10,6 +10,7 @@
 <style>
   .block {
     font-style: italic;
+    border-radius: 1px;
     padding: 0px 5px 0px 3px;
     border-radius: 1px;
     background-color: var(--grey-3);

From ca452d7dcee2ce4ef58c679faf6ccd7d2ff5526d Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Mon, 13 May 2024 22:42:09 +0100
Subject: [PATCH 115/123] feedback

---
 packages/client/package.json                               | 1 -
 packages/client/src/components/app/charts/ApexChart.svelte | 2 +-
 packages/server/src/api/controllers/component.ts           | 1 +
 3 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/client/package.json b/packages/client/package.json
index 1bbf7319cb..d8b2fa9447 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -37,7 +37,6 @@
     "downloadjs": "1.4.7",
     "html5-qrcode": "^2.2.1",
     "leaflet": "^1.7.1",
-    "lodash": "^4.17.21",
     "sanitize-html": "^2.7.0",
     "screenfull": "^6.0.1",
     "shortid": "^2.2.15",
diff --git a/packages/client/src/components/app/charts/ApexChart.svelte b/packages/client/src/components/app/charts/ApexChart.svelte
index 6010c326ac..8cbdbd0cca 100644
--- a/packages/client/src/components/app/charts/ApexChart.svelte
+++ b/packages/client/src/components/app/charts/ApexChart.svelte
@@ -10,7 +10,7 @@
   export let options
 
   // Apex charts directly modifies the options object with default properties and internal variables. These being present could unintentionally cause issues to the provider of this prop as the changes are reflected in that component as well. To prevent any issues we clone options here to provide a buffer.
-  $: optionsCopy = cloneDeep(options)
+  $: optionsCopy = structuredClone(options)
 
   let chartElement
   let chart
diff --git a/packages/server/src/api/controllers/component.ts b/packages/server/src/api/controllers/component.ts
index 44d7255ecb..6d4d3e2d21 100644
--- a/packages/server/src/api/controllers/component.ts
+++ b/packages/server/src/api/controllers/component.ts
@@ -20,6 +20,7 @@ export async function fetchAppComponentDefinitions(ctx: UserCtx) {
     const definitions: { [key: string]: any } = {}
     for (let { manifest, library } of componentManifests) {
       for (let key of Object.keys(manifest)) {
+        // These keys are not components, and should not be preprended with the `@budibase/` prefix
         if (key === "features" || key === "typeSupportPresets") {
           definitions[key] = manifest[key]
         } else {

From bad7a535dcc2ff74a3e43ce6d4df46cb7eebdcd5 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Tue, 14 May 2024 09:24:18 +0100
Subject: [PATCH 116/123] add clonedeep that copies non-serialisable stuff

---
 .../components/app/charts/ApexChart.svelte    |  5 ++-
 .../components/app/charts/AreaChart.svelte    |  2 +-
 .../src/components/app/charts/BarChart.svelte |  2 +-
 .../app/charts/CandleStickChart.svelte        |  2 +-
 .../components/app/charts/DonutChart.svelte   |  2 +-
 .../components/app/charts/LineChart.svelte    |  2 +-
 .../src/components/app/charts/PieChart.svelte |  2 +-
 .../src/components/app/charts/formatters.js   |  8 ----
 .../client/src/components/app/charts/utils.js | 40 +++++++++++++++++++
 .../src/components/app/charts/utils.test.js   | 33 +++++++++++++++
 10 files changed, 82 insertions(+), 16 deletions(-)
 delete mode 100644 packages/client/src/components/app/charts/formatters.js
 create mode 100644 packages/client/src/components/app/charts/utils.js
 create mode 100644 packages/client/src/components/app/charts/utils.test.js

diff --git a/packages/client/src/components/app/charts/ApexChart.svelte b/packages/client/src/components/app/charts/ApexChart.svelte
index 8cbdbd0cca..1fd3cffdce 100644
--- a/packages/client/src/components/app/charts/ApexChart.svelte
+++ b/packages/client/src/components/app/charts/ApexChart.svelte
@@ -2,7 +2,7 @@
   import { getContext } from "svelte"
   import ApexCharts from "apexcharts"
   import { Icon } from "@budibase/bbui"
-  import { cloneDeep } from "lodash"
+  import { cloneDeep } from "./utils"
 
   const { styleable, builderStore } = getContext("sdk")
   const component = getContext("component")
@@ -10,7 +10,8 @@
   export let options
 
   // Apex charts directly modifies the options object with default properties and internal variables. These being present could unintentionally cause issues to the provider of this prop as the changes are reflected in that component as well. To prevent any issues we clone options here to provide a buffer.
-  $: optionsCopy = structuredClone(options)
+  $: optionsCopy = cloneDeep(options)
+  $: console.log(options, optionsCopy)
 
   let chartElement
   let chart
diff --git a/packages/client/src/components/app/charts/AreaChart.svelte b/packages/client/src/components/app/charts/AreaChart.svelte
index d30365e4d0..626f2e041a 100644
--- a/packages/client/src/components/app/charts/AreaChart.svelte
+++ b/packages/client/src/components/app/charts/AreaChart.svelte
@@ -1,6 +1,6 @@
 <script>
   import ApexChart from "./ApexChart.svelte"
-  import formatters from "./formatters"
+  import { formatters } from "./utils"
 
   export let title
   export let dataProvider
diff --git a/packages/client/src/components/app/charts/BarChart.svelte b/packages/client/src/components/app/charts/BarChart.svelte
index bd1a2f768a..eded24ad63 100644
--- a/packages/client/src/components/app/charts/BarChart.svelte
+++ b/packages/client/src/components/app/charts/BarChart.svelte
@@ -1,6 +1,6 @@
 <script>
   import ApexChart from "./ApexChart.svelte"
-  import formatters from "./formatters"
+  import { formatters } from "./utils"
 
   export let dataProvider
   export let labelColumn
diff --git a/packages/client/src/components/app/charts/CandleStickChart.svelte b/packages/client/src/components/app/charts/CandleStickChart.svelte
index 06e0409add..8ddb4d4047 100644
--- a/packages/client/src/components/app/charts/CandleStickChart.svelte
+++ b/packages/client/src/components/app/charts/CandleStickChart.svelte
@@ -1,6 +1,6 @@
 <script>
   import ApexChart from "./ApexChart.svelte"
-  import formatters from "./formatters"
+  import { formatters } from "./utils"
 
   export let title
   export let dataProvider
diff --git a/packages/client/src/components/app/charts/DonutChart.svelte b/packages/client/src/components/app/charts/DonutChart.svelte
index 5fab53a25c..85317b1d01 100644
--- a/packages/client/src/components/app/charts/DonutChart.svelte
+++ b/packages/client/src/components/app/charts/DonutChart.svelte
@@ -1,6 +1,6 @@
 <script>
   import ApexChart from "./ApexChart.svelte"
-  import formatters from "./formatters"
+  import { formatters } from "./utils"
 
   export let title
   export let dataProvider
diff --git a/packages/client/src/components/app/charts/LineChart.svelte b/packages/client/src/components/app/charts/LineChart.svelte
index 4fced54066..b1325950ab 100644
--- a/packages/client/src/components/app/charts/LineChart.svelte
+++ b/packages/client/src/components/app/charts/LineChart.svelte
@@ -1,6 +1,6 @@
 <script>
   import ApexChart from "./ApexChart.svelte"
-  import formatters from "./formatters"
+  import { formatters } from "./utils"
 
   export let title
   export let dataProvider
diff --git a/packages/client/src/components/app/charts/PieChart.svelte b/packages/client/src/components/app/charts/PieChart.svelte
index 5ddf88d43d..413bf93b54 100644
--- a/packages/client/src/components/app/charts/PieChart.svelte
+++ b/packages/client/src/components/app/charts/PieChart.svelte
@@ -1,6 +1,6 @@
 <script>
   import ApexChart from "./ApexChart.svelte"
-  import formatters from "./formatters"
+  import { formatters } from "./utils"
 
   export let title
   export let dataProvider
diff --git a/packages/client/src/components/app/charts/formatters.js b/packages/client/src/components/app/charts/formatters.js
deleted file mode 100644
index 72a59ad56e..0000000000
--- a/packages/client/src/components/app/charts/formatters.js
+++ /dev/null
@@ -1,8 +0,0 @@
-const formatters = {
-  ["Default"]: val => val,
-  ["Thousands"]: val => `${Math.round(val / 1000)}K`,
-  ["Millions"]: val => `${Math.round(val / 1000000)}M`,
-  ["Datetime"]: val => new Date(val).toLocaleString(),
-}
-
-export default formatters
diff --git a/packages/client/src/components/app/charts/utils.js b/packages/client/src/components/app/charts/utils.js
new file mode 100644
index 0000000000..f481c99bc0
--- /dev/null
+++ b/packages/client/src/components/app/charts/utils.js
@@ -0,0 +1,40 @@
+export const formatters = {
+  ["Default"]: val => val,
+  ["Thousands"]: val => `${Math.round(val / 1000)}K`,
+  ["Millions"]: val => `${Math.round(val / 1000000)}M`,
+  ["Datetime"]: val => new Date(val).toLocaleString(),
+}
+
+// Deep clone which copies function references
+export const cloneDeep = (value) => {
+  const typesToNaiveCopy = ["string", "boolean", "number", "function", "symbol"]
+
+  if (value === null) {
+    return null
+  }
+
+  if (value === undefined) {
+    return undefined
+  }
+
+  if (typesToNaiveCopy.includes(typeof value)) {
+    return value;
+  }
+
+  if (Array.isArray(value)) {
+    return value.map(element => cloneDeep(element))
+  }
+
+  // Only copy "pure" objects, we want to error on stuff like Maps or Sets
+  if (typeof value === "object" && value.constructor.name === "Object") {
+    const cloneObject = {}
+
+    Object.entries(value).forEach(([key, childValue]) => {
+      cloneObject[key] = cloneDeep(childValue)
+    })
+
+    return cloneObject;
+  }
+
+  throw `Unsupported value: "${value}" of type: "${typeof value}"`
+}
diff --git a/packages/client/src/components/app/charts/utils.test.js b/packages/client/src/components/app/charts/utils.test.js
new file mode 100644
index 0000000000..e74aaa93b0
--- /dev/null
+++ b/packages/client/src/components/app/charts/utils.test.js
@@ -0,0 +1,33 @@
+import { expect, describe, it, vi } from "vitest"
+import {
+  cloneDeep,
+} from "./utils"
+
+describe("utils", () => {
+  let context;
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    context = {};
+  })
+
+  describe("cloneDeep", () => {
+    beforeEach(() => {
+      context.value = {
+        obj: { one: 1, two: 2 },
+        arr: [1, { first: null, second: undefined }, 2],
+        str: "test",
+        num: 123,
+        bool: true,
+        sym: Symbol("test"),
+        func: () => "some value"
+      }
+      context.cloneValue = cloneDeep(context.value);
+    });
+
+    it("to clone the object and not copy object references", () => {
+      expect(context.cloneValue.obj.one).toEqual(1)
+      expect(context.cloneValue.obj.two).toEqual(2)
+    });
+  })
+})

From 1c14a71ef8834abe625cc50800b05272c0f46d0b Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Tue, 14 May 2024 09:49:53 +0100
Subject: [PATCH 117/123] remove palette name

---
 packages/client/manifest.json                 | 168 +++++++++---------
 .../components/app/charts/ApexChart.svelte    |   1 -
 .../components/app/charts/AreaChart.svelte    |   4 +-
 .../src/components/app/charts/BarChart.svelte |   4 +-
 .../components/app/charts/DonutChart.svelte   |   4 +-
 .../app/charts/HistogramChart.svelte          |   3 +-
 .../components/app/charts/LineChart.svelte    |   4 +-
 .../src/components/app/charts/PieChart.svelte |   4 +-
 .../client/src/components/app/charts/utils.js |  11 ++
 9 files changed, 107 insertions(+), 96 deletions(-)

diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index fb87020148..12d52a2547 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -1714,19 +1714,19 @@
         "type": "select",
         "label": "Colors",
         "key": "palette",
-        "defaultValue": "palette1",
+        "defaultValue": "Palette 1",
         "options": [
-          { "label": "Custom", "value": "Custom" },
-          { "label": "Palette 1", "value": "palette1" },
-          { "label": "Palette 2", "value": "palette2" },
-          { "label": "Palette 3", "value": "palette3" },
-          { "label": "Palette 4", "value": "palette4" },
-          { "label": "Palette 5", "value": "palette5" },
-          { "label": "Palette 6", "value": "palette6" },
-          { "label": "Palette 7", "value": "palette7" },
-          { "label": "Palette 8", "value": "palette8" },
-          { "label": "Palette 9", "value": "palette9" },
-          { "label": "Palette 10", "value": "palette10" }
+          "Custom",
+          "Palette 1",
+          "Palette 2",
+          "Palette 3",
+          "Palette 4",
+          "Palette 5",
+          "Palette 6",
+          "Palette 7",
+          "Palette 8",
+          "Palette 9",
+          "Palette 10"
         ]
       },
       {
@@ -1883,19 +1883,19 @@
         "type": "select",
         "label": "Colors",
         "key": "palette",
-        "defaultValue": "palette1",
+        "defaultValue": "Palette 1",
         "options": [
-          { "label": "Custom", "value": "Custom" },
-          { "label": "Palette 1", "value": "palette1" },
-          { "label": "Palette 2", "value": "palette2" },
-          { "label": "Palette 3", "value": "palette3" },
-          { "label": "Palette 4", "value": "palette4" },
-          { "label": "Palette 5", "value": "palette5" },
-          { "label": "Palette 6", "value": "palette6" },
-          { "label": "Palette 7", "value": "palette7" },
-          { "label": "Palette 8", "value": "palette8" },
-          { "label": "Palette 9", "value": "palette9" },
-          { "label": "Palette 10", "value": "palette10" }
+          "Custom",
+          "Palette 1",
+          "Palette 2",
+          "Palette 3",
+          "Palette 4",
+          "Palette 5",
+          "Palette 6",
+          "Palette 7",
+          "Palette 8",
+          "Palette 9",
+          "Palette 10"
         ]
       },
       {
@@ -2047,19 +2047,19 @@
         "type": "select",
         "label": "Colors",
         "key": "palette",
-        "defaultValue": "palette1",
+        "defaultValue": "Palette 1",
         "options": [
-          { "label": "Custom", "value": "Custom" },
-          { "label": "Palette 1", "value": "palette1" },
-          { "label": "Palette 2", "value": "palette2" },
-          { "label": "Palette 3", "value": "palette3" },
-          { "label": "Palette 4", "value": "palette4" },
-          { "label": "Palette 5", "value": "palette5" },
-          { "label": "Palette 6", "value": "palette6" },
-          { "label": "Palette 7", "value": "palette7" },
-          { "label": "Palette 8", "value": "palette8" },
-          { "label": "Palette 9", "value": "palette9" },
-          { "label": "Palette 10", "value": "palette10" }
+          "Custom",
+          "Palette 1",
+          "Palette 2",
+          "Palette 3",
+          "Palette 4",
+          "Palette 5",
+          "Palette 6",
+          "Palette 7",
+          "Palette 8",
+          "Palette 9",
+          "Palette 10"
         ]
       },
       {
@@ -2206,19 +2206,19 @@
         "type": "select",
         "label": "Colors",
         "key": "palette",
-        "defaultValue": "palette1",
+        "defaultValue": "Palette 1",
         "options": [
-          { "label": "Custom", "value": "Custom" },
-          { "label": "Palette 1", "value": "palette1" },
-          { "label": "Palette 2", "value": "palette2" },
-          { "label": "Palette 3", "value": "palette3" },
-          { "label": "Palette 4", "value": "palette4" },
-          { "label": "Palette 5", "value": "palette5" },
-          { "label": "Palette 6", "value": "palette6" },
-          { "label": "Palette 7", "value": "palette7" },
-          { "label": "Palette 8", "value": "palette8" },
-          { "label": "Palette 9", "value": "palette9" },
-          { "label": "Palette 10", "value": "palette10" }
+          "Custom",
+          "Palette 1",
+          "Palette 2",
+          "Palette 3",
+          "Palette 4",
+          "Palette 5",
+          "Palette 6",
+          "Palette 7",
+          "Palette 8",
+          "Palette 9",
+          "Palette 10"
         ]
       },
       {
@@ -2346,19 +2346,19 @@
         "type": "select",
         "label": "Colors",
         "key": "palette",
-        "defaultValue": "palette1",
+        "defaultValue": "Palette 1",
         "options": [
-          { "label": "Custom", "value": "Custom" },
-          { "label": "Palette 1", "value": "palette1" },
-          { "label": "Palette 2", "value": "palette2" },
-          { "label": "Palette 3", "value": "palette3" },
-          { "label": "Palette 4", "value": "palette4" },
-          { "label": "Palette 5", "value": "palette5" },
-          { "label": "Palette 6", "value": "palette6" },
-          { "label": "Palette 7", "value": "palette7" },
-          { "label": "Palette 8", "value": "palette8" },
-          { "label": "Palette 9", "value": "palette9" },
-          { "label": "Palette 10", "value": "palette10" }
+          "Custom",
+          "Palette 1",
+          "Palette 2",
+          "Palette 3",
+          "Palette 4",
+          "Palette 5",
+          "Palette 6",
+          "Palette 7",
+          "Palette 8",
+          "Palette 9",
+          "Palette 10"
         ]
       },
       {
@@ -2615,19 +2615,19 @@
         "type": "select",
         "label": "Colors",
         "key": "palette",
-        "defaultValue": "palette1",
+        "defaultValue": "Palette 1",
         "options": [
-          { "label": "Custom", "value": "Custom" },
-          { "label": "Palette 1", "value": "palette1" },
-          { "label": "Palette 2", "value": "palette2" },
-          { "label": "Palette 3", "value": "palette3" },
-          { "label": "Palette 4", "value": "palette4" },
-          { "label": "Palette 5", "value": "palette5" },
-          { "label": "Palette 6", "value": "palette6" },
-          { "label": "Palette 7", "value": "palette7" },
-          { "label": "Palette 8", "value": "palette8" },
-          { "label": "Palette 9", "value": "palette9" },
-          { "label": "Palette 10", "value": "palette10" }
+          "Custom",
+          "Palette 1",
+          "Palette 2",
+          "Palette 3",
+          "Palette 4",
+          "Palette 5",
+          "Palette 6",
+          "Palette 7",
+          "Palette 8",
+          "Palette 9",
+          "Palette 10"
         ]
       },
       {
@@ -5292,19 +5292,19 @@
         "type": "select",
         "label": "Colors",
         "key": "palette",
-        "defaultValue": "palette1",
+        "defaultValue": "Palette 1",
         "options": [
-          { "label": "Custom", "value": "Custom" },
-          { "label": "Palette 1", "value": "palette1" },
-          { "label": "Palette 2", "value": "palette2" },
-          { "label": "Palette 3", "value": "palette3" },
-          { "label": "Palette 4", "value": "palette4" },
-          { "label": "Palette 5", "value": "palette5" },
-          { "label": "Palette 6", "value": "palette6" },
-          { "label": "Palette 7", "value": "palette7" },
-          { "label": "Palette 8", "value": "palette8" },
-          { "label": "Palette 9", "value": "palette9" },
-          { "label": "Palette 10", "value": "palette10" }
+          "Custom",
+          "Palette 1",
+          "Palette 2",
+          "Palette 3",
+          "Palette 4",
+          "Palette 5",
+          "Palette 6",
+          "Palette 7",
+          "Palette 8",
+          "Palette 9",
+          "Palette 10"
         ]
       },
       {
diff --git a/packages/client/src/components/app/charts/ApexChart.svelte b/packages/client/src/components/app/charts/ApexChart.svelte
index 1fd3cffdce..2e1bd6d37b 100644
--- a/packages/client/src/components/app/charts/ApexChart.svelte
+++ b/packages/client/src/components/app/charts/ApexChart.svelte
@@ -11,7 +11,6 @@
 
   // Apex charts directly modifies the options object with default properties and internal variables. These being present could unintentionally cause issues to the provider of this prop as the changes are reflected in that component as well. To prevent any issues we clone options here to provide a buffer.
   $: optionsCopy = cloneDeep(options)
-  $: console.log(options, optionsCopy)
 
   let chartElement
   let chart
diff --git a/packages/client/src/components/app/charts/AreaChart.svelte b/packages/client/src/components/app/charts/AreaChart.svelte
index 626f2e041a..0db493565c 100644
--- a/packages/client/src/components/app/charts/AreaChart.svelte
+++ b/packages/client/src/components/app/charts/AreaChart.svelte
@@ -1,6 +1,6 @@
 <script>
   import ApexChart from "./ApexChart.svelte"
-  import { formatters } from "./utils"
+  import { formatters, parsePalette } from "./utils"
 
   export let title
   export let dataProvider
@@ -41,7 +41,7 @@
     },
     colors: palette === "Custom" ? [c1, c2, c3, c4, c5] : [],
     theme: {
-      palette: palette === "Custom" ? null : palette,
+      palette: parsePalette(palette),
     },
     fill,
     legend: {
diff --git a/packages/client/src/components/app/charts/BarChart.svelte b/packages/client/src/components/app/charts/BarChart.svelte
index eded24ad63..127cb98e23 100644
--- a/packages/client/src/components/app/charts/BarChart.svelte
+++ b/packages/client/src/components/app/charts/BarChart.svelte
@@ -1,6 +1,6 @@
 <script>
   import ApexChart from "./ApexChart.svelte"
-  import { formatters } from "./utils"
+  import { formatters, parsePalette } from "./utils"
 
   export let dataProvider
   export let labelColumn
@@ -34,7 +34,7 @@
     series,
     colors: palette === "Custom" ? [c1, c2, c3, c4, c5] : [],
     theme: {
-      palette: palette === "Custom" ? null : palette,
+      palette: parsePalette(palette),
     },
     legend: {
       show: legend,
diff --git a/packages/client/src/components/app/charts/DonutChart.svelte b/packages/client/src/components/app/charts/DonutChart.svelte
index 85317b1d01..e9ed4e14be 100644
--- a/packages/client/src/components/app/charts/DonutChart.svelte
+++ b/packages/client/src/components/app/charts/DonutChart.svelte
@@ -1,6 +1,6 @@
 <script>
   import ApexChart from "./ApexChart.svelte"
-  import { formatters } from "./utils"
+  import { formatters, parsePalette } from "./utils"
 
   export let title
   export let dataProvider
@@ -26,7 +26,7 @@
     labels,
     colors: palette === "Custom" ? [c1, c2, c3, c4, c5] : [],
     theme: {
-      palette: palette === "Custom" ? null : palette,
+      palette: parsePalette(palette),
     },
     legend: {
       show: legend,
diff --git a/packages/client/src/components/app/charts/HistogramChart.svelte b/packages/client/src/components/app/charts/HistogramChart.svelte
index 294a2b9aed..37c395d45f 100644
--- a/packages/client/src/components/app/charts/HistogramChart.svelte
+++ b/packages/client/src/components/app/charts/HistogramChart.svelte
@@ -1,5 +1,6 @@
 <script>
   import ApexChart from "./ApexChart.svelte"
+  import { parsePalette } from "./utils"
 
   export let dataProvider
   export let valueColumn
@@ -25,7 +26,7 @@
     series,
     colors: palette === "Custom" ? [c1, c2, c3, c4, c5] : [],
     theme: {
-      palette: palette === "Custom" ? null : palette,
+      palette: parsePalette(palette),
     },
     title: {
       text: title,
diff --git a/packages/client/src/components/app/charts/LineChart.svelte b/packages/client/src/components/app/charts/LineChart.svelte
index b1325950ab..445695cd35 100644
--- a/packages/client/src/components/app/charts/LineChart.svelte
+++ b/packages/client/src/components/app/charts/LineChart.svelte
@@ -1,6 +1,6 @@
 <script>
   import ApexChart from "./ApexChart.svelte"
-  import { formatters } from "./utils"
+  import { formatters, parsePalette } from "./utils"
 
   export let title
   export let dataProvider
@@ -35,7 +35,7 @@
     },
     colors: palette === "Custom" ? [c1, c2, c3, c4, c5] : [],
     theme: {
-      palette: palette === "Custom" ? null : palette,
+      palette: parsePalette(palette),
     },
     legend: {
       show: legend,
diff --git a/packages/client/src/components/app/charts/PieChart.svelte b/packages/client/src/components/app/charts/PieChart.svelte
index 413bf93b54..ed5413e0d9 100644
--- a/packages/client/src/components/app/charts/PieChart.svelte
+++ b/packages/client/src/components/app/charts/PieChart.svelte
@@ -1,6 +1,6 @@
 <script>
   import ApexChart from "./ApexChart.svelte"
-  import { formatters } from "./utils"
+  import { formatters, parsePalette } from "./utils"
 
   export let title
   export let dataProvider
@@ -26,7 +26,7 @@
     labels,
     colors: palette === "Custom" ? [c1, c2, c3, c4, c5] : [],
     theme: {
-      palette: palette === "Custom" ? null : palette,
+      palette: parsePalette(palette),
     },
     legend: {
       show: legend,
diff --git a/packages/client/src/components/app/charts/utils.js b/packages/client/src/components/app/charts/utils.js
index f481c99bc0..a2ecc14819 100644
--- a/packages/client/src/components/app/charts/utils.js
+++ b/packages/client/src/components/app/charts/utils.js
@@ -5,6 +5,17 @@ export const formatters = {
   ["Datetime"]: val => new Date(val).toLocaleString(),
 }
 
+export const parsePalette = (paletteName) => {
+  if (paletteName === "Custom") {
+    // return null in this case so that the palette option doesn't get consumed by Apex Charts
+    return null;
+  }
+
+  const [_, number] = paletteName.split(" ");
+
+  return `pallete${number}`
+}
+
 // Deep clone which copies function references
 export const cloneDeep = (value) => {
   const typesToNaiveCopy = ["string", "boolean", "number", "function", "symbol"]

From 2e238f814c5c270045215ff129f77f87c3e436e0 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Tue, 14 May 2024 11:17:54 +0100
Subject: [PATCH 118/123] fix palette stuff

---
 packages/client/manifest.json                    | 16 ++++++++--------
 packages/client/package.json                     |  1 -
 .../src/components/app/charts/AreaChart.svelte   | 10 +++++-----
 .../src/components/app/charts/BarChart.svelte    | 10 +++++-----
 .../app/charts/CandleStickChart.svelte           |  4 ++--
 .../src/components/app/charts/LineChart.svelte   | 10 +++++-----
 .../client/src/components/app/charts/utils.js    |  2 +-
 7 files changed, 26 insertions(+), 27 deletions(-)

diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 12d52a2547..779142abb0 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -1685,7 +1685,7 @@
       {
         "type": "select",
         "label": "Format",
-        "key": "valueUnits",
+        "key": "yAxisUnits",
         "options": ["Default", "Thousands", "Millions"],
         "defaultValue": "Default"
       },
@@ -1854,7 +1854,7 @@
       {
         "type": "select",
         "label": "Format",
-        "key": "valueUnits",
+        "key": "yAxisUnits",
         "options": ["Default", "Thousands", "Millions"],
         "defaultValue": "Default"
       },
@@ -2018,7 +2018,7 @@
       {
         "type": "select",
         "label": "Format",
-        "key": "valueUnits",
+        "key": "yAxisUnits",
         "options": ["Default", "Thousands", "Millions"],
         "defaultValue": "Default"
       },
@@ -2510,7 +2510,7 @@
       {
         "type": "select",
         "label": "Format",
-        "key": "valueUnits",
+        "key": "yAxisUnits",
         "options": ["Default", "Thousands", "Millions"],
         "defaultValue": "Default"
       },
@@ -5476,7 +5476,7 @@
           {
             "type": "select",
             "label": "Format",
-            "key": "valueUnits",
+            "key": "yAxisUnits",
             "options": ["Default", "Thousands", "Millions"],
             "defaultValue": "Default"
           },
@@ -5586,7 +5586,7 @@
           {
             "type": "select",
             "label": "Format",
-            "key": "valueUnits",
+            "key": "yAxisUnits",
             "options": ["Default", "Thousands", "Millions"],
             "defaultValue": "Default"
           },
@@ -5645,7 +5645,7 @@
           {
             "type": "select",
             "label": "Format",
-            "key": "valueUnits",
+            "key": "yAxisUnits",
             "options": ["Default", "Thousands", "Millions"],
             "defaultValue": "Default"
           },
@@ -5752,7 +5752,7 @@
           {
             "type": "select",
             "label": "Format",
-            "key": "valueUnits",
+            "key": "yAxisUnits",
             "options": ["Default", "Thousands", "Millions"],
             "defaultValue": "Default"
           },
diff --git a/packages/client/package.json b/packages/client/package.json
index d8b2fa9447..ca60e82da5 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -40,7 +40,6 @@
     "sanitize-html": "^2.7.0",
     "screenfull": "^6.0.1",
     "shortid": "^2.2.15",
-    "svelte-apexcharts": "^1.0.2",
     "svelte-flatpickr": "^3.3.4",
     "svelte-spa-router": "^4.0.1"
   },
diff --git a/packages/client/src/components/app/charts/AreaChart.svelte b/packages/client/src/components/app/charts/AreaChart.svelte
index 0db493565c..a9a61e59f6 100644
--- a/packages/client/src/components/app/charts/AreaChart.svelte
+++ b/packages/client/src/components/app/charts/AreaChart.svelte
@@ -14,7 +14,7 @@
   export let dataLabels
   export let curve
   export let legend
-  export let valueUnits
+  export let yAxisUnits
   export let palette
   export let c1, c2, c3, c4, c5
 
@@ -30,8 +30,8 @@
     dataProvider?.schema?.[labelColumn]?.type === "datetime"
       ? "datetime"
       : "category"
-  $: xAxisFormatter = getFormatter(labelType, valueUnits, "x")
-  $: yAxisFormatter = getFormatter(labelType, valueUnits, "y")
+  $: xAxisFormatter = getFormatter(labelType, yAxisUnits, "x")
+  $: yAxisFormatter = getFormatter(labelType, yAxisUnits, "y")
   $: fill = getFill(gradient)
 
   $: options = {
@@ -125,7 +125,7 @@
     })
   }
 
-  const getFormatter = (labelType, valueUnits, axis) => {
+  const getFormatter = (labelType, yAxisUnits, axis) => {
     const isLabelAxis = axis === "x"
 
     if (labelType === "datetime" && isLabelAxis) {
@@ -136,7 +136,7 @@
       return formatters["Default"]
     }
 
-    return formatters[valueUnits]
+    return formatters[yAxisUnits]
   }
 
   const getFill = gradient => {
diff --git a/packages/client/src/components/app/charts/BarChart.svelte b/packages/client/src/components/app/charts/BarChart.svelte
index 127cb98e23..aeebfe9461 100644
--- a/packages/client/src/components/app/charts/BarChart.svelte
+++ b/packages/client/src/components/app/charts/BarChart.svelte
@@ -15,7 +15,7 @@
   export let animate
   export let legend
   export let stacked
-  export let valueUnits
+  export let yAxisUnits
   export let palette
   export let c1, c2, c3, c4, c5
   export let horizontal
@@ -27,8 +27,8 @@
     dataProvider?.schema?.[labelColumn]?.type === "datetime"
       ? "datetime"
       : "category"
-  $: xAxisFormatter = getFormatter(labelType, valueUnits, horizontal, "x")
-  $: yAxisFormatter = getFormatter(labelType, valueUnits, horizontal, "y")
+  $: xAxisFormatter = getFormatter(labelType, yAxisUnits, horizontal, "x")
+  $: yAxisFormatter = getFormatter(labelType, yAxisUnits, horizontal, "y")
 
   $: options = {
     series,
@@ -124,7 +124,7 @@
     })
   }
 
-  const getFormatter = (labelType, valueUnits, horizontal, axis) => {
+  const getFormatter = (labelType, yAxisUnits, horizontal, axis) => {
     const isLabelAxis =
       (axis === "y" && horizontal) || (axis === "x" && !horizontal)
     if (labelType === "datetime" && isLabelAxis) {
@@ -135,7 +135,7 @@
       return formatters["Default"]
     }
 
-    return formatters[valueUnits]
+    return formatters[yAxisUnits]
   }
 </script>
 
diff --git a/packages/client/src/components/app/charts/CandleStickChart.svelte b/packages/client/src/components/app/charts/CandleStickChart.svelte
index 8ddb4d4047..61cdef180b 100644
--- a/packages/client/src/components/app/charts/CandleStickChart.svelte
+++ b/packages/client/src/components/app/charts/CandleStickChart.svelte
@@ -14,7 +14,7 @@
   export let height
   export let width
   export let animate
-  export let valueUnits
+  export let yAxisUnits
 
   $: series = getSeries(
     dataProvider,
@@ -55,7 +55,7 @@
     },
     yaxis: {
       labels: {
-        formatter: formatters[valueUnits],
+        formatter: formatters[yAxisUnits],
       },
       title: {
         text: yAxisLabel,
diff --git a/packages/client/src/components/app/charts/LineChart.svelte b/packages/client/src/components/app/charts/LineChart.svelte
index 445695cd35..c2dac189e1 100644
--- a/packages/client/src/components/app/charts/LineChart.svelte
+++ b/packages/client/src/components/app/charts/LineChart.svelte
@@ -14,7 +14,7 @@
   export let dataLabels
   export let curve
   export let legend
-  export let valueUnits
+  export let yAxisUnits
   export let palette
   export let c1, c2, c3, c4, c5
 
@@ -25,8 +25,8 @@
     dataProvider?.schema?.[labelColumn]?.type === "datetime"
       ? "datetime"
       : "category"
-  $: xAxisFormatter = getFormatter(labelType, valueUnits, "x")
-  $: yAxisFormatter = getFormatter(labelType, valueUnits, "y")
+  $: xAxisFormatter = getFormatter(labelType, yAxisUnits, "x")
+  $: yAxisFormatter = getFormatter(labelType, yAxisUnits, "y")
 
   $: options = {
     series,
@@ -117,7 +117,7 @@
     })
   }
 
-  const getFormatter = (labelType, valueUnits, axis) => {
+  const getFormatter = (labelType, yAxisUnits, axis) => {
     const isLabelAxis = axis === "x"
 
     if (labelType === "datetime" && isLabelAxis) {
@@ -128,7 +128,7 @@
       return formatters["Default"]
     }
 
-    return formatters[valueUnits]
+    return formatters[yAxisUnits]
   }
 </script>
 
diff --git a/packages/client/src/components/app/charts/utils.js b/packages/client/src/components/app/charts/utils.js
index a2ecc14819..7f280ce852 100644
--- a/packages/client/src/components/app/charts/utils.js
+++ b/packages/client/src/components/app/charts/utils.js
@@ -13,7 +13,7 @@ export const parsePalette = (paletteName) => {
 
   const [_, number] = paletteName.split(" ");
 
-  return `pallete${number}`
+  return `palette${number}`
 }
 
 // Deep clone which copies function references

From bb69e0c1c9ac82c0b613043faf1db5d5eaa40b36 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Tue, 14 May 2024 11:24:51 +0100
Subject: [PATCH 119/123] linting

---
 .../controls/Explanation/lines/Column.svelte     |  2 +-
 .../typography/DocumentationLink.svelte          | 11 +++++++++--
 packages/builder/src/stores/builder/app.js       |  2 +-
 .../builder/src/stores/builder/components.js     |  2 +-
 .../builder/src/stores/builder/tests/app.test.js |  4 +++-
 .../src/components/app/charts/ApexChart.svelte   |  6 +++++-
 .../client/src/components/app/charts/utils.js    | 12 ++++++------
 .../src/components/app/charts/utils.test.js      | 16 +++++++---------
 8 files changed, 33 insertions(+), 22 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/Explanation/lines/Column.svelte b/packages/builder/src/components/design/settings/controls/Explanation/lines/Column.svelte
index f80c1dbc14..9c3b87f8b9 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/lines/Column.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/lines/Column.svelte
@@ -63,7 +63,7 @@
     return null
   }
 
-  $: docLink = getDocLink(columnType);
+  $: docLink = getDocLink(columnType)
 </script>
 
 <Line noWrap>
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/typography/DocumentationLink.svelte b/packages/builder/src/components/design/settings/controls/Explanation/typography/DocumentationLink.svelte
index 08fa285164..55b9732d4a 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/typography/DocumentationLink.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/typography/DocumentationLink.svelte
@@ -7,7 +7,14 @@
   export let disabled = false
 </script>
 
-<a class:disabled tabindex="0" {href} rel="noopener noreferrer" target="_blank" class="link">
+<a
+  class:disabled
+  tabindex="0"
+  {href}
+  rel="noopener noreferrer"
+  target="_blank"
+  class="link"
+>
   <Icon size="XS" name={icon} />
   <span class="text">
     <slot>
@@ -53,7 +60,7 @@
     color: var(--blue);
   }
 
-  .disabled :global(svg){
+  .disabled :global(svg) {
     color: var(--grey-6);
   }
 </style>
diff --git a/packages/builder/src/stores/builder/app.js b/packages/builder/src/stores/builder/app.js
index 26f223da8e..e57a079185 100644
--- a/packages/builder/src/stores/builder/app.js
+++ b/packages/builder/src/stores/builder/app.js
@@ -83,7 +83,7 @@ export class AppMetaStore extends BudiStore {
   syncClientTypeSupportPresets(typeSupportPresets) {
     this.update(state => ({
       ...state,
-      typeSupportPresets
+      typeSupportPresets,
     }))
   }
 
diff --git a/packages/builder/src/stores/builder/components.js b/packages/builder/src/stores/builder/components.js
index 1b04d6c1bb..59750742ad 100644
--- a/packages/builder/src/stores/builder/components.js
+++ b/packages/builder/src/stores/builder/components.js
@@ -103,7 +103,7 @@ export class ComponentStore extends BudiStore {
     this.update(state => ({
       ...state,
       components,
-      customComponents
+      customComponents,
     }))
 
     // Sync client features to app store
diff --git a/packages/builder/src/stores/builder/tests/app.test.js b/packages/builder/src/stores/builder/tests/app.test.js
index 5cebc34e93..728f472317 100644
--- a/packages/builder/src/stores/builder/tests/app.test.js
+++ b/packages/builder/src/stores/builder/tests/app.test.js
@@ -94,7 +94,9 @@ describe("Application Meta Store", () => {
   it("Sync type support information to state", async ctx => {
     ctx.test.appStore.syncClientTypeSupportPresets({ preset: "information" })
 
-    expect(ctx.test.store.typeSupportPresets).toStrictEqual({ preset: "information" })
+    expect(ctx.test.store.typeSupportPresets).toStrictEqual({
+      preset: "information",
+    })
   })
 
   it("Sync component feature flags to state", async ctx => {
diff --git a/packages/client/src/components/app/charts/ApexChart.svelte b/packages/client/src/components/app/charts/ApexChart.svelte
index 2e1bd6d37b..33e6cdfa80 100644
--- a/packages/client/src/components/app/charts/ApexChart.svelte
+++ b/packages/client/src/components/app/charts/ApexChart.svelte
@@ -55,7 +55,11 @@
 </script>
 
 {#key optionsCopy?.customColor}
-  <div class:hide={noData} use:styleable={$component.styles} bind:this={chartElement} />
+  <div
+    class:hide={noData}
+    use:styleable={$component.styles}
+    bind:this={chartElement}
+  />
   {#if $builderStore.inBuilder && noData}
     <div
       class="component-placeholder"
diff --git a/packages/client/src/components/app/charts/utils.js b/packages/client/src/components/app/charts/utils.js
index 7f280ce852..1aea22c991 100644
--- a/packages/client/src/components/app/charts/utils.js
+++ b/packages/client/src/components/app/charts/utils.js
@@ -5,19 +5,19 @@ export const formatters = {
   ["Datetime"]: val => new Date(val).toLocaleString(),
 }
 
-export const parsePalette = (paletteName) => {
+export const parsePalette = paletteName => {
   if (paletteName === "Custom") {
     // return null in this case so that the palette option doesn't get consumed by Apex Charts
-    return null;
+    return null
   }
 
-  const [_, number] = paletteName.split(" ");
+  const [_, number] = paletteName.split(" ")
 
   return `palette${number}`
 }
 
 // Deep clone which copies function references
-export const cloneDeep = (value) => {
+export const cloneDeep = value => {
   const typesToNaiveCopy = ["string", "boolean", "number", "function", "symbol"]
 
   if (value === null) {
@@ -29,7 +29,7 @@ export const cloneDeep = (value) => {
   }
 
   if (typesToNaiveCopy.includes(typeof value)) {
-    return value;
+    return value
   }
 
   if (Array.isArray(value)) {
@@ -44,7 +44,7 @@ export const cloneDeep = (value) => {
       cloneObject[key] = cloneDeep(childValue)
     })
 
-    return cloneObject;
+    return cloneObject
   }
 
   throw `Unsupported value: "${value}" of type: "${typeof value}"`
diff --git a/packages/client/src/components/app/charts/utils.test.js b/packages/client/src/components/app/charts/utils.test.js
index e74aaa93b0..1b065e2fae 100644
--- a/packages/client/src/components/app/charts/utils.test.js
+++ b/packages/client/src/components/app/charts/utils.test.js
@@ -1,14 +1,12 @@
 import { expect, describe, it, vi } from "vitest"
-import {
-  cloneDeep,
-} from "./utils"
+import { cloneDeep } from "./utils"
 
 describe("utils", () => {
-  let context;
+  let context
 
   beforeEach(() => {
     vi.clearAllMocks()
-    context = {};
+    context = {}
   })
 
   describe("cloneDeep", () => {
@@ -20,14 +18,14 @@ describe("utils", () => {
         num: 123,
         bool: true,
         sym: Symbol("test"),
-        func: () => "some value"
+        func: () => "some value",
       }
-      context.cloneValue = cloneDeep(context.value);
-    });
+      context.cloneValue = cloneDeep(context.value)
+    })
 
     it("to clone the object and not copy object references", () => {
       expect(context.cloneValue.obj.one).toEqual(1)
       expect(context.cloneValue.obj.two).toEqual(2)
-    });
+    })
   })
 })

From d02c04ebbecf81e5edf8ff0efa6e6ec8f19d9000 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Tue, 14 May 2024 13:26:04 +0100
Subject: [PATCH 120/123] change explanation modal colors

---
 .../design/settings/controls/Explanation/Explanation.svelte     | 2 +-
 .../design/settings/controls/Explanation/typography/Line.svelte | 1 -
 packages/client/src/components/app/charts/DonutChart.svelte     | 2 +-
 packages/client/src/components/app/charts/PieChart.svelte       | 2 +-
 4 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/Explanation/Explanation.svelte b/packages/builder/src/components/design/settings/controls/Explanation/Explanation.svelte
index f65673d788..d32911ae0e 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/Explanation.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/Explanation.svelte
@@ -94,7 +94,7 @@
 <style>
   .tooltipContents {
     max-width: 450px;
-    background-color: var(--background-alt);
+    background-color: var(--spectrum-global-color-gray-100);
     display: block;
     padding: 20px 16px 10px;
     border-radius: 5px;
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/typography/Line.svelte b/packages/builder/src/components/design/settings/controls/Explanation/typography/Line.svelte
index 75575c94aa..5d28ba0423 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/typography/Line.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/typography/Line.svelte
@@ -11,7 +11,6 @@
 
 <style>
   .line {
-    background-color: var(--background-alt);
     color: var(--ink);
     align-items: flex-start;
     display: flex;
diff --git a/packages/client/src/components/app/charts/DonutChart.svelte b/packages/client/src/components/app/charts/DonutChart.svelte
index e9ed4e14be..dad9edfd67 100644
--- a/packages/client/src/components/app/charts/DonutChart.svelte
+++ b/packages/client/src/components/app/charts/DonutChart.svelte
@@ -30,7 +30,7 @@
     },
     legend: {
       show: legend,
-      position: "top",
+      position: "right",
       horizontalAlign: "right",
       showForSingleSeries: true,
       showForNullSeries: true,
diff --git a/packages/client/src/components/app/charts/PieChart.svelte b/packages/client/src/components/app/charts/PieChart.svelte
index ed5413e0d9..3250a2ca95 100644
--- a/packages/client/src/components/app/charts/PieChart.svelte
+++ b/packages/client/src/components/app/charts/PieChart.svelte
@@ -30,7 +30,7 @@
     },
     legend: {
       show: legend,
-      position: "top",
+      position: "right",
       horizontalAlign: "right",
       showForSingleSeries: true,
       showForNullSeries: true,

From a5da0912031ead49f38042218941ae81c055e6cd Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Tue, 14 May 2024 23:05:04 +0100
Subject: [PATCH 121/123] linting

---
 packages/bbui/src/Tooltip/Context.svelte                  | 2 +-
 .../settings/controls/Explanation/Explanation.svelte      | 1 -
 .../client/src/components/app/blocks/ChartBlock.svelte    | 8 +++++---
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/bbui/src/Tooltip/Context.svelte b/packages/bbui/src/Tooltip/Context.svelte
index 0a0a48172b..84d6fbbb73 100644
--- a/packages/bbui/src/Tooltip/Context.svelte
+++ b/packages/bbui/src/Tooltip/Context.svelte
@@ -59,7 +59,7 @@
 
 <style>
   .wrapper {
-    background-color: var(--background-alt);
+    background-color: var(--spectrum-global-color-gray-100);
     box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.42);
     opacity: 0;
     overflow: hidden;
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/Explanation.svelte b/packages/builder/src/components/design/settings/controls/Explanation/Explanation.svelte
index d32911ae0e..bc45e410c9 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/Explanation.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/Explanation.svelte
@@ -94,7 +94,6 @@
 <style>
   .tooltipContents {
     max-width: 450px;
-    background-color: var(--spectrum-global-color-gray-100);
     display: block;
     padding: 20px 16px 10px;
     border-radius: 5px;
diff --git a/packages/client/src/components/app/blocks/ChartBlock.svelte b/packages/client/src/components/app/blocks/ChartBlock.svelte
index 433d163909..ddfc7b522b 100644
--- a/packages/client/src/components/app/blocks/ChartBlock.svelte
+++ b/packages/client/src/components/app/blocks/ChartBlock.svelte
@@ -51,8 +51,6 @@
   export let bucketCount
 
   let dataProviderId
-
-  $: colors = c1 && c2 && c3 && c4 && c5 ? [c1, c2, c3, c4, c5] : null
 </script>
 
 <Block>
@@ -84,7 +82,6 @@
           dataLabels,
           legend,
           animate,
-          ...colors,
           valueUnits,
           yAxisLabel,
           xAxisLabel,
@@ -98,6 +95,11 @@
           lowColumn,
           dateColumn,
           bucketCount,
+          c1,
+          c2,
+          c3,
+          c4,
+          c5,
         }}
       />
     {/if}

From 79fa40f08a6db2129ece2289558defec5fc6c6a9 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Tue, 21 May 2024 10:02:44 +0100
Subject: [PATCH 122/123] Removed subtype check as it was causing the builder
 to crash

---
 packages/builder/src/components/backend/DataTable/formula.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/components/backend/DataTable/formula.js b/packages/builder/src/components/backend/DataTable/formula.js
index c59fb9c536..b339729391 100644
--- a/packages/builder/src/components/backend/DataTable/formula.js
+++ b/packages/builder/src/components/backend/DataTable/formula.js
@@ -55,7 +55,7 @@ export function getBindings({
       )
     }
     const field = Object.values(FIELDS).find(
-      field => field.type === schema.type && field.subtype === schema.subtype
+      field => field.type === schema.type
     )
 
     const label = path == null ? column : `${path}.0.${column}`

From c3948262ba03d7c89e5a437599d4792ebf64cc29 Mon Sep 17 00:00:00 2001
From: Gerard Burns <Ghrehh@users.noreply.github.com>
Date: Tue, 21 May 2024 10:22:57 +0100
Subject: [PATCH 123/123] Make Builder App Section Navigation Tabs Anchors
 (#13626)

* wip

* linting

* add dedicated anchor handler for safety

* fixes

* fixes

* fix meta key clicks

* lint

* lint
---
 packages/bbui/src/Tabs/Tab.svelte             |  95 +++--
 .../builder/app/[application]/_layout.svelte  |  24 +-
 yarn.lock                                     | 340 ++++++++++++++++++
 3 files changed, 422 insertions(+), 37 deletions(-)

diff --git a/packages/bbui/src/Tabs/Tab.svelte b/packages/bbui/src/Tabs/Tab.svelte
index 627d7e525a..3ae6adfac4 100644
--- a/packages/bbui/src/Tabs/Tab.svelte
+++ b/packages/bbui/src/Tabs/Tab.svelte
@@ -1,11 +1,14 @@
 <script>
-  import { getContext, onDestroy } from "svelte"
+  import { getContext, onDestroy, createEventDispatcher } from "svelte"
   import Portal from "svelte-portal"
 
   export let title
   export let icon = ""
   export let id
+  export let href = "#"
+  export let link = false
 
+  const dispatch = createEventDispatcher()
   let selected = getContext("tab")
   let observer
   let ref
@@ -26,6 +29,18 @@
     }
   }
 
+  const onAnchorClick = e => {
+    if (e.metaKey || e.shiftKey || e.altKey || e.ctrlKey) return
+
+    e.preventDefault()
+    $selected = {
+      ...$selected,
+      title,
+      info: ref.getBoundingClientRect(),
+    }
+    dispatch("click")
+  }
+
   const onClick = () => {
     $selected = {
       ...$selected,
@@ -51,31 +66,56 @@
   onDestroy(stopObserving)
 </script>
 
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-<div
-  {id}
-  bind:this={ref}
-  on:click={onClick}
-  on:click
-  class="spectrum-Tabs-item"
-  class:is-selected={isSelected}
-  class:emphasized={isSelected && $selected.emphasized}
-  tabindex="0"
->
-  {#if icon}
-    <svg
-      class="spectrum-Icon spectrum-Icon--sizeM"
-      focusable="false"
-      aria-hidden="true"
-      aria-label="Folder"
-    >
-      <use xlink:href="#spectrum-icon-18-{icon}" />
-    </svg>
-  {/if}
-  <span class="spectrum-Tabs-itemLabel">{title}</span>
-</div>
+{#if link}
+  <a
+    {href}
+    {id}
+    bind:this={ref}
+    on:click={onAnchorClick}
+    class="spectrum-Tabs-item link"
+    class:is-selected={isSelected}
+    class:emphasized={isSelected && $selected.emphasized}
+    tabindex="0"
+  >
+    {#if icon}
+      <svg
+        class="spectrum-Icon spectrum-Icon--sizeM"
+        focusable="false"
+        aria-hidden="true"
+        aria-label="Folder"
+      >
+        <use xlink:href="#spectrum-icon-18-{icon}" />
+      </svg>
+    {/if}
+    <span class="spectrum-Tabs-itemLabel">{title}</span>
+  </a>
+{:else}
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
+  <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+  <div
+    {id}
+    bind:this={ref}
+    on:click={onClick}
+    on:click
+    class="spectrum-Tabs-item"
+    class:is-selected={isSelected}
+    class:emphasized={isSelected && $selected.emphasized}
+    tabindex="0"
+  >
+    {#if icon}
+      <svg
+        class="spectrum-Icon spectrum-Icon--sizeM"
+        focusable="false"
+        aria-hidden="true"
+        aria-label="Folder"
+      >
+        <use xlink:href="#spectrum-icon-18-{icon}" />
+      </svg>
+    {/if}
+    <span class="spectrum-Tabs-itemLabel">{title}</span>
+  </div>
+{/if}
 
 {#if isSelected}
   <Portal target=".spectrum-Tabs-content-{$selected.id}">
@@ -94,4 +134,7 @@
   .spectrum-Tabs-item:hover {
     color: var(--spectrum-global-color-gray-900);
   }
+  .link {
+    user-select: none;
+  }
 </style>
diff --git a/packages/builder/src/pages/builder/app/[application]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/_layout.svelte
index 6094c93a26..cd62a97340 100644
--- a/packages/builder/src/pages/builder/app/[application]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/_layout.svelte
@@ -21,7 +21,7 @@
   } from "@budibase/bbui"
   import AppActions from "components/deploy/AppActions.svelte"
   import { API } from "api"
-  import { isActive, goto, layout, redirect } from "@roxi/routify"
+  import { isActive, url, goto, layout, redirect } from "@roxi/routify"
   import { capitalise } from "helpers"
   import { onMount, onDestroy } from "svelte"
   import VerificationPromptBanner from "components/common/VerificationPromptBanner.svelte"
@@ -69,7 +69,7 @@
   // e.g. if one of your screens is selected on front end, then
   // you browse to backend, when you click frontend, you will be
   // brought back to the same screen.
-  const topItemNavigate = path => () => {
+  const topItemNavigate = path => {
     const activeTopNav = $layout.children.find(c => $isActive(c.path))
     if (activeTopNav) {
       builderStore.setPreviousTopNavPath(
@@ -136,21 +136,18 @@
   <div class="top-nav">
     {#if $appStore.initialised}
       <div class="topleftnav">
-        <span class="back-to-apps">
-          <Icon
-            size="S"
-            hoverable
-            name="BackAndroid"
-            on:click={() => $goto("../../portal/apps")}
-          />
-        </span>
+        <a href={$url("../../portal/apps")} class="linkWrapper back-to-apps">
+          <Icon size="S" hoverable name="BackAndroid" />
+        </a>
         <Tabs {selected} size="M">
           {#each $layout.children as { path, title }}
             <TourWrap stepKeys={[`builder-${title}-section`]}>
               <Tab
+                link
+                href={$url(path)}
                 quiet
                 selected={$isActive(path)}
-                on:click={topItemNavigate(path)}
+                on:click={() => topItemNavigate(path)}
                 title={capitalise(title)}
                 id={`builder-${title}-tab`}
               />
@@ -201,6 +198,11 @@
 <EnterpriseBasicTrialModal />
 
 <style>
+  .linkWrapper {
+    text-decoration: none;
+    color: inherit;
+  }
+
   .back-to-apps {
     display: contents;
   }
diff --git a/yarn.lock b/yarn.lock
index f26b25c6aa..9241887433 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2499,11 +2499,31 @@
     minimatch "^3.1.2"
     strip-json-comments "^3.1.1"
 
+"@eslint/eslintrc@^2.1.4":
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-2.1.4.tgz#388a269f0f25c1b6adc317b5a2c55714894c70ad"
+  integrity sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==
+  dependencies:
+    ajv "^6.12.4"
+    debug "^4.3.2"
+    espree "^9.6.0"
+    globals "^13.19.0"
+    ignore "^5.2.0"
+    import-fresh "^3.2.1"
+    js-yaml "^4.1.0"
+    minimatch "^3.1.2"
+    strip-json-comments "^3.1.1"
+
 "@eslint/js@8.52.0":
   version "8.52.0"
   resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.52.0.tgz#78fe5f117840f69dc4a353adf9b9cd926353378c"
   integrity sha512-mjZVbpaeMZludF2fsWLD0Z9gCref1Tk4i9+wddjRvpUNqqcndPkBD09N/Mapey0b3jaXbLm2kICwFv2E64QinA==
 
+"@eslint/js@8.57.0":
+  version "8.57.0"
+  resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.57.0.tgz#a5417ae8427873f1dd08b70b3574b453e67b5f7f"
+  integrity sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==
+
 "@fastify/busboy@^2.0.0":
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/@fastify/busboy/-/busboy-2.1.0.tgz#0709e9f4cb252351c609c6e6d8d6779a8d25edff"
@@ -2676,6 +2696,15 @@
     debug "^4.1.1"
     minimatch "^3.0.5"
 
+"@humanwhocodes/config-array@^0.11.14":
+  version "0.11.14"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.14.tgz#d78e481a039f7566ecc9660b4ea7fe6b1fec442b"
+  integrity sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==
+  dependencies:
+    "@humanwhocodes/object-schema" "^2.0.2"
+    debug "^4.3.1"
+    minimatch "^3.0.5"
+
 "@humanwhocodes/module-importer@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz#af5b2691a22b44be847b0ca81641c5fb6ad0172c"
@@ -2686,6 +2715,11 @@
   resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-2.0.1.tgz#e5211452df060fa8522b55c7b3c0c4d1981cb044"
   integrity sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==
 
+"@humanwhocodes/object-schema@^2.0.2":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz#4a2868d75d6d6963e423bcf90b7fd1be343409d3"
+  integrity sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==
+
 "@hutson/parse-repository-url@^3.0.0":
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/@hutson/parse-repository-url/-/parse-repository-url-3.0.2.tgz#98c23c950a3d9b6c8f0daed06da6c3af06981340"
@@ -3216,16 +3250,35 @@
     "@jridgewell/sourcemap-codec" "^1.4.10"
     "@jridgewell/trace-mapping" "^0.3.9"
 
+"@jridgewell/gen-mapping@^0.3.5":
+  version "0.3.5"
+  resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz#dcce6aff74bdf6dad1a95802b69b04a2fcb1fb36"
+  integrity sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==
+  dependencies:
+    "@jridgewell/set-array" "^1.2.1"
+    "@jridgewell/sourcemap-codec" "^1.4.10"
+    "@jridgewell/trace-mapping" "^0.3.24"
+
 "@jridgewell/resolve-uri@3.1.0", "@jridgewell/resolve-uri@^3.0.3":
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz#2203b118c157721addfe69d47b70465463066d78"
   integrity sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==
 
+"@jridgewell/resolve-uri@^3.1.0":
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz#7a0ee601f60f99a20c7c7c5ff0c80388c1189bd6"
+  integrity sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==
+
 "@jridgewell/set-array@^1.0.1":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.1.2.tgz#7c6cf998d6d20b914c0a55a91ae928ff25965e72"
   integrity sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==
 
+"@jridgewell/set-array@^1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.2.1.tgz#558fb6472ed16a4c850b889530e6b36438c49280"
+  integrity sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==
+
 "@jridgewell/source-map@^0.3.2":
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/@jridgewell/source-map/-/source-map-0.3.2.tgz#f45351aaed4527a298512ec72f81040c998580fb"
@@ -3234,6 +3287,14 @@
     "@jridgewell/gen-mapping" "^0.3.0"
     "@jridgewell/trace-mapping" "^0.3.9"
 
+"@jridgewell/source-map@^0.3.3":
+  version "0.3.6"
+  resolved "https://registry.yarnpkg.com/@jridgewell/source-map/-/source-map-0.3.6.tgz#9d71ca886e32502eb9362c9a74a46787c36df81a"
+  integrity sha512-1ZJTZebgqllO79ue2bm3rIGud/bOe0pP5BjSRCRxxYkEZS8STV7zN84UBbiYu7jy+eCKSnVIUgoWWE/tt+shMQ==
+  dependencies:
+    "@jridgewell/gen-mapping" "^0.3.5"
+    "@jridgewell/trace-mapping" "^0.3.25"
+
 "@jridgewell/sourcemap-codec@1.4.14":
   version "1.4.14"
   resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz#add4c98d341472a289190b424efbdb096991bb24"
@@ -3260,6 +3321,14 @@
     "@jridgewell/resolve-uri" "3.1.0"
     "@jridgewell/sourcemap-codec" "1.4.14"
 
+"@jridgewell/trace-mapping@^0.3.24", "@jridgewell/trace-mapping@^0.3.25":
+  version "0.3.25"
+  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz#15f190e98895f3fc23276ee14bc76b675c2e50f0"
+  integrity sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==
+  dependencies:
+    "@jridgewell/resolve-uri" "^3.1.0"
+    "@jridgewell/sourcemap-codec" "^1.4.14"
+
 "@js-joda/core@^5.5.3":
   version "5.6.1"
   resolved "https://registry.yarnpkg.com/@js-joda/core/-/core-5.6.1.tgz#03e2453d877b61c3f593cf031fd18b375bd548b6"
@@ -3926,6 +3995,15 @@
     "@rollup/pluginutils" "^5.0.1"
     magic-string "^0.30.3"
 
+"@rollup/plugin-terser@^0.4.4":
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-terser/-/plugin-terser-0.4.4.tgz#15dffdb3f73f121aa4fbb37e7ca6be9aeea91962"
+  integrity sha512-XHeJC5Bgvs8LfukDwWZp7yeqin6ns8RTl2B9avbejt6tZqsqvVoWI7ZTQrcNsfKEDWBTnTxM8nMDkO2IFFbd0A==
+  dependencies:
+    serialize-javascript "^6.0.1"
+    smob "^1.0.0"
+    terser "^5.17.4"
+
 "@rollup/plugin-typescript@8.3.0":
   version "8.3.0"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-typescript/-/plugin-typescript-8.3.0.tgz#bc1077fa5897b980fc27e376c4e377882c63e68b"
@@ -3965,66 +4043,146 @@
   resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.12.0.tgz#38c3abd1955a3c21d492af6b1a1dca4bb1d894d6"
   integrity sha512-+ac02NL/2TCKRrJu2wffk1kZ+RyqxVUlbjSagNgPm94frxtr+XDL12E5Ll1enWskLrtrZ2r8L3wED1orIibV/w==
 
+"@rollup/rollup-android-arm-eabi@4.17.2":
+  version "4.17.2"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.17.2.tgz#1a32112822660ee104c5dd3a7c595e26100d4c2d"
+  integrity sha512-NM0jFxY8bB8QLkoKxIQeObCaDlJKewVlIEkuyYKm5An1tdVZ966w2+MPQ2l8LBZLjR+SgyV+nRkTIunzOYBMLQ==
+
 "@rollup/rollup-android-arm64@4.12.0":
   version "4.12.0"
   resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.12.0.tgz#3822e929f415627609e53b11cec9a4be806de0e2"
   integrity sha512-OBqcX2BMe6nvjQ0Nyp7cC90cnumt8PXmO7Dp3gfAju/6YwG0Tj74z1vKrfRz7qAv23nBcYM8BCbhrsWqO7PzQQ==
 
+"@rollup/rollup-android-arm64@4.17.2":
+  version "4.17.2"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.17.2.tgz#5aeef206d65ff4db423f3a93f71af91b28662c5b"
+  integrity sha512-yeX/Usk7daNIVwkq2uGoq2BYJKZY1JfyLTaHO/jaiSwi/lsf8fTFoQW/n6IdAsx5tx+iotu2zCJwz8MxI6D/Bw==
+
 "@rollup/rollup-darwin-arm64@4.12.0":
   version "4.12.0"
   resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.12.0.tgz#6c082de71f481f57df6cfa3701ab2a7afde96f69"
   integrity sha512-X64tZd8dRE/QTrBIEs63kaOBG0b5GVEd3ccoLtyf6IdXtHdh8h+I56C2yC3PtC9Ucnv0CpNFJLqKFVgCYe0lOQ==
 
+"@rollup/rollup-darwin-arm64@4.17.2":
+  version "4.17.2"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.17.2.tgz#6b66aaf003c70454c292cd5f0236ebdc6ffbdf1a"
+  integrity sha512-kcMLpE6uCwls023+kknm71ug7MZOrtXo+y5p/tsg6jltpDtgQY1Eq5sGfHcQfb+lfuKwhBmEURDga9N0ol4YPw==
+
 "@rollup/rollup-darwin-x64@4.12.0":
   version "4.12.0"
   resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.12.0.tgz#c34ca0d31f3c46a22c9afa0e944403eea0edcfd8"
   integrity sha512-cc71KUZoVbUJmGP2cOuiZ9HSOP14AzBAThn3OU+9LcA1+IUqswJyR1cAJj3Mg55HbjZP6OLAIscbQsQLrpgTOg==
 
+"@rollup/rollup-darwin-x64@4.17.2":
+  version "4.17.2"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.17.2.tgz#f64fc51ed12b19f883131ccbcea59fc68cbd6c0b"
+  integrity sha512-AtKwD0VEx0zWkL0ZjixEkp5tbNLzX+FCqGG1SvOu993HnSz4qDI6S4kGzubrEJAljpVkhRSlg5bzpV//E6ysTQ==
+
 "@rollup/rollup-linux-arm-gnueabihf@4.12.0":
   version "4.12.0"
   resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.12.0.tgz#48e899c1e438629c072889b824a98787a7c2362d"
   integrity sha512-a6w/Y3hyyO6GlpKL2xJ4IOh/7d+APaqLYdMf86xnczU3nurFTaVN9s9jOXQg97BE4nYm/7Ga51rjec5nfRdrvA==
 
+"@rollup/rollup-linux-arm-gnueabihf@4.17.2":
+  version "4.17.2"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.17.2.tgz#1a7641111be67c10111f7122d1e375d1226cbf14"
+  integrity sha512-3reX2fUHqN7sffBNqmEyMQVj/CKhIHZd4y631duy0hZqI8Qoqf6lTtmAKvJFYa6bhU95B1D0WgzHkmTg33In0A==
+
+"@rollup/rollup-linux-arm-musleabihf@4.17.2":
+  version "4.17.2"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.17.2.tgz#c93fd632923e0fee25aacd2ae414288d0b7455bb"
+  integrity sha512-uSqpsp91mheRgw96xtyAGP9FW5ChctTFEoXP0r5FAzj/3ZRv3Uxjtc7taRQSaQM/q85KEKjKsZuiZM3GyUivRg==
+
 "@rollup/rollup-linux-arm64-gnu@4.12.0":
   version "4.12.0"
   resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.12.0.tgz#788c2698a119dc229062d40da6ada8a090a73a68"
   integrity sha512-0fZBq27b+D7Ar5CQMofVN8sggOVhEtzFUwOwPppQt0k+VR+7UHMZZY4y+64WJ06XOhBTKXtQB/Sv0NwQMXyNAA==
 
+"@rollup/rollup-linux-arm64-gnu@4.17.2":
+  version "4.17.2"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.17.2.tgz#fa531425dd21d058a630947527b4612d9d0b4a4a"
+  integrity sha512-EMMPHkiCRtE8Wdk3Qhtciq6BndLtstqZIroHiiGzB3C5LDJmIZcSzVtLRbwuXuUft1Cnv+9fxuDtDxz3k3EW2A==
+
 "@rollup/rollup-linux-arm64-musl@4.12.0":
   version "4.12.0"
   resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.12.0.tgz#3882a4e3a564af9e55804beeb67076857b035ab7"
   integrity sha512-eTvzUS3hhhlgeAv6bfigekzWZjaEX9xP9HhxB0Dvrdbkk5w/b+1Sxct2ZuDxNJKzsRStSq1EaEkVSEe7A7ipgQ==
 
+"@rollup/rollup-linux-arm64-musl@4.17.2":
+  version "4.17.2"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.17.2.tgz#8acc16f095ceea5854caf7b07e73f7d1802ac5af"
+  integrity sha512-NMPylUUZ1i0z/xJUIx6VUhISZDRT+uTWpBcjdv0/zkp7b/bQDF+NfnfdzuTiB1G6HTodgoFa93hp0O1xl+/UbA==
+
+"@rollup/rollup-linux-powerpc64le-gnu@4.17.2":
+  version "4.17.2"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.17.2.tgz#94e69a8499b5cf368911b83a44bb230782aeb571"
+  integrity sha512-T19My13y8uYXPw/L/k0JYaX1fJKFT/PWdXiHr8mTbXWxjVF1t+8Xl31DgBBvEKclw+1b00Chg0hxE2O7bTG7GQ==
+
 "@rollup/rollup-linux-riscv64-gnu@4.12.0":
   version "4.12.0"
   resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.12.0.tgz#0c6ad792e1195c12bfae634425a3d2aa0fe93ab7"
   integrity sha512-ix+qAB9qmrCRiaO71VFfY8rkiAZJL8zQRXveS27HS+pKdjwUfEhqo2+YF2oI+H/22Xsiski+qqwIBxVewLK7sw==
 
+"@rollup/rollup-linux-riscv64-gnu@4.17.2":
+  version "4.17.2"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.17.2.tgz#7ef1c781c7e59e85a6ce261cc95d7f1e0b56db0f"
+  integrity sha512-BOaNfthf3X3fOWAB+IJ9kxTgPmMqPPH5f5k2DcCsRrBIbWnaJCgX2ll77dV1TdSy9SaXTR5iDXRL8n7AnoP5cg==
+
+"@rollup/rollup-linux-s390x-gnu@4.17.2":
+  version "4.17.2"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.17.2.tgz#f15775841c3232fca9b78cd25a7a0512c694b354"
+  integrity sha512-W0UP/x7bnn3xN2eYMql2T/+wpASLE5SjObXILTMPUBDB/Fg/FxC+gX4nvCfPBCbNhz51C+HcqQp2qQ4u25ok6g==
+
 "@rollup/rollup-linux-x64-gnu@4.12.0":
   version "4.12.0"
   resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.12.0.tgz#9d62485ea0f18d8674033b57aa14fb758f6ec6e3"
   integrity sha512-TenQhZVOtw/3qKOPa7d+QgkeM6xY0LtwzR8OplmyL5LrgTWIXpTQg2Q2ycBf8jm+SFW2Wt/DTn1gf7nFp3ssVA==
 
+"@rollup/rollup-linux-x64-gnu@4.17.2":
+  version "4.17.2"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.17.2.tgz#b521d271798d037ad70c9f85dd97d25f8a52e811"
+  integrity sha512-Hy7pLwByUOuyaFC6mAr7m+oMC+V7qyifzs/nW2OJfC8H4hbCzOX07Ov0VFk/zP3kBsELWNFi7rJtgbKYsav9QQ==
+
 "@rollup/rollup-linux-x64-musl@4.12.0":
   version "4.12.0"
   resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.12.0.tgz#50e8167e28b33c977c1f813def2b2074d1435e05"
   integrity sha512-LfFdRhNnW0zdMvdCb5FNuWlls2WbbSridJvxOvYWgSBOYZtgBfW9UGNJG//rwMqTX1xQE9BAodvMH9tAusKDUw==
 
+"@rollup/rollup-linux-x64-musl@4.17.2":
+  version "4.17.2"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.17.2.tgz#9254019cc4baac35800991315d133cc9fd1bf385"
+  integrity sha512-h1+yTWeYbRdAyJ/jMiVw0l6fOOm/0D1vNLui9iPuqgRGnXA0u21gAqOyB5iHjlM9MMfNOm9RHCQ7zLIzT0x11Q==
+
 "@rollup/rollup-win32-arm64-msvc@4.12.0":
   version "4.12.0"
   resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.12.0.tgz#68d233272a2004429124494121a42c4aebdc5b8e"
   integrity sha512-JPDxovheWNp6d7AHCgsUlkuCKvtu3RB55iNEkaQcf0ttsDU/JZF+iQnYcQJSk/7PtT4mjjVG8N1kpwnI9SLYaw==
 
+"@rollup/rollup-win32-arm64-msvc@4.17.2":
+  version "4.17.2"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.17.2.tgz#27f65a89f6f52ee9426ec11e3571038e4671790f"
+  integrity sha512-tmdtXMfKAjy5+IQsVtDiCfqbynAQE/TQRpWdVataHmhMb9DCoJxp9vLcCBjEQWMiUYxO1QprH/HbY9ragCEFLA==
+
 "@rollup/rollup-win32-ia32-msvc@4.12.0":
   version "4.12.0"
   resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.12.0.tgz#366ca62221d1689e3b55a03f4ae12ae9ba595d40"
   integrity sha512-fjtuvMWRGJn1oZacG8IPnzIV6GF2/XG+h71FKn76OYFqySXInJtseAqdprVTDTyqPxQOG9Exak5/E9Z3+EJ8ZA==
 
+"@rollup/rollup-win32-ia32-msvc@4.17.2":
+  version "4.17.2"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.17.2.tgz#a2fbf8246ed0bb014f078ca34ae6b377a90cb411"
+  integrity sha512-7II/QCSTAHuE5vdZaQEwJq2ZACkBpQDOmQsE6D6XUbnBHW8IAhm4eTufL6msLJorzrHDFv3CF8oCA/hSIRuZeQ==
+
 "@rollup/rollup-win32-x64-msvc@4.12.0":
   version "4.12.0"
   resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.12.0.tgz#9ffdf9ed133a7464f4ae187eb9e1294413fab235"
   integrity sha512-ZYmr5mS2wd4Dew/JjT0Fqi2NPB/ZhZ2VvPp7SmvPZb4Y1CG/LRcS6tcRo2cYU7zLK5A7cdbhWnnWmUjoI4qapg==
 
+"@rollup/rollup-win32-x64-msvc@4.17.2":
+  version "4.17.2"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.17.2.tgz#5a2d08b81e8064b34242d5cc9973ef8dd1e60503"
+  integrity sha512-TGGO7v7qOq4CYmSBVEYpI1Y5xDuCEnbVC5Vth8mOsW0gDSzxNrVERPc790IGHsrT2dQSimgMr9Ub3Y1Jci5/8w==
+
 "@roxi/routify@2.18.0":
   version "2.18.0"
   resolved "https://registry.yarnpkg.com/@roxi/routify/-/routify-2.18.0.tgz#8f88bedd936312d0dbe44cbc11ab179b1f938ec2"
@@ -6951,6 +7109,18 @@ atomic-sleep@^1.0.0:
   resolved "https://registry.yarnpkg.com/atomic-sleep/-/atomic-sleep-1.0.0.tgz#eb85b77a601fc932cfe432c5acd364a9e2c9075b"
   integrity sha512-kNOjDqAh7px0XWNI+4QbzoiR/nTkHAWNud2uvnJquD1/x5a7EQZMJT0AczqK0Qn67oY/TTQ1LbUKajZpp3I9tQ==
 
+atrament@^4.3.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/atrament/-/atrament-4.4.0.tgz#01898c90d08941b0d64494f13a52f79e0c0ce5d1"
+  integrity sha512-kUlJvSrr8QF4eSQzkkBE77FsGUWXIKf1Zl0qv7BWki8B5vPYMVKDn+a8ayPqTX9IvJx6466uLnYFIksX91kFzw==
+  dependencies:
+    "@rollup/plugin-terser" "^0.4.4"
+    eslint "^8.56.0"
+    eslint-config-airbnb-base "^15.0.0"
+    eslint-plugin-import "^2.26.0"
+    rollup "^4.9.4"
+    rollup-plugin-web-worker-loader "^1.6.1"
+
 available-typed-arrays@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz#92f95616501069d07d10edb2fc37d3e1c65123b7"
@@ -8375,6 +8545,11 @@ configstore@^5.0.1:
     write-file-atomic "^3.0.0"
     xdg-basedir "^4.0.0"
 
+confusing-browser-globals@^1.0.10:
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/confusing-browser-globals/-/confusing-browser-globals-1.0.11.tgz#ae40e9b57cdd3915408a2805ebd3a5585608dc81"
+  integrity sha512-JsPKdmh8ZkmnHxDk55FZ1TqVLvEQTvoByJZRN9jzI0UjxK/QgAmsphz7PGtqgPieQZ/CQcHWXCR7ATDNhGe+YA==
+
 console-control-strings@^1.0.0, console-control-strings@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e"
@@ -10031,6 +10206,13 @@ es-get-iterator@^1.1.2:
     isarray "^2.0.5"
     stop-iteration-iterator "^1.0.0"
 
+es-object-atoms@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/es-object-atoms/-/es-object-atoms-1.0.0.tgz#ddb55cd47ac2e240701260bc2a8e31ecb643d941"
+  integrity sha512-MZ4iQ6JwHOBQjahnjwaC1ZtIBH+2ohjamzAO3oaHcXYup7qxjF2fixyH+Q71voWHeOkI2q/TnJao/KfXYIZWbw==
+  dependencies:
+    es-errors "^1.3.0"
+
 es-set-tostringtag@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/es-set-tostringtag/-/es-set-tostringtag-2.0.1.tgz#338d502f6f674301d710b80c8592de8a15f09cd8"
@@ -10170,6 +10352,16 @@ eslint-compat-utils@^0.1.2:
   resolved "https://registry.yarnpkg.com/eslint-compat-utils/-/eslint-compat-utils-0.1.2.tgz#f45e3b5ced4c746c127cf724fb074cd4e730d653"
   integrity sha512-Jia4JDldWnFNIru1Ehx1H5s9/yxiRHY/TimCuUc0jNexew3cF1gI6CYZil1ociakfWO3rRqFjl1mskBblB3RYg==
 
+eslint-config-airbnb-base@^15.0.0:
+  version "15.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-airbnb-base/-/eslint-config-airbnb-base-15.0.0.tgz#6b09add90ac79c2f8d723a2580e07f3925afd236"
+  integrity sha512-xaX3z4ZZIcFLvh2oUNvcX5oEofXda7giYmuplVxoOg5A7EXJMrUyqRgR+mhDhPK8LZ4PttFOBvCYDbX3sUoUig==
+  dependencies:
+    confusing-browser-globals "^1.0.10"
+    object.assign "^4.1.2"
+    object.entries "^1.1.5"
+    semver "^6.3.0"
+
 eslint-import-resolver-node@^0.3.9:
   version "0.3.9"
   resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.9.tgz#d4eaac52b8a2e7c3cd1903eb00f7e053356118ac"
@@ -10186,6 +10378,29 @@ eslint-module-utils@^2.8.0:
   dependencies:
     debug "^3.2.7"
 
+eslint-plugin-import@^2.26.0:
+  version "2.29.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.29.1.tgz#d45b37b5ef5901d639c15270d74d46d161150643"
+  integrity sha512-BbPC0cuExzhiMo4Ff1BTVwHpjjv28C5R+btTOGaCRC7UEz801up0JadwkeSk5Ued6TG34uaczuVuH6qyy5YUxw==
+  dependencies:
+    array-includes "^3.1.7"
+    array.prototype.findlastindex "^1.2.3"
+    array.prototype.flat "^1.3.2"
+    array.prototype.flatmap "^1.3.2"
+    debug "^3.2.7"
+    doctrine "^2.1.0"
+    eslint-import-resolver-node "^0.3.9"
+    eslint-module-utils "^2.8.0"
+    hasown "^2.0.0"
+    is-core-module "^2.13.1"
+    is-glob "^4.0.3"
+    minimatch "^3.1.2"
+    object.fromentries "^2.0.7"
+    object.groupby "^1.0.1"
+    object.values "^1.1.7"
+    semver "^6.3.1"
+    tsconfig-paths "^3.15.0"
+
 eslint-plugin-import@^2.29.0:
   version "2.29.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.29.0.tgz#8133232e4329ee344f2f612885ac3073b0b7e155"
@@ -10309,6 +10524,50 @@ eslint@^8.52.0:
     strip-ansi "^6.0.1"
     text-table "^0.2.0"
 
+eslint@^8.56.0:
+  version "8.57.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.57.0.tgz#c786a6fd0e0b68941aaf624596fb987089195668"
+  integrity sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==
+  dependencies:
+    "@eslint-community/eslint-utils" "^4.2.0"
+    "@eslint-community/regexpp" "^4.6.1"
+    "@eslint/eslintrc" "^2.1.4"
+    "@eslint/js" "8.57.0"
+    "@humanwhocodes/config-array" "^0.11.14"
+    "@humanwhocodes/module-importer" "^1.0.1"
+    "@nodelib/fs.walk" "^1.2.8"
+    "@ungap/structured-clone" "^1.2.0"
+    ajv "^6.12.4"
+    chalk "^4.0.0"
+    cross-spawn "^7.0.2"
+    debug "^4.3.2"
+    doctrine "^3.0.0"
+    escape-string-regexp "^4.0.0"
+    eslint-scope "^7.2.2"
+    eslint-visitor-keys "^3.4.3"
+    espree "^9.6.1"
+    esquery "^1.4.2"
+    esutils "^2.0.2"
+    fast-deep-equal "^3.1.3"
+    file-entry-cache "^6.0.1"
+    find-up "^5.0.0"
+    glob-parent "^6.0.2"
+    globals "^13.19.0"
+    graphemer "^1.4.0"
+    ignore "^5.2.0"
+    imurmurhash "^0.1.4"
+    is-glob "^4.0.0"
+    is-path-inside "^3.0.3"
+    js-yaml "^4.1.0"
+    json-stable-stringify-without-jsonify "^1.0.1"
+    levn "^0.4.1"
+    lodash.merge "^4.6.2"
+    minimatch "^3.1.2"
+    natural-compare "^1.4.0"
+    optionator "^0.9.3"
+    strip-ansi "^6.0.1"
+    text-table "^0.2.0"
+
 esm@^3.2.25:
   version "3.2.25"
   resolved "https://registry.yarnpkg.com/esm/-/esm-3.2.25.tgz#342c18c29d56157688ba5ce31f8431fbb795cc10"
@@ -16078,6 +16337,16 @@ object-sizeof@2.6.1:
   dependencies:
     buffer "^6.0.3"
 
+object.assign@^4.1.2:
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.5.tgz#3a833f9ab7fdb80fc9e8d2300c803d216d8fdbb0"
+  integrity sha512-byy+U7gp+FVwmyzKPYhW2h5l3crpmGsxl7X2s8y43IgxvG4g3QZ6CffDtsNQy1WsmZpQbO+ybo0AlW7TY6DcBQ==
+  dependencies:
+    call-bind "^1.0.5"
+    define-properties "^1.2.1"
+    has-symbols "^1.0.3"
+    object-keys "^1.1.1"
+
 object.assign@^4.1.4:
   version "4.1.4"
   resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.4.tgz#9673c7c7c351ab8c4d0b516f4343ebf4dfb7799f"
@@ -16088,6 +16357,15 @@ object.assign@^4.1.4:
     has-symbols "^1.0.3"
     object-keys "^1.1.1"
 
+object.entries@^1.1.5:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.8.tgz#bffe6f282e01f4d17807204a24f8edd823599c41"
+  integrity sha512-cmopxi8VwRIAw/fkijJohSfpef5PdN0pMQJN6VC/ZKvn0LIknWD8KtgY6KlQdEc4tIjcQ3HxSMmnvtzIscdaYQ==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-object-atoms "^1.0.0"
+
 object.fromentries@^2.0.7:
   version "2.0.7"
   resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.7.tgz#71e95f441e9a0ea6baf682ecaaf37fa2a8d7e616"
@@ -18830,6 +19108,11 @@ rollup-plugin-visualizer@^5.12.0:
     source-map "^0.7.4"
     yargs "^17.5.1"
 
+rollup-plugin-web-worker-loader@^1.6.1:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-web-worker-loader/-/rollup-plugin-web-worker-loader-1.6.1.tgz#9d7a27575b64b0780fe4e8b3bc87470d217e485f"
+  integrity sha512-4QywQSz1NXFHKdyiou16mH3ijpcfLtLGOrAqvAqu1Gx+P8+zj+3gwC2BSL/VW1d+LW4nIHC8F7d7OXhs9UdR2A==
+
 rollup-pluginutils@^1.3.1:
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/rollup-pluginutils/-/rollup-pluginutils-1.5.2.tgz#1e156e778f94b7255bfa1b3d0178be8f5c552408"
@@ -18859,6 +19142,31 @@ rollup@^3.27.1:
   optionalDependencies:
     fsevents "~2.3.2"
 
+rollup@^4.9.4:
+  version "4.17.2"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-4.17.2.tgz#26d1785d0144122277fdb20ab3a24729ae68301f"
+  integrity sha512-/9ClTJPByC0U4zNLowV1tMBe8yMEAxewtR3cUNX5BoEpGH3dQEWpJLr6CLp0fPdYRF/fzVOgvDb1zXuakwF5kQ==
+  dependencies:
+    "@types/estree" "1.0.5"
+  optionalDependencies:
+    "@rollup/rollup-android-arm-eabi" "4.17.2"
+    "@rollup/rollup-android-arm64" "4.17.2"
+    "@rollup/rollup-darwin-arm64" "4.17.2"
+    "@rollup/rollup-darwin-x64" "4.17.2"
+    "@rollup/rollup-linux-arm-gnueabihf" "4.17.2"
+    "@rollup/rollup-linux-arm-musleabihf" "4.17.2"
+    "@rollup/rollup-linux-arm64-gnu" "4.17.2"
+    "@rollup/rollup-linux-arm64-musl" "4.17.2"
+    "@rollup/rollup-linux-powerpc64le-gnu" "4.17.2"
+    "@rollup/rollup-linux-riscv64-gnu" "4.17.2"
+    "@rollup/rollup-linux-s390x-gnu" "4.17.2"
+    "@rollup/rollup-linux-x64-gnu" "4.17.2"
+    "@rollup/rollup-linux-x64-musl" "4.17.2"
+    "@rollup/rollup-win32-arm64-msvc" "4.17.2"
+    "@rollup/rollup-win32-ia32-msvc" "4.17.2"
+    "@rollup/rollup-win32-x64-msvc" "4.17.2"
+    fsevents "~2.3.2"
+
 rollup@^4.9.6:
   version "4.12.0"
   resolved "https://registry.yarnpkg.com/rollup/-/rollup-4.12.0.tgz#0b6d1e5f3d46bbcf244deec41a7421dc54cc45b5"
@@ -19088,6 +19396,13 @@ serialize-javascript@^4.0.0:
   dependencies:
     randombytes "^2.1.0"
 
+serialize-javascript@^6.0.1:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-6.0.2.tgz#defa1e055c83bf6d59ea805d8da862254eb6a6c2"
+  integrity sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==
+  dependencies:
+    randombytes "^2.1.0"
+
 server-destroy@1.0.1, server-destroy@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/server-destroy/-/server-destroy-1.0.1.tgz#f13bf928e42b9c3e79383e61cc3998b5d14e6cdd"
@@ -19286,6 +19601,11 @@ smart-buffer@^4.2.0:
   resolved "https://registry.yarnpkg.com/smart-buffer/-/smart-buffer-4.2.0.tgz#6e1d71fa4f18c05f7d0ff216dd16a481d0e8d9ae"
   integrity sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==
 
+smob@^1.0.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/smob/-/smob-1.5.0.tgz#85d79a1403abf128d24d3ebc1cdc5e1a9548d3ab"
+  integrity sha512-g6T+p7QO8npa+/hNx9ohv1E5pVCmWrVCUzUXJyLdMmftX6ER0oiWY/w9knEonLpnOp6b6FenKnMfR8gqwWdwig==
+
 snowflake-promise@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/snowflake-promise/-/snowflake-promise-4.5.0.tgz#ceba611d27b3792966bc752c545760e0ce168c1c"
@@ -20354,6 +20674,16 @@ terser@^5.0.0:
     commander "^2.20.0"
     source-map-support "~0.5.20"
 
+terser@^5.17.4:
+  version "5.31.0"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-5.31.0.tgz#06eef86f17007dbad4593f11a574c7f5eb02c6a1"
+  integrity sha512-Q1JFAoUKE5IMfI4Z/lkE/E6+SwgzO+x4tq4v1AyBLRj8VSYvRO6A/rQrPg1yud4g0En9EKI1TvFRF2tQFcoUkg==
+  dependencies:
+    "@jridgewell/source-map" "^0.3.3"
+    acorn "^8.8.2"
+    commander "^2.20.0"
+    source-map-support "~0.5.20"
+
 test-exclude@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/test-exclude/-/test-exclude-6.0.0.tgz#04a8698661d805ea6fa293b6cb9e63ac044ef15e"
@@ -20702,6 +21032,16 @@ tsconfig-paths@^3.10.1, tsconfig-paths@^3.14.2:
     minimist "^1.2.6"
     strip-bom "^3.0.0"
 
+tsconfig-paths@^3.15.0:
+  version "3.15.0"
+  resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz#5299ec605e55b1abb23ec939ef15edaf483070d4"
+  integrity sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==
+  dependencies:
+    "@types/json5" "^0.0.29"
+    json5 "^1.0.2"
+    minimist "^1.2.6"
+    strip-bom "^3.0.0"
+
 tsconfig-paths@^4.1.2, tsconfig-paths@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-4.2.0.tgz#ef78e19039133446d244beac0fd6a1632e2d107c"