chore: keep the first and the last point of array when slicing

src/component/1d/matrix/Boxplot.tsx

@@ -1,6 +1,5 @@
 import { NumberArray } from 'cheminfo-types';
 import { extent } from 'd3';
-import { xFindClosestIndex } from 'ml-spectra-processing';
 import { matrixToBoxPlot } from 'nmr-processing';
 import { CSSProperties, useMemo } from 'react';
 
@@ -10,14 +9,14 @@ import { usePanelPreferences } from '../../hooks/usePanelPreferences';
 import { PathBuilder } from '../../utility/PathBuilder';
 import { getYScaleWithRation } from '../utilities/scale';
 
-import { useMatrix } from './useMatrix';
+import { findXFromToIndex, sliceArray, useMatrix } from './useMatrix';
 
 interface InnerBoxplotProps {
   scaleRatio: number;
 }
 
 interface BaseRenderProps extends InnerBoxplotProps {
-  x: Float64Array | never[];
+  x: Float64Array | number[];
   color: CSSProperties['color'];
   yDomain: number[];
 }
@@ -102,17 +101,16 @@ function useBoxPlot() {
     if (!matrix) return null;
     const { x, matrixY } = matrix;
     const { max, min, median, q1, q3 } = matrixToBoxPlot(matrixY);
-    const fromIndex = xFindClosestIndex(x, from);
-    const toIndex = xFindClosestIndex(x, to);
+    const { fromIndex, toIndex } = findXFromToIndex(x, { from, to });
     const yDomain = extent(median) as number[];
 
     return {
-      x: x.slice(fromIndex, toIndex),
-      max: max.slice(fromIndex, toIndex),
-      min: min.slice(fromIndex, toIndex),
-      median: median.slice(fromIndex, toIndex),
-      q1: q1.slice(fromIndex, toIndex),
-      q3: q3.slice(fromIndex, toIndex),
+      x: sliceArray(x, { fromIndex, toIndex }),
+      max: sliceArray(max, { fromIndex, toIndex }),
+      min: sliceArray(min, { fromIndex, toIndex }),
+      median: sliceArray(median, { fromIndex, toIndex }),
+      q1: sliceArray(q1, { fromIndex, toIndex }),
+      q3: sliceArray(q3, { fromIndex, toIndex }),
       yDomain,
     };
   }, [from, matrix, to]);
@@ -136,13 +134,14 @@ export function Boxplot() {
 export function InnerBoxplot(props: InnerBoxplotProps) {
   const { scaleRatio } = props;
   const data = useBoxPlot();
+  const { displayerKey } = useChartData();
 
   if (!data) return null;
 
   const { x, max, min, median, q1, q3, yDomain } = data;
 
   return (
-    <g>
+    <g clipPath={`url(#${displayerKey}clip-chart-1d)`}>
       <RenderAreaPath
         x={x}
         y1={max}

src/component/1d/matrix/Stocsy.tsx

@@ -9,10 +9,15 @@ import { usePanelPreferences } from '../../hooks/usePanelPreferences';
 import { PathBuilder } from '../../utility/PathBuilder';
 import { getYScaleWithRation } from '../utilities/scale';
 
-import { interpolatedColorsPoints, useMatrix } from './useMatrix';
+import {
+  findXFromToIndex,
+  interpolatedColorsPoints,
+  sliceArray,
+  useMatrix,
+} from './useMatrix';
 
 interface StocsyProps {
-  x: Float64Array | never[];
+  x: Float64Array | number[];
   y: number[];
   color: string[];
   scaleRatio: number;
@@ -33,18 +38,16 @@ function useStocsy(chemicalShift: number) {
     if (!matrix) return null;
 
     const { x, matrixY } = matrix;
-    const fromIndex = xFindClosestIndex(x, from);
-    const toIndex = xFindClosestIndex(x, to);
 
     const cIndex = xFindClosestIndex(x, chemicalShift ?? x[0]);
     const { color, y } = matrixToStocsy(matrixY, cIndex);
 
     const yDomain = extent(y) as number[];
-
+    const { fromIndex, toIndex } = findXFromToIndex(x, { from, to });
     return {
-      x: x.slice(fromIndex, toIndex),
-      y: y.slice(fromIndex, toIndex),
-      color: color.slice(fromIndex, toIndex),
+      x: sliceArray(x, { fromIndex, toIndex }),
+      y: sliceArray(y, { fromIndex, toIndex }),
+      color: sliceArray(color, { fromIndex, toIndex }),
       yDomain,
     };
   }, [chemicalShift, from, matrix, to]);
@@ -68,11 +71,12 @@ export function Stocsy() {
 
 export function InnerStocsy({ scaleRatio, chemicalShift }) {
   const data = useStocsy(chemicalShift);
+  const { displayerKey } = useChartData();
 
   if (!data) return null;
   const { x, y, color, yDomain } = data;
   return (
-    <g>
+    <g clipPath={`url(#${displayerKey}clip-chart-1d)`}>
       <StocsyIndexPoint chemicalShift={chemicalShift} />
 
       <RenderStocsyAsSVG

src/component/1d/matrix/useMatrix.ts

@@ -1,3 +1,5 @@
+import { NumberArray } from 'cheminfo-types';
+import { xFindClosestIndex } from 'ml-spectra-processing';
 import { Spectrum } from 'nmr-load-save';
 import { useMemo } from 'react';
 
@@ -11,6 +13,49 @@ interface MatrixColor {
   end: number;
 }
 
+export function findXFromToIndex(x, options: { from: number; to: number }) {
+  const { from, to } = options;
+  let fromIndex = xFindClosestIndex(x, from);
+  let toIndex = xFindClosestIndex(x, to);
+
+  if (fromIndex > 0) {
+    for (let i = fromIndex; i >= 0; i--) {
+      if (x[i] <= from) {
+        fromIndex = i;
+        break;
+      }
+    }
+  }
+  if (toIndex < x.length) {
+    for (let i = toIndex; i < x.length; i++) {
+      if (x[i] >= to) {
+        toIndex = i;
+        break;
+      }
+    }
+  }
+  return { fromIndex, toIndex };
+}
+
+export function sliceArray(
+  array: number[] | Float64Array | NumberArray,
+  options: {
+    fromIndex: number;
+    toIndex: number;
+  },
+) {
+  const { fromIndex, toIndex } = options;
+  const resultLength = toIndex - fromIndex + 2;
+  const result = new Array(resultLength);
+  result[0] = array[0];
+  for (let i = 0; i < toIndex - fromIndex; i++) {
+    result[i + 1] = array[fromIndex + i];
+  }
+  result[resultLength - 1] = array.at(-1);
+
+  return result;
+}
+
 export function interpolateNumber(
   inputRange: [number, number],
   outputRange: [number, number],
@@ -59,7 +104,7 @@ export function useMatrix() {
 }
 
 interface InterpolateColorsPointsOptions {
-  x: Float64Array | never[];
+  x: Float64Array | number[];
   y: number[];
   color: string[];
 }