🔨 refactor hover states

packages/@ourworldindata/grapher/src/chart/ChartManager.ts

@@ -18,8 +18,8 @@ import { OwidTable, CoreColumn } from "@ourworldindata/core-table"
 
 import { SelectionArray } from "../selection/SelectionArray"
 import { ColumnSlug, SortConfig, TimeBound } from "@ourworldindata/utils"
-import { ColorScaleBin } from "../color/ColorScaleBin"
 import { ColorScale } from "../color/ColorScale"
+import { ColorScaleBin } from "../color/ColorScaleBin"
 
 // The possible options common across our chart types. Not all of these apply to every chart type, so there is room to create a better type hierarchy.
 

packages/@ourworldindata/grapher/src/chart/ChartUtils.tsx

@@ -7,6 +7,8 @@ import {
     GrapherChartType,
     GRAPHER_CHART_TYPES,
     GRAPHER_TAB_QUERY_PARAMS,
+    InteractionState,
+    SeriesName,
 } from "@ourworldindata/types"
 import { LineChartSeries } from "../lineCharts/LineChartConstants"
 import { SelectionArray } from "../selection/SelectionArray"
@@ -17,6 +19,8 @@ import {
     GRAPHER_SETTINGS_CLASS,
     validChartTypeCombinations,
 } from "../core/GrapherConstants"
+import { ChartSeries } from "./ChartInterface"
+import { ColorScaleBin } from "../color/ColorScaleBin"
 
 export const autoDetectYColumnSlugs = (manager: ChartManager): string[] => {
     if (manager.yColumnSlugs && manager.yColumnSlugs.length)
@@ -188,3 +192,29 @@ export function findValidChartTypeCombination(
     }
     return undefined
 }
+
+/** Useful for sorting series by their interaction state */
+export function byInteractionState(series: {
+    hover: InteractionState
+}): number {
+    // background series first,
+    // then series in their default state,
+    // then active series
+    switch (series.hover) {
+        case InteractionState.background:
+            return 1
+        case InteractionState.none:
+            return 2
+        case InteractionState.active:
+            return 3
+    }
+}
+
+export function findSeriesNamesContainedInBin(
+    series: readonly ChartSeries[],
+    bin: ColorScaleBin
+): SeriesName[] {
+    return series
+        .map(({ seriesName }) => seriesName)
+        .filter((seriesName) => bin.contains(seriesName))
+}