implement instrument similarities in front end

Author: Jamesren64

src/components/AppBar.js

@@ -48,15 +48,15 @@ function HarmonyAppBar() {
       .then((ver) => {
         setApiVersion(ver);
       })
-      .catch((e) => setError("ERROR: API unreachable"));
+      .catch((e) => setError("ERROR: API unreachable (version)"));
   }, [getVersion]);
 
   React.useEffect(() => {
     getModels()
       .then((models) => {
         setAllModels(models);
       })
-      .catch((e) => setError("ERROR: API unreachable"));
+      .catch((e) => setError("ERROR: API unreachable (models)"));
   }, [getModels]);
 
   const handleModelSelect = (event) => {

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)}%`;
+}

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"

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",

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