chore: limit graphColorMapping to CLOUD

influxdata · Mar 3, 2023 · 0cf8281 · 0cf8281
1 parent 022199e
commit 0cf8281
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 28 deletions.
diff --git a/src/timeMachine/components/Vis.tsx b/src/timeMachine/components/Vis.tsx
@@ -34,6 +34,9 @@ import {RemoteDataState, AppState, ViewProperties} from 'src/types'
 import {getActiveTimeRange} from 'src/timeMachine/selectors/index'
 import {setViewProperties} from 'src/timeMachine/actions'
 
+// Constants
+import {CLOUD} from 'src/shared/constants'
+
 type ReduxProps = ConnectedProps<typeof connector>
 type Props = ReduxProps
 
@@ -95,7 +98,7 @@ const TimeMachineVis: FC<Props> = ({
       !!giraffeResult.table.length)
 
   useEffect(() => {
-    if (viewProperties.hasOwnProperty('colors')) {
+    if (CLOUD && viewProperties.hasOwnProperty('colors')) {
       const groupKey = [...giraffeResult.fluxGroupKeyUnion, 'result']
       const [, fillColumnMap] = createGroupIDColumn(
         giraffeResult.table,

diff --git a/src/visualization/types/Graph/options.tsx b/src/visualization/types/Graph/options.tsx
@@ -43,7 +43,9 @@ import AxisTicksGenerator from 'src/visualization/components/internal/AxisTicksG
 import {XYViewProperties} from 'src/types'
 import {VisualizationOptionProps} from 'src/visualization'
 
+// Constants
 const {BASE_2, BASE_10} = AXES_SCALE_OPTIONS
+import {CLOUD} from 'src/shared/constants'
 
 interface Props extends VisualizationOptionProps {
   properties: XYViewProperties
@@ -250,19 +252,23 @@ export const GraphOptions: FC<Props> = ({properties, results, update}) => {
             <ColorSchemeDropdown
               value={properties.colors?.filter(c => c.type === 'scale') ?? []}
               onChange={colors => {
-                const [, fillColumnMap] = createGroupIDColumn(
-                  results.table,
-                  groupKey
-                )
-                // the properties that we use to calculate the colors are updated in the next render cycle so we need
-                // to make a new object and override the colors
-                const newProperties = {...properties, colors}
-                const colorMapping = generateSeriesToColorHex(
-                  fillColumnMap,
-                  newProperties
-                )
+                if (CLOUD) {
+                  const [, fillColumnMap] = createGroupIDColumn(
+                    results.table,
+                    groupKey
+                  )
+                  // the properties that we use to calculate the colors are updated in the next render cycle so we need
+                  // to make a new object and override the colors
+                  const newProperties = {...properties, colors}
+                  const colorMapping = generateSeriesToColorHex(
+                    fillColumnMap,
+                    newProperties
+                  )
 
-                update({colors, colorMapping})
+                  update({colors, colorMapping})
+                } else {
+                  update({colors})
+                }
               }}
             />
           </Form.Element>

diff --git a/src/visualization/types/Graph/view.tsx b/src/visualization/types/Graph/view.tsx
@@ -72,6 +72,9 @@ interface Props extends VisualizationProps {
   properties: XYViewProperties
 }
 
+// Constants
+import {CLOUD} from 'src/shared/constants'
+
 export const Graph: FC<Props> = ({
   properties,
   annotations,
@@ -244,20 +247,24 @@ export const Graph: FC<Props> = ({
     return <EmptyGraphMessage message={INVALID_DATA_COPY} />
   }
 
-  const memoizedGetColorMappingObjects = memoizeOne(getColorMappingObjects)
-  const [, fillColumnMap] = createGroupIDColumn(resultState.table, groupKey)
-  const {colorMappingForGiraffe, colorMappingForIDPE, needsToSaveToIDPE} =
-    memoizedGetColorMappingObjects(fillColumnMap, properties)
-  const colorMapping = colorMappingForGiraffe
+  let colorMapping = null
+
+  if (CLOUD) {
+    const memoizedGetColorMappingObjects = memoizeOne(getColorMappingObjects)
+    const [, fillColumnMap] = createGroupIDColumn(resultState.table, groupKey)
+    const {colorMappingForGiraffe, colorMappingForIDPE, needsToSaveToIDPE} =
+      memoizedGetColorMappingObjects(fillColumnMap, properties)
+    colorMapping = colorMappingForGiraffe
 
-  // when the view is in a dashboard cell, and there is a need to save to IDPE, save it.
-  // when VEO is open, prevent from saving because it causes state issues. It will be handled in the timemachine code separately.
-  if (needsToSaveToIDPE && view?.dashboardID && !isVeoOpen) {
-    const newView = {...view}
-    newView.properties.colorMapping = colorMappingForIDPE
+    // when the view is in a dashboard cell, and there is a need to save to IDPE, save it.
+    // when VEO is open, prevent from saving because it causes state issues. It will be handled in the timemachine code separately.
+    if (needsToSaveToIDPE && view?.dashboardID && !isVeoOpen) {
+      const newView = {...view}
+      newView.properties.colorMapping = colorMappingForIDPE
 
-    // save to IDPE
-    dispatch(updateViewAndVariables(view.dashboardID, newView))
+      // save to IDPE
+      dispatch(updateViewAndVariables(view.dashboardID, newView))
+    }
   }
 
   const config: Config = {
@@ -298,11 +305,13 @@ export const Graph: FC<Props> = ({
     ],
   }
 
-  const layer = {...(config.layers[0] as LineLayerConfig)}
+  if (CLOUD) {
+    const layer = {...(config.layers[0] as LineLayerConfig)}
 
-  layer.colorMapping = colorMapping
+    layer.colorMapping = colorMapping
 
-  config.layers[0] = layer
+    config.layers[0] = layer
+  }
 
   addAnnotationLayer(
     config,