fix broken highlighting

spotlight-client/src/VizDemographicsByCategory/VizDemographicsByCategory.tsx

@@ -17,11 +17,12 @@
 
 import { observer } from "mobx-react-lite";
 import { rem } from "polished";
-import React, { useState } from "react";
+import React from "react";
 import Measure from "react-measure";
 import { animated, useSpring, useTransition } from "react-spring/web.cjs";
 import styled from "styled-components/macro";
-import { BubbleChart, ItemToHighlight, ProportionalBar } from "../charts";
+import { BubbleChart, ProportionalBar } from "../charts";
+import { useHighlightedItem } from "../charts/utils";
 import DemographicsByCategoryMetric from "../contentModels/DemographicsByCategoryMetric";
 import DemographicFilterSelect from "../DemographicFilterSelect";
 import FiltersWrapper from "../FiltersWrapper";
@@ -50,7 +51,7 @@ type VizDemographicsByCategoryProps = {
 const VizDemographicsByCategory: React.FC<VizDemographicsByCategoryProps> = ({
   metric,
 }) => {
-  const [highlighted, setHighlighted] = useState<ItemToHighlight>();
+  const { highlighted, setHighlighted } = useHighlightedItem();
 
   const { demographicView, dataSeries } = metric;
 

spotlight-client/src/charts/BubbleChart.tsx

@@ -26,14 +26,14 @@ import {
 import forceLimit from "d3-force-limit";
 import { scaleSqrt } from "d3-scale";
 import { rem } from "polished";
-import React, { useState } from "react";
+import React from "react";
 import NetworkFrame from "semiotic/lib/NetworkFrame";
 import styled from "styled-components/macro";
 import ColorLegend from "./ColorLegend";
 import ResponsiveTooltipController from "./ResponsiveTooltipController";
 import { formatAsPct } from "../utils";
-import { getDataWithPct, highlightFade } from "./utils";
-import { CategoricalChartRecord, ItemToHighlight } from "./types";
+import { useHighlightedItem, getDataWithPct, highlightFade } from "./utils";
+import { CategoricalChartRecord } from "./types";
 import { animation, colors, typefaces } from "../UiLibrary";
 import MeasureWidth from "../MeasureWidth";
 
@@ -80,7 +80,7 @@ export default function BubbleChart({
 }: BubbleChartProps): React.ReactElement {
   const data = getDataWithPct(initialData);
 
-  const [highlighted, setHighlighted] = useState<ItemToHighlight>();
+  const { highlighted, setHighlighted } = useHighlightedItem();
 
   return (
     <MeasureWidth>

spotlight-client/src/charts/ProportionalBar.tsx

@@ -16,7 +16,7 @@
 // =============================================================================
 
 import { sum } from "d3-array";
-import React, { useState } from "react";
+import React from "react";
 import OrdinalFrame from "semiotic/lib/OrdinalFrame";
 import styled from "styled-components/macro";
 import { ValuesType } from "utility-types";
@@ -25,7 +25,7 @@ import { animation, colors, zIndex } from "../UiLibrary";
 import ColorLegend from "./ColorLegend";
 import ResponsiveTooltipController from "./ResponsiveTooltipController";
 import { CategoricalChartRecord, ItemToHighlight } from "./types";
-import { getDataWithPct, highlightFade } from "./utils";
+import { useHighlightedItem, getDataWithPct, highlightFade } from "./utils";
 
 const ProportionalBarContainer = styled.figure`
   width: 100%;
@@ -86,7 +86,10 @@ export default function ProportionalBar({
   showLegend = true,
   title,
 }: ProportionalBarProps): React.ReactElement {
-  const [localHighlighted, setLocalHighlighted] = useState<ItemToHighlight>();
+  const {
+    highlighted: localHighlighted,
+    setHighlighted: setLocalHighlighted,
+  } = useHighlightedItem();
 
   const dataWithPct = getDataWithPct(data);
   const noData = data.length === 0 || sum(data.map(({ value }) => value)) === 0;

spotlight-client/src/charts/ResponsiveTooltipController.tsx

@@ -23,12 +23,7 @@ import { AnnotationType } from "semiotic/lib/types/annotationTypes";
 import { OrdinalFrameProps } from "semiotic/lib/types/ordinalTypes";
 import { XYFrameProps } from "semiotic/lib/types/xyTypes";
 import Tooltip from "../Tooltip";
-import {
-  ItemToHighlight,
-  CommonDataPoint,
-  TooltipContentFunction,
-  isItemToHighlight,
-} from "./types";
+import { CommonDataPoint, TooltipContentFunction } from "./types";
 import { useDataStore } from "../StoreProvider";
 
 /**
@@ -61,7 +56,7 @@ export type ResponsiveTooltipControllerProps = {
     | XYFrameProps["hoverAnnotation"]
     | OrdinalFrameProps["hoverAnnotation"];
   pieceHoverAnnotation?: boolean;
-  setHighlighted?: (item?: ItemToHighlight) => void;
+  setHighlighted?: (item?: Record<string, unknown>) => void;
 };
 
 /**
@@ -133,9 +128,9 @@ const ResponsiveTooltipController: React.FC<ResponsiveTooltipControllerProps> =
         uiStore.tooltipMobileData = d;
         uiStore.renderTooltipMobile = tooltipContent;
       })();
-      if (setHighlighted && isItemToHighlight(d)) {
-        setHighlighted(d);
-      }
+
+      if (setHighlighted) setHighlighted(d);
+
       if (Array.isArray(hoverAnnotation)) {
         // if there is hover behavior other than the tooltip, we want to preserve it
         const additionalHoverAnnotations: AnnotationType[] = hoverAnnotation
@@ -162,9 +157,8 @@ const ResponsiveTooltipController: React.FC<ResponsiveTooltipControllerProps> =
   };
 
   childProps.customHoverBehavior = (d?: Record<string, unknown>) => {
-    if (setHighlighted && isItemToHighlight(d)) {
-      setHighlighted(d);
-    }
+    if (setHighlighted) setHighlighted(d);
+
     if (customHoverBehavior) customHoverBehavior(d);
   };
 

spotlight-client/src/charts/WindowedTimeSeries.tsx

@@ -24,11 +24,11 @@ import styled from "styled-components/macro";
 import { animation, colors } from "../UiLibrary";
 import { formatAsNumber } from "../utils";
 import BaseChartWrapper from "./ChartWrapper";
-import { getDataWithPct, highlightFade } from "./utils";
+import { getDataWithPct, highlightFade, useHighlightedItem } from "./utils";
 import ColorLegend from "./ColorLegend";
 import XHoverController from "./XHoverController";
 import { HistoricalPopulationBreakdownRecord } from "../metricsApi";
-import { DataSeries, ItemToHighlight } from "./types";
+import { DataSeries } from "./types";
 import MeasureWidth from "../MeasureWidth";
 
 const CHART_HEIGHT = 430;
@@ -77,7 +77,7 @@ const WindowedTimeSeries: React.FC<{
   defaultRangeStart?: Date;
   setTimeRangeId: (id: WindowSizeId) => void;
 }> = ({ data, defaultRangeEnd, defaultRangeStart, setTimeRangeId }) => {
-  const [highlighted, setHighlighted] = useState<ItemToHighlight | undefined>();
+  const { highlighted, setHighlighted } = useHighlightedItem();
   const [dateRangeStart, setDateRangeStart] = useState<Date | undefined>();
   const [dateRangeEnd, setDateRangeEnd] = useState<Date | undefined>();
   const { isMobile } = useBreakpoint();

spotlight-client/src/charts/utils.ts

@@ -18,7 +18,9 @@
 import { sum } from "d3-array";
 import { color } from "d3-color";
 import { interpolateRgb } from "d3-interpolate";
+import { useCallback, useState } from "react";
 import { colors } from "../UiLibrary";
+import { isItemToHighlight, ItemToHighlight } from "./types";
 
 /**
  * Given a series of records, sums up their values and computes the value of each
@@ -58,3 +60,29 @@ export function highlightFade(
   // the ramp goes from 0 to 1 with values analogous to opacity
   return interpolateRgb(colors.background, baseColor)(FADE_AMOUNT);
 }
+
+export function useHighlightedItem(
+  initialValue?: ItemToHighlight
+): {
+  // object instead of tuple because the TS tuple syntax is unsupported
+  // in our version of react-scripts
+  // https://github.com/facebook/create-react-app/issues/9515
+  highlighted: ItemToHighlight | undefined;
+  setHighlighted: (arg?: Record<string, unknown>) => void;
+} {
+  const [highlighted, setHighlighted] = useState<ItemToHighlight | undefined>(
+    initialValue
+  );
+  const setHighlightedWithTypeCheck = useCallback(
+    (arg) => {
+      if (isItemToHighlight(arg) || typeof arg === "undefined") {
+        setHighlighted(arg);
+      } else {
+        throw new Error("unexpected data type; cannot highlight");
+      }
+    },
+    [setHighlighted]
+  );
+
+  return { highlighted, setHighlighted: setHighlightedWithTypeCheck };
+}