feat(visualization) Visualization layout improvments

This commit

 - Adds start and end date text labels showing visible extent of the detail view
 - Adds an extent indicator to the detail view that shows the extent represented in the visualization view
 - Adds a visible indicator for which site is selected (on top of the visualization extent indicator)
 - Allows for site selection with a click/touch (as well as the pan/zoom actions that are set now)
 - Has converted the visualisation to SVG (from HTML and addded a crop)
 - Scales were added to the visualisation
 - Set the default scale of the distribution detail to render fully zoomed out
 - The distribution overview is disable-able. It is turned off my defaults. It being enabled or not is persitsed in the user's preferences
 - Various `console.debug` lines were disabled to improve peformance
 - Various cases of `that` being retermed `self`
 - cursor: pointer added to distribution detail
 - changed default values for min and max in tryUpdateDataVariables so Infinity will never be returned
 - added option in d3 vendor extensions to take the position argument in translate as a function

src/app/d3Bindings/eventDistribution/_eventDistribution.scss

@@ -1,27 +1,37 @@
-//http://paletton.com/#uid=72S0B0kmqrpsOf3p4mljsvMfRHr
-$color-primary-0: #32A746;	/* Main Primary color */
-$color-primary-1: #095C18;
-$color-primary-2: #1D8830;
-$color-primary-3: #4CC261;
-$color-primary-4: #6EDA81;
-
-$color-secondary-1-0: #2F6A8B;	/* Main Secondary color (1) */
-$color-secondary-1-1: #0B354C;
-$color-secondary-1-2: #1D5471;
-$color-secondary-1-3: #4480A1;
-$color-secondary-1-4: #69A6C6;
-
-$color-secondary-2-0: #DA9541;	/* Main Secondary color (2) */
-$color-secondary-2-1: #78470C;
-$color-secondary-2-2: #B27227;
-$color-secondary-2-3: #FDB763;
-$color-secondary-2-4: #FFC581;
-
-$color-complement-0: #DA4D41;	/* Main Complement color */
-$color-complement-1: #78140C;
-$color-complement-2: #B23127;
-$color-complement-3: #FD6F63;
-$color-complement-4: #FF8A81;
+/* Palette URL:  http://paletton.com/#uid=72S0B0kmpy3ralWpLt3iZHreGQA
+#####  Palette URL: http://paletton.com/#uid=72S0B0kaVz84jP27qHbeJtFiHpX
+*/
+/* Feel free to copy&paste color codes to your application */
+
+/* As hex codes */
+
+$color-primary-0: #3CC754;
+/* Main Primary color */
+$color-primary-1: #148628;
+$color-primary-2: #23B13B;
+$color-primary-3: #59DA6F;
+$color-primary-4: #7FEC92;
+
+$color-secondary-1-0: #3981A8;
+/* Main Secondary color (1) */
+$color-secondary-1-1: #16506F;
+$color-secondary-1-2: #236C93;
+$color-secondary-1-3: #579FC6;
+$color-secondary-1-4: #7FBFE1;
+
+$color-secondary-2-0: #FFAD4D;
+/* Main Secondary color (2) */
+$color-secondary-2-1: #AF6B1A;
+$color-secondary-2-2: #E8922D;
+$color-secondary-2-3: #FFBA68;
+$color-secondary-2-4: #FFCA8A;
+
+$color-complement-0: #FF5A4D;
+/* Main Complement color */
+$color-complement-1: #AF251A;
+$color-complement-2: #E83B2D;
+$color-complement-3: #FF7368;
+$color-complement-4: #FF938A;
 
 $mini-backgrounds: (
     $color-primary-0 $color-secondary-1-0  $color-secondary-2-0 $color-complement-0
@@ -36,14 +46,15 @@ $mini-backgrounds: (
 $visualize-no-data-color: #DDD;
 $tile-border-color: #777;
 $tile-background-color: #e5ffd8;
-$generating-tile-color:  $text-color;
+$generating-tile-color: $text-color;
 $legend-size: 2em;
 
+$standard-brush-fill: rgba(30, 144, 255, 0.32);
+$visualization-brush-fill: rgba(mix($standard-brush-fill, white), 1.0);
+$visualization-brush-lane-overlay-fill: $standard-brush-fill;
 
 event-distribution-overview, event-distribution-detail {
 
-  // purple only for debugging
-  background-color: purple;
   width: 100%;
   display: flex;
 
@@ -80,7 +91,7 @@ event-distribution-overview, event-distribution-detail {
     & .miniItem#{$i - 1} {
       fill: $item;
       stroke-width: 6;
-      fill-opacity: 0.7;
+      fill-opacity: 1.0;
     }
   }
 
@@ -92,68 +103,70 @@ event-distribution-overview {
   }
 
   & text {
-    font: 12px sans-serif;
+    font: 10px sans-serif;
   }
 }
 
 event-distribution-detail {
   & .main {
-
+    cursor: pointer;
   }
 
   & text {
     font: 13px sans-serif;
   }
+
+  .visualizationBrushArea {
+    fill: $visualization-brush-fill;
+  }
+
+  .visualizationBrushLaneOverlay {
+    stroke: $tile-border-color;
+    fill: $visualization-brush-lane-overlay-fill;
+  }
 }
 
 event-distribution-visualisation {
-    text-align: center;
+  text-align: center;
+
+  .metaTrack {
+  }
+
+  & text {
+    font: 13px sans-serif;
+  }
 
-    .metaTrack {
+  .imageTrack {
+    svg {
+      width: 100%;
     }
 
-    .imageTrack {
-
-      .tiles {
-        background-color: $visualize-no-data-color;
-        position: relative;
-        height: 256px;
-
-        .tile {
-          width: 60px;
-          border: $tile-border-color solid 1px;
-          //border-left: deeppink solid 1px;
-          //border-right: blue solid 1px;
-          background-color: $tile-background-color;
-          height: 256px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-
-          position: absolute;
-          text-align: center;
-
-          cursor: pointer;
-
-          & div {
-            font-size: 8pt;
-            color: $generating-tile-color;
-            font-weight: bold;
-            padding: 0 1px;
-            width: 100%;
-            flex: none;
-          }
-        }
-      }
+    .tilesBackground {
+      fill: $visualize-no-data-color;
+    }
 
-      .dayImageContainer {
-        position: relative;
-        display: inline-block;
+    .tiles {
+      cursor: pointer;
 
-        margin: 1em 1em 2em 1em;
+      .tile rect {
+        stroke: $tile-border-color;
+        stroke-width: 1px;
 
+        //border-left: deeppink solid 1px;
+        //border-right: blue solid 1px;
+        fill: $tile-background-color;
       }
+
+      .tile text {
+        font-size: 8pt;
+        color: $generating-tile-color;
+        font-weight: bold;
+        padding: 0 1px;
+
+      }
+
     }
+  }
 
   dl {