nad-viewer: disable node interaction / edge hover callback when no me…

…tadata available (#115)

* Disable node interaction when no metadata is available in network area diagram viewer
* Disable also hover callback when no metadata is available

Signed-off-by: massimo.ferraro <massimo.ferraro@soft.it>

src/components/network-area-diagram-viewer/network-area-diagram-viewer.ts

@@ -97,7 +97,15 @@ export class NetworkAreaDiagramViewer {
         this.originalWidth = 0;
         this.originalHeight = 0;
         this.dynamicCssRules = customDynamicCssRules ?? DEFAULT_DYNAMIC_CSS_RULES;
-        this.init(minWidth, minHeight, maxWidth, maxHeight, enableNodeInteraction, enableLevelOfDetail);
+        this.init(
+            minWidth,
+            minHeight,
+            maxWidth,
+            maxHeight,
+            enableNodeInteraction,
+            enableLevelOfDetail,
+            diagramMetadata !== null
+        );
         this.svgParameters = new SvgParameters(diagramMetadata?.svgParameters);
         this.layoutParameters = new LayoutParameters(diagramMetadata?.layoutParameters);
         this.onMoveNodeCallback = onMoveNodeCallback;
@@ -191,7 +199,8 @@ export class NetworkAreaDiagramViewer {
         maxWidth: number,
         maxHeight: number,
         enableNodeInteraction: boolean,
-        enableLevelOfDetail: boolean
+        enableLevelOfDetail: boolean,
+        hasMetadata: boolean
     ): void {
         if (!this.container || !this.svgContent) {
             return;
@@ -220,7 +229,7 @@ export class NetworkAreaDiagramViewer {
         drawnSvg.style.overflow = 'visible';
 
         // add events
-        if (enableNodeInteraction) {
+        if (enableNodeInteraction && hasMetadata) {
             this.svgDraw.on('mousedown', (e: Event) => {
                 if ((e as MouseEvent).button == 0) {
                     this.onMouseLeftDown(e as MouseEvent);
@@ -235,9 +244,11 @@ export class NetworkAreaDiagramViewer {
                 }
             });
         }
-        this.svgDraw.on('mouseover', (e: Event) => {
-            this.onHover(e as MouseEvent);
-        });
+        if (hasMetadata) {
+            this.svgDraw.on('mouseover', (e: Event) => {
+                this.onHover(e as MouseEvent);
+            });
+        }
         this.svgDraw.on('panStart', function () {
             if (drawnSvg.parentElement != undefined) {
                 drawnSvg.parentElement.style.cursor = 'move';
@@ -282,7 +293,7 @@ export class NetworkAreaDiagramViewer {
             observer.observe(targetNode, { attributeFilter: ['viewBox'] });
         }
 
-        if (enableNodeInteraction) {
+        if (enableNodeInteraction && hasMetadata) {
             // fill empty elements: unknown buses and three windings transformers
             const emptyElements: NodeListOf<SVGGraphicsElement> = this.container.querySelectorAll(
                 '.nad-unknown-busnode, .nad-3wt-nodes .nad-winding'