Add a slider to control the alias similarity to show

The slider controls the "similarity threshold" (referred to as
 "closeness" in the UI).

Author: mtaylorgds

static/css/metrics.css

@@ -466,3 +466,73 @@ tr.selected td:first-child {
   color: #6b7280;
   padding: 16px;
 }
+
+/* Similarity Threshold Slider */
+.threshold-slider-container {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-left: auto;
+  margin-right: 20px;
+}
+
+.threshold-slider-container label {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #374151;
+  white-space: nowrap;
+}
+
+.threshold-slider {
+  width: 200px;
+  height: 4px;
+  border-radius: 2px;
+  background: #e5e7eb;
+  outline: none;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+.threshold-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: #3b82f6;
+  cursor: pointer;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.threshold-slider::-moz-range-thumb {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: #3b82f6;
+  cursor: pointer;
+  border: none;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.threshold-slider::-webkit-slider-thumb:hover {
+  background: #2563eb;
+}
+
+.threshold-slider::-moz-range-thumb:hover {
+  background: #2563eb;
+}
+
+.slider-with-labels {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.slider-labels {
+  display: flex;
+  justify-content: space-between;
+  width: 200px;
+  font-size: 0.75rem;
+  color: #6b7280;
+  font-weight: 500;
+}

templates/similar_aliases.html

@@ -17,8 +17,6 @@
   const { useState, useEffect, useMemo } = React;
   const runPath = "{{ run_path|e }}";
 
-  const similarityThreshold = 5;
-
   {% raw %}
   function SimilarAliasesDashboard() {
     const urlParams = new URLSearchParams(window.location.search);
@@ -39,6 +37,7 @@
     const [sortConfig, setSortConfig] = useState({ key: 'entity', direction: 'asc' });
     const [maxAliasSimilarity, setMaxAliasSimilarity] = useState(0);
     const [minAliasSimilarity, setMinAliasSimilarity] = useState(0);
+    const [similarityThreshold, setSimilarityThreshold] = useState(5);
 
     // Sync URL with filters
     useEffect(() => {
@@ -138,7 +137,7 @@
       });
 
       return result.filter(e => e.similar_aliases.length > 0);
-    }, [entities, filters]);
+    }, [entities, filters, similarityThreshold]);
 
     const sortedEntities = useMemo(() => {
       let sortableItems = [...filteredEntities];
@@ -233,6 +232,25 @@
             </div>
           ))}
           <button className="add-filter-btn" onClick={addFilter}>+ Add filter</button>
+          <div className="threshold-slider-container">
+            <label htmlFor="similarity-threshold">Closeness:</label>
+            <div className="slider-with-labels">
+              <input
+                id="similarity-threshold"
+                type="range"
+                min={minAliasSimilarity}
+                max={maxAliasSimilarity}
+                step="1"
+                value={similarityThreshold}
+                onChange={e => setSimilarityThreshold(e.target.value)}
+                className="threshold-slider"
+              />
+              <div className="slider-labels">
+                <span className="slider-label-start">more</span>
+                <span className="slider-label-end">less</span>
+              </div>
+            </div>
+          </div>
         </div>
 
         {/* Master Table */}