Add dual-handle height range slider with dynamic min/max based on filtered plants

Author: ZacharyLeahan

lib/server.js

@@ -879,6 +879,104 @@ module.exports = async function ({ plants, nurseries }) {
           }
         }
       }
+      // Calculate min/max height from filtered plants (excluding height filter)
+      let heightRange = { min: 0, max: 0 };
+      if (!req.query.favorites) {
+        const heightFilter = filters.find(f => f.name === "Height (feet)");
+        if (heightFilter && heightFilter.range) {
+          // Rebuild all filter conditions from req.query, excluding height filter
+          // This ensures we include ALL user filters (States, Sun Exposure, etc.)
+          const heightMatchAnd = [];
+          for (const filter of filters) {
+            // Skip the height filter itself
+            if (filter.name === "Height (feet)") {
+              continue;
+            }
+            
+            if (filter.range) {
+              const min = parseInt(req.query?.[filter.name]?.min);
+              const max = parseInt(req.query?.[filter.name]?.max);
+              if (
+                !isNaN(min) &&
+                !isNaN(max) &&
+                min <= max &&
+                (min !== 0 || max !== filter.choices.length - 1)
+              ) {
+                const $in = [];
+                for (let i = min; i <= max; i++) {
+                  $in.push(i);
+                }
+                if ($in.length) {
+                  heightMatchAnd.push({
+                    [filter.byNumber]: {
+                      $in,
+                    },
+                  });
+                }
+              }
+            } else if (filter.boolean) {
+              let input = req.query[filter.name] || [];
+              if (input && input.length) {
+                heightMatchAnd.push({
+                  [filter.name]: true,
+                });
+              }
+            } else if (filter.array) {
+              let input = req.query[filter.name] || [];
+              if (!Array.isArray(input)) {
+                input = [input];
+              }
+              if (input && input.length) {
+                heightMatchAnd.push({
+                  [filter.name]: {
+                    $in: input,
+                  },
+                });
+              }
+            }
+          }
+          
+          // Build match query with all filters except height
+          const matchQuery = {};
+          if (heightMatchAnd.length > 0) {
+            matchQuery.$and = heightMatchAnd;
+          }
+          
+          // For semantic search, use scoredResults if available
+          if (query._useSemantic && scoredResults) {
+            const allHeights = [];
+            for (const plant of scoredResults) {
+              const heights = plant["Height (feet) By Number"];
+              if (Array.isArray(heights) && heights.length > 0) {
+                allHeights.push(...heights);
+              }
+            }
+            if (allHeights.length > 0) {
+              heightRange.min = Math.min(...allHeights);
+              heightRange.max = Math.max(...allHeights);
+            }
+          } else {
+            // Use aggregation to find min/max from filtered plants
+            const heightAggregation = await plants.aggregate([
+              { $match: matchQuery },
+              { $unwind: { path: `$${heightFilter.byNumber}`, preserveNullAndEmptyArrays: false } },
+              {
+                $group: {
+                  _id: null,
+                  minHeight: { $min: `$${heightFilter.byNumber}` },
+                  maxHeight: { $max: `$${heightFilter.byNumber}` }
+                }
+              }
+            ]).toArray();
+            
+            if (heightAggregation.length > 0 && heightAggregation[0].minHeight !== null) {
+              heightRange.min = heightAggregation[0].minHeight;
+              heightRange.max = heightAggregation[0].maxHeight;
+            }
+          }
+        }
+      }
+      
       let response = {
         results,
         total,
@@ -898,6 +996,7 @@ module.exports = async function ({ plants, nurseries }) {
                 ),
             ])
           ),
+          heightRange: heightRange,
         };
       }
       for (const filter of filters) {

src/components/Explorer.vue

@@ -645,7 +645,7 @@ export default {
       {
         name: "Height (feet)",
         range: true,
-        double: false,
+        double: true,
         choices: [],
         min: 0,
         max: 0,
@@ -2399,6 +2399,62 @@ export default {
         for (const filter of this.filters) {
           filter.choices = data.choices[filter.name];
         }
+        // Update height filter min/max based on filtered plants
+        if (data.heightRange && data.heightRange.min !== undefined && data.heightRange.max !== undefined) {
+          const heightFilter = this.filters.find(f => f.name === "Height (feet)");
+          if (heightFilter) {
+            const oldMin = heightFilter.min;
+            const oldMax = heightFilter.max;
+            // Only update if we have a valid range (max >= min) and it's not the default 0-0 (no plants)
+            // Also update if we're initializing (oldMin === oldMax === 0)
+            const isInitializing = oldMin === 0 && oldMax === 0;
+            if (data.heightRange.max >= data.heightRange.min && (data.heightRange.max > 0 || isInitializing)) {
+              heightFilter.min = data.heightRange.min;
+              heightFilter.max = data.heightRange.max;
+              // Update choices to match the available range
+              if (heightFilter.choices && heightFilter.choices.length > 0) {
+                heightFilter.choices = heightFilter.choices.filter(
+                  choice => choice >= data.heightRange.min && choice <= data.heightRange.max
+                );
+              } else {
+                // Generate choices array if not present
+                heightFilter.choices = [];
+                for (let i = data.heightRange.min; i <= data.heightRange.max; i++) {
+                  heightFilter.choices.push(i);
+                }
+              }
+              // Adjust filter value if it's outside the new range
+              const currentValue = this.filterValues[heightFilter.name];
+              if (currentValue) {
+                let needsUpdate = false;
+                const newValue = { ...currentValue };
+                if (currentValue.min < data.heightRange.min) {
+                  newValue.min = data.heightRange.min;
+                  needsUpdate = true;
+                }
+                if (currentValue.max > data.heightRange.max) {
+                  newValue.max = data.heightRange.max;
+                  needsUpdate = true;
+                }
+                // If range was reset (oldMin === oldMax === 0), set to full range
+                if (isInitializing && data.heightRange.max >= data.heightRange.min) {
+                  newValue.min = data.heightRange.min;
+                  newValue.max = data.heightRange.max;
+                  needsUpdate = true;
+                }
+                if (needsUpdate) {
+                  this.filterValues[heightFilter.name] = newValue;
+                }
+              } else {
+                // Initialize to full range if no value set
+                this.filterValues[heightFilter.name] = {
+                  min: data.heightRange.min,
+                  max: data.heightRange.max
+                };
+              }
+            }
+          }
+        }
       }
       if (!data.results.length || this.favorites) {
         this.loadedAll = true;

src/components/Range.vue

@@ -18,6 +18,16 @@
         </li>
       </ul>
     </div>
+    <button 
+      v-if="isFilterActive" 
+      class="range-clear-button" 
+      @click="clearFilter"
+      type="button"
+      title="Clear height filter"
+    >
+      <span class="material-icons">close</span>
+      Clear
+    </button>
   </div>
 </template>
 
@@ -50,6 +60,12 @@ export default {
     }
   },
   emits: [ 'update:modelValue' ],
+  computed: {
+    isFilterActive() {
+      // Filter is active if current values differ from min/max range
+      return this.modelValue.min !== this.min || this.modelValue.max !== this.max;
+    }
+  },
   data() {
     return {
       isDown: false,
@@ -169,6 +185,13 @@ export default {
     valueToPixels(value) {
       const linearUnit = (value - this.min) / (this.max - this.min);
       return Math.pow(linearUnit, 1 / this.exponent) * this.clientWidth;
+    },
+    clearFilter() {
+      // Reset to full range
+      this.$emit('update:modelValue', {
+        min: this.min,
+        max: this.max
+      });
     }
   }
 };
@@ -221,4 +244,26 @@ export default {
     height: 2em;
     list-style: none;
   }
+  .range-clear-button {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    margin-top: 8px;
+    padding: 6px 12px;
+    background-color: #fcf9f4;
+    color: #b74d15;
+    border: 1px solid #b74d15;
+    border-radius: 4px;
+    font-size: 14px;
+    font-family: Roboto;
+    cursor: pointer;
+    transition: background-color 0.2s, color 0.2s;
+  }
+  .range-clear-button:hover {
+    background-color: #b74d15;
+    color: #fcf9f4;
+  }
+  .range-clear-button .material-icons {
+    font-size: 16px;
+  }
 </style>