feat: delete the phase correction trace

Hover the mouse over the phase correction trace and press the 'Backspace' key.

fix: traces

src/component/2d/1d-tracer/phace-correction-traces/SpectraPhaseTraces.tsx

@@ -1,32 +1,101 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+
 import { useChartData } from '../../../context/ChartContext';
+import { HighlightEventSource, useHighlight } from '../../../highlight';
+import { SpectrumTrace, TraceDirection } from '../../../reducer/Reducer';
 import { get2DXScale, get2DYScale } from '../../utilities/scale';
 
 import { SpectrumPhaseTrace } from './SpectrumPhaseTrace';
 import { useActivePhaseTraces } from './useActivePhaseTraces';
 
-export function SpectraPhaseTraces() {
-  const { width, height, margin, yDomain, xDomain } = useChartData();
-  const { spectra = [], color, activeTraceDirection } = useActivePhaseTraces();
+const BOX_SIZE = 20;
 
-  if (!width || !height) {
-    return null;
+const style = css`
+  .target {
+    fill: transparent;
   }
-  const scale2dX = get2DXScale({ margin, width, xDomain });
-  const scale2dY = get2DYScale({ margin, height, yDomain });
+  &:hover {
+    .target {
+      fill: #ff6f0057;
+    }
+  }
+`;
+
+export function SpectraPhaseTraces() {
+  const { width, height } = useChartData();
+  const { spectra = [], color, activeTraceDirection } = useActivePhaseTraces();
 
-  if (spectra.length === 0) {
+  if (!width || !height || spectra.length === 0) {
     return null;
   }
 
-  return spectra.map(({ id, data, x, y }) => {
+  return spectra.map((spectrumTrace) => {
     return (
-      <SpectrumPhaseTrace
-        key={id}
-        data={data}
-        position={{ x: scale2dX(x), y: scale2dY(y) }}
+      <PhaseTrace
+        key={spectrumTrace.id}
+        spectrum={spectrumTrace}
         color={color}
         direction={activeTraceDirection}
       />
     );
   });
 }
+
+interface SpectrumTraceProps {
+  spectrum: SpectrumTrace;
+  color: string;
+  direction: TraceDirection;
+}
+
+function PhaseTrace(props: SpectrumTraceProps) {
+  const { width, height, margin, yDomain, xDomain } = useChartData();
+
+  const {
+    spectrum: { data, x, y, id },
+    color,
+    direction,
+  } = props;
+  const highligh = useHighlight([id], {
+    type: HighlightEventSource.PHASE_CORRECTION_TRACE,
+    extra: { id },
+  });
+
+  const scale2dX = get2DXScale({ margin, width, xDomain });
+  const scale2dY = get2DYScale({ margin, height, yDomain });
+
+  const innerheight = height - margin.top - margin.bottom;
+  const innerWidth = width - margin.left - margin.right;
+  const transformY = innerheight - BOX_SIZE / 2;
+  const transformX = innerWidth - BOX_SIZE / 2;
+
+  return (
+    <SpectrumPhaseTrace
+      data={data}
+      position={{ x: scale2dX(x), y: scale2dY(y) }}
+      color={color}
+      direction={direction}
+      {...highligh.onHover}
+      css={style}
+    >
+      {direction === 'horizontal' && (
+        <rect
+          className="target"
+          y={transformY}
+          x={margin.left}
+          width={`${innerWidth}px`}
+          height={`${BOX_SIZE}px`}
+        />
+      )}
+      {direction === 'vertical' && (
+        <rect
+          className="target"
+          y={margin.top}
+          x={transformX}
+          width={`${BOX_SIZE}px`}
+          height={innerheight}
+        />
+      )}
+    </SpectrumPhaseTrace>
+  );
+}

src/component/2d/1d-tracer/phace-correction-traces/SpectrumPhaseTrace.tsx

@@ -1,14 +1,17 @@
+import { ReactNode } from 'react';
+
 import { useChartData } from '../../../context/ChartContext';
 import { TraceDirection } from '../../../reducer/Reducer';
 import { PathBuilder } from '../../../utility/PathBuilder';
 import { getYScale } from '../../utilities/SliceScale';
 import { get2DXScale, get2DYScale } from '../../utilities/scale';
 
-interface SpectrumPhaseTraceProps {
+interface SpectrumPhaseTraceProps extends React.SVGAttributes<SVGGElement> {
   data: { x: Float64Array; re: Float64Array };
   position: { x: number; y: number };
   color: string;
   direction: TraceDirection;
+  children?: ReactNode;
 }
 
 function usePath(x: Float64Array, y: Float64Array, direction: TraceDirection) {
@@ -42,7 +45,7 @@ function usePath(x: Float64Array, y: Float64Array, direction: TraceDirection) {
 }
 
 export function SpectrumPhaseTrace(props: SpectrumPhaseTraceProps) {
-  const { data, position, color, direction } = props;
+  const { data, position, color, direction, children, ...othersProps } = props;
   const { width, margin, height } = useChartData();
 
   const { x, re } = data;
@@ -54,15 +57,21 @@ export function SpectrumPhaseTrace(props: SpectrumPhaseTraceProps) {
   const translateX = direction === 'vertical' ? position.x - innerWidth : 0;
 
   return (
-    <path
-      className="line"
-      stroke={color}
-      strokeWidth="1"
-      fill="transparent"
-      d={path}
+    <g
       style={{
         transform: `translate(${translateX}px,${translateY}px) `,
       }}
-    />
+      {...othersProps}
+    >
+      <path
+        className="line"
+        stroke={color}
+        strokeWidth="1"
+        fill="transparent"
+        d={path}
+        pointerEvents="none"
+      />
+      {children}
+    </g>
   );
 }

src/component/EventsTrackers/KeysListenerTracker.tsx

@@ -253,6 +253,18 @@ function KeysListenerTracker(props: KeysListenerTrackerProps) {
           }
           break;
         }
+        case HighlightEventSource.PHASE_CORRECTION_TRACE: {
+          const { id } = extra || {};
+          if (id) {
+            dispatch({
+              type: 'DELETE_PHASE_CORRECTION_TRACE',
+              payload: { id },
+            });
+            // remove keys from the highlighted list after delete
+            remove();
+          }
+          break;
+        }
 
         default:
           break;

src/component/highlight/index.tsx

@@ -25,6 +25,7 @@ export enum HighlightEventSource {
   MULTIPLE_ANALYSIS_ZONE = 'MULTIPLE_ANALYSIS_ZONE',
   DATABASE = 'DATABASE',
   ATOM = 'ATOM',
+  PHASE_CORRECTION_TRACE = 'PHASE_CORRECTION_TRACE',
   UNKNOWN = 'UNKNOWN',
 }
 

src/component/reducer/Reducer.ts

@@ -53,16 +53,16 @@ export interface Margin {
 export type Domains = Record<string, number[]>;
 export type SpectraDirection = 'RTL' | 'LTR';
 export type TraceDirection = 'vertical' | 'horizontal';
-export type SpctraTraces = Array<{
+export interface SpectrumTrace {
   id: string;
   data: NmrData1D;
   x: number;
   y: number;
-}>;
+}
 
 export type PhaseCorrrectionTraces = Record<
   TraceDirection,
-  { spectra: SpctraTraces; ph0: number; ph1: number; pivot: Pivot | null }
+  { spectra: SpectrumTrace[]; ph0: number; ph1: number; pivot: Pivot | null }
 >;
 export interface TwoDimensionPhaseCorrrection {
   traces: PhaseCorrrectionTraces;
@@ -488,6 +488,8 @@ function innerSpectrumReducer(draft: Draft<State>, action: Action) {
           draft,
           action,
         );
+      case 'DELETE_PHASE_CORRECTION_TRACE':
+        return FiltersActions.handleDeletePhaseCorrectionTrace(draft, action);
       case 'CHANGE_SPECTRUM_VISIBILITY':
         return SpectrumsActions.handleChangeSpectrumVisibilityById(
           draft,

src/component/reducer/actions/FiltersActions.ts

@@ -25,6 +25,7 @@ import {
 import zoomHistoryManager from '../helper/ZoomHistoryManager';
 import { getActiveSpectrum } from '../helper/getActiveSpectrum';
 import getRange from '../helper/getRange';
+import { getSpectrum } from '../helper/getSpectrum';
 import { getStrongestPeak } from '../helper/getStrongestPeak';
 import { ActionType } from '../types/ActionType';
 
@@ -122,6 +123,10 @@ type ChangePhaseCorrectionDirectionAction = ActionType<
   'CHANGE_PHASE_CORRECTION_DIRECTION',
   { direction: TraceDirection }
 >;
+type DeletePhaseCorrectionTrace = ActionType<
+  'DELETE_PHASE_CORRECTION_TRACE',
+  { id: string }
+>;
 
 export type FiltersActions =
   | ShiftSpectrumAlongXAxisAction
@@ -141,6 +146,7 @@ export type FiltersActions =
   | ApplySignalProcessingAction
   | AddPhaseCorrectionTraceAction
   | ChangePhaseCorrectionDirectionAction
+  | DeletePhaseCorrectionTrace
   | ActionType<
     | 'APPLY_FFT_FILTER'
     | 'APPLY_FFT_DIMENSION_1_FILTER'
@@ -703,6 +709,27 @@ function handleChangePhaseCorrectionDirection(
   twoDimensionPhaseCorrection.activeTraceDirection = direction;
 }
 
+//action
+function handleDeletePhaseCorrectionTrace(
+  draft: Draft<State>,
+  action: DeletePhaseCorrectionTrace,
+) {
+  const {
+    toolOptions: {
+      data: {
+        twoDimensionPhaseCorrection: { traces, activeTraceDirection },
+      },
+    },
+  } = draft;
+
+  const { id } = action.payload;
+  const traceDirection = traces[activeTraceDirection];
+
+  traceDirection.spectra = traceDirection.spectra.filter(
+    (trace) => trace.id !== id,
+  );
+}
+
 //action
 function handleCalculateManualPhaseCorrection(
   draft: Draft<State>,
@@ -1088,4 +1115,5 @@ export {
   rollbackSpectrumByFilter,
   handleAddPhaseCorrectionTrace,
   handleChangePhaseCorrectionDirection,
+  handleDeletePhaseCorrectionTrace,
 };