wip: categoryGroups -> categories

src/components/Dashboard.jsx

@@ -92,21 +92,20 @@ class Dashboard extends React.Component {
     }
   }
 
-  getCategoryGroup(category) {
-    const cat = this.props.domain.categories.find(t => t.category === category)
-    if (cat) return cat.group;
-    return 'other';
+  // getCategoryGroup(category) {
+  //   const cat = this.props.domain.categories.find(t => t.category === category)
+  //   if (cat) return cat.group;
+  //   return 'other';
+  // }
+
+  getCategoryColor(category) {
+    return this.props.ui.style.categories[category];
   }
 
-  getCategoryGroupColor(category) {
-    const group = this.getCategoryGroup(category);
-    return this.props.ui.style.groupColors[group];
-  }
-
-  getCategoryLabel(category) {
-    const categories = this.props.domain.categories;
-    return categories.find(t => t.category === category).category_label;
-  }
+  // getCategoryLabel(category) {
+  //   const categories = this.props.domain.categories;
+  //   return categories.find(t => t.category === category).category_label;
+  // }
 
   getNarrativeLinks(event) {
     const narrative = this.props.domain.narratives.find(nv => nv.key === event.narrative);
@@ -169,14 +168,12 @@ class Dashboard extends React.Component {
           highlight={this.handleHighlight}
           toggle={this.handleToggle}
           getNarrativeLinks={event => this.getNarrativeLinks(event)}
-          getCategoryGroup={category => this.getCategoryGroup(category)}
-          getCategoryGroupColor={category => this.getCategoryGroupColor(category)}
-          getCategoryLabel={category => this.getCategoryLabel(category)}
+          getCategoryColor={category => this.getCategoryColor(category)}
         />
         <Timeline
           events={this.props.domain.events.filter(item => item)}
           narratives={this.props.domain.narratives}
-          categoryGroups={this.props.domain.categoryGroups}
+          categories={this.props.domain.categories}
 
           timerange={this.props.app.filters.timerange}
           selected={this.props.app.selected}
@@ -189,9 +186,7 @@ class Dashboard extends React.Component {
           filter={this.handleTimeFilter}
           highlight={this.handleHighlight}
           toggle={() => this.handleToggle('TOGGLE_CARDSTACK')}
-          getCategoryGroup={category => this.getCategoryGroup(category)}
-          getCategoryGroupColor={category => this.getCategoryGroupColor(category)}
-          getCategoryLabel={category => this.getCategoryLabel(category)}
+          getCategoryColor={category => this.getCategoryColor(category)}
         />
         <InfoPopUp
           ui={this.props.ui}
@@ -219,7 +214,6 @@ function mapStateToProps(state) {
       events: selectors.selectEvents(state),
       locations: selectors.selectLocations(state),
       categories: selectors.selectCategories(state),
-      categoryGroups: selectors.selectCategoryGroups(state),
       narratives: selectors.selectNarratives(state),
 
       // These items are not affected by selectionFilters

src/components/Timeline.jsx

@@ -12,7 +12,7 @@ class Timeline extends React.Component {
       const domain = {
         events: this.props.events,
         narratives: this.props.narratives,
-        categoryGroups: this.props.categoryGroups
+        categories: this.props.categories
       }
       const app = {
         timerange: this.props.timerange,
@@ -20,9 +20,7 @@ class Timeline extends React.Component {
         language: this.props.language,
         select: this.props.select,
         filter: this.props.filter,
-        getCategoryLabel: this.props.getCategoryLabel,
-        getCategoryGroup: this.props.getCategoryGroup,
-        getCategoryGroupColor: this.props.getCategoryGroupColor
+        getCategoryColor: this.props.getCategoryColor
       }
       const ui = {
         tools: this.props.tools,
@@ -38,7 +36,7 @@ class Timeline extends React.Component {
     const domain = {
       events: nextProps.events,
       narratives: nextProps.narratives,
-      categoryGroups: nextProps.categoryGroups
+      categories: nextProps.categories
     }
 
     const app = {
@@ -47,9 +45,7 @@ class Timeline extends React.Component {
       language: nextProps.language,
       select: nextProps.select,
       filter: nextProps.filter,
-      getCategoryLabel: nextProps.getCategoryLabel,
-      getCategoryGroup: nextProps.getCategoryGroup,
-      getCategoryGroupColor: nextProps.getCategoryGroupColor
+      getCategoryColor: nextProps.getCategoryColor
     }
 
     this.timeline.update(domain, app);
@@ -64,8 +60,8 @@ class Timeline extends React.Component {
 
   renderLabels() {
     const labels = copy[this.props.language].timeline.labels;
-    return this.props.categoryGroups.map((label) => {
-      const groupLen = this.props.categoryGroups.length
+    return this.props.categories.map((label) => {
+      const groupLen = this.props.categories.length
       return (<div className="timeline-label">{label}</div>);
     });
   }