From 0b989465f6faa16c0b85c40450b022090d800633 Mon Sep 17 00:00:00 2001 From: efarooqui Date: Mon, 10 May 2021 15:57:59 -0700 Subject: [PATCH] Fixing bugs with timeline markers; issues with using category as associations obj vs just title --- src/common/utilities.js | 19 +++++++++---------- src/components/time/Timeline.js | 27 +++++++++++---------------- src/components/time/atoms/Events.js | 2 +- src/components/time/atoms/Markers.js | 3 ++- 4 files changed, 23 insertions(+), 28 deletions(-) diff --git a/src/common/utilities.js b/src/common/utilities.js index e4c32c6..902227a 100644 --- a/src/common/utilities.js +++ b/src/common/utilities.js @@ -194,16 +194,15 @@ export function removeFromColoringSet(coloringSet, filters) { return newColoringSets.filter((item) => item.length !== 0); } -export function getEventCategories(event, categories) { - const matchedCategories = []; - if (event.associations && event.associations.length > 0) { - event.associations.reduce((acc, val) => { - const foundCategory = categories.find((cat) => cat.title === val); - if (foundCategory) acc.push(foundCategory); - return acc; - }, matchedCategories); - } - return matchedCategories; +export function getEventCategories(event, activeCategories) { + const eventCats = event.associations.filter( + (a) => a.mode === ASSOCIATION_MODES.CATEGORY + ); + return eventCats.reduce((acc, val) => { + const activeCatTitle = activeCategories.find((cat) => cat === val.title); + if (activeCatTitle) acc.push(activeCatTitle); + return acc; + }, []); } export function createFilterPathString(filter) { diff --git a/src/components/time/Timeline.js b/src/components/time/Timeline.js index c5b5744..7eb2820 100644 --- a/src/components/time/Timeline.js +++ b/src/components/time/Timeline.js @@ -49,14 +49,13 @@ class Timeline extends React.Component { } if ( - hash(nextProps.domain.categories) !== - hash(this.props.domain.categories) || + hash(nextProps.activeCategories) !== hash(this.props.activeCategories) || hash(nextProps.dimensions) !== hash(this.props.dimensions) ) { const { trackHeight, marginTop } = nextProps.dimensions; this.setState({ scaleY: this.makeScaleY( - nextProps.domain.categories, + nextProps.activeCategories, trackHeight, marginTop ), @@ -99,6 +98,7 @@ class Timeline extends React.Component { (cat) => !features.GRAPH_NONLOCATED.categories.includes(cat.title) ); } + const extraPadding = 0; const catHeight = categories.length > 2 @@ -107,10 +107,10 @@ class Timeline extends React.Component { const catsYpos = categories.map((g, i) => { return (i + 1) * catHeight + marginTop + extraPadding / 2; }); - const catMap = categories.map((c) => c.title); + // const catMap = categories.map((c) => c.title); return (cat) => { - const idx = catMap.indexOf(cat); + const idx = categories.indexOf(cat); return catsYpos[idx]; }; } @@ -302,13 +302,11 @@ class Timeline extends React.Component { } getY(event) { - const { features, domain } = this.props; + const { features, domain, activeCategories } = this.props; const { USE_CATEGORIES, GRAPH_NONLOCATED } = features; - // Categories represent active categories here - const { categories } = domain; const categoriesExist = - USE_CATEGORIES && categories && categories.length > 0; + USE_CATEGORIES && activeCategories && activeCategories.length > 0; if (!categoriesExist) { return this.state.dims.trackHeight / 2; @@ -351,7 +349,8 @@ class Timeline extends React.Component { const heightStyle = { height: dims.height }; const extraStyle = { ...heightStyle, ...foldedStyle }; const contentHeight = { height: dims.contentHeight }; - const { categories } = this.props.domain; + const { activeCategories: categories } = this.props; + return (
{ this.onDragEnd(); }} - categories={categories.map((c) => c.title)} + categories={categories} features={this.props.features} fallbackLabel={ copy[this.props.app.language].timeline @@ -463,14 +462,10 @@ function mapStateToProps(state) { return { dimensions: selectors.selectDimensions(state), isNarrative: !!state.app.associations.narrative, + activeCategories: selectors.getActiveCategories(state), domain: { events: selectors.selectStackedEvents(state), projects: selectors.selectProjects(state), - categories: ((state) => { - const allcats = selectors.getCategories(state); - const active = selectors.getActiveCategories(state); - return allcats.filter((c) => active.includes(c.title)); - })(state), narratives: state.domain.narratives, }, app: { diff --git a/src/components/time/atoms/Events.js b/src/components/time/atoms/Events.js index 2402b03..e7f4b34 100644 --- a/src/components/time/atoms/Events.js +++ b/src/components/time/atoms/Events.js @@ -134,7 +134,7 @@ const TimelineEvents = ({ // those timelines: so we create as many event 'shadows' as there are // categories const evShadows = getEventCategories(event, categories).map((cat) => { - const y = getY({ ...event, category: cat.title }); + const y = getY({ ...event, category: cat }); const colour = event.colour ? event.colour : getCategoryColor(cat.title); const styles = { diff --git a/src/components/time/atoms/Markers.js b/src/components/time/atoms/Markers.js index 186aa00..00f3012 100644 --- a/src/components/time/atoms/Markers.js +++ b/src/components/time/atoms/Markers.js @@ -64,8 +64,9 @@ const TimelineMarkers = ({ const isDot = (isLatitude(event.latitude) && isLongitude(event.longitude)) || (features.GRAPH_NONLOCATED && event.projectOffset !== -1); + const evShadows = getEventCategories(event, categories).map((cat) => - getEventY({ ...event, category: cat.title }) + getEventY({ ...event, category: cat }) ); function renderMarkerForEvent(y) {