add explanation modal type presets

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
   }

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
+}

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}

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}

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,
+                explanation: setting.explanation,
-                valueTypes: setting.valueTypes
               }}
               {bindings}
               {componentBindings}

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

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"],
+            "preset": "chartValue"
-            "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
@@ -1809,20 +1814,9 @@
         "label": "Data columns",
         "key": "valueColumns",
         "dependsOn": "dataProvider",
-        "columnInfo": {
+        "explanation": {
           "typeSupport": {
-            "supported": ["number", "boolean"],
+            "preset": "chartValue"
-            "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
@@ -1979,20 +1973,9 @@
         "label": "Data columns",
         "key": "valueColumns",
         "dependsOn": "dataProvider",
-        "columnInfo": {
+        "explanation": {
           "typeSupport": {
-            "supported": ["number", "boolean"],
+            "preset": "chartValue"
-            "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

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()