Feature/add coloring algorithm (#169)

* Fixed bug: when all child filters unselected, turn off parent as well

* Refactored placement of onSelectFilter to be in Layout; working logic for updating coloring sets

* Linting fixes and removal of console logs

* Added separate component for colored markers which clusters and events will use; working calculation of color percentages based off of coloringset

* Working colors for clusters; need to implement for individual points as well

* Adding two new features to select whether to color by association or by category (can't do both)

* Working colors for filter list panel; text and checkbox change according to colorset groupings

* Working timeline events with coloring algorithm

* Handle select acts different on map when we don't render all points and only filter through clusters; can fix this by not filtering before passing in locations to events in map

* Removed extraneous prop

* Working point count on hover again; numbers were showing up below the colored markers

* Linting fixes and minor refactor of calculateColorPercentage for linting to ass

* Comments and more linting fixes

* add dev command for windows subsystem for linux

* return default styles for category toggles

* dynamically filter out timelines

* calibrate styling

* further calibrations

* correct contrast

* lint

Co-authored-by: efarooqui <efarooqui@pandora.com>
Co-authored-by: Lachlan Kermode <lachiekermode@gmail.com>

src/store/initial.js

@@ -1,5 +1,5 @@
 import { mergeDeepLeft } from 'ramda'
-import global from '../common/global'
+import global, { colors } from '../common/global'
 
 const initial = {
   /*
@@ -35,6 +35,7 @@ const initial = {
     selected: [],
     source: null,
     associations: {
+      coloringSet: [],
       filters: [],
       narrative: null,
       categories: [],
@@ -63,8 +64,8 @@ const initial = {
       dimensions: {
         height: 250,
         width: 0,
-        marginLeft: 100,
-        marginTop: 15,
+        marginLeft: 70,
+        marginTop: 10, // the padding used for the day/month labels inside the timeline
         marginBottom: 60,
         contentHeight: 200,
         width_controls: 100
@@ -131,6 +132,10 @@ const initial = {
         radial: false
       }
     },
+    coloring: {
+      maxNumOfColors: 4,
+      colors: Object.values(colors)
+    },
     dom: {
       timeline: 'timeline',
       timeslider: 'timeslider',