Events showing up on timeline after interpolating categories from associations and passing into getY

src/common/utilities.js

@@ -62,6 +62,18 @@ export function trimAndEllipse (string, stringNum) {
   return string
 }
 
+export function getEventCategories (event, categories) {
+  const matchedCategories = []
+  if (event.associations && event.associations.length > 0) {
+    event.associations.reduce((acc, val) => {
+      const foundCategory = categories.find(cat => cat.id === val)
+      if (foundCategory) acc.push(foundCategory)
+      return acc
+    }, matchedCategories)
+  }
+  return matchedCategories
+}
+
 /**
  * Inset the full source represenation from 'allSources' into an event. The
  * function is 'curried' to allow easy use with maps. To use for a single

src/components/Timeline.jsx

@@ -277,13 +277,6 @@ class Timeline extends React.Component {
 
     if (!categoriesExist) { return this.state.dims.trackHeight / 2 }
 
-    // const eventCategories = event.associations.reduce((acc, a) => {
-    //   const foundCategory = categories.find(cat => cat.id === a)
-    //   if (foundCategory) acc.push(foundCategory)
-
-    //   return acc
-    // }, [])
-
     const { category, project } = event
 
     if (GRAPH_NONLOCATED && GRAPH_NONLOCATED.categories.includes(category)) {
@@ -375,6 +368,7 @@ class Timeline extends React.Component {
               <Events
                 events={this.props.domain.events}
                 projects={this.props.domain.projects}
+                categories={this.props.domain.categories}
                 styleDatetime={this.styleDatetime}
                 narrative={this.props.app.narrative}
                 getDatetimeX={this.getDatetimeX}

src/components/presentational/Timeline/Events.js

@@ -4,7 +4,7 @@ import DatetimeBar from './DatetimeBar'
 import DatetimeSquare from './DatetimeSquare'
 import DatetimeStar from './DatetimeStar'
 import Project from './Project'
-import { calcOpacity } from '../../../common/utilities'
+import { calcOpacity, getEventCategories } from '../../../common/utilities'
 
 function renderDot (event, styles, props) {
   return <DatetimeDot
@@ -60,6 +60,7 @@ function renderStar (event, styles, props) {
 const TimelineEvents = ({
   events,
   projects,
+  categories,
   narrative,
   getDatetimeX,
   getY,
@@ -75,7 +76,7 @@ const TimelineEvents = ({
 }) => {
   const narIds = narrative ? narrative.steps.map(s => s.id) : []
 
-  function renderEvent (event) {
+  function renderEvent (aggregated, event) {
     if (narrative) {
       if (!(narIds.includes(event.id))) {
         return null
@@ -96,24 +97,33 @@ const TimelineEvents = ({
       }
     }
 
-    const eventY = getY(event)
+    const relatedCategories = getEventCategories(event, categories)
+    
+    if (relatedCategories && relatedCategories.length > 0) {
+      relatedCategories.forEach(cat => {
+        const eventY = getY({...event, category: cat.id})
 
-    let colour = event.colour ? event.colour : getCategoryColor(event.category)
-    const styles = {
-      fill: colour,
-      fillOpacity: eventY > 0 ? calcOpacity(1) : 0,
-      transition: `transform ${transitionDuration / 1000}s ease`
+        let colour = event.colour ? event.colour : getCategoryColor(cat.id)
+        const styles = {
+          fill: colour,
+          fillOpacity: eventY > 0 ? calcOpacity(1) : 0,
+          transition: `transform ${transitionDuration / 1000}s ease`
+        }
+
+        aggregated.push(
+          renderShape(event, styles, {
+            x: getDatetimeX(event.datetime),
+            y: eventY,
+            eventRadius,
+            onSelect: () => onSelect(event),
+            dims,
+            highlights: features.HIGHLIGHT_GROUPS ? getHighlights(event.filters[features.HIGHLIGHT_GROUPS.filterIndexIndicatingGroup]) : [],
+            features
+          })
+        )
+      })
     }
-
-    return renderShape(event, styles, {
-      x: getDatetimeX(event.datetime),
-      y: eventY,
-      eventRadius,
-      onSelect: () => onSelect(event),
-      dims,
-      highlights: features.HIGHLIGHT_GROUPS ? getHighlights(event.filters[features.HIGHLIGHT_GROUPS.filterIndexIndicatingGroup]) : [],
-      features
-    })
+    return aggregated
   }
 
   let renderProjects = () => null
@@ -137,7 +147,8 @@ const TimelineEvents = ({
       clipPath={'url(#clip)'}
     >
       {renderProjects()}
-      {events.map(event => renderEvent(event))}
+      {events.reduce(renderEvent, [])}
+      {/* {events.map(event => renderEvent(event))} */}
     </g>
   )
 }