All filters working in conjunction; can filter on shape, filter, and category separately

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}
       />
     </div>
   );

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}
       />
     </div>
   );

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 (
     <div>
       {data.map((val) => {
-        const isActive = activeValues.includes(val.title);
         return (
           <li
             key={val.title.replace(/ /g, "_")}
@@ -14,8 +16,8 @@ const PanelTree = ({ data, activeValues, onSelect }) => {
           >
             <Checkbox
               label={val.title}
-              isActive={isActive}
-              onClickCheckbox={() => onSelect(val.title)}
+              isActive={activeValues.includes(val[onSelectionType])}
+              onClickCheckbox={() => onSelect(val[onSelectionType])}
               styleProps={val.styles}
             />
           </li>