separate layer data

esnet · Oct 28, 2021 · e9098e0 · e9098e0
1 parent 12c4a31
commit e9098e0
Show file tree

Hide file tree

Showing 9 changed files with 90 additions and 42 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-20"
+    "updated": "2021-10-28"
   },
   "dependencies": {
     "grafanaDependency": ">=7.0.0",

diff --git a/src/MapPanel.tsx b/src/MapPanel.tsx
@@ -15,8 +15,12 @@ export class MapPanel extends Component<Props> {
   updateMapJson = (newDataL1, newDataL2, zoom, center) => {
     const { options } = this.props;
     let { mapjsonL1, mapjsonL2, startLat, startLng, startZoom } = options;
-    mapjsonL1 = JSON.stringify(newDataL1);
-    mapjsonL2 = JSON.stringify(newDataL2);
+    if (newDataL1 != null) {
+      mapjsonL1 = JSON.stringify(newDataL1);
+    }
+    if (newDataL2 != null) {
+      mapjsonL2 = JSON.stringify(newDataL2);
+    }
     startZoom = zoom;
     startLat = center.lat;
     startLng = center.lng;

diff --git a/src/components/Canvas.tsx b/src/components/Canvas.tsx
@@ -14,7 +14,9 @@ export const Canvas = (props) => {
   const height = props.height;
   const width = props.width;
   const updateCenter = props.updateCenter;
-  var editMode = props.editMode;
+  const editMode = props.editMode;
+  const layer2 = props.options.layer2;
+  const layer1 = props.options.layer1;
 
   var params = urlUtil.getUrlSearchParams();
   if (params.editPanel != null) {
@@ -36,7 +38,7 @@ export const Canvas = (props) => {
         thisMap.remove();
       }
     };
-  }, [width, height, panelId, editMode]); // adding options var here breaks it
+  }, [width, height, panelId, editMode, layer2, layer1]); // adding options var here breaks it
   const mapHeight = props.height - 25;
 
   return (

diff --git a/src/components/RenderMap.js b/src/components/RenderMap.js
@@ -43,8 +43,9 @@ export default class NetworkMap {
       zoomAnimation: false,
       fadeAnimation: false,
       zoomSnap: 0.25,
-      zoomDelta: 0.5,
+      zoomDelta: 0.25,
       scrollWheelZoom: false,
+      doubleClickZoom: false,
     }).setView([startLat, startLng], startZoom);
     L.tileLayer(
       'https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}',
@@ -92,9 +93,12 @@ export default class NetworkMap {
 
     var edit_mode = d3.select('button#edit_mode').on('click', toggleEdit);
 
-    var g1 = nm.addNetLayer('esnet', mapData.layer1); // DO IT LIKE THISSSSS
+    // Draw the map json data!!!
+    if (options.layer1) {
+      var g1 = nm.addNetLayer('layer1', mapData.layer1); 
+    }
     if (options.layer2) {
-      var g2 = nm.addNetLayer('esnet', mapData.layer2);
+      var g2 = nm.addNetLayer('layer2', mapData.layer2);
     }
     // twinkle(nm, g2, 'esnet');
 

diff --git a/src/components/esmap.js b/src/components/esmap.js
@@ -218,10 +218,16 @@ function renderEdgeControl(g, data, ref) {
     //--- rerender stuff
     ref.update();
     //--- this is where we can update json????
+    // var zoom = ref.leafletMap.getZoom();
+    // var center = L.latLng(ref.leafletMap.getCenter());
+    // ref.updateMapJson(data, zoom, center);
+    // find a way to persist zoom and center lat/lng
+  }
+
+  function endDrag(evt, d) {
     var zoom = ref.leafletMap.getZoom();
     var center = L.latLng(ref.leafletMap.getCenter());
-    ref.updateMapJson(data, zoom, center);
-    // find a way to persist zoom and center lat/lng
+    ref.updateMapJson(data['layer1'], data['layer2'], zoom, center);
   }
 
   data.edges.forEach(function (d) {
@@ -234,7 +240,7 @@ function renderEdgeControl(g, data, ref) {
       .attr('r', 4)
       .attr('class', 'control controlPoint')
       .merge(feature)
-      .call(d3.drag().on('drag', dragged));
+      .call(d3.drag().on('drag', dragged).on('end', endDrag));
 
     my_g
       .selectAll('circle')

diff --git a/src/module.ts b/src/module.ts
@@ -2,10 +2,12 @@ import { FieldConfigProperty, PanelPlugin, FieldOverrideContext, getFieldDisplay
 import { MapOptions } from './types';
 import { MapPanel } from './MapPanel';
 
-const OptionsCategory = ['Choose Fields'];
+const FieldsCategory = ['Choose Fields'];
+const LayersCategory = ['Layer options'];
 
 export const plugin = new PanelPlugin<MapOptions>(MapPanel);
 const layer2Bool = (layer2: boolean) => (config: MapOptions) => config.layer2 === layer2;
+const layer1Bool = (layer1: boolean) => (config: MapOptions) => config.layer1 === layer1;
 
 plugin.setPanelOptions((builder) => {
   builder.addColorPicker({
@@ -14,27 +16,64 @@ plugin.setPanelOptions((builder) => {
     description: 'The default color for nodes and links',
     defaultValue: 'grey',
   });
+  builder.addNumberInput({
+    path: 'startLat',
+    name: 'Starting Latitude of map',
+    description: 'This will be the center of the map when it loads. (numbers only)',
+    defaultValue: 42,
+  });
+  builder.addNumberInput({
+    path: 'startLng',
+    name: 'Starting Longitude of map',
+    description: 'This will be the center of the map when it loads. (numbers only)',
+    defaultValue: -105,
+  });
+  builder.addSliderInput({
+    path: 'startZoom',
+    name: 'Starting zoom level of map',
+    defaultValue: 5,
+    settings: {
+      min: 1,
+      max: 15,
+      step: 0.5,
+    },
+  });
+
+  builder.addBooleanSwitch({
+    path: 'layer1',
+    name: 'Layer 1 on',
+    category: LayersCategory,
+    defaultValue: true,
+  });
   builder.addTextInput({
     path: 'mapjsonL1',
     name: 'Layer 1 Map data (json)',
+    category: LayersCategory,
+    showIf: layer1Bool(true),
     description: 'JSON with edges and nodes of network map',
     defaultValue: '',
   });
   builder.addTextInput({
     path: 'endpointIdL1',
     name: 'Layer 1 Endpoint Identifier',
+    category: LayersCategory,
+    showIf: layer1Bool(true),
     description: 'The endpoint identifier in the meta data to match to the query',
     defaultValue: 'router',
   });
   builder.addColorPicker({
     path: 'nodeHighlightL1',
     name: 'Layer 1 Node highlight color',
+    category: LayersCategory,
+    showIf: layer1Bool(true),
     description: 'The color to highlight nodes that match the query',
     defaultValue: 'red',
   });
   builder.addSliderInput({
     path: 'nodeWidthL1',
     name: 'Layer 1 Node Size',
+    category: LayersCategory,
+    showIf: layer1Bool(true),
     defaultValue: 5,
     settings: {
       min: 1,
@@ -45,6 +84,8 @@ plugin.setPanelOptions((builder) => {
   builder.addSliderInput({
     path: 'edgeWidthL1',
     name: 'Layer 1 Edge Width',
+    category: LayersCategory,
+    showIf: layer1Bool(true),
     defaultValue: 3,
     settings: {
       min: 1,
@@ -55,6 +96,8 @@ plugin.setPanelOptions((builder) => {
   builder.addSliderInput({
     path: 'pathOffsetL1',
     name: 'Layer 1 Edge Offset',
+    category: LayersCategory,
+    showIf: layer1Bool(true),
     description: 'The offset between AZ path and ZA path',
     defaultValue: 3,
     settings: {
@@ -67,32 +110,37 @@ plugin.setPanelOptions((builder) => {
   builder.addBooleanSwitch({
     path: 'layer2',
     name: 'Layer 2 on',
+    category: LayersCategory,
     defaultValue: false,
   });
   builder.addTextInput({
     path: 'mapjsonL2',
     name: 'Layer 2 Map data (json)',
+    category: LayersCategory,
     description: 'JSON with edges and nodes of network map',
     showIf: layer2Bool(true),
     defaultValue: '',
   });
   builder.addTextInput({
     path: 'endpointIdL2',
     name: 'Layer 2 Endpoint Identifier',
+    category: LayersCategory,
     description: 'The endpoint identifier in the meta data to match to the query',
     showIf: layer2Bool(true),
     defaultValue: 'router',
   });
   builder.addColorPicker({
     path: 'nodeHighlightL2',
     name: 'Layer 2 Node highlight color',
+    category: LayersCategory,
     description: 'The color to highlight nodes that match the query',
     showIf: layer2Bool(true),
     defaultValue: 'red',
   });
   builder.addSliderInput({
     path: 'nodeWidthL2',
     name: 'Layer 2 Node Size',
+    category: LayersCategory,
     showIf: layer2Bool(true),
     defaultValue: 5,
     settings: {
@@ -104,6 +152,7 @@ plugin.setPanelOptions((builder) => {
   builder.addSliderInput({
     path: 'edgeWidthL2',
     name: 'Layer 2 Edge Width',
+    category: LayersCategory,
     showIf: layer2Bool(true),
     defaultValue: 3,
     settings: {
@@ -116,6 +165,7 @@ plugin.setPanelOptions((builder) => {
     path: 'pathOffsetL2',
     name: 'Layer 2 Edge Offset',
     description: 'The offset between AZ path and ZA path',
+    category: LayersCategory,
     showIf: layer2Bool(true),
     defaultValue: 3,
     settings: {
@@ -125,33 +175,12 @@ plugin.setPanelOptions((builder) => {
     },
   });
 
-  builder.addNumberInput({
-    path: 'startLat',
-    name: 'Starting Latitude of map',
-    description: 'This will be the center of the map when it loads. (numbers only)',
-    defaultValue: 42,
-  });
-  builder.addNumberInput({
-    path: 'startLng',
-    name: 'Starting Longitude of map',
-    description: 'This will be the center of the map when it loads. (numbers only)',
-    defaultValue: -105,
-  });
-  builder.addSliderInput({
-    path: 'startZoom',
-    name: 'Starting zoom level of map',
-    defaultValue: 5,
-    settings: {
-      min: 1,
-      max: 15,
-      step: 0.5,
-    },
-  });
   builder.addSelect({
     path: 'srcFieldL1',
     name: 'Layer 1 Source Field',
     description: 'Select the field to match source nodes',
-    category: OptionsCategory,
+    category: FieldsCategory,
+    showIf: layer1Bool(true),
     settings: {
       allowCustomValue: false,
       options: [],
@@ -174,7 +203,8 @@ plugin.setPanelOptions((builder) => {
     path: 'dstFieldL1',
     name: 'Layer 1 Destination Field',
     description: 'Select the field to match destination nodes',
-    category: OptionsCategory,
+    category: FieldsCategory,
+    showIf: layer1Bool(true),
     settings: {
       allowCustomValue: false,
       options: [],
@@ -197,7 +227,8 @@ plugin.setPanelOptions((builder) => {
     path: 'valFieldL1',
     name: 'Layer 1 Value Field',
     description: 'Select the field to use for data values',
-    category: OptionsCategory,
+    category: FieldsCategory,
+    showIf: layer1Bool(true),
     settings: {
       allowCustomValue: false,
       options: [],
@@ -221,7 +252,7 @@ plugin.setPanelOptions((builder) => {
     name: 'Layer 2 Source Field',
     description: 'Select the field to match source nodes',
     showIf: layer2Bool(true),
-    category: OptionsCategory,
+    category: FieldsCategory,
     settings: {
       allowCustomValue: false,
       options: [],
@@ -245,7 +276,7 @@ plugin.setPanelOptions((builder) => {
     name: 'Layer 2 Destination Field',
     description: 'Select the field to match destination nodes',
     showIf: layer2Bool(true),
-    category: OptionsCategory,
+    category: FieldsCategory,
     settings: {
       allowCustomValue: false,
       options: [],
@@ -269,7 +300,7 @@ plugin.setPanelOptions((builder) => {
     name: 'Layer 2 Value Field',
     description: 'Select the field to use for data values',
     showIf: layer2Bool(true),
-    category: OptionsCategory,
+    category: FieldsCategory,
     settings: {
       allowCustomValue: false,
       options: [],

diff --git a/src/types.ts b/src/types.ts
@@ -1,5 +1,6 @@
 export interface MapOptions {
   color: string;
+  layer1: boolean;
   mapjsonL1: string;
   nodeHighlightL1: string;
   srcFieldL1: string;