Issue 818: Add legend to map view

src/components/main/index.js

@@ -77,6 +77,14 @@ class Main extends React.Component {
   toggleSidebar() {
     this.props.dispatch({type: TOGGLE_SIDEBAR, value: !this.props.sidebarOpen});
   }
+
+  shouldShowMapLegend() {
+    const showingTree = this.props.panelsToDisplay.includes("tree");
+    const inGrid = this.props.panelLayout !== "grid";
+
+    return !showingTree || inGrid;
+  }
+
   render() {
     if (this.state.showSpinner) {
       return (<Spinner/>);
@@ -133,7 +141,7 @@ class Main extends React.Component {
           }
           {this.props.displayNarrative || this.props.showOnlyPanels ? null : <Info width={calcUsableWidth(availableWidth, 1)} />}
           {this.props.panelsToDisplay.includes("tree") ? <Tree width={big.width} height={big.height} /> : null}
-          {this.props.panelsToDisplay.includes("map") ? <Map width={big.width} height={big.height} justGotNewDatasetRenderNewMap={false} /> : null}
+          {this.props.panelsToDisplay.includes("map") ? <Map width={big.width} height={big.height} justGotNewDatasetRenderNewMap={false} legend={this.shouldShowMapLegend()} /> : null}
           {this.props.panelsToDisplay.includes("entropy") ?
             (<Suspense fallback={null}>
               <Entropy width={chart.width} height={chart.height} />

src/components/map/map.js

@@ -20,6 +20,8 @@ import { MAP_ANIMATION_PLAY_PAUSE_BUTTON } from "../../actions/types";
 // import { incommingMapPNG } from "../download/helperFunctions";
 import { timerStart, timerEnd } from "../../util/perf";
 import { tabSingle, darkGrey, lightGrey, goColor, pauseColor } from "../../globalStyles";
+import ErrorBoundary from "../../util/errorBoundry";
+import Legend from "../tree/legend/legend";
 
 /* global L */
 // L is global in scope and placed by leaflet()
@@ -640,6 +642,9 @@ class Map extends React.Component {
     // clear layers - store all markers in map state https://github.com/Leaflet/Leaflet/issues/3238#issuecomment-77061011
     return (
       <Card center title={transmissionsExist ? "Transmissions" : "Geography"}>
+        {this.props.legend && <ErrorBoundary>
+          <Legend right width={this.props.width} for="map" />
+        </ErrorBoundary>}
         {this.maybeCreateMapDiv()}
         {this.props.narrativeMode ? null : (
           <button

src/components/tree/legend/legend.js

@@ -8,13 +8,20 @@ import { numericToCalendar } from "../../../util/dateHelpers";
 import { isColorByGenotype, decodeColorByGenotype } from "../../../util/getGenotype";
 import { TOGGLE_LEGEND } from "../../../actions/types";
 
+const svg = {
+  position: "absolute",
+  top: 26,
+  borderRadius: 4,
+  zIndex: 1000,
+  userSelect: "none"
+};
 
-@connect((state) => {
+@connect((state, props) => {
   return {
     colorBy: state.controls.colorBy,
     colorings: state.metadata.colorings,
     colorScale: state.controls.colorScale,
-    legendOpen: state.controls.legendOpen
+    legendOpen: props.for === "tree" ? state.controls.treeLegendOpen : state.controls.mapLegendOpen
   };
 })
 class Legend extends React.Component {
@@ -69,11 +76,16 @@ class Legend extends React.Component {
     return this.props.colorings[this.props.colorBy] === undefined ?
       "" : this.props.colorings[this.props.colorBy].title;
   }
+
   getTitleWidth() {
+    // This is a hack because we can't use getBBox in React.
+    // Lots of work to get measured width of DOM element.
+    // Works fine, but will need adjusting if title font is changed.
     return 15 + 5.3 * this.getTitleString().length;
   }
+
   toggleLegend() {
-    this.props.dispatch({type: TOGGLE_LEGEND, value: !this.props.legendOpen})
+    this.props.dispatch({type: TOGGLE_LEGEND, value: !this.props.legendOpen, for: this.props.for || "tree"});
   }
 
   /*
@@ -85,7 +97,7 @@ class Legend extends React.Component {
       <g id="Title">
         <rect width={this.getTitleWidth()} height="12" fill="rgba(255,255,255,.85)"/>
         <text
-          x={5}
+          x={this.getTitleOffset()}
           y={10}
           style={{
             fontSize: 12,
@@ -106,10 +118,8 @@ class Legend extends React.Component {
    */
   legendChevron() {
     const degrees = this.showLegend() ? -180 : 0;
-    // This is a hack because we can't use getBBox in React.
-    // Lots of work to get measured width of DOM element.
-    // Works fine, but will need adjusting if title font is changed.
-    const offset = this.getTitleWidth();
+
+    const offset = this.getArrowOffset();
     return (
       <g id="Chevron" transform={`translate(${offset},0)`}>
         <svg width="12" height="12" viewBox="0 0 1792 1792">
@@ -187,32 +197,53 @@ class Legend extends React.Component {
 
   getStyles() {
     return {
-      svg: {
-        position: "absolute",
-        left: 5,
-        top: 26,
-        borderRadius: 4,
-        zIndex: 1000,
-        userSelect: "none"
+      svgLeft: {
+        ...svg,
+        left: 5
+      },
+      svgRight: {
+        ...svg,
+        right: 5
       }
     };
   }
+
+  getSVGStyle() {
+    const styles = this.getStyles();
+
+    if (this.props.right) { return styles.svgRight; }
+    return styles.svgLeft;
+  }
+
+  getArrowOffset() {
+    if (this.props.right) {
+      return this.getSVGWidth() - 20;
+    }
+    return this.getTitleWidth();
+  }
+
+  getTitleOffset() {
+    if (this.props.right) {
+      return this.getSVGWidth() - this.getTitleWidth() - 15;
+    }
+    return 5;
+  }
+
   render() {
     // catch the case where we try to render before anythings ready
     if (!this.props.colorScale) return null;
-    const styles = this.getStyles();
     return (
       <svg
         id="TreeLegendContainer"
         width={this.getSVGWidth()}
         height={this.getSVGHeight()}
-        style={styles.svg}
+        style={this.getSVGStyle()}
       >
         {this.legendItems()}
         <g
           id="TitleAndChevron"
           onClick={() => this.toggleLegend()}
-          style={{cursor: "pointer"}}
+          style={{cursor: "pointer", textAlign: "right" }}
         >
           {this.legendTitle()}
           {this.legendChevron()}

src/components/tree/tree.js

@@ -94,8 +94,8 @@ class Tree extends React.Component {
   }
 
   getStyles = () => {
-    const activeResetTreeButton = this.props.tree.idxOfInViewRootNode !== 0
-      || this.props.treeToo.idxOfInViewRootNode !== 0;
+    const activeResetTreeButton = this.props.tree.idxOfInViewRootNode !== 0 ||
+      this.props.treeToo.idxOfInViewRootNode !== 0;
     return {
       resetTreeButton: {
         zIndex: 100,
@@ -126,7 +126,7 @@ class Tree extends React.Component {
     return (
       <Card center title={"Phylogeny"}>
         <ErrorBoundary>
-          <Legend width={this.props.width}/>
+          <Legend width={this.props.width} for="tree"/>
         </ErrorBoundary>
         <HoverInfoPanel
           hovered={this.state.hovered}

src/reducers/controls.js

@@ -79,7 +79,8 @@ export const getDefaultControlsState = () => {
     zoomMax: undefined,
     branchLengthsToDisplay: "divAndDate",
     sidebarOpen: initialSidebarState.sidebarOpen,
-    legendOpen: undefined,
+    treeLegendOpen: undefined,
+    mapLegendOpen: undefined,
     showOnlyPanels: false
   };
 };
@@ -252,7 +253,10 @@ const Controls = (state = getDefaultControlsState(), action) => {
     case types.TOGGLE_SIDEBAR:
       return Object.assign({}, state, {sidebarOpen: action.value});
     case types.TOGGLE_LEGEND:
-      return Object.assign({}, state, {legendOpen: action.value});
+      if (action.for === 'tree') {
+        return Object.assign({}, state, {treeLegendOpen: action.value});
+      }
+      return Object.assign({}, state, {mapLegendOpen: action.value});
     case types.ADD_COLOR_BYS:
       for (const colorBy of Object.keys(action.newColorings)) {
         state.coloringsPresentOnTree.add(colorBy);