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 ( ); @@ -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} @@ -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} { function renderCategoryTree() { return ( @@ -33,12 +34,10 @@ const CategoriesListPanel = ({ return (
-

{copy[language].toolbar.categories}

+

{title}

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