From f6e5d4166f320afb8e7a5c20adde92b767c8eb58 Mon Sep 17 00:00:00 2001
From: HARPER Jon <jon.harper87@gmail.com>
Date: Fri, 13 Dec 2024 10:57:12 +0100
Subject: [PATCH 1/4] Don't update dynamiccssrules on translations, add
 chromium workaround

Signed-off-by: HARPER Jon <jon.harper87@gmail.com>
---
 .../network-area-diagram-viewer.ts            | 54 +++++++++++++++++++
 1 file changed, 54 insertions(+)

diff --git a/src/components/network-area-diagram-viewer/network-area-diagram-viewer.ts b/src/components/network-area-diagram-viewer/network-area-diagram-viewer.ts
index 00830257..585af7dc 100644
--- a/src/components/network-area-diagram-viewer/network-area-diagram-viewer.ts
+++ b/src/components/network-area-diagram-viewer/network-area-diagram-viewer.ts
@@ -48,6 +48,18 @@ export type OnToggleNadHoverCallbackType = (
     equipmentType: string
 ) => void;
 
+// update css rules when zoom changes by this amount. This allows to not
+// update when only translating (when translating, round errors lead to
+// epsilon changes in the float values), or not too often a bit when smooth
+// scrolling (the update may be entirely missed when smooth scrolling if
+// you don't go over the threshold but that's ok, the user doesn't see rule
+// threshold values so he will continue to zoom in or out to trigger the
+// rule update. Using a debounce that ensure the last update is done
+// eventually may be even worse as it could introduce flicker after the
+// delay after the last zoom change.  We need a value that gives good
+// performance but doesn't change the user experience
+const dynamicCssRulesUpdateThreshold = 0.01;
+
 export class NetworkAreaDiagramViewer {
     container: HTMLElement;
     svgContent: string;
@@ -73,6 +85,7 @@ export class NetworkAreaDiagramViewer {
     onSelectNodeCallback: OnSelectNodeCallbackType | null;
     dynamicCssRules: CSS_RULE[];
     onToggleHoverCallback: OnToggleNadHoverCallbackType | null;
+    previousMaxDisplayedSize: number;
 
     constructor(
         container: HTMLElement,
@@ -113,6 +126,7 @@ export class NetworkAreaDiagramViewer {
         this.onMoveTextNodeCallback = onMoveTextNodeCallback;
         this.onSelectNodeCallback = onSelectNodeCallback;
         this.onToggleHoverCallback = onToggleHoverCallback;
+        this.previousMaxDisplayedSize = 0;
     }
 
     public setWidth(width: number): void {
@@ -171,6 +185,14 @@ export class NetworkAreaDiagramViewer {
         this.svgDraw?.viewbox(viewBox);
     }
 
+    public setPreviousMaxDisplayedSize(previousMaxDisplayedSize: number): void {
+        this.previousMaxDisplayedSize = previousMaxDisplayedSize;
+    }
+
+    public getPreviousMaxDisplayedSize(): number {
+        return this.previousMaxDisplayedSize;
+    }
+
     public getDynamicCssRules() {
         return this.dynamicCssRules;
     }
@@ -1371,6 +1393,15 @@ export class NetworkAreaDiagramViewer {
 
     public checkAndUpdateLevelOfDetail(svg: SVGSVGElement) {
         const maxDisplayedSize = this.getCurrentlyMaxDisplayedSize();
+        const previousMaxDisplayedSize = this.getPreviousMaxDisplayedSize();
+        // in case of bad or unset values NaN or Infinity, this condition is skipped and the function behaves as if zoom changed
+        if (
+            Math.abs(previousMaxDisplayedSize - maxDisplayedSize) / previousMaxDisplayedSize <
+            dynamicCssRulesUpdateThreshold
+        ) {
+            return;
+        }
+        this.setPreviousMaxDisplayedSize(maxDisplayedSize);
         // We will check each dynamic css rule to see if we crossed a zoom threshold. If this is the case, we
         // update the rule's threshold status and trigger the CSS change in the SVG.
         this.getDynamicCssRules().forEach((rule) => {
@@ -1388,5 +1419,28 @@ export class NetworkAreaDiagramViewer {
                 this.updateSvgCssDisplayValue(svg, rule.cssSelector, rule.aboveThresholdCssDeclaration);
             }
         });
+        //Workaround chromium (tested on edge and google-chrome 131) doesn't
+        //redraw things with percentages on viewbox changes but it should,
+        //force it. Firefox does correctly redraw, but we force for everyone to
+        //have the same behavior everywhere and detect problems more easily.
+        //we can't use innerHtml+='' on the <style> tags because values set
+        //with setProperty(key, value) in updateSvgCssDisplayValue are not
+        //reflected in the html text so the innerHTML trick has the effect of
+        //resetting them. So instead of doing it on the svg, we do it on all
+        //its children that are not style elements. This won't work if there
+        //are deeply nested style elements that need dynamic css rules but in
+        //practice only the root style element hasdynamic rules so it's ok.
+        //remove this when chromium fixes their bug if this workaround causes
+        //problem, we can find a better way to force a redraw that doesnt
+        //change the elements in the dom
+        const innerSvg = svg.querySelector('svg');
+        if (innerSvg) {
+            for (const child of innerSvg.children) {
+                // annoying, sometimes lowercase (html), sometimes uppercase (xml in xhtml or svg))
+                if (child.nodeName.toUpperCase() != 'STYLE') {
+                    child.innerHTML += '';
+                }
+            }
+        }
     }
 }

From 031366032c1d4703476fadcd33388ff511d39dea Mon Sep 17 00:00:00 2001
From: HARPER Jon <jon.harper87@gmail.com>
Date: Tue, 17 Dec 2024 09:44:26 +0100
Subject: [PATCH 2/4] Add percent stroke-width css in default dynamic values

This allows to see the effect of the workarounds for the css containing percent in the demo.
And it's generally useful to have this kind of css when enabling level of detail

Signed-off-by: HARPER Jon <jon.harper87@gmail.com>
---
 .../dynamic-css-utils.ts                      | 30 +++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/src/components/network-area-diagram-viewer/dynamic-css-utils.ts b/src/components/network-area-diagram-viewer/dynamic-css-utils.ts
index 31017b96..07458d4c 100644
--- a/src/components/network-area-diagram-viewer/dynamic-css-utils.ts
+++ b/src/components/network-area-diagram-viewer/dynamic-css-utils.ts
@@ -82,4 +82,34 @@ export const DEFAULT_DYNAMIC_CSS_RULES: CSS_RULE[] = [
         threshold: 20000,
         thresholdStatus: THRESHOLD_STATUS.BELOW,
     },
+    // TODO using svg at the begining in selectors to increase specificity
+    // because the svg already contains the same selectors. Is there a better way ?
+    {
+        cssSelector: 'svg .nad-disconnected .nad-edge-path',
+        belowThresholdCssDeclaration: { 'stroke-dasharray': '10, 10' },
+        aboveThresholdCssDeclaration: { 'stroke-dasharray': '0.5%, 0.5%' },
+        threshold: 2500,
+        thresholdStatus: THRESHOLD_STATUS.ABOVE,
+    },
+    {
+        cssSelector: 'svg .nad-branch-edges .nad-edge-path, svg .nad-3wt-edges .nad-edge-path',
+        belowThresholdCssDeclaration: { 'stroke-width': '3' },
+        aboveThresholdCssDeclaration: { 'stroke-width': '0.25%' },
+        threshold: 1000,
+        thresholdStatus: THRESHOLD_STATUS.ABOVE,
+    },
+    {
+        cssSelector: 'svg .nad-branch-edges .nad-winding, svg .nad-3wt-nodes .nad-winding',
+        belowThresholdCssDeclaration: { 'stroke-width': '3' },
+        aboveThresholdCssDeclaration: { 'stroke-width': '0.25%' },
+        threshold: 1000,
+        thresholdStatus: THRESHOLD_STATUS.ABOVE,
+    },
+    {
+        cssSelector: 'svg .nad-vl-nodes circle.nad-unknown-busnode',
+        belowThresholdCssDeclaration: { 'stroke-width': '3' },
+        aboveThresholdCssDeclaration: { 'stroke-width': '0.25%' },
+        threshold: 1000,
+        thresholdStatus: THRESHOLD_STATUS.ABOVE,
+    },
 ];

From 207c3595b86913681d73c44ae4c382d6446f5ab3 Mon Sep 17 00:00:00 2001
From: HARPER Jon <jon.harper87@gmail.com>
Date: Tue, 17 Dec 2024 09:51:14 +0100
Subject: [PATCH 3/4] improve comments

Signed-off-by: HARPER Jon <jon.harper87@gmail.com>
---
 .../network-area-diagram-viewer.ts                   | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/network-area-diagram-viewer/network-area-diagram-viewer.ts b/src/components/network-area-diagram-viewer/network-area-diagram-viewer.ts
index 585af7dc..3540c65c 100644
--- a/src/components/network-area-diagram-viewer/network-area-diagram-viewer.ts
+++ b/src/components/network-area-diagram-viewer/network-area-diagram-viewer.ts
@@ -1421,7 +1421,11 @@ export class NetworkAreaDiagramViewer {
         });
         //Workaround chromium (tested on edge and google-chrome 131) doesn't
         //redraw things with percentages on viewbox changes but it should,
-        //force it. Firefox does correctly redraw, but we force for everyone to
+        //force it. This is not strictly related to the enableLevelOfDetail and
+        //dynamic css feature, but it turns out that we use percentages in css
+        //only in this case, so we can do the workaround here until we have
+        //other needs or until we remove the workaround entirely.
+        //Firefox does correctly redraw, but we force for everyone to
         //have the same behavior everywhere and detect problems more easily.
         //we can't use innerHtml+='' on the <style> tags because values set
         //with setProperty(key, value) in updateSvgCssDisplayValue are not
@@ -1430,9 +1434,9 @@ export class NetworkAreaDiagramViewer {
         //its children that are not style elements. This won't work if there
         //are deeply nested style elements that need dynamic css rules but in
         //practice only the root style element hasdynamic rules so it's ok.
-        //remove this when chromium fixes their bug if this workaround causes
-        //problem, we can find a better way to force a redraw that doesnt
-        //change the elements in the dom
+        //TODO remove this when chromium fixes their bug.
+        //TODO if this workaround causes problems, we can find a better way to
+        //force a redraw that doesnt change the elements in the dom
         const innerSvg = svg.querySelector('svg');
         if (innerSvg) {
             for (const child of innerSvg.children) {

From 52cdd795e6b601bb19980b761067aa194e4d8960 Mon Sep 17 00:00:00 2001
From: HARPER Jon <jon.harper87@gmail.com>
Date: Tue, 17 Dec 2024 09:57:26 +0100
Subject: [PATCH 4/4] review

Signed-off-by: HARPER Jon <jon.harper87@gmail.com>
---
 .../network-area-diagram-viewer.ts            | 35 ++++++++++---------
 1 file changed, 18 insertions(+), 17 deletions(-)

diff --git a/src/components/network-area-diagram-viewer/network-area-diagram-viewer.ts b/src/components/network-area-diagram-viewer/network-area-diagram-viewer.ts
index 3540c65c..911802be 100644
--- a/src/components/network-area-diagram-viewer/network-area-diagram-viewer.ts
+++ b/src/components/network-area-diagram-viewer/network-area-diagram-viewer.ts
@@ -1420,23 +1420,24 @@ export class NetworkAreaDiagramViewer {
             }
         });
         //Workaround chromium (tested on edge and google-chrome 131) doesn't
-        //redraw things with percentages on viewbox changes but it should,
-        //force it. This is not strictly related to the enableLevelOfDetail and
-        //dynamic css feature, but it turns out that we use percentages in css
-        //only in this case, so we can do the workaround here until we have
-        //other needs or until we remove the workaround entirely.
-        //Firefox does correctly redraw, but we force for everyone to
-        //have the same behavior everywhere and detect problems more easily.
-        //we can't use innerHtml+='' on the <style> tags because values set
-        //with setProperty(key, value) in updateSvgCssDisplayValue are not
-        //reflected in the html text so the innerHTML trick has the effect of
-        //resetting them. So instead of doing it on the svg, we do it on all
-        //its children that are not style elements. This won't work if there
-        //are deeply nested style elements that need dynamic css rules but in
-        //practice only the root style element hasdynamic rules so it's ok.
-        //TODO remove this when chromium fixes their bug.
-        //TODO if this workaround causes problems, we can find a better way to
-        //force a redraw that doesnt change the elements in the dom
+        //redraw things with percentages on viewbox changes but it should, so
+        //we force it. This is not strictly related to the enableLevelOfDetail
+        //and dynamic css feature, but it turns out that we use percentages in
+        //css only in the case where enableLevelOfDetail=true, so we can do the
+        //workaround here at each viewbox change until we have other needs or
+        //until we remove the workaround entirely. Firefox does correctly
+        //redraw, but we force for everyone to have the same behavior
+        //everywhere and detect problems more easily. We can't use
+        //innerHtml+='' on the <style> tags because values set with
+        //setProperty(key, value) in updateSvgCssDisplayValue are not reflected
+        //in the html text so the innerHTML trick has the effect of resetting
+        //them. So instead of doing it on the svg, we do it on all its children
+        //that are not style elements. This won't work if there are deeply
+        //nested style elements that need dynamic css rules but in practice
+        //only the root style element has dynamic rules so it's ok.
+        //TODO Remove this when chromium fixes their bug.
+        //TODO If this workaround causes problems, we can find a better way to
+        //force a redraw that doesnt change the elements in the dom.
         const innerSvg = svg.querySelector('svg');
         if (innerSvg) {
             for (const child of innerSvg.children) {