diff --git a/src/components/Dashboard.jsx b/src/components/Dashboard.jsx
index 7f20417..ee8fac7 100644
--- a/src/components/Dashboard.jsx
+++ b/src/components/Dashboard.jsx
@@ -25,9 +25,6 @@ class Dashboard extends React.Component {
this.handleViewSource = this.handleViewSource.bind(this)
this.handleHighlight = this.handleHighlight.bind(this);
this.handleSelect = this.handleSelect.bind(this);
- this.handleSelectNarrative = this.handleSelectNarrative.bind(this);
- this.handleTagFilter = this.handleTagFilter.bind(this);
- this.updateTimerange = this.updateTimerange.bind(this);
this.getCategoryColor = this.getCategoryColor.bind(this);
this.eventsById = {}
@@ -63,18 +60,6 @@ class Dashboard extends React.Component {
}
}
- handleSelectNarrative(narrative) {
- this.props.actions.updateNarrative(narrative);
- }
-
- handleTagFilter(tag) {
- this.props.actions.updateTagFilters(tag);
- }
-
- updateTimerange(timeRange) {
- this.props.actions.updateTimeRange(timeRange);
- }
-
getCategoryColor(category='other') {
return this.props.ui.style.categories[category] || this.props.ui.style.categories['other']
}
@@ -90,30 +75,32 @@ class Dashboard extends React.Component {
this.getCategoryColor(category)
}}
/>
byId.hasOwnProperty(e.id))
- if (eventsInNarrative.length <= 0) {
- styleProps = {
- ...styleProps,
- fillOpacity: 0.1
- }
- }
+ // TODO: logic to display narratives in Map
+ // const { byId } = this.props.narrative
+ // const eventsInNarrative = events.filter(e => byId.hasOwnProperty(e.id))
+ // if (eventsInNarrative.length <= 0) {
+ // styleProps = {
+ // ...styleProps,
+ // fillOpacity: 0.1
+ // }
+ // }
}
return (
diff --git a/src/components/MapNarratives.jsx b/src/components/MapNarratives.jsx
index 2c9d777..bbd62ad 100644
--- a/src/components/MapNarratives.jsx
+++ b/src/components/MapNarratives.jsx
@@ -74,13 +74,15 @@ class MapNarratives extends React.Component {
}
renderNarrative(n) {
- const steps = n.steps.slice(0, n.steps.length - 1);
-
- return (
-
- {steps.map((s, idx) => this.renderNarrativeStep(n.steps, s, idx, n))}
-
- )
+ // TODO: representation for narrative lines
+ // const steps = n.steps.slice(0, n.steps.length - 1);
+ //
+ // return (
+ //
+ // {steps.map((s, idx) => this.renderNarrativeStep(n.steps, s, idx, n))}
+ //
+ // )
+ return null
}
render() {
diff --git a/src/components/NarrativeCard.js b/src/components/NarrativeCard.js
index 4526164..e52ac5f 100644
--- a/src/components/NarrativeCard.js
+++ b/src/components/NarrativeCard.js
@@ -56,11 +56,15 @@ class NarrativeCard extends React.Component {
}
render() {
+ // no display if no narrative
if (!this.props.narrative) return null
+ console.log(this.props.narrative)
const { steps, current } = this.props.narrative
+
if (steps[current]) {
const step = steps[current];
+ console.log('here')
return (
diff --git a/src/components/Toolbar.jsx b/src/components/Toolbar.jsx
index d6ef534..cb3b3da 100644
--- a/src/components/Toolbar.jsx
+++ b/src/components/Toolbar.jsx
@@ -5,7 +5,7 @@ import * as selectors from '../selectors'
import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
import Search from './Search.jsx';
import TagListPanel from './TagListPanel.jsx';
-import ToolbarBottomActions from './ToolbarBottomActions.jsx';
+// import ToolbarBottomActions from './ToolbarBottomActions.jsx';
import copy from '../js/data/copy.json';
import { trimAndEllipse } from '../js/utilities.js';
@@ -46,8 +46,8 @@ class Toolbar extends React.Component {
}
goToNarrative(narrative) {
- this.selectTab(-1) // set all unselected
- this.props.onSelectNarrative(narrative);
+ this.selectTab(-1) // set all unselected within this component
+ this.props.methods.onSelectNarrative(narrative);
}
renderToolbarNarrativePanel() {
@@ -112,9 +112,7 @@ class Toolbar extends React.Component {
{this.renderToolbarTab(0, 'Focus stories')}
{this.renderToolbarTab(1, 'Explore freely')}
-
+ {/* */}
)
}
@@ -161,9 +159,7 @@ class Toolbar extends React.Component {
{this.renderToolbarTab(0, 'Narratives')}
{(isTags) ? this.renderToolbarTab(1, 'Explore by tag') : ''}
-
+ {/* */}
)
}
diff --git a/src/js/utilities.js b/src/js/utilities.js
index 0da7f7b..2c4b3c6 100644
--- a/src/js/utilities.js
+++ b/src/js/utilities.js
@@ -73,6 +73,13 @@ export function formatter(datetime) {
return d3.timeFormat("%d %b, %H:%M")(datetime);
}
+export const parseTimestamp = ts => d3.timeParse("%Y-%m-%dT%H:%M:%S")(ts);
+
+export function compareTimestamp (a, b) {
+ return (parseTimestamp(a.timestamp) > parseTimestamp(b.timestamp));
+}
+
+
/**
* Debugging function: put in place of a mapStateToProps function to
* view that source modal by default
diff --git a/src/reducers/app.js b/src/reducers/app.js
index 3725fce..0b37e77 100644
--- a/src/reducers/app.js
+++ b/src/reducers/app.js
@@ -33,11 +33,11 @@ function updateSelected(appState, action) {
}
function updateNarrative(appState, action) {
- console.log(action.narrative)
return {
...appState,
narrative: action.narrative
}
+
// if (action.narrative === null) {
// console.log(action.narrative)
// return Object.assign({}, appState, {
diff --git a/src/selectors/index.js b/src/selectors/index.js
index 0ef170d..5d7ac87 100644
--- a/src/selectors/index.js
+++ b/src/selectors/index.js
@@ -1,4 +1,5 @@
import { createSelector} from 'reselect'
+import { parseTimestamp, compareTimestamp } from '../js/utilities'
// Input selectors
export const getEvents = state => state.domain.events;
@@ -22,7 +23,6 @@ export const getTimeRange = state => state.app.filters.timerange;
/**
* Some handy helpers
*/
-const parseTimestamp = ts => d3.timeParse("%Y-%m-%dT%H:%M:%S")(ts);
/**
* Given an event and all tags,
@@ -89,40 +89,45 @@ export const selectEvents = createSelector(
*/
export const selectNarratives = createSelector(
[getEvents, getNarratives, getTagsFilter, getTimeRange],
- (events, narrativeMetadata, tagFilters, timeRange) => {
+ (events, narrativesMeta, tagFilters, timeRange) => {
const narratives = {};
- events.forEach((evt) => {
+ const narrativeSkeleton = id => ({ id, steps: [] })
+
+ /* populate narratives dict with events */
+ events.forEach(evt => {
const isTagged = isTaggedIn(evt, tagFilters) || isNoTags(tagFilters);
const isTimeRanged = isTimeRangedIn(evt, timeRange);
const isInNarrative = evt.narratives.length > 0;
- evt.narratives.map(narrative => {
- if (!narratives[narrative]) {
- narratives[narrative] = { id: narrative, steps: [], byId: {} };
- }
+ evt.narratives.forEach(narrative => {
+ // initialise
+ if (!narratives[narrative])
+ narratives[narrative] = narrativeSkeleton(narrative)
- if (isInNarrative) {
- narratives[narrative].steps.push(evt);
- narratives[narrative].byId[evt.id] = { next: null, prev: null };
- }
+ // add evt to steps
+ if (isInNarrative)
+ narratives[narrative].steps.push(evt)
})
});
- Object.keys(narratives).forEach((key) => {
+
+ /* sort steps by time */
+ Object.keys(narratives).forEach(key => {
const steps = narratives[key].steps;
- steps.sort((a, b) => {
- return (parseTimestamp(a.timestamp) > parseTimestamp(b.timestamp));
- });
+ steps.sort(compareTimestamp);
- steps.forEach((step, i) => {
- narratives[key].byId[step.id].next = (i < steps.length - 2) ? steps[i + 1] : null;
- narratives[key].byId[step.id].prev = (i > 0) ? steps[i - 1] : null;
- });
+ // steps.forEach((step, i) => {
+ // narratives[key].byId[step.id].next = (i < steps.length - 2) ? steps[i + 1] : null;
+ // narratives[key].byId[step.id].prev = (i > 0) ? steps[i - 1] : null;
+ // });
- if (narrativeMetadata.find(n => n.id === key)) {
- narratives[key] = Object.assign(narrativeMetadata.find(n => n.id === key), narratives[key]);
+ if (narrativesMeta.find(n => n.id === key)) {
+ narratives[key] = {
+ ...narrativesMeta.find(n => n.id === key),
+ ...narratives[key]
+ }
}
});