Merge remote-tracking branch 'ntaft/toggle-show-all-tips'

Manually merged ntaft's work into the most recent auspice master branch.

src/actions/types.js

@@ -52,3 +52,5 @@ export const TOGGLE_TRANSMISSION_LINES = "TOGGLE_TRANSMISSION_LINES";
 export const CACHE_JSONS = "CACHE_JSONS";
 export const SET_ROOT_SEQUENCE = "SET_ROOT_SEQUENCE";
 export const CHANGE_TIP_LABEL_KEY = "CHANGE_TIP_LABEL_KEY";
+export const ALWAYS_DISPLAY_TIP_LABELS = "ALWAYS_DISPLAY_TIP_LABELS";
+

src/components/controls/choose-branch-labelling.js

@@ -3,20 +3,27 @@ import { connect } from "react-redux";
 import Select from "react-select/lib/Select";
 import { withTranslation } from 'react-i18next';
 
-import { CHANGE_BRANCH_LABEL } from "../../actions/types";
+import { CHANGE_BRANCH_LABEL, ALWAYS_DISPLAY_TIP_LABELS } from "../../actions/types";
 import { SidebarSubtitle } from "./styles";
 import { controlsWidth } from "../../util/globals";
+import Toggle from "./toggle";
 
 @connect((state) => ({
   selected: state.controls.selectedBranchLabel,
   available: state.tree.availableBranchLabels,
-  canRenderBranchLabels: state.controls.canRenderBranchLabels
+  canRenderBranchLabels: state.controls.canRenderBranchLabels,
+  alwaysDisplayTipLabels: state.controls.alwaysDisplayTipLabels,
 }))
 class ChooseBranchLabelling extends React.Component {
   constructor(props) {
     super(props);
     this.change = (value) => {this.props.dispatch({type: CHANGE_BRANCH_LABEL, value: value.value});};
   }
+
+  togglealwaysDisplayTipLabels = () => (
+    this.props.dispatch({type: ALWAYS_DISPLAY_TIP_LABELS, value: !this.props.alwaysDisplayTipLabels})
+  )
+
   render() {
     if (!this.props.canRenderBranchLabels) return null;
     const { t } = this.props;
@@ -35,6 +42,13 @@ class ChooseBranchLabelling extends React.Component {
             onChange={this.change}
           />
         </div>
+        <Toggle
+          style={{margin: 5}}
+          display={this.props.available.length > 1}
+          on={this.props.alwaysDisplayTipLabels}
+          callback={this.togglealwaysDisplayTipLabels}
+          label="Always display tip labels"
+        />
       </div>
     );
   }

src/components/tree/index.js

@@ -23,7 +23,8 @@ const Tree = connect((state) => ({
   canRenderBranchLabels: state.controls.canRenderBranchLabels,
   tipLabelKey: state.controls.tipLabelKey,
   narrativeMode: state.narrative.display,
-  animationPlayPauseButton: state.controls.animationPlayPauseButton
+  animationPlayPauseButton: state.controls.animationPlayPauseButton,
+  alwaysDisplayTipLabels: state.controls.alwaysDisplayTipLabels
 }))(UnconnectedTree);
 
 export default Tree;

src/components/tree/phyloTree/labels.js

@@ -3,7 +3,7 @@ import { NODE_VISIBLE } from "../../../util/globals";
 import { numericToDateObject, prettifyDate } from "../../../util/dateHelpers";
 import { getTraitFromNode } from "../../../util/treeMiscHelpers";
 
-export const updateTipLabels = function updateTipLabels(dt) {
+export const updateTipLabels = function updateTipLabels(alwaysDisplayTipLabels, dt) {
   if ("tipLabels" in this.groups) {
     this.groups.tipLabels.selectAll("*").remove();
   } else {
@@ -19,7 +19,7 @@ export const updateTipLabels = function updateTipLabels(dt) {
   const inViewVisibleTips = inViewTips.filter((d) => d.visibility === NODE_VISIBLE);
 
   /* We show tip labels by checking the number of "inView & visible" tips */
-  if (inViewVisibleTips.length < this.params.tipLabelBreakL1) {
+  if (inViewVisibleTips.length < this.params.tipLabelBreakL1 || alwaysDisplayTipLabels) {
     /* We calculate font size based on the total number of in view tips (both visible & non-visible) */
     let fontSize = this.params.tipLabelFontSizeL1;
     if (inViewTips.length < this.params.tipLabelBreakL3) {

src/components/tree/reactD3Interface/change.js

@@ -82,6 +82,10 @@ export const changePhyloTreeViaPropsComparison = (mainTree, phylotree, oldProps,
     args.newLayout = newProps.layout;
   }
 
+  /* if force-display tip label control is toggled, re-render tree labels */
+  if (oldProps.alwaysDisplayTipLabels !== newProps.alwaysDisplayTipLabels) {
+    phylotree.updateTipLabels(newProps.alwaysDisplayTipLabels);
+  }
 
   /* zoom to a clade / reset zoom to entire tree */
   if (oldTreeRedux.idxOfInViewRootNode !== newTreeRedux.idxOfInViewRootNode) {

src/reducers/controls.js

@@ -87,7 +87,8 @@ export const getDefaultControlsState = () => {
     mapLegendOpen: undefined,
     showOnlyPanels: false,
     showTransmissionLines: true,
-    normalizeFrequencies: true
+    normalizeFrequencies: true,
+    alwaysDisplayTipLabels: false
   };
 };
 
@@ -291,6 +292,10 @@ const Controls = (state = getDefaultControlsState(), action) => {
       }
       return state;
     }
+    case types.ALWAYS_DISPLAY_TIP_LABELS:
+      return Object.assign({}, state, {
+        alwaysDisplayTipLabels: action.value
+      });
     default:
       return state;
   }