separate layer options

esnet · Oct 29, 2021 · e191568 · e191568
1 parent e9098e0
commit e191568
Show file tree

Hide file tree

Showing 8 changed files with 24,148 additions and 24 deletions.
diff --git a/dist/module.js b/dist/module.js
diff --git a/dist/module.js.map b/dist/module.js.map
diff --git a/dist/plugin.json b/dist/plugin.json
@@ -33,7 +33,7 @@
       }
     ],
     "version": "1.0.0",
-    "updated": "2021-10-28"
+    "updated": "2021-10-29"
   },
   "dependencies": {
     "grafanaDependency": ">=7.0.0",

diff --git a/src/MapPanel.tsx b/src/MapPanel.tsx
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { PanelProps } from '@grafana/data';
+import { PanelProps, urlUtil } from '@grafana/data';
 import { MapOptions } from 'types';
 import { parseData } from 'dataParser';
 import { Canvas } from 'components/Canvas';
@@ -38,12 +38,19 @@ export class MapPanel extends Component<Props> {
 
   render() {
     const { options, data, width, height, id } = this.props;
+    var params = urlUtil.getUrlSearchParams();
+    if (params.editPanel != null) {
+      options.editMode = true;
+      // call update map?
+    } else {
+      options.editMode = false;
+    }
     var colorsL1 = {
-      defaultColor: options.color,
+      defaultColor: options.color1,
       nodeHighlight: options.nodeHighlightL1,
     };
     var colorsL2 = {
-      defaultColor: options.color,
+      defaultColor: options.color2,
       nodeHighlight: options.nodeHighlightL2,
     };
     var fieldsL1 = {
@@ -85,7 +92,7 @@ export class MapPanel extends Component<Props> {
         mapDataL2={mapDataL2}
         updateMapJson={this.updateMapJson}
         updateCenter={this.updateCenter}
-        editMode={0}
+        editMode={options.editMode}
       />
     );
   }

diff --git a/src/components/Canvas.tsx b/src/components/Canvas.tsx
@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 import NetworkMap from './RenderMap.js';
 import '../css/esmap.css';
 import '../css/leaflet.css';
-import { urlUtil } from '@grafana/data';
+// import { urlUtil } from '@grafana/data';
 
 export const Canvas = (props) => {
   // var print = props.options.mapjson;
@@ -18,13 +18,13 @@ export const Canvas = (props) => {
   const layer2 = props.options.layer2;
   const layer1 = props.options.layer1;
 
-  var params = urlUtil.getUrlSearchParams();
-  if (params.editPanel != null) {
-    props.editMode = 1;
-    // call update map?
-  } else {
-    props.editMode = 0;
-  }
+  // var params = urlUtil.getUrlSearchParams();
+  // if (params.editPanel != null) {
+  //   props.editMode = 1;
+  //   // call update map?
+  // } else {
+  //   props.editMode = 0;
+  // }
 
   useEffect(() => {
     const map = new NetworkMap('Map_' + panelId);

diff --git a/src/components/esmap.js b/src/components/esmap.js
@@ -227,7 +227,9 @@ function renderEdgeControl(g, data, ref) {
   function endDrag(evt, d) {
     var zoom = ref.leafletMap.getZoom();
     var center = L.latLng(ref.leafletMap.getCenter());
-    ref.updateMapJson(data['layer1'], data['layer2'], zoom, center);
+    console.log(ref.data);
+    console.log(data);
+    ref.updateMapJson(ref.data['layer1'], ref.data['layer2'], zoom, center);
   }
 
   data.edges.forEach(function (d) {

diff --git a/src/module.ts b/src/module.ts
@@ -10,12 +10,6 @@ const layer2Bool = (layer2: boolean) => (config: MapOptions) => config.layer2 ==
 const layer1Bool = (layer1: boolean) => (config: MapOptions) => config.layer1 === layer1;
 
 plugin.setPanelOptions((builder) => {
-  builder.addColorPicker({
-    path: 'color',
-    name: 'Default color',
-    description: 'The default color for nodes and links',
-    defaultValue: 'grey',
-  });
   builder.addNumberInput({
     path: 'startLat',
     name: 'Starting Latitude of map',
@@ -53,6 +47,14 @@ plugin.setPanelOptions((builder) => {
     description: 'JSON with edges and nodes of network map',
     defaultValue: '',
   });
+  builder.addColorPicker({
+    path: 'color1',
+    name: 'Layer 1 Default color',
+    category: LayersCategory,
+    showIf: layer1Bool(true),
+    description: 'The default color for nodes and links on Layer 1',
+    defaultValue: 'grey',
+  });
   builder.addTextInput({
     path: 'endpointIdL1',
     name: 'Layer 1 Endpoint Identifier',
@@ -121,6 +123,14 @@ plugin.setPanelOptions((builder) => {
     showIf: layer2Bool(true),
     defaultValue: '',
   });
+  builder.addColorPicker({
+    path: 'color2',
+    name: 'Layer 2 Default color',
+    category: LayersCategory,
+    showIf: layer2Bool(true),
+    description: 'The default color for nodes and links on Layer 2',
+    defaultValue: 'grey',
+  });
   builder.addTextInput({
     path: 'endpointIdL2',
     name: 'Layer 2 Endpoint Identifier',

diff --git a/src/types.ts b/src/types.ts
@@ -1,5 +1,6 @@
 export interface MapOptions {
-  color: string;
+  color1: string;
+  color2: string;
   layer1: boolean;
   mapjsonL1: string;
   nodeHighlightL1: string;
@@ -23,4 +24,5 @@ export interface MapOptions {
   startLat: number;
   startLng: number;
   startZoom: number;
+  editMode: boolean;
 }