add filtered

Author: rinriko

src/components/LightCurvePlot.tsx

@@ -13,19 +13,21 @@ import { xKeyMap } from '@/utils/xKeyMap';
 import { createAnnotation, ModalInfo } from '@/utils/annotationUtils';
 import { RenderTooltip } from '@/constants/hoverUtils';
 // import { digitize, weightedAvg } from '@/libs/math';
-import { PlotTrace, PlotDatumWithBBox, PlotLayout, AveragePointCustomData } from '@/types/PlotTypes';
+import { PlotTrace, PlotDatumWithBBox, PlotLayout, AveragePointCustomData, RawPoint } from '@/types/PlotTypes';
 import { ImageModal } from '@/components/ImageModal';
 import RawDataPlotPanel from '@/components/RawDataPlotPanel';
 import { Trash2 } from 'lucide-react';
 import { flushSync } from 'react-dom';
 import { isDarkRGB } from '@/libs/color';
+import { filterRawPointsByAverage, filterRawPointsByAverageCurve } from '@/utils/filterRawByAverage';
+import { filter } from 'd3';
 const Plot = dynamic(() => import('react-plotly.js'), { ssr: false });
 
 export default function LightCurvePlot() {
   const {
     dataType, dataSelection, xAxis, errorBars, noOfBins, noOfDataPoint,
     plotType, pointSize, lineWidth, legendFontSize, labelFontSize, tooltipFontSize,
-    figure, rawFigure, avgPointRawMap, setSettings
+    figure, rawFigure, avgPointRawMap, filterPercent, isFiltered, setSettings
   } = usePlotSettings();
 
   const [loading, setLoading] = useState(false);
@@ -35,16 +37,10 @@ export default function LightCurvePlot() {
   const [modalInfo, setModalInfo] = useState<ModalInfo | null>(null);
   const [tooltipContent, setTooltipContent] = useState<React.ReactNode | null>(null);
   const [tooltipPosition, setTooltipPosition] = useState<{ left: number; top: number } | null>(null);
-  const [rawPlot, setRawPlot] = useState<{
-    x: number; y: number; err?: number; customdata: unknown;
-    phase?: number;
-    mjd?: number;
-    time?: number;
-    second?: number;
-    minute?: number;
-    hour?: number;
-    day?: number;
-  }[] | null>(null);
+
+  const [rawPlot, setRawPlot] = useState<RawPoint[] | null>(null);
+  const [filteredRawPlot, setFilteredRawPlot] = useState<{ tracesSW: PlotTrace[]; tracesLW: PlotTrace[] }>({ tracesSW: [], tracesLW: [] });
+  const [filterBand, setFilterBand] = useState<{ minY: number; maxY: number } | null>(null);
   // const [rawColor, setRawColor] = useState<string>('#1f77b4');
   const [rawMarkerBorderColor, setRawMarkerBorderColor] = useState<string>('#000000');
   const [rawMarkerFillColor, setRawMarkerFillColor] = useState<string>('#1f77b4');
@@ -130,36 +126,48 @@ export default function LightCurvePlot() {
             }
             const { traces: traceSW, patch: patchSW } = addTrace({ wave: 'SW', json: swJson, axis: xAxis, mode: dType, noOfBins, noOfDataPoint, timeKey, epoch, r_in: r1, r_out: r2, avgPointRawMap, markerFillColor, markerBorderColor, lineColor, plotType: plotType as 'lines' | 'markers' | 'lines+markers', errorBars: errorBars as 'bar' | 'hide' | 'separate' | undefined, pointSize, lineWidth, dataMode });
             rawTracesSW.push(...traceSW);
-            setSettings({
-              avgPointRawMap: Object.fromEntries(
-                Object.entries(patchSW).map(([key, arr]) => [
-                  key,
-                  arr.map(p => ({
-                    ...p,
-                    x: typeof p.x === 'number' ? p.x : (typeof p.x === 'string' ? Number(p.x) : (p.x instanceof Date ? p.x.getTime() : 0))
-                  }))
-                ])
-              )
-            });
+            setSettings(prev => ({
+              avgPointRawMap: {
+                ...prev.avgPointRawMap,
+                ...Object.fromEntries(
+                  Object.entries(patchSW).map(([key, arr]) => [
+                    key,
+                    arr.map(p => ({
+                      ...p,
+                      x: typeof p.x === 'number'
+                        ? p.x
+                        : (typeof p.x === 'string'
+                          ? Number(p.x)
+                          : (p.x instanceof Date
+                            ? p.x.getTime()
+                            : 0))
+                    }))
+                  ])
+                )
+              }
+            }));
             const { traces: traceLW, patch: patchLW } = addTrace({ wave: 'LW', json: lwJson, axis: xAxis, mode: dType, noOfBins, noOfDataPoint, timeKey, epoch, r_in: r1, r_out: r2, avgPointRawMap, markerFillColor, markerBorderColor, lineColor, plotType: plotType as 'lines' | 'markers' | 'lines+markers', errorBars: errorBars as 'bar' | 'hide' | 'separate' | undefined, pointSize, lineWidth, dataMode });
             rawTracesLW.push(...traceLW);
-            setSettings({
-              avgPointRawMap: Object.fromEntries(
-                Object.entries(patchLW).map(([key, arr]) => [
-                  key,
-                  arr.map(p => ({
-                    ...p,
-                    x: typeof p.x === 'number'
-                      ? p.x
-                      : (typeof p.x === 'string'
-                        ? Number(p.x)
-                        : (p.x instanceof Date
-                          ? p.x.getTime()
-                          : 0))
-                  }))
-                ])
-              )
-            });
+            setSettings(prev => ({
+              avgPointRawMap: {
+                ...prev.avgPointRawMap,
+                ...Object.fromEntries(
+                  Object.entries(patchLW).map(([key, arr]) => [
+                    key,
+                    arr.map(p => ({
+                      ...p,
+                      x: typeof p.x === 'number'
+                        ? p.x
+                        : (typeof p.x === 'string'
+                          ? Number(p.x)
+                          : (p.x instanceof Date
+                            ? p.x.getTime()
+                            : 0))
+                    }))
+                  ])
+                )
+              }
+            }));
 
           }
         } catch (err) {
@@ -230,6 +238,7 @@ export default function LightCurvePlot() {
       ];
 
       setSettings({ rawFigure: { tracesSW: rawTracesSW, tracesLW: rawTracesLW } });
+      setFilteredRawPlot({ tracesSW: rawTracesSW, tracesLW: rawTracesLW });
       setSettings({ figure: { data: fullData, layout: layout } });
       setFig({ data: fullData });
       setSettings({ avgPointRawMap });
@@ -240,7 +249,102 @@ export default function LightCurvePlot() {
   }, [dataSelection, dataType, xAxis, errorBars, noOfBins, noOfDataPoint]);
 
   useEffect(() => {
-    if (!rawFigure) return;
+    if (!rawFigure || !avgPointRawMap) return;
+    if (!isFiltered) { setFilteredRawPlot(rawFigure) }
+    else {
+      const tracesSW = rawFigure.tracesSW.map(t => ({ ...t }));
+      const tracesLW = rawFigure.tracesLW.map(t => ({ ...t }));
+
+      tracesSW.forEach((trace: PlotTrace) => {
+        const name = trace.name ?? "";
+        if (!name.includes("_average")) return;
+        const base_raw_name = name.split(" ")[0].replace("_average", "_raw");
+        const rawTraceIndex = tracesSW.findIndex(t =>
+          (t.name ?? "").startsWith(base_raw_name)
+        );
+        const newRawTrace = {
+          ...tracesSW[rawTraceIndex],
+          x: [],
+          y: [],
+          err: [],
+          customdata: []
+        };
+
+        trace.y?.forEach((avgY, index) => {
+          const cd = trace.customdata?.[index] as AveragePointCustomData | undefined;
+          if (!cd) return;
+
+          const { type, epoch, r_in, r_out, phase } = cd;
+
+          const key = `${type}_${epoch}_${r_in}_${r_out}_${Number(phase).toFixed(5)}`;
+          const rawList = avgPointRawMap[key];
+          if (!rawList) return;
+
+          const { kept } = filterRawPointsByAverage(rawList, avgY, filterPercent);
+
+          newRawTrace.x.push(...kept.map(p => p.x));
+          newRawTrace.y.push(...kept.map(p => p.y));
+          newRawTrace.err.push(...kept.map(p => p.err));
+          newRawTrace.customdata.push(...kept.map(p => p.customdata));
+        });
+        newRawTrace.name = `${base_raw_name} (${newRawTrace.y.length}/${rawFigure.tracesSW[rawTraceIndex].y.length})`;
+        if (xAxis === 'phase') {
+          newRawTrace.x = newRawTrace.x.concat((newRawTrace.x as number[]).map(v => v + 1));
+          newRawTrace.y = newRawTrace.y.concat(newRawTrace.y);
+          newRawTrace.err = newRawTrace.err.concat(newRawTrace.err);
+          newRawTrace.customdata = newRawTrace.customdata.concat(newRawTrace.customdata);
+        }
+        tracesSW[rawTraceIndex] = newRawTrace;
+      });
+      tracesLW.forEach((trace: PlotTrace) => {
+        const name = trace.name ?? "";
+        if (!name.includes("_average")) return;
+        const base_raw_name = name.split(" ")[0].replace("_average", "_raw");
+        const rawTraceIndex = tracesLW.findIndex(t =>
+          (t.name ?? "").startsWith(base_raw_name)
+        );
+        const newRawTrace = {
+          ...tracesLW[rawTraceIndex],
+          x: [],
+          y: [],
+          err: [],
+          customdata: []
+        };
+
+        trace.y?.forEach((avgY, index) => {
+          const cd = trace.customdata?.[index] as AveragePointCustomData | undefined;
+          if (!cd) return;
+
+          const { type, epoch, r_in, r_out, phase } = cd;
+
+          const key = `${type}_${epoch}_${r_in}_${r_out}_${Number(phase).toFixed(5)}`;
+          const rawList = avgPointRawMap[key];
+          if (!rawList) return;
+
+          const { kept } = filterRawPointsByAverage(rawList, avgY, filterPercent);
+
+          newRawTrace.x.push(...kept.map(p => p.x));
+          newRawTrace.y.push(...kept.map(p => p.y));
+          newRawTrace.err.push(...kept.map(p => p.err));
+          newRawTrace.customdata.push(...kept.map(p => p.customdata));
+        });
+        newRawTrace.name = `${base_raw_name} (${newRawTrace.y.length}/${rawFigure.tracesLW[rawTraceIndex].y.length})`;
+        if (xAxis === 'phase') {
+          newRawTrace.x = newRawTrace.x.concat((newRawTrace.x as number[]).map(v => v + 1));
+          newRawTrace.y = newRawTrace.y.concat(newRawTrace.y);
+          newRawTrace.err = newRawTrace.err.concat(newRawTrace.err);
+          newRawTrace.customdata = newRawTrace.customdata.concat(newRawTrace.customdata);
+        }
+        tracesLW[rawTraceIndex] = newRawTrace;
+      });
+
+      setFilteredRawPlot({ tracesSW, tracesLW });
+    }
+  }, [avgPointRawMap, dataSelection, rawFigure, filterPercent, isFiltered, xAxis]);
+
+
+  useEffect(() => {
+    if (!rawFigure || !filteredRawPlot) return;
     const applyStyle = (tr: PlotTrace, axisX: string, axisY: string) => ({
       ...tr,
       mode: plotType as 'lines' | 'markers' | 'lines+markers',
@@ -249,19 +353,18 @@ export default function LightCurvePlot() {
       xaxis: axisX,
       yaxis: axisY,
     });
-    console.log("Updating figure with new styles");
-    console.log(figure?.layout);
+
     setSettings({
       figure: {
         data: [
-          ...rawFigure.tracesSW.map(tr => applyStyle(tr, 'x2', 'y')),
-          ...rawFigure.tracesLW.map(tr => applyStyle(tr, 'x2', 'y2')),
+          ...filteredRawPlot.tracesSW.map(tr => applyStyle(tr, 'x2', 'y')),
+          ...filteredRawPlot.tracesLW.map(tr => applyStyle(tr, 'x2', 'y2')),
         ],
         layout: figure?.layout || {}
       }
     });
 
-  }, [plotType, pointSize, lineWidth, rawFigure]);
+  }, [plotType, pointSize, lineWidth, rawFigure, filteredRawPlot, isFiltered]);
 
   useEffect(() => {
     clearAll();

src/components/Sidebar/Sidebar.tsx

@@ -5,6 +5,7 @@ import Select from 'react-select';
 import { ChevronLeft, ChevronRight } from 'lucide-react';
 import { usePlotSettings } from '@/context/PlotSettingsContext';
 import { usePathname } from 'next/navigation';
+
 const visibilityByPath: Record<string, Partial<Record<string, boolean>>> = {
   '/': {
     dataType: true,
@@ -33,7 +34,7 @@ const visibilityByPath: Record<string, Partial<Record<string, boolean>>> = {
 
 export default function Sidebar() {
   const {
-    dataType, dataSelection, xAxis, errorBars, noOfBins, noOfDataPoint, colorBy, setSettings,
+    dataType, dataSelection, xAxis, errorBars, noOfBins, noOfDataPoint, colorBy, filterPercent, isFiltered, setSettings,
     // focusRangeMax
   } = usePlotSettings();
 
@@ -215,6 +216,50 @@ export default function Sidebar() {
                   />
                 </div>
               )}
+              {/* Raw Filter Slider — only when both average + raw modes are selected */}
+              {dataType.includes('average') && dataType.includes('raw') && (
+                <div className="space-y-2 mb-4">
+                  <label className="flex items-center gap-2 font-medium text-sm text-gray-700">
+                    <input
+                      type="checkbox"
+                      checked={isFiltered}
+                      onChange={(e) => setSettings({ isFiltered: e.target.checked })}
+                      className="w-4 h-4"
+                    />
+                    Enable Raw Filtering
+                  </label>
+                  {isFiltered && (
+                    <>
+                      <label className="font-medium text-sm text-gray-700">
+                        Raw Filter Range: ±{filterPercent}%
+                      </label>
+
+                      <input
+                        type="range"
+                        min={1}
+                        max={200}
+                        defaultValue={filterPercent}
+                        className="w-full"
+                        onMouseUp={(e) => setSettings({ filterPercent: Number(e.currentTarget.value) })}
+                        onTouchEnd={(e) => setSettings({ filterPercent: Number(e.currentTarget.value) })}
+                      />
+
+                      <input
+                        type="number"
+                        min={1}
+                        max={200}
+                        defaultValue={filterPercent}
+                        onBlur={(e) => setSettings({ filterPercent: Number(e.target.value) })}
+                        className="w-full px-2 py-1 border border-gray-300 rounded text-sm"
+                      />
+
+                      <p className="text-xs text-gray-500">
+                        Keeps raw points whose Y-values fall within ±{filterPercent}% of the average curve.
+                      </p>
+                    </>)}
+                </div>
+              )}
+
             </Section>
           )}
 

src/context/PlotSettingsContext.tsx

@@ -33,6 +33,9 @@ type PlotSettings = {
   colorBy: string;
   focusRangeMax: number;
   focusRangeMaxManuallySet: boolean;
+
+  isFiltered: boolean;
+  filterPercent: number;
   setSettings: (updates: Partial<PlotSettings>) => void;
 };
 
@@ -66,6 +69,8 @@ const defaultValue: PlotSettings = {
   focusRangeMax: 100,
   focusRangeMaxManuallySet: false,
 
+  isFiltered: false,
+  filterPercent: 10,
   setSettings: () => { },
 };