Annotations

Author: rinriko

src/components/LightCurvePlot.tsx

@@ -378,7 +378,8 @@ export default function LightCurvePlot() {
     const rawPoints = avgPointRawMap[key];
 
     if (rawPoints) {
-      clearAll()
+      // clearAll()
+      clearRawOnly();
       setRawPlot(rawPoints);
       setFig({
         data: [
@@ -528,6 +529,35 @@ export default function LightCurvePlot() {
       handleOriginalPointClick(figure, pt);
     }
   }, [dataType, avgPointRawMap, figure, selectedImages]);
+  // const handlePointClick = useCallback((e: Plotly.PlotMouseEvent) => {
+  //   const pt = e.points[0];
+  //   if (!figure) return;
+
+  //   const hasAverage = dataType.includes('average');
+  //   const hasRaw = dataType.includes('raw');
+  //   const hasBoth = hasAverage && hasRaw;
+
+  //   const dataMode = ((pt.customdata as unknown) as AveragePointCustomData)?.dataMode;
+
+  //   // BLOCK average clicks when both raw+average selected
+  //   if (hasBoth && dataMode === 'average') {
+  //     console.log("Average click blocked because raw+avg selected");
+  //     return;
+  //   }
+
+  //   // normal logic
+  //   if (dataMode === '') {
+  //     if (dataType.includes('average')) {
+  //       handleAveragePointClick(figure, pt);
+  //     } else {
+  //       handleOriginalPointClick(figure, pt);
+  //     }
+  //   } else if (dataMode === 'average') {
+  //     handleAveragePointClick(figure, pt);
+  //   } else if (dataMode === 'raw') {
+  //     handleOriginalPointClick(figure, pt);
+  //   }
+  // }, [dataType, avgPointRawMap, figure, selectedImages]);
 
 
   function clearAll() {
@@ -545,7 +575,16 @@ export default function LightCurvePlot() {
     // setPosX(undefined);
     // setPosY(undefined);
   }
+  function clearRawOnly() {
+    setRawPlot(null);
+    // setFig({ data: [] });
+    setUseRawMode(false);
+    setAnnotations([]);
+    imageCounter.current = 1; // reset counter
+    setSelectedImages([]);
+    setModalInfo(null);
 
+  }
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   function handleHover(e: any) {
     const pt = e.points[0];

src/components/Matrix/PlotlyMatrixPlotWithImg.tsx

@@ -7,7 +7,7 @@ import { usePlotSettings } from '@/context/PlotSettingsContext';
 import { getColorConfig, ColorByMode } from '@/utils/matrix';
 import dynamic from 'next/dynamic';
 import { SimpleLinearRegression } from 'ml-regression-simple-linear';
-import { useEffect, useMemo, useState, useCallback } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { ImageModal } from '@/components/ImageModal';
 // import RawDataPlotPanel from '@/components/RawDataPlotPanel';
 import { reducedChiSquared } from '@/libs/math';
@@ -71,6 +71,8 @@ const MatrixPlot = (props: MatrixPlotProps) => {
   } | null>(null);
   // keep a handle to the GraphDiv
   const [gd, setGd] = useState<Plotly.PlotlyHTMLElement | null>(null);
+  const [userAnnotations, setUserAnnotations] = useState<Partial<Plotly.Annotations>[]>([]);
+
 
   const { colorBy, focusRangeMax, setSettings, focusRangeMaxManuallySet } = usePlotSettings();
   if (!matrixData || matrixData.length === 0) return null;
@@ -90,6 +92,64 @@ const MatrixPlot = (props: MatrixPlotProps) => {
   }, [matrixData, xKey, yKey, compute]);
   const maxRaw = useMemo(() => (rawValues.length ? Math.max(...rawValues) : 0), [rawValues]);
 
+
+  function makePointAnnotation(pt: Plotly.PlotDatum) {
+    const xVal = pt.x;
+    const yVal = pt.y;
+
+    const fmt = (v: any) => {
+      const n = Number(v);
+      return Number.isFinite(n) ? n.toFixed(2) : String(v);
+    };
+
+    // ---------- CASE 1: 2D scatter ----------
+    if (!pt.fullData.dimensions) {
+      return [{
+        x: xVal,
+        y: yVal,
+        xref: "x",
+        yref: "y",
+        text: `(${fmt(xVal)}, ${fmt(yVal)})`,
+        showarrow: true,
+        arrowhead: 6,
+        ax: 20,
+        ay: -30,
+        bgcolor: 'rgba(0,240,255,0.7)',
+        bordercolor: 'black',
+        borderwidth: 1,
+        font: { color: 'black', size: 12 }
+      }];
+    }
+
+    // ---------- CASE 2: SPLOM ----------
+    const n = pt.fullData.dimensions.length;
+    const anns: any[] = [];
+
+    for (let xi = 1; xi <= n; xi++) {
+      for (let yi = 1; yi <= n; yi++) {
+        if (yi <= xi) continue;
+
+        anns.push({
+          x: xVal,
+          y: yVal,
+          xref: `x${xi}`,
+          yref: `y${yi}`,
+          text: `(${fmt(xVal)}, ${fmt(yVal)})`,
+          showarrow: true,
+          arrowhead: 6,
+          ax: 20,
+          ay: -30,
+          bgcolor: 'rgba(0,240,255,0.7)',
+          bordercolor: 'black',
+          borderwidth: 1,
+          font: { color: 'black', size: 12 }
+        });
+      }
+    }
+
+    return anns;
+  }
+
   useEffect(() => {
     if (!focusRangeMaxManuallySet) {
       if (focusRangeMax === 100 || maxRaw > focusRangeMax) {
@@ -188,19 +248,54 @@ const MatrixPlot = (props: MatrixPlotProps) => {
     });
   }
 
-  const handlePointClick = useCallback((e: Plotly.PlotMouseEvent) => {
-    const pt = e.points[0];
-    handleOriginalPointClick(pt);
-  }, [matrixData, dimensions]);
+  useEffect(() => {
+    if (!gd) return;
 
+    function domClickHandler(ev: MouseEvent) {
+      // if Plotly captured a click on a point, the 'plotly_click' handler runs first
+      // so we clear only if NO point was selected
+
+      const clickedInsidePlot =
+        (ev.target as HTMLElement).closest('.plotly') !== null;
+
+      if (clickedInsidePlot) {
+        // check if last event was a point-click
+        if ((gd as any)._lastPlotlyClickWasPoint) {
+          (gd as any)._lastPlotlyClickWasPoint = false;
+          return;
+        }
+
+        // empty-space click → clear
+        setUserAnnotations([]);
+        setImageModal(null);
+      }
+    }
+
+    gd.addEventListener('click', domClickHandler);
+
+    return () => gd.removeEventListener('click', domClickHandler);
+  }, [gd]);
   useEffect(() => {
     if (!gd) return;
-    const clickHandler = (ev: any) => handlePointClick(ev);
-    gd.on?.('plotly_click', clickHandler);
-    return () => {
-      try { gd.removeAllListeners?.('plotly_click'); } catch { }
+
+    const handler = (ev: any) => {
+      // mark this click as a point-click so DOM listener won't clear annotations
+      (gd as any)._lastPlotlyClickWasPoint = true;
+
+      const pt = ev.points?.[0];
+      if (!pt) return;
+
+      const anns = makePointAnnotation(pt);
+      setUserAnnotations(anns);
+      handleOriginalPointClick(pt);
     };
-  }, [gd, handlePointClick]);
+
+    gd.on('plotly_click', handler);
+
+    return () => { try { gd.removeAllListeners('plotly_click'); } catch { } };
+  }, [gd]);
+
+
 
   // ===== 2D scatter =====
   if (dimensions.length === 2) {
@@ -228,12 +323,13 @@ const MatrixPlot = (props: MatrixPlotProps) => {
             xaxis: { title: { text: xKey } },
             yaxis: { title: { text: yKey } },
             modebar: { orientation: 'v' },
+            annotations: [...userAnnotations]
           }}
           config={{ responsive: true }}
           onInitialized={(_, graphDiv) => setGd(graphDiv as Plotly.PlotlyHTMLElement)}
           onUpdate={(_, graphDiv) => setGd(graphDiv as Plotly.PlotlyHTMLElement)}
-          // keep onClick too (nice to have)
-          onClick={(ev) => { console.log('onClick prop', ev); handlePointClick(ev); }}
+        // keep onClick too (nice to have)
+        // onClick={(ev) => { console.log('onClick prop', ev); handlePointClick(ev); }}
         />
 
         {imageModal && (
@@ -400,7 +496,7 @@ const MatrixPlot = (props: MatrixPlotProps) => {
           modebar: { orientation: 'v' },
           height,
           font: { size: labelFontSize },
-          annotations, // your computed annotations
+          annotations: [...annotations, ...userAnnotations],
           updatemenus: [{
             type: 'dropdown', direction: 'down', x: 0.75, y: 1, showactive: true,
             buttons: [
@@ -413,8 +509,8 @@ const MatrixPlot = (props: MatrixPlotProps) => {
         config={{ responsive: true }}
         onInitialized={(_, graphDiv) => setGd(graphDiv as Plotly.PlotlyHTMLElement)}
         onUpdate={(_, graphDiv) => setGd(graphDiv as Plotly.PlotlyHTMLElement)}
-        // keep onClick too
-        onClick={(ev) => { console.log('onClick prop', ev); handlePointClick(ev); }}
+      // keep onClick too
+      // onClick={(ev) => { console.log('onClick prop', ev); handlePointClick(ev); }}
       />
 
       {imageModal && (

src/components/Sidebar/Sidebar.tsx

@@ -17,13 +17,13 @@ const visibilityByPath: Record<string, Partial<Record<string, boolean>>> = {
     dataType: false,
     dataSelection: true,
     averageConfig: true,
-    matrixSection: true,
+    matrixSection: false,
   },
   '/matrix_plotly/': {
     dataType: true,
     dataSelection: true,
     averageConfig: true,
-    matrixSection: true,
+    matrixSection: false,
   },
   '/lite': {
     dataType: true,

src/types/PlotTypes.ts

@@ -71,7 +71,7 @@ export interface PlotDatumWithBBox extends Plotly.PlotDatum {
     y0: number;
     y1: number;
   };
-  fullData?: PlotTrace;
+  fullData: PlotTrace;
 }