make USE_CATEGORIES optional

src/components/Card.jsx

@@ -145,12 +145,12 @@ class Card extends React.Component {
   }
 
   renderCaret () {
-    return (
+    return this.props.features.USE_SOURCES ? (
       <CardCaret
         toggle={() => this.toggle()}
         isOpen={this.state.isOpen}
       />
-    )
+    ) : null
   }
 
   render () {

src/components/CardStack.jsx

@@ -73,6 +73,7 @@ class CardStack extends React.Component {
         onViewSource={this.props.onViewSource}
         onHighlight={this.props.onHighlight}
         onSelect={this.props.onSelect}
+        features={this.props.features}
       />)
     })
   }
@@ -176,7 +177,8 @@ function mapStateToProps (state) {
     sourceError: state.app.errors.source,
     language: state.app.language,
     isCardstack: state.app.flags.isCardstack,
-    isLoading: state.app.flags.isFetchingSources
+    isLoading: state.app.flags.isFetchingSources,
+    features: state.features
   }
 }
 

src/components/Layout.js

@@ -16,6 +16,7 @@ import Notification from './Notification.jsx'
 import StaticPage from './StaticPage'
 import TemplateCover from './TemplateCover'
 
+import colors from '../common/global'
 import { binarySearch } from '../common/utilities'
 import { isMobile } from 'react-device-detect'
 
@@ -87,6 +88,8 @@ class Dashboard extends React.Component {
   }
 
   getCategoryColor (category) {
+    if (!this.props.features.USE_CATEGORIES) { return colors.fallbackEventColor }
+
     const cat = this.props.ui.style.categories[category]
     if (cat) {
       return cat
@@ -168,7 +171,7 @@ class Dashboard extends React.Component {
           methods={{
             onSelect: ev => this.handleSelect(ev, 0),
             onUpdateTimerange: actions.updateTimeRange,
-            getCategoryColor: category => this.getCategoryColor(category)
+            getCategoryColor: this.getCategoryColor
           }}
         />
         <CardStack
@@ -177,7 +180,7 @@ class Dashboard extends React.Component {
           onHighlight={this.handleHighlight}
           onToggleCardstack={() => actions.updateSelected([])}
           getNarrativeLinks={event => this.getNarrativeLinks(event)}
-          getCategoryColor={category => this.getCategoryColor(category)}
+          getCategoryColor={this.getCategoryColor}
         />
         <NarrativeControls
           narrative={app.narrative ? {

src/components/Timeline.jsx

@@ -51,6 +51,7 @@ class Timeline extends React.Component {
 
     if ((hash(nextProps.domain.categories) !== hash(this.props.domain.categories)) || hash(nextProps.dimensions) !== hash(this.props.dimensions)) {
       const { trackHeight, marginTop } = nextProps.dimensions
+      console.log(nextProps.domain.categories)
       this.setState({
         scaleY: this.makeScaleY(nextProps.domain.categories, trackHeight, marginTop)
       })
@@ -274,9 +275,13 @@ class Timeline extends React.Component {
   }
 
   getY (event) {
-    const { category, project } = event
     const { features, domain } = this.props
-    const { GRAPH_NONLOCATED } = features
+    const { USE_CATEGORIES, GRAPH_NONLOCATED } = features
+
+    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 + sizes.eventDotR
     }
@@ -334,7 +339,7 @@ class Timeline extends React.Component {
               />
               <Categories
                 dims={dims}
-                getCategoryY={this.state.scaleY}
+                getCategoryY={category => this.getY({ category, project: null })}
                 onDragStart={() => { this.onDragStart() }}
                 onDrag={() => { this.onDrag() }}
                 onDragEnd={() => { this.onDragEnd() }}

src/components/TimelineCategories.jsx

@@ -53,10 +53,13 @@ class TimelineCategories extends React.Component {
 
   render () {
     const { dims } = this.props
+    const categories = this.props.features.USE_CATEGORIES
+      ? this.props.categories.map((cat, idx) => this.renderCategory(cat, idx))
+      : this.renderCategory('Events', 0)
 
     return (
       <g class='yAxis'>
-        {this.props.categories.map((cat, idx) => this.renderCategory(cat, idx))}
+        {categories}
         <rect
           ref={this.grabRef}
           class='drag-grabber'