GDB-8974 Upgrade D3.js library (#1117)

* GDB-8974 Upgrade D3.js library ## What Update the D3 library to latest version of the v4 release ## Why There is a vulnerability in d3-color package in the used D3 v3 library. The vulnerability is fixed and released with D3 v7.8.5. Since there are major breaking changes in v4, a migration first to v4 and then to v7. ## How - removed imports of the old patched version - added a new patch for the latest v4 version - refactored directives and controllers to update to v4
Ontotext-AD · Nov 9, 2023 · 96a364e · 96a364e
1 parent 82b6dc5
commit 96a364e
Show file tree

Hide file tree

Showing 24 changed files with 1,217 additions and 1,159 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -97,7 +97,7 @@
         "angular-xeditable": "^0.10.0",
         "angularjs-slider": "^7.0.0",
         "autofill-event": "0.0.1",
-        "d3": "4.2.1",
+        "d3": "4.13.0",
         "font-awesome": "^4.7.0",
         "jquery": "^3.4.1",
         "jsrsasign": "^10.3.0",

diff --git a/src/css/graphs-vizualizations.css b/src/css/graphs-vizualizations.css
@@ -76,7 +76,7 @@
 }
 
 .graph-visualization {
-    height: calc(100vh - 120px);
+    height: calc(100vh - 190px);
 }
 
 .graph-visualization svg {

diff --git a/src/js/angular/clustermanagement/app.js b/src/js/angular/clustermanagement/app.js
@@ -3,8 +3,7 @@ import 'angular/core/directives';
 import 'angular/clustermanagement/controllers';
 import 'angular/clustermanagement/directives';
 import 'angular/core/services/repositories.service';
-import 'd3/build/d3';
-import 'lib/d3-ONTO-chord-patch';
+import 'lib/d3.patch.js';
 import 'angular-pageslide-directive/dist/angular-pageslide-directive';
 
 const modules = [

diff --git a/src/js/angular/clustermanagement/cluster-drawing.service.js b/src/js/angular/clustermanagement/cluster-drawing.service.js
@@ -80,6 +80,11 @@ export function createNodes(nodesDataBinding, nodeRadius, isLegend) {
         .attr('id', 'node-group')
         .classed('legend', isLegend);
 
+    const nodeUpdateElements = nodeGroup
+        .merge(nodesDataBinding)
+        .attr('id', 'node-group')
+        .classed('legend', isLegend);
+
     createHexagon(nodeGroup, nodeRadius);
     nodesDataBinding.exit().remove();
 
@@ -88,6 +93,7 @@ export function createNodes(nodesDataBinding, nodeRadius, isLegend) {
         .attr('class', 'icon-any node-icon');
 
     addHostnameToNodes(nodeGroup, nodeRadius, isLegend);
+    return nodeUpdateElements
 }
 
 function addHostnameToNodes(nodeElements, nodeRadius, isLegend) {
@@ -314,14 +320,14 @@ function getLinkCoordinates(link, nodes) {
     return 'M' + sourceX + ',' + sourceY + 'L' + targetX + ',' + targetY;
 }
 
-export function positionNodesOnClusterZone(nodes, clusterZoneX, clusterZoneY, clusterZoneRadius) {
-    nodes
+export function positionNodesOnClusterZone(nodeElements, clusterZoneX, clusterZoneY, clusterZoneRadius) {
+    nodeElements
         .attr('transform', (node, index) => {
             // Calculate initial positions for the new nodes based on
             // spreading them evenly on a circle around the center of the page.
-            const theta = 2 * Math.PI * index / nodes[0].length;
-            var x = clusterZoneX + Math.cos(theta) * clusterZoneRadius;
-            var y = clusterZoneY + Math.sin(theta) * clusterZoneRadius;
+            const theta = 2 * Math.PI * index / nodeElements.size();
+            const x = clusterZoneX + Math.cos(theta) * clusterZoneRadius;
+            const y = clusterZoneY + Math.sin(theta) * clusterZoneRadius;
             node.x = x;
             node.y = y;
             return `translate(${x}, ${y})`;
@@ -342,5 +348,5 @@ function createHexagon(nodeGroup, radius) {
         .enter()
         .append("path")
         .attr('class', 'node member')
-        .attr("d", d3.svg.line());
+        .attr("d", d3.line());
 }
diff --git a/src/js/angular/clustermanagement/directives.js b/src/js/angular/clustermanagement/directives.js
@@ -236,17 +236,17 @@ clusterManagementDirectives.directive('clusterGraphicalView', ['$window', 'Local
                         .text(getLabelFor('link_state'));
 
                     const legendNodeData = legendGroup.selectAll('#node-group').data(legendNodes);
-                    CDS.createNodes(legendNodeData, legendNodeRadius, true);
-                    CDS.updateNodes(legendNodeData);
+                    const legendNodesElements = CDS.createNodes(legendNodeData, legendNodeRadius, true);
+                    CDS.updateNodes(legendNodesElements);
 
-                    legendNodeData.select('.node.member')
+                    legendNodesElements.select('.node.member')
                         .on("mouseover", function (d) {
                             d3.event.stopPropagation();
                             showLegendTooltip(d, this);
                         })
                         .on('mouseout', hideLegendTooltip);
 
-                    legendNodeData
+                    legendNodesElements
                         .attr('transform', function (d) {
                             const row = Math.floor(d.id / legendColumns);
                             const column = d.id % legendColumns;
@@ -257,8 +257,8 @@ clusterManagementDirectives.directive('clusterGraphicalView', ['$window', 'Local
                         });
 
                     legendGroup
-                        .call(function () {
-                            legendWidth = this.node().getBBox().width;
+                        .call(function (d) {
+                            legendWidth = d.node().getBBox().width;
                         });
 
                     // Position node/link state labels
@@ -317,8 +317,8 @@ clusterManagementDirectives.directive('clusterGraphicalView', ['$window', 'Local
 
                     legendGroup
                         .call(function (d) {
-                            legendHeight = this.node().getBBox().height;
-                            legendWidth = this.node().getBBox().width;
+                            legendHeight = d.node().getBBox().height;
+                            legendWidth = d.node().getBBox().width;
                         });
 
                     legendGroup.select('.legend-background')
@@ -343,7 +343,9 @@ clusterManagementDirectives.directive('clusterGraphicalView', ['$window', 'Local
                         }
                     });
                     const nodeData = nodesGroup.selectAll('#node-group').data(nodes, (node) => node.address);
-                    nodeData
+                    const nodesElements = CDS.createNodes(nodeData, nodeRadius);
+
+                    nodesElements
                         .on('click', (d) => {
                             scope.childContext.selectNode(d);
 
@@ -361,9 +363,8 @@ clusterManagementDirectives.directive('clusterGraphicalView', ['$window', 'Local
                             }
                             tooltip.style("top", (d3.event.pageY - 28) + "px");
                         });
-                    CDS.createNodes(nodeData, nodeRadius);
-                    CDS.updateNodes(nodeData);
-                    CDS.positionNodesOnClusterZone(nodeData, clusterZoneX, clusterZoneY, clusterZoneRadius);
+                    CDS.updateNodes(nodesElements);
+                    CDS.positionNodesOnClusterZone(nodesElements, clusterZoneX, clusterZoneY, clusterZoneRadius);
                 }
 
                 function drawLinks(links, nodes) {

diff --git a/src/js/angular/graphexplore/app.js b/src/js/angular/graphexplore/app.js
@@ -4,8 +4,7 @@ import 'angular/core/directives';
 import 'angular/core/services/repositories.service';
 import 'angular-ui-scroll/dist/ui-scroll.min';
 import 'angular-ui-scroll/dist/ui-scroll-jqlite.min';
-import 'd3/build/d3';
-import 'lib/d3-ONTO-chord-patch';
+import 'lib/d3.patch.js';
 import 'lib/d3-tip/d3-tip-patch';
 import 'angular-pageslide-directive/dist/angular-pageslide-directive';
 import 'angularjs-slider/dist/rzslider.min';

diff --git a/src/js/angular/graphexplore/controllers/graphs-config.controller.js b/src/js/angular/graphexplore/controllers/graphs-config.controller.js
@@ -653,6 +653,10 @@ function GraphConfigCtrl($scope, $timeout, $location, toastr, $repositories, Spa
     }
 
     function loadTab() {
+        if (!window.editor) {
+            $timeout(() => loadTab());
+            return;
+        }
         $scope.tabsData = [$scope.currentQuery];
 
         let tab = $scope.currentQuery;