Simplify data contexts

packages/client/src/api/datasources.js

@@ -20,8 +20,8 @@ export const fetchDatasource = async (datasource, dataContext) => {
     rows = await fetchViewData(datasource)
   } else if (type === "link") {
     rows = await fetchRelationshipData({
-      rowId: dataContext?.data?._id,
+      rowId: dataContext?._id,
-      tableId: dataContext?.data?.tableId,
+      tableId: dataContext?.tableId,
       fieldName,
     })
   }

packages/client/src/components/Component.svelte

@@ -26,10 +26,10 @@
   }
 
   // Enriches data bindings to real values based on data context
-  const enrichDataBindings = (data, bindings, props) => {
+  const enrichDataBindings = (dataContexts, dataBindings, props) => {
     const state = {
-      ...data,
+      ...dataContexts,
-      ...bindings,
+      ...dataBindings,
     }
     let enrichedProps = {}
     Object.entries(props).forEach(([key, value]) => {
@@ -49,9 +49,9 @@
   $: componentProps = extractValidProps(definition)
   $: children = definition._children
   $: id = definition._id
-  $: dataStore = getContext("data")
+  $: dataContext = getContext("data")
   $: enrichedProps = enrichDataBindings(
-    $dataStore,
+    $dataContext,
     $bindingStore,
     componentProps
   )
@@ -64,7 +64,7 @@
   $: componentStore.set({
     id,
     styles: { ...definition._styles, id },
-    dataContext: $dataStore.data,
+    dataContext: $dataContext.data,
   })
 </script>
 

packages/standard-components/src/Form.svelte

@@ -6,7 +6,6 @@
   import { capitalise } from "./helpers"
 
   const { styleable, screenStore, API } = getContext("sdk")
-  const dataContextStore = getContext("data")
   const component = getContext("component")
 
   export let wide = false
@@ -15,11 +14,11 @@
   let schema
   let fields = []
 
-  $: getContextDetails($dataContextStore)
+  $: getContextDetails($component.dataContext)
 
   const getContextDetails = async dataContext => {
-    row = dataContext?.data
+    if (dataContext) {
-    if (row) {
+      row = dataContext
       const tableDefinition = await API.fetchTableDefinition(row.tableId)
       schema = tableDefinition.schema
       fields = Object.keys(schema)

packages/standard-components/src/List.svelte

@@ -3,7 +3,6 @@
   import { isEmpty } from "lodash/fp"
 
   const { API, styleable, DataProvider } = getContext("sdk")
-  const dataContextStore = getContext("data")
   const component = getContext("component")
 
   export let datasource = []
@@ -12,7 +11,7 @@
 
   onMount(async () => {
     if (!isEmpty(datasource)) {
-      rows = await API.fetchDatasource(datasource, $dataContextStore)
+      rows = await API.fetchDatasource(datasource, $component.dataContext)
     }
   })
 </script>

packages/standard-components/src/charts/BarChart.svelte

@@ -5,7 +5,7 @@
   import { isEmpty } from "lodash/fp"
 
   const { API } = getContext("sdk")
-  const dataContext = getContext("data")
+  const component = getContext("component")
 
   export let title
   export let datasource
@@ -35,7 +35,7 @@
 
     // Fetch, filter and sort data
     const schema = (await API.fetchTableDefinition(datasource.tableId)).schema
-    const result = await API.fetchDatasource(datasource, $dataContext)
+    const result = await API.fetchDatasource(datasource, $component.dataContext)
     const reducer = row => (valid, column) => valid && row[column] != null
     const hasAllColumns = row => allCols.reduce(reducer(row), true)
     const data = result

packages/standard-components/src/charts/CandleStickChart.svelte

@@ -5,7 +5,7 @@
   import { isEmpty } from "lodash/fp"
 
   const { API } = getContext("sdk")
-  const dataContext = getContext("data")
+  const component = getContext("component")
 
   export let title
   export let datasource
@@ -33,7 +33,7 @@
 
     // Fetch, filter and sort data
     const schema = (await API.fetchTableDefinition(datasource.tableId)).schema
-    const result = await API.fetchDatasource(datasource, $dataContext)
+    const result = await API.fetchDatasource(datasource, $component.dataContext)
     const reducer = row => (valid, column) => valid && row[column] != null
     const hasAllColumns = row => allCols.reduce(reducer(row), true)
     const data = result

packages/standard-components/src/charts/LineChart.svelte

@@ -5,7 +5,7 @@
   import { isEmpty } from "lodash/fp"
 
   const { API } = getContext("sdk")
-  const dataContext = getContext("data")
+  const component = getContext("component")
 
   // Common props
   export let title
@@ -41,7 +41,7 @@
 
     // Fetch, filter and sort data
     const schema = (await API.fetchTableDefinition(datasource.tableId)).schema
-    const result = await API.fetchDatasource(datasource, $dataContext)
+    const result = await API.fetchDatasource(datasource, $component.dataContext)
     const reducer = row => (valid, column) => valid && row[column] != null
     const hasAllColumns = row => allCols.reduce(reducer(row), true)
     const data = result

packages/standard-components/src/charts/PieChart.svelte

@@ -5,7 +5,7 @@
   import { isEmpty } from "lodash/fp"
 
   const { API } = getContext("sdk")
-  const dataContext = getContext("data")
+  const component = getContext("component")
 
   export let title
   export let datasource
@@ -31,7 +31,7 @@
 
     // Fetch, filter and sort data
     const schema = (await API.fetchTableDefinition(datasource.tableId)).schema
-    const result = await API.fetchDatasource(datasource, $dataContext)
+    const result = await API.fetchDatasource(datasource, $component.dataContext)
     const data = result
       .filter(row => row[labelColumn] != null && row[valueColumn] != null)
       .slice(0, 20)

packages/standard-components/src/grid/Component.svelte

@@ -15,7 +15,6 @@
   // These maps need to be set up to handle whatever types that are used in the tables.
   const setters = new Map([["number", number]])
   const SDK = getContext("sdk")
-  const dataContext = getContext("data")
   const component = getContext("component")
   const { API, styleable } = SDK
 
@@ -59,7 +58,7 @@
 
   onMount(async () => {
     if (!isEmpty(datasource)) {
-      data = await API.fetchDatasource(datasource, $dataContext)
+      data = await API.fetchDatasource(datasource, $component.dataContext)
       let schema
 
       // Get schema for datasource