Update d3

uyuni-project · Oct 9, 2023 · 91a308e · 91a308e
1 parent 167fc28
commit 91a308e
Show file tree

Hide file tree

Showing 6 changed files with 355 additions and 443 deletions.
diff --git a/web/html/src/branding/css/base/visualization.less b/web/html/src/branding/css/base/visualization.less
@@ -32,8 +32,6 @@
 
 .toggle-filter-button {
   background: #eff1f3;
-  margin-top: -30px;
-  float: right;
   padding: 5px 10px;
   color: @gray-dark;
   border: 1px solid @gray-light;

diff --git a/web/html/src/manager/visualization/data-tree.ts b/web/html/src/manager/visualization/data-tree.ts
@@ -36,7 +36,7 @@ declare global {
 //  - refresh - transforms the data according to current preprocessor, filters
 //  and partitioning settings and refresh the DOM
 //
-function dataTree(data, container) {
+function dataTree(data: unknown[], container: ReturnType<typeof Utils.prepareDom>) {
   let preprocessor = Preprocessing.stratify();
   const dimensions = Utils.computeSvgDimensions();
 
@@ -153,7 +153,9 @@ function appendPatchStatus(cell, patchCountsArray) {
   }
 }
 
-function updateDetailBox(d) {
+function updateDetailBox(event) {
+  const target = event.target.closest("g.node");
+  const [d] = d3.select(target).data() as any;
   const data = d.data;
 
   const detailBox = d3.select(".detailBox");

diff --git a/web/html/src/manager/visualization/hierarchy.tsx b/web/html/src/manager/visualization/hierarchy.tsx
@@ -23,7 +23,7 @@ declare global {
   }
 }
 
-function displayHierarchy(data) {
+function displayHierarchy(data: unknown[]) {
   // disable the #spacewalk-content observer:
   // drawing svg triggers it for every small changes,
   // and it is not the desired behaviour/what the observer stands for

diff --git a/web/html/src/manager/visualization/utils.ts b/web/html/src/manager/visualization/utils.ts
@@ -39,9 +39,11 @@ function prepareDom() {
         .on("zoom", zoomed) as any
     )
     .on("dblclick.zoom", null);
-  function zoomed(d) {
-    // @ts-expect-error: `d3.event.transform` doesn't seem to be correctly typed in the matching version of types
-    container.attr("transform", d3.event.transform);
+
+  function zoomed(this: Element) {
+    // See https://github.com/d3/d3-zoom#zoom-transforms
+    const transform = d3.zoomTransform(this);
+    container.attr("transform", transform.toString());
   }
 
   return container;

diff --git a/web/html/src/package.json b/web/html/src/package.json
@@ -68,7 +68,7 @@
     "copy-webpack-plugin": "5.1.2",
     "core-js": "^3.8.1",
     "css-loader": "^2.1.0",
-    "d3": "4.5.0",
+    "d3": "7.7.0",
     "dompurify": "^3.0.3",
     "eos-ds": "^5.0.0",
     "font-awesome": "4.4.0",
@@ -119,7 +119,7 @@
   "devDependencies": {
     "@testing-library/react": "^11.1.2",
     "@testing-library/user-event": "^12.6.0",
-    "@types/d3": "4.5.0",
+    "@types/d3": "7.4.1",
     "@types/dompurify": "^3.0.2",
     "@types/jest": "^26.0.19",
     "@types/jquery": "3.2.0",