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>);
     });
   }

src/js/map/map.js

@@ -195,7 +195,7 @@ Stop and start the development process in terminal after you have added your tok
     unmarkPoint();
     app.selected.forEach(eventPoint => {
       if (isNotNullNorUndefined(eventPoint) && isNotNullNorUndefined(eventPoint.location)) {
-        if (eventPoint.latitude && eventPoint.longitude) {
+        if (eventPoint.latitude && eventPoint.latitude !== "" && eventPoint.longitude && eventPoint.longitude !== "") {
           const location = new L.LatLng(eventPoint.latitude, eventPoint.longitude);
           eventCircleMarkers[eventPoint.id] = L.circleMarker(location, {
             radius: 32,

src/js/timeline/timeline.js

@@ -597,20 +597,21 @@ export default function(app, ui) {
    * @param {Object} app: Redux state app subtree
    */
   function updateAxis(domain) {
-    categoryGroups = domain.categoryGroups
-    const groupStep = (106 - 30) / categoryGroups.length;
-    let groupYs = Array.apply(null, Array(categoryGroups.length));
+    console.log(domain)
+    const categories = domain.categories
+    const groupStep = (106 - 30) / categories.length;
+    let groupYs = Array.apply(null, Array(categories.length));
     groupYs = groupYs.map((g, i) => {
       return 30 + i * groupStep;
     });
 
     scale.y = d3.scaleOrdinal()
-      .domain(categoryGroups)
+      .domain(categories)
       .range(groupYs);
 
     axis.y =
       d3.axisLeft(scale.y)
-        .tickValues(categoryGroups);
+        .tickValues(categories);
   }
 
   function update(domain, app) {

src/selectors/index.js

@@ -151,7 +151,7 @@ export const selectLocations = createSelector(
 export const selectCategories = createSelector(
   [getCategories],
   (categories) => {
-    return Object.values(categories);
+    return categories.map(v => v.category);
   }
 );
 

src/store/initial.js

@@ -72,17 +72,13 @@ const initial = {
         GREEN: "#4FF2F2",//"rgb(0, 158, 86)",
       },
 
-      groupColors: {
-        category_group00: "#FF0000",
-        category_group01: "#226b22",
-        category_group02: "#671f6f",
-        category_group03: "#0000bf",
-        category_group04: "#d3ce2a",
+      palette: d3.schemeCategory10,
+
+      categories: {
+        default: 'red',
         other: "#FF0000"
       },
 
-      palette: d3.schemeCategory10,
-
       narratives: {
         default: {
           style: 'dotted',                  // ['dotted', 'solid']