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