Refactor how client app actions programmatically mutate data provider queries to allow for correctly handling removal of query extensions

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

@@ -34,12 +34,16 @@
   let bookmarks = [null]
   let pageNumber = 0
   let query = null
+  let queryExtensions = {}
 
   // Sorting can be overridden at run time, so we can't use the prop directly
   let currentSortColumn = sortColumn
   let currentSortOrder = sortOrder
+  $: currentSortColumn = sortColumn
+  $: currentSortOrder = sortOrder
 
-  $: query = buildLuceneQuery(filter)
+  $: defaultQuery = buildLuceneQuery(filter)
+  $: extendQuery(defaultQuery, queryExtensions)
   $: internalTable = dataSource?.type === "table"
   $: nestedProvider = dataSource?.type === "provider"
   $: hasNextPage = bookmarks[pageNumber + 1] != null
@@ -91,8 +95,12 @@
       metadata: { dataSource },
     },
     {
-      type: ActionTypes.SetDataProviderQuery,
+      type: ActionTypes.AddDataProviderQueryExtension,
-      callback: newQuery => (query = newQuery),
+      callback: addQueryExtension,
+    },
+    {
+      type: ActionTypes.RemoveDataProviderQueryExtension,
+      callback: removeQueryExtension,
     },
     {
       type: ActionTypes.SetDataProviderSorting,
@@ -164,6 +172,7 @@
       const sort = schema?.[sortColumn] ? sortColumn : undefined
 
       // For internal tables we use server-side processing
+      console.log("SEARCH!")
       const res = await API.searchTable({
         tableId: dataSource.tableId,
         query,
@@ -264,6 +273,38 @@
     pageNumber--
     allRows = res.rows
   }
+
+  const addQueryExtension = (key, operator, field, value) => {
+    if (!key || !operator || !field) {
+      return
+    }
+    const extension = { operator, field, value }
+    queryExtensions = { ...queryExtensions, [key]: extension }
+  }
+
+  const removeQueryExtension = key => {
+    if (!key) {
+      return
+    }
+    const newQueryExtensions = { ...queryExtensions }
+    delete newQueryExtensions[key]
+    queryExtensions = newQueryExtensions
+  }
+
+  const extendQuery = (defaultQuery, extensions) => {
+    const extensionValues = Object.values(extensions || {})
+    let extendedQuery = { ...query }
+    extensionValues.forEach(({ operator, field, value }) => {
+      extendedQuery[operator] = {
+        ...extendedQuery[operator],
+        [field]: value,
+      }
+    })
+
+    if (JSON.stringify(query) !== JSON.stringify(extendedQuery)) {
+      query = extendedQuery
+    }
+  }
 </script>
 
 <div use:styleable={$component.styles} class="container">

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

@@ -3,7 +3,7 @@
   import { getContext } from "svelte"
   import dayjs from "dayjs"
   import utc from "dayjs/plugin/utc"
-  import { onMount } from "svelte"
+  import { onDestroy } from "svelte"
 
   dayjs.extend(utc)
 
@@ -14,7 +14,14 @@
   const component = getContext("component")
   const { styleable, ActionTypes, getAction } = getContext("sdk")
 
-  const setQuery = getAction(dataProvider?.id, ActionTypes.SetDataProviderQuery)
+  $: addExtension = getAction(
+    dataProvider?.id,
+    ActionTypes.AddDataProviderQueryExtension
+  )
+  $: removeExtension = getAction(
+    dataProvider?.id,
+    ActionTypes.RemoveDataProviderQueryExtension
+  )
   const options = [
     "Last 1 day",
     "Last 7 days",
@@ -25,44 +32,30 @@
   ]
   let value = options.includes(defaultValue) ? defaultValue : "Last 30 days"
 
-  const updateDateRange = option => {
+  $: queryExtension = getQueryExtension(value)
-    const query = dataProvider?.state?.query
+  $: addExtension?.($component.id, "range", field, queryExtension)
-    if (!query || !setQuery) {
-      return
-    }
 
-    value = option
+  const getQueryExtension = value => {
     let low = dayjs.utc().subtract(1, "year")
     let high = dayjs.utc().add(1, "day")
 
-    if (option === "Last 1 day") {
+    if (value === "Last 1 day") {
       low = dayjs.utc().subtract(1, "day")
-    } else if (option === "Last 7 days") {
+    } else if (value === "Last 7 days") {
       low = dayjs.utc().subtract(7, "days")
-    } else if (option === "Last 30 days") {
+    } else if (value === "Last 30 days") {
       low = dayjs.utc().subtract(30, "days")
-    } else if (option === "Last 3 months") {
+    } else if (value === "Last 3 months") {
       low = dayjs.utc().subtract(3, "months")
-    } else if (option === "Last 6 months") {
+    } else if (value === "Last 6 months") {
       low = dayjs.utc().subtract(6, "months")
     }
 
-    // Update data provider query with the new filter
+    return { low: low.format(), high: high.format() }
-    setQuery({
-      ...query,
-      range: {
-        ...query.range,
-        [field]: {
-          high: high.format(),
-          low: low.format(),
-        },
-      },
-    })
   }
 
-  // Update the range on mount to the initial value
+  onDestroy(() => {
-  onMount(() => {
+    removeExtension?.($component.id)
-    updateDateRange(value)
   })
 </script>
 
@@ -71,6 +64,6 @@
     placeholder={null}
     {options}
     {value}
-    on:change={e => updateDateRange(e.detail)}
+    on:change={e => (value = e.detail)}
   />
 </div>

packages/client/src/constants.js

@@ -25,7 +25,8 @@ export const UnsortableTypes = [
 export const ActionTypes = {
   ValidateForm: "ValidateForm",
   RefreshDatasource: "RefreshDatasource",
-  SetDataProviderQuery: "SetDataProviderQuery",
+  AddDataProviderQueryExtension: "AddDataProviderQueryExtension",
+  RemoveDataProviderQueryExtension: "RemoveDataProviderQueryExtension",
   SetDataProviderSorting: "SetDataProviderSorting",
   ClearForm: "ClearForm",
   ChangeFormStep: "ChangeFormStep",