wip: categories working with timeline

have removed map for the time being, as it was interrupting the timeline render. will return it in next commit

src/js/map/map.js

@@ -13,7 +13,7 @@ export default function(newApp, ui, methods) {
   const domain = {
     locations: [],
     narratives: [],
-    categoryGroups: [],
+    categories: [],
     sites: []
   }
   const app = {
@@ -23,7 +23,7 @@ export default function(newApp, ui, methods) {
   }
 
   const getCategoryGroup = methods.getCategoryGroup;
-  const getCategoryGroupColor = methods.getCategoryGroupColor;
+  const getCategoryColor = methods.getCategoryColor;
   const select = methods.select;
   const groupColors = ui.groupColors;
   const narrativeProps = ui.narratives;
@@ -227,27 +227,27 @@ Stop and start the development process in terminal after you have added your tok
    */
 
   function getLocationEventsDistribution(location) {
-    const eventsHere = {};
-    const categoryGroups = domain.categoryGroups;
-    categoryGroups.sort((a, b) => {
+    // const eventsHere = {};
+    const categories = domain.categories;
+    categories.sort((a, b) => {
       return (+a.slice(-2) > +b.slice(-2));
     });
-    categoryGroups.forEach(group => {
+    categories.forEach(group => {
       eventsHere[group] = 0
     });
 
-    location.events.forEach((event) => {
-      const group = getCategoryGroup(event.category);
-      eventsHere[group] += 1;
-    });
+    // location.events.forEach((event) => {
+    //   const group = getCategoryGroup(event.category);
+    //   eventsHere[group] += 1;
+    // });
 
     let i = 0;
     const events = [];
 
-    while (i < categoryGroups.length) {
-      let eventsCount = eventsHere[categoryGroups[i]];
-      for (let j = i + 1; j < categoryGroups.length; j++) {
-        eventsCount += eventsHere[categoryGroups[j]];
+    while (i < categories.length) {
+      let eventsCount = eventsHere[categories[i]];
+      for (let j = i + 1; j < categories.length; j++) {
+        eventsCount += eventsHere[categories[j]];
       }
       events.push(eventsCount);
       i++;
@@ -281,7 +281,8 @@ Stop and start the development process in terminal after you have added your tok
         select(location.events);
       });
 
-    const eventsDom = g.selectAll('.location').selectAll('.location-event-marker')
+    const eventsDom = g.selectAll('.location')
+      .selectAll('.location-event-marker')
       .data((d, i) => getLocationEventsDistribution(domain.locations[i]),
         (d, i) => 'location-' + i);
 
@@ -298,7 +299,7 @@ Stop and start the development process in terminal after you have added your tok
     eventsDom
       .enter().append('circle')
       .attr('class', 'location-event-marker')
-      .style('fill', (d, i) => groupColors[domain.categoryGroups[i]])
+      .style('fill', (d, i) => groupColors[domain.categories[i]])
       .transition()
       .duration(500)
       .attr('r', d => (d) ? Math.sqrt(16 * d) + 3 : 0);
@@ -391,7 +392,7 @@ Stop and start the development process in terminal after you have added your tok
     if (hash(domain) !== hash(newDomain)) {
       domain.locations = newDomain.locations;
       domain.narratives = newDomain.narratives;
-      domain.categoryGroups = newDomain.categoryGroups;
+      domain.categories = newDomain.categories;
       domain.sites = newDomain.sites;
       renderDomain();
     }

src/js/timeline/timeline.js

@@ -50,22 +50,15 @@ export default function(app, ui) {
       active: false
     },
   ];
-
   let events = [];
-  let categoryGroups = [];
+  let categories = [];
   let selected = [];
   let timerange = app.timerange;
 
   const timeFilter = app.filter;
   const select = app.select;
   const getCategoryLabel = app.getCategoryLabel;
-  const getCategoryGroupColor = app.getCategoryGroupColor;
-  const getCategoryGroup = app.getCategoryGroup;
-
-  // Play functions
-  window.playInterval;
-  let isPlaying = false;
-  const playDuration = 1000;
+  const getCategoryColor = app.getCategoryColor;
 
   // Drag behavior
   let dragPos0;
@@ -93,14 +86,15 @@ export default function(app, ui) {
     .domain(timerange)
     .range([mg.l, WIDTH]);
 
-  const groupStep = (106 - 30) / categoryGroups.length;
-  const groupYs = new Array(categoryGroups.length);
+  // calculate group step between categories
+  const groupStep = (106 - 30) / categories.length;
+  const groupYs = new Array(categories.length);
   groupYs.map((g, i) => {
     return 30 + i * groupStep;
   });
 
   scale.y = d3.scaleOrdinal()
-    .domain(categoryGroups)
+    .domain(categories)
     .range(groupYs);
 
   /**
@@ -292,7 +286,7 @@ export default function(app, ui) {
    * @param {object} eventPoint data object
    */
   function getEventPointFillColor(eventPoint) {
-    return getCategoryGroupColor(eventPoint.category);
+    return getCategoryColor(eventPoint.category);
   }
 
   /**
@@ -301,10 +295,10 @@ export default function(app, ui) {
    */
   function getAllEventsAtOnce(eventPoint) {
     const timestamp = eventPoint.timestamp;
-    const categoryGroup = getCategoryGroup(eventPoint.category);
+    const categoryGroup = eventPoint.category;
     return events.filter(event => {
       return (event.timestamp === timestamp &&
-        categoryGroup === getCategoryGroup(event.category))
+        categoryGroup === event.category)
     }).map(event => event.id);
   }
 
@@ -313,7 +307,7 @@ export default function(app, ui) {
    * @param {object} eventPoint: regular eventPoint data
    */
   function getEventY(eventPoint) {
-    const yGroup = getCategoryGroup(eventPoint.category);
+    const yGroup = eventPoint.category;
     return scale.y(yGroup);
   }
 
@@ -370,7 +364,7 @@ export default function(app, ui) {
 
   /**
    * Shift time range by moving forward or backwards
-   * @param {Stirng} direction: 'forward' / 'backwards'
+   * @param {String} direction: 'forward' / 'backwards'
    */
   function moveTime(direction) {
     select();
@@ -597,7 +591,6 @@ export default function(app, ui) {
    * @param {Object} app: Redux state app subtree
    */
   function updateAxis(domain) {
-    console.log(domain)
     const categories = domain.categories
     const groupStep = (106 - 30) / categories.length;
     let groupYs = Array.apply(null, Array(categories.length));