feat(dashboards): use memoized variables selector (#6019)

Co-authored-by: Sahas Chitlange chitlangesahas@gmail.com

Author: hoorayimhelping

src/shared/components/cells/Cell.tsx

@@ -28,7 +28,7 @@ import {
 } from 'src/types'
 
 // Selectors
-import {getAllVariables} from 'src/variables/selectors'
+import {getAllVariablesMemoized} from 'src/variables/selectors'
 import {getWindowPeriodFromQueryBuilder} from 'src/timeMachine/selectors'
 
 // Constants
@@ -235,7 +235,8 @@ const mstp = (state: AppState, ownProps: OwnProps) => {
     state,
     view?.id
   )
-  const variables = getAllVariables(state)
+  const variables = getAllVariablesMemoized(state)
+
   return {variables, view, windowPeriodFromQueryBuilder}
 }
 

src/variables/selectors/index.tsx

@@ -1,5 +1,6 @@
 // Libraries
 import {get} from 'lodash'
+import {createSelector} from 'reselect'
 
 // Utils
 import {getActiveQuery} from 'src/timeMachine/selectors'
@@ -15,6 +16,7 @@ import {
   WINDOW_PERIOD,
 } from 'src/variables/constants'
 import {currentContext} from 'src/shared/selectors/currentContext'
+import {getCurrentDashboardId} from 'src/dashboards/selectors/'
 
 // Types
 import {
@@ -137,6 +139,34 @@ export const getAllVariables = (
   return vars
 }
 
+const getAllVariableIds = createSelector(
+  state => state,
+  getCurrentDashboardId,
+  (state, currentDashboardId) => {
+    return getUserVariableNames(state, currentDashboardId).concat([
+      TIME_RANGE_START,
+      TIME_RANGE_STOP,
+      WINDOW_PERIOD,
+    ])
+  }
+)
+
+export const getAllVariablesMemoized = createSelector(
+  state => state,
+  getAllVariableIds,
+  (state, allVariableIds) => {
+    const variables = []
+    for (const variableId of allVariableIds) {
+      const variable = getVariable(state, variableId)
+      if (variable) {
+        variables.push(variable)
+      }
+    }
+
+    return variables
+  }
+)
+
 export const getAllVariablesForZoomRequery = (
   state: AppState,
   domain: number[],