add side bar with toggle and tooltip

esnet · Nov 18, 2021 · caa9d5a · caa9d5a
1 parent 8424911
commit caa9d5a
Show file tree

Hide file tree

Showing 12 changed files with 272 additions and 69 deletions.
diff --git a/dist/MANIFEST.txt b/dist/MANIFEST.txt
@@ -11,34 +11,35 @@ Hash: SHA512
     "https://dashboard.stardust.es.net/",
     "http://localhost:3000/",
     "http://localhost:3002/",
-    "https://public.stardust.es.net/"
+    "https://public.stardust.es.net/",
+    "https://gf.gc1.dev-stage.stardust.es.net/"
   ],
   "plugin": "esnet-networkmap-panel",
   "version": "1.0.0",
-  "time": 1633018230031,
+  "time": 1637182617187,
   "keyId": "7e4d0c6a708866e7",
   "files": {
     "LICENSE": "c71d239df91726fc519c6eb72d318ec65820627232b2f796219e87dcf35d0ab4",
     "CHANGELOG.md": "f039df40cb9e6dffcd8eb814227ba03e47f686d447bfb45e5eae8bdf83fa9465",
     "module.js.LICENSE.txt": "e68cc4291e057f6098c3d5cd0b3cf642d252ff9ac1751db360770a65314a4d81",
-    "module.js.map": "2fed5bbd28b99736e8e7693563a79cf46a708c02a9932802328f24351e62499d",
-    "plugin.json": "0a8e7a599f165d5fadc90747844b5058abe56e001a2c68c87da94d7bf85246f0",
+    "module.js.map": "df725d7aa30fca1ee8339c35c9c64ec5abe352ce5f569c754120d9f073bdeb78",
+    "plugin.json": "8b79888cb124380e837b24a53f75bf76ada112e1e4ce99ef110cdc8cfb5ece9e",
     "README.md": "3c5b18e53d2dbde492fe9c3c962895851aac4ac0dcb7bada0755e85a0ede2658",
     "img/slopegraph.png": "6522086b5717c31d334a4562bbec047e3d0050ee81ac081f4b2ab4d12e6ab9f1",
     "img/logo.svg": "1defc6f7e585c67657bcfd8fddc599ee7dfa82f8674413f49fa274c2cd453ec6",
-    "components/cr copy.json": "e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855",
+    "components/cr copy.json": "5665e7be30dcf03598e5583b153056dcffbbe2f636061b4b2c30929db36977b3",
     "components/old.html": "290fbe64cf9b0054e5c017f8c212c3d1ad51405b10b932f419f095add1804738",
-    "components/cr.json": "f13b9c598213b13198de1486b4044e3c2ed2752a1060c9dd99400de2b7a9ba81",
-    "module.js": "b3b0290feef753290a2307d4901e2d6b78fd7e3b369d1e8467d6633889b66b88"
+    "components/cr.json": "00be9328767f3f05b832c0c47330ed0476911c2c7660401b5fc35b6856e2ac89",
+    "module.js": "d78bff0f5aa4b9f5970ccae66ee689422d31577ae8ef4820a8a7c50a8a56108a"
   }
 }
 -----BEGIN PGP SIGNATURE-----
 Version: OpenPGP.js v4.10.1
 Comment: https://openpgpjs.org
 
-wqEEARMKAAYFAmFV4XYACgkQfk0ManCIZud5HQIHbuT16ezKZLXPREMFapsq
-+tNc/6ZZaYwbKOoy/Azw+vxjszxZwRF3uYPelW6a3XRAers1nQ1/D7dcgVc5
-OdnYM3ECCQGrsXivDRkByofzzYU75QljLEhVUC8pLivGg8rSxXi7h/xZ+V+Y
-99N7oaQ8CbzU1wmrU8S4Rd+qtE0miTCGsUmiOQ==
-=ZzkB
+wqAEARMKAAYFAmGVbJkACgkQfk0ManCIZucj8wIIm4LlNgh6UwAnhR4Rgr/f
+MxbwehJv6UMQJog28im2971KZ+StMkPRRVgWJzysCRC+WJoZt7kPItaRZNQe
+obymr44CBiTrZQyk2/i/n5a6WDVllwUoG5LO0Tr8uWPHGKIi46aRhcKL4y/9
+kIfU5BFuQfcA59zUYrej6lkdirp/G55HrEXw
+=AmVn
 -----END PGP SIGNATURE-----
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-11-04"
+    "updated": "2021-11-17"
   },
   "dependencies": {
     "grafanaDependency": ">=7.0.0",

diff --git a/src/MapPanel.tsx b/src/MapPanel.tsx
@@ -30,6 +30,21 @@ export class MapPanel extends Component<Props> {
     this.props.onOptionsChange({ ...options, mapjsonL1, mapjsonL2, mapjsonL3, startZoom, startLat, startLng });
   };
 
+  toggleLayer = (layer, value) => {
+    const { options } = this.props;
+    let { layer1, layer2, layer3 } = options;
+    if (layer === 'layer1') {
+      layer1 = value;
+    }
+    if (layer === 'layer2') {
+      layer2 = value;
+    }
+    if (layer === 'layer3') {
+      layer3 = value;
+    }
+    this.props.onOptionsChange({ ...options, layer1, layer2, layer3 });
+  };
+
   updateCenter = (zoom, center) => {
     const { options } = this.props;
     let { startLat, startLng, startZoom } = options;
@@ -118,6 +133,7 @@ export class MapPanel extends Component<Props> {
         mapDataL3={mapDataL3}
         updateMapJson={this.updateMapJson}
         updateCenter={this.updateCenter}
+        toggleLayer={this.toggleLayer}
         editMode={options.editMode}
       />
     );

diff --git a/src/components/Canvas.tsx b/src/components/Canvas.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect } from 'react';
 import NetworkMap from './RenderMap.js';
+import { SideBar } from 'components/SideBar';
 import '../css/esmap.css';
 import '../css/leaflet.css';
 // import { urlUtil } from '@grafana/data';
@@ -26,10 +27,12 @@ export const Canvas = (props) => {
   // } else {
   //   props.editMode = 0;
   // }
-
+  const mapHeight = props.height - 25;
+  const tooltipWidth = 150;
+  const mapWidth = width - tooltipWidth;
   useEffect(() => {
     const map = new NetworkMap('Map_' + panelId);
-    var thisMap = map.renderMap(data, mapData, options, updateMapJson, updateCenter);
+    var thisMap = map.renderMap(data, mapData, options, updateMapJson, updateCenter, mapWidth, height);
 
     return () => {
       // updateMapJson();
@@ -40,16 +43,20 @@ export const Canvas = (props) => {
       }
     };
   }, [width, height, panelId, editMode, layer2, layer1, layer3]); // adding options var here breaks it
-  const mapHeight = props.height - 25;
-  const tooltipWidth = 100;
-  const mapWidth = width - tooltipWidth;
 
   return (
     <div>
-      <div className={'tooltip'}></div>
+      {/* <div className={'tooltip'}></div> */}
       <div id={'Map_' + props.panelId} style={{ height: mapHeight, width: mapWidth, float: 'left' }}></div>
-      <div style={{ height: mapHeight, width: tooltipWidth, background: 'black', float: 'left' }}></div>
-      <button type="button" id="edit_mode">
+      <SideBar
+        height={height}
+        width={tooltipWidth}
+        panelId={panelId}
+        options={options}
+        editMode={options.editMode}
+        toggleLayer={props.toggleLayer}
+      />
+      <button type={'button'} id={'edit_mode'}>
         Turn Edit Mode Off
       </button>
     </div>

diff --git a/src/components/RenderMap.js b/src/components/RenderMap.js
@@ -17,7 +17,7 @@ export default class NetworkMap {
    * @param hoverColor - the color the lines will change to when hovering, set in options panel
    */
 
-  renderMap(parsedData, mapData, options, updateMapJson, updateCenter) {
+  renderMap(parsedData, mapData, options, updateMapJson, updateCenter, width, height) {
     if (!parsedData || !mapData) {
       return;
     }
@@ -66,7 +66,7 @@ export default class NetworkMap {
     //---  note:  1 map could have multiple esmap svg layers
     //---         this can be used to allow leaflet to turn on and off layers at
     //---         different zoom levels in the future(imagine a regional and national map)
-    var nm = new es.EsMap(map, svg, div, d3.curveNatural, options, updateMapJson, updateCenter);
+    var nm = new es.EsMap(map, svg, div, d3.curveNatural, options, updateMapJson, updateCenter, width, height);
 
     const params = urlUtil.getUrlSearchParams();
     if (params.editPanel != null) {
@@ -103,7 +103,6 @@ export default class NetworkMap {
     if (options.layer3 && mapData.layer3) {
       var g3 = nm.addNetLayer('layer3', mapData.layer3);
     }
-    // twinkle(nm, g2, 'esnet');
 
     //----  helper
     function getRandomInt(min, max) {

diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import '../css/esmap.css';
+import '../css/leaflet.css';
+// import { urlUtil } from '@grafana/data';
+
+export const SideBar = (props) => {
+  const layer2 = props.options.layer2;
+  const layer1 = props.options.layer1;
+  const layer3 = props.options.layer3;
+  const toggleLayer = props.toggleLayer;
+  const mapHeight = props.height - 25;
+  const tooltipWidth = 150;
+
+  return (
+    <div style={{ height: mapHeight, width: tooltipWidth, background: '#B5B7BD', float: 'left', padding: '2px' }}>
+      <br />
+      <h3>Map Layers</h3>
+      <div style={{ padding: '5px' }}>
+        <label className="switch" id="layer1Switch">
+          <input
+            type="checkbox"
+            name="layer1"
+            checked={layer1}
+            onChange={(e) => toggleLayer('layer1', e.target.checked)}
+          />
+          <span className="slider"></span>
+        </label>
+        {props.options.layerName1}
+      </div>
+      <div style={{ padding: '5px' }}>
+        <label className="switch">
+          <input
+            type="checkbox"
+            name="layer2"
+            checked={layer2}
+            onChange={(e) => toggleLayer('layer2', e.target.checked)}
+          />
+          <span className="slider"></span>
+        </label>
+        {props.options.layerName2}
+      </div>
+      <div style={{ padding: '5px' }}>
+        <label className="switch">
+          <input
+            type="checkbox"
+            name="layer3"
+            checked={layer3}
+            onChange={(e) => toggleLayer('layer3', e.target.checked)}
+          />
+          <span className="slider"></span>
+        </label>
+        {props.options.layerName3}
+      </div>
+      <div style={{ paddingTop: '10px' }}>
+        <h3>Tooltip</h3>
+        <div className={'tooltip'} id="tooltip"></div>
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/esmap.js b/src/components/esmap.js
@@ -72,13 +72,21 @@ function renderEdges(g, data, ref) {
       d3.select(this).attr('class', function (d) {
         return 'animated-edge edge-az edge-az-' + d.name;
       });
-      div
+      // div
+      //   .html(() => {
+      //     var text = '<p><b>' + d.AZname + '</b></p><p><b>Volume: </b> ' + d.AZdisplayValue + '</p>';
+      //     return text;
+      //   })
+      //   .style('left', ref.width + 'px')
+      //   .style('top', ref.height + 100 + 'px')
+      //   .transition()
+      //   .duration(500)
+      //   .style('opacity', 0.8);
+      d3.selectAll('#tooltip')
         .html(() => {
           var text = '<p><b>' + d.AZname + '</b></p><p><b>Volume: </b> ' + d.AZdisplayValue + '</p>';
           return text;
         })
-        .style('left', event.pageX + 10 + 'px')
-        .style('top', event.pageY - 28 + 'px')
         .transition()
         .duration(500)
         .style('opacity', 0.8);
@@ -116,20 +124,28 @@ function renderEdges(g, data, ref) {
     })
     .attr('pointer-events', 'visiblePainted')
     .on('mouseover', function (event, d) {
-      div
+      // div
+      //   .html(() => {
+      //     var text = '<p><b>' + d.ZAname + '</b></p><p><b>Volume: </b> ' + d.ZAdisplayValue + '</p>';
+      //     return text;
+      //   })
+      //   // .attr('class', 'tooltip')
+      //   .style('left', ref.width + 'px')
+      //   .style('top', ref.height + 100 + 'px')
+      //   .transition()
+      //   .duration(500)
+      //   .style('opacity', 0.8);
+      d3.select(this).attr('class', function (d) {
+        return 'animated-edge edge-za edge-za-' + d.name;
+      });
+      d3.selectAll('#tooltip')
         .html(() => {
           var text = '<p><b>' + d.ZAname + '</b></p><p><b>Volume: </b> ' + d.ZAdisplayValue + '</p>';
           return text;
         })
-        // .attr('class', 'tooltip')
-        .style('left', event.pageX + 'px')
-        .style('top', event.pageY - 28 + 'px')
         .transition()
         .duration(500)
         .style('opacity', 0.8);
-      d3.select(this).attr('class', function (d) {
-        return 'animated-edge edge-za edge-za-' + d.name;
-      });
     })
     .on('mouseout', function (d, i) {
       d3.select(this).attr('class', function (d) {
@@ -287,8 +303,8 @@ function renderNodes(g, data, ref) {
             <p><b>Out Volume: </b> ${d.outValue}</p>`;
           return text;
         })
-        .style('left', event.pageX + 'px')
-        .style('top', event.pageY - 28 + 'px')
+        .style('left', ref.width + 'px')
+        .style('top', ref.height + 100 + 'px')
         .transition()
         .duration(500)
         .style('opacity', 0.8);

diff --git a/src/css/esmap.css b/src/css/esmap.css
@@ -60,17 +60,73 @@ svg circle.controlPoint {
 div.tooltip {	
     position: absolute;			
     text-align: left;
-    color: #f4f5f5;			
-    width: auto;					
+    /* color: #f4f5f5;			 */
+    /* width: auto;					 */
     height: auto;					
     padding: 8px 8px 0px 8px;				
     font: sans-serif;
     font-size: 1rem;	
     font-weight: 400;	
-    background: #24292e;	
+    /* background: #24292e;	 */
     border: none;		
     border-radius: 2px;			
     pointer-events: none;	
     line-height: 0.9;
 }
 
+/* The switch - the box around the slider */
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 45px;
+  height: 26px;
+}
+
+/* Hide default HTML checkbox */
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+  margin-top: 5px;
+}
+
+/* The slider */
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: .4s;
+  transition: .4s;
+  border-radius: 25px;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 20px;
+  width: 20px;
+  left: 4px;
+  bottom: 3px;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+  border-radius: 50%;
+}
+
+input:checked + .slider {
+  background-color: #4EC1E0;
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px #4EC1E0;
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(18px);
+  -ms-transform: translateX(18px);
+  transform: translateX(18px);
+}