fix markers (again)

src/components/Timeline.jsx

@@ -5,6 +5,7 @@ import * as selectors from '../selectors'
 import hash from 'object-hash'
 
 import copy from '../common/data/copy.json'
+import { sizes } from '../common/global'
 import Header from './presentational/Timeline/Header'
 import Axis from './TimelineAxis.jsx'
 import Clip from './presentational/Timeline/Clip'
@@ -20,6 +21,7 @@ class Timeline extends React.Component {
     super(props)
     this.styleDatetime = this.styleDatetime.bind(this)
     this.getDatetimeX = this.getDatetimeX.bind(this)
+    this.getY = this.getY.bind(this)
     this.onApplyZoom = this.onApplyZoom.bind(this)
     this.svgRef = React.createRef()
     this.state = {
@@ -269,6 +271,16 @@ class Timeline extends React.Component {
     return this.state.scaleX(datetime)
   }
 
+  getY (event) {
+    const { category, project } = event
+    const { features, domain } = this.props
+    const { GRAPH_NONLOCATED } = features
+    if (GRAPH_NONLOCATED && GRAPH_NONLOCATED.categories.includes(category)) {
+      return this.state.dims.marginTop + domain.projects[project].offset + sizes.eventDotR
+    }
+    return this.state.scaleY(category)
+  }
+
   /**
    * Determines additional styles on the <circle> for each location.
    * A location consists of an array of events (see selectors). The function
@@ -340,8 +352,8 @@ class Timeline extends React.Component {
               <Markers
                 dims={dims}
                 selected={this.props.app.selected}
-                getEventX={this.getDatetimeX}
-                getCategoryY={this.state.scaleY}
+                getEventX={ev => this.getDatetimeX(ev.datetime)}
+                getEventY={this.getY}
                 transitionDuration={this.state.transitionDuration}
                 styles={this.props.ui.styles}
                 features={this.props.features}
@@ -352,7 +364,7 @@ class Timeline extends React.Component {
                 styleDatetime={this.styleDatetime}
                 narrative={this.props.app.narrative}
                 getDatetimeX={this.getDatetimeX}
-                getCategoryY={this.state.scaleY}
+                getY={this.getY}
                 getHighlights={group => {
                   if (group === 'None') {
                     return []

src/components/presentational/Timeline/Events.js

@@ -63,7 +63,7 @@ const TimelineEvents = ({
   projects,
   narrative,
   getDatetimeX,
-  getCategoryY,
+  getY,
   getCategoryColor,
   getHighlights,
   onSelect,
@@ -92,18 +92,7 @@ const TimelineEvents = ({
       }
     }
 
-    let eventY = getCategoryY ? getCategoryY(event.category) : 0
-    const isNonlocated = !event.latitude && !event.longitude
-    if (features.GRAPH_NONLOCATED && isNonlocated) {
-      const { project } = event
-      if (project) {
-        const { offset } = projects[project]
-        eventY = dims.marginTop + offset + sizes.eventDotR
-      } else {
-        eventY = 0
-      }
-    }
-
+    const eventY = getY(event)
     let colour = event.colour ? event.colour : getCategoryColor(event.category)
     const styles = {
       fill: colour,
@@ -114,7 +103,7 @@ const TimelineEvents = ({
     return renderShape(event, styles, {
       x: getDatetimeX(event.datetime),
       y: eventY,
-      onSelect: () => { console.log(event); onSelect(event) },
+      onSelect: () => onSelect(event),
       dims,
       highlights: features.HIGHLIGHT_GROUPS ? getHighlights(event.tags[features.HIGHLIGHT_GROUPS.tagIndexIndicatingGroup]) : [],
       features

src/components/presentational/Timeline/Markers.js

@@ -4,7 +4,7 @@ import colors, { sizes } from '../../../common/global'
 const TimelineMarkers = ({
   styles,
   getEventX,
-  getCategoryY,
+  getEventY,
   transitionDuration,
   selected,
   dims,
@@ -12,10 +12,6 @@ const TimelineMarkers = ({
 }) => {
   function renderMarker (event) {
     function renderCircle () {
-      const yVal = (features.GRAPH_NONLOCATED && !event.latitude && !event.longitude)
-        ? event.projectOffset >= 0 ? dims.trackHeight - event.projectOffset : dims.marginTop
-        : getCategoryY ? getCategoryY(event.category) : () => null
-
       return <circle
         className='timeline-marker'
         cx={0}
@@ -26,7 +22,7 @@ const TimelineMarkers = ({
         stroke-linejoin='round'
         stroke-dasharray={styles ? styles['stroke-dasharray'] : '2,2'}
         style={{
-          'transform': `translate(${getEventX(event.timestamp)}px, ${yVal}px)`,
+          'transform': `translate(${getEventX(event)}px, ${getEventY(event)}px)`,
           '-webkit-transition': `transform ${transitionDuration / 1000}s ease`,
           '-moz-transition': 'none',
           'opacity': 0.9
@@ -46,13 +42,12 @@ const TimelineMarkers = ({
         stroke-width={styles ? styles['stroke-width'] : 1}
         stroke-dasharray={styles ? styles['stroke-dasharray'] : '2,2'}
         style={{
-          'transform': `translate(${getEventX(event.timestamp)}px)`,
+          'transform': `translate(${getEventX(event)}px)`,
           'opacity': 0.7
         }}
       />
     }
     const isNonlocated = !event.latitude && !event.longitude
-    const isBar = (!features.GRAPH_NONLOCATED && isNonlocated) || (features.GRAPH_NONLOCATED && features.GRAPH_NONLOCATED.categories.includes(event.category))
     switch (event.shape) {
       case 'circle':
         return renderCircle()
@@ -63,7 +58,7 @@ const TimelineMarkers = ({
       case 'star':
         return renderCircle()
       default:
-        return isBar ? renderBar() : renderCircle()
+        return (!features.GRAPH_NONLOCATED && isNonlocated) ? renderBar : renderCircle()
     }
   }