Categories showing up on timeline with events; events are stacked on both and connected by a bar which looks like a UI bug somewhere

src/actions/index.js

@@ -4,7 +4,7 @@ import { urlFromEnv } from '../common/utilities'
 // TODO: relegate these URLs entirely to environment variables
 // const CONFIG_URL = urlFromEnv('CONFIG_EXT')
 const EVENT_DATA_URL = urlFromEnv('EVENTS_EXT')
-const CATEGORY_URL = urlFromEnv('CATEGORIES_EXT')
+// const CATEGORY_URL = urlFromEnv('CATEGORIES_EXT')
 const ASSOCIATIONS_URL = urlFromEnv('ASSOCIATIONS_EXT')
 const SOURCES_URL = urlFromEnv('SOURCES_EXT')
 const SITES_URL = urlFromEnv('SITES_EXT')
@@ -42,12 +42,12 @@ export function fetchDomain () {
       )
     ).then(results => results.flatMap(t => t))
 
-    let catPromise = Promise.resolve([])
-    if (features.USE_CATEGORIES) {
-      catPromise = fetch(CATEGORY_URL)
-        .then(response => response.json())
-        .catch(() => handleError(domainMsg('categories')))
-    }
+    // let catPromise = Promise.resolve([])
+    // if (features.USE_CATEGORIES) {
+    //   catPromise = fetch(CATEGORY_URL)
+    //     .then(response => response.json())
+    //     .catch(() => handleError(domainMsg('categories')))
+    // }
 
     let associationsPromise = Promise.resolve([])
     if (features.USE_ASSOCIATIONS) {
@@ -87,7 +87,7 @@ export function fetchDomain () {
 
     return Promise.all([
       eventPromise,
-      catPromise,
+      // catPromise,
       associationsPromise,
       sourcesPromise,
       sitesPromise,
@@ -96,11 +96,11 @@ export function fetchDomain () {
       .then(response => {
         const result = {
           events: response[0],
-          categories: response[1],
-          associations: response[2],
-          sources: response[3],
-          sites: response[4],
-          shapes: response[5],
+          // categories: response[1],
+          associations: response[1],
+          sources: response[2],
+          sites: response[3],
+          shapes: response[4],
           notifications
         }
         if (Object.values(result).some(resp => resp.hasOwnProperty('error'))) {

src/common/constants.js

@@ -1,2 +1,5 @@
-export const FILTER_MODE = 'FILTER'
-export const NARRATIVE_MODE = 'NARRATIVE'
+export const ASSOCIATION_MODES = {
+  CATEGORY: 'CATEGORY',
+  NARRATIVE: 'NARRATIVE',
+  FILTER: 'FILTER'
+}

src/components/Timeline.jsx

@@ -87,7 +87,8 @@ class Timeline extends React.Component {
     const catsYpos = categories.map((g, i) => {
       return ((i + 1) * catHeight) - shiftUp + marginShift + manualAdjustment
     })
-    const catMap = categories.map(c => c.category)
+    const catMap = categories.map(c => c.id)
+
     return (cat) => {
       const idx = catMap.indexOf(cat)
       return catsYpos[idx]
@@ -273,11 +274,12 @@ class Timeline extends React.Component {
     if (!USE_CATEGORIES) { return this.state.dims.trackHeight / 2 }
 
     const { category, project } = event
+    
     if (GRAPH_NONLOCATED && GRAPH_NONLOCATED.categories.includes(category)) {
       return this.state.dims.marginTop + domain.projects[project].offset + this.props.ui.eventRadius
     }
     if (!this.state.scaleY) return 0
-
+    // console.info(event, this.state.scaleY(category))
     return this.state.scaleY(category)
   }
 

src/components/TimelineCategories.jsx

@@ -26,11 +26,11 @@ class TimelineCategories extends React.Component {
 
   renderCategory (cat, idx) {
     const { features, dims } = this.props
-    const { category } = cat
+    const { id } = 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)) {
+      features.GRAPH_NONLOCATED.categories.includes(id)) {
       return null
     }
 
@@ -40,26 +40,27 @@ class TimelineCategories extends React.Component {
           class='tick'
           style={{ strokeWidth }}
           opacity='0.5'
-          transform={`translate(0,${this.props.getCategoryY(category)})`}
+          transform={`translate(0,${this.props.getCategoryY(id)})`}
         >
           <line x1={dims.marginLeft} x2={dims.width - dims.width_controls} />
         </g>
-        <g class='tick' opacity='1' transform={`translate(0,${this.props.getCategoryY(category)})`}>
-          <text x={dims.marginLeft - 5} dy='0.32em'>{category}</text>
+        <g class='tick' opacity='1' transform={`translate(0,${this.props.getCategoryY(id)})`}>
+          <text x={dims.marginLeft - 5} dy='0.32em'>{id}</text>
         </g>
       </React.Fragment>
     )
   }
 
   render () {
-    const { dims } = this.props
-    const categories = this.props.features.USE_CATEGORIES
+    const { dims, categories } = this.props
+    const categoriesExist = categories && categories.length > 0 
+    const renderedCategories = categoriesExist
       ? this.props.categories.map((cat, idx) => this.renderCategory(cat, idx))
       : this.renderCategory('Events', 0)
 
     return (
       <g class='yAxis'>
-        {categories}
+        {renderedCategories}
         <rect
           ref={this.grabRef}
           class='drag-grabber'

src/components/presentational/Timeline/Events.js

@@ -97,6 +97,7 @@ const TimelineEvents = ({
     }
 
     const eventY = getY(event)
+
     let colour = event.colour ? event.colour : getCategoryColor(event.category)
     const styles = {
       fill: colour,

src/reducers/validate/validators.js

@@ -47,7 +47,7 @@ function findDuplicateAssociations (associations) {
 export function validateDomain (domain, features) {
   const sanitizedDomain = {
     events: [],
-    categories: [],
+    // categories: [],
     sites: [],
     associations: [],
     sources: {},
@@ -61,7 +61,7 @@ export function validateDomain (domain, features) {
 
   const discardedDomain = {
     events: [],
-    categories: [],
+    // categories: [],
     sites: [],
     associations: [],
     sources: [],
@@ -110,7 +110,7 @@ export function validateDomain (domain, features) {
 
   const eventSchema = createEventSchema(features.CUSTOM_EVENT_FIELDS)
   validateArray(domain.events, 'events', eventSchema)
-  validateArray(domain.categories, 'categories', categorySchema)
+  // validateArray(domain.categories, 'categories', categorySchema)
   validateArray(domain.sites, 'sites', siteSchema)
   validateArray(domain.associations, 'associations', associationsSchema)
   validateObject(domain.sources, 'sources', sourceSchema)

src/selectors/index.js

@@ -1,18 +1,18 @@
 import { createSelector } from 'reselect'
 import { insetSourceFrom, dateMin, dateMax } from '../common/utilities'
 import { isTimeRangedIn } from './helpers'
-import { FILTER_MODE, NARRATIVE_MODE } from '../common/constants'
+import { ASSOCIATION_MODES } from '../common/constants'
 
 // Input selectors
 export const getEvents = state => state.domain.events
-export const getCategories = state => state.domain.categories
-export const getNarratives = state => state.domain.associations.filter(item => item.mode === NARRATIVE_MODE)
+export const getCategories = state => state.domain.associations.filter(item => item.mode === ASSOCIATION_MODES.CATEGORY)
+export const getNarratives = state => state.domain.associations.filter(item => item.mode === ASSOCIATION_MODES.NARRATIVE)
 export const getActiveNarrative = state => state.app.associations.narrative
 export const getSelected = state => state.app.selected
 export const getSites = state => state.domain.sites
 export const getSources = state => state.domain.sources
 export const getShapes = state => state.domain.shapes
-export const getFilters = state => state.domain.associations.filter(item => item.mode === FILTER_MODE)
+export const getFilters = state => state.domain.associations.filter(item => item.mode === ASSOCIATION_MODES.FILTER)
 export const getNotifications = state => state.domain.notifications
 export const getActiveFilters = state => state.app.associations.filters
 export const getActiveCategories = state => state.app.associations.categories

src/store/initial.js

@@ -12,7 +12,7 @@ const initial = {
   domain: {
     events: [],
     locations: [],
-    categories: [],
+    // categories: [],
     associations: [],
     sources: {},
     sites: [],