From 838834e2a9dc5af863b1e9e713636d81c63f5bf7 Mon Sep 17 00:00:00 2001 From: Lachlan Kermode Date: Tue, 4 Dec 2018 10:16:31 +0000 Subject: [PATCH 01/10] :lipstick: --- src/components/Timeline.jsx | 4 +--- src/js/timeline/timeline.js | 16 ++++++++-------- 2 files changed, 9 insertions(+), 11 deletions(-) diff --git a/src/components/Timeline.jsx b/src/components/Timeline.jsx index e582bc9..613b2b6 100644 --- a/src/components/Timeline.jsx +++ b/src/components/Timeline.jsx @@ -98,7 +98,6 @@ class Timeline extends React.Component { function mapStateToProps(state) { return { - // events: selectors.selectEvents(state), events: state.domain.events, categories: selectors.selectCategories(state), language: state.app.language, @@ -109,5 +108,4 @@ function mapStateToProps(state) { } } -export default connect(mapStateToProps)(Timeline); -// export default Timeline \ No newline at end of file +export default connect(mapStateToProps)(Timeline); \ No newline at end of file diff --git a/src/js/timeline/timeline.js b/src/js/timeline/timeline.js index 382a90a..09bfe74 100644 --- a/src/js/timeline/timeline.js +++ b/src/js/timeline/timeline.js @@ -56,7 +56,6 @@ export default function(app, ui) { let timerange = app.timerange; const timeFilter = app.filter; - const select = app.select; const getCategoryLabel = app.getCategoryLabel; const getCategoryColor = app.getCategoryColor; @@ -295,11 +294,10 @@ export default function(app, ui) { */ function getAllEventsAtOnce(eventPoint) { const timestamp = eventPoint.timestamp; - const categoryGroup = eventPoint.category; - return events.filter(event => { - return (event.timestamp === timestamp && - categoryGroup === event.category) - }).map(event => event.id); + const category = eventPoint.category; + return events + .filter(event => (event.timestamp === timestamp && category === event.category)) + .map(event => event.id); } /* @@ -367,7 +365,7 @@ export default function(app, ui) { * @param {String} direction: 'forward' / 'backwards' */ function moveTime(direction) { - select(); + app.select(); const extent = getTimeScaleExtent(); const newCentralTime = d3.timeMinute.offset(scale.x.domain()[0], extent / 2); @@ -479,7 +477,9 @@ export default function(app, ui) { .attr('cx', eventPoint => getEventX(eventPoint)) .attr('cy', eventPoint => getEventY(eventPoint)) .style('fill', eventPoint => getEventPointFillColor(eventPoint)) - .on('click', eventPoint => select(getAllEventsAtOnce(eventPoint))) + .on('click', eventPoint => { + return app.select(getAllEventsAtOnce(eventPoint)) + }) .on('mouseover', handleMouseOver) .on('mouseout', handleMouseOut) .transition() From b1fd81f772bc7d0cffbefa8b9fabad538a851ebe Mon Sep 17 00:00:00 2001 From: Lachlan Kermode Date: Tue, 4 Dec 2018 10:25:12 +0000 Subject: [PATCH 02/10] make events clickable Dashboard.jsx::handleSelect needs some rethinking, though... --- src/components/Dashboard.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Dashboard.jsx b/src/components/Dashboard.jsx index cd6d22b..5a38e57 100644 --- a/src/components/Dashboard.jsx +++ b/src/components/Dashboard.jsx @@ -45,7 +45,7 @@ class Dashboard extends React.Component { handleSelect(selected) { if (selected) { - let eventsToSelect = selected.map(eventId => this.getEventById(eventId)); + let eventsToSelect = selected.map(event => this.getEventById(event.id)); const parser = this.props.ui.tools.parser; eventsToSelect = eventsToSelect.sort((a, b) => { From a47fbd95e2bf86a8ee71879b16b68e6ae887e038 Mon Sep 17 00:00:00 2001 From: Lachlan Kermode Date: Tue, 4 Dec 2018 11:21:31 +0000 Subject: [PATCH 03/10] give timeline constructor a 'methods' arg --- src/components/Dashboard.jsx | 1 + src/components/Timeline.jsx | 9 ++++++--- src/js/timeline/timeline.js | 14 +++++--------- 3 files changed, 12 insertions(+), 12 deletions(-) diff --git a/src/components/Dashboard.jsx b/src/components/Dashboard.jsx index 5a38e57..2a66343 100644 --- a/src/components/Dashboard.jsx +++ b/src/components/Dashboard.jsx @@ -44,6 +44,7 @@ class Dashboard extends React.Component { } handleSelect(selected) { + console.log(selected) if (selected) { let eventsToSelect = selected.map(event => this.getEventById(event.id)); const parser = this.props.ui.tools.parser; diff --git a/src/components/Timeline.jsx b/src/components/Timeline.jsx index 613b2b6..eaf6548 100644 --- a/src/components/Timeline.jsx +++ b/src/components/Timeline.jsx @@ -22,15 +22,18 @@ class Timeline extends React.Component { selected: this.props.selected, language: this.props.language, select: this.props.select, - filter: this.props.filter, - getCategoryColor: this.props.getCategoryColor } const ui = { tools: this.props.tools, dom: this.props.dom } - this.timeline = new TimelineLogic(app, ui); + const methods = { + filter: this.props.filter, + getCategoryColor: this.props.getCategoryColor + } + + this.timeline = new TimelineLogic(app, ui, methods); this.timeline.update(domain, app); this.timeline.render(domain); } diff --git a/src/js/timeline/timeline.js b/src/js/timeline/timeline.js index 09bfe74..ba1d7df 100644 --- a/src/js/timeline/timeline.js +++ b/src/js/timeline/timeline.js @@ -10,7 +10,7 @@ import { import esLocale from '../data/es-MX.json'; import copy from '../data/copy.json'; -export default function(app, ui) { +export default function(app, ui, methods) { d3.timeFormatDefaultLocale(esLocale); const formatterWithYear = ui.tools.formatterWithYear; const parser = ui.tools.parser; @@ -55,10 +55,6 @@ export default function(app, ui) { let selected = []; let timerange = app.timerange; - const timeFilter = app.filter; - const getCategoryLabel = app.getCategoryLabel; - const getCategoryColor = app.getCategoryColor; - // Drag behavior let dragPos0; let transitionDuration = 500; @@ -223,7 +219,7 @@ export default function(app, ui) { }) .on('end', () => { toggleTransition(true); - timeFilter(scale.x.domain()); + methods.filter(scale.x.domain()); }); /* @@ -285,7 +281,7 @@ export default function(app, ui) { * @param {object} eventPoint data object */ function getEventPointFillColor(eventPoint) { - return getCategoryColor(eventPoint.category); + return methods.getCategoryColor(eventPoint.category); } /** @@ -357,7 +353,7 @@ export default function(app, ui) { const domainF = d3.timeMinute.offset(newCentralTime, zoom.duration / 2); scale.x.domain([domain0, domainF]); - timeFilter(scale.x.domain()); + methods.filter(scale.x.domain()); } /** @@ -380,7 +376,7 @@ export default function(app, ui) { } scale.x.domain([domain0, domainF]); - timeFilter(scale.x.domain()); + methods.filter(scale.x.domain()); } function toggleTransition(isTransition) { From 5c026f12d885ab467a727d2d067ea19f3996e5e5 Mon Sep 17 00:00:00 2001 From: Lachlan Kermode Date: Tue, 4 Dec 2018 11:26:21 +0000 Subject: [PATCH 04/10] move zoomLevels to redux --- src/components/Timeline.jsx | 6 +++++- src/js/timeline/timeline.js | 37 +------------------------------------ src/store/initial.js | 35 +++++++++++++++++++++++++++++++++++ 3 files changed, 41 insertions(+), 37 deletions(-) diff --git a/src/components/Timeline.jsx b/src/components/Timeline.jsx index eaf6548..7451109 100644 --- a/src/components/Timeline.jsx +++ b/src/components/Timeline.jsx @@ -8,7 +8,9 @@ import TimelineLogic from '../js/timeline/timeline.js'; class Timeline extends React.Component { constructor(props) { super(props); - this.state = {isFolded: false}; + this.state = { + isFolded: false + }; } componentDidMount() { @@ -18,6 +20,7 @@ class Timeline extends React.Component { categories: this.props.categories } const app = { + zoomLevels: this.props.zoomLevels, timerange: this.props.timerange, selected: this.props.selected, language: this.props.language, @@ -106,6 +109,7 @@ function mapStateToProps(state) { language: state.app.language, tools: state.ui.tools, timerange: selectors.getTimeRange(state), + zoomLevels: state.app.zoomLevels, dom: state.ui.dom, selected: state.app.selected } diff --git a/src/js/timeline/timeline.js b/src/js/timeline/timeline.js index ba1d7df..82340ce 100644 --- a/src/js/timeline/timeline.js +++ b/src/js/timeline/timeline.js @@ -14,42 +14,7 @@ export default function(app, ui, methods) { d3.timeFormatDefaultLocale(esLocale); const formatterWithYear = ui.tools.formatterWithYear; const parser = ui.tools.parser; - const zoomLevels = [{ - label: '3 años', - duration: 1576800, - active: false - }, - { - label: '3 meses', - duration: 129600, - active: false - }, - { - label: '3 días', - duration: 4320, - active: true - }, - { - label: '12 horas', - duration: 720, - active: false - }, - { - label: '2 horas', - duration: 120, - active: false - }, - { - label: '30 min', - duration: 30, - active: false - }, - { - label: '10 min', - duration: 10, - active: false - }, - ]; + const zoomLevels = app.zoomLevels; let events = []; let categories = []; let selected = []; diff --git a/src/store/initial.js b/src/store/initial.js index 42197fc..635721e 100644 --- a/src/store/initial.js +++ b/src/store/initial.js @@ -46,6 +46,41 @@ const initial = { isMobile: (/Mobi/.test(navigator.userAgent)), language: 'en-US', mapAnchor: process.env.MAP_ANCHOR, + zoomLevels: [{ + label: '3 años', + duration: 1576800, + active: false + }, + { + label: '3 meses', + duration: 129600, + active: false + }, + { + label: '3 días', + duration: 4320, + active: true + }, + { + label: '12 horas', + duration: 720, + active: false + }, + { + label: '2 horas', + duration: 120, + active: false + }, + { + label: '30 min', + duration: 30, + active: false + }, + { + label: '10 min', + duration: 10, + active: false + }], features: { USE_TAGS: process.env.features.USE_TAGS, USE_SEARCH: process.env.features.USE_SEARCH From 2edfbb5d1977aa3c5803c7476dc8806a8bec522d Mon Sep 17 00:00:00 2001 From: Lachlan Kermode Date: Tue, 4 Dec 2018 11:28:31 +0000 Subject: [PATCH 05/10] move select to methods arg in timeline --- src/components/Timeline.jsx | 2 +- src/js/timeline/timeline.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Timeline.jsx b/src/components/Timeline.jsx index 7451109..c5dc886 100644 --- a/src/components/Timeline.jsx +++ b/src/components/Timeline.jsx @@ -24,7 +24,6 @@ class Timeline extends React.Component { timerange: this.props.timerange, selected: this.props.selected, language: this.props.language, - select: this.props.select, } const ui = { tools: this.props.tools, @@ -32,6 +31,7 @@ class Timeline extends React.Component { } const methods = { + select: this.props.select, filter: this.props.filter, getCategoryColor: this.props.getCategoryColor } diff --git a/src/js/timeline/timeline.js b/src/js/timeline/timeline.js index 82340ce..3240bce 100644 --- a/src/js/timeline/timeline.js +++ b/src/js/timeline/timeline.js @@ -326,7 +326,7 @@ export default function(app, ui, methods) { * @param {String} direction: 'forward' / 'backwards' */ function moveTime(direction) { - app.select(); + methods.select(); const extent = getTimeScaleExtent(); const newCentralTime = d3.timeMinute.offset(scale.x.domain()[0], extent / 2); @@ -439,7 +439,7 @@ export default function(app, ui, methods) { .attr('cy', eventPoint => getEventY(eventPoint)) .style('fill', eventPoint => getEventPointFillColor(eventPoint)) .on('click', eventPoint => { - return app.select(getAllEventsAtOnce(eventPoint)) + return methods.select(getAllEventsAtOnce(eventPoint)) }) .on('mouseover', handleMouseOver) .on('mouseout', handleMouseOut) From 143fb6df926ce2f7f14a30c8e5c2245ca527a4be Mon Sep 17 00:00:00 2001 From: Lachlan Kermode Date: Tue, 4 Dec 2018 11:31:01 +0000 Subject: [PATCH 06/10] retrieve domain direct from store --- src/components/Timeline.jsx | 58 ++++++++++++++++--------------------- 1 file changed, 25 insertions(+), 33 deletions(-) diff --git a/src/components/Timeline.jsx b/src/components/Timeline.jsx index c5dc886..e380947 100644 --- a/src/components/Timeline.jsx +++ b/src/components/Timeline.jsx @@ -14,40 +14,29 @@ class Timeline extends React.Component { } componentDidMount() { - const domain = { - events: this.props.events, - narratives: this.props.narratives, - categories: this.props.categories - } - const app = { - zoomLevels: this.props.zoomLevels, - timerange: this.props.timerange, - selected: this.props.selected, - language: this.props.language, - } - const ui = { - tools: this.props.tools, - dom: this.props.dom - } + const app = { + zoomLevels: this.props.zoomLevels, + timerange: this.props.timerange, + selected: this.props.selected, + language: this.props.language, + } + const ui = { + tools: this.props.tools, + dom: this.props.dom + } - const methods = { - select: this.props.select, - filter: this.props.filter, - getCategoryColor: this.props.getCategoryColor - } + const methods = { + select: this.props.select, + filter: this.props.filter, + getCategoryColor: this.props.getCategoryColor + } - this.timeline = new TimelineLogic(app, ui, methods); - this.timeline.update(domain, app); - this.timeline.render(domain); + this.timeline = new TimelineLogic(app, ui, methods); + this.timeline.update(this.props.domain, app); + this.timeline.render(this.props.domain); } componentWillReceiveProps(nextProps) { - const domain = { - events: nextProps.events, - narratives: nextProps.narratives, - categories: nextProps.categories - } - const app = { timerange: nextProps.timerange, selected: nextProps.selected, @@ -57,8 +46,8 @@ class Timeline extends React.Component { getCategoryColor: nextProps.getCategoryColor } - this.timeline.update(domain, app); - this.timeline.render(domain); + this.timeline.update(this.props.domain, app); + this.timeline.render(this.props.domain); } onClickArrow() { @@ -104,8 +93,11 @@ class Timeline extends React.Component { function mapStateToProps(state) { return { - events: state.domain.events, - categories: selectors.selectCategories(state), + domain: { + events: state.domain.events, + categories: selectors.selectCategories(state), + narratives: state.domain.narratives + }, language: state.app.language, tools: state.ui.tools, timerange: selectors.getTimeRange(state), From e5affccb8ab3a002374424227364ec17d99a0105 Mon Sep 17 00:00:00 2001 From: Lachlan Kermode Date: Tue, 4 Dec 2018 12:06:04 +0000 Subject: [PATCH 07/10] timeline and map pass same representation for select --- src/components/Dashboard.jsx | 1 - src/js/timeline/timeline.js | 1 - 2 files changed, 2 deletions(-) diff --git a/src/components/Dashboard.jsx b/src/components/Dashboard.jsx index 2a66343..5a38e57 100644 --- a/src/components/Dashboard.jsx +++ b/src/components/Dashboard.jsx @@ -44,7 +44,6 @@ class Dashboard extends React.Component { } handleSelect(selected) { - console.log(selected) if (selected) { let eventsToSelect = selected.map(event => this.getEventById(event.id)); const parser = this.props.ui.tools.parser; diff --git a/src/js/timeline/timeline.js b/src/js/timeline/timeline.js index 3240bce..0aa8e14 100644 --- a/src/js/timeline/timeline.js +++ b/src/js/timeline/timeline.js @@ -258,7 +258,6 @@ export default function(app, ui, methods) { const category = eventPoint.category; return events .filter(event => (event.timestamp === timestamp && category === event.category)) - .map(event => event.id); } /* From 90e6d9ded19dd11cbf52bb4f8bc0b390a0a19f90 Mon Sep 17 00:00:00 2001 From: Lachlan Kermode Date: Tue, 4 Dec 2018 12:23:16 +0000 Subject: [PATCH 08/10] interpolate app from store in Timeline.jsx also rename 'filter' in timeline to avoid confusion --- src/components/Dashboard.jsx | 6 ++--- src/components/Timeline.jsx | 44 ++++++++++++------------------------ src/js/timeline/timeline.js | 6 ++--- 3 files changed, 21 insertions(+), 35 deletions(-) diff --git a/src/components/Dashboard.jsx b/src/components/Dashboard.jsx index 5a38e57..178caf9 100644 --- a/src/components/Dashboard.jsx +++ b/src/components/Dashboard.jsx @@ -21,7 +21,7 @@ class Dashboard extends React.Component { this.handleSelect = this.handleSelect.bind(this); this.handleToggle = this.handleToggle.bind(this); this.handleTagFilter = this.handleTagFilter.bind(this); - this.handleTimeFilter = this.handleTimeFilter.bind(this); + this.updateTimerange = this.updateTimerange.bind(this); this.eventsById = {}; } @@ -79,7 +79,7 @@ class Dashboard extends React.Component { this.props.actions.updateTagFilters(tag); } - handleTimeFilter(timeRange) { + updateTimerange(timeRange) { this.props.actions.updateTimeRange(timeRange); } @@ -134,7 +134,7 @@ class Dashboard extends React.Component { /> this.handleToggle('TOGGLE_CARDSTACK')} getCategoryColor={category => this.getCategoryColor(category)} diff --git a/src/components/Timeline.jsx b/src/components/Timeline.jsx index e380947..2f4a362 100644 --- a/src/components/Timeline.jsx +++ b/src/components/Timeline.jsx @@ -14,12 +14,6 @@ class Timeline extends React.Component { } componentDidMount() { - const app = { - zoomLevels: this.props.zoomLevels, - timerange: this.props.timerange, - selected: this.props.selected, - language: this.props.language, - } const ui = { tools: this.props.tools, dom: this.props.dom @@ -27,27 +21,18 @@ class Timeline extends React.Component { const methods = { select: this.props.select, - filter: this.props.filter, + onUpdateTimerange: this.props.onUpdateTimerange, getCategoryColor: this.props.getCategoryColor } - this.timeline = new TimelineLogic(app, ui, methods); - this.timeline.update(this.props.domain, app); + this.timeline = new TimelineLogic(this.props.app, ui, methods); + this.timeline.update(this.props.domain, this.props.app); this.timeline.render(this.props.domain); } componentWillReceiveProps(nextProps) { - const app = { - timerange: nextProps.timerange, - selected: nextProps.selected, - language: nextProps.language, - select: nextProps.select, - filter: nextProps.filter, - getCategoryColor: nextProps.getCategoryColor - } - - this.timeline.update(this.props.domain, app); - this.timeline.render(this.props.domain); + this.timeline.update(nextProps.domain, nextProps.app); + this.timeline.render(nextProps.domain); } onClickArrow() { @@ -65,12 +50,11 @@ 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; + const labels_title_lang = copy[this.props.app.language].timeline.labels_title; + const info_lang = copy[this.props.app.language].timeline.info; let classes = `timeline-wrapper ${(this.state.isFolded) ? ' folded' : ''}`; - const date0 = this.props.tools.formatterWithYear(this.props.timerange[0]); - const date1 = this.props.tools.formatterWithYear(this.props.timerange[1]); + const date0 = this.props.tools.formatterWithYear(this.props.app.timerange[0]); + const date1 = this.props.tools.formatterWithYear(this.props.app.timerange[1]); return (
@@ -98,12 +82,14 @@ function mapStateToProps(state) { categories: selectors.selectCategories(state), narratives: state.domain.narratives }, - language: state.app.language, + app: { + timerange: selectors.getTimeRange(state), + selected: state.app.selected, + language: state.app.language, + zoomLevels: state.app.zoomLevels + }, tools: state.ui.tools, - timerange: selectors.getTimeRange(state), - zoomLevels: state.app.zoomLevels, dom: state.ui.dom, - selected: state.app.selected } } diff --git a/src/js/timeline/timeline.js b/src/js/timeline/timeline.js index 0aa8e14..552dc47 100644 --- a/src/js/timeline/timeline.js +++ b/src/js/timeline/timeline.js @@ -184,7 +184,7 @@ export default function(app, ui, methods) { }) .on('end', () => { toggleTransition(true); - methods.filter(scale.x.domain()); + methods.onUpdateTimerange(scale.x.domain()); }); /* @@ -317,7 +317,7 @@ export default function(app, ui, methods) { const domainF = d3.timeMinute.offset(newCentralTime, zoom.duration / 2); scale.x.domain([domain0, domainF]); - methods.filter(scale.x.domain()); + methods.onUpdateTimerange(scale.x.domain()); } /** @@ -340,7 +340,7 @@ export default function(app, ui, methods) { } scale.x.domain([domain0, domainF]); - methods.filter(scale.x.domain()); + methods.onUpdateTimerange(scale.x.domain()); } function toggleTransition(isTransition) { From ebb37a845aa4831bc353fd723848c75ea464aab0 Mon Sep 17 00:00:00 2001 From: Lachlan Kermode Date: Tue, 4 Dec 2018 12:26:23 +0000 Subject: [PATCH 09/10] rename other timeline handlers --- src/components/Dashboard.jsx | 6 +++--- src/components/Timeline.jsx | 2 +- src/js/timeline/timeline.js | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/Dashboard.jsx b/src/components/Dashboard.jsx index 178caf9..950fa7e 100644 --- a/src/components/Dashboard.jsx +++ b/src/components/Dashboard.jsx @@ -133,10 +133,10 @@ class Dashboard extends React.Component { getCategoryColor={category => this.getCategoryColor(category)} /> this.handleToggle('TOGGLE_CARDSTACK')} + // onHighlight={this.handleHighlight} + // onToggle={() => this.handleToggle('TOGGLE_CARDSTACK')} getCategoryColor={category => this.getCategoryColor(category)} /> getEventY(eventPoint)) .style('fill', eventPoint => getEventPointFillColor(eventPoint)) .on('click', eventPoint => { - return methods.select(getAllEventsAtOnce(eventPoint)) + return methods.onSelect(getAllEventsAtOnce(eventPoint)) }) .on('mouseover', handleMouseOver) .on('mouseout', handleMouseOut) From 77db0b8b7db3fe39e0b15c277b81dd4296d9cdfa Mon Sep 17 00:00:00 2001 From: Lachlan Kermode Date: Tue, 4 Dec 2018 12:28:40 +0000 Subject: [PATCH 10/10] rename CardStack handlers --- src/components/CardStack.jsx | 6 +++--- src/components/Dashboard.jsx | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/CardStack.jsx b/src/components/CardStack.jsx index 84ae9aa..8408f54 100644 --- a/src/components/CardStack.jsx +++ b/src/components/CardStack.jsx @@ -27,8 +27,8 @@ class CardStack extends React.Component { getCategoryGroup={this.props.getCategoryGroup} getCategoryColor={this.props.getCategoryColor} getCategoryLabel={this.props.getCategoryLabel} - highlight={this.props.highlight} - select={this.props.select} + highlight={this.props.onHighlight} + select={this.props.onSelect} /> ); }); @@ -54,7 +54,7 @@ class CardStack extends React.Component {
this.props.toggle('TOGGLE_CARDSTACK')} + onClick={() => this.props.onToggle('TOGGLE_CARDSTACK')} >

diff --git a/src/components/Dashboard.jsx b/src/components/Dashboard.jsx index 950fa7e..344cc8e 100644 --- a/src/components/Dashboard.jsx +++ b/src/components/Dashboard.jsx @@ -126,9 +126,9 @@ class Dashboard extends React.Component { actions={this.props.actions} /> this.getNarrativeLinks(event)} getCategoryColor={category => this.getCategoryColor(category)} />