label show text now

src/clusters.js

@@ -48,8 +48,8 @@ const DEFAULT_YAXIS = {
     range: [1.6774392919913423, 6.514440889610389],
 }
 
-const getLabelHoverFormat = (row, ) => {
-    return `<b>Text</b>: ${row.text}<br><b>Label</b>: ${row.label}<br><b>Edu label</b>: ${row.eduScore}`;
+const getLabelHoverFormat = (row, labelIDToName) => {
+    return `<b>Text</b>: ${row.text}<br><b>Label</b>: ${labelIDToName[row.label] ?? "Unknown"}<br><b>Edu label</b>: ${row.eduScore}`;
 };
 
 
@@ -168,6 +168,11 @@ async function plotClusters() {
         };
     });
 
+    const labelIDToName = annotations.reduce((acc, annotation) => {
+        acc[annotation.label] = annotation.text;
+        return acc;
+    }, {});
+
     const traces = [
         {
             type: "scatter",
@@ -180,7 +185,7 @@ async function plotClusters() {
                 opacity: 8,
             },
             hoverinfo: "text",
-            hovertext: data.map((row) => getLabelHoverFormat(row)),
+            hovertext: data.map((row) => getLabelHoverFormat(row, labelIDToName)),
             hoverlabel: {
                 bgcolor: "white",
             },