WIP: lots of messy code for better timelines

src/components/presentational/Timeline/DatetimeDot.js

@@ -10,7 +10,19 @@ export default ({
   styleProps,
   extraRender
 }) => (
-  <circle
+
+  <rect
+    onClick={onSelect}
+    className='event'
+    x={x}
+    y={y - 0.5 * r}
+    style={styleProps}
+    width={r}
+    height={r}
+  />
+)
+/**
+<circle
     onClick={onSelect}
     className='event'
     cx={x}
@@ -18,4 +30,4 @@ export default ({
     style={styleProps}
     r={r}
   />
-)
+   **/

src/components/presentational/Timeline/Events.js

@@ -25,6 +25,7 @@ function getDotsToRender (events) {
 
   return Object.values(eventsByCategory)
 }
+const HAS_PROJECTS = 'ASSOCIATIVE_EVENTS_BY_TAG' in process.env.features && process.env.features.ASSOCIATIVE_EVENTS_BY_TAG
 
 const TimelineEvents = ({
   datetimes,
@@ -77,7 +78,9 @@ const TimelineEvents = ({
 
       const unlocatedProps = {
         fill: categoryColor,
-        fillOpacity: getEventOpacity(unlocatedEvents)
+        fillOpacity: HAS_PROJECTS
+          ? unlocatedEvents.some(ev => ev.projectOffset >= 0) ? getEventOpacity(unlocatedEvents) : 0.05
+          : getEventOpacity(unlocatedEvents) / 3
       }
 
       const extraRender = customStyles[1]
@@ -102,7 +105,7 @@ const TimelineEvents = ({
             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}
+            height={ev.projectOffset >= 0 ? sizes.eventDotR * 2 : dims.trackHeight}
             styleProps={unlocatedProps}
           />))}
         </React.Fragment>

src/components/presentational/Timeline/Markers.js

@@ -36,7 +36,7 @@ const TimelineMarkers = ({
         className='timeline-marker'
         x={0}
         y={-dims.marginTop - (noCategories > 2 ? noCategories * MARKER_DISPLACED : MARKER_DISPLACED)}
-        width={(2 * sizes.eventDotR) * 0.9}
+        width={sizes.eventDotR}
         height={dims.trackHeight}
         stroke={styles ? styles.stroke : colors.primaryHighlight}
         stroke-opacity='1'

src/components/presentational/Timeline/Project.js

@@ -12,7 +12,7 @@ export default ({
 }) => {
   const length = getX(end) - getX(start)
   return <rect
-    onClick={() => alert('TODO: associate all events')}
+    onClick={() => console.error('TODO: associate all events')}
     className='project'
     x={getX(start)}
     y={dims.trackHeight - offset}