Match d3 types to installed version per package

package.json

@@ -117,7 +117,19 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.48.2",
-    "@types/d3": "^7.4.3",
+    "@types/d3-array": "^2.2.0",
+    "@types/d3-axis": "^1.0.6",
+    "@types/d3-brush": "^1.0.4",
+    "@types/d3-color": "^1.0.3",
+    "@types/d3-ease": "^1.0.3",
+    "@types/d3-format": "^1.3.0",
+    "@types/d3-interpolate": "^1.1.5",
+    "@types/d3-scale": "^1.0.5",
+    "@types/d3-selection": "^1.1.0",
+    "@types/d3-shape": "^1.2.0",
+    "@types/d3-timer": "^1.0.7",
+    "@types/d3-transition": "^1.2.0",
+    "@types/d3-zoom": "^1.1.3",
     "@types/leaflet": "^1.9.3",
     "@types/node": "^18.15.11",
     "@types/webpack-env": "^1.18.2",

src/components/tree/phyloTree/change.ts

@@ -1,4 +1,5 @@
-import { Selection, Transition } from "d3";
+import { Selection } from "d3-selection";
+import { Transition } from "d3-transition";
 import { timerFlush } from "d3-timer";
 import { calcConfidenceWidth } from "./confidence";
 import { applyToChildren, setDisplayOrder } from "./helpers";

src/components/tree/phyloTree/helpers.ts

@@ -5,6 +5,7 @@ import { NODE_VISIBLE } from "../../../util/globals";
 import { timerStart, timerEnd } from "../../../util/perf";
 import { ReduxNode } from "../../../reducers/tree/types";
 import { Distance, PhyloNode } from "./types";
+import { ScaleContinuousNumeric } from "d3-scale";
 
 /** get a string to be used as the DOM element ID
  * Note that this cannot have any "special" characters
@@ -253,7 +254,7 @@ function areNucleotideMutationsPresent(observedMutations) {
  * removing the need to guess.
  */
 export function guessAreMutationsPerSite(
-  scale: d3.ScaleContinuousNumeric<number, number>,
+  scale: ScaleContinuousNumeric<number, number>,
 ): boolean {
   const maxDivergence = max(scale.domain());
   return maxDivergence <= 5;

src/components/tree/phyloTree/layouts.ts

@@ -1,6 +1,6 @@
 /* eslint-disable no-multi-spaces */
 /* eslint-disable space-infix-ops */
-import { scaleLinear, scalePoint } from "d3-scale";
+import { scaleLinear, ScalePoint, scalePoint } from "d3-scale";
 import { timerStart, timerEnd } from "../../../util/perf";
 import { getTraitFromNode, getDivFromNode } from "../../../util/treeMiscHelpers";
 import { stemParent, nodeOrdering } from "./helpers";
@@ -523,8 +523,8 @@ const JITTER_MIN_STEP_SIZE = 50; // pixels
 
 function padCategoricalScales(
   domain: string[],
-  scale: d3.ScalePoint<string>,
-): d3.ScalePoint<string> {
+  scale: ScalePoint<string>,
+): ScalePoint<string> {
   if (scale.step() > JITTER_MIN_STEP_SIZE) return scale.padding(0.5); // balanced padding when we can jitter
   if (domain.length<=4) return scale.padding(0.4);
   if (domain.length<=6) return scale.padding(0.3);
@@ -537,7 +537,7 @@ function padCategoricalScales(
  */
 function jitter(
   axis: "x" | "y",
-  scale: d3.ScalePoint<string>,
+  scale: ScalePoint<string>,
   nodes: PhyloNode[],
 ): void {
   const step = scale.step();

src/components/tree/phyloTree/regression.ts

@@ -2,6 +2,7 @@ import { sum } from "d3-array";
 import { formatDivergence, guessAreMutationsPerSite} from "./helpers";
 import { NODE_VISIBLE } from "../../../util/globals";
 import { PhyloNode, PhyloTreeType, Regression } from "./types";
+import { ScaleContinuousNumeric } from "d3-scale";
 
 
 /**
@@ -62,7 +63,7 @@ export function calculateRegression(this: PhyloTreeType) {
 export function makeRegressionText(
   regression: Regression,
   layout: string,
-  yScale: d3.ScaleContinuousNumeric<number, number>,
+  yScale: ScaleContinuousNumeric<number, number>,
 ): string {
   if (layout==="clock") {
     if (guessAreMutationsPerSite(yScale)) {

src/components/tree/phyloTree/renderers.ts

@@ -4,7 +4,7 @@ import { getDomId, setDisplayOrder } from "./helpers";
 import { makeRegressionText } from "./regression";
 import { getEmphasizedColor } from "../../../util/colorHelpers";
 import { Callbacks, Distance, Params, PhyloNode, PhyloTreeType } from "./types";
-import { Selection } from "d3";
+import { Selection } from "d3-selection";
 import { Layout, ScatterVariables } from "../../../reducers/controls";
 import { ReduxNode, Visibility } from "../../../reducers/tree/types";
 

src/components/tree/phyloTree/types.ts

@@ -1,4 +1,4 @@
-import { Selection } from "d3";
+import { Selection } from "d3-selection";
 import { Layout, PerformanceFlags, ScatterVariables } from "../../../reducers/controls";
 import { ReduxNode, Visibility } from "../../../reducers/tree/types";
 import { change, modifySVG, modifySVGInStages } from "./change";