diff --git a/src/common/utilities.js b/src/common/utilities.js index 7cbf8cb..145cdc6 100644 --- a/src/common/utilities.js +++ b/src/common/utilities.js @@ -159,7 +159,7 @@ 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.id === val); + const foundCategory = categories.find((cat) => cat.title === val); if (foundCategory) acc.push(foundCategory); return acc; }, matchedCategories); diff --git a/src/components/controls/CategoriesListPanel.js b/src/components/controls/CategoriesListPanel.js index f5e0054..bd62217 100644 --- a/src/components/controls/CategoriesListPanel.js +++ b/src/components/controls/CategoriesListPanel.js @@ -15,14 +15,14 @@ const CategoriesListPanel = ({ {categories.map((cat) => { return (
  • onCategoryFilter(cat.id)} + label={cat.title} + isActive={activeCategories.includes(cat.title)} + onClickCheckbox={() => onCategoryFilter(cat.title)} />
  • ); diff --git a/src/components/time/Categories.js b/src/components/time/Categories.js index 5a98cdd..74e7074 100644 --- a/src/components/time/Categories.js +++ b/src/components/time/Categories.js @@ -62,7 +62,7 @@ class TimelineCategories extends React.Component { const { dims, categories, fallbackLabel } = this.props; const categoriesExist = categories && categories.length > 0; const renderedCategories = categoriesExist - ? this.props.categories.map((cat, idx) => this.renderCategory(cat, idx)) + ? categories.map((cat, idx) => this.renderCategory(cat, idx)) : this.renderCategory(fallbackLabel, 0); return ( diff --git a/src/components/time/Timeline.js b/src/components/time/Timeline.js index 77b09c4..4472c46 100644 --- a/src/components/time/Timeline.js +++ b/src/components/time/Timeline.js @@ -96,7 +96,7 @@ class Timeline extends React.Component { const { features } = this.props; if (features.GRAPH_NONLOCATED && features.GRAPH_NONLOCATED.categories) { categories = categories.filter( - (cat) => !features.GRAPH_NONLOCATED.categories.includes(cat.id) + (cat) => !features.GRAPH_NONLOCATED.categories.includes(cat.title) ); } const extraPadding = 0; @@ -107,7 +107,7 @@ class Timeline extends React.Component { const catsYpos = categories.map((g, i) => { return (i + 1) * catHeight + marginTop + extraPadding / 2; }); - const catMap = categories.map((c) => c.id); + const catMap = categories.map((c) => c.title); return (cat) => { const idx = catMap.indexOf(cat); @@ -305,6 +305,7 @@ class Timeline extends React.Component { const { features, domain } = this.props; const { USE_CATEGORIES, GRAPH_NONLOCATED } = features; const { categories } = domain; + const categoriesExist = USE_CATEGORIES && categories && categories.length > 0; @@ -394,7 +395,7 @@ class Timeline extends React.Component { onDragEnd={() => { this.onDragEnd(); }} - categories={categories.map((c) => c.id)} + categories={categories.map((c) => c.title)} features={this.props.features} fallbackLabel={ copy[this.props.app.language].timeline @@ -467,7 +468,7 @@ function mapStateToProps(state) { categories: ((state) => { const allcats = selectors.getCategories(state); const active = selectors.getActiveCategories(state); - return allcats.filter((c) => active.includes(c.id)); + return allcats.filter((c) => active.includes(c.title)); })(state), narratives: state.domain.narratives, }, diff --git a/src/components/time/atoms/Events.js b/src/components/time/atoms/Events.js index 0d50f82..2402b03 100644 --- a/src/components/time/atoms/Events.js +++ b/src/components/time/atoms/Events.js @@ -134,9 +134,9 @@ 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.id }); + const y = getY({ ...event, category: cat.title }); - const colour = event.colour ? event.colour : getCategoryColor(cat.id); + const colour = event.colour ? event.colour : getCategoryColor(cat.title); const styles = { fill: colour, fillOpacity: y > 0 ? calcOpacity(1) : 0, diff --git a/src/components/time/atoms/Markers.js b/src/components/time/atoms/Markers.js index abdc9a8..186aa00 100644 --- a/src/components/time/atoms/Markers.js +++ b/src/components/time/atoms/Markers.js @@ -65,7 +65,7 @@ const TimelineMarkers = ({ (isLatitude(event.latitude) && isLongitude(event.longitude)) || (features.GRAPH_NONLOCATED && event.projectOffset !== -1); const evShadows = getEventCategories(event, categories).map((cat) => - getEventY({ ...event, category: cat.id }) + getEventY({ ...event, category: cat.title }) ); function renderMarkerForEvent(y) { diff --git a/src/reducers/app.js b/src/reducers/app.js index 459d3c2..d137850 100644 --- a/src/reducers/app.js +++ b/src/reducers/app.js @@ -243,7 +243,7 @@ function setNotLoading(appState) { function setInitialCategories(appState, action) { const categories = action.values.reduce((acc, val) => { - if (val.mode === ASSOCIATION_MODES.CATEGORY) acc.push(val.id); + if (val.mode === ASSOCIATION_MODES.CATEGORY) acc.push(val.title); return acc; }, []);