feat: cancel queries in query builder when toggling between values (#4466)

Author: asalem1

src/flows/pipes/QueryBuilder/CardList.tsx

@@ -59,6 +59,8 @@ const Card: FC<Props> = ({idx}) => {
     cards,
     selectMeasurement,
     add,
+    cancelKey,
+    cancelValue,
     update,
     remove,
     loadKeys,
@@ -131,8 +133,7 @@ const Card: FC<Props> = ({idx}) => {
     card.values.selected.length <= 1
 
   const valueSelect = val => {
-    const _vals = [...card.values.selected]
-    const index = _vals.indexOf(val)
+    const index = card.values.selected.indexOf(val)
 
     if (isCompliant) {
       if (index === -1) {
@@ -148,20 +149,19 @@ const Card: FC<Props> = ({idx}) => {
 
     if (index === -1) {
       event('Query Builder Value Selected')
-      _vals.push(val)
+      card.values.selected.push(val)
     } else {
       event('Query Builder Value Unselected')
-      _vals.splice(index, 1)
+      card.values.selected.splice(index, 1)
     }
 
-    update(idx, {
-      values: {
-        ...card.values,
-        selected: _vals,
-      },
-    })
+    update(idx, card)
 
-    if (index === -1 && _vals.length === 1 && idx === cards.length - 1) {
+    if (
+      index === -1 &&
+      card.values.selected.length === 1 &&
+      idx === cards.length - 1
+    ) {
       add()
     } else {
       for (let ni = idx + 1; ni < cards.length; ni++) {
@@ -171,17 +171,38 @@ const Card: FC<Props> = ({idx}) => {
   }
 
   useEffect(() => {
+    let promise
     if (data.buckets[0] && card.keys.loading === RemoteDataState.NotStarted) {
-      loadKeys(idx)
+      promise = loadKeys(idx)
+      if (promise instanceof Promise) {
+        promise.finally(() => {
+          promise = null
+        })
+      }
+    }
+
+    return () => {
+      cancelKey(idx)
     }
   }, [data.buckets, card.keys.loading])
 
   useEffect(() => {
+    let promise
     if (
       card.keys.loading === RemoteDataState.Done &&
       card.values.loading !== RemoteDataState.Done
     ) {
-      loadValues(idx)
+      promise = loadValues(idx)
+
+      if (promise instanceof Promise) {
+        promise.finally(() => {
+          promise = null
+        })
+      }
+    }
+
+    return () => {
+      cancelValue(idx)
     }
   }, [card.keys.loading, card.values.loading])
 

src/flows/pipes/QueryBuilder/context.tsx

@@ -1,5 +1,5 @@
 // Libraries
-import React, {FC, createContext, useContext, useState, useMemo} from 'react'
+import React, {FC, createContext, useContext, useState} from 'react'
 
 // Contexts
 import {PipeContext} from 'src/flows/context/pipe'
@@ -63,10 +63,12 @@ interface QueryBuilderContextType {
   selectMeasurement: (measurement?: string) => void
 
   add: () => void
+  cancelKey: (idx: number) => void
+  cancelValue: (idx: number) => void
   remove: (idx: number) => void
   update: (idx: number, card: Partial<QueryBuilderCard>) => void
-  loadKeys: (idx: number, search?: string) => void
-  loadValues: (idx: number, search?: string) => void
+  loadKeys: (idx: number, search?: string) => void | Promise<any>
+  loadValues: (idx: number, search?: string) => void | Promise<any>
 }
 
 export const DEFAULT_CONTEXT: QueryBuilderContextType = {
@@ -76,6 +78,8 @@ export const DEFAULT_CONTEXT: QueryBuilderContextType = {
   selectMeasurement: _ => {},
 
   add: () => {},
+  cancelKey: (_idx: number) => {},
+  cancelValue: (_idx: number) => {},
   remove: (_idx: number) => {},
   update: (_idx: number, _card: QueryBuilderCard) => {},
   loadKeys: (_idx: number, _search?: string) => {},
@@ -113,6 +117,8 @@ export const QueryBuilderProvider: FC = ({children}) => {
   const {id, data, range, update} = useContext(PipeContext)
   const {query, getPanelQueries} = useContext(FlowQueryContext)
   const {buckets} = useContext(BucketContext)
+  const [cancelKey, setCancelKey] = useState({})
+  const [cancelValue, setCancelValue] = useState({})
 
   const [cardMeta, setCardMeta] = useState<QueryBuilderMeta[]>(
     Array(data.tags.length).fill({
@@ -181,9 +187,8 @@ export const QueryBuilderProvider: FC = ({children}) => {
     }
   }
 
-  const cards = useMemo(
-    () => data.tags.map((tag, idx) => fromBuilderConfig(tag, cardMeta[idx])),
-    [data.tags, cardMeta]
+  const cards = data.tags.map((tag, idx) =>
+    fromBuilderConfig(tag, cardMeta[idx])
   )
 
   const add = () => {
@@ -294,23 +299,31 @@ export const QueryBuilderProvider: FC = ({children}) => {
     |> limit(n: ${limit})`
     }
 
-    query(queryText, scope)
+    const result = query(queryText, scope)
+
+    setCancelKey(prev => ({
+      ...prev,
+      [idx]: (result as any).cancel,
+    }))
+
+    return result
       .then(resp => {
         return (Object.values(resp.parsed.table.columns).filter(
           c => c.name === '_value' && c.type === 'string'
         )[0]?.data ?? []) as string[]
       })
       .then(keys => {
-        if (!cards[idx].keys.selected[0]) {
+        const currentCards = data.tags.map(fromBuilderConfig)
+        if (!currentCards[idx].keys.selected[0]) {
           if (idx === 0 && keys.includes('_measurement')) {
-            cards[idx].keys.selected = ['_measurement']
+            currentCards[idx].keys.selected = ['_measurement']
           } else {
-            cards[idx].keys.selected = [keys[0]]
+            currentCards[idx].keys.selected = [keys[0]]
           }
 
-          update({tags: cards.map(toBuilderConfig)})
-        } else if (!keys.includes(cards[idx].keys.selected[0])) {
-          keys.unshift(cards[idx].keys.selected[0])
+          update({tags: currentCards.map(toBuilderConfig)})
+        } else if (!keys.includes(currentCards[idx].keys.selected[0])) {
+          keys.unshift(currentCards[idx].keys.selected[0])
         }
 
         cardMeta.splice(idx, 1, {
@@ -326,6 +339,18 @@ export const QueryBuilderProvider: FC = ({children}) => {
       })
   }
 
+  const handleCancelKey = idx => {
+    if (idx in cancelKey) {
+      cancelKey[idx]()
+    }
+  }
+
+  const handleCancelValue = idx => {
+    if (idx in cancelValue) {
+      cancelValue[idx]()
+    }
+  }
+
   const loadValues = (idx, search) => {
     if (
       cardMeta[idx].loadingValues === RemoteDataState.Loading ||
@@ -402,7 +427,14 @@ export const QueryBuilderProvider: FC = ({children}) => {
   |> sort()`
     }
 
-    query(queryText, scope)
+    const result = query(queryText, scope)
+
+    setCancelValue(prev => ({
+      ...prev,
+      [idx]: (result as any).cancel,
+    }))
+
+    return result
       .then(resp => {
         return (Object.values(resp.parsed.table.columns).filter(
           c => c.name === '_value' && c.type === 'string'
@@ -480,7 +512,9 @@ export const QueryBuilderProvider: FC = ({children}) => {
       ..._card,
     }
 
-    update({tags: cards.map(toBuilderConfig)})
+    data.tags = cards.map(toBuilderConfig)
+
+    update({tags: data.tags})
   }
 
   return (
@@ -490,7 +524,8 @@ export const QueryBuilderProvider: FC = ({children}) => {
 
         selectBucket,
         selectMeasurement,
-
+        cancelKey: handleCancelKey,
+        cancelValue: handleCancelValue,
         add,
         remove,
         update: updater,

src/shared/contexts/query.tsx

@@ -564,7 +564,7 @@ export const QueryProvider: FC = ({children}) => {
   const query = (text: string, override?: QueryScope): Promise<FluxResult> => {
     const result = basic(text, override)
 
-    return result.promise
+    const promise: any = result.promise
       .then(raw => {
         if (raw.type !== 'SUCCESS') {
           throw new Error(raw.message)
@@ -586,6 +586,9 @@ export const QueryProvider: FC = ({children}) => {
             error: null,
           } as FluxResult)
       )
+
+    promise.cancel = result.cancel
+    return promise
   }
 
   if (bucketsLoadingState !== RemoteDataState.Done) {