rewrite features as part of store + add HIGHLIGHT_GROUPS

src/components/Layout.js

@@ -108,12 +108,12 @@ class Dashboard extends React.Component {
   }
 
   render () {
-    const { actions, app, domain, ui } = this.props
+    const { actions, app, domain, ui, features } = this.props
 
     if (isMobile || window.innerWidth < 1000) {
       return (
         <div>
-          {process.env.features.USE_COVER && (
+          {features.USE_COVER && (
             <StaticPage showing={app.flags.isCover}>
               {/* enable USE_COVER in config.js features, and customise your header */}
               {/* pass 'actions.toggleCover' as a prop to your custom header */}
@@ -193,7 +193,7 @@ class Dashboard extends React.Component {
             }
           />
         ) : null}
-        {process.env.features.USE_COVER && (
+        {features.USE_COVER && (
           <StaticPage showing={app.flags.isCover}>
             {/* enable USE_COVER in config.js features, and customise your header */}
             {/* pass 'actions.toggleCover' as a prop to your custom header */}

src/components/Map.jsx

@@ -34,7 +34,7 @@ class Map extends React.Component {
 
   componentDidMount () {
     if (this.map === null) {
-      this.initializeMap()
+      // this.initializeMap()
     }
   }
 
@@ -139,7 +139,7 @@ class Map extends React.Component {
     const pane = this.map.getPanes().overlayPane
     const { width, height } = this.getClientDims()
 
-    return (
+    return !!this.map ? (
       <Portal node={pane}>
         <svg
           ref={this.svgRef}
@@ -149,7 +149,7 @@ class Map extends React.Component {
           className='leaflet-svg'
         />
       </Portal>
-    )
+    ) : null
   }
 
   renderSites () {
@@ -183,6 +183,7 @@ class Map extends React.Component {
         styles={this.props.ui.narratives}
         onSelect={this.props.methods.onSelect}
         onSelectNarrative={this.props.methods.onSelectNarrative}
+        features={this.props.features}
       />
     )
   }
@@ -266,8 +267,8 @@ function mapStateToProps (state) {
       locations: selectors.selectLocations(state),
       narratives: selectors.selectNarratives(state),
       categories: selectors.getCategories(state),
-      sites: selectors.getSites(state),
-      shapes: selectors.getShapes(state)
+      sites: selectors.selectSites(state),
+      shapes: selectors.selectShapes(state)
     },
     app: {
       views: state.app.filters.views,
@@ -285,7 +286,8 @@ function mapStateToProps (state) {
       narratives: state.ui.style.narratives,
       mapSelectedEvents: state.ui.style.selectedEvents,
       shapes: state.ui.style.shapes
-    }
+    },
+    features: selectors.getFeatures(state)
   }
 }
 

src/components/Timeline.jsx

@@ -287,6 +287,7 @@ class Timeline extends React.Component {
     const heightStyle = { height: dims.height }
     const extraStyle = { ...heightStyle, ...foldedStyle }
     const contentHeight = { height: dims.contentHeight }
+    const { categories } = this.props.domain
 
     return (
       <div className={classes} style={extraStyle}>
@@ -347,10 +348,17 @@ class Timeline extends React.Component {
                 narrative={this.props.app.narrative}
                 getDatetimeX={this.getDatetimeX}
                 getCategoryY={this.state.scaleY}
+                getHighlights={group => {
+                  if (group === 'None') {
+                    return []
+                  }
+                  return categories.map(c => c.group === group)
+                }}
                 getCategoryColor={this.props.methods.getCategoryColor}
                 transitionDuration={this.state.transitionDuration}
                 onSelect={this.props.methods.onSelect}
                 dims={dims}
+                features={this.props.features}
               />
             </svg>
           </div>
@@ -378,7 +386,8 @@ function mapStateToProps (state) {
     ui: {
       dom: state.ui.dom,
       styles: state.ui.style.selectedEvents
-    }
+    },
+    features: selectors.getFeatures(state)
   }
 }
 

src/components/Toolbar/BottomActions.js

@@ -8,7 +8,7 @@ function BottomActions (props) {
   function renderToggles () {
     return [
       <div className='bottom-action-block'>
-        {process.env.features.USE_SITES ? <SitesIcon
+        {props.features.USE_SITES ? <SitesIcon
           isActive={props.sites.enabled}
           onClickHandler={props.sites.toggle}
         /> : null}
@@ -20,7 +20,7 @@ function BottomActions (props) {
         />
       </div>,
       <div className='botttom-action-block'>
-        {process.env.features.USE_COVER ? <CoverIcon
+        {props.features.USE_COVER ? <CoverIcon
           onClickHandler={props.cover.toggle}
         /> : null}
       </div>

src/components/Toolbar/Layout.js

@@ -32,7 +32,7 @@ class Toolbar extends React.Component {
   }
 
   renderSearch () {
-    if (process.env.features.USE_SEARCH) {
+    if (this.props.features.USE_SEARCH) {
       return (
         <TabPanel>
           <Search
@@ -73,7 +73,7 @@ class Toolbar extends React.Component {
   }
 
   renderToolbarCategoriesPanel () {
-    if (process.env.features.CATEGORIES_AS_TAGS) {
+    if (this.props.features.CATEGORIES_AS_TAGS) {
       return (
         <TabPanel>
           <CategoriesListPanel
@@ -88,7 +88,7 @@ class Toolbar extends React.Component {
   }
 
   renderToolbarTagPanel () {
-    if (process.env.features.USE_TAGS &&
+    if (this.props.features.USE_TAGS &&
       this.props.tags.children) {
       return (
         <TabPanel>
@@ -154,7 +154,7 @@ class Toolbar extends React.Component {
     const tagsLabel = copy[this.props.language].toolbar.tags_label
     const categoriesLabel = 'Categories' // TODO:
     const isTags = this.props.tags && this.props.tags.children
-    const isCategories = process.env.features.CATEGORIES_AS_TAGS
+    const isCategories = this.props.features.CATEGORIES_AS_TAGS
 
     return (
       <div className='toolbar'>
@@ -176,6 +176,7 @@ class Toolbar extends React.Component {
           cover={{
             toggle: this.props.actions.toggleCover
           }}
+          features={this.props.features}
         />
       </div>
     )
@@ -195,6 +196,7 @@ class Toolbar extends React.Component {
 
 function mapStateToProps (state) {
   return {
+    features: selectors.getFeatures(state),
     tags: selectors.getTagTree(state),
     categories: selectors.getCategories(state),
     narratives: selectors.selectNarratives(state),
@@ -202,7 +204,6 @@ function mapStateToProps (state) {
     activeTags: selectors.getActiveTags(state),
     activeCategories: selectors.getActiveCategories(state),
     viewFilters: state.app.filters.views,
-    features: state.app.features,
     narrative: state.app.narrative,
     sitesShowing: state.app.flags.isShowingSites,
     infoShowing: state.app.flags.isInfopopup

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