adding ordering to report grid columns.

- also fixing some d3 v6-v4 revert issues. finos#5107
davidwatkins73 · Oct 5, 2020 · 3fbfc18 · 3fbfc18
1 parent f9e72bd
commit 3fbfc18
Show file tree

Hide file tree

Showing 8 changed files with 97 additions and 65 deletions.
diff --git a/...-jobs/src/main/java/com/khartec/waltz/jobs/generators/LogicalFlowDecorationGenerator.java b/...-jobs/src/main/java/com/khartec/waltz/jobs/generators/LogicalFlowDecorationGenerator.java
@@ -88,9 +88,9 @@ public Map<String, Integer> create(ApplicationContext ctx) {
     @Override
     public boolean remove(ApplicationContext ctx) {
         getDsl(ctx)
-                .deleteFrom(LOGICAL_FLOW_DECORATOR)
-                //.where(LOGICAL_FLOW_DECORATOR.PROVENANCE.eq(SAMPLE_DATA_PROVENANCE))
-                .execute();
+            .deleteFrom(LOGICAL_FLOW_DECORATOR)
+            .where(LOGICAL_FLOW_DECORATOR.PROVENANCE.eq(SAMPLE_DATA_PROVENANCE))
+            .execute();
         return false;
     }
 }
diff --git a/waltz-ng/client/flow-diagram/components/diagram/flow-diagram.js b/waltz-ng/client/flow-diagram/components/diagram/flow-diagram.js
@@ -17,7 +17,7 @@
  */
 
 import _ from "lodash";
-import {select, selectAll} from "d3-selection";
+import {event, select, selectAll} from "d3-selection";
 import {drag} from "d3-drag";
 import {zoom} from "d3-zoom";
 import {initialiseData} from "../../../common";
@@ -114,27 +114,27 @@ const clickHandlers = Object.assign({}, DEFAULT_CLICK_HANDLERS);
 let dragStartPos = null;
 
 
-function dragStarted(e) {
-    dragStartPos = { x: e.x, y: e.y };
+function dragStarted() {
+    dragStartPos = { x: event.x, y: event.y };
     return select(this)
         .raise()
         .classed("wfd-active", true);
 }
 
 
 function dragger(commandProcessor) {
-    return (e, d) => {
+    return (d) => {
         const cmd = {
             command: "MOVE",
-            payload: {id: d.id, dx: e.dx, dy: e.dy}
+            payload: {id: d.id, dx: event.dx, dy: event.dy}
         };
         commandProcessor([cmd]);
     };
 }
 
 
-function dragEnded(e, d) {
-    const noMove = dragStartPos.x === e.x && dragStartPos.y === e.y;
+function dragEnded(d) {
+    const noMove = dragStartPos.x === event.x && dragStartPos.y === event.y;
     if (noMove) {
         clickHandlers.node(d);
     }
@@ -265,7 +265,7 @@ function drawFlows(state, group) {
         .on("contextmenu", contextMenus.flowBucket
             ? d3ContextMenu(contextMenus.flowBucket)
             : null)
-        .on("click.flowBucket", (e, d) => clickHandlers.flowBucket(d));
+        .on("click.flowBucket", clickHandlers.flowBucket);
 
     newBucketElems
         .append("circle");
@@ -527,32 +527,30 @@ function prepareGroups(holder) {
  * @param commandProcessor
  */
 function setupPanAndZoom(commandProcessor) {
-    function zoomed(e) {
-        const t = e.transform;
+    function zoomed() {
+        const t = event.transform;
         commandProcessor([{ command: "TRANSFORM_DIAGRAM", payload: t }]);
     }
 
     const myZoom = zoom()
-        .filter(e => e.metaKey || e.ctrlKey)
+        .filter(() => event.metaKey || event.ctrlKey)
         .scaleExtent([1 / 4, 2])
         .on("zoom", zoomed);
 
 
-    select("body")
-        .on("keyup.zoom", (e) => {
-            groups.svg
-                .on(".zoom", null);
-        });
+    select("body").on("keyup.zoom", () => {
+        groups.svg
+            .on(".zoom", null);
+    });
 
-    select("body")
-        .on("keydown.zoom", (e) => {
-            const active = e.metaKey || e.ctrlKey;
-            if (active) {
-                groups.svg
-                    .call(myZoom)
-                    .on("dblclick.zoom", null);
-            }
-        });
+    select("body").on("keydown.zoom", () => {
+        const active = event.metaKey || event.ctrlKey;
+        if (active) {
+            groups.svg
+                .call(myZoom)
+                .on("dblclick.zoom", null);
+        }
+    });
 }
 
 

diff --git a/waltz-ng/client/report-grid/components/grid-view-section/report-grid-view-section.html b/waltz-ng/client/report-grid/components/grid-view-section/report-grid-view-section.html
@@ -1,19 +1,41 @@
 <div>
 
+    <h4 ng-if="!$ctrl.showPicker">
+        <span ng-bind="$ctrl.selectedGrid.name"></span>
+        <span class="small">
+            <a class="clickable"
+               ng-click="$ctrl.showPicker = true">
+                Change report
+            </a>
+        </span>
+    </h4>
+
+    <!-- PICKER -->
+    <div class="row"
+         ng-if="$ctrl.showPicker"
+         style="margin-bottom: 1em">
+        <div class="col-md-6">
+            <waltz-sub-section name="Report picker">
+                <content>
+                    <div class="waltz-sub-section-content">
+                        <waltz-report-grid-picker on-grid-select="$ctrl.onGridSelect">
+                        </waltz-report-grid-picker>
+                    </div>
+                    <div class="waltz-sub-section-controls">
+                        <a ng-click="$ctrl.showPicker = false"
+                           class="clickable">
+                            Close
+                        </a>
+                     </div>
+                </content>
+            </waltz-sub-section>
+        </div>
+    </div>
+
+    <!-- GRID & FILTERS -->
     <waltz-report-grid-view-panel parent-entity-ref="$ctrl.parentEntityRef"
-                                  grid-id="$ctrl.gridId">
+                                  grid-id="$ctrl.selectedGrid.id">
     </waltz-report-grid-view-panel>
 
-    <div ng-if="$ctrl.showPicker">
-        <waltz-report-grid-picker on-grid-select="$ctrl.onGridSelect">
-        </waltz-report-grid-picker>
-    </div>
-    <div ng-if="!$ctrl.showPicker" class="small">
-        <a class="clickable"
-           ng-click="$ctrl.showPicker = true">
-            Click here
-        </a>
-        to change report
-    </div>
 </div>
 
diff --git a/waltz-ng/client/report-grid/components/grid-view-section/report-grid-view-section.js b/waltz-ng/client/report-grid/components/grid-view-section/report-grid-view-section.js
@@ -15,7 +15,7 @@ function controller(serviceBroker) {
     const vm = initialiseData(this, initData);
 
     vm.onGridSelect = (grid) => {
-        vm.gridId = grid.id;
+        vm.selectedGrid = grid;
         vm.showPicker = false;
     };
 }

diff --git a/waltz-ng/client/report-grid/components/report-grid-picker/report-grid-picker.html b/waltz-ng/client/report-grid/components/report-grid-picker/report-grid-picker.html
@@ -10,9 +10,7 @@
         </div>
         <div ng-if="$ctrl.grids.length > 0"
              class="col-sm-6">
-            <hr>
-
-            <table class="table table-condensed small">
+            <table class="table table-condensed table-hover small">
                 <thead>
                 <tr>
                     <th>Grid Name</th>
@@ -25,8 +23,8 @@
                     class="clickable"
                     ng-click="$ctrl.onSelect(grid)">
                     <td>
-                        <span ng-bind="grid.name">
-                        </span>
+                        <a ng-bind="grid.name">
+                        </a>
                     </td>
                     <td>
                         <span ng-bind="grid.description">

diff --git a/waltz-ng/client/report-grid/components/report-grid-view-panel/report-grid-view-panel.html b/waltz-ng/client/report-grid/components/report-grid-view-panel/report-grid-view-panel.html
@@ -1,7 +1,5 @@
 <div>
 
-    <h4 ng-bind="$ctrl.rawGridData.definition.name"></h4>
-
     <!-- NO SUMMARIES -->
     <waltz-no-data class="small"
                    ng-if="$ctrl.chunkedSummaryData.length == 0">
@@ -41,7 +39,7 @@ <h5 class="waltz-visibility-parent">
                 <tbody>
                 <tr ng-repeat="counter in summary.counters"
                     class="clickable"
-                    ng-class="{ 'waltz-highlighted-row' : $ctrl.selectedCounter === counter.counterId }"
+                    ng-class="{ 'waltz-highlighted-row' : $ctrl.isSelectedCounter(counter.counterId) }"
                     ng-click="$ctrl.onToggleFilter(counter)">
                     <td>
                         <div style="display: inline-block; height: 10px; width: 10px;"

diff --git a/waltz-ng/client/report-grid/components/report-grid-view-panel/report-grid-view-panel.js b/waltz-ng/client/report-grid/components/report-grid-view-panel/report-grid-view-panel.js
@@ -14,7 +14,8 @@ const bindings = {
 const initData = {
     categoryExtId: "CLOUD_READINESS",
     selectedCounterId: null,
-    activeSummaryColRefs: []
+    activeSummaryColRefs: [],
+    filters: []
 };
 
 const nameCol = mkLinkGridCell("Name", "application.name", "application.id", "main.app.view", { pinnedLeft:true, width: 200});
@@ -98,7 +99,15 @@ function refreshSummaries(tableData, columnDefinitions, ratingSchemeItems) {
             return {counterId: k, count, colRef, rating: ratingSchemeItemsById[ratingId]};
         })
         .groupBy(d => d.colRef)
-        .map((counters, colRef) => ({ column: columnsByRef[colRef], counters }))
+        .map((counters, colRef) => ({
+            column: columnsByRef[colRef],
+            counters: _.orderBy(
+                counters,
+                [
+                    c => c.rating.position,
+                    c => c.rating.name
+                ])
+        }))
         .orderBy([
             d => d.column.position,
             d => d.column.columnEntityReference.name
@@ -111,7 +120,7 @@ function controller(serviceBroker) {
 
     const vm = initialiseData(this, initData);
 
-    function refresh(filterParams) {
+    function refresh(filters = []) {
         vm.columnDefs = _.map(vm.allColumnDefs, cd => Object.assign(cd, {menuItems: [
             {
                 title: "Add to summary",
@@ -124,11 +133,13 @@ function controller(serviceBroker) {
         ]}));
 
         const rowFilter = td => {
-            const assocRatingIdForRow = _.get(td, [filterParams.propName, "id"], null);
-            return assocRatingIdForRow === filterParams.ratingId;
+            return _.every(filters, f => {
+                const assocRatingIdForRow = _.get(td, [f.propName, "id"], null);
+                return assocRatingIdForRow === f.ratingId;
+            });
         };
 
-        vm.tableData = filterParams
+        vm.tableData = filters.length > 0
             ? _.filter(
                 vm.allTableData,
                 rowFilter)
@@ -166,16 +177,17 @@ function controller(serviceBroker) {
     };
 
     vm.onToggleFilter = (counter) => {
-        if (vm.selectedCounter === counter.counterId) {
-            vm.selectedCounter = null;
-            refresh();
+        if (_.some(vm.filters, f =>f.counterId === counter.counterId)) {
+            vm.filters = _.reject(vm.filters, f =>f.counterId === counter.counterId);
+            refresh(vm.filters);
         } else {
-            vm.selectedCounter = counter.counterId;
-            const filterParams = {
+            const newFilter = {
+                counterId: counter.counterId,
                 propName: counter.colRef,
                 ratingId: counter.rating.id
             };
-            refresh(filterParams);
+            vm.filters = _.concat(vm.filters, [newFilter])
+            refresh(vm.filters);
         }
     };
 
@@ -190,6 +202,10 @@ function controller(serviceBroker) {
         vm.activeSummaryColRefs = _.concat(vm.activeSummaryColRefs, [colRef]);
         refresh();
     };
+
+    vm.isSelectedCounter = (cId) => {
+        return _.some(vm.filters, f =>f.counterId === cId);
+    };
 }
 
 controller.$inject = ["ServiceBroker"];

diff --git a/waltz-ng/client/svg-diagram/component/svg-diagram.js b/waltz-ng/client/svg-diagram/component/svg-diagram.js
@@ -19,7 +19,7 @@
 import template from "./svg-diagram.html";
 import _ from "lodash";
 import angular from "angular";
-import {select} from "d3-selection";
+import {event, select} from "d3-selection";
 import {zoom, zoomIdentity} from "d3-zoom";
 import {initialiseData} from "../../common";
 
@@ -91,15 +91,15 @@ function controller($element, $window) {
     };
 
     // pan + zoom
-    function zoomed(e) {
-        const t = e.transform;
+    function zoomed() {
+        const t = event.transform;
 
         vm.svgGroupSel
             .attr("transform", t);
     }
 
     const myZoom = zoom()
-        .on("zoom", e => zoomed(e));
+        .on("zoom", zoomed);
 
     vm.enableZoom = () => {
         select($element[0])