add filter in and out option

Author: rinriko

src/components/LightCurvePlot.tsx

@@ -27,7 +27,7 @@ export default function LightCurvePlot() {
   const {
     dataType, dataSelection, xAxis, errorBars, noOfBins, noOfDataPoint,
     plotType, pointSize, lineWidth, legendFontSize, labelFontSize, tooltipFontSize,
-    figure, rawFigure, avgPointRawMap, filterPercent, isFiltered, selectedSeries, rawFilterMode, sigmaK,
+    figure, rawFigure, avgPointRawMap, filterPercent, isRawFilterInside, selectedSeries, rawFilterMode, sigmaK,
     setSettings
   } = usePlotSettings();
 
@@ -50,30 +50,48 @@ export default function LightCurvePlot() {
   const [posX, setPosX] = useState<number | undefined>(undefined);
   const [posY, setPosY] = useState<number | undefined>(undefined);
   const [fig, setFig] = useState<{ data: PlotTrace[] }>({ data: [] });
-  function applyRawFilter(
-    rawFilterMode: "none" | "percent" | "sigma",
-    rawList: RawPoint[],
-    avgY: number,
-    filterPercent: number,
-    sigmaK: number
-  ) {
-    if (rawFilterMode === "percent") {
-      return filterRawPointsByAverage(rawList, avgY, filterPercent);
-    }
-
-    if (rawFilterMode === "sigma") {
-      return filterRawPointsBySigmaBand(rawList, avgY, sigmaK);
-    }
+function applyRawFilter(
+  rawFilterMode: "none" | "percent" | "sigma",
+  rawList: RawPoint[],
+  avgY: number,
+  filterPercent: number,
+  sigmaK: number,
+  isRawFilterInside: boolean,
+) {
+  let result: {
+    kept: RawPoint[];
+    removed: RawPoint[];
+    minY: number | null;
+    maxY: number | null;
+  };
 
-    // none
-    return {
+  if (rawFilterMode === "percent") {
+    result = filterRawPointsByAverage(rawList, avgY, filterPercent);
+  } else if (rawFilterMode === "sigma") {
+    result = filterRawPointsBySigmaBand(rawList, avgY, sigmaK);
+  } else {
+    // no filter
+    result = {
       kept: rawList,
       removed: [],
       minY: null,
-      maxY: null
+      maxY: null,
+    };
+  }
+
+  // APPLY BOOLEAN HERE
+  if (!isRawFilterInside && rawFilterMode !== "none") {
+    return {
+      ...result,
+      kept: result.removed,
+      removed: result.kept,
     };
   }
 
+  return result;
+}
+
+
   function mjdToDate(mjd: number): Date {
     const MJD_EPOCH = Date.UTC(1858, 10, 17); // November 17, 1858
     const msPerDay = 86400 * 1000;
@@ -318,12 +336,13 @@ export default function LightCurvePlot() {
           if (!rawList) return;
 
           // const { kept, minY, maxY } = filterRawPointsByAverage(rawList, avgY, filterPercent);
-          const { kept, removed, minY, maxY } = applyRawFilter(
+          const { kept, minY, maxY } = applyRawFilter(
             rawFilterMode,
             rawList,
             avgY,
             filterPercent,
-            sigmaK
+            sigmaK,
+            isRawFilterInside
           );
           shapes.push({
             type: "rect",
@@ -404,12 +423,13 @@ export default function LightCurvePlot() {
           if (!rawList) return;
 
           // const { kept, minY, maxY } = filterRawPointsByAverage(rawList, avgY, filterPercent);
-          const { kept, removed, minY, maxY } = applyRawFilter(
+          const { kept, minY, maxY } = applyRawFilter(
             rawFilterMode,
             rawList,
             avgY,
             filterPercent,
-            sigmaK
+            sigmaK,
+            isRawFilterInside
           );
           shapes.push({
             type: "rect",
@@ -478,7 +498,7 @@ export default function LightCurvePlot() {
       });
 
     }
-  }, [avgPointRawMap, dataSelection, rawFigure, filterPercent, sigmaK, rawFilterMode, isFiltered, xAxis]);
+  }, [avgPointRawMap, dataSelection, rawFigure, filterPercent, sigmaK, rawFilterMode, xAxis]);
 
 
   useEffect(() => {

src/components/Sidebar/Sidebar.tsx

@@ -38,7 +38,7 @@ type RawFilterMode = "none" | "percent" | "sigma";
 
 export default function Sidebar() {
   const {
-    dataType, dataSelection, xAxis, errorBars, noOfBins, noOfDataPoint, colorBy, filterPercent, isFiltered, selectedSeries,
+    dataType, dataSelection, xAxis, errorBars, noOfBins, noOfDataPoint, colorBy, filterPercent, isRawFilterInside, selectedSeries,
     sigmaK,
     rawFilterMode,
     setSettings,
@@ -245,6 +245,20 @@ export default function Sidebar() {
               {/* ================= Raw Filter (Dropdown) ================= */}
               {dataType.includes('raw') && dataType.includes('average') && (
                 <div className="space-y-2 mb-4">
+                  <div className="flex items-center gap-2 mt-2">
+                    <input
+                      type="checkbox"
+                      checked={isRawFilterInside}
+                      onChange={(e) =>
+                        setSettings({ isRawFilterInside: e.target.checked })
+                      }
+                      className="w-4 h-4"
+                    />
+                    <label className="text-sm text-gray-700">
+                      Keep points inside band
+                    </label>
+                  </div>
+
                   <label className="font-medium">Raw Data Filter</label>
 
                   <select

src/context/PlotSettingsContext.tsx

@@ -36,7 +36,7 @@ export type PlotSettings = {
   focusRangeMax: number;
   focusRangeMaxManuallySet: boolean;
 
-  isFiltered: boolean;
+  isRawFilterInside: boolean;
   rawFilterMode: RawFilterMode;
   filterPercent: number;
   sigmaK: number;
@@ -74,7 +74,7 @@ const defaultValue: PlotSettings = {
   focusRangeMax: 100,
   focusRangeMaxManuallySet: false,
 
-  isFiltered: false,
+  isRawFilterInside: false,
   rawFilterMode: "none",
   filterPercent: 10,
   sigmaK: 1,