Streamtrees

src/actions/colors.js

@@ -4,6 +4,7 @@ import { calcColorScale } from "../util/colorScale";
 import { timerStart, timerEnd } from "../util/perf";
 import { changeEntropyCdsSelection } from "./entropy";
 import { updateFrequencyDataDebounced } from "./frequencies";
+import { partitionIntoStreams } from "../util/partitionIntoStreams";
 import * as types from "./types";
 
 /* providedColorBy: undefined | string */
@@ -27,13 +28,18 @@ export const changeColorBy = (providedColorBy = undefined) => {
 
     dispatch(changeEntropyCdsSelection(colorBy));
 
+    // Recompute streams 
+    const streams = partitionIntoStreams(controls.showStreamTrees, controls.streamTreeBranchLabel, tree.nodes, tree.visibility, colorScale, controls.absoluteDateMinNumeric, controls.absoluteDateMaxNumeric, controls.distanceMeasure)
+
+
     dispatch({
       type: types.NEW_COLORS,
       colorBy,
       colorScale,
       nodeColors,
       nodeColorsToo,
-      version: colorScale.version
+      version: colorScale.version,
+      streams
     });
 
     if (frequencies.loaded) {

src/actions/recomputeReduxState.js

@@ -23,6 +23,9 @@ import { collectAvailableTipLabelOptions } from "../components/controls/choose-t
 import { hasMultipleGridPanels } from "./panelDisplay";
 import { strainSymbolUrlString } from "../middleware/changeURL";
 import { combineMeasurementsControlsAndQuery, loadMeasurements } from "./measurements";
+import { partitionIntoStreams } from "../util/partitionIntoStreams.js";
+import { canShowStreamTrees, branchLabelsForStreamTrees } from "../components/controls/choose-stream-tree-branch-label";
+
 
 export const doesColorByHaveConfidence = (controlsState, colorBy) =>
   controlsState.coloringsPresentOnTreeWithConfidence.has(colorBy);
@@ -993,6 +996,19 @@ export const createStateFromQueryOrJSONs = ({
     visibilityToo: treeToo?.visibility,
   });
 
+  /* STREAMS */
+  const streamBranchLabels = branchLabelsForStreamTrees(tree.availableBranchLabels);
+  if (canShowStreamTrees(streamBranchLabels)) {
+    /* TMP: override default state for testing purposes */
+    controls.showStreamTrees = true; // toggle on to start with
+    controls.streamTreeBranchLabel = streamBranchLabels.includes('stream') ? 'stream' :
+      streamBranchLabels.includes('clade') ? 'clade' :
+      'none';
+  }
+  tree.streams = partitionIntoStreams(controls.showStreamTrees, controls.streamTreeBranchLabel, tree.nodes, tree.visibility, controls.colorScale, controls.absoluteDateMinNumeric, controls.absoluteDateMaxNumeric, controls.distanceMeasure)
+  // eslint-disable-next-line
+  console.log("tree.streams", tree.streams); // TODO - remove console log
+
   /* calculate entropy in view */
   if (entropy.loaded) {
     /* The selected CDS + positions are only known if a genotype color-by has been set (display defaults | url) */

src/actions/streamTrees.js

@@ -0,0 +1,34 @@
+
+import { TOGGLE_STREAM_TREE, CHANGE_STREAM_TREE_BRANCH_LABEL, CHANGE_DISTANCE_MEASURE } from "./types";
+import { partitionIntoStreams } from "../util/partitionIntoStreams";
+
+export function toggleStreamTree() {
+  return function(dispatch, getState) {
+    const {controls, tree} = getState();
+    const showStreamTrees = !controls.showStreamTrees;
+    const streams = partitionIntoStreams(showStreamTrees, controls.streamTreeBranchLabel, tree.nodes, tree.visibility, controls.colorScale, controls.absoluteDateMinNumeric, controls.absoluteDateMaxNumeric, controls.distanceMeasure)
+    dispatch({type: TOGGLE_STREAM_TREE, showStreamTrees, streams})
+  }
+}
+
+export function changeStreamTreeBranchLabel(newLabel) {
+  return function(dispatch, getState) {
+    const {controls, tree} = getState();
+    const showStreamTrees = newLabel!=='none';
+    const streams = partitionIntoStreams(showStreamTrees, newLabel, tree.nodes, tree.visibility, controls.colorScale, controls.absoluteDateMinNumeric, controls.absoluteDateMaxNumeric, controls.distanceMeasure)
+    dispatch({
+      type: CHANGE_STREAM_TREE_BRANCH_LABEL,
+      streams,
+      showStreamTrees,
+      streamTreeBranchLabel: newLabel
+    })
+  }
+}
+
+export function changeDistanceMeasure(metric) {
+  return function(dispatch, getState) {
+    const {controls, tree} = getState();
+    const streams = partitionIntoStreams(controls.showStreamTrees, controls.streamTreeBranchLabel, tree.nodes, tree.visibility, controls.colorScale, controls.absoluteDateMinNumeric, controls.absoluteDateMaxNumeric, metric)
+    dispatch({type: CHANGE_DISTANCE_MEASURE, data: metric, streams})
+  }
+}

src/actions/tree.ts

@@ -118,6 +118,7 @@ export const updateVisibleTipsAndBranchThicknesses = ({
       idxOfFilteredRoot: data.idxOfFilteredRoot,
       cladeName: cladeSelected,
       selectedClade: cladeSelected,
+      countsByCategoryPerStream: data.countsByCategoryPerStream,
     };
 
     if (controls.showTreeToo) {
@@ -135,6 +136,7 @@ export const updateVisibleTipsAndBranchThicknesses = ({
       dispatchObj.branchThicknessVersionToo = dataToo.branchThicknessVersion;
       dispatchObj.idxOfInViewRootNodeToo = rootIdxTree2;
       dispatchObj.idxOfFilteredRootToo = dataToo.idxOfFilteredRoot;
+      dispatchObj.countsByCategoryPerStream = dataToo.countsByCategoryPerStream;
       /* tip selected is the same as the first tree - the reducer uses that */
     }
 
@@ -194,6 +196,7 @@ export const changeDateFilter = ({
       branchThickness: data.branchThickness,
       branchThicknessVersion: data.branchThicknessVersion,
       idxOfInViewRootNode: tree.idxOfInViewRootNode,
+      countsByCategoryPerStream: data.countsByCategoryPerStream,
     };
     if (controls.showTreeToo) {
       const dataToo = calculateVisiblityAndBranchThickness(treeToo, controls, dates);
@@ -202,6 +205,7 @@ export const changeDateFilter = ({
       dispatchObj.visibilityVersionToo = dataToo.visibilityVersion;
       dispatchObj.branchThicknessToo = dataToo.branchThickness;
       dispatchObj.branchThicknessVersionToo = dataToo.branchThicknessVersion;
+      dispatchObj.countsByCategoryPerStream = dataToo.countsByCategoryPerStream;
     }
 
     /* Changes in visibility require a recomputation of which legend items we wish to display */

src/actions/types.js

@@ -62,3 +62,5 @@ export const TOGGLE_SHOW_ALL_BRANCH_LABELS = "TOGGLE_SHOW_ALL_BRANCH_LABELS";
 export const TOGGLE_MOBILE_DISPLAY = "TOGGLE_MOBILE_DISPLAY";
 export const SELECT_NODE = "SELECT_NODE";
 export const DESELECT_NODE = "DESELECT_NODE";
+export const TOGGLE_STREAM_TREE = "TOGGLE_STREAM_TREE";
+export const CHANGE_STREAM_TREE_BRANCH_LABEL = "CHANGE_STREAM_TREE_BRANCH_LABEL";

src/components/controls/choose-metric.js

@@ -1,11 +1,12 @@
 import React from "react";
 import { connect } from "react-redux";
 import { withTranslation } from "react-i18next";
-import { CHANGE_DISTANCE_MEASURE } from "../../actions/types";
 import { analyticsControlsEvent } from "../../util/googleAnalytics";
 import { toggleTemporalConfidence } from "../../actions/tree";
+import { toggleStreamTree, changeDistanceMeasure } from "../../actions/streamTrees";
 import { SidebarSubtitle, SidebarButton } from "./styles";
 import Toggle from "./toggle";
+import { canShowStreamTrees, branchLabelsForStreamTrees } from "./choose-stream-tree-branch-label";
 
 /* implements a pair of buttons that toggle between time & divergence tree layouts */
 @connect((state) => {
@@ -14,7 +15,10 @@ import Toggle from "./toggle";
     layout: state.controls.layout,
     showTreeToo: state.controls.showTreeToo,
     branchLengthsToDisplay: state.controls.branchLengthsToDisplay,
-    temporalConfidence: state.controls.temporalConfidence
+    temporalConfidence: state.controls.temporalConfidence,
+    showStreamTrees: state.controls.showStreamTrees,
+    availableBranchLabels: state.tree.availableBranchLabels,
+    streamTreeBranchLabel: state.controls.streamTreeBranchLabel,
   };
 })
 class ChooseMetric extends React.Component {
@@ -34,7 +38,7 @@ class ChooseMetric extends React.Component {
           selected={this.props.distanceMeasure === "num_date"}
           onClick={() => {
             analyticsControlsEvent("tree-metric-temporal");
-            this.props.dispatch({ type: CHANGE_DISTANCE_MEASURE, data: "num_date" });
+            this.props.dispatch(changeDistanceMeasure('num_date'))
           }}
         >
           {t("sidebar:time")}
@@ -44,7 +48,7 @@ class ChooseMetric extends React.Component {
           selected={this.props.distanceMeasure === "div"}
           onClick={() => {
             analyticsControlsEvent("tree-metric-temporal");
-            this.props.dispatch({ type: CHANGE_DISTANCE_MEASURE, data: "div" });
+            this.props.dispatch(changeDistanceMeasure('div'))
           }}
         >
           {t("sidebar:divergence")}
@@ -62,6 +66,18 @@ class ChooseMetric extends React.Component {
             </div>
           )
         }
+
+        { canShowStreamTrees(branchLabelsForStreamTrees(this.props.availableBranchLabels)) && this.props.streamTreeBranchLabel!=='none' && 
+          <div style={{margin: 5}}>
+            <Toggle
+              display
+              isExperimental
+              on={this.props.showStreamTrees}
+              callback={() => this.props.dispatch(toggleStreamTree())}
+              label={t("sidebar:Show stream trees")}
+            />
+          </div>
+        }
       </div>
     );
   }

src/components/controls/choose-stream-tree-branch-label.js

@@ -0,0 +1,71 @@
+import React from "react";
+import { connect } from "react-redux";
+import { withTranslation } from 'react-i18next';
+import { FaInfoCircle } from "react-icons/fa";
+import { ImLab } from "react-icons/im";
+import { SidebarSubtitleFlex, StyledTooltip, SidebarIconContainer } from "./styles";
+import { controlsWidth } from "../../util/globals";
+import CustomSelect from "./customSelect";
+import { changeStreamTreeBranchLabel } from "../../actions/streamTrees";
+
+
+export function branchLabelsForStreamTrees(availableBranchLabels) {
+  // TODO - support 2nd tree
+  return availableBranchLabels.filter((l) => l!=='aa');
+}
+export function canShowStreamTrees(availableBranchLabels) {
+  return branchLabelsForStreamTrees(availableBranchLabels).filter((x)=>x!=='none').length!==0
+}
+
+@connect((state) => ({
+  selected: state.controls.streamTreeBranchLabel,
+  available: branchLabelsForStreamTrees(state.tree.availableBranchLabels),
+}))
+class ChooseBranchLabellingForStreamTrees extends React.Component {
+  constructor(props) {
+    super(props);
+    this.change = (value) => {
+      this.props.dispatch(changeStreamTreeBranchLabel(value.value))
+    };
+  }
+  render() {
+    if (!canShowStreamTrees(this.props.available)) return null;
+    const { t } = this.props;
+    const selectOptions = this.props.available.map((x) => ({value: x, label: x}));
+    return (
+      <div style={{paddingTop: 10}}>
+        <SidebarSubtitleFlex data-tip data-for="select-stream-branch-label">
+          <span style={{ position: "relative" }}>
+            <ImLab style={{ position: "absolute", left: "-14px", top: "2px", fontSize: "10px" }}/>
+            {t("sidebar:Branch Label for Stream Trees")}
+          </span>
+          {!this.props.mobileDisplay && (
+            <>
+              <SidebarIconContainer data-tip data-for="select-stream-branch-label">
+                <FaInfoCircle/>
+              </SidebarIconContainer>
+              <StyledTooltip place="bottom" type="dark" effect="solid" id="select-stream-branch-label">
+                <>
+                  Very experimental!
+                </>
+              </StyledTooltip>
+            </>
+          )}
+        </SidebarSubtitleFlex>
+        <div style={{width: controlsWidth, fontSize: 14}}>
+          <CustomSelect
+            value={selectOptions.filter(({value}) => value === this.props.selected)}
+            options={selectOptions}
+            isClearable={false}
+            isSearchable={false}
+            isMulti={false}
+            onChange={this.change}
+          />
+        </div>
+      </div>
+    )
+  }
+}
+
+const WithTranslation = withTranslation()(ChooseBranchLabellingForStreamTrees);
+export default WithTranslation;

src/components/controls/controls.tsx

@@ -29,6 +29,7 @@ import {TreeInfo, MapInfo, AnimationOptionsInfo, PanelLayoutInfo,
 import { ControlHeader } from "./controlHeader";
 import MeasurementsOptions from "./measurementsOptions";
 import { RootState } from "../../store";
+import ChooseBranchLabellingForStreamTrees from "./choose-stream-tree-branch-label";
 
 function Controls() {
   const { t } = useTranslation();
@@ -68,6 +69,7 @@ function Controls() {
             <ChooseLayout />
             <ChooseMetric />
             <ToggleFocus tooltip={ToggleFocusInfo} />
+            <ChooseBranchLabellingForStreamTrees />
             <ChooseBranchLabelling />
             <ChooseTipLabel />
             <ChooseSecondTree />

src/components/tree/index.ts

@@ -21,6 +21,8 @@ const mapStateToProps: MapStateToProps<TreeComponentStateProps, TreeComponentOwn
   distanceMeasure: state.controls.distanceMeasure,
   explodeAttr: state.controls.explodeAttr,
   focus: state.controls.focus,
+  showStreamTrees: state.controls.showStreamTrees,
+  streamTreeBranchLabel: state.controls.streamTreeBranchLabel,
   colorScale: state.controls.colorScale,
   colorings: state.metadata.colorings,
   genomeMap: state.entropy.genomeMap,