Refactor how extending data provider queries works to support multiple extensions per key

packages/client/src/components/app/DataProvider.svelte

@@ -275,11 +275,10 @@
     allRows = res.rows
   }
 
-  const addQueryExtension = (key, operator, field, value) => {
-    if (!key || !operator || !field) {
+  const addQueryExtension = (key, extension) => {
+    if (!key || !extension) {
       return
     }
-    const extension = { operator, field, value }
     queryExtensions = { ...queryExtensions, [key]: extension }
   }
 
@@ -295,11 +294,13 @@
   const extendQuery = (defaultQuery, extensions) => {
     const extensionValues = Object.values(extensions || {})
     let extendedQuery = { ...defaultQuery }
-    extensionValues.forEach(({ operator, field, value }) => {
-      extendedQuery[operator] = {
-        ...extendedQuery[operator],
-        [field]: value,
-      }
+    extensionValues.forEach(extension => {
+      Object.entries(extension || {}).forEach(([operator, fields]) => {
+        extendedQuery[operator] = {
+          ...extendedQuery[operator],
+          ...fields,
+        }
+      })
     })
 
     if (JSON.stringify(query) !== JSON.stringify(extendedQuery)) {

packages/client/src/components/app/DateRangePicker.svelte

@@ -13,15 +13,6 @@
 
   const component = getContext("component")
   const { styleable, ActionTypes, getAction } = getContext("sdk")
-
-  $: addExtension = getAction(
-    dataProvider?.id,
-    ActionTypes.AddDataProviderQueryExtension
-  )
-  $: removeExtension = getAction(
-    dataProvider?.id,
-    ActionTypes.RemoveDataProviderQueryExtension
-  )
   const options = [
     "Last 1 day",
     "Last 7 days",
@@ -32,10 +23,24 @@
   ]
   let value = options.includes(defaultValue) ? defaultValue : "Last 30 days"
 
-  $: queryExtension = getQueryExtension(value)
-  $: addExtension?.($component.id, "range", field, queryExtension)
+  $: dataProviderId = dataProvider?.id
+  $: addExtension = getAction(
+    dataProviderId,
+    ActionTypes.AddDataProviderQueryExtension
+  )
+  $: removeExtension = getAction(
+    dataProviderId,
+    ActionTypes.RemoveDataProviderQueryExtension
+  )
+  $: queryExtension = getQueryExtension(field, value)
+  $: addExtension?.($component.id, queryExtension)
+
+  const getQueryExtension = (field, value) => {
+    if (!field || !value) {
+      return null
+    }
+    console.log("getting extension for " + value)
 
-  const getQueryExtension = value => {
     let low = dayjs.utc().subtract(1, "year")
     let high = dayjs.utc().add(1, "day")
 
@@ -51,7 +56,14 @@
       low = dayjs.utc().subtract(6, "months")
     }
 
-    return { low: low.format(), high: high.format() }
+    return {
+      range: {
+        [field]: {
+          low: low.format(),
+          high: high.format(),
+        },
+      },
+    }
   }
 
   onDestroy(() => {