Merge pull request #201 from forensic-architecture/bugfix/select-category-by-title

Allow categories to be selected by title and not id

src/components/controls/CategoriesListPanel.js

@@ -15,14 +15,14 @@ const CategoriesListPanel = ({
         {categories.map((cat) => {
           return (
             <li
-              key={cat.id.replace(/ /g, "_")}
+              key={cat.title.replace(/ /g, "_")}
               className="filter-filter active"
               style={{ marginLeft: "20px" }}
             >
               <Checkbox
-                label={cat.id}
-                isActive={activeCategories.includes(cat.id)}
-                onClickCheckbox={() => onCategoryFilter(cat.id)}
+                label={cat.title}
+                isActive={activeCategories.includes(cat.title)}
+                onClickCheckbox={() => onCategoryFilter(cat.title)}
               />
             </li>
           );

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 (

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,
     },

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,

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) {