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;
}, []);