Merge pull request buildbot#8240 from p12tic/www-d3-upgrade

www: Upgrade d3 dependency
pmisik · Dec 3, 2024 · 7b61a1a · 7b61a1a
2 parents 7923641 + 09518a4
commit 7b61a1a
Show file tree

Hide file tree

Showing 4 changed files with 437 additions and 521 deletions.
diff --git a/newsfragments/www-waterfall-view-load-times.bugfix b/newsfragments/www-waterfall-view-load-times.bugfix
@@ -0,0 +1 @@
+Slightly reduced waterfall view loading times
diff --git a/www/waterfall_view/package.json b/www/waterfall_view/package.json
@@ -31,7 +31,7 @@
     "react-router-dom": "^6.3.0"
   },
   "devDependencies": {
-    "@types/d3": "^4.13.12",
+    "@types/d3": "^7.4.3",
     "@vitejs/plugin-react": "~4.3.1",
     "axios": "~1.7.7",
     "axios-mock-adapter": "~2.0.0",
@@ -52,11 +52,8 @@
     "vitest": "~2.0.5"
   },
   "license": "GPL-2.0",
-  "resolutions": {
-    "d3-selection": "1.3.0"
-  },
   "dependencies": {
-    "d3": "^4.13.0",
+    "d3": "^7.9.0",
     "react-hotkeys-hook": "^4.4.0",
     "react-icons": "^5.3.0"
   }

diff --git a/www/waterfall_view/src/views/WaterfallView/Visualizer.ts b/www/waterfall_view/src/views/WaterfallView/Visualizer.ts
@@ -38,8 +38,8 @@ function pushTickValue(ticks: number[], y: WaterfallYScale, value: number) {
   }
 }
 
-function link(formatter) {
-  function linkImpl(this: d3.BaseType, d: unknown) {
+function link(formatter: (b: any) => string) {
+  function linkImpl(this: d3.BaseType, d: any) {
     const el = this as Element;
     if (el.parentNode === null) {
       return;
@@ -48,9 +48,9 @@ function link(formatter) {
     const a = p.append('a')
       .attr('xlink:href', formatter(d));
     a.node()?.appendChild(el);
-  };
+  }
   return linkImpl;
-};
+}
 
 
 export class Visualizer {
@@ -427,7 +427,7 @@ export class Visualizer {
     }
 
     const e = d3.select(node);
-    const mouse = d3.mouse(node);
+    const pointer = d3.pointer(node);
     this.setExtraTicksForBuild(build);
     this.drawYAxis();
 
@@ -443,7 +443,7 @@ export class Visualizer {
     let height = 40;
     const tooltip = e.append('g')
       .attr('class', 'svg-tooltip')
-      .attr('transform', `translate(${mouse[0]}, ${mouse[1]})`)
+      .attr('transform', `translate(${pointer[0]}, ${pointer[1]})`)
       .append('g')
       .attr('class', 'tooltip-content')
       .attr('transform', `translate(${tooltipOnRight ? 5 : -175}, ${- height / 2})`);
@@ -461,9 +461,9 @@ export class Visualizer {
     const e = d3.select(node);
 
     // Move the tooltip to the mouse position
-    const mouse = d3.mouse(node);
+    const pointer = d3.pointer(node);
     e.select('.svg-tooltip')
-      .attr('transform', `translate(${mouse[0]}, ${mouse[1]})`);
+      .attr('transform', `translate(${pointer[0]}, ${pointer[1]})`);
   }
 
   mouseOut(node: d3.ContainerElement) {
@@ -539,7 +539,7 @@ export class Visualizer {
 
     // Add event listeners
     builds
-      .on('mouseover', function(this: d3.ContainerElement, build: Build) {
+      .on('mouseover', function(this: d3.ContainerElement, event: any, build: Build) {
         self.mouseOver(this, build);
       })
       .on('mousemove', function(this: d3.ContainerElement) { self.mouseMove(this); })