From 8d75a9e0b574d2f37a16634fe31aae84f1e080d3 Mon Sep 17 00:00:00 2001
From: Mohamed Abuelanin <mabuelanin@gmail.com>
Date: Mon, 4 Nov 2024 08:49:10 -0800
Subject: [PATCH] categorical column filters UI bug still persist but ok

---
 index.html | 39 ++++++++++++++++++++++++++++-----------
 styles.css | 22 ++++++++++++++++++++++
 2 files changed, 50 insertions(+), 11 deletions(-)

diff --git a/index.html b/index.html
index 946cfca..57b5e78 100644
--- a/index.html
+++ b/index.html
@@ -2774,16 +2774,16 @@ <h5 id="plot-title-display-${plotId}" class="mb-0 text-center">Plot ${plotCounte
 
             if (isFirstGroup) {
                 logicSelect.innerHTML = `
-            <option value="">(Select Logic)</option>
-            <option value="NOT">NOT</option>
-        `;
+                    <option value="">(Select Logic)</option>
+                    <option value="NOT">NOT</option>
+                `;
                 logicSelect.value = existingGroup && existingGroup.logic ? existingGroup.logic : '';
             } else {
                 logicSelect.innerHTML = `
-            <option value="AND">AND</option>
-            <option value="OR">OR</option>
-            <option value="NOT">NOT</option>
-        `;
+                    <option value="AND">AND</option>
+                    <option value="OR">OR</option>
+                    <option value="NOT">NOT</option>
+                `;
                 logicSelect.value = existingGroup && existingGroup.logic ? existingGroup.logic : 'AND';
             }
 
@@ -2975,7 +2975,7 @@ <h5 id="plot-title-display-${plotId}" class="mb-0 text-center">Plot ${plotCounte
                 });
             }
 
-            function createCategoricalFilter(container, column, selectedCategories) {
+            function createCategoricalFilter(container, column, selectedCategories = []) {
                 container.innerHTML = ''; // Clear existing content
 
                 // Create input for autocomplete
@@ -3051,8 +3051,13 @@ <h5 id="plot-title-display-${plotId}" class="mb-0 text-center">Plot ${plotCounte
                     updateDatalistOptions();
                 }
 
-                // Add existing tags
-                selectedCategories.forEach(val => addTag(val));
+                if (Array.isArray(selectedCategories) && selectedCategories.length > 0) {
+                    selectedCategories.forEach(val => {
+                        if (categories.includes(val)) { // Ensure the value is valid
+                            addTag(val);
+                        }
+                    });
+                }
 
                 // Handle selection from autocomplete
                 autocompleteInput.addEventListener('change', () => {
@@ -3079,6 +3084,8 @@ <h5 id="plot-title-display-${plotId}" class="mb-0 text-center">Plot ${plotCounte
                 updateDatalistOptions();
             }
 
+
+            // Event listener for column selection
             // Event listener for column selection
             columnSelect.addEventListener('change', () => {
                 const selectedColumn = columnSelect.value;
@@ -3182,7 +3189,17 @@ <h5 id="plot-title-display-${plotId}" class="mb-0 text-center">Plot ${plotCounte
 
         // Function to set filters for a plot
         function setPlotFilters(plotId, filters) {
-            plotFilters[plotId] = filters;
+            plotFilters[plotId] = filters.map(filter => {
+                // Determine if the filter's column is numerical
+                const numerical = isNumerical(filter.column);
+
+                // If the column is categorical, ensure 'value' is an array
+                if (!numerical) {
+                    filter.value = Array.isArray(filter.value) ? filter.value : [];
+                }
+
+                return filter;
+            });
         }
 
         // Ensure that the Filter button is added to each plot
diff --git a/styles.css b/styles.css
index 7166db1..0185745 100644
--- a/styles.css
+++ b/styles.css
@@ -1314,3 +1314,25 @@ tr:nth-child(even) {
     width: 100%;
 }
 
+
+.tags-container {
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: 5px;
+}
+
+.tag {
+    display: inline-flex;
+    align-items: center;
+    padding: 5px;
+    margin: 2px;
+    background-color: #007bff;
+    color: #fff;
+    border-radius: 3px;
+    font-size: 0.9em;
+}
+
+.tag span {
+    cursor: pointer;
+    margin-left: 5px;
+}