Update d3 to v7 from v5 and update related dependencies and devDependencies.

static/jest.config.js

@@ -10,5 +10,8 @@ module.exports = {
       },
     },
   },
+  moduleNameMapper: {
+    '^d3$': '<rootDir>/node_modules/d3/dist/d3.min.js',
+  },
   testEnvironment: "jest-environment-jsdom",
 };

static/js/apps/visualization/redirect_utils.test.ts

@@ -25,7 +25,7 @@ describe("redirect_utils", () => {
 
   afterAll(() => {
     // Reset the original window.location for future tests
-    window.location = originalLocation;
+    window.location.href = originalLocation.href;
   });
 
   // Mocks window.location with a new URL for the given relative path

static/js/biomedical/bio_charts_utils.ts

@@ -15,7 +15,10 @@
  */
 import * as d3 from "d3";
 
-import { DiseaseGeneAssociationData } from "./disease/types";
+import {
+  DiseaseGeneAssociationData,
+  DiseaseSymptomAssociationData,
+} from "./disease/types";
 import { ProteinNumData } from "./protein/chart";
 import { DiseaseAssociationType } from "./protein/page";
 import { InteractionLink, ProteinNode } from "./protein/types";
@@ -35,6 +38,7 @@ export const DEFAULT_BRIGHTEN_PERCENTAGE = "112%";
 export const X_LABEL_SHIFT = 40;
 export type Datum =
   | DiseaseGeneAssociationData
+  | DiseaseSymptomAssociationData
   | ProteinNumData
   | ProteinNode
   | InteractionLink
@@ -60,10 +64,10 @@ export function onMouseOver(
 /**
  * Update position of global tooltip to track mouse.
  */
-export function onMouseMove(): void {
-  TOOL_TIP.style("left", d3.event.pageX - TOOL_TIP_SHIFT + "px").style(
+export function onMouseMove(event: MouseEvent): void {
+  TOOL_TIP.style("left", event.pageX - TOOL_TIP_SHIFT + "px").style(
     "top",
-    d3.event.pageY - TOOL_TIP_SHIFT + "px"
+    event.pageY - TOOL_TIP_SHIFT + "px"
   );
 }
 

static/js/biomedical/disease/chart.ts

@@ -178,7 +178,8 @@ export function drawDiseaseGeneAssocChart(
     .call(
       handleMouseEvents,
       circleIDFunc,
-      (d) => `Gene Name: ${d.name}<br>Confidence Score: ${d.score}`
+      (d: DiseaseGeneAssociationData) =>
+        `Gene Name: ${d.name}<br>Confidence Score: ${d.score}`
     );
 }
 
@@ -255,7 +256,8 @@ export function drawDiseaseSymptomAssociationChart(
     .call(
       handleMouseEvents,
       circleIDFunc,
-      (d) => `Symptom: ${d.name}<br>Odds Ratio Association: ${d.oddsRatio}`
+      (d: DiseaseSymptomAssociationData) =>
+        `Symptom: ${d.name}<br>Odds Ratio Association: ${d.oddsRatio}`
     );
 }
 /**

static/js/biomedical/protein/chart.ts

@@ -307,22 +307,28 @@ function dragNode(
 ): DragBehavior<Element, SimulationNodeDatum, SimulationNodeDatum> {
   // Reference for alphaTarget: https://stamen.com/forcing-functions-inside-d3-v4-forces-and-layout-transitions-f3e89ee02d12/
 
-  function dragstarted(nodeDatum: ProteinNode): void {
-    if (!d3.event.active) {
+  function dragstarted(
+    event: { active: number },
+    nodeDatum: ProteinNode
+  ): void {
+    if (!event.active) {
       // start up simulation
       simulation.alphaTarget(0.3).restart();
     }
     nodeDatum.fx = nodeDatum.x;
     nodeDatum.fy = nodeDatum.y;
   }
 
-  function dragged(nodeDatum: ProteinNode): void {
-    nodeDatum.fx = d3.event.x;
-    nodeDatum.fy = d3.event.y;
+  function dragged(
+    event: { x: number; y: number },
+    nodeDatum: ProteinNode
+  ): void {
+    nodeDatum.fx = event.x;
+    nodeDatum.fy = event.y;
   }
 
-  function dragended(nodeDatum: ProteinNode): void {
-    if (!d3.event.active) {
+  function dragended(event: { active: number }, nodeDatum: ProteinNode): void {
+    if (!event.active) {
       // cool down simulation
       simulation.alphaTarget(0);
     }
@@ -352,7 +358,7 @@ export function drawTissueLegend(id: string, data: ProteinStrData[]): void {
     .append("svg")
     .attr("width", GRAPH_WIDTH_XL)
     .attr("height", GRAPH_HEIGHT_XS);
-  const organTypes = d3.keys(ORGAN_COLOR_DICT);
+  const organTypes = Object.keys(ORGAN_COLOR_DICT);
   // slicing the dictionary in half to display the legend in two rows
   const dictSliceNumber = (organTypes.length + 1) / 2;
   const dataRowOne = organTypes.slice(0, dictSliceNumber);
@@ -505,7 +511,8 @@ export function drawTissueScoreChart(id: string, data: ProteinStrData[]): void {
     .call(
       handleMouseEvents,
       barIdFunc,
-      (d) => `Name: ${d.name}<br>Expression: ${TISSUE_SCORE_TO_LABEL[d.value]}`,
+      (d: ProteinNumData) =>
+        `Name: ${d.name}<br>Expression: ${TISSUE_SCORE_TO_LABEL[d.value]}`,
       PTI_BRIGHTEN_PERCENTAGE
     );
 }
@@ -657,7 +664,8 @@ export function drawProteinInteractionChart(
     .call(
       handleMouseEvents,
       barIdFunc,
-      (d) => `Protein Name: ${d.name}<br>Confidence Score: ${d.value}`
+      (d: InteractingProteinType) =>
+        `Protein Name: ${d.name}<br>Confidence Score: ${d.value}`
     );
 }
 
@@ -719,7 +727,7 @@ export function drawProteinInteractionGraph(
     .call(
       handleMouseEvents,
       linkIdFunc,
-      (d) =>
+      (d: InteractionLink) =>
         `Source: ${(d.source as ProteinNode).name}<br>Target: ${
           (d.target as ProteinNode).name
         }<br>Confidence: ${d.score}`,
@@ -856,7 +864,7 @@ export function drawDiseaseGeneAssocChart(
     .call(
       handleMouseEvents,
       barIdFunc,
-      (d) =>
+      (d: DiseaseAssociationType) =>
         `Disease Name: ${formatDiseaseName(d.name)}<br>Association Score: ${
           d.value
         }`
@@ -976,7 +984,8 @@ export function drawVarGeneAssocChart(
     .call(
       handleMouseEvents,
       circleIdFunc,
-      (d) => `Variant ID: ${d.id}<br>Log2 Fold Change: ${d.value}`
+      (d: VarGeneDataPoint) =>
+        `Variant ID: ${d.id}<br>Log2 Fold Change: ${d.value}`
     );
 
   svg
@@ -1142,7 +1151,7 @@ export function drawVarTypeAssocChart(
     .call(
       handleMouseEvents,
       barIdFunc,
-      (d) =>
+      (d: ProteinNumData) =>
         `Variant Functional Category: ${formatVariant(d.name)}<br>Count: ${
           d.value
         }`
@@ -1222,7 +1231,7 @@ export function drawVarSigAssocChart(id: string, data: ProteinNumData[]): void {
     .call(
       handleMouseEvents,
       barIdFunc,
-      (d) =>
+      (d: ProteinNumData) =>
         `Variant Clinical Significance: ${formatVariant(d.name)}<br>Count: ${
           d.value
         }`
@@ -1299,6 +1308,7 @@ export function drawChemGeneAssocChart(
     .call(
       handleMouseEvents,
       barIdFunc,
-      (d) => `Association Type: ${formatChemName(d.name)}<br>Count: ${d.value}`
+      (d: ProteinNumData) =>
+        `Association Type: ${formatChemName(d.name)}<br>Count: ${d.value}`
     );
 }

static/js/browser/observation_chart.tsx

@@ -206,7 +206,7 @@ export class ObservationChart extends React.Component<
     );
   }
 
-  private handleDotClick = (dotData: DataPoint): void => {
+  private handleDotClick = (_: MouseEvent, dotData: DataPoint): void => {
     const date = dotData.label;
     this.redirectToObsPage(date);
   };

static/js/chart/draw_bar.ts

@@ -212,8 +212,8 @@ function addHighlightOnHover(
       tooltip.style("display", "none");
     }, HIGHLIGHT_TIMEOUT);
   };
-  const mousemoveFn = function (): void {
-    const [mouseX, mouseY] = d3.mouse(container.node() as HTMLElement);
+  const mousemoveFn = function (event: MouseEvent): void {
+    const [mouseX, mouseY] = d3.pointer(event, container.node() as HTMLElement);
     positionTooltip(tooltip, mouseX, mouseY, chartAreaBoundary);
   };
 

static/js/chart/draw_d3_map.ts

@@ -123,6 +123,7 @@ function fitSize(
  */
 
 function showTooltip(
+  event: MouseEvent,
   containerElement: HTMLDivElement,
   place: NamedPlace,
   getTooltipHtml: (place: NamedPlace) => string
@@ -142,7 +143,7 @@ function showTooltip(
   const leftOffset = 2 * offset;
   const topOffset = -tooltipHeight - offset;
   let left = Math.min(
-    d3.event.offsetX + leftOffset,
+    event.offsetX + leftOffset,
     containerWidth - tooltipWidth - offset // account for decoration around the tooltip
   );
   if (left < 0) {
@@ -151,9 +152,9 @@ function showTooltip(
   } else {
     tooltipSelect.style("width", "fit-content");
   }
-  let top = d3.event.offsetY + topOffset;
+  let top = event.offsetY + topOffset;
   if (top < 0) {
-    top = d3.event.offsetY + offset;
+    top = event.offsetY + offset;
   }
   tooltipSelect
     .html(tooltipHtml)
@@ -166,7 +167,7 @@ const onMouseOver =
     canClickRegion: (placeDcid: string) => boolean,
     containerElement: HTMLDivElement
   ) =>
-  (geo: GeoJsonFeature): void => {
+  (_: MouseEvent, geo: GeoJsonFeature): void => {
     mouseHoverAction(
       containerElement,
       geo.properties.geoDcid,
@@ -178,7 +179,7 @@ const onMouseOver =
 
 const onMouseOut =
   (containerElement: HTMLDivElement) =>
-  (geo: GeoJsonFeature): void => {
+  (_: MouseEvent, geo: GeoJsonFeature): void => {
     mouseOutAction(containerElement, geo.properties.geoDcid, [
       HOVER_HIGHLIGHTED_CLASS_NAME,
       HOVER_HIGHLIGHTED_NO_CLICK_CLASS_NAME,
@@ -194,7 +195,7 @@ const onMouseMove =
     containerElement: HTMLDivElement,
     getTooltipHtml: (place: NamedPlace) => string
   ) =>
-  (geo: GeoJsonFeature): void => {
+  (event: MouseEvent, geo: GeoJsonFeature): void => {
     const placeDcid = geo.properties.geoDcid;
     mouseHoverAction(
       containerElement,
@@ -207,7 +208,7 @@ const onMouseMove =
       dcid: placeDcid,
       name: geo.properties.name,
     };
-    showTooltip(containerElement, place, getTooltipHtml);
+    showTooltip(event, containerElement, place, getTooltipHtml);
   };
 
 const onMapClick =
@@ -216,7 +217,7 @@ const onMapClick =
     containerElement: HTMLDivElement,
     redirectAction: (properties: GeoJsonFeatureProperties) => void
   ) =>
-  (geo: GeoJsonFeature): void => {
+  (_: MouseEvent, geo: GeoJsonFeature): void => {
     if (!canClickRegion(geo.properties.geoDcid)) return;
     redirectAction(geo.properties);
     mouseOutAction(containerElement, geo.properties.geoDcid, [
@@ -559,7 +560,7 @@ export function drawD3Map(
         [0, 0],
         [chartWidth, chartHeight],
       ])
-      .on("zoom", function (): void {
+      .on("zoom", function (event: d3.D3ZoomEvent<SVGElement, unknown>): void {
         mapObjects.forEach((mapObjectLayer) => {
           mapObjectLayer.on("mousemove", null).on("mouseover", null);
         });
@@ -568,7 +569,7 @@ export function drawD3Map(
           .selectAll("path,circle")
           .classed(HOVER_HIGHLIGHTED_CLASS_NAME, false)
           .classed(HOVER_HIGHLIGHTED_NO_CLICK_CLASS_NAME, false)
-          .attr("transform", d3.event.transform);
+          .attr("transform", event.transform.toString());
       })
       .on("end", function (): void {
         mapObjects.forEach((mapObjectLayer) => {
@@ -704,12 +705,12 @@ export function addMapPoints(
     });
   if (getTooltipHtml) {
     mapPointsLayer
-      .on("mouseover", (point: MapPoint) => {
+      .on("mouseover", (event: MouseEvent, point: MapPoint) => {
         const place = {
           dcid: point.placeDcid,
           name: point.placeName,
         };
-        showTooltip(containerElement, place, getTooltipHtml);
+        showTooltip(event, containerElement, place, getTooltipHtml);
       })
       .on("mouseout", () => {
         d3.select(containerElement)
@@ -736,7 +737,7 @@ export function addPolygonLayer(
   projection: d3.GeoProjection,
   getRegionColor: (geoDcid: string) => string,
   getRegionBorder: (geoDcid: string) => string,
-  onClick: (geoFeature: GeoJsonFeature) => void,
+  onClick: (event: MouseEvent, geoFeature: GeoJsonFeature) => void,
   allowMouseover = true
 ): void {
   // Build the map objects
@@ -759,14 +760,14 @@ export function addPolygonLayer(
     .on("click", onClick);
   if (allowMouseover) {
     mapObjects
-      .on("mouseover", (d: GeoJsonFeature) => {
+      .on("mouseover", (_: MouseEvent, d: GeoJsonFeature) => {
         mouseHoverAction(
           containerElement,
           d.properties.geoDcid,
           MAP_POLYGON_HIGHLIGHT_CLASS
         );
       })
-      .on("mouseout", (d: GeoJsonFeature) => {
+      .on("mouseout", (_: MouseEvent, d: GeoJsonFeature) => {
         mouseOutAction(containerElement, d.properties.geoDcid, [
           MAP_POLYGON_HIGHLIGHT_CLASS,
         ]);
@@ -787,7 +788,7 @@ export function addPathLayer(
   geoJson: GeoJsonData,
   projection: d3.GeoProjection,
   getRegionColor: (geoDcid: string) => string,
-  onClick: (feature: GeoJsonFeature) => void
+  onClick: (event: MouseEvent, feature: GeoJsonFeature) => void
 ): void {
   // Build map objects.
   const mapObjects = addGeoJsonLayer(
@@ -805,14 +806,14 @@ export function addPathLayer(
       return getRegionColor(d.properties.geoDcid);
     })
     .attr("opacity", MAP_PATH_OPACITY)
-    .on("mouseover", (d: GeoJsonFeature) => {
+    .on("mouseover", (_: MouseEvent, d: GeoJsonFeature) => {
       mouseHoverAction(
         containerElement,
         d.properties.geoDcid,
         MAP_PATH_HIGHLIGHT_CLASS
       );
     })
-    .on("mouseout", (d: GeoJsonFeature) => {
+    .on("mouseout", (_: MouseEvent, d: GeoJsonFeature) => {
       mouseOutAction(containerElement, d.properties.geoDcid, [
         MAP_PATH_HIGHLIGHT_CLASS,
       ]);