From 8e8416136ecc921dac71aa1e3b2766932d535298 Mon Sep 17 00:00:00 2001 From: efarooqui Date: Fri, 21 May 2021 17:17:43 -0700 Subject: [PATCH] All filters working in conjunction; can filter on shape, filter, and category separately --- src/actions/index.js | 9 ++++++ src/common/utilities.js | 4 +-- .../controls/CategoriesListPanel.js | 2 ++ src/components/controls/ShapesListPanel.js | 2 ++ src/components/controls/atoms/PanelTree.js | 10 ++++--- src/reducers/app.js | 11 +++++++ src/selectors/index.js | 29 +++++++++++++++---- 7 files changed, 56 insertions(+), 11 deletions(-) diff --git a/src/actions/index.js b/src/actions/index.js index b0c7722..9730c21 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -121,6 +121,7 @@ export function fetchDomain() { } dispatch(toggleFetchingDomain()); dispatch(setInitialCategories(result.associations)); + dispatch(setInitialShapes(result.shapes)); return result; }) .catch((err) => { @@ -245,6 +246,14 @@ export function setInitialCategories(values) { }; } +export const SET_INITIAL_SHAPES = "SET_INITIAL_SHAPES"; +export function setInitialShapes(values) { + return { + type: SET_INITIAL_SHAPES, + values, + }; +} + export const UPDATE_TIMERANGE = "UPDATE_TIMERANGE"; export function updateTimeRange(timerange) { return { diff --git a/src/common/utilities.js b/src/common/utilities.js index 5afe61c..6aefd98 100644 --- a/src/common/utilities.js +++ b/src/common/utilities.js @@ -513,10 +513,10 @@ export function setD3Locale(d3) { export function mapStyleByShape(shapes, activeShapes) { const styledShapes = shapes.map((s) => { - const { colour, shape, title } = s; + const { colour, shape, id } = s; const style = { checkboxStyles: { - background: activeShapes.includes(title) ? colour : "black", + background: activeShapes.includes(id) ? colour : "black", border: "none", clipPath: POLYGON_CLIP_PATH[shape], }, diff --git a/src/components/controls/CategoriesListPanel.js b/src/components/controls/CategoriesListPanel.js index 43d1535..47c85b7 100644 --- a/src/components/controls/CategoriesListPanel.js +++ b/src/components/controls/CategoriesListPanel.js @@ -1,6 +1,7 @@ import React from "react"; import marked from "marked"; import PanelTree from "./atoms/PanelTree"; +import { ASSOCIATION_MODES } from "../../common/constants"; const CategoriesListPanel = ({ categories, @@ -22,6 +23,7 @@ const CategoriesListPanel = ({ data={categories} activeValues={activeCategories} onSelect={onCategoryFilter} + type={ASSOCIATION_MODES.CATEGORY} /> ); diff --git a/src/components/controls/ShapesListPanel.js b/src/components/controls/ShapesListPanel.js index 04cf2e2..f72669c 100644 --- a/src/components/controls/ShapesListPanel.js +++ b/src/components/controls/ShapesListPanel.js @@ -2,6 +2,7 @@ import React from "react"; import marked from "marked"; import PanelTree from "./atoms/PanelTree"; import { mapStyleByShape } from "../../common/utilities"; +import { SHAPE } from "../../common/constants"; const ShapesListPanel = ({ shapes, @@ -24,6 +25,7 @@ const ShapesListPanel = ({ data={styledShapes} activeValues={activeShapes} onSelect={onShapeFilter} + type={SHAPE} /> ); diff --git a/src/components/controls/atoms/PanelTree.js b/src/components/controls/atoms/PanelTree.js index 47796ae..6da7098 100644 --- a/src/components/controls/atoms/PanelTree.js +++ b/src/components/controls/atoms/PanelTree.js @@ -1,11 +1,13 @@ import React from "react"; import Checkbox from "../../atoms/Checkbox"; +import { ASSOCIATION_MODES } from "../../../common/constants"; -const PanelTree = ({ data, activeValues, onSelect }) => { +const PanelTree = ({ data, activeValues, onSelect, type }) => { + // If the parent panel is of type 'CATEGORY': filter on title. If panel is 'SHAPE': filter on id + const onSelectionType = type === ASSOCIATION_MODES.CATEGORY ? "title" : "id"; return (
{data.map((val) => { - const isActive = activeValues.includes(val.title); return (
  • { > onSelect(val.title)} + isActive={activeValues.includes(val[onSelectionType])} + onClickCheckbox={() => onSelect(val[onSelectionType])} styleProps={val.styles} />
    • diff --git a/src/reducers/app.js b/src/reducers/app.js index 5337b96..829e8a8 100644 --- a/src/reducers/app.js +++ b/src/reducers/app.js @@ -27,6 +27,7 @@ import { SET_LOADING, SET_NOT_LOADING, SET_INITIAL_CATEGORIES, + SET_INITIAL_SHAPES, UPDATE_SEARCH_QUERY, } from "../actions"; @@ -272,6 +273,14 @@ function setInitialCategories(appState, action) { }; } +function setInitialShapes(appState, action) { + const shapeIds = action.values.map((sh) => sh.id); + return { + ...appState, + shapes: shapeIds, + }; +} + function updateSearchQuery(appState, action) { return { ...appState, @@ -331,6 +340,8 @@ function app(appState = initial.app, action) { return setNotLoading(appState); case SET_INITIAL_CATEGORIES: return setInitialCategories(appState, action); + case SET_INITIAL_SHAPES: + return setInitialShapes(appState, action); case UPDATE_SEARCH_QUERY: return updateSearchQuery(appState, action); default: diff --git a/src/selectors/index.js b/src/selectors/index.js index d03237c..a5e3fe9 100644 --- a/src/selectors/index.js +++ b/src/selectors/index.js @@ -73,9 +73,22 @@ export const selectRegions = createSelector( * 3. exist in an active category */ export const selectEvents = createSelector( - [getEvents, getActiveFilters, getActiveCategories, getTimeRange, getFeatures], - (events, activeFilters, activeCategories, timeRange, features) => { - console.info("SELECTED EVENTS SELECTOR"); + [ + getEvents, + getActiveFilters, + getActiveCategories, + getActiveShapes, + getTimeRange, + getFeatures, + ], + ( + events, + activeFilters, + activeCategories, + activeShapes, + timeRange, + features + ) => { return events.reduce((acc, event) => { const isMatchingFilter = (event.associations && @@ -98,8 +111,14 @@ export const selectEvents = createSelector( isActiveTime = features.GRAPH_NONLOCATED ? (!event.latitude && !event.longitude) || isActiveTime : isActiveTime; - if (isActiveTime && isActiveCategory) { - if (event.type === SHAPE || isActiveFilter) { + const isActiveShape = + event.shape && activeShapes.includes(event.shape.id); + if (event.type === SHAPE) { + if (isActiveShape && isActiveCategory && isActiveTime) { + acc[event.id] = { ...event }; + } + } else { + if (isActiveFilter && isActiveCategory && isActiveTime) { acc[event.id] = { ...event }; } }