WIP: lots of messy code for better timelines

src/components/Timeline.jsx

@@ -81,14 +81,18 @@ class Timeline extends React.Component {
 
   makeScaleY (categories, trackHeight, marginTop) {
     const tickHeight = sizes.eventDotR * 2
-    const catHeight = trackHeight / (categories.length)
-    const shiftUp = trackHeight / (categories.length + 1) / 2
+    const catHeight = trackHeight  / (categories.length)
+    const shiftUp = trackHeight / (categories.length) / 2
     const marginShift = marginTop === 0 ? 0 : marginTop
     const manualAdjustment = trackHeight <= 60 ? (trackHeight <= 30 ? -8 : -5) : 0
-    const catsYpos = categories.map((g, i) => ((i + 1) * catHeight) - shiftUp + marginShift + manualAdjustment)
-    return d3.scaleOrdinal()
-      .domain(categories)
-      .range(catsYpos)
+    const catsYpos = categories.map((g, i) => {
+      return ((i+1) * catHeight) - shiftUp + marginShift + manualAdjustment
+    })
+    const catMap = categories.map(c => c.category)
+    return (cat) => {
+      const idx = catMap.indexOf(cat)
+      return catsYpos[idx]
+    }
   }
 
   componentDidUpdate (prevProps, prevState) {

src/components/TimelineAxis.jsx

@@ -59,17 +59,18 @@ class TimelineAxis extends React.Component {
   }
 
   render () {
+    const PADDING = 20;
     return (
       <React.Fragment>
         <g
           ref={this.xAxis0Ref}
-          transform={`translate(0, 15)`}
+          transform={`translate(0, ${PADDING})`}
           clipPath={`url(#clip)`}
           className={`axis xAxis`}
         />
         <g
           ref={this.xAxis1Ref}
-          transform={`translate(0, 10)`}
+          transform={`translate(0, ${this.props.dims.trackHeight + PADDING})`}
           clipPath={`url(#clip)`}
           className={`axis axisHourText`}
         />

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}