From 67c336c1314c371527bc9ec76d26409da0c59c75 Mon Sep 17 00:00:00 2001 From: efarooqui Date: Tue, 6 Oct 2020 17:22:47 -0700 Subject: [PATCH] Categories showing up on timeline with events; events are stacked on both and connected by a bar which looks like a UI bug somewhere --- src/actions/index.js | 26 +++++++++---------- src/common/constants.js | 7 +++-- src/components/Timeline.jsx | 6 +++-- src/components/TimelineCategories.jsx | 17 ++++++------ .../presentational/Timeline/Events.js | 1 + src/reducers/validate/validators.js | 6 ++--- src/selectors/index.js | 8 +++--- src/store/initial.js | 2 +- 8 files changed, 40 insertions(+), 33 deletions(-) diff --git a/src/actions/index.js b/src/actions/index.js index 7c47e25..9137027 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -4,7 +4,7 @@ import { urlFromEnv } from '../common/utilities' // TODO: relegate these URLs entirely to environment variables // const CONFIG_URL = urlFromEnv('CONFIG_EXT') const EVENT_DATA_URL = urlFromEnv('EVENTS_EXT') -const CATEGORY_URL = urlFromEnv('CATEGORIES_EXT') +// const CATEGORY_URL = urlFromEnv('CATEGORIES_EXT') const ASSOCIATIONS_URL = urlFromEnv('ASSOCIATIONS_EXT') const SOURCES_URL = urlFromEnv('SOURCES_EXT') const SITES_URL = urlFromEnv('SITES_EXT') @@ -42,12 +42,12 @@ export function fetchDomain () { ) ).then(results => results.flatMap(t => t)) - let catPromise = Promise.resolve([]) - if (features.USE_CATEGORIES) { - catPromise = fetch(CATEGORY_URL) - .then(response => response.json()) - .catch(() => handleError(domainMsg('categories'))) - } + // let catPromise = Promise.resolve([]) + // if (features.USE_CATEGORIES) { + // catPromise = fetch(CATEGORY_URL) + // .then(response => response.json()) + // .catch(() => handleError(domainMsg('categories'))) + // } let associationsPromise = Promise.resolve([]) if (features.USE_ASSOCIATIONS) { @@ -87,7 +87,7 @@ export function fetchDomain () { return Promise.all([ eventPromise, - catPromise, + // catPromise, associationsPromise, sourcesPromise, sitesPromise, @@ -96,11 +96,11 @@ export function fetchDomain () { .then(response => { const result = { events: response[0], - categories: response[1], - associations: response[2], - sources: response[3], - sites: response[4], - shapes: response[5], + // categories: response[1], + associations: response[1], + sources: response[2], + sites: response[3], + shapes: response[4], notifications } if (Object.values(result).some(resp => resp.hasOwnProperty('error'))) { diff --git a/src/common/constants.js b/src/common/constants.js index 0537970..c67a6b9 100644 --- a/src/common/constants.js +++ b/src/common/constants.js @@ -1,2 +1,5 @@ -export const FILTER_MODE = 'FILTER' -export const NARRATIVE_MODE = 'NARRATIVE' +export const ASSOCIATION_MODES = { + CATEGORY: 'CATEGORY', + NARRATIVE: 'NARRATIVE', + FILTER: 'FILTER' +} \ No newline at end of file diff --git a/src/components/Timeline.jsx b/src/components/Timeline.jsx index 61e91aa..78ac105 100644 --- a/src/components/Timeline.jsx +++ b/src/components/Timeline.jsx @@ -87,7 +87,8 @@ class Timeline extends React.Component { const catsYpos = categories.map((g, i) => { return ((i + 1) * catHeight) - shiftUp + marginShift + manualAdjustment }) - const catMap = categories.map(c => c.category) + const catMap = categories.map(c => c.id) + return (cat) => { const idx = catMap.indexOf(cat) return catsYpos[idx] @@ -273,11 +274,12 @@ class Timeline extends React.Component { if (!USE_CATEGORIES) { return this.state.dims.trackHeight / 2 } const { category, project } = event + if (GRAPH_NONLOCATED && GRAPH_NONLOCATED.categories.includes(category)) { return this.state.dims.marginTop + domain.projects[project].offset + this.props.ui.eventRadius } if (!this.state.scaleY) return 0 - + // console.info(event, this.state.scaleY(category)) return this.state.scaleY(category) } diff --git a/src/components/TimelineCategories.jsx b/src/components/TimelineCategories.jsx index 68741c9..98b99a9 100644 --- a/src/components/TimelineCategories.jsx +++ b/src/components/TimelineCategories.jsx @@ -26,11 +26,11 @@ class TimelineCategories extends React.Component { renderCategory (cat, idx) { const { features, dims } = this.props - const { category } = cat + const { id } = cat const strokeWidth = 1 // dims.trackHeight / (this.props.categories.length + 1) if (features.GRAPH_NONLOCATED && features.GRAPH_NONLOCATED.categories && - features.GRAPH_NONLOCATED.categories.includes(category)) { + features.GRAPH_NONLOCATED.categories.includes(id)) { return null } @@ -40,26 +40,27 @@ class TimelineCategories extends React.Component { class='tick' style={{ strokeWidth }} opacity='0.5' - transform={`translate(0,${this.props.getCategoryY(category)})`} + transform={`translate(0,${this.props.getCategoryY(id)})`} > - - {category} + + {id} ) } render () { - const { dims } = this.props - const categories = this.props.features.USE_CATEGORIES + const { dims, categories } = this.props + const categoriesExist = categories && categories.length > 0 + const renderedCategories = categoriesExist ? this.props.categories.map((cat, idx) => this.renderCategory(cat, idx)) : this.renderCategory('Events', 0) return ( - {categories} + {renderedCategories} state.domain.events -export const getCategories = state => state.domain.categories -export const getNarratives = state => state.domain.associations.filter(item => item.mode === NARRATIVE_MODE) +export const getCategories = state => state.domain.associations.filter(item => item.mode === ASSOCIATION_MODES.CATEGORY) +export const getNarratives = state => state.domain.associations.filter(item => item.mode === ASSOCIATION_MODES.NARRATIVE) export const getActiveNarrative = state => state.app.associations.narrative export const getSelected = state => state.app.selected export const getSites = state => state.domain.sites export const getSources = state => state.domain.sources export const getShapes = state => state.domain.shapes -export const getFilters = state => state.domain.associations.filter(item => item.mode === FILTER_MODE) +export const getFilters = state => state.domain.associations.filter(item => item.mode === ASSOCIATION_MODES.FILTER) export const getNotifications = state => state.domain.notifications export const getActiveFilters = state => state.app.associations.filters export const getActiveCategories = state => state.app.associations.categories diff --git a/src/store/initial.js b/src/store/initial.js index 1b9ab6d..aa39e4f 100644 --- a/src/store/initial.js +++ b/src/store/initial.js @@ -12,7 +12,7 @@ const initial = { domain: { events: [], locations: [], - categories: [], + // categories: [], associations: [], sources: {}, sites: [],