From c8c9962b89c27bdde76db55949b3ed6d95327c50 Mon Sep 17 00:00:00 2001 From: Marc Aaron Date: Sat, 2 May 2020 10:40:46 -0700 Subject: [PATCH 1/7] toggle transmission lines --- src/actions/types.js | 1 + src/components/controls/controls.js | 2 ++ src/components/map/map.js | 12 ++++--- src/components/map/mapHelpers.js | 56 +++++++++++++++-------------- src/reducers/controls.js | 5 ++- 5 files changed, 45 insertions(+), 31 deletions(-) diff --git a/src/actions/types.js b/src/actions/types.js index b81170f33..f33109774 100644 --- a/src/actions/types.js +++ b/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"; diff --git a/src/components/controls/controls.js b/src/components/controls/controls.js index 995fd9472..01af38816 100644 --- a/src/components/controls/controls.js +++ b/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}) { {t("sidebar:Map Options")} + ) : null} diff --git a/src/components/map/map.js b/src/components/map/map.js index 51d36841d..029f4f334 100644 --- a/src/components/map/map.js +++ b/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, diff --git a/src/components/map/mapHelpers.js b/src/components/map/mapHelpers.js index 15a46f2ea..dfa20b819 100644 --- a/src/components/map/mapHelpers.js +++ b/src/components/map/mapHelpers.js @@ -137,34 +137,38 @@ export const drawDemesAndTransmissions = ( numDateMax, pieChart, /* bool */ geoResolution, - dispatch + dispatch, + showTransmissionLines ) => { - // add transmission lines - const transmissions = g.selectAll("transmissions") - .data(transmissionData) - .enter() - .append("path") /* instead of appending a geodesic path from the leaflet plugin data, we now draw a line directly between two points */ - .attr("d", (d) => { - return pathStringGenerator( - extractLineSegmentForAnimationEffect( - numDateMin, - numDateMax, - d.originCoords, - d.destinationCoords, - d.originNumDate, - d.destinationNumDate, - d.visible, - d.bezierCurve, - d.bezierDates - ) - ); - }) - .attr("fill", "none") - .attr("stroke-opacity", 0.6) - .attr("stroke-linecap", "round") - .attr("stroke", (d) => { return d.color; }) - .attr("stroke-width", 1); + const transmissions = g.selectAll("transmissions"); + + if (showTransmissionLines) { + transmissions + .data(transmissionData) + .enter() + .append("path") /* instead of appending a geodesic path from the leaflet plugin data, we now draw a line directly between two points */ + .attr("d", (d) => { + return pathStringGenerator( + extractLineSegmentForAnimationEffect( + numDateMin, + numDateMax, + d.originCoords, + d.destinationCoords, + d.originNumDate, + d.destinationNumDate, + d.visible, + d.bezierCurve, + d.bezierDates + ) + ); + }) + .attr("fill", "none") + .attr("stroke-opacity", 0.6) + .attr("stroke-linecap", "round") + .attr("stroke", (d) => { return d.color; }) + .attr("stroke-width", 1); + } const visibleTips = nodes[0].tipCount; const demeMultiplier = diff --git a/src/reducers/controls.js b/src/reducers/controls.js index 6a6a6bbdf..f80da20fa 100644 --- a/src/reducers/controls.js +++ b/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; } From 4635a8f9063e7ddbbfd89ec82bbc7b04dda292d9 Mon Sep 17 00:00:00 2001 From: Marc Aaron Date: Sat, 2 May 2020 10:41:02 -0700 Subject: [PATCH 2/7] add missing control component --- src/components/controls/transmission-lines.js | 38 +++++++++++++++++++ 1 file changed, 38 insertions(+) create mode 100644 src/components/controls/transmission-lines.js diff --git a/src/components/controls/transmission-lines.js b/src/components/controls/transmission-lines.js new file mode 100644 index 000000000..8ac906fe1 --- /dev/null +++ b/src/components/controls/transmission-lines.js @@ -0,0 +1,38 @@ +import React from "react"; +import Toggle from "./toggle"; +import { connect } from "react-redux"; +import { withTranslation } from "react-i18next"; + +import { controlsWidth } from "../../util/globals"; +import { TOGGLE_TRANSMISSION_LINES } from "../../actions/types"; +import { SidebarSubtitle } from "./styles"; + +@connect((state) => { + return { + showTransmissionLines: state.controls.showTransmissionLines, + }; +}) +class TransmissionLines extends React.Component { + render() { + const { t } = this.props; + return ( + <> + + {t("sidebar:Transmission lines")} + +
+ { + this.props.dispatch({ type: TOGGLE_TRANSMISSION_LINES, data: !this.props.showTransmissionLines }); + }} + label={t("sidebar:Transmission lines")} + /> +
+ + ); + } +} + +export default withTranslation()(TransmissionLines); \ No newline at end of file From 5ffc2b4507c7536093b2c6ba4d57d58fba559d51 Mon Sep 17 00:00:00 2001 From: Marc Aaron Date: Sat, 2 May 2020 10:53:07 -0700 Subject: [PATCH 3/7] Toggle stroke --- src/components/controls/transmission-lines.js | 2 +- src/components/map/map.js | 2 +- src/components/map/mapHelpers.js | 52 +++++++++---------- 3 files changed, 26 insertions(+), 30 deletions(-) diff --git a/src/components/controls/transmission-lines.js b/src/components/controls/transmission-lines.js index 8ac906fe1..f16cc1811 100644 --- a/src/components/controls/transmission-lines.js +++ b/src/components/controls/transmission-lines.js @@ -27,7 +27,7 @@ class TransmissionLines extends React.Component { callback={() => { this.props.dispatch({ type: TOGGLE_TRANSMISSION_LINES, data: !this.props.showTransmissionLines }); }} - label={t("sidebar:Transmission lines")} + label={t("sidebar:Show transmission lines")} /> diff --git a/src/components/map/map.js b/src/components/map/map.js index 029f4f334..e5743442d 100644 --- a/src/components/map/map.js +++ b/src/components/map/map.js @@ -398,7 +398,7 @@ class Map extends React.Component { nextProps.pieChart, nextProps.geoResolution, nextProps.dispatch, - nextProps.showTransmissionLines, + nextProps.showTransmissionLines ); this.setState({ d3elems, diff --git a/src/components/map/mapHelpers.js b/src/components/map/mapHelpers.js index dfa20b819..4630b9e51 100644 --- a/src/components/map/mapHelpers.js +++ b/src/components/map/mapHelpers.js @@ -141,34 +141,30 @@ export const drawDemesAndTransmissions = ( showTransmissionLines ) => { // add transmission lines - const transmissions = g.selectAll("transmissions"); - - if (showTransmissionLines) { - transmissions - .data(transmissionData) - .enter() - .append("path") /* instead of appending a geodesic path from the leaflet plugin data, we now draw a line directly between two points */ - .attr("d", (d) => { - return pathStringGenerator( - extractLineSegmentForAnimationEffect( - numDateMin, - numDateMax, - d.originCoords, - d.destinationCoords, - d.originNumDate, - d.destinationNumDate, - d.visible, - d.bezierCurve, - d.bezierDates - ) - ); - }) - .attr("fill", "none") - .attr("stroke-opacity", 0.6) - .attr("stroke-linecap", "round") - .attr("stroke", (d) => { return d.color; }) - .attr("stroke-width", 1); - } + const transmissions = g.selectAll("transmissions") + .data(transmissionData) + .enter() + .append("path") /* instead of appending a geodesic path from the leaflet plugin data, we now draw a line directly between two points */ + .attr("d", (d) => { + return pathStringGenerator( + extractLineSegmentForAnimationEffect( + numDateMin, + numDateMax, + d.originCoords, + d.destinationCoords, + d.originNumDate, + d.destinationNumDate, + d.visible, + d.bezierCurve, + d.bezierDates + ) + ); + }) + .attr("fill", "none") + .attr("stroke-opacity", 0.6) + .attr("stroke-linecap", "round") + .attr("stroke", (d) => { return d.color; }) + .attr("stroke-width", showTransmissionLines ? 1 : 0); const visibleTips = nodes[0].tipCount; const demeMultiplier = From fa028ef133f7e51f197b8040896a35544ae3edea Mon Sep 17 00:00:00 2001 From: Marc Aaron Date: Sat, 2 May 2020 10:55:32 -0700 Subject: [PATCH 4/7] dont modify spacing --- src/components/map/mapHelpers.js | 27 ++++++++++++++------------- 1 file changed, 14 insertions(+), 13 deletions(-) diff --git a/src/components/map/mapHelpers.js b/src/components/map/mapHelpers.js index 4630b9e51..70162b4fc 100644 --- a/src/components/map/mapHelpers.js +++ b/src/components/map/mapHelpers.js @@ -140,25 +140,26 @@ export const drawDemesAndTransmissions = ( dispatch, showTransmissionLines ) => { + // add transmission lines const transmissions = g.selectAll("transmissions") .data(transmissionData) .enter() .append("path") /* instead of appending a geodesic path from the leaflet plugin data, we now draw a line directly between two points */ .attr("d", (d) => { - return pathStringGenerator( - extractLineSegmentForAnimationEffect( - numDateMin, - numDateMax, - d.originCoords, - d.destinationCoords, - d.originNumDate, - d.destinationNumDate, - d.visible, - d.bezierCurve, - d.bezierDates - ) - ); + return pathStringGenerator( + extractLineSegmentForAnimationEffect( + numDateMin, + numDateMax, + d.originCoords, + d.destinationCoords, + d.originNumDate, + d.destinationNumDate, + d.visible, + d.bezierCurve, + d.bezierDates + ) + ); }) .attr("fill", "none") .attr("stroke-opacity", 0.6) From 192bcd38d937f9a1d873606707ca218ee56c944a Mon Sep 17 00:00:00 2001 From: Marc Aaron Date: Sat, 2 May 2020 10:56:13 -0700 Subject: [PATCH 5/7] use spaces --- src/components/map/mapHelpers.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/map/mapHelpers.js b/src/components/map/mapHelpers.js index 70162b4fc..23add1ee7 100644 --- a/src/components/map/mapHelpers.js +++ b/src/components/map/mapHelpers.js @@ -148,7 +148,7 @@ export const drawDemesAndTransmissions = ( .append("path") /* instead of appending a geodesic path from the leaflet plugin data, we now draw a line directly between two points */ .attr("d", (d) => { return pathStringGenerator( - extractLineSegmentForAnimationEffect( + extractLineSegmentForAnimationEffect( numDateMin, numDateMax, d.originCoords, @@ -158,7 +158,7 @@ export const drawDemesAndTransmissions = ( d.visible, d.bezierCurve, d.bezierDates - ) + ) ); }) .attr("fill", "none") From ea47ae4f8e1506e3a616a73155d91e59cc7cf328 Mon Sep 17 00:00:00 2001 From: Marc Aaron Date: Sat, 2 May 2020 11:12:24 -0700 Subject: [PATCH 6/7] Fix style --- src/components/controls/transmission-lines.js | 8 ++++---- src/components/map/map.js | 2 +- src/reducers/controls.js | 4 ++-- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/controls/transmission-lines.js b/src/components/controls/transmission-lines.js index f16cc1811..c78df40c7 100644 --- a/src/components/controls/transmission-lines.js +++ b/src/components/controls/transmission-lines.js @@ -1,15 +1,15 @@ import React from "react"; -import Toggle from "./toggle"; 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"; import { SidebarSubtitle } from "./styles"; @connect((state) => { return { - showTransmissionLines: state.controls.showTransmissionLines, + showTransmissionLines: state.controls.showTransmissionLines }; }) class TransmissionLines extends React.Component { @@ -18,7 +18,7 @@ class TransmissionLines extends React.Component { return ( <> - {t("sidebar:Transmission lines")} + {t("sidebar:Transmission lines")}
{ treeLegendOpen: undefined, mapLegendOpen: undefined, showOnlyPanels: false, - showTransmissionLines: true, + showTransmissionLines: true }; }; @@ -248,7 +248,7 @@ const Controls = (state = getDefaultControlsState(), action) => { } return Object.assign({}, state, {coloringsPresentOnTree: state.coloringsPresentOnTree}); case types.TOGGLE_TRANSMISSION_LINES: - return Object.assign({}, state, {showTransmissionLines: action.data}); + return Object.assign({}, state, {showTransmissionLines: action.data}); default: return state; } From c238807ccfe423e7e47831ef5d6fa598b245266f Mon Sep 17 00:00:00 2001 From: james hadfield Date: Fri, 29 May 2020 15:57:54 +1200 Subject: [PATCH 7/7] Remove unnecessary byline in sidebar --- src/components/controls/transmission-lines.js | 26 +++++++------------ 1 file changed, 10 insertions(+), 16 deletions(-) diff --git a/src/components/controls/transmission-lines.js b/src/components/controls/transmission-lines.js index c78df40c7..b1822ea34 100644 --- a/src/components/controls/transmission-lines.js +++ b/src/components/controls/transmission-lines.js @@ -5,7 +5,6 @@ import { withTranslation } from "react-i18next"; import Toggle from "./toggle"; import { controlsWidth } from "../../util/globals"; import { TOGGLE_TRANSMISSION_LINES } from "../../actions/types"; -import { SidebarSubtitle } from "./styles"; @connect((state) => { return { @@ -16,21 +15,16 @@ class TransmissionLines extends React.Component { render() { const { t } = this.props; return ( - <> - - {t("sidebar:Transmission lines")} - -
- { - this.props.dispatch({ type: TOGGLE_TRANSMISSION_LINES, data: !this.props.showTransmissionLines }); - }} - label={t("sidebar:Show transmission lines")} - /> -
- +
+ { + this.props.dispatch({ type: TOGGLE_TRANSMISSION_LINES, data: !this.props.showTransmissionLines }); + }} + label={t("sidebar:Show transmission lines")} + /> +
); } }