From 5c3fffd99e8254aec7563e8c4ab0d256c1c6098f Mon Sep 17 00:00:00 2001 From: efarooqui Date: Mon, 24 May 2021 20:31:00 -0700 Subject: [PATCH 1/3] 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, From 09d82b4da5f53ceb65724e0bc023d2c9e5b30c3a Mon Sep 17 00:00:00 2001 From: efarooqui Date: Mon, 24 May 2021 22:00:51 -0700 Subject: [PATCH 2/3] Working with default category values from store if none are provided in config --- src/actions/index.js | 2 +- src/common/utilities.js | 11 +++++++---- src/components/Toolbar.js | 19 +++++++------------ 3 files changed, 15 insertions(+), 17 deletions(-) diff --git a/src/actions/index.js b/src/actions/index.js index 5306df4..9730c21 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 cd7c73d..8315cb9 100644 --- a/src/common/utilities.js +++ b/src/common/utilities.js @@ -534,8 +534,8 @@ export function mapStyleByShape(shapes, activeShapes) { return styledShapes; } -export function mapCategoriesToPaths(categories) { - const categoryMap = categories.reduce((acc, cat) => { +export function mapCategoriesToPaths(categories, panelCategories) { + const mappedCats = categories.reduce((acc, cat) => { const type = cat.filter_paths[0]; if (!(type in acc)) { acc[type] = []; @@ -543,6 +543,9 @@ export function mapCategoriesToPaths(categories) { acc[type].push(cat); return acc; }, {}); + + const categoryMap = + panelCategories.length > 1 ? mappedCats : { default: categories }; return categoryMap; } @@ -550,7 +553,7 @@ 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.length > 1 ? panelCategories.filter((val) => val !== "default") : panelCategories; return catTypes.reduce((set, val) => { @@ -568,5 +571,5 @@ export function getFilterIdx( if (narrativesExist && !categoriesExist) return 1; else if (!narrativesExist && categoriesExist) return numCategoryPanels; else if (narrativesExist && categoriesExist) return numCategoryPanels + 1; - else return; + else return 0; } diff --git a/src/components/Toolbar.js b/src/components/Toolbar.js index c6cdc9a..ad9dc2a 100644 --- a/src/components/Toolbar.js +++ b/src/components/Toolbar.js @@ -114,8 +114,11 @@ class Toolbar extends React.Component { renderToolbarCategoriesPanel() { const { categories: panelCategories } = this.props.toolbarCopy.panels; - const catMap = mapCategoriesToPaths(this.props.categories); - console.info(catMap); + const catMap = mapCategoriesToPaths( + this.props.categories, + Object.keys(panelCategories) + ); + return (
{Object.keys(catMap).map((type) => { @@ -127,16 +130,8 @@ class Toolbar extends React.Component { activeCategories={this.props.activeCategories} onCategoryFilter={this.props.methods.onCategoryFilter} language={this.props.language} - title={ - panelCategories[type] - ? panelCategories[type].label - : panelCategories.default.label - } - description={ - panelCategories[type] - ? panelCategories[type].description - : panelCategories.default.description - } + title={panelCategories[type].label} + description={panelCategories[type].description} /> ); From 14593aeba2ee66126f749aca2553125b2254c2c3 Mon Sep 17 00:00:00 2001 From: efarooqui Date: Mon, 24 May 2021 22:49:42 -0700 Subject: [PATCH 3/3] Removing extraneous USE_MULTIPLE_FILTERS feature from initial store --- src/store/initial.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/store/initial.js b/src/store/initial.js index 6361b1d..1d68662 100644 --- a/src/store/initial.js +++ b/src/store/initial.js @@ -190,7 +190,6 @@ const initial = { }, features: { - USE_MULTIPLE_CATEGORIES: false, USE_COVER: false, USE_ASSOCIATIONS: false, USE_SITES: false,