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/components/presentational/Map/Events.jsx

@@ -1,7 +1,8 @@
 import React from 'react'
 import { Portal } from 'react-portal'
 import colors from '../../../common/global.js'
-import { calcOpacity } from '../../../common/utilities'
+import ColoredMarkers from './ColoredMarkers.jsx'
+import { calcOpacity, getCoordinatesForPercent, calculateColorPercentages, zipColorsToPercentages } from '../../../common/utilities'
 
 function MapEvents ({
   getCategoryColor,
@@ -13,14 +14,11 @@ function MapEvents ({
   onSelect,
   svg,
   locations,
-  eventRadius
+  eventRadius,
+  coloringSet,
+  filterColors,
+  features
 }) {
-  function getCoordinatesForPercent (radius, percent) {
-    const x = radius * Math.cos(2 * Math.PI * percent)
-    const y = radius * Math.sin(2 * Math.PI * percent)
-    return [x, y]
-  }
-
   function handleEventSelect (e, location) {
     const events = e.shiftKey ? selected.concat(location.events) : location.events
     onSelect(events)
@@ -41,6 +39,27 @@ function MapEvents ({
     )
   }
 
+  function renderLocationSlicesByAssociation (location) {
+    const colorPercentages = calculateColorPercentages([location], coloringSet)
+
+    let styles = ({
+      stroke: colors.darkBackground,
+      strokeWidth: 0,
+      fillOpacity: narrative ? 1 : calcOpacity(location.events.length)
+    })
+
+    return (
+      <ColoredMarkers
+        radius={eventRadius}
+        colorPercentMap={zipColorsToPercentages(filterColors, colorPercentages)}
+        styles={{
+          ...styles
+        }}
+        className={'location-event-marker'}
+      />
+    )
+  }
+
   function renderLocationSlicesByCategory (location) {
     const locCategory = location.events.length > 0 ? location.events[0].category : 'default'
     const customStyles = styleLocation ? styleLocation(location) : null
@@ -142,7 +161,8 @@ function MapEvents ({
         transform={`translate(${x}, ${y})`}
         onClick={(e) => handleEventSelect(e, location)}
       >
-        {renderLocationSlicesByCategory(location)}
+        {features.COLOR_BY_ASSOCIATION ? renderLocationSlicesByAssociation(location) : null}
+        {features.COLOR_BY_CATEGORY ? renderLocationSlicesByCategory(location) : null}
         {extraRender ? extraRender() : null}
         {isSelected ? null : renderBorder()}
       </g>