feat: improve processing user interaction

cheminfo · Jan 15, 2025 · a954b5e · a954b5e
1 parent 74b5962
commit a954b5e
Show file tree

Hide file tree

Showing 13 changed files with 35 additions and 30 deletions.
diff --git a/src/component/elements/ReadOnly.tsx b/src/component/elements/ReadOnly.tsx
@@ -39,7 +39,8 @@ const MessageContainer = styled.div<{ show: boolean }>`
   gap: 8px;
 `;
 
-interface ReadOnlyProps {
+interface ReadOnlyProps
+  extends Pick<React.HTMLAttributes<HTMLDivElement>, 'onClick'> {
   enabled: boolean;
   children: ReactNode;
   message?: string;
@@ -52,10 +53,12 @@ export function ReadOnly(props: ReadOnlyProps) {
     children,
     message = 'Read only',
     messageDisplayDuration = 800,
+    onClick,
   } = props;
   const [showMessage, setShowMessage] = useState(false);
 
-  function handleOverlayClick() {
+  function handleOverlayClick(event) {
+    onClick?.(event);
     setShowMessage(true);
     setTimeout(() => setShowMessage(false), messageDisplayDuration);
   }

diff --git a/src/component/panels/filtersPanel/Filters/ApodizationDimensionOneOptionsPanel.tsx b/src/component/panels/filtersPanel/Filters/ApodizationDimensionOneOptionsPanel.tsx
@@ -9,14 +9,15 @@ export default function ApodizationDimensionOneOptionsPanel(
     ExtractFilterEntry<'apodizationDimension1'>
   >,
 ) {
-  const { filter, enableEdit = true, onCancel, onConfirm } = props;
+  const { filter, enableEdit = true, onCancel, onConfirm, onEditStart } = props;
 
   return (
     <BaseApodizationOptions
       enableEdit={enableEdit}
       filter={filter}
       onCancel={onCancel}
       onConfirm={onConfirm}
+      onEditStart={onEditStart}
     />
   );
 }
diff --git a/src/component/panels/filtersPanel/Filters/ApodizationDimensionTwoOptionsPanel.tsx b/src/component/panels/filtersPanel/Filters/ApodizationDimensionTwoOptionsPanel.tsx
@@ -9,14 +9,15 @@ export default function ApodizationDimensionTwoOptionsPanel(
     ExtractFilterEntry<'apodizationDimension2'>
   >,
 ) {
-  const { filter, enableEdit = true, onCancel, onConfirm } = props;
+  const { filter, enableEdit = true, onCancel, onConfirm, onEditStart } = props;
 
   return (
     <BaseApodizationOptions
       enableEdit={enableEdit}
       filter={filter}
       onCancel={onCancel}
       onConfirm={onConfirm}
+      onEditStart={onEditStart}
     />
   );
 }
diff --git a/src/component/panels/filtersPanel/Filters/ApodizationOptionsPanel.tsx b/src/component/panels/filtersPanel/Filters/ApodizationOptionsPanel.tsx
@@ -7,14 +7,15 @@ import type { BaseFilterOptionsPanelProps } from './index.js';
 export default function ApodizationOptionsPanel(
   props: BaseFilterOptionsPanelProps<ExtractFilterEntry<'apodization'>>,
 ) {
-  const { filter, enableEdit = true, onCancel, onConfirm } = props;
+  const { filter, enableEdit = true, onCancel, onConfirm, onEditStart } = props;
 
   return (
     <BaseApodizationOptions
       enableEdit={enableEdit}
       filter={filter}
       onCancel={onCancel}
       onConfirm={onConfirm}
+      onEditStart={onEditStart}
     />
   );
 }
diff --git a/src/component/panels/filtersPanel/Filters/BaseLineCorrectionOptionsPanel.tsx b/src/component/panels/filtersPanel/Filters/BaseLineCorrectionOptionsPanel.tsx
@@ -21,7 +21,7 @@ import { formLabelStyle } from './index.js';
 export default function BaseLineCorrectionOptionsPanel(
   props: BaseFilterOptionsPanelProps<ExtractFilterEntry<'baselineCorrection'>>,
 ) {
-  const { filter, enableEdit = true, onCancel, onConfirm } = props;
+  const { filter, enableEdit = true, onCancel, onConfirm, onEditStart } = props;
 
   const {
     register,
@@ -56,7 +56,7 @@ export default function BaseLineCorrectionOptionsPanel(
     !isDirty &&
     filter.value?.algorithm === getValues()?.algorithm;
   return (
-    <ReadOnly enabled={!enableEdit}>
+    <ReadOnly enabled={!enableEdit} onClick={onEditStart}>
       {enableEdit && (
         <StickyHeader>
           <HeaderContainer>
@@ -75,7 +75,6 @@ export default function BaseLineCorrectionOptionsPanel(
               onConfirm={handleConfirm}
               onCancel={handleCancel}
               disabledConfirm={disabledAction}
-              disabledCancel={disabledAction}
             />
           </HeaderContainer>
         </StickyHeader>

diff --git a/src/component/panels/filtersPanel/Filters/ExclusionZonesOptionsPanel.tsx b/src/component/panels/filtersPanel/Filters/ExclusionZonesOptionsPanel.tsx
@@ -37,7 +37,7 @@ const validationSchema = (min: number, max: number) =>
 export default function ExclusionZonesOptionsPanel(
   props: BaseFilterOptionsPanelProps<ExtractFilterEntry<'exclusionZones'>>,
 ) {
-  const { filter, enableEdit = true, onCancel, onConfirm } = props;
+  const { filter, enableEdit = true, onCancel, onConfirm, onEditStart } = props;
   const dispatch = useDispatch();
   const {
     originDomain: {
@@ -151,7 +151,7 @@ export default function ExclusionZonesOptionsPanel(
   }
 
   return (
-    <ReadOnly enabled={!enableEdit}>
+    <ReadOnly enabled={!enableEdit} onClick={onEditStart}>
       {enableEdit && (
         <StickyHeader>
           <HeaderContainer>
@@ -160,7 +160,6 @@ export default function ExclusionZonesOptionsPanel(
               onConfirm={handleConfirm}
               onCancel={handleCancel}
               disabledConfirm={!isDirty}
-              disabledCancel={!isDirty}
             />
           </HeaderContainer>
         </StickyHeader>

diff --git a/src/component/panels/filtersPanel/Filters/FiltersSectionsPanel.tsx b/src/component/panels/filtersPanel/Filters/FiltersSectionsPanel.tsx
@@ -122,16 +122,15 @@ function FilterElements(props: FilterElementsProps) {
 
   return (
     <>
-      {!hideFilterRestoreButton && (
+      {!hideFilterRestoreButton && activeFilterID !== id && (
         <IconButton
-          intent={activeFilterID === id ? 'danger' : 'success'}
+          intent="success"
           tooltipProps={{
-            content:
-              activeFilterID === id ? 'Reapply all filters' : 'Edit filter',
+            content: 'Edit filter',
           }}
           minimal
           onClick={onFilterRestore}
-          icon={activeFilterID === id ? 'undo' : 'annotation'}
+          icon="annotation"
         />
       )}
       <IconButton
@@ -265,6 +264,7 @@ function FiltersInner(props: FiltersInnerProps) {
       {filtersList.map((filter, index) => {
         const { id, name, error, value } = filter;
         const FilterOptionsPanel = filterOptionPanels[filter.name];
+        const enableEdit = activeFilterID === id || filter.value === null;
         return (
           <Sections.Item
             key={id}
@@ -295,9 +295,12 @@ function FiltersInner(props: FiltersInnerProps) {
               <FilterOptionsPanel
                 filter={filter}
                 // Enable editing if the current filter is new or if it is the active filter
-                enableEdit={activeFilterID === id || filter.value === null}
+                enableEdit={enableEdit}
                 onCancel={handleClose}
                 onConfirm={handleClose}
+                onEditStart={() =>
+                  !enableEdit && filterSnapShotHandler(filter, index)
+                }
               />
             ) : (
               <Sections.Body>

diff --git a/src/component/panels/filtersPanel/Filters/PhaseCorrectionOptionsPanel.tsx b/src/component/panels/filtersPanel/Filters/PhaseCorrectionOptionsPanel.tsx
@@ -37,7 +37,7 @@ const formLabelStyle: LabelStyle = {
 export default function PhaseCorrectionOptionsPanel(
   props: BaseFilterOptionsPanelProps<ExtractFilterEntry<'phaseCorrection'>>,
 ) {
-  const { filter, enableEdit = true, onCancel, onConfirm } = props;
+  const { filter, enableEdit = true, onCancel, onConfirm, onEditStart } = props;
   const {
     handleApplyFilter,
     handleCancelFilter,
@@ -61,7 +61,7 @@ export default function PhaseCorrectionOptionsPanel(
   }
 
   return (
-    <ReadOnly enabled={!enableEdit}>
+    <ReadOnly enabled={!enableEdit} onClick={onEditStart}>
       {enableEdit && (
         <StickyHeader>
           <HeaderContainer>

diff --git a/src/component/panels/filtersPanel/Filters/PhaseCorrectionTwoDimensionsOptionsPanel.tsx b/src/component/panels/filtersPanel/Filters/PhaseCorrectionTwoDimensionsOptionsPanel.tsx
@@ -46,7 +46,7 @@ export default function PhaseCorrectionTwoDimensionsOptionsPanel(
     ExtractFilterEntry<'phaseCorrectionTwoDimensions'>
   >,
 ) {
-  const { enableEdit = true, onCancel, onConfirm } = props;
+  const { enableEdit = true, onCancel, onConfirm, onEditStart } = props;
 
   const filter = useFilter('phaseCorrectionTwoDimensions');
 
@@ -77,7 +77,7 @@ export default function PhaseCorrectionTwoDimensionsOptionsPanel(
   }
 
   return (
-    <ReadOnly enabled={!enableEdit}>
+    <ReadOnly enabled={!enableEdit} onClick={onEditStart}>
       {enableEdit && (
         <StickyHeader>
           <HeaderContainer>

diff --git a/src/component/panels/filtersPanel/Filters/ShiftOptionsPanel.tsx b/src/component/panels/filtersPanel/Filters/ShiftOptionsPanel.tsx
@@ -21,7 +21,7 @@ type ShiftFilterPanelOptions =
 export default function ShiftOptionsPanel(
   props: BaseFilterOptionsPanelProps<ShiftFilterPanelOptions>,
 ) {
-  const { filter, enableEdit = true, onCancel, onConfirm } = props;
+  const { filter, enableEdit = true, onCancel, onConfirm, onEditStart } = props;
 
   const dispatch = useDispatch();
   const {
@@ -79,7 +79,7 @@ export default function ShiftOptionsPanel(
   }
 
   return (
-    <ReadOnly enabled={!enableEdit}>
+    <ReadOnly enabled={!enableEdit} onClick={onEditStart}>
       {enableEdit && (
         <StickyHeader>
           <HeaderContainer>
@@ -88,7 +88,6 @@ export default function ShiftOptionsPanel(
               onConfirm={handleConfirm}
               onCancel={handleCancel}
               disabledConfirm={!isDirty}
-              disabledCancel={!isDirty}
             />
           </HeaderContainer>
         </StickyHeader>

diff --git a/src/component/panels/filtersPanel/Filters/base/BaseApodizationOptions.tsx b/src/component/panels/filtersPanel/Filters/base/BaseApodizationOptions.tsx
@@ -32,7 +32,7 @@ const advanceValidationSchema = Yup.object().shape({
 export function BaseApodizationOptions(
   props: BaseFilterOptionsPanelProps<ApodizationFilterEntry>,
 ) {
-  const { filter, enableEdit = true, onCancel, onConfirm } = props;
+  const { filter, enableEdit = true, onCancel, onConfirm, onEditStart } = props;
 
   const { submitHandler, handleApplyFilter, handleCancelFilter, formMethods } =
     useApodization(filter, {
@@ -61,7 +61,7 @@ export function BaseApodizationOptions(
 
   return (
     <FormProvider {...formMethods}>
-      <ReadOnly enabled={!enableEdit}>
+      <ReadOnly enabled={!enableEdit} onClick={onEditStart}>
         {enableEdit && (
           <StickyHeader>
             <HeaderContainer>
@@ -80,7 +80,6 @@ export function BaseApodizationOptions(
                 onConfirm={handleConfirm}
                 onCancel={handleCancel}
                 disabledConfirm={disabledAction}
-                disabledCancel={disabledAction}
               />
             </HeaderContainer>
           </StickyHeader>

diff --git a/src/component/panels/filtersPanel/Filters/base/BaseZeroFillingOptions.tsx b/src/component/panels/filtersPanel/Filters/base/BaseZeroFillingOptions.tsx
@@ -17,7 +17,7 @@ import type { BaseFilterOptionsPanelProps } from '../index.js';
 export function BaseZeroFillingOptions(
   props: BaseFilterOptionsPanelProps<ZeroFillingEntry>,
 ) {
-  const { filter, enableEdit = true, onCancel, onConfirm } = props;
+  const { filter, enableEdit = true, onCancel, onConfirm, onEditStart } = props;
 
   const {
     control,
@@ -44,7 +44,7 @@ export function BaseZeroFillingOptions(
 
   const nbPointsList = getZeroFillingNbPoints(filter);
   return (
-    <ReadOnly enabled={!enableEdit}>
+    <ReadOnly enabled={!enableEdit} onClick={onEditStart}>
       {enableEdit && (
         <StickyHeader>
           <HeaderContainer>
@@ -63,7 +63,6 @@ export function BaseZeroFillingOptions(
               onConfirm={handleConfirm}
               onCancel={handleCancel}
               disabledConfirm={disabledAction}
-              disabledCancel={disabledAction}
             />
           </HeaderContainer>
         </StickyHeader>

diff --git a/src/component/panels/filtersPanel/Filters/index.tsx b/src/component/panels/filtersPanel/Filters/index.tsx
@@ -55,6 +55,7 @@ export interface BaseFilterOptionsPanelProps<T> {
   enableEdit: boolean;
   onConfirm: ButtonProps['onClick'];
   onCancel: ButtonProps['onClick'];
+  onEditStart: ButtonProps['onClick'];
 }
 
 export const formLabelStyle: LabelStyle = {