Toggle transmission lines

src/actions/types.js

@@ -51,3 +51,4 @@ export const CHANGE_ZOOM = "CHANGE_ZOOM";
 export const SET_AVAILABLE = "SET_AVAILABLE";
 export const TOGGLE_SIDEBAR = "TOGGLE_SIDEBAR";
 export const TOGGLE_LEGEND = "TOGGLE_LEGEND";
+export const TOGGLE_TRANSMISSION_LINES = "TOGGLE_TRANSMISSION_LINES";

src/components/controls/controls.js

@@ -10,6 +10,7 @@ import ChooseSecondTree from "./choose-second-tree";
 import ChooseMetric from "./choose-metric";
 import PanelLayout from "./panel-layout";
 import GeoResolution from "./geo-resolution";
+import TransmissionLines from './transmission-lines';
 import MapAnimationControls from "./map-animation";
 import PanelToggles from "./panel-toggles";
 import SearchStrains from "./search";
@@ -45,6 +46,7 @@ function Controls({mapOn}) {
         <span style={{marginTop: "15px"}}>
           <SidebarHeader>{t("sidebar:Map Options")}</SidebarHeader>
           <GeoResolution/>
+          <TransmissionLines/>
           <MapAnimationControls/>
         </span>
       ) : null}

src/components/controls/transmission-lines.js

@@ -0,0 +1,32 @@
+import React from "react";
+import { connect } from "react-redux";
+import { withTranslation } from "react-i18next";
+
+import Toggle from "./toggle";
+import { controlsWidth } from "../../util/globals";
+import { TOGGLE_TRANSMISSION_LINES } from "../../actions/types";
+
+@connect((state) => {
+  return {
+    showTransmissionLines: state.controls.showTransmissionLines
+  };
+})
+class TransmissionLines extends React.Component {
+  render() {
+    const { t } = this.props;
+    return (
+      <div style={{marginBottom: 10, width: controlsWidth, fontSize: 14}}>
+        <Toggle
+          display
+          on={this.props.showTransmissionLines}
+          callback={() => {
+            this.props.dispatch({ type: TOGGLE_TRANSMISSION_LINES, data: !this.props.showTransmissionLines });
+          }}
+          label={t("sidebar:Show transmission lines")}
+        />
+      </div>
+    );
+  }
+}
+
+export default withTranslation()(TransmissionLines);

src/components/map/map.js

@@ -57,7 +57,8 @@ import "../../css/mapbox.css";
       !state.controls.colorScale.continuous &&                           // continuous color scale = no pie chart
       state.controls.geoResolution !== state.controls.colorScale.colorBy // geo circles match colorby == no pie chart
     ),
-    legendValues: state.controls.colorScale.legendValues
+    legendValues: state.controls.colorScale.legendValues,
+    showTransmissionLines: state.controls.showTransmissionLines
   };
 })
 
@@ -241,7 +242,8 @@ class Map extends React.Component {
         this.props.dateMaxNumeric,
         this.props.pieChart,
         this.props.geoResolution,
-        this.props.dispatch
+        this.props.dispatch,
+        this.props.showTransmissionLines,
       );
 
       // don't redraw on every rerender - need to seperately handle virus change redraw
@@ -270,9 +272,10 @@ class Map extends React.Component {
   maybeRemoveAllDemesAndTransmissions(nextProps) {
     const mapIsDrawn = !!this.state.map;
     const geoResolutionChanged = this.props.geoResolution !== nextProps.geoResolution;
+    const transmissionLinesToggleChanged = this.props.showTransmissionLines !== nextProps.showTransmissionLines;
     const dataChanged = (!nextProps.treeLoaded || this.props.treeVersion !== nextProps.treeVersion);
     const colorByChanged = (nextProps.colorScaleVersion !== this.props.colorScaleVersion);
-    if (mapIsDrawn && (geoResolutionChanged || dataChanged || colorByChanged)) {
+    if (mapIsDrawn && (geoResolutionChanged || dataChanged || colorByChanged || transmissionLinesToggleChanged)) {
       this.state.d3DOMNode.selectAll("*").remove();
       this.setState({
         d3elems: null,
@@ -394,7 +397,8 @@ class Map extends React.Component {
         nextProps.dateMaxNumeric,
         nextProps.pieChart,
         nextProps.geoResolution,
-        nextProps.dispatch
+        nextProps.dispatch,
+        nextProps.showTransmissionLines
       );
       this.setState({
         d3elems,

src/components/map/mapHelpers.js

@@ -137,7 +137,8 @@ export const drawDemesAndTransmissions = (
   numDateMax,
   pieChart, /* bool */
   geoResolution,
-  dispatch
+  dispatch,
+  showTransmissionLines
 ) => {
 
   // add transmission lines
@@ -164,7 +165,7 @@ export const drawDemesAndTransmissions = (
     .attr("stroke-opacity", 0.6)
     .attr("stroke-linecap", "round")
     .attr("stroke", (d) => { return d.color; })
-    .attr("stroke-width", 1);
+    .attr("stroke-width", showTransmissionLines ? 1 : 0);
 
   const visibleTips = nodes[0].tipCount;
   const demeMultiplier =

src/reducers/controls.js

@@ -81,7 +81,8 @@ export const getDefaultControlsState = () => {
     sidebarOpen: initialSidebarState.sidebarOpen,
     treeLegendOpen: undefined,
     mapLegendOpen: undefined,
-    showOnlyPanels: false
+    showOnlyPanels: false,
+    showTransmissionLines: true
   };
 };
 
@@ -246,6 +247,8 @@ const Controls = (state = getDefaultControlsState(), action) => {
         state.coloringsPresentOnTree.add(colorBy);
       }
       return Object.assign({}, state, {coloringsPresentOnTree: state.coloringsPresentOnTree});
+    case types.TOGGLE_TRANSMISSION_LINES:
+      return Object.assign({}, state, {showTransmissionLines: action.data});
     default:
       return state;
   }