Error details support

src/MapPanel.tsx

@@ -18,6 +18,8 @@ export class MapPanel extends Component<MapPanelProps> {
   theme: any;
   mapjsonCache: any;
   subscriptionHandle: any;
+  variableChangeHandle: any;
+  _configurationUrl: any;
 
   constructor(props: MapPanelProps) {
     super(props);
@@ -110,7 +112,7 @@ export class MapPanel extends Component<MapPanelProps> {
     this.props.onOptionsChange(update);
   };
 
-  calculateOptionsChanges = () => {
+  calculateOptionsChanges = (currOptions) => {
     let changed: string[];
     changed = [];
 
@@ -136,7 +138,7 @@ export class MapPanel extends Component<MapPanelProps> {
       'customNodeTooltip',
       'customEdgeTooltip',
       'useConfigurationUrl',
-
+      'configurationUrl',
       'resolvedLat',
       'resolvedLng',
     ];
@@ -157,21 +159,21 @@ export class MapPanel extends Component<MapPanelProps> {
     }
     optionsToWatch.forEach((option) => {
       let lastValue = resolvePath(this.lastOptions, option);
-      let currentValue = resolvePath(this.props.options, option);
+      let currentValue = resolvePath(currOptions, option);
       if(option === 'thresholds'){
         // test these for relative equality; this object memory ref changes on each option change.
         lastValue = JSON.stringify(lastValue);
         currentValue = JSON.stringify(currentValue);
       }
       if (lastValue !== currentValue) {
         if (option === 'background') {
-          this.props.options.background = this.theme.visualization.getColorByName(this.props.options.background);
+          this.props.options.background = this.theme.visualization.getColorByName(currOptions.background);
         }
         if(Array.isArray(this.props.options[option])){
           let newOption = [...resolvePath(this.props.options, option)];
           setPath(this.lastOptions, option, newOption);
         } else {
-          setPath(this.lastOptions, option, resolvePath(this.props.options, option));
+          setPath(this.lastOptions, option, resolvePath(currOptions, option));
         }
         changed.push(option);
       }
@@ -330,16 +332,32 @@ export class MapPanel extends Component<MapPanelProps> {
           }, 10);
         }
     })
+    // @ts-ignore
+    this.variableChangeHandle = eventBus.getStream({type: "refresh"}).subscribe((e)=>{
+        if(this.mapCanvas.current){
+          setTimeout(()=>{
+              this.componentDidUpdate();
+          }, 10);
+        }
+    })
   }
 
   componentWillUnmount() {
-    this.subscriptionHandle.unsubscribe();
+    if(this.subscriptionHandle){
+      this.subscriptionHandle.unsubscribe();
+    }
+    if(this.variableChangeHandle){
+      this.variableChangeHandle.unsubscribe();
+    }
   }
 
   componentDidUpdate() {
-    const { options, fieldConfig } = this.props;
+    let { options, fieldConfig, replaceVariables } = this.props;
 
-    let changed = this.calculateOptionsChanges();
+    options = JSON.parse(JSON.stringify(options));
+    options.configurationUrl = replaceVariables(this._configurationUrl);
+
+    let changed = this.calculateOptionsChanges(options);
 
     if(changed.indexOf("useConfigurationUrl") >= 0){
       if(!options.useConfigurationUrl){
@@ -373,8 +391,8 @@ export class MapPanel extends Component<MapPanelProps> {
   }
 
   render() {
-    const { options, width, height, data, replaceVariables, fieldConfig } = this.props;
-
+    let { options, width, height, data, replaceVariables, fieldConfig } = this.props;
+    options = JSON.parse(JSON.stringify(options));
 
     let thresholds: any[];
     thresholds = [];
@@ -386,6 +404,9 @@ export class MapPanel extends Component<MapPanelProps> {
     });
     options.thresholds = thresholds;
     options.zIndexBase = 200;
+    this._configurationUrl = options.configurationUrl;
+    options.configurationUrl = replaceVariables(options.configurationUrl);
+    this.lastOptions.configurationUrl = options.configurationUrl;
 
     const output = this.resolveLatLngFromVars(options, data, replaceVariables);
     return React.createElement('esnet-map-canvas', {

src/components/MapCanvas.component.js

@@ -326,6 +326,13 @@ export class MapCanvas extends BindableHTMLElement {
           self.optionsCache[self.options["configurationUrl"]] = config;
           populateOptionsAndTopology();
         })
+      }).catch((err)=>{
+        self._remoteLoaded = true;
+        self._remoteLoadError = true;
+        self._remoteLoadErrorMessage = `Remote URL:\n${this.options['configurationUrl']}\n\nError Message:\n${err}`;
+        self.shadow.remove();
+        self.shadow = null;
+        self.render();
       })
     }
   }
@@ -338,6 +345,17 @@ export class MapCanvas extends BindableHTMLElement {
       this.maybeFetchOptions();
       return
     }
+    if(wasChanged('configurationUrl', changed)){
+      this._options['configurationUrl'] = options['configurationUrl'];
+      // show loading curtain
+      this._remoteLoaded = false;
+      this.shadow.remove();
+      this.shadow = null;
+      this.render();
+      // fetch remote data
+      this.maybeFetchOptions();
+      return;
+    }
 
     // options is sparse -- it includes only updated options.
     // here we merge the options into the in-memory copy
@@ -755,7 +773,21 @@ export class MapCanvas extends BindableHTMLElement {
 
 
       <div id='map-${this.instanceId}'>
-        <div class="loading-overlay" style="background-color:rgba(0,0,0,0.7); position:absolute; height:100%; width: 100%; color:white; font-weight: bold; justify-content: center; align-items: center; z-index:20000; display: ${ !this.options["useConfigurationUrl"] || !!this._remoteLoaded ? "none" : "flex"}">Loading Topology Data...</div>
+        <div class="loading-overlay" style="display: ${ !this.options["useConfigurationUrl"] || !!this._remoteLoaded ? "none" : "flex"}">
+          Loading Topology Data...
+        </div>
+        <div class="error-overlay" style="display: ${ !this._remoteLoadError ? "none" : "flex"}">
+          <div style='width:50%; margin:auto; padding-top:10px;'>
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="red" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style='margin: 0 3px -7px 0'>
+          <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/>
+          </svg>
+          An error occured while loading Topology Data<br /><br />
+          Check your network connection.<br /><br />
+
+          Error details:<br />
+          <pre>${ this._remoteLoadErrorMessage }</pre>
+          </div>
+        </div>
         <div class='home-overlay'>
             <div class="button tight-form-func" id="home_map" ${ !this.options.showViewControls ? "style='display:none;'" : "" }>
               🏠

src/components/css/esmap.css.js

@@ -279,4 +279,6 @@ svg .control.control-selected {
   100% { opacity:1.0 }
 }
 
+.loading-overlay, .error-overlay { background-color:rgba(0,0,0,0.7); position:absolute; height:100%; width: 100%; color:white; font-weight: bold; justify-content: center; align-items: center; z-index:20000; }
+
 `