add color pickers for highlight colors

src/MapPanel.tsx

@@ -10,11 +10,16 @@ export const MapPanel: React.FC<Props> = ({ options, data, width, height, id })
   let graphOptions = {
     ...options,
   };
-
+  var colors = {
+    defaultColor: graphOptions.color,
+    nodeHighlight: graphOptions.nodeHighlight,
+    azHighlight: graphOptions.azHighlight,
+    zaHighlight: graphOptions.zaHighlight,
+  };
   var parsedData = {};
   var mapData;
   try {
-    parsedData = parseData(data, graphOptions.mapjson);
+    parsedData = parseData(data, graphOptions.mapjson, colors);
     mapData = parsedData[3];
   } catch (error) {
     console.error('Parsing error : ', error);

src/components/esmap.js

@@ -52,7 +52,7 @@ function renderEdges(g, data) {
       return d.azPath;
     })
     .attr('stroke', function (d) {
-      return d.color;
+      return d.azColor;
     })
     .attr('marker-mid', function (d, i) {
       return 'url(#arrow)';
@@ -83,7 +83,7 @@ function renderEdges(g, data) {
       return d.zaPath;
     })
     .attr('stroke', function (d) {
-      return d.color;
+      return d.zaColor;
     })
     .attr('marker-mid', function (d, i) {
       return 'url(#arrow)';

src/dataParser.ts

@@ -1,20 +1,26 @@
 import { DataFrameView } from '@grafana/data';
 
-export function parseData(data: { series: any[] }, mapData) {
+export function parseData(data: { series: any[] }, mapData, colors) {
   const series = data.series[0];
   const frame = new DataFrameView(series);
 
   // initialize arrays
 
-  let parsedData: Array<{ in: any; out: any; name: string; value: number }> = [];
+  let parsedData: Array<{ in: any; out: any; azName: string; zaName: string; value: number }> = [];
   let infIn: Array<{ name: any; value: number }> = [];
   let infOut: Array<{ name: any; value: number }> = [];
 
   // hardcoded right now!!! group by src and dst
 
   // Retrieve panel data from panel
   frame.forEach((row) => {
-    parsedData.push({ in: row[0], out: row[1], name: `${row[0]}--${row[1]}`, value: row[2] });
+    parsedData.push({
+      in: row[0],
+      out: row[1],
+      azName: `${row[0]}--${row[1]}`,
+      zaName: `${row[1]}--${row[0]}`,
+      value: row[2],
+    });
 
     let indexIn = infIn.findIndex((e) => e.name === row[0]);
     if (indexIn >= 0) {
@@ -34,21 +40,27 @@ export function parseData(data: { series: any[] }, mapData) {
   const mapJson = JSON.parse(mapData);
 
   mapJson.edges.forEach((edge) => {
-    let match = parsedData.find((d) => d.name === edge.name);
-    if (match) {
-      edge.color = 'red';
+    let matchAZ = parsedData.find((d) => d.azName === edge.name);
+    let matchZA = parsedData.find((d) => d.zaName === edge.name);
+    if (matchAZ) {
+      edge.azColor = 'red';
     } else {
-      edge.color = 'grey';
+      edge.azColor = colors.defaultColor;
+    }
+    if (matchZA) {
+      edge.zaColor = 'red';
+    } else {
+      edge.zaColor = colors.defaultColor;
     }
   });
 
   mapJson.nodes.forEach((node) => {
     let match1 = infIn.find((d) => d.name === node.name);
     let match2 = infOut.find((d) => d.name === node.name);
     if (match1 || match2) {
-      node.color = 'red';
+      node.color = colors.nodeHighlight;
     } else {
-      node.color = 'grey';
+      node.color = colors.defaultColor;
     }
   });
 

src/module.ts

@@ -17,11 +17,26 @@ export const plugin = new PanelPlugin<MapOptions>(MapPanel)
       .addColorPicker({
         path: 'color',
         name: 'Color',
-        defaultValue: 'black',
+        defaultValue: 'grey',
       })
       .addTextInput({
         path: 'mapjson',
         name: 'Map data (json)',
         defaultValue: '',
+      })
+      .addColorPicker({
+        path: 'nodeHighlight',
+        name: 'Node highlight color',
+        defaultValue: 'red',
+      })
+      .addColorPicker({
+        path: 'azHighlight',
+        name: 'AZ highlight color',
+        defaultValue: 'blue',
+      })
+      .addColorPicker({
+        path: 'zaHighlight',
+        name: 'ZA highlight color',
+        defaultValue: 'blue',
       });
   });

src/types.ts

@@ -1,4 +1,7 @@
 export interface MapOptions {
   color: string;
   mapjson: string;
+  nodeHighlight: string;
+  azHighlight: string;
+  zaHighlight: string;
 }