Merge pull request #1910 from nextstrain/measurements-types

Add measurements types

package.json

@@ -131,6 +131,7 @@
     "@types/d3-transition": "^1.2.0",
     "@types/d3-zoom": "^1.1.3",
     "@types/leaflet": "^1.9.3",
+    "@types/lodash": "^4.17.13",
     "@types/node": "^18.15.11",
     "@types/webpack-env": "^1.18.2",
     "@typescript-eslint/eslint-plugin": "^5.57.0",

src/actions/tree.ts

@@ -13,17 +13,14 @@ import { warningNotification } from "./notifications";
 import { calcFullTipCounts, calcTipCounts } from "../util/treeCountingHelpers";
 import { PhyloNode } from "../components/tree/phyloTree/types";
 import { Metadata } from "../metadata";
-import { AppDispatch, RootState } from "../store";
+import { ThunkFunction } from "../store";
 import { ReduxNode, TreeState } from "../reducers/tree/types";
 
 type RootIndex = number | undefined
 
 /** [root idx tree1, root idx tree2] */
 export type Root = [RootIndex, RootIndex]
 
-/** A function to be handled by redux (thunk) */
-type ThunkFunction = (dispatch: AppDispatch, getState: () => RootState) => void
-
 /**
  * Updates the `inView` property of nodes which depends on the currently selected
  * root index (i.e. what node the tree is zoomed into).
@@ -277,7 +274,7 @@ export const applyFilter = (
    *  - "set"  -> set the values of the filter to be those provided. All disabled filters will be removed. XXX TODO.
    */
   mode: "add" | "inactivate" | "remove" | "set",
-  
+
   /** the trait name of the filter ("authors", "country" etcetera) */
   trait: string | symbol,
 

src/components/controls/filter.js

@@ -28,8 +28,8 @@ const DEBOUNCE_TIME = 200;
     nodes: state.tree.nodes,
     nodesSecondTree: state.treeToo?.nodes,
     totalStateCountsSecondTree: state.treeToo?.totalStateCounts,
-    measurementsFieldsMap: state.measurements.collectionToDisplay.fields,
-    measurementsFiltersMap: state.measurements.collectionToDisplay.filters,
+    measurementsFieldsMap: state.measurements.collectionToDisplay?.fields,
+    measurementsFiltersMap: state.measurements.collectionToDisplay?.filters,
     measurementsFilters: state.controls.measurementsFilters
   };
 })

src/components/controls/measurementsOptions.js → src/components/controls/measurementsOptions.tsx

@@ -13,15 +13,22 @@ import { controlsWidth } from "../../util/globals";
 import { SidebarSubtitle, SidebarButton } from "./styles";
 import Toggle from "./toggle";
 import CustomSelect from "./customSelect";
+import { Collection } from "../../reducers/measurements/types";
+import { RootState } from "../../store";
+
+interface SelectOption {
+  value: string
+  label: string
+}
 
 /**
  * React Redux selector function that takes the key and title for the
  * available collections to create the object expected for the Select library.
  * The label defaults to the key if a collection does not have a set title.
- * @param {Array<Object>} collections
- * @returns {Array<Object>}
  */
-const collectionOptionsSelector = (collections) => {
+const collectionOptionsSelector = (
+  collections: Collection[]
+): SelectOption[]  => {
   return collections.map((collection) => {
     return {
       value: collection.key,
@@ -32,15 +39,15 @@ const collectionOptionsSelector = (collections) => {
 
 const MeasurementsOptions = () => {
   const dispatch = useAppDispatch();
-  const collection = useSelector((state) => state.measurements.collectionToDisplay);
-  const collectionOptions = useSelector((state) => collectionOptionsSelector(state.measurements.collections), isEqual);
-  const groupBy = useSelector((state) => state.controls.measurementsGroupBy);
-  const display = useSelector((state) => state.controls.measurementsDisplay);
-  const showOverallMean = useSelector((state) => state.controls.measurementsShowOverallMean);
-  const showThreshold = useSelector((state) => state.controls.measurementsShowThreshold);
+  const collection = useSelector((state: RootState) => state.measurements.collectionToDisplay);
+  const collectionOptions = useSelector((state: RootState) => collectionOptionsSelector(state.measurements.collections), isEqual);
+  const groupBy = useSelector((state: RootState) => state.controls.measurementsGroupBy);
+  const display = useSelector((state: RootState) => state.controls.measurementsDisplay);
+  const showOverallMean = useSelector((state: RootState) => state.controls.measurementsShowOverallMean);
+  const showThreshold = useSelector((state: RootState) => state.controls.measurementsShowThreshold);
 
   // Create grouping options for the Select library
-  let groupingOptions = [];
+  let groupingOptions: SelectOption[] = [];
   if (collection.groupings) {
     groupingOptions = [...collection.groupings.keys()].map((grouping) => {
       return {

src/components/info/filtersSummary.js

@@ -42,7 +42,7 @@ const closeBracketSmall = <span style={{fontSize: "1.8rem", fontWeight: 300, pad
     absoluteDateMax: state.controls.absoluteDateMax,
     branchLengthsToDisplay: state.controls.branchLengthsToDisplay,
     measurementsFilters: state.controls.measurementsFilters,
-    measurementsFields: state.measurements.collectionToDisplay.fields
+    measurementsFields: state.measurements.collectionToDisplay?.fields
   };
 })
 class FiltersSummary extends React.Component {

src/components/measurements/hoverPanel.js → src/components/measurements/hoverPanel.tsx

@@ -1,11 +1,23 @@
-import React from "react";
+import React, { CSSProperties } from "react";
 import { infoPanelStyles } from "../../globalStyles";
 import { InfoLine } from "../tree/infoPanels/hover";
 
-const HoverPanel = ({hoverData}) => {
+export interface HoverData {
+  hoverTitle: string
+  mouseX: number
+  mouseY: number
+  containerId: string
+  data: Map<string, unknown>
+}
+
+const HoverPanel = ({
+  hoverData
+}: {
+  hoverData: HoverData
+}) => {
   if (hoverData === null) return null;
   const { hoverTitle, mouseX, mouseY, containerId, data } = hoverData;
-  const panelStyle = {
+  const panelStyle: CSSProperties = {
     position: "absolute",
     minWidth: 200,
     padding: "5px",