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/components/Card.jsx

@@ -33,12 +33,6 @@ class Card extends React.Component {
     });
   }
 
-  getCategoryColorClass(category) {
-    if (category)
-      return this.props.getCategoryGroup(category);
-    return 'other';
-  }
-
   makeTimelabel(timestamp) {
     if (timestamp === null) return null;
     const parsedTimestamp = this.props.tools.parser(timestamp);
@@ -48,8 +42,8 @@ class Card extends React.Component {
 
   renderCategory() {
     const categoryTitle = copy[this.props.language].cardstack.category;
-    const colorType = this.getCategoryColorClass(this.props.event.category);
-    const categoryLabel = this.props.getCategoryLabel(this.props.event.category);
+    const colorType = this.props.event.category || 'other';
+    const categoryLabel = this.props.event.category;
 
     return (
       <CardCategory

src/components/CardStack.jsx

@@ -1,4 +1,7 @@
 import React from 'react';
+import { connect } from 'react-redux'
+import * as selectors from '../selectors'
+
 import Card from './Card.jsx';
 import copy from '../js/data/copy.json';
 import {
@@ -90,4 +93,14 @@ class CardStack extends React.Component {
   }
 }
 
-export default CardStack;
+function mapStateToProps(state) {
+  return {
+    selected: state.app.selected,
+    language: state.app.selected,
+    tools: state.ui.tools,
+    isCardstack: state.ui.flags.isCardstack,
+    isLoading: state.ui.flags.isFetchingEvents
+  }
+}
+
+export default connect(mapStateToProps)(CardStack)

src/components/Dashboard.jsx

@@ -113,15 +113,13 @@ class Dashboard extends React.Component {
     return null;
   }
 
-  render() {
-    return (
-      <div>
+/***
         <Viewport
           domain={{
             locations: this.props.domain.locations,
             narratives: this.props.domain.narratives,
             sites: this.props.domain.sites,
-            categoryGroups: this.props.domain.categoryGroups
+            categories: this.props.domain.categories
           }}
 
           app={{
@@ -140,30 +138,21 @@ class Dashboard extends React.Component {
           methods={{
             select: this.handleSelect,
             highlight: this.handleHighlight,
-            getCategoryGroup: category => this.getCategoryGroup(category),
-            getCategoryGroupColor: category => this.getCategoryGroupColor(category)
+            // getCategoryGroup: category => this.getCategoryGroup(category),
+            getCategoryColor: category => this.getCategoryColor(category)
           }}
         />
-        <Toolbar
-          tags={this.props.domain.tags}
-          categories={this.props.domain.categories}
-          language={this.props.app.language}
-          tagFilters={this.props.app.filters.tags}
-          categoryFilter={this.props.app.filters.categories}
-          viewFilters={this.props.app.filters.views}
-          features={this.props.app.features}
+***/
 
+  render() {
+    return (
+      <div>
+        <Toolbar
           filter={this.handleTagFilter}
           toggle={ (key) => this.handleToggle(key) }
           actions={this.props.actions}
         />
         <CardStack
-          selected={this.props.app.selected}
-          language={this.props.app.language}
-          tools={this.props.ui.tools}
-          isCardstack={this.props.ui.flags.isCardstack}
-          isLoading={this.props.ui.flags.isFetchingEvents}
-
           select={this.handleSelect}
           highlight={this.handleHighlight}
           toggle={this.handleToggle}
@@ -171,17 +160,6 @@ class Dashboard extends React.Component {
           getCategoryColor={category => this.getCategoryColor(category)}
         />
         <Timeline
-          events={this.props.domain.events.filter(item => item)}
-          narratives={this.props.domain.narratives}
-          categories={this.props.domain.categories}
-
-          timerange={this.props.app.filters.timerange}
-          selected={this.props.app.selected}
-          language={this.props.app.language}
-
-          tools={this.props.ui.tools}
-          dom={this.props.ui.dom}
-
           select={this.handleSelect}
           filter={this.handleTimeFilter}
           highlight={this.handleHighlight}
@@ -207,31 +185,6 @@ class Dashboard extends React.Component {
   }
 }
 
-function mapStateToProps(state) {
-  return Object.assign({}, state, {
-    domain: Object.assign({}, state.domain, {
-      // These items are affected by app selectionFilters
-      events: selectors.selectEvents(state),
-      locations: selectors.selectLocations(state),
-      categories: selectors.selectCategories(state),
-      narratives: selectors.selectNarratives(state),
-
-      // These items are not affected by selectionFilters
-      sites: selectors.getSites(state),
-      tags: selectors.getTagTree(state),
-      notifications: selectors.getNotifications(state)
-    }),
-    app: Object.assign({}, state.app, {
-      error: state.app.error,
-      filters: Object.assign({}, state.app.filters, {
-        timerange: selectors.getTimeRange(state),
-        tags: selectors.selectTagList(state)
-      })
-    }),
-    ui: state.ui
-  });
-}
-
 function mapDispatchToProps(dispatch) {
   return {
     actions: bindActionCreators(actions, dispatch)
@@ -239,6 +192,6 @@ function mapDispatchToProps(dispatch) {
 }
 
 export default connect(
-  mapStateToProps,
+  state => state,
   mapDispatchToProps,
 )(Dashboard);

src/components/Timeline.jsx

@@ -1,5 +1,8 @@
-import copy from '../js/data/copy.json';
 import React from 'react';
+import { connect } from 'react-redux';
+import * as selectors from '../selectors';
+
+import copy from '../js/data/copy.json';
 import TimelineLogic from '../js/timeline/timeline.js';
 
 class Timeline extends React.Component {
@@ -67,6 +70,7 @@ class Timeline extends React.Component {
   }
 
   render() {
+    let events = this.props.events
     const labels_title_lang = copy[this.props.language].timeline.labels_title;
     const info_lang = copy[this.props.language].timeline.info;
     let classes = `timeline-wrapper ${(this.state.isFolded) ? ' folded' : ''}`;
@@ -92,4 +96,18 @@ class Timeline extends React.Component {
   }
 }
 
-export default Timeline;
+function mapStateToProps(state) {
+  return {
+    // events: selectors.selectEvents(state),
+    events: state.domain.events,
+    categories: selectors.selectCategories(state),
+    language: state.app.language,
+    tools: state.ui.tools,
+    timerange: selectors.getTimeRange(state),
+    dom: state.ui.dom,
+    selected: state.app.selected
+  }
+}
+
+export default connect(mapStateToProps)(Timeline);
+// export default Timeline

src/components/Toolbar.jsx

@@ -1,5 +1,7 @@
-
 import React from 'react';
+import { connect } from 'react-redux'
+import * as selectors from '../selectors'
+
 import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
 import Search from './Search.jsx';
 import TagListPanel from './TagListPanel.jsx';
@@ -226,4 +228,16 @@ class Toolbar extends React.Component {
   }
 }
 
-export default Toolbar;
+function mapStateToProps(state) {
+  return {
+    tags: selectors.getTagTree(state),
+    categories: selectors.selectCategories(state),
+    language: state.app.language,
+    tagFilters: selectors.selectTagList(state),
+    categoryFilter: state.app.filters.categories,
+    viewFilters: state.app.filters.views,
+    features: state.app.features
+  }
+}
+
+export default connect(mapStateToProps)(Toolbar)

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

src/reducers/schema/categorySchema.js

@@ -2,11 +2,7 @@ import Joi from 'joi';
 
 const categorySchema = Joi.object().keys({
   category:         Joi.string().required(),
-  category_label:   Joi.string().allow('').required(),
-  group:            Joi.string(),
-  group_label:      Joi.string(),
+  description:      Joi.string(),
 });
 
-const optionalSchema = categorySchema.optionalKeys('group', 'group_label');
-
 export default categorySchema;

src/store/initial.js

@@ -31,7 +31,7 @@ const initial = {
     filters: {
       timerange: [
           d3.timeParse("%Y-%m-%dT%H:%M:%S")("2014-08-22T12:00:00"),
-          d3.timeParse("%Y-%m-%dT%H:%M:%S")("2014-08-27T12:00:00")
+          d3.timeParse("%Y-%m-%dT%H:%M:%S")("2017-08-27T12:00:00")
       ],
       tags: [],
       categories: [],