feat: color mapping for when the cell is edited through the time machine (#3561)

Author: ChitlangeSahas

src/timeMachine/components/Vis.tsx

@@ -1,13 +1,13 @@
 // Libraries
 import React, {FC, memo} from 'react'
-import {connect, ConnectedProps} from 'react-redux'
+import {connect, ConnectedProps, useDispatch} from 'react-redux'
 import classnames from 'classnames'
-import {fromFlux} from '@influxdata/giraffe'
+import {createGroupIDColumn, fromFlux} from '@influxdata/giraffe'
 import {isEqual} from 'lodash'
 
 // Components
 import {View} from 'src/visualization'
-import {SimpleTableViewProperties} from 'src/types'
+import {SimpleTableViewProperties, XYViewProperties} from 'src/types'
 import ErrorBoundary from 'src/shared/components/ErrorBoundary'
 import EmptyQueryView, {ErrorFormat} from 'src/shared/components/EmptyQueryView'
 import SimpleTable from 'src/visualization/types/SimpleTable/view'
@@ -25,12 +25,15 @@ import {
   getYSeriesColumns,
 } from 'src/timeMachine/selectors'
 import {getTimeRangeWithTimezone} from 'src/dashboards/selectors'
+import {isFlagEnabled} from 'src/shared/utils/featureFlag'
+import {getColorMappingObjects} from 'src/visualization/utils/colorMappingUtils'
 
 // Types
 import {RemoteDataState, AppState, ViewProperties} from 'src/types'
 
 // Selectors
 import {getActiveTimeRange} from 'src/timeMachine/selectors/index'
+import {setViewProperties} from 'src/timeMachine/actions'
 
 type ReduxProps = ConnectedProps<typeof connector>
 type Props = ReduxProps
@@ -53,6 +56,8 @@ const TimeMachineVis: FC<Props> = ({
   cellID,
 }) => {
   const {type} = viewProperties
+  const dispatch = useDispatch()
+
   // If the current selections for `xColumn`/`yColumn`/ etc. are invalid given
   // the current Flux response, attempt to make a valid selection instead. This
   // fallback logic is contained within the selectors that supply each of these
@@ -90,6 +95,24 @@ const TimeMachineVis: FC<Props> = ({
       giraffeResult.table.getColumnType('_value') !== 'number' &&
       !!giraffeResult.table.length)
 
+  if (isFlagEnabled('graphColorMapping')) {
+    const groupKey = [...giraffeResult.fluxGroupKeyUnion, 'result']
+    const [, fillColumnMap] = createGroupIDColumn(giraffeResult.table, groupKey)
+    const {colorMappingForIDPE, needsToSaveToIDPE} = getColorMappingObjects(
+      fillColumnMap,
+      viewProperties as XYViewProperties
+    )
+
+    if (loading === RemoteDataState.Done && needsToSaveToIDPE) {
+      dispatch(
+        setViewProperties({
+          ...viewProperties,
+          colorMapping: colorMappingForIDPE,
+        } as XYViewProperties)
+      )
+    }
+  }
+
   // Handles deadman check edge case to allow non-numeric values
   if (viewRawData && files && files?.length) {
     const [parsedResults] = files.flatMap(fromFlux)