From b50ee8b5fe26bf4d8fae4fe14133cb922a41209b Mon Sep 17 00:00:00 2001
From: efarooqui <efarooqui@pandora.com>
Date: Wed, 12 May 2021 20:03:02 -0700
Subject: [PATCH 1/3] Creates an event type called TIMELINE_ONLY which doesnt
 get filtered by filter panel; allowing for panel copy to be read in via the
 config

---
 src/common/constants.js                       |  8 ++++
 src/common/data/copy.json                     |  3 +-
 src/components/Toolbar.js                     | 45 +++++++++++++++----
 .../controls/CategoriesListPanel.js           |  9 ++--
 src/selectors/index.js                        | 12 +++--
 src/store/initial.js                          | 17 +++++++
 6 files changed, 75 insertions(+), 19 deletions(-)

diff --git a/src/common/constants.js b/src/common/constants.js
index 46f34f3..e295e4b 100644
--- a/src/common/constants.js
+++ b/src/common/constants.js
@@ -3,3 +3,11 @@ export const ASSOCIATION_MODES = {
   NARRATIVE: "NARRATIVE",
   FILTER: "FILTER",
 };
+
+export const TIMELINE_ONLY = "TIMELINE_ONLY";
+
+export const DEFAULT_TAB_ICONS = {
+  CATEGORY: "widgets",
+  NARRATIVE: "timeline",
+  FILTER: "filter_list",
+};
diff --git a/src/common/data/copy.json b/src/common/data/copy.json
index a18e8b4..5a123d2 100644
--- a/src/common/data/copy.json
+++ b/src/common/data/copy.json
@@ -123,7 +123,7 @@
       "panels": {
         "mentions": {
           "title": "Mentions",
-          "overview": "Selecting the names of people/organisation will show events in which these have been mentioned in their own testistimony and by others. The number in the parentheses shows how many events contain a mention of a person or organisation, e.g. (34)"
+          "overview": "Selecting the names of people/organisation will show events in which these have been mentioned in their own testimony and by others. The number in the parentheses shows how many events contain a mention of a person or organisation, e.g. (34)"
         },
         "categories": {
           "title": "Testimonies",
@@ -137,6 +137,7 @@
       "narratives_label": "Narratives",
       "narrative_summary": "Follow a path through the data, from one key event to the next.",
       "categories": "Categories",
+      "categories_label": "Categories",
       "filters": "Filters",
       "filters_label": "Filters",
       "explore_by_filter__title": "Explore by filter",
diff --git a/src/components/Toolbar.js b/src/components/Toolbar.js
index 8844516..c1e15f1 100644
--- a/src/components/Toolbar.js
+++ b/src/components/Toolbar.js
@@ -17,6 +17,7 @@ import {
   addToColoringSet,
   removeFromColoringSet,
 } from "../common/utilities.js";
+import { DEFAULT_TAB_ICONS } from "../common/constants";
 
 class Toolbar extends React.Component {
   constructor(props) {
@@ -108,7 +109,15 @@ class Toolbar extends React.Component {
   }
 
   renderToolbarCategoriesPanel() {
-    if (this.props.features.CATEGORIES_AS_FILTERS) {
+    const { panels } = this.props.toolbarCopy;
+    const panelTitle = panels.categories.label
+      ? panels.categories.label
+      : copy[this.props.language].toolbar.categories;
+    const panelDescription = panels.categories.description
+      ? panels.categories.description
+      : copy[this.props.language].toolbar.explore_by_category__description;
+
+    if (this.props.features.USE_CATEGORIES) {
       return (
         <TabPanel>
           <CategoriesListPanel
@@ -116,6 +125,8 @@ class Toolbar extends React.Component {
             activeCategories={this.props.activeCategories}
             onCategoryFilter={this.props.methods.onCategoryFilter}
             language={this.props.language}
+            title={panelTitle}
+            description={panelDescription}
           />
         </TabPanel>
       );
@@ -165,9 +176,7 @@ class Toolbar extends React.Component {
           {narratives && narratives.length !== 0
             ? this.renderToolbarNarrativePanel()
             : null}
-          {features.CATEGORIES_AS_FILTERS
-            ? this.renderToolbarCategoriesPanel()
-            : null}
+          {features.USE_CATEGORIES ? this.renderToolbarCategoriesPanel() : null}
           {features.USE_ASSOCIATIONS ? this.renderToolbarFilterPanel() : null}
         </Tabs>
       </div>
@@ -197,13 +206,26 @@ class Toolbar extends React.Component {
   }
 
   renderToolbarTabs() {
-    const { features, narratives } = this.props;
+    const { features, narratives, toolbarCopy } = this.props;
     const narrativesExist = narratives && narratives.length !== 0;
     let title = copy[this.props.language].toolbar.title;
     if (process.env.display_title) title = process.env.display_title;
+
+    const { panels } = toolbarCopy;
     const narrativesLabel = copy[this.props.language].toolbar.narratives_label;
-    const filtersLabel = copy[this.props.language].toolbar.filters_label;
-    const categoriesLabel = "Categories"; // TODO:
+    const filtersLabel = panels.filters.label
+      ? panels.filters.label
+      : copy[this.props.language].toolbar.filters_label;
+    const categoriesLabel = panels.categories.label
+      ? panels.categories.label
+      : copy[this.props.language].toolbar.categories_label;
+
+    const filterIcon = panels.filters.icon
+      ? panels.filters.icon
+      : DEFAULT_TAB_ICONS.FILTER;
+    const categoriesIcon = panels.categories.icon
+      ? panels.categories.icon
+      : DEFAULT_TAB_ICONS.CATEGORY;
 
     const narrativesIdx = 0;
     const categoriesIdx = narrativesExist ? 1 : 0;
@@ -223,10 +245,14 @@ class Toolbar extends React.Component {
             ? this.renderToolbarTab(narrativesIdx, narrativesLabel, "timeline")
             : null}
           {features.CATEGORIES_AS_FILTERS
-            ? this.renderToolbarTab(categoriesIdx, categoriesLabel, "widgets")
+            ? this.renderToolbarTab(
+                categoriesIdx,
+                categoriesLabel,
+                categoriesIcon
+              )
             : null}
           {features.USE_ASSOCIATIONS
-            ? this.renderToolbarTab(filtersIdx, filtersLabel, "filter_list")
+            ? this.renderToolbarTab(filtersIdx, filtersLabel, filterIcon)
             : null}
         </div>
         <BottomActions
@@ -268,6 +294,7 @@ function mapStateToProps(state) {
     categories: selectors.getCategories(state),
     narratives: selectors.selectNarratives(state),
     language: state.app.language,
+    toolbarCopy: state.app.toolbar,
     activeFilters: selectors.getActiveFilters(state),
     activeCategories: selectors.getActiveCategories(state),
     viewFilters: state.app.associations.views,
diff --git a/src/components/controls/CategoriesListPanel.js b/src/components/controls/CategoriesListPanel.js
index bd62217..c86f6d7 100644
--- a/src/components/controls/CategoriesListPanel.js
+++ b/src/components/controls/CategoriesListPanel.js
@@ -1,13 +1,14 @@
 import React from "react";
 import marked from "marked";
 import Checkbox from "../atoms/Checkbox";
-import copy from "../../common/data/copy.json";
 
 const CategoriesListPanel = ({
   categories,
   activeCategories,
   onCategoryFilter,
   language,
+  title,
+  description,
 }) => {
   function renderCategoryTree() {
     return (
@@ -33,12 +34,10 @@ const CategoriesListPanel = ({
 
   return (
     <div className="react-innertabpanel">
-      <h2>{copy[language].toolbar.categories}</h2>
+      <h2>{title}</h2>
       <p
         dangerouslySetInnerHTML={{
-          __html: marked(
-            copy[language].toolbar.explore_by_category__description
-          ),
+          __html: marked(description),
         }}
       />
       {renderCategoryTree()}
diff --git a/src/selectors/index.js b/src/selectors/index.js
index 23a129e..00542ba 100644
--- a/src/selectors/index.js
+++ b/src/selectors/index.js
@@ -8,7 +8,7 @@ import {
   createFilterPathString,
 } from "../common/utilities";
 import { isTimeRangedIn } from "./helpers";
-import { ASSOCIATION_MODES } from "../common/constants";
+import { ASSOCIATION_MODES, TIMELINE_ONLY } from "../common/constants";
 
 // Input selectors
 export const getEvents = (state) => state.domain.events;
@@ -95,9 +95,13 @@ export const selectEvents = createSelector(
       isActiveTime = features.GRAPH_NONLOCATED
         ? (!event.latitude && !event.longitude) || isActiveTime
         : isActiveTime;
-
-      if (isActiveTime && isActiveFilter && isActiveCategory) {
-        acc[event.id] = { ...event };
+      // if (isActiveTime && isActiveFilter && isActiveCategory) {
+      //   acc[event.id] = { ...event };
+      // }
+      if (isActiveTime && isActiveCategory) {
+        if (event.type === TIMELINE_ONLY || isActiveFilter) {
+          acc[event.id] = { ...event };
+        }
       }
       return acc;
     }, []);
diff --git a/src/store/initial.js b/src/store/initial.js
index 9d27db6..d9df191 100644
--- a/src/store/initial.js
+++ b/src/store/initial.js
@@ -3,6 +3,7 @@ import { mergeDeepLeft } from "ramda";
 import global, { colors } from "../common/global";
 import copy from "../common/data/copy.json";
 import { language } from "../common/utilities";
+import { DEFAULT_TAB_ICONS } from "../common/constants";
 
 const isSmallLaptop = window.innerHeight < 800;
 const mapIniital = {
@@ -105,6 +106,22 @@ const initial = {
         "A description of the project goes here.\n\nThis description may contain markdown.\n\n# This is a large title, for example.\n\n## Whereas this is a slightly smaller title.\n\nCheck out docs/custom-covers.md in the [Timemap GitHub repo](https://github.com/forensic-architecture/timemap) for more information around how to specify custom covers.",
       exploreButton: "EXPLORE",
     },
+    toolbar: {
+      panels: {
+        categories: {
+          icon: DEFAULT_TAB_ICONS.CATEGORY,
+          label: copy[language].toolbar.categories_label,
+          title: copy[language].toolbar.explore_by_category__title,
+          description: copy[language].toolbar.explore_by_category__description,
+        },
+        filters: {
+          icon: DEFAULT_TAB_ICONS.FILTER,
+          label: copy[language].toolbar.filters_label,
+          title: copy[language].toolbar.explore_by_filter__title,
+          description: copy[language].toolbar.explore_by_filter__description,
+        },
+      },
+    },
     loading: false,
   },
 

From 87d84df8b438b4e7a7628421fc1a6b78a7783ac2 Mon Sep 17 00:00:00 2001
From: efarooqui <efarooqui@pandora.com>
Date: Thu, 13 May 2021 18:23:40 -0700
Subject: [PATCH 2/3] Reading in from toolbar copy from config for narrative
 and filter panels

---
 src/common/data/copy.json                  |  8 +++++---
 src/components/Toolbar.js                  | 22 ++++++++++++++++++++--
 src/components/controls/FilterListPanel.js |  7 ++++---
 src/store/initial.js                       |  6 ++++++
 4 files changed, 35 insertions(+), 8 deletions(-)

diff --git a/src/common/data/copy.json b/src/common/data/copy.json
index 5a123d2..9e4fe21 100644
--- a/src/common/data/copy.json
+++ b/src/common/data/copy.json
@@ -134,14 +134,16 @@
           "placeholder": "Search"
         }
       },
+      "narratives": "Narratives",
       "narratives_label": "Narratives",
-      "narrative_summary": "Follow a path through the data, from one key event to the next.",
-      "categories": "Categories",
-      "categories_label": "Categories",
+      "explore_by_narrative__title": "Explore events by narrative",
+      "explore_by_narrative__description": "Follow a path through the data, from one key event to the next.",
       "filters": "Filters",
       "filters_label": "Filters",
       "explore_by_filter__title": "Explore by filter",
       "explore_by_filter__description": "'Filters' refer to the types of incident. Select multiple filters to introduce colour-coding, up to a maximum of four filters.<br><br>If no filters are selected, all datapoints are displayed.",
+      "categories": "Categories",
+      "categories_label": "Categories",
       "explore_by_category__title": "Explore events by category",
       "explore_by_category__description": "‘Categories’ refer to the victims of a given incident.<br><br>If no categories are selected, all datapoints are displayed."
     },
diff --git a/src/components/Toolbar.js b/src/components/Toolbar.js
index c1e15f1..b7a80d9 100644
--- a/src/components/Toolbar.js
+++ b/src/components/Toolbar.js
@@ -84,10 +84,18 @@ class Toolbar extends React.Component {
   }
 
   renderToolbarNarrativePanel() {
+    const { panels } = this.props.toolbarCopy;
+    const panelTitle = panels.narratives.label
+      ? panels.narratives.label
+      : copy[this.props.language].toolbar.narratives;
+    const panelDescription = panels.narratives.description
+      ? panels.narratives.description
+      : copy[this.props.language].toolbar.explore_by_narrative__description;
+
     return (
       <TabPanel>
-        <h2>{copy[this.props.language].toolbar.narrative_panel_title}</h2>
-        <p>{copy[this.props.language].toolbar.narrative_summary}</p>
+        <h2>{panelTitle}</h2>
+        <p>{panelDescription}</p>
         {this.props.narratives.map((narr) => {
           return (
             <div className="panel-action action">
@@ -134,6 +142,14 @@ class Toolbar extends React.Component {
   }
 
   renderToolbarFilterPanel() {
+    const { panels } = this.props.toolbarCopy;
+    const panelTitle = panels.filters.label
+      ? panels.filters.label
+      : copy[this.props.language].toolbar.filters;
+    const panelDescription = panels.filters.description
+      ? panels.filters.description
+      : copy[this.props.language].toolbar.explore_by_filter__description;
+
     return (
       <TabPanel>
         <FilterListPanel
@@ -143,6 +159,8 @@ class Toolbar extends React.Component {
           language={this.props.language}
           coloringSet={this.props.coloringSet}
           filterColors={this.props.filterColors}
+          title={panelTitle}
+          description={panelDescription}
         />
       </TabPanel>
     );
diff --git a/src/components/controls/FilterListPanel.js b/src/components/controls/FilterListPanel.js
index adb5013..9d02e9b 100644
--- a/src/components/controls/FilterListPanel.js
+++ b/src/components/controls/FilterListPanel.js
@@ -1,7 +1,6 @@
 import React from "react";
 import Checkbox from "../atoms/Checkbox";
 import marked from "marked";
-import copy from "../../common/data/copy.json";
 import {
   aggregateFilterPaths,
   getFilterIdxFromColorSet,
@@ -30,6 +29,8 @@ function FilterListPanel({
   language,
   coloringSet,
   filterColors,
+  title,
+  description,
 }) {
   function createNodeComponent(filter, depth) {
     const [key, children] = filter;
@@ -81,10 +82,10 @@ function FilterListPanel({
 
   return (
     <div className="react-innertabpanel">
-      <h2>{copy[language].toolbar.filters}</h2>
+      <h2>{title}</h2>
       <p
         dangerouslySetInnerHTML={{
-          __html: marked(copy[language].toolbar.explore_by_filter__description),
+          __html: marked(description),
         }}
       />
       {renderTree(filters)}
diff --git a/src/store/initial.js b/src/store/initial.js
index d9df191..40219f8 100644
--- a/src/store/initial.js
+++ b/src/store/initial.js
@@ -120,6 +120,12 @@ const initial = {
           title: copy[language].toolbar.explore_by_filter__title,
           description: copy[language].toolbar.explore_by_filter__description,
         },
+        narratives: {
+          icon: DEFAULT_TAB_ICONS.NARRATIVE,
+          label: copy[language].toolbar.narratives_label,
+          title: copy[language].toolbar.explore_by_narrative__title,
+          description: copy[language].toolbar.explore_by_narrative__description,
+        },
       },
     },
     loading: false,

From 0504e65b5f942c9ed249960633bd6737c11c6e9d Mon Sep 17 00:00:00 2001
From: efarooqui <efarooqui@pandora.com>
Date: Thu, 13 May 2021 18:39:33 -0700
Subject: [PATCH 3/3] Moving extraneous comments

---
 src/selectors/index.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/selectors/index.js b/src/selectors/index.js
index 00542ba..6ad19d4 100644
--- a/src/selectors/index.js
+++ b/src/selectors/index.js
@@ -95,9 +95,6 @@ export const selectEvents = createSelector(
       isActiveTime = features.GRAPH_NONLOCATED
         ? (!event.latitude && !event.longitude) || isActiveTime
         : isActiveTime;
-      // if (isActiveTime && isActiveFilter && isActiveCategory) {
-      //   acc[event.id] = { ...event };
-      // }
       if (isActiveTime && isActiveCategory) {
         if (event.type === TIMELINE_ONLY || isActiveFilter) {
           acc[event.id] = { ...event };