Bug with graph nonlocated and getY function; need to refactor toolbar so that it selects the categories on the timeline

src/components/Timeline.jsx

@@ -78,7 +78,7 @@ 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))
+      categories = categories.filter(cat => !features.GRAPH_NONLOCATED.categories.includes(cat.id))
     }
     const catHeight = trackHeight / (categories.length)
     const shiftUp = trackHeight / (categories.length) / 2
@@ -269,17 +269,28 @@ class Timeline extends React.Component {
 
   getY (event) {
     const { features, domain } = this.props
-    const { USE_CATEGORIES, GRAPH_NONLOCATED } = features
+    const { categories } = domain
 
-    if (!USE_CATEGORIES) { return this.state.dims.trackHeight / 2 }
+    const categoriesExist = categories && categories.length > 0
+
+    const { GRAPH_NONLOCATED } = features
+
+    if (!categoriesExist) { return this.state.dims.trackHeight / 2 }
+
+    // const eventCategories = event.associations.reduce((acc, a) => {
+    //   const foundCategory = categories.find(cat => cat.id === a)
+    //   if (foundCategory) acc.push(foundCategory)
+
+    //   return acc
+    // }, [])
 
     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)
   }
 
@@ -402,6 +413,7 @@ function mapStateToProps (state) {
       narratives: state.domain.narratives
     },
     app: {
+      activeCategories: selectors.getActiveCategories(state),
       selected: state.app.selected,
       language: state.app.language,
       timeline: state.app.timeline,

src/components/Toolbar/CategoriesListPanel.js

@@ -13,14 +13,14 @@ export default ({
       <div>
         {categories.map(cat => {
           return (<li
-            key={cat.category.replace(/ /g, '_')}
+            key={cat.id.replace(/ /g, '_')}
             className={'filter-filter active'}
             style={{ marginLeft: '20px' }}
           >
             <Checkbox
-              label={cat.category}
-              isActive={activeCategories.includes(cat.category)}
-              onClickCheckbox={() => onCategoryFilter(cat.category)}
+              label={cat.id}
+              isActive={activeCategories.includes(cat.id)}
+              onClickCheckbox={() => onCategoryFilter(cat.id)}
             />
           </li>)
         })}

src/components/presentational/Timeline/Events.js

@@ -81,8 +81,8 @@ const TimelineEvents = ({
         return null
       }
     }
-
     const isDot = (!!event.location && !!event.longitude) || (features.GRAPH_NONLOCATED && event.projectOffset !== -1)
+
     let renderShape = isDot ? renderDot : renderBar
     if (event.shape) {
       if (event.shape === 'bar') {

src/reducers/app.js

@@ -113,13 +113,14 @@ function toggleFilter (appState, action) {
   if (!(action.value instanceof Array)) {
     action.value = [action.value]
   }
+  const { filter: associationType } = action
 
-  let newFilters = appState.associations.filters.slice(0)
+  let newAssociations = appState.associations[associationType].slice(0)
   action.value.forEach(vl => {
-    if (newFilters.includes(vl)) {
-      newFilters = newFilters.filter(s => s !== vl)
+    if (newAssociations.includes(vl)) {
+      newAssociations = newAssociations.filter(s => s !== vl)
     } else {
-      newFilters.push(vl)
+      newAssociations.push(vl)
     }
   })
 
@@ -127,7 +128,7 @@ function toggleFilter (appState, action) {
     ...appState,
     associations: {
       ...appState.associations,
-      filters: newFilters
+      [associationType]: newAssociations
     }
   }
 }

src/reducers/validate/eventSchema.js

@@ -23,7 +23,7 @@ function createEventSchema (custom) {
     type: Joi.string().allow(''),
     category: Joi.string().allow(''),
     category_full: Joi.string().allow(''),
-    associations: Joi.array(),
+    associations: Joi.array().required().default([]),
     sources: Joi.array(),
     comments: Joi.string().allow(''),
     time_display: Joi.string().allow(''),

src/selectors/index.js

@@ -55,7 +55,11 @@ export const selectEvents = createSelector(
           .some(s => s)
       ) || activeFilters.length === 0
       const isActiveFilter = isMatchingFilter || activeFilters.length === 0
-      const isActiveCategory = activeCategories.includes(event.category) || activeCategories.length === 0
+      const isActiveCategory = (event.associations &&
+        event.associations.map(association =>
+          activeCategories.includes(association))
+          .some(s => s)
+      ) || activeCategories.length === 0
       let isActiveTime = isTimeRangedIn(event, timeRange)
       isActiveTime = features.GRAPH_NONLOCATED
         ? ((!event.latitude && !event.longitude) || isActiveTime)