From 49379c4b6b4fc157f023fec14906c62c0f50647f Mon Sep 17 00:00:00 2001
From: William Guss <carlostnb@gmail.com>
Date: Sun, 13 Oct 2024 06:31:49 -0700
Subject: [PATCH] datanow comes in real time

---
 .../src/components/graphing/ErrorBarPlugin.js | 28 +++++++++++++------
 .../src/components/graphing/GraphSystem.js    | 19 ++++++++++++-
 ell-studio/src/hooks/useBackend.js            |  1 +
 3 files changed, 39 insertions(+), 9 deletions(-)

diff --git a/ell-studio/src/components/graphing/ErrorBarPlugin.js b/ell-studio/src/components/graphing/ErrorBarPlugin.js
index 21fcb838..c180f868 100644
--- a/ell-studio/src/components/graphing/ErrorBarPlugin.js
+++ b/ell-studio/src/components/graphing/ErrorBarPlugin.js
@@ -42,6 +42,9 @@ const drawErrorBar = (ctx, x, y, errorLow, errorHigh, color, width) => {
 
 const ErrorBarPlugin = {
   id: 'errorBar',
+  beforeInit(chart) {
+    chart.errorBarData = {};
+  },
   afterDatasetsDraw(chart, args, options) {
     const { ctx } = chart;
     
@@ -59,17 +62,26 @@ const ErrorBarPlugin = {
             
             let errorLow, errorHigh;
             if (typeof dataset.errorBars[index] === 'object') {
-              // Calculate error bar lengths in pixels
-              errorLow = Math.abs(chart.scales.y.getPixelForValue(datapoint) - 
-                                  chart.scales.y.getPixelForValue(dataset.errorBars[index].low));
-              errorHigh = Math.abs(chart.scales.y.getPixelForValue(datapoint) - 
-                                   chart.scales.y.getPixelForValue(dataset.errorBars[index].high));
+              errorLow = dataset.errorBars[index].low;
+              errorHigh = dataset.errorBars[index].high;
             } else {
-              errorLow = errorHigh = Math.abs(chart.scales.y.getPixelForValue(datapoint) - 
-                                              chart.scales.y.getPixelForValue(datapoint + dataset.errorBars[index]));
+              errorLow = datapoint - dataset.errorBars[index];
+              errorHigh = datapoint + dataset.errorBars[index];
             }
             
-            drawErrorBar(ctx, x, y, errorLow, errorHigh, dataset.borderColor, dataset.borderWidth || 1);
+            // Store error bar data for tooltip access
+            if (!chart.errorBarData[datasetIndex]) {
+              chart.errorBarData[datasetIndex] = [];
+            }
+            chart.errorBarData[datasetIndex][index] = { low: errorLow, high: errorHigh };
+
+            // Convert to pixel values for drawing
+            const errorLowPx = Math.abs(chart.scales.y.getPixelForValue(datapoint) - 
+                                        chart.scales.y.getPixelForValue(errorLow));
+            const errorHighPx = Math.abs(chart.scales.y.getPixelForValue(datapoint) - 
+                                         chart.scales.y.getPixelForValue(errorHigh));
+            
+            drawErrorBar(ctx, x, y, errorLowPx, errorHighPx, dataset.borderColor, dataset.borderWidth || 1);
           }
         });
       }
diff --git a/ell-studio/src/components/graphing/GraphSystem.js b/ell-studio/src/components/graphing/GraphSystem.js
index b8b5e730..08e950f0 100644
--- a/ell-studio/src/components/graphing/GraphSystem.js
+++ b/ell-studio/src/components/graphing/GraphSystem.js
@@ -176,10 +176,27 @@ export const GraphRenderer = ({ graphId }) => {
       ...yAxisScale,
     },
     plugins: {
+      ...sharedConfig.options.plugins,
+      tooltip: {
+        callbacks: {
+          label: function(context) {
+            const value = context.parsed.y;
+            let label = `${context.dataset.label}: ${value.toFixed(2)}`;
+            
+            const chartErrorBarData = context.chart.errorBarData;
+            const errorData = chartErrorBarData?.[context.datasetIndex]?.[context.dataIndex];
+            
+            if (errorData) {
+              label += `(95% CI: [${errorData.low.toFixed(2)}, ${errorData.high.toFixed(2)}])`;
+            }
+            
+            return label;
+          }
+        }
+      },
       errorBar: {
         draw: true,
       },
-      ...sharedConfig.options.plugins,
     },
   };
 
diff --git a/ell-studio/src/hooks/useBackend.js b/ell-studio/src/hooks/useBackend.js
index f5a64ccb..0407c1fa 100644
--- a/ell-studio/src/hooks/useBackend.js
+++ b/ell-studio/src/hooks/useBackend.js
@@ -40,6 +40,7 @@ export const useWebSocketConnection = () => {
         queryClient.invalidateQueries({ queryKey: ["lmpDetails"] });
         queryClient.invalidateQueries({ queryKey: ["evaluations"] });
         queryClient.invalidateQueries({ queryKey: ["latestEvaluations"] });
+        queryClient.invalidateQueries({ queryKey: ["evaluation"] });
         console.log("Database updated, invalidating queries");
       }
     };