From 258cc0a4092fee3f95eb4e6a231bbe0c1ca41a57 Mon Sep 17 00:00:00 2001
From: James R <jamesren64@gmail.com>
Date: Sat, 20 Sep 2025 11:26:01 -0500
Subject: [PATCH] implement instrument similarities in front end

---
 src/components/AppBar.js                 |  4 +-
 src/components/InstrumentSimilarities.js | 54 ++++++++++++++++++++++++
 src/components/Results.js                |  6 +++
 src/contexts/DataContext.js              |  2 +
 src/utilities/simplifyApi.js             |  6 ++-
 5 files changed, 69 insertions(+), 3 deletions(-)
 create mode 100644 src/components/InstrumentSimilarities.js

diff --git a/src/components/AppBar.js b/src/components/AppBar.js
index 396ad08..599a9b6 100644
--- a/src/components/AppBar.js
+++ b/src/components/AppBar.js
@@ -48,7 +48,7 @@ function HarmonyAppBar() {
       .then((ver) => {
         setApiVersion(ver);
       })
-      .catch((e) => setError("ERROR: API unreachable"));
+      .catch((e) => setError("ERROR: API unreachable (version)"));
   }, [getVersion]);
 
   React.useEffect(() => {
@@ -56,7 +56,7 @@ function HarmonyAppBar() {
       .then((models) => {
         setAllModels(models);
       })
-      .catch((e) => setError("ERROR: API unreachable"));
+      .catch((e) => setError("ERROR: API unreachable (models)"));
   }, [getModels]);
 
   const handleModelSelect = (event) => {
diff --git a/src/components/InstrumentSimilarities.js b/src/components/InstrumentSimilarities.js
new file mode 100644
index 0000000..c9ed9c9
--- /dev/null
+++ b/src/components/InstrumentSimilarities.js
@@ -0,0 +1,54 @@
+import React from "react";
+import { Card, Box, Typography, Chip, Stack, Divider } from "@mui/material";
+
+export default function InstrumentSimilarities({ similarities }) {
+  if (!similarities || !similarities.length) return null;
+
+  return (
+    <Card
+      variant="outlined"
+      sx={{
+        display: "flex",
+        width: "100%",
+        padding: "1rem",
+        margin: "0 0 1rem 0",
+        flexDirection: "column",
+        gap: 1,
+      }}
+    >
+      <Typography variant="h6" sx={{ mb: 1 }}>
+        Instrument similarities
+      </Typography>
+      <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
+        These scores indicate how similar each pair of instruments is overall.
+      </Typography>
+
+      <Stack direction="column" divider={<Divider flexItem />} spacing={1}>
+        {similarities.map((s, idx) => (
+          <Box key={idx} sx={{ display: "flex", alignItems: "center", gap: 2, flexWrap: "wrap" }}>
+            <Typography variant="subtitle2" sx={{ minWidth: 200 }}>
+              {s.instrument_1_name} ↔ {s.instrument_2_name}
+            </Typography>
+            <Stack direction="row" spacing={1}>
+              {typeof s.f1 !== "undefined" && (
+                <Chip label={`F1: ${roundPct(s.f1)}`} color="primary" variant="outlined" />
+              )}
+              {typeof s.precision !== "undefined" && (
+                <Chip label={`Precision: ${roundPct(s.precision)}`} variant="outlined" />
+              )}
+              {typeof s.recall !== "undefined" && (
+                <Chip label={`Recall: ${roundPct(s.recall)}`} variant="outlined" />
+              )}
+            </Stack>
+          </Box>
+        ))}
+      </Stack>
+    </Card>
+  );
+}
+
+function roundPct(value) {
+  // If value appears already in percentage form (0-100), cap and show; otherwise convert from 0-1
+  const v = value > 1 ? value : value * 100;
+  return `${Math.round(v)}%`;
+}
diff --git a/src/components/Results.js b/src/components/Results.js
index d1fb7ea..744b3e0 100644
--- a/src/components/Results.js
+++ b/src/components/Results.js
@@ -5,6 +5,7 @@ import { useParams } from "react-router-dom";
 import { useData } from "../contexts/DataContext";
 import AlertDialogSlide from "./Dialog";
 import InlineFeedback from "./InlineFeedback";
+import InstrumentSimilarities from "./InstrumentSimilarities";
 
 import { parse, test } from "liqe";
 
@@ -296,6 +297,11 @@ export default function Results({
           state={computedMatches && computedMatches.length > 0}
         />
       )}
+
+      {/* New: Instrument-to-instrument similarities */}
+      {apiData && apiData.instrumentSimilarities && (
+        <InstrumentSimilarities similarities={apiData.instrumentSimilarities} />
+      )}
       {topics && topics.length > 0 && (
         <Card
           variant="outlined"
diff --git a/src/contexts/DataContext.js b/src/contexts/DataContext.js
index f5c4684..0651ac7 100644
--- a/src/contexts/DataContext.js
+++ b/src/contexts/DataContext.js
@@ -57,6 +57,7 @@ export function DataProvider({ children }) {
 
           // Handle other non-200 responses
           if (!response.ok) {
+            console.error("GET failed:", url, "status:", response.status);
             throw new Error(`HTTP error! status: ${response.status}`);
           }
 
@@ -84,6 +85,7 @@ export function DataProvider({ children }) {
         try {
           const controller = new AbortController();
           const id = setTimeout(() => controller.abort(), timeout);
+          console.log("GET:", url);
           response = await fetch(url, {
             method: "GET",
             mode: "cors",
diff --git a/src/utilities/simplifyApi.js b/src/utilities/simplifyApi.js
index 2815012..cdaecbb 100644
--- a/src/utilities/simplifyApi.js
+++ b/src/utilities/simplifyApi.js
@@ -29,5 +29,9 @@ export function simplifyApi(apiResult, apiCall) {
     });
     instruments.push(instrument);
   });
-  return { instruments: instruments };
+  // Pass through instrument-to-instrument similarities if present from API
+  // Expecting shape: [{ instrument_1_name, instrument_2_name, precision, recall, f1, ... }]
+  const instrumentSimilarities =
+    apiResult.instrument_to_instrument_similarities || [];
+  return { instruments: instruments, instrumentSimilarities };
 }