Merge pull request #44 from alphagov/acw-69/see-similar-aliases

Add a page to view "similar" aliases

Author: daymohlar

app.py

@@ -126,6 +126,12 @@ def get_status(job_id):
             return jsonify({"error": "Job ID not found"}), 404
         return jsonify(status_info), 200
 
+    @app.route("/outliers/similar-aliases", methods=["GET"])
+    def see_similar_aliases():
+        """View aliases that are (syntactically) similar to other aliases of the same entity."""
+        run_path_param = request.args.get("run_path", "")
+        return render_template("similar_aliases.html", run_path=run_path_param)
+
     @app.errorhandler(BadRequest)
     def handle_bad_request(e):
         return jsonify({"error": e.description}), 400

graph-viewmodel.json

@@ -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;
+}