diff --git a/src/components/Dashboard.jsx b/src/components/Dashboard.jsx index 5a6533f..1a46d0c 100644 --- a/src/components/Dashboard.jsx +++ b/src/components/Dashboard.jsx @@ -15,108 +15,111 @@ import Timeline from './Timeline.jsx'; import Notification from './Notification.jsx'; class Dashboard extends React.Component { - constructor(props) { - super(props); + constructor(props) { + super(props); - this.handleHighlight = this.handleHighlight.bind(this); - 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.handleHighlight = this.handleHighlight.bind(this); + this.handleSelect = this.handleSelect.bind(this); + this.handleToggle = this.handleToggle.bind(this); + this.handleTagFilter = this.handleTagFilter.bind(this); + this.handleTimeFilter = this.handleTimeFilter.bind(this); + } + + componentDidMount() { + if (!this.props.app.isMobile) { + this.props.actions.fetchDomain() + .then((domain) => this.props.actions.updateDomain(domain)); } + } - componentDidMount() { - if (!this.props.app.isMobile) { - this.props.actions.fetchDomain() - .then((domain) => this.props.actions.updateDomain(domain)) + handleHighlight(highlighted) { + this.props.actions.updateHighlighted((highlighted) ? highlighted : null); + } + + handleSelect(selected) { + if (selected) { + //let eventsToSelect = selected.map(eventId => this.props.domain.events[eventId]); + const parser = this.props.ui.tools.parser; + + //eventsToSelect = eventsToSelect.sort((a, b) => { + // return parser(a.timestamp) - parser(b.timestamp); + //}); + + //if (eventsToSelect.every(event => (event))) { + // this.props.actions.updateSelected(eventsToSelect); + //} + const enhanceEvent = (ev) => { + return Object.assign({}, ev, this.props.domain.events[ev.id]); } - } - handleHighlight(highlighted) { - this.props.actions.updateHighlighted((highlighted) ? highlighted : null); - } + // Now fetch detail data for each event + // Add transmitter and receiver data for coevents + this.props.actions.fetchEvents(selected) + .then((events) => { + let eventsSelected = events.map(enhanceEvent); - handleSelect(selected) { - if (selected) { - let eventsToSelect = selected.map(eventId => this.props.domain.events[eventId]); - const parser = this.props.ui.tools.parser; - - eventsToSelect = eventsToSelect.sort((a, b) => { - return parser(a.timestamp) - parser(b.timestamp); - }); - - if (eventsToSelect.every(event => (event))) { - this.props.actions.updateSelected(eventsToSelect); - } - - // Now fetch detail data for each event - // Add transmitter and receiver data for coevents - this.props.actions.fetchEvents(selected) - .then((events) => { - let eventsSelected = events.map(ev => { - return Object.assign({}, ev, this.props.domain.events[ev.id]); - }); - - eventsSelected = eventsSelected.sort((a, b) => { - return parser(a.timestamp) - parser(b.timestamp); - }); - - this.props.actions.updateSelected(eventsSelected); + eventsSelected = eventsSelected.sort((a, b) => { + return parser(a.timestamp) - parser(b.timestamp); }); - } else { + + this.props.actions.updateSelected(eventsSelected); + }); + } else { + this.props.actions.updateSelected([]); + } + } + + handleTagFilter(tag) { + this.props.actions.updateTagFilters(tag); + } + + handleTimeFilter(timeRange) { + this.props.actions.updateTimeRange(timeRange); + } + + handleToggle( key ) { + switch( key ) { + case 'TOGGLE_CARDSTACK': { this.props.actions.updateSelected([]); + break; + } + case 'TOGGLE_INFOPOPUP': { + this.props.actions.toggleInfoPopup(); + break; + } + case 'TOGGLE_NOTIFICATIONS': { + this.props.actions.toggleNotifications(); + break; } } + } - handleTagFilter(tag) { - this.props.actions.updateTagFilters(tag); - } + getCategoryGroup(category) { + const cat = this.props.domain.categories.find(t => t.category === category) + if (cat) return cat.group; + return 'other'; + } - handleTimeFilter(timeRange) { - this.props.actions.updateTimeRange(timeRange); - } + getCategoryGroupColor(category) { + const group = this.getCategoryGroup(category); + return this.props.ui.style.groupColors[group]; + } - handleToggle( key ) { - switch( key ) { - case 'TOGGLE_CARDSTACK': { - this.props.actions.updateSelected([]); - break; - } - case 'TOGGLE_INFOPOPUP': { - this.props.actions.toggleInfoPopup(); - break; - } - case 'TOGGLE_NOTIFICATIONS': { - this.props.actions.toggleNotifications(); - break; - } - } - } + getCategoryLabel(category) { + const categories = this.props.domain.categories; + return categories.find(t => t.category === category).category_label; + } - getCategoryGroup(category) { - const cat = this.props.domain.categories.find(t => t.category === category) - if (cat) return cat.group; - return 'other'; - } + getNarrativeLinks(event) { + const narrative = this.props.domain.narratives.find(nv => nv.key === event.narrative); + if (narrative) return narrative.byId[event.id]; + return null; + } - 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; - } - - getNarrativeLinks(event) { - const narrative = this.props.domain.narratives.find(nv => nv.key === event.narrative); - if (narrative) return narrative.byId[event.id]; - return null; - } - - renderTool() { - return (
+ render() { + console.log(this.props) + return ( +
- ) - } - - render() { - return (
{this.renderTool()}
); + ); } } 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), diff --git a/src/components/Viewport.jsx b/src/components/Viewport.jsx index c0dd6d5..3292a94 100644 --- a/src/components/Viewport.jsx +++ b/src/components/Viewport.jsx @@ -24,12 +24,8 @@ class Viewport extends React.Component { select: this.props.select, mapAnchor: this.props.mapAnchor } - const ui = { - groupColors: this.props.groupColors, - dom: this.props.dom - } - this.map = new Map(app, ui); + this.map = new Map(app, this.props.ui); this.map.update(domain, app); } diff --git a/src/js/map/map.js b/src/js/map/map.js index e983e73..87ae8d0 100644 --- a/src/js/map/map.js +++ b/src/js/map/map.js @@ -26,6 +26,7 @@ export default function(newApp, ui) { const getCategoryGroupColor = newApp.getCategoryGroupColor; const select = newApp.select; const groupColors = ui.groupColors; + const narrativeProps = ui.narratives; // Map Settings const center = newApp.mapAnchor; @@ -360,8 +361,19 @@ Stop and start the development process in terminal after you have added your tok .enter().append('path') .attr('class', 'narrative') .attr('d', sequenceLine) - .style('stroke-width', 3) - .style('stroke', '#fff') + .style('stroke-width', d => { + const n = d[0].narrative; + return (n) ? narrativeProps[n].strokeWidth : 3; + }) + .style('stroke-dasharray', d => { + const n = d[0].narrative; + if (narrativeProps[n].style === 'dotted') return "2px 5px"; + return 'none'; + }) + .style('stroke', d => { + const n = d[0].narrative; + return (n) ? narrativeProps[n].stroke : '#fff'; + }) .style('fill', 'none'); } diff --git a/src/selectors/index.js b/src/selectors/index.js index d79960a..2f8c6ca 100644 --- a/src/selectors/index.js +++ b/src/selectors/index.js @@ -10,7 +10,6 @@ export const getSites = (state) => { if (process.env.features.USE_SITES) return state.domain.sites return [] } -console.log(process.env) export const getNotifications = state => state.domain.notifications; export const getTagTree = state => state.domain.tags; export const getTagsFilter = state => state.app.filters.tags; @@ -103,6 +102,7 @@ export const selectNarratives = createSelector( narratives[evt.narrative].byId[evt.id] = { next: null, prev: null }; } }); + Object.keys(narratives).forEach((key) => { const steps = narratives[key].steps; steps.sort((a, b) => { @@ -112,7 +112,8 @@ export const selectNarratives = createSelector( 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; }); - }) + }); + return Object.values(narratives); }); diff --git a/src/store/initial.js b/src/store/initial.js index c5f38ad..f00bcb6 100644 --- a/src/store/initial.js +++ b/src/store/initial.js @@ -59,6 +59,7 @@ const initial = { */ ui: { style: { + colors: { WHITE: "#efefef", YELLOW: "#ffd800", @@ -70,6 +71,7 @@ const initial = { BLUE: "#F2DE79",//"rgb(48, 103 , 217)", GREEN: "#4FF2F2",//"rgb(0, 158, 86)", }, + groupColors: { category_group00: "#FF0000", category_group01: "#226b22", @@ -78,7 +80,17 @@ const initial = { category_group04: "#d3ce2a", other: "#FF0000" }, + palette: d3.schemeCategory10, + + narratives: { + narrative_1: { + style: 'dotted', // ['dotted', 'solid'] + opacity: 0.4, // range between 0 and 1 + stroke: '#ffffff', // Any hex or rgb code + strokeWidth: 2 + } + } }, dom: { timeline: "timeline",