🚧 more types

src/components/tree/index.ts

@@ -1,8 +1,9 @@
-import { connect } from "react-redux";
+import { connect, MapStateToProps } from "react-redux";
 import UnconnectedTree from "./tree";
 import { RootState } from "../../store";
+import { TreeComponentPropsFromState } from "./tree";
 
-const Tree = connect((state: RootState) => ({
+const mapStateToProps: MapStateToProps<TreeComponentPropsFromState, {}, RootState> = (state: RootState) => ({
   tree: state.tree,
   treeToo: state.treeToo,
   selectedNode: state.controls.selectedNode,
@@ -31,6 +32,8 @@ const Tree = connect((state: RootState) => ({
   narrativeMode: state.narrative.display,
   animationPlayPauseButton: state.controls.animationPlayPauseButton,
   showOnlyPanels: state.controls.showOnlyPanels
-}))(UnconnectedTree);
+});
+
+const Tree = connect(mapStateToProps)(UnconnectedTree);
 
 export default Tree;

src/components/tree/phyloTree/change.ts

@@ -6,7 +6,7 @@ import { NODE_VISIBLE } from "../../../util/globals";
 import { getBranchVisibility, strokeForBranch } from "./renderers";
 import { shouldDisplayTemporalConfidence } from "../../../reducers/controls";
 import { makeTipLabelFunc } from "./labels";
-import { PhyloNode, PhyloTree, Visibility } from "./phyloTree";
+import { Layout, PhyloNode, PhyloTree, Visibility } from "./phyloTree";
 
 /* loop through the nodes and update each provided prop with the new value
  * additionally, set d.update -> whether or not the node props changed
@@ -255,22 +255,33 @@ export interface ChangeParams {
   svgHasChangedDimensions?: boolean
   animationInProgress?: boolean
   changeNodeOrder?: boolean
+  focus?: boolean
+
   newDistance?: any
-  newLayout?: any
-  updateLayout?: any
-  newBranchLabellingKey?: any
-  showAllBranchLabels?: any
+  newLayout?: Layout
+  updateLayout?: boolean
+  newBranchLabellingKey?: string
+  showAllBranchLabels?: boolean
   newTipLabelKey?: any
-  branchStroke?: any[]
-  tipStroke?: any[]
+
+  branchStroke?: string[]
+  tipStroke?: (string | undefined)[]
   fill?: any[]
   visibility?: Visibility[]
   tipRadii?: any[]
   branchThickness?: any[]
-  focus: boolean
+
   scatterVariables?: any
 }
 
+interface Extras {
+  removeConfidences: boolean
+  showConfidences: boolean
+  newBranchLabellingKey?: string
+
+  timeSliceHasPotentiallyChanged?: boolean
+  hideTipLabels?: boolean
+}
 
 export const change = function change(this: PhyloTree, params: ChangeParams) {
   const {
@@ -424,7 +435,7 @@ export const change = function change(this: PhyloTree, params: ChangeParams) {
     elemsToUpdate.add('.tipLabel'); /* will trigger d3 commands as required */
   }
 
-  const extras = { removeConfidences, showConfidences, newBranchLabellingKey };
+  const extras: Extras = { removeConfidences, showConfidences, newBranchLabellingKey };
   extras.timeSliceHasPotentiallyChanged = changeVisibility || newDistance;
   extras.hideTipLabels = animationInProgress || newTipLabelKey === 'none';
   if (useModifySVGInStages) {

src/components/tree/phyloTree/defaultParams.js → src/components/tree/phyloTree/defaultParams.ts

@@ -1,6 +1,7 @@
 import { dataFont, darkGrey } from "../../../globalStyles";
+import { Params } from "./phyloTree";
 
-export const createDefaultParams = () => ({
+export const createDefaultParams = (): Params => ({
   regressionStroke: darkGrey,
   regressionWidth: 6,
   majorGridStroke: "#DDD",

src/components/tree/phyloTree/phyloTree.ts

@@ -33,10 +33,56 @@ export interface PhyloNode {
   update?: boolean
 }
 
+export interface Params {
+  regressionStroke: string
+  regressionWidth: number
+  majorGridStroke: string
+  majorGridWidth: number
+  minorGridStroke: string
+  minorGridWidth: number
+  tickLabelSize: number
+  tickLabelFill: string
+  minorTicks: number
+  orientation: [number, number]
+  showGrid: boolean
+  fillSelected: string
+  radiusSelected: number
+  branchStroke: string
+  branchStrokeWidth: number
+  tipStroke: string
+  tipFill: string
+  tipStrokeWidth: number
+  tipRadius: number
+  fontFamily: string
+
+  branchLabelKey: boolean
+  branchLabelFont: string
+  branchLabelFill: string
+  branchLabelFontWeight: number
+  branchLabelPadX: number
+  branchLabelPadY: number
+
+  tipLabels: boolean
+  tipLabelFont: string
+  tipLabelFill: string
+  tipLabelPadX: number
+  tipLabelPadY: number
+  mapToScreenDebounceTime: number
+  tipLabelFontSizeL1: number
+  tipLabelFontSizeL2: number
+  tipLabelFontSizeL3: number
+  tipLabelBreakL1: number
+  tipLabelBreakL2: number
+  tipLabelBreakL3: number
+
+  showAllBranchLabels?: boolean
+  confidence?: boolean
+}
+
 export interface PhyloTree {
   grid: boolean
   attributes: string[]
-  params: ReturnType<typeof createDefaultParams>
+  params: Params
   groups: Record<string, any>
   id: string
   nodes: PhyloNode[]

src/components/tree/tree.tsx

@@ -28,56 +28,68 @@ interface TreeNode {
 }
 
 interface TreeState {
-  branchThickness: any
+  branchThickness: number[]
+  branchThicknessVersion: number
   idxOfFilteredRoot?: number
   idxOfInViewRootNode: number
   loaded: boolean
   name: string
-  nodeColors: any
+  nodeColors: string[]
   nodeColorsVersion: number
   nodes: ReduxNode[]
-  observedMutations: any
-  tipRadii: any
+  observedMutations: Record<string, number>
+  tipRadii: number[]
+  tipRadiiVersion: number
   vaccines: any
   visibility: Visibility[]
   visibilityVersion: number
 }
 
 interface TreeTooState extends TreeState {
-  tangleTipLookup: any
+  tangleTipLookup: any[][]
 }
 
-export interface TreeComponentProps extends WithTranslation {
+export interface TreeComponentProps extends WithTranslation, TreeComponentPropsFromState {
+  dispatch: (action: any) => void
+  height: number
+  width: number
+}
+
+// FIXME: source these types from state
+export interface TreeComponentPropsFromState {
+  animationPlayPauseButton: "Play" | "Pause"
   canRenderBranchLabels: boolean
   colorBy: any
-  colorByConfidence: any
+  colorByConfidence: boolean
   colorings: any
   colorScale: any
   dateMaxNumeric: number
   dateMinNumeric: number
-  dispatch: (action: any) => void
   distanceMeasure: any
+  explodeAttr: any
+  filters: any[]
+  focus: boolean
   genomeMap: any
-  height: number
   layout: Layout
   narrativeMode: boolean
+  panelsToDisplay: string[]
+  quickdraw: boolean
   scatterVariables: {
     showBranches?: boolean
   }
-  selectedBranchLabel: any
+  selectedBranchLabel: string
   selectedNode: any
+  showAllBranchLabels: boolean
   showOnlyPanels: boolean
   showTangle: boolean
   showTreeToo: boolean
-  showAllBranchLabels: boolean
   temporalConfidence: {
     display: boolean
     on: boolean
   }
   tipLabelKey: any
   tree: TreeState
   treeToo: TreeTooState
-  width: number
 }
 
 

src/reducers/controls.ts

@@ -31,16 +31,62 @@ interface Defaults {
 
 export interface BasicControlsState {
   defaults: Defaults
+
+  available?: boolean
+  canTogglePanelLayout: boolean
+  temporalConfidence: {
+    exists: boolean
+    display: boolean
+    on: boolean
+  }
   layout: Layout
+  scatterVariables: Record<string, any>
+  distanceMeasure: string
+  focus: boolean
+  dateMin: string
+  dateMinNumeric: number
+  dateMax: string
+  dateMaxNumeric: number
+  absoluteDateMin: string
+  absoluteDateMinNumeric: number
+  absoluteDateMax: string
+  absoluteDateMaxNumeric: number
+  colorBy: string
+  colorByConfidence: boolean
+  colorScale?: (val: any) => any
+  explodeAttr?: any
+  selectedBranchLabel: string
+  showAllBranchLabels: boolean
+  selectedNode: any | null
+  canRenderBranchLabels: boolean
+  analysisSlider: boolean
+  geoResolution: string
+  filters: Record<string, any>
+  filtersInFooter: string[]
+  modal: 'download' | 'linkOut' | null
+  quickdraw: boolean
+  mapAnimationDurationInMilliseconds: number
+  mapAnimationStartDate: any
+  mapAnimationCumulative: boolean
+  mapAnimationShouldLoop: boolean
+  animationPlayPauseButton: "Play" | "Pause"
   panelsAvailable: string[]
   panelsToDisplay: string[]
+  panelLayout: string
+  tipLabelKey: typeof strainSymbol
   showTreeToo: boolean
-  canTogglePanelLayout: boolean
-  focus: boolean
+  showTangle: boolean
+  zoomMin?: number
+  zoomMax?: number
+  branchLengthsToDisplay: string
+  sidebarOpen: boolean
+  treeLegendOpen?: boolean  // FIXME: unused?
+  mapLegendOpen?: boolean  // FIXME: unused?
+  showOnlyPanels: boolean
+  showTransmissionLines: boolean
+  normalizeFrequencies: boolean
 
-  // This allows arbitrary prop names while TypeScript adoption is incomplete.
-  // TODO: add all other props explicitly and remove this.
-  [propName: string]: any;
+  coloringsPresentOnTree?: Set<string>
 }
 
 export interface MeasurementsControlState {
@@ -59,7 +105,7 @@ export interface ControlsState extends BasicControlsState, MeasurementsControlSt
 /* defaultState is a fn so that we can re-create it
 at any time, e.g. if we want to revert things (e.g. on dataset change)
 */
-export const getDefaultControlsState = () => {
+export const getDefaultControlsState = (): ControlsState => {
   const defaults: Defaults = {
     distanceMeasure: defaultDistanceMeasure,
     layout: defaultLayout,
@@ -84,6 +130,7 @@ export const getDefaultControlsState = () => {
   const dateMinNumeric = calendarToNumeric(dateMin);
   const dateMaxNumeric = calendarToNumeric(dateMax);
   return {
+    // FIXME: add a default for coloringsPresentOnTree
     defaults,
     available: undefined,
     canTogglePanelLayout: true,
@@ -357,7 +404,8 @@ const Controls = (state: ControlsState = getDefaultControlsState(), action): Con
       return Object.assign({}, state, { legendOpen: action.value });
     case types.ADD_EXTRA_METADATA: {
       for (const colorBy of Object.keys(action.newColorings)) {
-        state.coloringsPresentOnTree.add(colorBy);
+        // FIXME: add a default for coloringsPresentOnTree
+        state.coloringsPresentOnTree!.add(colorBy);
       }
       let newState = Object.assign({}, state, { coloringsPresentOnTree: state.coloringsPresentOnTree, filters: state.filters });
       if (action.newGeoResolution && !state.panelsAvailable.includes("map")) {