refactor: convert KDMA sliders to dropdown selects

PaulHax · PaulHax · commit 8d506eae1522 · 2025-08-26T17:04:18.000-04:00
- Replace range input sliders with select dropdowns for KDMA values
- Update event handler from handleRunKDMASliderInput to handleRunKDMAValueChange
- Remove slider-specific CSS and add dropdown styling
- Update all tests to use select_option() instead of fill() for dropdowns
- Remove redundant test_kdma_warning_system test
- Preserve test intent while adapting for dropdown behavior
diff --git a/align_browser/static/app.js b/align_browser/static/app.js
@@ -490,25 +490,18 @@ document.addEventListener("DOMContentLoaded", () => {
     });
   };
 
-  window.handleRunKDMASliderInput = async function(runId, kdmaType, sliderElement) {
+  window.handleRunKDMAValueChange = async function(runId, kdmaType, value) {
     const run = appState.pinnedRuns.get(runId);
     if (!run) return;
     
-    const normalizedValue = KDMAUtils.normalizeValue(sliderElement.value);
+    const normalizedValue = KDMAUtils.normalizeValue(value);
     
-    // Update the display value immediately for responsiveness
-    const valueDisplay = document.getElementById(`kdma-value-${runId}-${kdmaType}`);
-    if (valueDisplay) {
-      valueDisplay.textContent = KDMAUtils.formatValue(normalizedValue);
-    }
-    
-    // Update the KDMA values with debouncing
+    // Update the KDMA values
     await updateKDMAsForRun(runId, (kdmas) => ({
       ...kdmas,
       [kdmaType]: normalizedValue
     }), {
-      updateURL: true,
-      debounceMs: KDMA_SLIDER_DEBOUNCE_MS // Debounce to avoid too many requests while sliding
+      updateURL: true
     });
   };
 
diff --git a/align_browser/static/style.css b/align_browser/static/style.css
@@ -550,53 +550,15 @@ footer {
   box-shadow: 0 0 0 1px rgba(220, 53, 69, 0.25);
 }
 
-/* KDMA slider styling for table cells */
-.table-kdma-value-slider {
-  -webkit-appearance: none;
-  appearance: none;
-  min-width: 50px;
-  width: 80px;
-  flex: 0 1 80px;
-  height: 4px;
-  background: #ddd;
-  outline: none;
-  opacity: 0.9;
-  transition: opacity 0.2s;
-  border-radius: 4px;
-}
-
-.table-kdma-value-slider:hover {
-  opacity: 1;
-}
-
-.table-kdma-value-slider::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  appearance: none;
-  width: 16px;
-  height: 16px;
-  background: var(--accent-color);
-  cursor: pointer;
-  border-radius: 50%;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-}
-
-.table-kdma-value-slider::-moz-range-thumb {
-  width: 16px;
-  height: 16px;
-  background: var(--accent-color);
-  cursor: pointer;
-  border-radius: 50%;
-  border: none;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-}
-
-.table-kdma-value-display {
-  min-width: 24px;
-  text-align: center;
-  color: #495057;
-  font-weight: 600;
-  font-size: 11px;
-  flex-shrink: 0;
+/* KDMA value dropdown styling for table cells */
+.table-kdma-value-select {
+  min-width: 80px;
+  padding: 2px 4px;
+  border: 1px solid #ddd;
+  border-radius: 3px;
+  background-color: white;
+  font-size: 12px;
+  flex: 0 1 auto;
 }
 
 /* Notification system styles */
diff --git a/align_browser/static/table-formatter.js b/align_browser/static/table-formatter.js
@@ -820,13 +820,13 @@ export function createSingleKDMAControlForRun(runId, kdmaType, value, pinnedRuns
         ).join('')}
       </select>
       
-      <input type="range" 
-             class="table-kdma-value-slider"
-             id="kdma-slider-${runId}-${kdmaType}"
-             min="${minVal}" max="${maxVal}" step="${step}" 
-             value="${value}"
-             oninput="handleRunKDMASliderInput('${runId}', '${kdmaType}', this)">
-      <span class="table-kdma-value-display" id="kdma-value-${runId}-${kdmaType}">${formatKDMAValue(value)}</span>
+      <select class="table-kdma-value-select"
+              id="kdma-value-${runId}-${kdmaType}"
+              onchange="handleRunKDMAValueChange('${runId}', '${kdmaType}', this.value)">
+        ${validValues.map(val => 
+          `<option value="${val}" ${Math.abs(val - value) < FLOATING_POINT_TOLERANCE ? 'selected' : ''}>${formatKDMAValue(val)}</option>`
+        ).join('')}
+      </select>
       
       <button class="table-kdma-remove-btn" 
               onclick="removeKDMAFromRun('${runId}', '${kdmaType}')" 
diff --git a/align_browser/test_frontend.py b/align_browser/test_frontend.py
@@ -221,22 +221,23 @@ def test_kdma_type_filtering_prevents_duplicates(page, real_data_test_server):
     # Wait for any updates instead of fixed timeout
     page.wait_for_load_state("networkidle")
 
-    # Check KDMA sliders in table
-    kdma_sliders = page.locator(".table-kdma-value-slider")
-    slider_count = kdma_sliders.count()
+    # Check KDMA value dropdowns in table
+    kdma_dropdowns = page.locator(".table-kdma-value-select")
+    dropdown_count = kdma_dropdowns.count()
 
-    # KDMA sliders may or may not be available depending on selected ADM type
-    print(f"Found {slider_count} KDMA sliders for ADM: {selected_option}")
+    # KDMA dropdowns may or may not be available depending on selected ADM type
+    print(f"Found {dropdown_count} KDMA dropdowns for ADM: {selected_option}")
 
-    # Test that KDMA sliders are functional
-    if slider_count > 0:
-        first_slider = kdma_sliders.first
-        expect(first_slider).to_be_visible()
+    # Test that KDMA dropdowns are functional
+    if dropdown_count > 0:
+        first_dropdown = kdma_dropdowns.first
+        expect(first_dropdown).to_be_visible()
 
-        # Test slider functionality
-        first_slider.fill("0.5")
-        page.wait_for_timeout(500)
-        assert first_slider.input_value() == "0.5", "KDMA slider should be functional"
+        # Test dropdown interaction - select first available option that's different from current
+        options = first_dropdown.locator("option").all_text_contents()
+        if len(options) > 1:
+            first_dropdown.select_option(index=1)
+            page.wait_for_timeout(500)
 
 
 def test_kdma_max_limit_enforcement(page, real_data_test_server):
@@ -266,30 +267,29 @@ def test_kdma_max_limit_enforcement(page, real_data_test_server):
     # Wait for any updates instead of fixed timeout
     page.wait_for_load_state("networkidle")
 
-    # Test that KDMA sliders are present and functional
-    kdma_sliders = page.locator(".table-kdma-value-slider")
-    slider_count = kdma_sliders.count()
-
-    # Test passes regardless of KDMA slider availability - depends on selected ADM
-    print(f"Found {slider_count} KDMA sliders for ADM: {selected_option}")
-
-    # Test slider functionality
-    if slider_count > 0:
-        first_slider = kdma_sliders.first
-        expect(first_slider).to_be_visible()
-        first_slider.fill("0.3")
-        # Wait for value to update
-        page.wait_for_function(
-            "document.querySelector('.table-kdma-value-slider').value === '0.3'"
-        )
-        assert first_slider.input_value() == "0.3", "KDMA slider should be functional"
+    # Test that KDMA dropdowns are present and functional
+    kdma_dropdowns = page.locator(".table-kdma-value-select")
+    dropdown_count = kdma_dropdowns.count()
+
+    # Test passes regardless of KDMA dropdown availability - depends on selected ADM
+    print(f"Found {dropdown_count} KDMA dropdowns for ADM: {selected_option}")
+
+    # Test dropdown functionality
+    if dropdown_count > 0:
+        first_dropdown = kdma_dropdowns.first
+        expect(first_dropdown).to_be_visible()
+        # Get available options and select a different one if possible
+        options = first_dropdown.locator("option").all_text_contents()
+        if len(options) > 1:
+            first_dropdown.select_option(index=1)
+            page.wait_for_timeout(500)
 
     # Verify table continues to work after changes
     expect(page.locator(".comparison-table")).to_be_visible()
 
 
 def test_kdma_removal_updates_constraints(page, real_data_test_server):
-    """Test that KDMA sliders are functional in table-based UI."""
+    """Test that KDMA dropdowns are functional in table-based UI."""
     page.goto(real_data_test_server)
 
     # Wait for page to load
@@ -311,70 +311,30 @@ def test_kdma_removal_updates_constraints(page, real_data_test_server):
         adm_select.select_option(adm_options[0])
     page.wait_for_timeout(1000)
 
-    # Check for KDMA sliders in the table
-    kdma_sliders = page.locator(".table-kdma-value-slider")
-    initial_slider_count = kdma_sliders.count()
+    # Check for KDMA dropdowns in the table
+    kdma_dropdowns = page.locator(".table-kdma-value-select")
+    initial_dropdown_count = kdma_dropdowns.count()
 
-    if initial_slider_count > 0:
-        # Test that sliders are functional
-        first_slider = kdma_sliders.first
-        expect(first_slider).to_be_visible()
+    if initial_dropdown_count > 0:
+        # Test that dropdowns are functional
+        first_dropdown = kdma_dropdowns.first
+        expect(first_dropdown).to_be_visible()
 
-        # Test changing slider value
-        first_slider.fill("0.5")
-        # Wait for value to update
-        page.wait_for_function(
-            "document.querySelector('.table-kdma-value-slider').value === '0.5'"
-        )
+        # Select different option if available
+        options = first_dropdown.locator("option").all_text_contents()
+        if len(options) > 1:
+            first_dropdown.select_option(index=1)
+            page.wait_for_timeout(500)
 
-        # Verify slider value updated
-        assert first_slider.input_value() == "0.5", "KDMA slider should update value"
+            # Verify dropdown value updated
+            assert first_dropdown.locator("option:checked").count() == 1, (
+                "KDMA dropdown should have selected value"
+            )
 
         # Verify table still functions
         expect(page.locator(".comparison-table")).to_be_visible()
 
 
-def test_kdma_warning_system(page, real_data_test_server):
-    """Test that KDMA warning system shows for invalid values."""
-    page.goto(real_data_test_server)
-
-    # Wait for page to load
-    page.wait_for_selector(".comparison-table", timeout=10000)
-    page.wait_for_function(
-        "document.querySelectorAll('.table-adm-select').length > 0", timeout=10000
-    )
-
-    # Select ADM and add KDMA
-    # Use available ADM option from test data
-    adm_select = page.locator(".table-adm-select").first
-    available_options = adm_select.locator("option").all()
-    adm_options = [
-        opt.get_attribute("value")
-        for opt in available_options
-        if opt.get_attribute("value")
-    ]
-    if adm_options:
-        adm_select.select_option(adm_options[0])
-    page.wait_for_timeout(1000)
-
-    # Check for KDMA sliders in the table
-    kdma_sliders = page.locator(".table-kdma-value-slider")
-
-    if kdma_sliders.count() > 0:
-        # Get first KDMA slider
-        slider = kdma_sliders.first
-
-        # Test slider functionality
-        slider.fill("0.5")
-        # Wait for value to update
-
-        # Verify slider works
-        assert slider.input_value() == "0.5", "KDMA slider should accept valid values"
-    else:
-        # Skip test if no KDMA sliders available
-        pass
-
-
 def test_kdma_adm_change_resets_properly(page, real_data_test_server):
     """Test that changing ADM type properly updates available controls."""
     page.goto(real_data_test_server)
@@ -475,19 +435,21 @@ def test_scenario_based_kdma_filtering(page, real_data_test_server):
         adm_select.select_option(selected_option)
         page.wait_for_load_state("networkidle")
 
-        # Check what KDMA sliders are available in table
-        kdma_sliders = page.locator(".table-kdma-value-slider")
-        slider_count = kdma_sliders.count()
+        # Check what KDMA dropdowns are available in table
+        kdma_dropdowns = page.locator(".table-kdma-value-select")
+        dropdown_count = kdma_dropdowns.count()
 
-        if slider_count > 0:
-            # For table-based UI, we test slider functionality instead of dropdown selection
-            first_slider = kdma_sliders.first
-            first_slider.fill("0.5")
-            # Wait for updates to complete
-            page.wait_for_load_state("networkidle")
+        if dropdown_count > 0:
+            # For table-based UI, we test dropdown functionality
+            first_dropdown = kdma_dropdowns.first
+            options = first_dropdown.locator("option").all_text_contents()
+            if len(options) > 1:
+                first_dropdown.select_option(index=1)
+                # Wait for updates to complete
+                page.wait_for_load_state("networkidle")
 
             scenario_kdma_mapping[scenario_type] = ["kdma_available"]
-            print(f"  KDMA sliders available: {slider_count}")
+            print(f"  KDMA dropdowns available: {dropdown_count}")
 
             # Check results in table format
             expect(page.locator(".comparison-table")).to_be_visible()
diff --git a/align_browser/test_frontend_real_data.py b/align_browser/test_frontend_real_data.py
