categorical column filters UI bug still persist but ok

snipe-bio · Nov 4, 2024 · 8d75a9e · 8d75a9e
1 parent 41a6887
commit 8d75a9e
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 11 deletions.
diff --git 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
@@ -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;
+}