fix(variable_hydration): limiting variable hydration to changing vari…

…ables (#18071)

CHANGELOG.md

@@ -10,6 +10,7 @@
 
 1. [18066](https://github.com/influxdata/influxdb/pull/18066): Fixed bug that wasn't persisting timeFormat for Graph + Single Stat selections
 1. [17959](https://github.com/influxdata/influxdb/pull/17959): Authorizer now exposes full permission set
+1. [18071](https://github.com/influxdata/influxdb/pull/18071): Fixed issue that was causing variable selections to hydrate all variable values
 
 ### UI Improvements
 

ui/src/shared/components/graph_tips/GraphTips.tsx

@@ -11,7 +11,7 @@ const GraphTips: FC = () => (
       color={ComponentColor.Primary}
       testID="graphtips-question-mark"
       tooltipContents={
-        <span>
+        <>
           <h1>Graph Tips:</h1>
           <p>
             <code>Click + Drag</code> Zoom in (X or Y)
@@ -22,11 +22,11 @@ const GraphTips: FC = () => (
           </p>
           <h1>Static Legend Tips:</h1>
           <p>
-            <code>Click</code>Focus on single Series
+            <code>Click</code> Focus on single Series
             <br />
             <code>Shift + Click</code> Show/Hide single Series
           </p>
-        </span>
+        </>
       }
     />
   </>

ui/src/variables/actions/thunks.ts

@@ -147,6 +147,34 @@ export const hydrateVariables = (skipCache?: boolean) => async (
   await hydration.promise
 }
 
+export const hydrateChangedVariable = (variableID: string) => async (
+  dispatch: Dispatch<Action>,
+  getState: GetState
+) => {
+  const state = getState()
+  const org = getOrg(state)
+  const variable = getVariableFromState(state, variableID)
+  const hydration = hydrateVars([variable], getAllVariablesFromState(state), {
+    orgID: org.id,
+    url: state.links.query.self,
+    skipCache: true,
+  })
+  hydration.on('status', (variable, status) => {
+    if (status === RemoteDataState.Loading) {
+      dispatch(setVariable(variable.id, status))
+      return
+    }
+    if (status === RemoteDataState.Done) {
+      const _variable = normalize<Variable, VariableEntities, string>(
+        variable,
+        variableSchema
+      )
+      dispatch(setVariable(variable.id, RemoteDataState.Done, _variable))
+    }
+  })
+  await hydration.promise
+}
+
 export const getVariable = (id: string) => async (
   dispatch: Dispatch<Action>
 ) => {
@@ -397,15 +425,14 @@ export const selectValue = (variableID: string, selected: string) => async (
   const state = getState()
   const contextID = currentContext(state)
   const variable = getVariableFromState(state, variableID)
-
   // Validate that we can make this selection
   const vals = normalizeValues(variable)
   if (!vals.includes(selected)) {
     return
   }
 
   await dispatch(selectValueInState(contextID, variableID, selected))
-
-  dispatch(hydrateVariables(true))
+  // only hydrate the changedVariable
+  dispatch(hydrateChangedVariable(variableID))
   dispatch(updateQueryVars({[variable.name]: selected}))
 }

ui/src/variables/components/VariableDropdown.tsx

@@ -97,9 +97,16 @@ class VariableDropdown extends PureComponent<Props> {
   }
 
   private handleSelect = (selectedValue: string) => {
-    const {variableID, onSelectValue, onSelect} = this.props
-
-    onSelectValue(variableID, selectedValue)
+    const {
+      variableID,
+      onSelectValue,
+      onSelect,
+      selectedValue: prevSelectedValue,
+    } = this.props
+
+    if (prevSelectedValue !== selectedValue) {
+      onSelectValue(variableID, selectedValue)
+    }
 
     if (onSelect) {
       onSelect()