refactor: phase correction panel and have simple and advance options

src/component/header/Header.tsx

@@ -32,10 +32,10 @@ import { options } from '../toolbar/ToolTypes';
 import { AutoPeakPickingOptionPanel } from './AutoPeakPickingOptionPanel';
 import BaseLineCorrectionPanel from './BaseLineCorrectionPanel';
 import { HeaderContainer } from './HeaderContainer';
-import PhaseCorrectionPanel from './PhaseCorrectionPanel';
 import PhaseCorrectionTwoDimensionsPanel from './PhaseCorrectionTwoDimensionsPanel';
 import RangesPickingOptionPanel from './RangesPickingOptionPanel';
 import { SimpleApodizationOptionsPanel } from './SimpleApodizationOptionsPanel';
+import { SimplePhaseCorrectionOptionsPanel } from './SimplePhaseCorrectionOptionsPanel';
 import ZeroFillingOptionsPanel from './ZeroFillingOptionsPanel';
 import Zones2DOptionPanel from './Zones2DOptionPanel';
 
@@ -108,7 +108,7 @@ function HeaderInner(props: HeaderInnerProps) {
       case options.zeroFilling.id:
         return <ZeroFillingOptionsPanel />;
       case options.phaseCorrection.id:
-        return <PhaseCorrectionPanel />;
+        return <SimplePhaseCorrectionOptionsPanel />;
       case options.phaseCorrectionTwoDimensions.id:
         return <PhaseCorrectionTwoDimensionsPanel />;
       case options.peakPicking.id:

src/component/header/SimplePhaseCorrectionOptionsPanel.tsx

@@ -0,0 +1,68 @@
+import { Select } from '@blueprintjs/select';
+import { Filters } from 'nmr-processing';
+import { Button } from 'react-science/ui';
+
+import ActionButtons from '../elements/ActionButtons';
+import InputRange from '../elements/InputRange';
+import { useFilter } from '../hooks/useFilter';
+import {
+  algorithms,
+  AlgorithmItem,
+  usePhaseCorrection,
+} from '../panels/filtersPanel/Filters/usePhaseCorrection';
+
+import { HeaderContainer } from './HeaderContainer';
+
+export function SimplePhaseCorrectionOptionsPanel() {
+  const filter = useFilter(Filters.phaseCorrection.id);
+
+  const {
+    handleApplyFilter,
+    handleCancelFilter,
+    handleRangeChange,
+    defaultSelectProps,
+    phaseCorrectionTypeItem,
+    ph0Ref,
+    ph1Ref,
+  } = usePhaseCorrection(filter);
+
+  return (
+    <HeaderContainer>
+      <div style={{ padding: '0 5px' }}>
+        <Select<AlgorithmItem>
+          items={algorithms}
+          filterable={false}
+          itemsEqual="value"
+          {...defaultSelectProps}
+        >
+          <Button
+            text={phaseCorrectionTypeItem?.label}
+            rightIcon="double-caret-vertical"
+          />
+        </Select>
+      </div>
+      {phaseCorrectionTypeItem?.value === 'manual' && (
+        <>
+          <InputRange
+            ref={ph0Ref}
+            name="ph0"
+            label="Change PH0 (click and drag)"
+            shortLabel="Ph0"
+            style={{ width: '20%' }}
+            onChange={handleRangeChange}
+          />
+          <InputRange
+            ref={ph1Ref}
+            name="ph1"
+            label="Change PH1 (click and drag)"
+            shortLabel="Ph1"
+            style={{ width: '20%' }}
+            onChange={handleRangeChange}
+          />
+        </>
+      )}
+
+      <ActionButtons onDone={handleApplyFilter} onCancel={handleCancelFilter} />
+    </HeaderContainer>
+  );
+}

src/component/panels/filtersPanel/Filters/PhaseCorrectionOptionsPanel.tsx

@@ -0,0 +1,123 @@
+import { Button } from '@blueprintjs/core';
+import { Select } from '@blueprintjs/select';
+import { Filter } from 'nmr-processing';
+import { CSSProperties } from 'react';
+
+import InputRange from '../../../elements/InputRange';
+import Label, { LabelStyle } from '../../../elements/Label';
+import { NumberInput2 } from '../../../elements/NumberInput2';
+import { Sections } from '../../../elements/Sections';
+
+import { FilterActionButtons } from './FilterActionButtons';
+import { HeaderContainer, StickyHeader } from './InnerFilterHeader';
+import {
+  algorithms,
+  usePhaseCorrection,
+  AlgorithmItem,
+} from './usePhaseCorrection';
+
+interface PhaseCorrectionOptionsPanelProps {
+  filter: Filter;
+}
+
+const inputRangeStyle: CSSProperties = {
+  padding: '5px 10px',
+};
+
+const formLabelStyle: LabelStyle = {
+  label: {
+    flex: 2,
+  },
+  wrapper: {
+    flex: 10,
+    display: 'flex',
+  },
+  container: {
+    marginBottom: '5px',
+  },
+};
+
+export default function PhaseCorrectionOptionsPanel(
+  props: PhaseCorrectionOptionsPanelProps,
+) {
+  const { filter } = props;
+  const {
+    handleApplyFilter,
+    handleCancelFilter,
+    handleInput,
+    handleRangeChange,
+    value,
+    defaultSelectProps,
+    phaseCorrectionTypeItem,
+    ph0Ref,
+    ph1Ref,
+  } = usePhaseCorrection(filter);
+
+  return (
+    <>
+      <StickyHeader>
+        <HeaderContainer>
+          <div />
+          <FilterActionButtons
+            onConfirm={handleApplyFilter}
+            onCancel={handleCancelFilter}
+          />
+        </HeaderContainer>
+      </StickyHeader>
+      <Sections.Body>
+        <div style={{ display: 'flex', flexDirection: 'column' }}>
+          <Label title="Algorithm:" style={formLabelStyle}>
+            <Select<AlgorithmItem>
+              items={algorithms}
+              filterable={false}
+              itemsEqual="value"
+              {...defaultSelectProps}
+            >
+              <Button
+                text={phaseCorrectionTypeItem?.label}
+                rightIcon="double-caret-vertical"
+                outlined
+              />
+            </Select>
+          </Label>
+          {phaseCorrectionTypeItem?.value === 'manual' && (
+            <>
+              <Label title="PH0:" style={formLabelStyle}>
+                <NumberInput2
+                  name="ph0"
+                  onValueChange={handleInput}
+                  value={value.ph0}
+                  debounceTime={250}
+                  style={{ width: '100px' }}
+                />
+                <InputRange
+                  ref={ph0Ref}
+                  name="ph0"
+                  label="Change PH0 (click and drag)"
+                  onChange={handleRangeChange}
+                  style={inputRangeStyle}
+                />
+              </Label>
+              <Label title="PH1:" style={formLabelStyle}>
+                <NumberInput2
+                  name="ph1"
+                  onValueChange={handleInput}
+                  value={value.ph1}
+                  debounceTime={250}
+                  style={{ width: '100px' }}
+                />
+                <InputRange
+                  ref={ph1Ref}
+                  name="ph1"
+                  label="Change PH1 (click and drag)"
+                  onChange={handleRangeChange}
+                  style={inputRangeStyle}
+                />
+              </Label>
+            </>
+          )}
+        </div>
+      </Sections.Body>
+    </>
+  );
+}

src/component/panels/filtersPanel/Filters/index.tsx

@@ -3,10 +3,12 @@ import { Filters } from 'nmr-processing';
 import { LabelStyle } from '../../../elements/Label';
 
 import ApodizationOptionsPanel from './ApodizationOptionsPanel';
+import PhaseCorrectionOptionsPanel from './PhaseCorrectionOptionsPanel';
 
-const { apodization } = Filters;
+const { apodization, phaseCorrection } = Filters;
 export const filterOptionPanels = {
   [apodization.id]: ApodizationOptionsPanel,
+  [phaseCorrection.id]: PhaseCorrectionOptionsPanel,
 };
 
 export const formLabelStyle: LabelStyle = {