Merge branch 'develop' of https://github.com/forensic-architecture/timemap into bugfix/modify-filters-to-use-id-not-title

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

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/space/carto/Map.js

@@ -26,6 +26,7 @@ import {
 } from "../../../common/utilities";
 
 // NB: important constants for map, TODO: make statics
+// Note: Base map is OpenStreetMaps by default; can choose another base map
 const supportedMapboxMap = ["streets", "satellite"];
 const defaultToken = "your_token";
 

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);
@@ -304,7 +304,9 @@ class Timeline extends React.Component {
   getY(event) {
     const { features, domain } = this.props;
     const { USE_CATEGORIES, GRAPH_NONLOCATED } = features;
+    // Categories represent active categories here
     const { categories } = domain;
+
     const categoriesExist =
       USE_CATEGORIES && categories && categories.length > 0;
 
@@ -394,7 +396,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 +469,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) {

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