From 5c3fffd99e8254aec7563e8c4ab0d256c1c6098f Mon Sep 17 00:00:00 2001 From: efarooqui Date: Mon, 24 May 2021 20:31:00 -0700 Subject: [PATCH] Allows for multiple specified categories that are customizable panelsin left hand side toolbar --- src/actions/index.js | 2 +- src/common/utilities.js | 46 +++++++++++++++++++-- src/components/Toolbar.js | 87 +++++++++++++++++++++++++++------------ src/store/initial.js | 12 ++++-- 4 files changed, 112 insertions(+), 35 deletions(-) diff --git a/src/actions/index.js b/src/actions/index.js index 9730c21..5306df4 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -120,7 +120,7 @@ export function fetchDomain() { ); } dispatch(toggleFetchingDomain()); - dispatch(setInitialCategories(result.associations)); + // dispatch(setInitialCategories(result.associations)); dispatch(setInitialShapes(result.shapes)); return result; }) diff --git a/src/common/utilities.js b/src/common/utilities.js index 6aefd98..cd7c73d 100644 --- a/src/common/utilities.js +++ b/src/common/utilities.js @@ -222,9 +222,7 @@ export function getEventCategories(event, activeCategories) { * Takes a filter's path and concatenates it like so: Parent 1/Parent 2/Child */ export function createFilterPathString(filter) { - return filter.mode === ASSOCIATION_MODES.FILTER - ? filter.filter_paths.join("/") - : ""; + return filter.filter_paths.join("/"); } /** @@ -511,6 +509,11 @@ export function setD3Locale(d3) { } } +/** + * Gets the set of associated styles for a given shape type from the entire set of shapes + * @param list shapes - The aggregated set of shapes + * @param list activeShapes - The set of active shapes in the app + */ export function mapStyleByShape(shapes, activeShapes) { const styledShapes = shapes.map((s) => { const { colour, shape, id } = s; @@ -530,3 +533,40 @@ export function mapStyleByShape(shapes, activeShapes) { }); return styledShapes; } + +export function mapCategoriesToPaths(categories) { + const categoryMap = categories.reduce((acc, cat) => { + const type = cat.filter_paths[0]; + if (!(type in acc)) { + acc[type] = []; + } + acc[type].push(cat); + return acc; + }, {}); + return categoryMap; +} + +export function getCategoryIdxs(panelCategories, startingIdx) { + let idxCounter = startingIdx; + // If there are specified categories from the config, filter out the default value; else, leave the default value + const catTypes = + panelCategories.length > 1 && panelCategories.includes("default") + ? panelCategories.filter((val) => val !== "default") + : panelCategories; + return catTypes.reduce((set, val) => { + set[val] = idxCounter; + idxCounter += 1; + return set; + }, {}); +} + +export function getFilterIdx( + narrativesExist, + categoriesExist, + numCategoryPanels +) { + if (narrativesExist && !categoriesExist) return 1; + else if (!narrativesExist && categoriesExist) return numCategoryPanels; + else if (narrativesExist && categoriesExist) return numCategoryPanels + 1; + else return; +} diff --git a/src/components/Toolbar.js b/src/components/Toolbar.js index 30a9d51..c6cdc9a 100644 --- a/src/components/Toolbar.js +++ b/src/components/Toolbar.js @@ -17,6 +17,9 @@ import { getFilterAncestors, addToColoringSet, removeFromColoringSet, + mapCategoriesToPaths, + getCategoryIdxs, + getFilterIdx, } from "../common/utilities.js"; class Toolbar extends React.Component { @@ -110,21 +113,36 @@ class Toolbar extends React.Component { } renderToolbarCategoriesPanel() { - const { panels } = this.props.toolbarCopy; - if (this.props.features.USE_CATEGORIES) { - return ( - - - - ); - } + const { categories: panelCategories } = this.props.toolbarCopy.panels; + const catMap = mapCategoriesToPaths(this.props.categories); + console.info(catMap); + return ( +
+ {Object.keys(catMap).map((type) => { + const children = catMap[type]; + return ( + + + + ); + })} +
+ ); } renderToolbarFilterPanel() { @@ -181,6 +199,21 @@ class Toolbar extends React.Component { ); } + renderToolbarCategoryTabs(idxs) { + const { categories: panelCategories } = this.props.toolbarCopy.panels; + return ( +
+ {Object.keys(idxs).map((key) => { + return this.renderToolbarTab( + idxs[key], + panelCategories[key].label, + panelCategories[key].icon + ); + })} +
+ ); + } + renderToolbarPanels() { const { features, narratives } = this.props; const classes = @@ -230,14 +263,18 @@ class Toolbar extends React.Component { const { panels } = toolbarCopy; const narrativesIdx = 0; - const categoriesIdx = narrativesExist ? 1 : 0; - const filtersIdx = - narrativesExist && features.USE_CATEGORIES - ? 2 - : narrativesExist || features.USE_CATEGORIES - ? 1 - : 0; + const categoryIdxs = getCategoryIdxs( + Object.keys(panels.categories), + narrativesExist ? 1 : 0 + ); + const numCategoryPanels = Object.keys(categoryIdxs).length; + const filtersIdx = getFilterIdx( + narrativesExist, + features.USE_CATEGORIES, + numCategoryPanels || 0 + ); const shapesIdx = filtersIdx + 1; + return (
@@ -252,11 +289,7 @@ class Toolbar extends React.Component { ) : null} {features.USE_CATEGORIES - ? this.renderToolbarTab( - categoriesIdx, - panels.categories.label, - panels.categories.icon - ) + ? this.renderToolbarCategoryTabs(categoryIdxs) : null} {features.USE_ASSOCIATIONS ? this.renderToolbarTab( diff --git a/src/store/initial.js b/src/store/initial.js index d0bd782..6361b1d 100644 --- a/src/store/initial.js +++ b/src/store/initial.js @@ -112,10 +112,13 @@ const initial = { 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, + default: { + 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, @@ -187,6 +190,7 @@ const initial = { }, features: { + USE_MULTIPLE_CATEGORIES: false, USE_COVER: false, USE_ASSOCIATIONS: false, USE_SITES: false,