proper fix of GRAPH_NONLOCATED

src/components/Layout.js

@@ -61,7 +61,9 @@ class Dashboard extends React.Component {
       const idx = binarySearch(
         events,
         selected,
-        (e1, e2) => e1.datetime - e2.datetime
+        (e1, e2) => {
+          return e2.datetime - e1.datetime
+        }
       )
       // check events before
       let ptr = idx - 1

src/components/Timeline.jsx

@@ -79,6 +79,10 @@ class Timeline extends React.Component {
   }
 
   makeScaleY (categories, trackHeight, marginTop) {
+    const { features } = this.props
+    if (features.GRAPH_NONLOCATED && features.GRAPH_NONLOCATED.categories) {
+      categories = categories.filter(cat => !features.GRAPH_NONLOCATED.categories.includes(cat.category))
+    }
     const catHeight = trackHeight / (categories.length)
     const shiftUp = trackHeight / (categories.length) / 2
     const marginShift = marginTop === 0 ? 0 : marginTop
@@ -321,6 +325,7 @@ class Timeline extends React.Component {
                 onDrag={() => { this.onDrag() }}
                 onDragEnd={() => { this.onDragEnd() }}
                 categories={this.props.domain.categories}
+                features={this.props.features}
               />
               <Handles
                 dims={dims}

src/components/TimelineCategories.jsx

@@ -24,9 +24,15 @@ class TimelineCategories extends React.Component {
     }
   }
 
-  renderCategory (category, idx) {
-    const dims = this.props.dims
+  renderCategory (cat, idx) {
+    const { features, dims } = this.props
+    const { category } = cat
     const strokeWidth = 1 // dims.trackHeight / (this.props.categories.length + 1)
+    if (features.GRAPH_NONLOCATED
+      && features.GRAPH_NONLOCATED.categories
+      && features.GRAPH_NONLOCATED.categories.includes(category)) {
+      return null
+    }
 
     return (
       <React.Fragment>
@@ -34,12 +40,12 @@ class TimelineCategories extends React.Component {
           class='tick'
           style={{ strokeWidth }}
           opacity='0.5'
-          transform={`translate(0,${this.props.getCategoryY(category.category)})`}
+          transform={`translate(0,${this.props.getCategoryY(category)})`}
         >
           <line x1={dims.marginLeft} x2={dims.width - dims.width_controls} />
         </g>
-        <g class='tick' opacity='1' transform={`translate(0,${this.props.getCategoryY(category.category)})`}>
-          <text x={dims.marginLeft - 5} dy='0.32em'>{category.category}</text>
+        <g class='tick' opacity='1' transform={`translate(0,${this.props.getCategoryY(category)})`}>
+          <text x={dims.marginLeft - 5} dy='0.32em'>{category}</text>
         </g>
       </React.Fragment>
     )

src/components/presentational/Timeline/Events.js

@@ -92,7 +92,7 @@ const TimelineEvents = ({
       }
     }
 
-    let eventY = getCategoryY(event.category)
+    let eventY = getCategoryY ? getCategoryY(event.category) : 0
     const isNonlocated = !event.latitude && !event.longitude
     if (features.GRAPH_NONLOCATED && isNonlocated) {
       const { project } = event

src/components/presentational/Timeline/Markers.js

@@ -51,7 +51,8 @@ const TimelineMarkers = ({
         }}
       />
     }
-    const isDot = (!features.GRAPH_NONLOCATED && !!event.latitude && !!event.longitude) || (features.GRAPH_NONLOCATED && (event.projectOffset !== -1 || (!!event.latitude && !!event.longitude)))
+    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()
@@ -62,7 +63,7 @@ const TimelineMarkers = ({
       case 'star':
         return renderCircle()
       default:
-        return isDot ? renderCircle() : renderBar()
+        return isBar ? renderBar() : renderCircle()
     }
   }
 

src/store/initial.js

@@ -60,12 +60,12 @@ const initial = {
     },
     timeline: {
       dimensions: {
-        height: 450,
+        height: 250,
         width: 0,
         marginLeft: 100,
         marginTop: 15,
         marginBottom: 60,
-        contentHeight: 400,
+        contentHeight: 200,
         width_controls: 100
       },
       range: [