feat: Color Map pass the colorMapping object to giraffe (#3473)

Author: ChitlangeSahas

package.json

@@ -52,7 +52,7 @@
     "cy": "CYPRESS_dexUrl=https://$INGRESS_HOST:$PORT_HTTPS CYPRESS_baseUrl=http://localhost:9999 cypress open",
     "cy:dev": "source ../monitor-ci/.env && CYPRESS_dexUrl=CLOUD CYPRESS_baseUrl=https://$INGRESS_HOST:$PORT_HTTPS cypress open --config testFiles='{cloud,shared}/**/*.*'",
     "cy:dev-oss": "source ../monitor-ci/.env && CYPRESS_dexUrl=OSS CYPRESS_baseUrl=https://$INGRESS_HOST:$PORT_HTTPS cypress open --config testFiles='{oss,shared}/**/*.*'",
-    "generate": "export SHA=2da36d4beb7fc22dd8d037c3398c91c7ca2c346d && export REMOTE=https://raw.githubusercontent.com/influxdata/openapi/${SHA}/ && yarn generate-meta",
+    "generate": "export SHA=1e7c6a915dd5ab74b3e72c86e0776fbf66f3d2c1 && export REMOTE=https://raw.githubusercontent.com/influxdata/openapi/${SHA}/ && yarn generate-meta",
     "generate-local": "export REMOTE=../openapi/ && yarn generate-meta",
     "generate-meta": "if [ -z \"${CLOUD_URL}\" ]; then yarn generate-meta-oss; else yarn generate-meta-cloud; fi",
     "generate-meta-oss": "yarn oss-api && yarn notebooks && yarn unity && yarn annotations-oss && yarn pinned && yarn mapsd-oss && yarn cloudPriv",

src/visualization/types/Graph/view.tsx

@@ -10,6 +10,7 @@ import {
   createGroupIDColumn,
   getDomainDataFromLines,
   lineTransform,
+  LineLayerConfig,
 } from '@influxdata/giraffe'
 
 // Components
@@ -50,6 +51,8 @@ import {
 
 // Annotations
 import {addAnnotationLayer} from 'src/visualization/utils/annotationUtils'
+import {getColorMappingObjects} from 'src/visualization/utils/colorMappingUtils'
+import {isFlagEnabled} from '../../../shared/utils/featureFlag'
 
 interface Props extends VisualizationProps {
   properties: XYViewProperties
@@ -179,6 +182,17 @@ const XYPlot: FC<Props> = ({
     return <EmptyGraphMessage message={INVALID_DATA_COPY} />
   }
 
+  let colorMapping = null
+
+  if (isFlagEnabled('graphColorMapping')) {
+    const [, fillColumnMap] = createGroupIDColumn(result.table, groupKey)
+    const {colorMappingForGiraffe} = getColorMappingObjects(
+      fillColumnMap,
+      properties
+    )
+    colorMapping = colorMappingForGiraffe
+  }
+
   const config: Config = {
     ...currentTheme,
     table: result.table,
@@ -217,6 +231,14 @@ const XYPlot: FC<Props> = ({
     ],
   }
 
+  if (isFlagEnabled('graphColorMapping')) {
+    const layer = {...(config.layers[0] as LineLayerConfig)}
+
+    layer.colorMapping = colorMapping
+
+    config.layers[0] = layer
+  }
+
   addAnnotationLayer(
     config,
     inAnnotationMode,