Truncate legend name to 18 characters. Use hover to display full lege…

…nd name.
nextstrain · Mar 4, 2020 · 07d94a4 · 07d94a4
1 parent 33da070
commit 07d94a4
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 2 deletions.
diff --git a/src/components/tree/legend/item.js b/src/components/tree/legend/item.js
@@ -7,6 +7,7 @@ const LegendItem = ({
   transform,
   legendRectSize,
   legendSpacing,
+  legendMaxLength,
   rectStroke,
   rectFill,
   label,
@@ -33,7 +34,8 @@ const LegendItem = ({
       y={legendRectSize - legendSpacing}
       style={{fontSize: 12, fill: darkGrey, fontFamily: dataFont}}
     >
-      {label}
+      <title>{label}</title>
+      {label.substring(0, legendMaxLength)}
     </text>
   </g>
 );

diff --git a/src/components/tree/legend/legend.js b/src/components/tree/legend/legend.js
@@ -3,7 +3,7 @@ import { connect } from "react-redux";
 import { rgb } from "d3-color";
 import LegendItem from "./item";
 import { headerFont, darkGrey } from "../../../globalStyles";
-import { legendRectSize, legendSpacing, fastTransitionDuration, months } from "../../../util/globals";
+import { legendRectSize, legendSpacing, legendMaxLength, fastTransitionDuration, months } from "../../../util/globals";
 import { numericToCalendar } from "../../../util/dateHelpers";
 import { isColorByGenotype, decodeColorByGenotype } from "../../../util/getGenotype";
 
@@ -167,6 +167,7 @@ class Legend extends React.Component {
             dispatch={this.props.dispatch}
             legendRectSize={legendRectSize}
             legendSpacing={legendSpacing}
+            legendMaxLength={legendMaxLength}
             rectFill={rgb(this.props.colorScale.scale(d)).brighter([0.35]).toString()}
             rectStroke={rgb(this.props.colorScale.scale(d)).toString()}
             transform={this.getTransformationForLegendItem(i)}

diff --git a/src/util/globals.js b/src/util/globals.js
@@ -49,6 +49,7 @@ export const rbsColorDomain = genericDomain;
 export const dateColorDomain = genericDomain;
 export const legendRectSize = 15;
 export const legendSpacing = 4;
+export const legendMaxLength = 18;
 export const nonTipNodeRadius = 0;
 export const tipRadius = 4;
 export const tipRadiusOnLegendMatch = 7;