Refactored all of filter logic to accomodate for paths instead of simply looking at leaf node in tree; fixes bugs where leaf path is non-unique

src/components/Toolbar.js

@@ -13,7 +13,9 @@ import {
   trimAndEllipse,
   getImmediateFilterParent,
   getFilterSiblings,
-  getFilterParents,
+  getFilterAncestors,
+  addToColoringSet,
+  removeFromColoringSet,
 } from "../common/utilities.js";
 
 class Toolbar extends React.Component {
@@ -31,32 +33,15 @@ class Toolbar extends React.Component {
   onSelectFilter(key, matchingKeys) {
     const { filters, activeFilters, coloringSet, maxNumOfColors } = this.props;
 
-    const parent = getImmediateFilterParent(filters, key);
+    const parent = getImmediateFilterParent(key);
     const isTurningOff = activeFilters.includes(key);
 
     if (!isTurningOff) {
-      const flattenedColoringSet = coloringSet.flatMap((f) => f);
-      const newColoringSet = matchingKeys.filter(
-        (k) => flattenedColoringSet.indexOf(k) === -1
-      );
-
-      const updatedColoringSet = [...coloringSet, newColoringSet];
-
+      const updatedColoringSet = addToColoringSet(coloringSet, matchingKeys);
       if (updatedColoringSet.length <= maxNumOfColors) {
         this.props.actions.updateColoringSet(updatedColoringSet);
       }
     } else {
-      const newColoringSets = coloringSet.map((set) =>
-        set.filter((s) => {
-          return !matchingKeys.includes(s);
-        })
-      );
-      this.props.actions.updateColoringSet(
-        newColoringSets.filter((item) => item.length !== 0)
-      );
-    }
-
-    if (isTurningOff) {
       if (parent && activeFilters.includes(parent)) {
         const siblings = getFilterSiblings(filters, parent, key);
         let siblingsOff = true;
@@ -68,12 +53,18 @@ class Toolbar extends React.Component {
         }
 
         if (siblingsOff) {
-          const grandparentsOn = getFilterParents(filters, key).filter((filt) =>
+          const grandparentsOn = getFilterAncestors(key).filter((filt) =>
             activeFilters.includes(filt)
           );
           matchingKeys = matchingKeys.concat(grandparentsOn);
         }
       }
+
+      const updatedColoringSet = removeFromColoringSet(
+        coloringSet,
+        matchingKeys
+      );
+      this.props.actions.updateColoringSet(updatedColoringSet);
     }
     this.props.methods.onSelectFilter(matchingKeys);
   }

src/components/controls/FilterListPanel.js

@@ -2,7 +2,11 @@ import React from "react";
 import Checkbox from "../atoms/Checkbox";
 import marked from "marked";
 import copy from "../../common/data/copy.json";
-import { getFilterIdxFromColorSet, getPathLeaf } from "../../common/utilities";
+import {
+  aggregateFilterPaths,
+  getFilterIdxFromColorSet,
+  getPathLeaf,
+} from "../../common/utilities";
 
 /** recursively get an array of node keys to toggle */
 function getFiltersToToggle(filter, activeFilters) {
@@ -19,33 +23,6 @@ function getFiltersToToggle(filter, activeFilters) {
   return childKeys;
 }
 
-function aggregatePaths(filters) {
-  function insertPath(
-    children = {},
-    [headOfPath, ...remainder],
-    accumulatedPath
-  ) {
-    const childKey = Object.keys(children).find((path) => {
-      const pathLeaf = getPathLeaf(path);
-      return pathLeaf === headOfPath;
-    });
-    accumulatedPath.push(headOfPath);
-    const accumulatedPlusHead = accumulatedPath.join("/");
-    if (!childKey) children[accumulatedPlusHead] = {};
-    if (remainder.length > 0)
-      insertPath(children[accumulatedPlusHead], remainder, accumulatedPath);
-    return children;
-  }
-
-  const allPaths = [];
-  filters.forEach((filterItem) => allPaths.push(filterItem.filter_paths));
-  const aggregatedPaths = allPaths.reduce(
-    (children, path) => insertPath(children, path, []),
-    {}
-  );
-  return aggregatedPaths;
-}
-
 function FilterListPanel({
   filters,
   activeFilters,
@@ -91,7 +68,7 @@ function FilterListPanel({
   }
 
   function renderTree(filters) {
-    const aggregatedFilterPaths = aggregatePaths(filters);
+    const aggregatedFilterPaths = aggregateFilterPaths(filters);
 
     return (
       <div>