From dce0c7d62867ad9844573a075914fb3078259635 Mon Sep 17 00:00:00 2001
From: David Watkins <david.watkins@db.com>
Date: Thu, 17 Oct 2024 11:26:50 +0100
Subject: [PATCH] Diagrams, ensure overlays take 100% of cell width

#CTCTOWALTZ-3410
#7167
---
 waltz-ng/client/common/hierarchy-utils.js                 | 2 +-
 .../interact-view/DiagramInteractView.svelte              | 8 ++++----
 .../overlays/ApplicationChangesOverlay.svelte             | 1 +
 .../overlays/assessment/BarGraph.svelte                   | 1 +
 .../overlays/assessment/BoxGraph.svelte                   | 1 +
 .../overlays/cost/RatingCostOverlay.svelte                | 1 +
 6 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/waltz-ng/client/common/hierarchy-utils.js b/waltz-ng/client/common/hierarchy-utils.js
index 31e644e2af..ba4eed5c48 100644
--- a/waltz-ng/client/common/hierarchy-utils.js
+++ b/waltz-ng/client/common/hierarchy-utils.js
@@ -182,7 +182,7 @@ export function groupHierarchyByKey(tree = [], keyFn = n => n.id, acc = {}) {
 
 
 export function flattenChildren(node, acc = []) {
-    _.forEach(node.children || [], child => {
+    _.forEach(node?.children || [], child => {
         acc.push(child);
         flattenChildren(child, acc);
     });
diff --git a/waltz-ng/client/entity-diagrams/components/entity-overlay-diagrams/interact-view/DiagramInteractView.svelte b/waltz-ng/client/entity-diagrams/components/entity-overlay-diagrams/interact-view/DiagramInteractView.svelte
index 29f055ae08..bf776f1473 100644
--- a/waltz-ng/client/entity-diagrams/components/entity-overlay-diagrams/interact-view/DiagramInteractView.svelte
+++ b/waltz-ng/client/entity-diagrams/components/entity-overlay-diagrams/interact-view/DiagramInteractView.svelte
@@ -34,12 +34,12 @@
     }
 
     $: children = $hideEmptyCells && $selectedOverlay
-        ? _.filter(group.children, child => hasData(child, $overlayData))
-        : group.children;
+        ? _.filter(group?.children, child => hasData(child, $overlayData))
+        : group?.children || [];
 
-    $: overlayRequiresTitle = group.data && $selectedOverlay?.showTitle;
+    $: overlayRequiresTitle = group?.data && $selectedOverlay?.showTitle;
 
-    $: cellData = _.get($overlayData, group.id);
+    $: cellData = _.get($overlayData, group?.id);
 
     $: childKinds = _
         .chain(flattenChildren(group))
diff --git a/waltz-ng/client/entity-diagrams/components/entity-overlay-diagrams/overlays/ApplicationChangesOverlay.svelte b/waltz-ng/client/entity-diagrams/components/entity-overlay-diagrams/overlays/ApplicationChangesOverlay.svelte
index fe19c3115e..d60d3a53d9 100644
--- a/waltz-ng/client/entity-diagrams/components/entity-overlay-diagrams/overlays/ApplicationChangesOverlay.svelte
+++ b/waltz-ng/client/entity-diagrams/components/entity-overlay-diagrams/overlays/ApplicationChangesOverlay.svelte
@@ -135,6 +135,7 @@
     <div>
         <svg viewBox={`0 0 ${width} ${height}`}
              bind:this={svgElem}
+             width="100%"
              class:focused={renderMode === RenderModes.FOCUSED}
              style="background: white">
             <g class="app-summary">
diff --git a/waltz-ng/client/entity-diagrams/components/entity-overlay-diagrams/overlays/assessment/BarGraph.svelte b/waltz-ng/client/entity-diagrams/components/entity-overlay-diagrams/overlays/assessment/BarGraph.svelte
index 125729b4b6..4ce420d961 100644
--- a/waltz-ng/client/entity-diagrams/components/entity-overlay-diagrams/overlays/assessment/BarGraph.svelte
+++ b/waltz-ng/client/entity-diagrams/components/entity-overlay-diagrams/overlays/assessment/BarGraph.svelte
@@ -36,6 +36,7 @@
 <div>
     {#if renderMode !== RenderModes.FOCUSED}
         <svg viewBox={`0 0 ${width} ${height}`}
+             width="100%"
              style="background: white">
             <g>
                 {#each counts as r}
diff --git a/waltz-ng/client/entity-diagrams/components/entity-overlay-diagrams/overlays/assessment/BoxGraph.svelte b/waltz-ng/client/entity-diagrams/components/entity-overlay-diagrams/overlays/assessment/BoxGraph.svelte
index 66acba96e5..3e008caf84 100644
--- a/waltz-ng/client/entity-diagrams/components/entity-overlay-diagrams/overlays/assessment/BoxGraph.svelte
+++ b/waltz-ng/client/entity-diagrams/components/entity-overlay-diagrams/overlays/assessment/BoxGraph.svelte
@@ -21,6 +21,7 @@
 <div>
     <svg viewBox={`0 0 ${width} ${height}`}
          shape-rendering="crispEdges"
+         width="100%"
          style="background: white">
         <g transform={`translate(${cellPadding} , ${cellPadding})`}>
             {#each rows as row, idx}
diff --git a/waltz-ng/client/entity-diagrams/components/entity-overlay-diagrams/overlays/cost/RatingCostOverlay.svelte b/waltz-ng/client/entity-diagrams/components/entity-overlay-diagrams/overlays/cost/RatingCostOverlay.svelte
index 71013f3c62..e6c245be2f 100644
--- a/waltz-ng/client/entity-diagrams/components/entity-overlay-diagrams/overlays/cost/RatingCostOverlay.svelte
+++ b/waltz-ng/client/entity-diagrams/components/entity-overlay-diagrams/overlays/cost/RatingCostOverlay.svelte
@@ -48,6 +48,7 @@
 <div>
     <svg class="content"
          viewBox="0 0 {width} {height}"
+         width="100%"
          style={`background: ${cellData?.totalCost ? colorScale(cellData?.totalCost) : "#fff"}`}>
         <g>
             <text x={width / 2}