feat: improve inset

src/component/1d/ApodizationLine.tsx

@@ -16,6 +16,7 @@ import useXYReduce, { XYReducerDomainAxis } from '../hooks/useXYReduce.js';
 import type { ApodizationOptions } from '../panels/filtersPanel/Filters/hooks/useApodization.js';
 import { PathBuilder } from '../utility/PathBuilder.js';
 
+import { useIsInset } from './inset/InsetProvider.js';
 import { getYScale } from './utilities/scale.js';
 
 const emptyData = { data: {}, info: {} };
@@ -36,6 +37,8 @@ export function ApodizationLine() {
   const {
     toolOptions: { selectedTool },
   } = useChartData();
+  const isInset = useIsInset();
+
   const activeSpectrum = useActiveSpectrum();
   const { scaleX } = useScaleChecked();
   const spectrum = useSpectrum({ emptyData }) as Spectrum1D;
@@ -44,7 +47,11 @@ export function ApodizationLine() {
   const { sharedFilterOptions: externalApodizationOptions } =
     useFilterSyncOptions<ApodizationOptions>();
 
-  if (!activeSpectrum?.id || selectedTool !== Filters1D.apodization.name) {
+  if (
+    !activeSpectrum?.id ||
+    selectedTool !== Filters1D.apodization.name ||
+    !isInset
+  ) {
     return null;
   }
 

src/component/1d/LinesSeries.tsx

@@ -24,13 +24,25 @@ const Rect = styled.rect`
   }
 `;
 
-function LinesSeries() {
+function useSpectra() {
   const { xDomains, data } = useChartData();
-  const activeSpectra = useActiveSpectra();
-  const spectra = (data?.filter(
+
+  const inset = useInsetOptions();
+
+  if (inset) {
+    return data?.filter((d) => isSpectrum1D(d) && d.id === inset.spectrumKey);
+  }
+
+  return data?.filter(
     (d) => isSpectrum1D(d) && d.display.isVisible && xDomains[d.id],
-  ) || []) as Spectrum1D[];
+  );
+}
+
+function LinesSeries() {
+  const activeSpectra = useActiveSpectra();
+  const spectra = useSpectra() as Spectrum1D[];
   const { id: insetKey = 'primary' } = useInsetOptions() || {};
+
   return (
     <g className="spectra">
       {spectra.map((d, i) => (

src/component/1d/SpectraLegends.tsx

@@ -17,6 +17,7 @@ import { SVGGroup } from '../elements/SVGGroup.js';
 import { useActiveSpectra } from '../hooks/useActiveSpectra.js';
 import { usePanelPreferences } from '../hooks/usePanelPreferences.js';
 import { convertPathArrayToString } from '../utility/convertPathArrayToString.js';
+import { useIsInset } from './inset/InsetProvider.js';
 
 const styles: Record<'text' | 'colorIndicator', CSSProperties> = {
   text: {
@@ -125,6 +126,7 @@ function SpectraLegends() {
     },
     xDomains,
   } = useChartData();
+  const isInset = useIsInset();
 
   const { legendsFields } = usePanelPreferences(
     'multipleSpectraAnalysis',
@@ -136,7 +138,7 @@ function SpectraLegends() {
     selectedSpectra.map((spectrum) => spectrum.id),
   );
 
-  if (!showLegend) return null;
+  if (!showLegend || !isInset) return null;
 
   const spectra = data.filter(
     (spectrum) =>

src/component/1d/inset/DraggableInset.tsx

@@ -11,8 +11,7 @@ import type { ActionsButtonsPopoverProps } from '../../elements/ActionsButtonsPo
 import { Viewer1D } from '../Viewer1D.js';
 
 import { InsetProvider } from './InsetProvider.js';
-
-import type { Inset } from './index.js';
+import type { Inset } from './SpectraInsets.js';
 
 interface InsetBounding {
   x: number;
@@ -34,9 +33,15 @@ const ReactRnd = styled(Rnd)`
   }
 `;
 
-export function DraggableInset(props: Pick<Inset, 'id' | 'bounding'>) {
+export function DraggableInset(props: Inset) {
   const dispatch = useDispatch();
-  const { id, bounding: externalBounding } = props;
+  const {
+    id,
+    bounding: externalBounding,
+    xDomain,
+    yDomain,
+    spectrumKey,
+  } = props;
   const { viewerRef } = useGlobal();
   const [bounding, setBounding] = useState<InsetBounding>(externalBounding);
   const [isMoveActive, setIsMoveActive] = useState(false);
@@ -142,7 +147,14 @@ export function DraggableInset(props: Pick<Inset, 'id' | 'bounding'>) {
           },
         }}
       >
-        <InsetProvider id={id} width={width} height={height}>
+        <InsetProvider
+          id={id}
+          width={width}
+          height={height}
+          xDomain={xDomain}
+          yDomain={yDomain}
+          spectrumKey={spectrumKey}
+        >
           <Viewer1D />
         </InsetProvider>
       </ActionsButtonsPopover>

src/component/1d/inset/InsetProvider.tsx

@@ -1,24 +1,49 @@
 import type { ReactNode } from 'react';
 import { createContext, useContext, useMemo } from 'react';
 
-export interface InsetPagContextProps {
+import type { Margin } from '../../reducer/Reducer.js';
+
+import type { Inset } from './SpectraInsets.js';
+
+interface BaseInsetPagContextProps
+  extends Pick<Inset, 'xDomain' | 'yDomain' | 'id' | 'spectrumKey'> {
   width: number;
   height: number;
-  id: string;
+}
+
+interface InsetPagContextProps extends BaseInsetPagContextProps {
+  margin: Margin;
 }
 
 const InsetContext = createContext<InsetPagContextProps | null>(null);
 
+export function isInsetNotNull(
+  inset: InsetPagContextProps | null,
+): inset is InsetPagContextProps {
+  return !!inset;
+}
+
 export function useInsetOptions() {
   return useContext(InsetContext);
 }
+export function useIsInset() {
+  return !!useContext(InsetContext);
+}
 
-interface InsetProviderProps extends InsetPagContextProps {
+interface InsetProviderProps extends BaseInsetPagContextProps {
   children: ReactNode;
 }
 
 export function InsetProvider(props: InsetProviderProps) {
-  const { children, width, height, id = 'primary' } = props;
+  const {
+    children,
+    width,
+    height,
+    xDomain,
+    yDomain,
+    spectrumKey,
+    id = 'primary',
+  } = props;
 
   const state = useMemo(() => {
     return {
@@ -31,8 +56,11 @@ export function InsetProvider(props: InsetProviderProps) {
         left: 10,
       },
       id,
+      xDomain,
+      yDomain,
+      spectrumKey,
     };
-  }, [height, id, width]);
+  }, [height, id, spectrumKey, width, xDomain, yDomain]);
 
   return (
     <InsetContext.Provider value={state}>{children}</InsetContext.Provider>

src/component/1d/inset/index.tsx → src/component/1d/inset/SpectraInsets.tsx

@@ -29,13 +29,7 @@ export function SpectraInsets() {
   return (
     <>
       {insets.map((inset) => {
-        return (
-          <DraggableInset
-            key={inset.id}
-            id={inset.id}
-            bounding={inset.bounding}
-          />
-        );
+        return <DraggableInset key={inset.id} {...inset} />;
       })}
     </>
   );

src/component/1d/tool/BaseLineZones.tsx

@@ -6,6 +6,7 @@ import { useScaleChecked } from '../../context/ScaleContext.js';
 import { ResizerWithScale } from '../../elements/ResizerWithScale.js';
 import { useHighlight } from '../../highlight/index.js';
 import { useResizerStatus } from '../../hooks/useResizerStatus.js';
+import { useIsInset } from '../inset/InsetProvider.js';
 
 function BaseLineZones() {
   const {
@@ -14,6 +15,9 @@ function BaseLineZones() {
       data: { baselineCorrection },
     },
   } = useChartData();
+  const isInset = useIsInset();
+
+  if (isInset) return null;
 
   const baseLineZones = baselineCorrection.zones;
 

src/component/1d/utilities/scale.ts

@@ -9,14 +9,46 @@ import type {
   SpectraDirection,
   VerticalAlignment,
 } from '../../reducer/Reducer.js';
+import { useIsInset } from '../inset/InsetProvider.js';
 
-interface ScaleXOptions {
+export const SPECTRA_BOTTOM_MARGIN = 40;
+
+interface ScaleInsetXOptions {
   width: number;
   margin: Margin;
-  xDomains: Domains;
   xDomain: number[];
   mode: SpectraDirection;
 }
+interface ScaleXOptions extends ScaleInsetXOptions {
+  xDomains: Domains;
+}
+
+interface InsetYScaleOptions {
+  height: number;
+  margin: Pick<Margin, 'top' | 'bottom'>;
+  yDomain: number[];
+}
+
+interface ScaleYOptions extends InsetYScaleOptions {
+  yDomains: Domains;
+  verticalAlign: VerticalAlignment;
+}
+
+function getInsetXScale(options: ScaleInsetXOptions) {
+  const { width, margin, xDomain, mode } = options;
+  const range =
+    mode === 'RTL'
+      ? [width - margin.right, margin.left]
+      : [margin.left, width - margin.right];
+  return scaleLinear(xDomain, range);
+}
+
+function getInsetYScale(options: InsetYScaleOptions) {
+  const { height, margin, yDomain } = options;
+  const innerHeight = height - margin.bottom - SPECTRA_BOTTOM_MARGIN;
+  return scaleLinear(yDomain, [innerHeight, margin.top]);
+}
+
 function getXScale(
   options: ScaleXOptions,
   spectrumId: number | null | string = null,
@@ -29,16 +61,6 @@ function getXScale(
   return scaleLinear(spectrumId ? xDomains[spectrumId] : xDomain, range);
 }
 
-interface ScaleYOptions {
-  height: number;
-  margin: Pick<Margin, 'top' | 'bottom'>;
-  yDomains: Domains;
-  yDomain: number[];
-  verticalAlign: VerticalAlignment;
-}
-
-export const SPECTRA_BOTTOM_MARGIN = 40;
-
 function getYScale(
   options: ScaleYOptions,
   spectrumId: number | null | string = null,
@@ -100,23 +122,36 @@ function reScaleY(scale: number, { domain, height, margin }) {
 
 function useScaleX() {
   const { margin, mode, width, xDomain, xDomains } = useChartData();
+  const isInset = useIsInset();
+
   return useCallback(
-    (spectrumId = null) =>
-      getXScale({ margin, mode, width, xDomain, xDomains }, spectrumId),
-    [margin, mode, width, xDomain, xDomains],
+    (spectrumId = null) => {
+      if (isInset) {
+        return getInsetXScale({ margin, mode, width, xDomain });
+      }
+
+      return getXScale({ margin, mode, width, xDomain, xDomains }, spectrumId);
+    },
+    [isInset, margin, mode, width, xDomain, xDomains],
   );
 }
 function useScaleY() {
   const { margin, height, yDomain, yDomains } = useChartData();
   const verticalAlign = useVerticalAlign();
+  const isInset = useIsInset();
 
   return useCallback(
-    (spectrumId = null) =>
-      getYScale(
+    (spectrumId = null) => {
+      if (isInset) {
+        return getInsetYScale({ margin, height, yDomain });
+      }
+
+      return getYScale(
         { margin, height, verticalAlign, yDomain, yDomains },
         spectrumId,
-      ),
-    [margin, height, verticalAlign, yDomain, yDomains],
+      );
+    },
+    [isInset, margin, height, verticalAlign, yDomain, yDomains],
   );
 }
 
@@ -128,4 +163,6 @@ export {
   getIntegralYScale,
   reScaleY,
   getYScaleWithRation,
+  getInsetXScale,
+  getInsetYScale,
 };

src/component/context/ChartContext.tsx

@@ -15,11 +15,13 @@ export function useChartData() {
 
   if (!viewportSize) return data;
 
-  const { width, height, margin } = viewportSize;
+  const { width, height, margin, xDomain, yDomain } = viewportSize;
   const updatedData = produce(data, (draft) => {
     draft.width = width;
     draft.height = height;
     draft.margin = margin ?? draft.margin;
+    draft.xDomain = xDomain ?? draft.xDomain;
+    draft.yDomain = yDomain ?? draft.yDomain;
   });
 
   return updatedData;