add support for hide/show sidebar. Add support for hover tooltips. Up…

…date animation for edge hover/select

src/MapPanel.tsx

@@ -15,12 +15,19 @@ export class MapPanel extends Component<Props> {
 
   constructor(props: Props) {
     super(props);
-    // ref approach... doesn't seem to want to work.
     this.mapCanvas = React.createRef();
     this.lastOptions = this.props.options;
     this.theme = createTheme();
+    PubSub.subscribe('returnMapCenterAndZoom', this.updateCenter);
   }
 
+  updateCenter = (centerData) => {
+    const startLat = centerData.center.lat;
+    const startLng = centerData.center.lng;
+    const startZoom = centerData.zoom;
+    this.props.onOptionsChange({ ...this.props.options, startLat, startLng, startZoom });
+  };
+
   // A function to update the map jsons in the Edit panel based on the current map state
   // Used in esmap.js
   updateMapJson = (mapData) => {
@@ -47,6 +54,7 @@ export class MapPanel extends Component<Props> {
       'tileSetLayer',
       'boundaryLayer',
       'labelLayer',
+      'showSidebar',
 
       'layer1',
       'color1',

src/components/EditingInterface.component.js

@@ -20,13 +20,21 @@ class EditingInterface extends BindableHTMLElement {
         PubSub.subscribe("clearSelection", ()=>{ 
             this.selection = false;
         }, this)
-        PubSub.subscribe("toggleNodeEdit", ()=>{
+        PubSub.subscribe("toggleNodeEdit", (value)=>{
             this._edgeEditMode = false;
-            this.nodeEditMode = !this.nodeEditMode;
+            if(value === null || value === undefined){
+                this.nodeEditMode = !this.nodeEditMode;
+            } else {
+                this.nodeEditMode = value;
+            }
         }, this)
-        PubSub.subscribe("toggleEdgeEdit", ()=>{
+        PubSub.subscribe("toggleEdgeEdit", (value)=>{
             this._nodeEditMode = false;
-            this.edgeEditMode = !this.edgeEditMode;
+            if(value === null || value === undefined){
+                this.edgeEditMode = !this.edgeEditMode;
+            } else {
+                this.edgeEditMode = value;
+            }
         }, this)
         PubSub.subscribe("showEditNodeDialog", (evtData)=>{
             this._selectedNode = evtData['object'];

src/components/MapCanvas.component.js

@@ -6,6 +6,7 @@ import "./SideBar.component.js"
 import * as maplayers from './lib/maplayers.js';
 import * as pubsub from './lib/pubsub.js';
 import { testJsonSchema } from './lib/utils.js';
+
 const PubSub = pubsub.PubSub;
 const PrivateMessageBus = pubsub.PrivateMessageBus;
 
@@ -36,6 +37,15 @@ export class MapCanvas extends HTMLElement {
     PubSub.subscribe('updateMapTopology', this.updateMapTopology, this);
     PubSub.subscribe('updateMapDimensions', this.updateMapDimensions, this);
     PubSub.subscribe('updateTopology', () => { this.updateTopology(this.topology) }, this);
+    PubSub.subscribe('getMapCenterAndZoom', (() => {
+      var self = this;
+      return () => {
+        PubSub.publish("returnMapCenterAndZoom", {
+          center: self.map.leafletMap.getBounds().getCenter(),
+          zoom: self.map.leafletMap.getZoom()
+        })
+      } 
+    })());
   }
 
   get topology() {
@@ -83,6 +93,20 @@ export class MapCanvas extends HTMLElement {
       this._options[k] = options[k];
     })
 
+    if(changed.indexOf('showSidebar') >= 0){
+      var edgeEditMode = this.editingInterface.edgeEditMode;
+      var nodeEditMode = this.editingInterface.nodeEditMode;
+      this.shadow.remove();
+      this.shadow = null;
+      this.render();
+      this.newMap();
+      if(edgeEditMode){
+        PubSub.publish("toggleEdgeEdit", edgeEditMode, this);
+      }
+      if(nodeEditMode){
+        PubSub.publish("toggleNodeEdit", nodeEditMode, this);
+      }
+    }
     if (
       changed.indexOf('tileSetLayer')>=0 ||
       changed.indexOf('boundaryLayer')>=0 ||
@@ -215,10 +239,11 @@ export class MapCanvas extends HTMLElement {
         ${leafletCss}
       </style>
 
+
       <div id='map'>
         <esnet-map-editing-interface></esnet-map-editing-interface>
       </div>
-      <esnet-map-side-bar></esnet-map-side-bar>`;
+      ${ this.options.showSidebar ? "<esnet-map-side-bar></esnet-map-side-bar>" : "" }`;
       this.mapContainer = this.shadow.querySelector("#map");
 
       this.editingInterface = this.shadow.querySelector("esnet-map-editing-interface");
@@ -227,14 +252,20 @@ export class MapCanvas extends HTMLElement {
       this.editingInterface.updateTopology = this.updateTopology;
 
       this.sideBar = this.shadow.querySelector("esnet-map-side-bar");
-      this.sideBar.mapCanvas = this;
+      if(this.sideBar){
+        this.sideBar.mapCanvas = this;
+      }
     }
     this.renderStyle();
     if(this.height){
       this.mapContainer.style.height = this.height + 'px';
     }
     if(this.width){
-      this.mapContainer.style.width = (this.width * 0.80) - 5 + 'px';
+      if(this.options.showSidebar){
+        this.mapContainer.style.width = (this.width * 0.80) - 5 + 'px';
+      } else {
+        this.mapContainer.style.width = this.width + "px";
+      }
     }
     if(!this.map && this.options && this.topology){
       this.newMap();

src/components/NetworkMap.js

@@ -5,22 +5,24 @@ import * as utils from './lib/utils.js';
 
 // these imports are the result of very significant trial and error.
 // they allow ES6 browser imports to propagate, but also use static import
-// statements, without which some of these libraries (d3 in particular) 
+// statements, without which some of these libraries (d3 in particular)
 // will not function. This can also be accomplished using the `import()` function
 // but it causes the code to become complexly asynchronous. keeping these as
 // static imports allows the best balance of simplicity and functionality
 import * as d3_import from './lib/d3.min.js';
 // populate either with import or ES6 root-scope version
-const d3 = window['d3'] || d3_import; 
+const d3 = window['d3'] || d3_import;
 
 // dynamic import of modules that must be handled this way
 var locationService = { "partial": function(){ } }
 // require is only defined in the webpack context, not ES6
 var L = window['L'];
-if(typeof require !== "undefined"){
+try {
   var L = require('./lib/leaflet.js');
-  const m = require('@grafana/runtime');
-  locationService = m.locationService;
+  /*const m = require('@grafana/runtime');
+  locationService = m.locationService;*/
+} catch (e) {
+  console.log(e);
 }
 
 export default class NetworkMap {
@@ -74,30 +76,27 @@ export default class NetworkMap {
       setLocation[dashboardVariable] = [
           srcVariable + "|=|" + event.nodeA,
           dstVariable + "|=|" + event.nodeZ
-      ]        
+      ]
     }
 
     locationService.partial(setLocation, false)
   }
 
-  toggleEdgeEdit() {
-    if (!!this.esmap.editEdges) {
+  setEdgeEdit(bool){
       this.esmap.editNodeMode(false);
+      this.esmap.editEdgeMode(bool);
+  }
+  setNodeEdit(bool){
       this.esmap.editEdgeMode(false);
-    } else {
-      this.esmap.editNodeMode(false);
-      this.esmap.editEdgeMode(true);
-    }
+      this.esmap.editNodeMode(bool);
+  }
+
+  toggleEdgeEdit() {
+    this.setEdgeEdit(!this.esmap.editEdges);
   }
 
   toggleNodeEdit() {
-    if (!!this.esmap.editNodes) {
-      this.esmap.editEdgeMode(false);
-      this.esmap.editNodeMode(false);
-    } else {
-      this.esmap.editEdgeMode(false);
-      this.esmap.editNodeMode(true);
-    }
+    this.setNodeEdit(!this.esmap.editNodes);
   }
 
   renderMapLayers() {

src/components/SideBar.component.js

@@ -31,7 +31,8 @@ class SideBar extends BindableHTMLElement {
     PubSub.publish("toggleLayer", {"layer": layer, "visible": value}, this);
   }
 
-  showTooltip(tooltip){
+  showTooltip(data){
+    var tooltip = data.text;
     var tooltipTarget = this.shadow.querySelector("#sidebar-tooltip");
     tooltipTarget.style.opacity = 1; // this gets set incorrectly at times.
     tooltipTarget.innerHTML = tooltip;

src/components/css/esmap.css.js

@@ -1,12 +1,19 @@
-export const esmapCss = `.leaflet-pane > svg path {
+export const esmapCss = `
+.leaflet-pane > svg path {
     pointer-events: all;
 }
 
 .map-panel {
   position: relative;
 }
 
+svg path.edge-az {
+  marker-start: url("#arrow");
+}
 
+svg path.edge-za {
+  marker-start: url("#arrow");
+}
 
 svg circle.node {
         /* fill: #999; */
@@ -21,23 +28,23 @@ svg path.edge {
         pointer-events: visiblePainted !important;
 }
 
-svg path.animated-edge {
-    stroke-linecap: butt;
-        stroke-width: 5;
-        /* stroke: #aaa; */
+svg path.animated-edge.edge-az {
+        stroke: transparent;
+        stroke-linecap: butt;
         fill:  none;
-    cursor: crosshair;
+        cursor: crosshair;
+}
 
-        stroke-dasharray:  90 10 ;
-        stroke-dashoffset: 100;
-        animation-name: dash;
-        animation-duration: 5s;
-        animation-timing-function: steps(25,start);
-        animation-delay: 0s;
-        animation-direction: forwards;
-        animation-iteration-count: infinite;
-        animation-play-state: running;
+svg path.animated-edge.edge-za {
+        stroke: transparent;
+        stroke-linecap: butt;
+        fill:  none;
+        cursor: crosshair;
+}
+svg path.animated-edge.edge-az.selected {
+}
 
+svg path.animated-edge.edge-za.selected {
 }
 
 @keyframes dash {
@@ -62,6 +69,26 @@ svg circle.controlPoint {
         cursor: move;
 }
 
+div.tooltip-hover {
+  position:absolute;
+  z-index:10000;
+  background: white;
+  border-radius:4px;
+  padding:10px;
+  margin:10px;
+  max-width:250px;
+  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
+}
+
+div.tooltip-hover p:first-of-type {
+  margin-top:0;
+}
+
+div.tooltip-hover p {
+  margin-top: 6px;
+  margin-bottom:0;
+}
+
 div.sidebar-tooltip {   
     position: absolute;         
     text-align: left;