rewrite features as part of store + add HIGHLIGHT_GROUPS

src/components/presentational/Map/Narratives.js

@@ -10,7 +10,7 @@ const defaultStyles = {
   stroke: 'none'
 }
 
-function MapNarratives ({ styles, onSelectNarrative, svg, narrative, narratives, projectPoint }) {
+function MapNarratives ({ styles, onSelectNarrative, svg, narrative, narratives, projectPoint, features }) {
   function getNarrativeStyle (narrativeId) {
     const styleName = (narrativeId && narrativeId in styles)
       ? narrativeId
@@ -153,7 +153,7 @@ function MapNarratives ({ styles, onSelectNarrative, svg, narrative, narratives,
 
     return (
       <g id={narrativeId} className='narrative'>
-        {(process.env.features.NARRATIVE_STEP_STYLES
+        {(features.NARRATIVE_STEP_STYLES
           ? renderBetweenMarked(n)
           : renderFullNarrative(n)
         )}

src/components/presentational/Timeline/DatetimeBar.js

@@ -1,7 +1,7 @@
 import React from 'react'
 
 export default ({
-  category,
+  highlights,
   events,
   x,
   y,
@@ -10,14 +10,34 @@ export default ({
   onSelect,
   styleProps,
   extraRender
-}) => (
-  <rect
-    onClick={onSelect}
-    className='event'
-    x={x}
-    y={y}
-    style={styleProps}
-    width={width}
-    height={height}
-  />
-)
+}) => {
+  if (highlights.length === 0) {
+    return (
+      <rect
+        onClick={onSelect}
+        className='event'
+        x={x}
+        y={y}
+        style={styleProps}
+        width={width}
+        height={height}
+      />
+    )
+  }
+  const sectionHeight = height / highlights.length
+  return (
+    <React.Fragment>
+      {highlights.map((h, idx) => (
+        <rect
+          onClick={onSelect}
+          className='event'
+          x={x}
+          y={y - sectionHeight + (idx * sectionHeight)}
+          style={{ ...styleProps, opacity: h ? 0.3 : 0.05 }}
+          width={width}
+          height={sectionHeight}
+        />
+      ))}
+    </React.Fragment>
+  )
+}

src/components/presentational/Timeline/Events.js

@@ -7,8 +7,6 @@ import Project from './Project'
 import { calcOpacity } from '../../../common/utilities'
 import { sizes } from '../../../common/global'
 
-const GRAPH_NONLOCATED = 'GRAPH_NONLOCATED' in process.env.features && process.env.features.GRAPH_NONLOCATED
-
 function renderDot (event, styles, props) {
   return <DatetimeDot
     onSelect={props.onSelect}
@@ -22,7 +20,7 @@ function renderDot (event, styles, props) {
 }
 
 function renderBar (event, styles, props) {
-  const fillOpacity = GRAPH_NONLOCATED
+  const fillOpacity = props.features.GRAPH_NONLOCATED
     ? event.projectOffset >= 0 ? styles.opacity : 0.05
     : 0.6
 
@@ -35,6 +33,7 @@ function renderBar (event, styles, props) {
     width={sizes.eventDotR / 4}
     height={props.dims.trackHeight}
     styleProps={{ ...styles, fillOpacity }}
+    highlights={props.highlights}
   />
 }
 
@@ -66,10 +65,11 @@ const TimelineEvents = ({
   getDatetimeX,
   getCategoryY,
   getCategoryColor,
+  getHighlights,
   onSelect,
   transitionDuration,
-  // styleDatetime,
-  dims
+  dims,
+  features
 }) => {
   const narIds = narrative ? narrative.steps.map(s => s.id) : []
 
@@ -91,25 +91,28 @@ const TimelineEvents = ({
       }
     }
 
-    const colour = event.colour ? event.colour : getCategoryColor(event.category)
+    let colour = event.colour ? event.colour : getCategoryColor(event.category)
     const styles = {
       fill: colour,
       fillOpacity: calcOpacity(1),
       transition: `transform ${transitionDuration / 1000}s ease`
     }
+
     return renderShape(event, styles, {
       x: getDatetimeX(event.timestamp),
-      y: (GRAPH_NONLOCATED && !event.latitude && !event.longitude)
+      y: (features.GRAPH_NONLOCATED && !event.latitude && !event.longitude)
         ? event.projectOffset >= 0 ? dims.trackHeight - event.projectOffset : dims.marginTop
-        : getCategoryY(event.category),
+        : getCategoryY ? getCategoryY(event.category) : () => null,
       onSelect: () => onSelect([event]),
-      dims
+      dims,
+      highlights: features.HIGHLIGHT_GROUPS ? getHighlights(event.tags[0]) : [],
+      features
     })
   }
 
   /* set `renderProjects` */
   let renderProjects = () => null
-  if (GRAPH_NONLOCATED) {
+  if (features.GRAPH_NONLOCATED) {
     renderProjects = function () {
       return <React.Fragment>
         {projects.map(project => <Project