From d3c4c44da5843aa57a24746e9215749c6c10f834 Mon Sep 17 00:00:00 2001
From: efarooqui <efarooqui@pandora.com>
Date: Thu, 6 May 2021 16:42:29 -0700
Subject: [PATCH] Working aggregate filter paths with path as key; need to
 reorganize coloring algorithm

---
 src/common/utilities.js                    |  5 +++++
 src/components/controls/FilterListPanel.js | 10 +++++-----
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/common/utilities.js b/src/common/utilities.js
index 145cdc6..b9b1817 100644
--- a/src/common/utilities.js
+++ b/src/common/utilities.js
@@ -7,6 +7,11 @@ if (!TIME_FMT) TIME_FMT = "HH:mm";
 
 export const language = process.env.store.app.language || "en-US";
 
+export function getPathLeaf(path) {
+  const splitPath = path.split("/");
+  return splitPath[splitPath.length - 1];
+}
+
 export function calcDatetime(date, time) {
   if (!time) time = "00:00";
   const dt = moment(`${date} ${time}`, `${DATE_FMT} ${TIME_FMT}`);
diff --git a/src/components/controls/FilterListPanel.js b/src/components/controls/FilterListPanel.js
index 16529e6..0a9ecdd 100644
--- a/src/components/controls/FilterListPanel.js
+++ b/src/components/controls/FilterListPanel.js
@@ -2,7 +2,7 @@ import React from "react";
 import Checkbox from "../atoms/Checkbox";
 import marked from "marked";
 import copy from "../../common/data/copy.json";
-import { getFilterIdxFromColorSet } from "../../common/utilities";
+import { getFilterIdxFromColorSet, getPathLeaf } from "../../common/utilities";
 
 /** recursively get an array of node keys to toggle */
 function getFiltersToToggle(filter, activeFilters) {
@@ -26,8 +26,7 @@ function aggregatePaths(filters) {
     accumulatedPath
   ) {
     const childKey = Object.keys(children).find((path) => {
-      const splitPath = path.split("/");
-      const pathLeaf = splitPath[splitPath.length - 1];
+      const pathLeaf = getPathLeaf(path);
       return pathLeaf === headOfPath;
     });
     accumulatedPath.push(headOfPath);
@@ -57,6 +56,7 @@ function FilterListPanel({
 }) {
   function createNodeComponent(filter, depth) {
     const [key, children] = filter;
+    const pathLeaf = getPathLeaf(key);
     const matchingKeys = getFiltersToToggle(filter, activeFilters);
     const idxFromColorSet = getFilterIdxFromColorSet(key, coloringSet);
     const assignedColor =
@@ -71,12 +71,12 @@ function FilterListPanel({
 
     return (
       <li
-        key={key.replace(/ /g, "_")}
+        key={pathLeaf.replace(/ /g, "_")}
         className="filter-filter"
         style={{ ...styles }}
       >
         <Checkbox
-          label={key}
+          label={pathLeaf}
           isActive={activeFilters.includes(key)}
           onClickCheckbox={() => onSelectFilter(key, matchingKeys)}
           color={assignedColor}