WIP: lots of messy code for better timelines

src/common/global.js

@@ -6,7 +6,7 @@ export const colors = {
 }
 
 export const sizes = {
-  eventDotR: 5
+  eventDotR: 15
 }
 
 export default {

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}

src/selectors/index.js

@@ -2,6 +2,7 @@ import { createSelector } from 'reselect'
 import { compareTimestamp, insetSourceFrom, dateMin, dateMax } from '../common/utilities'
 import { isTimeRangedIn, shuffle } from './helpers'
 import { sizes } from '../common/global'
+const HAS_PROJECTS = 'ASSOCIATIVE_EVENTS_BY_TAG' in process.env.features && process.env.features.ASSOCIATIVE_EVENTS_BY_TAG
 
 // Input selectors
 export const getEvents = state => state.domain.events
@@ -43,7 +44,8 @@ export const selectEvents = createSelector(
       const isMatchingTag = (event.tags && event.tags.map(tag => activeTags.includes(tag)).some(s => s)) || activeTags.length === 0
       const isActiveTag = isMatchingTag || activeTags.length === 0
       const isActiveCategory = activeCategories.includes(event.category) || activeCategories.length === 0
-      const isActiveTime = isTimeRangedIn(event, timeRange)
+      let isActiveTime = isTimeRangedIn(event, timeRange)
+      isActiveTime = HAS_PROJECTS ? ((!event.latitude && !event.longitude) || isActiveTime) : isActiveTime
 
       if (isActiveTime && isActiveTag && isActiveCategory) {
         acc[event.id] = { ...event }
@@ -152,7 +154,6 @@ export const selectLocations = createSelector(
     events: [...]
   }
  */
-const IS_PROJ = 'ASSOCIATIVE_EVENTS_BY_TAG' in process.env.features && process.env.features.ASSOCIATIVE_EVENTS_BY_TAG
 export const selectDatetimes = createSelector(
   [selectEvents],
   events => {
@@ -170,8 +171,8 @@ export const selectDatetimes = createSelector(
         tsExists = datetimes.hasOwnProperty(dtKey)
       }
 
-      if (IS_PROJ) {
-        const project = event.tags.length >= 1 ? event.tags[0] : null
+      if (HAS_PROJECTS) {
+        const project = event.tags.length >= 1 && !event.latitude && !event.longitude ? event.tags[0] : null
         event = { ...event, project }
         if (project !== null) {
           if (projects.hasOwnProperty(project)) {
@@ -194,7 +195,7 @@ export const selectDatetimes = createSelector(
        * TODO: find a more module way to interface with this code.
        */
       let shouldCreate = true
-      if (IS_PROJ && dtIdx >= 2 && !(!!event.latitude && !!event.longitude) && event.project !== null) {
+      if (HAS_PROJECTS && dtIdx >= 2 && !(!!event.latitude && !!event.longitude) && event.project !== null) {
         const allExistingIdxs = [...Array(dtIdx - 1).keys()].map(k => k + 1)
         let foundMatching = false
         allExistingIdxs.forEach(_idx => {
@@ -222,7 +223,7 @@ export const selectDatetimes = createSelector(
     })
 
     const output = []
-    if (IS_PROJ) {
+    if (HAS_PROJECTS) {
       const projKeys = Object.keys(projects)
       let sortedDts = Object.keys(datetimes)
 
@@ -239,7 +240,9 @@ export const selectDatetimes = createSelector(
         output.push({
           ...datetimes[dt],
           events: datetimes[dt].events.map(ev => {
-            let projectOffset = (activeProjects.indexOf(ev.project) + 1) * (2.5 * sizes.eventDotR)
+            const activeIdx = activeProjects.indexOf(ev.project)
+            let projectOffset = (activeIdx + 1) * (2.5 * sizes.eventDotR)
+            if (activeIdx === -1) projectOffset = -1
             if (ev.project !== null && !projects[ev.project].hasOwnProperty('offset')) {
               projects[ev.project].offset = projectOffset
               projects[ev.project].category = ev.category

src/store/initial.js

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