Highlight active search constraints on results pages (LMFDB#2770)

On search results pages, inputs that constrain the displayed query are now
visually distinguished with a subtle yellow tint so users can see at a glance
why results are filtered.

What/why: constraint-eligible search boxes render a `search_constraint` class
on results pages, plus `search_active` when their value in `info` is non-empty;
CSS tints active text/select backgrounds and rings active checkboxes. Display
controls (count, sort/column selectors, DynStats variable boxes, and diagram
axis/color selectors) set `is_constraint = False` so they are never
highlighted. Hidden inputs are untouched. A small JS hook keeps the highlight
live as the user edits, pairing with the existing stale/fresh button signal.

How verified: flask test client across elliptic curves, number fields, abstract
groups, abvar/Fq (checkbox), modular-curve/groups diagram search, and DynStats;
browse pages render unchanged; direct unit checks of every box subclass; all 19
color schemes resolve the new `search_active_background` key; /style.css renders;
ECQ diagram-search and CMF dynamic-stats tests pass; pyflakes clean.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: roed314

lmfdb/templates/diagram_search_form.html

@@ -52,4 +52,14 @@ <h2 id='search_h2'>{{KNOWL('intro.search', search_header)}}
 
 $("input").on("input", set_fresh);
 $("select").on("change", set_fresh);
+
+function update_search_active() {
+  var box = $(this);
+  if (box.is("[type=checkbox]")) {
+    box.toggleClass("search_active", box.prop("checked"));
+  } else {
+    box.toggleClass("search_active", Boolean(box.val()));
+  }
+}
+$(".search_constraint").on("input change", update_search_active);
 </script>

lmfdb/templates/refine_search_form.html

@@ -41,5 +41,15 @@ <h2 id='search_h2'>{{KNOWL('intro.search', search_header)}}
 
 $("input").on("input", set_fresh);
 $("select").on("change", set_fresh);
+
+function update_search_active() {
+  var box = $(this);
+  if (box.is("[type=checkbox]")) {
+    box.toggleClass("search_active", box.prop("checked"));
+  } else {
+    box.toggleClass("search_active", Boolean(box.val()));
+  }
+}
+$(".search_constraint").on("input change", update_search_active);
 </script>
 

lmfdb/templates/style.css

@@ -2333,3 +2333,13 @@ button.search_stale, button.search_stale:hover {
 button.search_fresh {
   background: {{color.button_background}};
 }
+
+/* Highlight inputs that are actively constraining the displayed search results */
+input.search_active, select.search_active {
+  background: {{color.search_active_background}};
+}
+/* Checkboxes are rendered natively, so mark them with a ring instead */
+input[type=checkbox].search_active {
+  outline: 3px solid {{color.search_active_background}};
+  outline-offset: 1px;
+}

lmfdb/utils/color.py

@@ -196,6 +196,8 @@ class ColorScheme():
         # Buttons
         'button_background': 'col_main_b',
         'select_background': 'col_main_ll',
+        # Background for search inputs actively constraining the results shown
+        'search_active_background': '#FFF9C4', # P2-100
         'button_border': 'col_main_lg',
         'button_background_hover': 'col_main_l',
         'button_border_hover': 'col_main_lg',

lmfdb/utils/search_boxes.py

@@ -90,6 +90,27 @@ class SearchBox(TdElt):
     Class abstracting the input boxes used for LMFDB searches.
     """
     _default_width = 160
+    # Whether filling this box constrains the displayed search results
+    # (set to False for boxes that only affect the display, like the
+    # number of results to show or the sort order)
+    is_constraint = True
+
+    def _classes(self, info):
+        """
+        The CSS classes for this box's input element: ``advanced`` for inputs
+        only shown when advanced options are toggled, ``search_constraint``
+        for inputs that constrain the search results when filled in, and
+        ``search_active`` when such an input is currently filled in, so that
+        it can be highlighted on search results pages.
+        """
+        classes = []
+        if self.advanced:
+            classes.append("advanced")
+        if info is not None and self.is_constraint:
+            classes.append("search_constraint")
+            if info.get(self.name) not in (None, ""):
+                classes.append("search_active")
+        return classes
 
     def __init__(
         self,
@@ -223,8 +244,9 @@ def _input(self, info):
         keys = self.extra + ['type="text"', 'name="%s"' % self.name]
         if self.id is not None:
             keys.append('id="%s"' % self.id)
-        if self.advanced:
-            keys.append('class="advanced"')
+        classes = self._classes(info)
+        if classes:
+            keys.append('class="%s"' % " ".join(classes))
         if self.example is not None:
             if self.example_value and info is None:
                 keys.append('value="%s"' % self.example)
@@ -312,8 +334,9 @@ def _input(self, info):
         keys = self.extra + ['name="%s"' % self.name]
         if self.id is not None:
             keys.append('id="%s"' % self.id)
-        if self.advanced:
-            keys.append('class="advanced"')
+        classes = self._classes(info)
+        if classes:
+            keys.append('class="%s"' % " ".join(classes))
         if self.example_value and info is None:
             info = {self.name:self.example}
         if info is None:
@@ -368,8 +391,9 @@ def _input(self, info=None):
 class CheckBox(SearchBox):
     def _input(self, info=None):
         keys = ['name="%s"' % self.name, 'value="yes"']
-        if self.advanced:
-            keys.append('class="advanced"')
+        classes = self._classes(info)
+        if classes:
+            keys.append('class="%s"' % " ".join(classes))
         if info is not None and info.get(self.name, False):
             keys.append("checked")
         return '<input type="checkbox" %s>' % (" ".join(keys),)
@@ -471,6 +495,8 @@ class SubsetNoExcludeBox(SelectBox):
                 ('subset', 'subset')]
 
 class CountBox(TextBox):
+    is_constraint = False
+
     def __init__(self):
         TextBox.__init__(
             self,
@@ -483,6 +509,7 @@ def __init__(self):
 
 class ColumnController(SelectBox):
     wrap_mixins = {'width': '170px'}
+    is_constraint = False
 
     def __init__(self):
         super().__init__(
@@ -559,6 +586,7 @@ def _input(self, info):
 
 class SortController(SelectBox):
     wrap_mixins = {'width': '170px'}
+    is_constraint = False
 
     def __init__(self, options, knowl):
         extra = [
@@ -801,6 +829,10 @@ def dynstats_array(self, info):
                     label="Proportions" if i == 1 else "",
                     rowspan=(1, 2),
                     knowl="stats.proportions" if i == 1 else None)
+                for box in (cols, buckets, totals, proportions):
+                    # These select the variables and format for the statistics
+                    # display rather than constraining the underlying results
+                    box.is_constraint = False
                 if i == 1:
                     array.append([cols, buckets, totals, proportions])
                 else:

lmfdb/utils/search_wrapper.py

@@ -574,6 +574,11 @@ def flatten(L):
             SelectBox(name="color", label="Color", options=color_fields),
             CountBox(),
         ]
+        for box in info["diagram_boxes"]:
+            # These choose how the diagram is drawn (which fields go on each
+            # axis and how many points to show) rather than constraining the
+            # underlying results, so they are not highlighted as active.
+            box.is_constraint = False
 
         # Build query using the same parsing function
         data = self.make_query(info, False)