Firefox did not react well to the viewbox changing. When I completely...

Firefox did not react well to the viewbox changing. When I completely recreated the legend svg the issue described in WDFN-172 went away in Firefox.

assets/src/scripts/components/hydrograph/index.js

@@ -164,11 +164,10 @@ const plotSvgDefs = function(elem) {
 const timeSeriesLegend = function(elem) {
     elem.append('div')
         .classed('hydrograph-container', true)
-        .append('svg')
-            .call(link(drawSimpleLegend, createStructuredSelector({
-                legendMarkerRows: legendMarkerRowsSelector,
-                layout: layoutSelector
-            })));
+        .call(link(drawSimpleLegend, createStructuredSelector({
+            legendMarkerRows: legendMarkerRowsSelector,
+            layout: layoutSelector
+        })));
 };
 
 

assets/src/scripts/components/hydrograph/legend.js

@@ -71,8 +71,8 @@ const createLegendMarkers = function(displayItems) {
  * @param {Object} legendMarkerRows - Array of rows. Each row should be an array of legend markers.
  * @param {Object} layout - width and height of svg.
  */
-function drawSimpleLegend(svg, {legendMarkerRows, layout}) {
-    svg.selectAll('.legend').remove();
+function drawSimpleLegend(div, {legendMarkerRows, layout}) {
+    div.selectAll('.legend-svg').remove();
 
     if (!legendMarkerRows || !layout) {
         return;
@@ -83,6 +83,8 @@ function drawSimpleLegend(svg, {legendMarkerRows, layout}) {
     const verticalRowOffset = 18;
     const markerTextXOffset = 10;
 
+    let svg = div.append('svg')
+        .attr('class', 'legend-svg')
     let legend = svg
         .append('g')
             .attr('class', 'legend')