layered projects working; with some bugs

src/components/presentational/Timeline/Events.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import DatetimeDot from './DatetimeDot'
 import DatetimeBar from './DatetimeBar'
+import Project from './Project'
 import { getEventOpacity } from '../../../common/utilities'
 import { sizes } from '../../../common/global'
 
@@ -85,7 +86,7 @@ const TimelineEvents = ({
         onSelect={() => onSelect(unlocatedEvents)}
         category={dot.category}
         events={unlocatedEvents}
-        x={getDatetimeX(datetime)}
+        x={getDatetimeX(datetime.timestamp)}
         y={dims.marginTop}
         width={sizes.eventDotR}
         height={dims.trackHeight}
@@ -98,7 +99,7 @@ const TimelineEvents = ({
             onSelect={() => onSelect(unlocatedEvents)}
             category={dot.category}
             events={[ev]}
-            x={getDatetimeX(datetime)}
+            x={getDatetimeX(datetime.timestamp)}
             y={ev.projectOffset >= 0 ? dims.trackHeight - ev.projectOffset : dims.marginTop}
             width={sizes.eventDotR}
             height={ev.projectOffset >= 0 ? sizes.eventDotR * 2 : 20}
@@ -112,7 +113,7 @@ const TimelineEvents = ({
             onSelect={() => onSelect(locatedEvents)}
             category={dot.category}
             events={locatedEvents}
-            x={getDatetimeX(datetime)}
+            x={getDatetimeX(datetime.timestamp)}
             y={getCategoryY(dot.category)}
             r={sizes.eventDotR}
             styleProps={locatedProps}
@@ -125,10 +126,32 @@ const TimelineEvents = ({
     })
   }
 
+  // const projOffsets = {}
+  // const pEvents = datetimes.filter(dt => dt.events.some(ev => ev.project !== null))
+  // pEvents.forEach(({ events }) => {
+  //   events.forEach(ev => {
+  //     if (!projOffsets.hasOwnProperty(ev.project)) {
+  //       projOffsets[ev.project] = ev.projectOffset
+  //     }
+  //   })
+  // })
+
+  let projects
+  if (process.env.features.ASSOCIATIVE_EVENTS_BY_TAG) {
+    projects = datetimes[1]
+    datetimes = datetimes[0]
+  }
+
   return (
     <g
       clipPath={'url(#clip)'}
     >
+      {projects.map(project => (<Project
+        {...project}
+        getX={getDatetimeX}
+        dims={dims}
+        colour={getCategoryColor(project.category)}
+      />))}
       {datetimes.map(datetime => renderDatetime(datetime))}
     </g>
   )

src/components/presentational/Timeline/Markers.js

@@ -24,7 +24,7 @@ const TimelineMarkers = ({
         stroke-linejoin='round'
         stroke-dasharray={styles ? styles['stroke-dasharray'] : '2,2'}
         style={{
-          'transform': `translate(${getEventX(event)}px, ${getCategoryY(event.category)}px)`,
+          'transform': `translate(${getEventX(event.timestamp)}px, ${getCategoryY(event.category)}px)`,
           '-webkit-transition': `transform ${transitionDuration / 1000}s ease`,
           '-moz-transition': 'none',
           'opacity': 0.9
@@ -43,7 +43,7 @@ const TimelineMarkers = ({
         stroke-width={styles ? styles['stroke-width'] : 1}
         stroke-dasharray={styles ? styles['stroke-dasharray'] : '2,2'}
         style={{
-          'transform': `translate(${getEventX(event)}px, 40px)`,
+          'transform': `translate(${getEventX(event.timestamp)}px, 40px)`,
           '-webkit-transition': `transform ${transitionDuration / 1000}s ease`,
           '-moz-transition': 'none',
           'opacity': 0.9

src/components/presentational/Timeline/Project.js

@@ -0,0 +1,23 @@
+import React from 'react'
+import { sizes } from '../../../common/global'
+
+export default ({
+  id,
+  offset,
+  start,
+  end,
+  getX,
+  dims,
+  colour
+}) => {
+  const length = getX(end) - getX(start)
+  return <rect
+    onClick={() => alert('TODO: associate all events')}
+    className='project'
+    x={getX(start)}
+    y={dims.trackHeight - offset}
+    width={length}
+    style={{ fill: colour, fillOpacity: 0.1 }}
+    height={2 * sizes.eventDotR}
+  />
+}