Merge pull request #6052 from deutschebank/db-contrib/waltz-6038-call…

…outs-on-sections-history Db contrib/waltz 6038 callouts on sections history
finos · May 17, 2022 · 62be949 · 62be949
2 parents 6e91794 + 619be89
commit 62be949
Show file tree

Hide file tree

Showing 14 changed files with 171 additions and 64 deletions.
diff --git a/...egate-overlay-diagram/components/aggregate-overlay-diagram/AggregateOverlayDiagram.svelte b/...egate-overlay-diagram/components/aggregate-overlay-diagram/AggregateOverlayDiagram.svelte
@@ -35,11 +35,10 @@
                 () => renderBulkOverlays(
                     svgHolderElem,
                     calloutsHolder,
-                    ".outer",
+                    ".callout-box",
                     (bBox, contentRef) => {
-                        const size = bBox.height * 0.25;
-                        contentRef.setAttribute("width", size);
-                        contentRef.setAttribute("height", size);
+                        contentRef.setAttribute("width", bBox.width);
+                        contentRef.setAttribute("height", bBox.height);
                     }),
                 100);
         }

diff --git a/...e-overlay-diagram/components/aggregate-overlay-diagram/aggregate-overlay-diagram-utils.js b/...e-overlay-diagram/components/aggregate-overlay-diagram/aggregate-overlay-diagram-utils.js
@@ -38,32 +38,39 @@ export function renderBulkOverlays(svgHolderElem,
                                    setContentSize) {
 
     const cells = Array.from(overlayCellsHolder.querySelectorAll(".overlay-cell"));
-    cells.forEach(c => {
-        const targetCellId = c.getAttribute("data-cell-id");
-
-        const targetCell = svgHolderElem.querySelector(`[data-cell-id='${targetCellId}'] ${targetSelector}`);
-        if (!targetCell) {
-            console.log("Cannot find target cell for cell-id", targetCellId);
-            return;
-        }
-
-        const contentRef = c.querySelector(".content");
-        if (!contentRef) {
-            console.log("Cannot find content section for copying into the target box for cell-id", targetCellId);
-            return;
-        }
-
-        setContentSize(
-            targetCell.getBBox(),
-            contentRef);
-
-        const existingContent = targetCell.querySelector(".content");
-        if (existingContent) {
-            targetCell.replaceChild(contentRef, existingContent);
-        } else {
-            targetCell.append(contentRef);
-        }
-    });
+
+    cells
+        .forEach(c => {
+
+            const targetCellId = c.getAttribute("data-cell-id");
+
+            const targetCell = svgHolderElem.querySelector(`[data-cell-id='${targetCellId}'] ${targetSelector}`);
+
+            if (!targetCell) {
+                console.log("Cannot find target cell for cell-id", targetCellId);
+                return;
+            }
+
+            const contentRef = c.querySelector(".content");
+
+            if (!contentRef) {
+                console.log("Cannot find content section for copying into the target box for cell-id", targetCellId);
+                return;
+            }
+
+
+            setContentSize(
+                targetCell.getBBox(),
+                contentRef);
+
+            const existingContent = targetCell.querySelector(".content");
+
+            if (existingContent) {
+                targetCell.replaceChild(contentRef, existingContent);
+            } else {
+                targetCell.append(contentRef);
+            }
+        });
 }
 
 

diff --git a/...aggregate-overlay-diagram/components/aggregate-overlay-diagram/callout/CalloutList.svelte b/...aggregate-overlay-diagram/components/aggregate-overlay-diagram/callout/CalloutList.svelte
@@ -57,7 +57,6 @@
             } else {
                 return determineCell(elem.parentElement)
             }
-
         }
     }
 
@@ -69,9 +68,9 @@
                 const clickedElem = e.target;
                 const dataCell = determineCell(clickedElem);
 
-                $selectedCellId = dataCell === null
-                    ? null
-                    : dataCell.getAttribute("data-cell-id");
+                $selectedCellId = dataCell !== null
+                    ? dataCell.getAttribute("data-cell-id")
+                    : null;
 
                 if ($selectedCellId == null) {
                     return;
@@ -103,8 +102,11 @@
                 outers,
                 cell => {
                     const parent = cell.parentElement;
-                    const cellId = parent.getAttribute("data-cell-id");
-                    cell.setAttribute("style", `opacity: ${$selectedCellId === cellId ? "0.7" : "1"}`)
+                    const targetId = parent.getAttribute("data-cell-id");
+
+                    cell.setAttribute("style", `opacity: ${!_.isNull($selectedCellId) && $selectedCellId === targetId
+                        ? "0.7"
+                        : "1"}`)
                 });
         }
     }

diff --git a/.../client/aggregate-overlay-diagram/components/instance-selector/InstanceCreatePanel.svelte b/.../client/aggregate-overlay-diagram/components/instance-selector/InstanceCreatePanel.svelte
@@ -76,7 +76,7 @@
               placeholder="Description"
               bind:value={description}/>
     <div class="help-block">
-        Description
+        Description of this diagram instance
     </div>
 
 

diff --git a/waltz-ng/client/aggregate-overlay-diagram/index.js b/waltz-ng/client/aggregate-overlay-diagram/index.js
@@ -20,8 +20,9 @@ import angular from "angular";
 import AggregateOverlayDiagramSection from "./components/section/aggregate-overlay-diagram-section.js"
 import InstanceView from "./pages/instance-view/overlay-diagram-instance-view.js"
 import DiagramList from "./pages/list/overlay-diagram-list.js"
-import {registerComponents} from "../common/module-utils";
+import {registerComponents, registerStores} from "../common/module-utils";
 import routes from "./routes";
+import AggregateOverlayDiagramInstanceStore from "./services/aggregate-overlay-diagram-instance-store";
 
 
 export default () => {
@@ -38,5 +39,10 @@ export default () => {
             DiagramList
         ]);
 
+    registerStores(
+        module,
+        [AggregateOverlayDiagramInstanceStore]
+    )
+
     return module.name;
 };
diff --git a/...-ng/client/aggregate-overlay-diagram/pages/instance-view/overlay-diagram-instance-view.js b/...-ng/client/aggregate-overlay-diagram/pages/instance-view/overlay-diagram-instance-view.js
@@ -1,6 +1,8 @@
 import template from "./overlay-diagram-instance-view.html";
 import OverlayDiagramInstanceView from "../../components/OverlayDiagramInstanceView.svelte"
 import {initialiseData} from "../../../common";
+import {entity} from "../../../common/services/enums/entity";
+import {CORE_API} from "../../../common/services/core-api-utils";
 
 const bindings = {}
 
@@ -9,23 +11,39 @@ const initialState = {
 }
 
 
-function controller($stateParams) {
+function controller($stateParams,
+                    serviceBroker,
+                    historyStore) {
 
     const vm = initialiseData(this, initialState);
 
-    const instanceId = $stateParams.id;
+    vm.$onInit = () => {
+
+        vm.parentEntityRef = {
+            kind: "AGGREGATE_OVERLAY_DIAGRAM_INSTANCE",
+            id: $stateParams.id,
+            name: "?"
+        };
+
+        serviceBroker
+            .loadViewData(CORE_API.AggregateOverlayDiagramInstanceStore.getById, [vm.parentEntityRef.id])
+            .then(r => {
+                historyStore.put(
+                    r.data.name,
+                    entity.AGGREGATE_OVERLAY_DIAGRAM_INSTANCE.key,
+                    "main.aggregate-overlay-diagram.instance-view",
+                    {id: vm.parentEntityRef.id});
+            })
+    }
 
-    vm.parentEntityRef = {
-        kind: "AGGREGATE_OVERLAY_DIAGRAM_INSTANCE",
-        id: instanceId,
-        name: "?"
-    };
 
 }
 
 
 controller.$inject = [
-    "$stateParams"
+    "$stateParams",
+    "ServiceBroker",
+    "HistoryStore"
 ];
 
 const component = {

diff --git a/waltz-ng/client/aggregate-overlay-diagram/pages/list/overlay-diagram-list.js b/waltz-ng/client/aggregate-overlay-diagram/pages/list/overlay-diagram-list.js
@@ -1,6 +1,7 @@
 import template from "./overlay-diagram-list.html";
 import OverlayDiagramListView from "../../components/list-view/OverlayDiagramListView.svelte"
 import {initialiseData} from "../../../common";
+import {entity} from "../../../common/services/enums/entity";
 
 const bindings = {}
 
@@ -9,14 +10,24 @@ const initialState = {
 }
 
 
-function controller() {
+function controller(historyStore) {
 
     const vm = initialiseData(this, initialState);
 
+    vm.$onInit = () => {
+        historyStore.put(
+            "Diagram List",
+            entity.AGGREGATE_OVERLAY_DIAGRAM.key,
+            "main.aggregate-overlay-diagram.list",
+            {});
+    }
+
 }
 
 
-controller.$inject = [];
+controller.$inject = [
+    "HistoryStore"
+];
 
 const component = {
     template,

diff --git a/...-ng/client/aggregate-overlay-diagram/services/aggregate-overlay-diagram-instance-store.js b/...-ng/client/aggregate-overlay-diagram/services/aggregate-overlay-diagram-instance-store.js
@@ -0,0 +1,33 @@
+function store($http, baseApiUrl) {
+    const baseUrl = `${baseApiUrl}/aggregate-overlay-diagram-instance`;
+
+    const getById = (id) => $http
+        .get(`${baseUrl}/id/${id}`)
+        .then(d => d.data);
+
+    return {
+        getById
+    };
+}
+
+
+store.$inject = [
+    "$http",
+    "BaseApiUrl"
+];
+
+
+const serviceName = "AggregateOverlayDiagramInstanceStore";
+
+export default {
+    serviceName,
+    store
+};
+
+export const AggregateOverlayDiagramInstanceStore_API = {
+    getById: {
+        serviceName,
+        serviceFnName: "getById",
+        description: "getById [id]"
+    }
+}
diff --git a/waltz-ng/client/common/services/core-api-utils.js b/waltz-ng/client/common/services/core-api-utils.js
@@ -18,6 +18,7 @@
 
 import {AccessLogStore_API as AccessLogStore} from "../../access-log/service/access-log-store";
 import {ActorStore_API as ActorStore} from "../../actor/services/actor-store";
+import {AggregateOverlayDiagramInstanceStore_API as AggregateOverlayDiagramInstanceStore} from "../../aggregate-overlay-diagram/services/aggregate-overlay-diagram-instance-store";
 import {AliasStore_API as AliasStore} from "../../alias/services/alias-store";
 import {AllocationStore_API as AllocationStore} from "../../allocation/services/allocation-store";
 import {AllocationSchemeStore_API as AllocationSchemeStore} from "../../allocation-scheme/services/allocation-scheme-store";
@@ -119,6 +120,7 @@ import {VulnerabilityStore_API as VulnerabilityStore} from "../../software-catal
 export const CORE_API = {
     AccessLogStore,
     ActorStore,
+    AggregateOverlayDiagramInstanceStore,
     AliasStore,
     AllocationStore,
     AllocationSchemeStore,

diff --git a/waltz-ng/client/playpen/3/builder/CalloutBox.svelte b/waltz-ng/client/playpen/3/builder/CalloutBox.svelte
@@ -0,0 +1,11 @@
+<script>
+    export let width;
+    export let height;
+</script>
+
+<g class="callout-box">
+    <rect {width}
+          {height}
+          fill="none">
+    </rect>
+</g>
diff --git a/waltz-ng/client/playpen/3/builder/EntityCell.svelte b/waltz-ng/client/playpen/3/builder/EntityCell.svelte
@@ -1,6 +1,7 @@
 <script>
 
     import StatisticsBox from "./StatisticsBox.svelte";
+    import CalloutBox from "./CalloutBox.svelte";
 
     export let cell;
     export let cellWidth;
@@ -21,11 +22,14 @@
           height={dimensions.cell.height}
           fill={color}>
     </rect>
+    <CalloutBox width={dimensions.callout.width}
+                height={dimensions.callout.height}/>
 </g>
 
 
 <g transform="translate(0, 10)">
-    <foreignObject width={cellWidth}
+    <foreignObject transform={`translate(${dimensions.cell.height * 0.25} 0)`}
+                   width={cellWidth - dimensions.cell.height * 0.5}
                    height={dimensions.cell.labelHeight}>
         <div class="cell-title">
             {cell.name}

diff --git a/waltz-ng/client/playpen/3/builder/EntityGroupBox.svelte b/waltz-ng/client/playpen/3/builder/EntityGroupBox.svelte
@@ -2,6 +2,7 @@
 
     import GroupRow from "./GroupRow.svelte";
     import {calcHeight} from "./overlay-diagram-builder-utils";
+    import CalloutBox from "./CalloutBox.svelte";
 
     export let dimensions;
     export let group;
@@ -10,19 +11,22 @@
 </script>
 
 {#if dimensions}
-<g class="entity-group-box"
-   data-group-id={group.id}>
-    <rect class="outer"
-          width={dimensions.w - (dimensions.padding + dimensions.group.padding) * 2}
-          {height}>
-    </rect>
-
-    <foreignObject width={dimensions.labelWidth}
-                   height={height}>
-        <div class="group-title">
-            {group.name}
-        </div>
-    </foreignObject>
+    <g class="entity-group-box"
+       data-cell-id={group.id}>
+
+        <g class="outer">
+            <rect width={dimensions.w}
+                  {height}>
+            </rect>
+            <foreignObject width={dimensions.labelWidth}
+                           height={height}>
+                <div class="group-title">
+                    {group.name}
+                </div>
+            </foreignObject>
+            <CalloutBox width={dimensions.callout.width}
+                        height={dimensions.callout.height}/>
+        </g>
 
     <g transform={`translate(${dimensions.labelWidth})`}>
         {#each group.rows as row, idx}
@@ -36,16 +40,21 @@
 
 
 <style>
-    rect.outer {
+    .outer rect {
         stroke: #fff;
         stroke-width: 2;
+        background-color: white;
     }
 
     .group-title {
         font-weight: bolder;
         background-color: #0e2541;
         height: 100%;
-        padding: 1em;
+        padding: 0.5em;
         color: #f2f6f2;
+        border: solid 2px white;
+        display: -webkit-flex;
+        display: flex;
+        align-items: center;
     }
 </style>