From e9bd136082f93de1d53d67e421c610a1b482ca3b Mon Sep 17 00:00:00 2001
From: Lachie Kermode <lachiekermode@gmail.com>
Date: Fri, 30 Nov 2018 12:17:13 +0000
Subject: [PATCH 1/8] modify event schema to allow empty location

---
 src/reducers/schema/eventSchema.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/reducers/schema/eventSchema.js b/src/reducers/schema/eventSchema.js
index 3ecc635..5528510 100644
--- a/src/reducers/schema/eventSchema.js
+++ b/src/reducers/schema/eventSchema.js
@@ -6,9 +6,9 @@ const eventSchema = Joi.object().keys({
     date:             Joi.string().required(),
     time:             Joi.string().required(),
     time_precision:   Joi.string().allow(''),
-    location:         Joi.string().allow('').required(),
-    latitude:         Joi.string().required(),
-    longitude:        Joi.string().required(),
+    location:         Joi.string().allow(''),
+    latitude:         Joi.string().allow(''),
+    longitude:        Joi.string().allow(''),
     type:             Joi.string().allow(''),
     category:         Joi.string().required(),
     narrative:        Joi.string().allow(''),

From 5b83a82c35353417084ec1ef95c72e27e2d9a24b Mon Sep 17 00:00:00 2001
From: Lachie Kermode <lachiekermode@gmail.com>
Date: Fri, 30 Nov 2018 18:46:17 +0000
Subject: [PATCH 2/8] wip: categoryGroups -> categories

---
 src/components/Dashboard.jsx | 36 +++++++++++++++---------------------
 src/components/Timeline.jsx  | 16 ++++++----------
 src/js/map/map.js            |  2 +-
 src/js/timeline/timeline.js  | 11 ++++++-----
 src/selectors/index.js       |  2 +-
 src/store/initial.js         | 12 ++++--------
 6 files changed, 33 insertions(+), 46 deletions(-)

diff --git a/src/components/Dashboard.jsx b/src/components/Dashboard.jsx
index cb617a3..0318648 100644
--- a/src/components/Dashboard.jsx
+++ b/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
diff --git a/src/components/Timeline.jsx b/src/components/Timeline.jsx
index 9a2a939..2dfd8d7 100644
--- a/src/components/Timeline.jsx
+++ b/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>);
     });
   }
diff --git a/src/js/map/map.js b/src/js/map/map.js
index d940169..1d42691 100644
--- a/src/js/map/map.js
+++ b/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,
diff --git a/src/js/timeline/timeline.js b/src/js/timeline/timeline.js
index f29b20d..774e483 100644
--- a/src/js/timeline/timeline.js
+++ b/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) {
diff --git a/src/selectors/index.js b/src/selectors/index.js
index 329ff3e..bd1315f 100644
--- a/src/selectors/index.js
+++ b/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);
   }
 );
 
diff --git a/src/store/initial.js b/src/store/initial.js
index a1d5103..78ac9fb 100644
--- a/src/store/initial.js
+++ b/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']

From 5c23c2ae9ae00c2d1e9e39ff93f9de884459a373 Mon Sep 17 00:00:00 2001
From: Unknown <lachlankermode@live.com>
Date: Mon, 3 Dec 2018 10:47:53 +0000
Subject: [PATCH 3/8] 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               | 10 +---
 src/components/CardStack.jsx          | 15 +++++-
 src/components/Dashboard.jsx          | 67 ++++-----------------------
 src/components/Timeline.jsx           | 22 ++++++++-
 src/components/Toolbar.jsx            | 18 ++++++-
 src/js/map/map.js                     | 35 +++++++-------
 src/js/timeline/timeline.js           | 29 +++++-------
 src/reducers/schema/categorySchema.js |  6 +--
 src/store/initial.js                  |  2 +-
 9 files changed, 93 insertions(+), 111 deletions(-)

diff --git a/src/components/Card.jsx b/src/components/Card.jsx
index a7ad401..43fe4eb 100644
--- a/src/components/Card.jsx
+++ b/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
diff --git a/src/components/CardStack.jsx b/src/components/CardStack.jsx
index f5e20b9..efc02f8 100644
--- a/src/components/CardStack.jsx
+++ b/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)
diff --git a/src/components/Dashboard.jsx b/src/components/Dashboard.jsx
index 0318648..160798c 100644
--- a/src/components/Dashboard.jsx
+++ b/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);
diff --git a/src/components/Timeline.jsx b/src/components/Timeline.jsx
index 2dfd8d7..e582bc9 100644
--- a/src/components/Timeline.jsx
+++ b/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
\ No newline at end of file
diff --git a/src/components/Toolbar.jsx b/src/components/Toolbar.jsx
index 368eedd..e7eef11 100644
--- a/src/components/Toolbar.jsx
+++ b/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)
diff --git a/src/js/map/map.js b/src/js/map/map.js
index 1d42691..742b83a 100644
--- a/src/js/map/map.js
+++ b/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();
     }
diff --git a/src/js/timeline/timeline.js b/src/js/timeline/timeline.js
index 774e483..382a90a 100644
--- a/src/js/timeline/timeline.js
+++ b/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));
diff --git a/src/reducers/schema/categorySchema.js b/src/reducers/schema/categorySchema.js
index 4156379..d51b561 100644
--- a/src/reducers/schema/categorySchema.js
+++ b/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;
diff --git a/src/store/initial.js b/src/store/initial.js
index 78ac9fb..a1fac0a 100644
--- a/src/store/initial.js
+++ b/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: [],

From 4f4c80b3a35b494c296610a72447fafa5fc2ea97 Mon Sep 17 00:00:00 2001
From: Unknown <lachlankermode@live.com>
Date: Mon, 3 Dec 2018 12:54:33 +0000
Subject: [PATCH 4/8] categoryGroups removed

---
 src/components/Dashboard.jsx |  8 +++++++
 src/components/Viewport.jsx  | 42 ++++++++++++++++++++++++++++--------
 src/js/map/map.js            | 35 ++++++++++++++----------------
 3 files changed, 57 insertions(+), 28 deletions(-)

diff --git a/src/components/Dashboard.jsx b/src/components/Dashboard.jsx
index 160798c..18462e5 100644
--- a/src/components/Dashboard.jsx
+++ b/src/components/Dashboard.jsx
@@ -147,6 +147,14 @@ class Dashboard extends React.Component {
   render() {
     return (
       <div>
+      <Viewport
+          methods={{
+            select: this.handleSelect,
+            highlight: this.handleHighlight,
+            // getCategoryGroup: category => this.getCategoryGroup(category),
+            getCategoryColor: category => this.getCategoryColor(category)
+          }}
+        />
         <Toolbar
           filter={this.handleTagFilter}
           toggle={ (key) => this.handleToggle(key) }
diff --git a/src/components/Viewport.jsx b/src/components/Viewport.jsx
index 7fd2c47..e886422 100644
--- a/src/components/Viewport.jsx
+++ b/src/components/Viewport.jsx
@@ -1,19 +1,21 @@
-import React from 'react';
-import Map from '../js/map/map.js';
-import { areEqual } from '../js/data/utilities.js';
+import React from 'react'
+import { connect } from 'react-redux'
+import * as selectors from '../selectors'
+import Map from '../js/map/map.js'
+import { areEqual } from '../js/data/utilities.js'
 
 class Viewport extends React.Component {
   constructor(props) {
-    super(props);
+    super(props)
   }
 
   componentDidMount() {
-    this.map = new Map(this.props.app, this.props.ui, this.props.methods);
-    this.map.update(this.props.domain, this.props.app);
+    this.map = new Map(this.props.app, this.props.ui, this.props.methods)
+    this.map.update(this.props.domain, this.props.app)
   }
 
   componentWillReceiveProps(nextProps) {
-    this.map.update(nextProps.domain, nextProps.app);
+    this.map.update(nextProps.domain, nextProps.app)
   }
 
   render() {
@@ -21,8 +23,30 @@ class Viewport extends React.Component {
       <div className='map-wrapper'>
         <div id="map" />
       </div>
-    );
+    )
   }
 }
 
-export default Viewport;
+function mapStateToProps(state) {
+  return {
+    domain: {
+      locations: selectors.selectLocations(state),
+      narratives: selectors.selectNarratives(state),
+      categories: selectors.selectCategories(state),
+      sites: selectors.getSites(state)
+    },
+    app: {
+      views: state.app.filters.views,
+      selected: state.app.selected,
+      highlighted: state.app.highlighted,
+      mapAnchor: state.app.mapAnchor
+    },
+    ui: {
+      dom: state.ui.dom,
+      narratives: state.ui.style.narratives,
+      categories: state.ui.style.narratives
+    }
+  }
+}
+
+export default connect(mapStateToProps)(Viewport)
diff --git a/src/js/map/map.js b/src/js/map/map.js
index 742b83a..2b9e71b 100644
--- a/src/js/map/map.js
+++ b/src/js/map/map.js
@@ -22,10 +22,10 @@ export default function(newApp, ui, methods) {
     views: Object.assign({}, newApp.views),
   }
 
-  const getCategoryGroup = methods.getCategoryGroup;
-  const getCategoryColor = methods.getCategoryColor;
+  // const getCategoryGroup = methods.getCategoryGroup;
+  // const getCategoryColor = methods.getCategoryColor;
   const select = methods.select;
-  const groupColors = ui.groupColors;
+  const categoryColors = ui.categories;
   const narrativeProps = ui.narratives;
 
     // Map Settings
@@ -227,32 +227,30 @@ Stop and start the development process in terminal after you have added your tok
    */
 
   function getLocationEventsDistribution(location) {
-    // const eventsHere = {};
+    const eventCount = {};
     const categories = domain.categories;
-    categories.sort((a, b) => {
-      return (+a.slice(-2) > +b.slice(-2));
-    });
+    // categories.sort((a, b) => {
+    //   return (+a.slice(-2) > +b.slice(-2));
+    // });
     categories.forEach(group => {
-      eventsHere[group] = 0
+      eventCount[group] = 0
     });
 
-    // location.events.forEach((event) => {
-    //   const group = getCategoryGroup(event.category);
-    //   eventsHere[group] += 1;
-    // });
+    location.events.forEach((event) => {;
+      eventCount[event.category] += 1;
+    });
 
     let i = 0;
     const events = [];
 
     while (i < categories.length) {
-      let eventsCount = eventsHere[categories[i]];
+      let _eventsCount = eventCount[categories[i]];
       for (let j = i + 1; j < categories.length; j++) {
-        eventsCount += eventsHere[categories[j]];
+        _eventsCount += eventCount[categories[j]];
       }
-      events.push(eventsCount);
+      events.push(_eventsCount);
       i++;
     }
-
     return events;
   }
 
@@ -283,8 +281,7 @@ Stop and start the development process in terminal after you have added your tok
 
     const eventsDom = g.selectAll('.location')
       .selectAll('.location-event-marker')
-      .data((d, i) => getLocationEventsDistribution(domain.locations[i]),
-        (d, i) => 'location-' + i);
+      .data((d, i) => getLocationEventsDistribution(domain.locations[i]))
 
     eventsDom
       .exit()
@@ -299,7 +296,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.categories[i]])
+      .style('fill', (d, i) => categoryColors[domain.categories[i]])
       .transition()
       .duration(500)
       .attr('r', d => (d) ? Math.sqrt(16 * d) + 3 : 0);

From 1b9f5e6349b110939ec7acf82348f8507e190cdd Mon Sep 17 00:00:00 2001
From: Lachie Kermode <lachiekermode@gmail.com>
Date: Mon, 3 Dec 2018 13:01:36 +0000
Subject: [PATCH 5/8] return loc/lat/long to required

---
 src/reducers/schema/eventSchema.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/reducers/schema/eventSchema.js b/src/reducers/schema/eventSchema.js
index 5528510..9dd4f90 100644
--- a/src/reducers/schema/eventSchema.js
+++ b/src/reducers/schema/eventSchema.js
@@ -6,9 +6,9 @@ const eventSchema = Joi.object().keys({
     date:             Joi.string().required(),
     time:             Joi.string().required(),
     time_precision:   Joi.string().allow(''),
-    location:         Joi.string().allow(''),
-    latitude:         Joi.string().allow(''),
-    longitude:        Joi.string().allow(''),
+    location:         Joi.string().allow('').required(),
+    latitude:         Joi.string().allow('').required(),
+    longitude:        Joi.string().allow('').required(),
     type:             Joi.string().allow(''),
     category:         Joi.string().required(),
     narrative:        Joi.string().allow(''),

From 576aceba35723777a7b4606b109b246d89b2e684 Mon Sep 17 00:00:00 2001
From: Unknown <lachlankermode@live.com>
Date: Mon, 3 Dec 2018 13:06:01 +0000
Subject: [PATCH 6/8] rm comments

---
 src/components/Dashboard.jsx | 43 ------------------------------------
 1 file changed, 43 deletions(-)

diff --git a/src/components/Dashboard.jsx b/src/components/Dashboard.jsx
index 18462e5..19100dc 100644
--- a/src/components/Dashboard.jsx
+++ b/src/components/Dashboard.jsx
@@ -92,58 +92,16 @@ 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';
-  // }
-
   getCategoryColor(category) {
     return this.props.ui.style.categories[category];
   }
 
-  // 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);
     if (narrative) return narrative.byId[event.id];
     return null;
   }
 
-/***
-        <Viewport
-          domain={{
-            locations: this.props.domain.locations,
-            narratives: this.props.domain.narratives,
-            sites: this.props.domain.sites,
-            categories: this.props.domain.categories
-          }}
-
-          app={{
-            views: this.props.app.filters.views,
-            selected: this.props.app.selected,
-            highlighted: this.props.app.highlighted,
-            mapAnchor: this.props.app.mapAnchor,
-          }}
-
-          ui={{
-            dom: this.props.ui.dom,
-            narratives: this.props.ui.style.narratives,
-            groupColors: this.props.ui.style.groupColors
-          }}
-
-          methods={{
-            select: this.handleSelect,
-            highlight: this.handleHighlight,
-            // getCategoryGroup: category => this.getCategoryGroup(category),
-            getCategoryColor: category => this.getCategoryColor(category)
-          }}
-        />
-***/
-
   render() {
     return (
       <div>
@@ -151,7 +109,6 @@ class Dashboard extends React.Component {
           methods={{
             select: this.handleSelect,
             highlight: this.handleHighlight,
-            // getCategoryGroup: category => this.getCategoryGroup(category),
             getCategoryColor: category => this.getCategoryColor(category)
           }}
         />

From 0a6ba78389f9bd51a13642e2448d5dcf2fd738e6 Mon Sep 17 00:00:00 2001
From: Franc Camps-Febrer <francamps@gmail.com>
Date: Mon, 3 Dec 2018 14:43:13 +0000
Subject: [PATCH 7/8] Add color categories correct shade to card

---
 src/components/Card.jsx                       |  4 +++-
 src/components/CardStack.jsx                  |  4 +++-
 src/components/presentational/CardCategory.js |  2 +-
 src/scss/_colors.scss                         | 15 ++++++++++-----
 src/scss/card.scss                            |  6 ------
 src/scss/infopopup.scss                       |  6 ------
 src/store/initial.js                          |  7 +++++--
 7 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/src/components/Card.jsx b/src/components/Card.jsx
index 43fe4eb..cae770c 100644
--- a/src/components/Card.jsx
+++ b/src/components/Card.jsx
@@ -41,8 +41,10 @@ class Card extends React.Component {
   }
 
   renderCategory() {
+    const eventCat = this.props.event.category || 'other';
     const categoryTitle = copy[this.props.language].cardstack.category;
-    const colorType = this.props.event.category || 'other';
+    const colorType = this.props.style.categories[eventCat] || this.props.style.categories['other'];
+    console.log(eventCat, this.props.event.category, this.props.style.categories)
     const categoryLabel = this.props.event.category;
 
     return (
diff --git a/src/components/CardStack.jsx b/src/components/CardStack.jsx
index efc02f8..6520cc0 100644
--- a/src/components/CardStack.jsx
+++ b/src/components/CardStack.jsx
@@ -22,6 +22,7 @@ class CardStack extends React.Component {
             event={event}
             language={this.props.language}
             tools={this.props.tools}
+            style={this.props.style}
             isLoading={this.props.isLoading}
             getNarrativeLinks={this.props.getNarrativeLinks}
             getCategoryGroup={this.props.getCategoryGroup}
@@ -96,8 +97,9 @@ class CardStack extends React.Component {
 function mapStateToProps(state) {
   return {
     selected: state.app.selected,
-    language: state.app.selected,
+    language: state.app.language,
     tools: state.ui.tools,
+    style: state.ui.style,
     isCardstack: state.ui.flags.isCardstack,
     isLoading: state.ui.flags.isFetchingEvents
   }
diff --git a/src/components/presentational/CardCategory.js b/src/components/presentational/CardCategory.js
index a106112..082252c 100644
--- a/src/components/presentational/CardCategory.js
+++ b/src/components/presentational/CardCategory.js
@@ -4,7 +4,7 @@ const CardCategory = ({ categoryTitle, categoryLabel, colorType }) => (
   <div className="event-card-section category">
     <h4>{categoryTitle}</h4>
     <p>
-      <span className={`color-category ${colorType}`}/>
+      <span className='color-category' style={{ background: colorType }}/>
       {categoryLabel}
     </p>
   </div>
diff --git a/src/scss/_colors.scss b/src/scss/_colors.scss
index 62e629a..5b8f0e2 100644
--- a/src/scss/_colors.scss
+++ b/src/scss/_colors.scss
@@ -10,8 +10,13 @@ $midgrey: rgb(44, 44, 44);
 $darkgrey: #232323;
 $black: #000000;
 
-$category_group00: #FF0000;
-$category_group01: #226b22;
-$category_group02: #671f6f;
-$category_group03: #0000bf;
-$category_group04: #d3ce2a;
+// Category colors
+$default:   red;
+$alpha:     #00ff00;
+$beta:      #ff00ff;
+$other:     yellow;
+
+.default { background: $default; }
+.other { background: $other; }
+.alpha { background: $alpha; }
+.beta { background: $beta; }
diff --git a/src/scss/card.scss b/src/scss/card.scss
index 6222ccd..186508a 100644
--- a/src/scss/card.scss
+++ b/src/scss/card.scss
@@ -112,12 +112,6 @@
       border-radius: 20px;
       display: inline-block;
       margin: 0px 5px 0 0;
-
-      &.category_group00 { background: $category_group00; }
-      &.category_group01 { background: $category_group01; }
-      &.category_group02 { background: $category_group02; }
-      &.category_group03 { background: $category_group03; }
-      &.category_group04 { background: $category_group04; }
     }
   }
 
diff --git a/src/scss/infopopup.scss b/src/scss/infopopup.scss
index 7c3d56e..5b75683 100644
--- a/src/scss/infopopup.scss
+++ b/src/scss/infopopup.scss
@@ -53,12 +53,6 @@
           border-radius: 10px;
           display: inline-block;
           margin: 0px 5px 0 0;
-
-          &.category_group00 { background: $category_group00; }
-          &.category_group01 { background: $category_group01; }
-          &.category_group02 { background: $category_group02; }
-          &.category_group03 { background: $category_group03; }
-          &.category_group04 { background: $category_group04; }
         }
       }
     }
diff --git a/src/store/initial.js b/src/store/initial.js
index a1fac0a..42197fc 100644
--- a/src/store/initial.js
+++ b/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")("2017-08-27T12:00:00")
+          d3.timeParse("%Y-%m-%dT%H:%M:%S")("2014-08-27T12:00:00")
       ],
       tags: [],
       categories: [],
@@ -76,7 +76,10 @@ const initial = {
 
       categories: {
         default: 'red',
-        other: "#FF0000"
+        // Add here other categories to differentiate by color, like:
+        alpha: '#00ff00',
+        beta: '#ff0000',
+        other: 'yellow'
       },
 
       narratives: {

From b7c73ab9bd9d2d50e0d8d14d56db48645df718a5 Mon Sep 17 00:00:00 2001
From: Franc Camps-Febrer <francamps@gmail.com>
Date: Mon, 3 Dec 2018 14:50:38 +0000
Subject: [PATCH 8/8] All components use getCategoryColor

---
 src/components/Card.jsx                       | 6 ++----
 src/components/CardStack.jsx                  | 4 +---
 src/components/Dashboard.jsx                  | 4 ++--
 src/components/Viewport.jsx                   | 3 +--
 src/components/presentational/CardCategory.js | 4 ++--
 src/js/map/map.js                             | 8 ++------
 6 files changed, 10 insertions(+), 19 deletions(-)

diff --git a/src/components/Card.jsx b/src/components/Card.jsx
index cae770c..d53bc31 100644
--- a/src/components/Card.jsx
+++ b/src/components/Card.jsx
@@ -41,17 +41,15 @@ class Card extends React.Component {
   }
 
   renderCategory() {
-    const eventCat = this.props.event.category || 'other';
     const categoryTitle = copy[this.props.language].cardstack.category;
-    const colorType = this.props.style.categories[eventCat] || this.props.style.categories['other'];
-    console.log(eventCat, this.props.event.category, this.props.style.categories)
     const categoryLabel = this.props.event.category;
+    const color = this.props.getCategoryColor(this.props.event.category);
 
     return (
       <CardCategory
         categoryTitle={categoryTitle}
         categoryLabel={categoryLabel}
-        colorType={colorType}
+        color={color}
       />
     );
   }
diff --git a/src/components/CardStack.jsx b/src/components/CardStack.jsx
index 6520cc0..84ae9aa 100644
--- a/src/components/CardStack.jsx
+++ b/src/components/CardStack.jsx
@@ -22,11 +22,10 @@ class CardStack extends React.Component {
             event={event}
             language={this.props.language}
             tools={this.props.tools}
-            style={this.props.style}
             isLoading={this.props.isLoading}
             getNarrativeLinks={this.props.getNarrativeLinks}
             getCategoryGroup={this.props.getCategoryGroup}
-            getCategoryGroupColor={this.props.getCategoryGroupColor}
+            getCategoryColor={this.props.getCategoryColor}
             getCategoryLabel={this.props.getCategoryLabel}
             highlight={this.props.highlight}
             select={this.props.select}
@@ -99,7 +98,6 @@ function mapStateToProps(state) {
     selected: state.app.selected,
     language: state.app.language,
     tools: state.ui.tools,
-    style: state.ui.style,
     isCardstack: state.ui.flags.isCardstack,
     isLoading: state.ui.flags.isFetchingEvents
   }
diff --git a/src/components/Dashboard.jsx b/src/components/Dashboard.jsx
index 19100dc..1c6d4bf 100644
--- a/src/components/Dashboard.jsx
+++ b/src/components/Dashboard.jsx
@@ -92,8 +92,8 @@ class Dashboard extends React.Component {
     }
   }
 
-  getCategoryColor(category) {
-    return this.props.ui.style.categories[category];
+  getCategoryColor(category='other') {
+    return this.props.ui.style.categories[category] || this.props.style.categories['other']
   }
 
   getNarrativeLinks(event) {
diff --git a/src/components/Viewport.jsx b/src/components/Viewport.jsx
index e886422..363a652 100644
--- a/src/components/Viewport.jsx
+++ b/src/components/Viewport.jsx
@@ -43,8 +43,7 @@ function mapStateToProps(state) {
     },
     ui: {
       dom: state.ui.dom,
-      narratives: state.ui.style.narratives,
-      categories: state.ui.style.narratives
+      narratives: state.ui.style.narratives
     }
   }
 }
diff --git a/src/components/presentational/CardCategory.js b/src/components/presentational/CardCategory.js
index 082252c..43dd010 100644
--- a/src/components/presentational/CardCategory.js
+++ b/src/components/presentational/CardCategory.js
@@ -1,10 +1,10 @@
 import React from 'react';
 
-const CardCategory = ({ categoryTitle, categoryLabel, colorType }) => (
+const CardCategory = ({ categoryTitle, categoryLabel, color }) => (
   <div className="event-card-section category">
     <h4>{categoryTitle}</h4>
     <p>
-      <span className='color-category' style={{ background: colorType }}/>
+      <span className='color-category' style={{ background: color }}/>
       {categoryLabel}
     </p>
   </div>
diff --git a/src/js/map/map.js b/src/js/map/map.js
index 2b9e71b..d05e555 100644
--- a/src/js/map/map.js
+++ b/src/js/map/map.js
@@ -8,8 +8,6 @@ import 'leaflet-polylinedecorator';
 export default function(newApp, ui, methods) {
   let svg, g, defs;
 
-  let categoryColorGroups = {};
-
   const domain = {
     locations: [],
     narratives: [],
@@ -22,10 +20,8 @@ export default function(newApp, ui, methods) {
     views: Object.assign({}, newApp.views),
   }
 
-  // const getCategoryGroup = methods.getCategoryGroup;
-  // const getCategoryColor = methods.getCategoryColor;
+  const getCategoryColor = methods.getCategoryColor;
   const select = methods.select;
-  const categoryColors = ui.categories;
   const narrativeProps = ui.narratives;
 
     // Map Settings
@@ -296,7 +292,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) => categoryColors[domain.categories[i]])
+      .style('fill', (d, i) => getCategoryColor(domain.categories[i]))
       .transition()
       .duration(500)
       .attr('r', d => (d) ? Math.sqrt(16 * d) + 3 : 0);