feat: improve filter selection and editing behavior

src/component/elements/Header.tsx → src/component/elements/HeaderContainer.tsx

@@ -20,7 +20,7 @@ const styles: Record<'header', CSSProperties> = {
   },
 };
 
-export function Header(props: HeaderProps) {
+export function HeaderContainer(props: HeaderProps) {
   const {
     children,
     style: { leftStyle = {}, rightStyle = {}, containerStyle = {} } = {},

src/component/elements/ReadOnly.tsx

@@ -0,0 +1,78 @@
+/** @jsxImportSource @emotion/react */
+import { keyframes } from '@emotion/react';
+import styled from '@emotion/styled';
+import { ReactNode, useState } from 'react';
+import { IoLockClosedOutline } from 'react-icons/io5';
+
+const fadeIn = keyframes`
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
+
+const Overlay = styled.div`
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: not-allowed;
+`;
+
+const MessageContainer = styled.div<{ show: boolean }>`
+  background-color: white;
+  padding: 16px;
+  border-radius: 5px;
+  align-items: center;
+  box-shadow: 0 2px 10px rgb(0 0 0 / 10%);
+  display: ${({ show }) => (show ? 'flex' : 'none')};
+  animation: ${fadeIn} 0.3s ease;
+  gap: 8px;
+`;
+
+interface ReadOnlyProps {
+  enabled: boolean;
+  children: ReactNode;
+  message?: string;
+  messageDisplayDuration?: number;
+}
+
+export function ReadOnly(props: ReadOnlyProps) {
+  const {
+    enabled,
+    children,
+    message = 'Read only',
+    messageDisplayDuration = 800,
+  } = props;
+  const [showMessage, setShowMessage] = useState(false);
+
+  function handleOverlayClick() {
+    setShowMessage(true);
+    setTimeout(() => setShowMessage(false), messageDisplayDuration);
+  }
+
+  return (
+    <div style={{ position: 'relative' }}>
+      {children}
+      {enabled && (
+        <Overlay
+          onClick={handleOverlayClick}
+          style={{ backdropFilter: showMessage ? 'blur(1px)' : 'none' }}
+        >
+          <MessageContainer show={showMessage}>
+            <IoLockClosedOutline fontSize={18} />
+            <span>{message}</span>
+          </MessageContainer>
+        </Overlay>
+      )}
+    </div>
+  );
+}

src/component/header/AutoPeakPickingOptionPanel.tsx

@@ -14,7 +14,7 @@ import {
 } from '../hooks/useCheckPointsNumberInWindowArea';
 
 import { headerLabelStyle } from './Header';
-import { HeaderContainer } from './HeaderContainer';
+import { HeaderWrapper } from './HeaderWrapper';
 
 type Direction = 'positive' | 'negative' | 'both';
 
@@ -85,7 +85,7 @@ export function AutoPeakPickingOptionPanel() {
   }
 
   return (
-    <HeaderContainer>
+    <HeaderWrapper>
       <Label title="Direction:" shortTitle="" style={headerLabelStyle}>
         <Select2Controller control={control} name="direction" items={LookFor} />
       </Label>
@@ -134,6 +134,6 @@ export function AutoPeakPickingOptionPanel() {
       >
         Apply
       </Button>
-    </HeaderContainer>
+    </HeaderWrapper>
   );
 }

src/component/header/Header.tsx

@@ -16,7 +16,7 @@ import {
   useWorkspacesList,
 } from '../context/PreferencesContext';
 import Button from '../elements/Button';
-import { Header } from '../elements/Header';
+import { HeaderContainer } from '../elements/HeaderContainer';
 import { LabelStyle } from '../elements/Label';
 import DropDownButton, {
   DropDownListItem,
@@ -30,7 +30,7 @@ import WorkspaceItem from '../modal/setting/WorkspaceItem';
 import { options } from '../toolbar/ToolTypes';
 
 import { AutoPeakPickingOptionPanel } from './AutoPeakPickingOptionPanel';
-import { HeaderContainer } from './HeaderContainer';
+import { HeaderWrapper } from './HeaderWrapper';
 import RangesPickingOptionPanel from './RangesPickingOptionPanel';
 import { SimpleApodizationOptionsPanel } from './SimpleApodizationOptionsPanel';
 import { SimpleBaseLineCorrectionOptionsPanel } from './SimpleBaseLineCorrectionOptionsPanel';
@@ -134,10 +134,10 @@ function HeaderInner(props: HeaderInnerProps) {
 
   return (
     <div css={styles}>
-      <Header
+      <HeaderContainer
         style={{ leftStyle: { flex: 1 }, containerStyle: { padding: '2px' } }}
       >
-        <HeaderContainer
+        <HeaderWrapper
           style={{
             alignItems: 'center',
           }}
@@ -150,8 +150,8 @@ function HeaderInner(props: HeaderInnerProps) {
           <div className="toolOptionsPanel" style={{ flex: 1 }}>
             {selectedPanel}
           </div>
-        </HeaderContainer>
-        <HeaderContainer
+        </HeaderWrapper>
+        <HeaderWrapper
           style={{
             alignItems: 'center',
           }}
@@ -201,8 +201,8 @@ function HeaderInner(props: HeaderInnerProps) {
               )}
             </Toolbar>
           </div>
-        </HeaderContainer>
-      </Header>
+        </HeaderWrapper>
+      </HeaderContainer>
     </div>
   );
 }
@@ -241,7 +241,7 @@ function SaveButton() {
 
 const MemoizedHeader = memo(HeaderInner);
 
-export default function HeaderWrapper() {
+export function Header() {
   const {
     toolOptions: { selectedOptionPanel },
     height,

src/component/header/HeaderContainer.tsx → src/component/header/HeaderWrapper.tsx

@@ -9,7 +9,7 @@ interface HeaderContainerProps {
   children: ReactNode;
 }
 
-export function HeaderContainer(props: HeaderContainerProps) {
+export function HeaderWrapper(props: HeaderContainerProps) {
   const { style = {}, children } = props;
   return <div style={{ ...containerStyle, ...style }}>{children}</div>;
 }

src/component/header/RangesPickingOptionPanel.tsx

@@ -13,7 +13,7 @@ import {
 } from '../hooks/useCheckPointsNumberInWindowArea';
 
 import { headerLabelStyle } from './Header';
-import { HeaderContainer } from './HeaderContainer';
+import { HeaderWrapper } from './HeaderWrapper';
 
 interface AutoRangesOptions {
   minMaxRatio: number;
@@ -60,7 +60,7 @@ function RangesPickingOptionPanel() {
   }
 
   return (
-    <HeaderContainer>
+    <HeaderWrapper>
       <Label title="Detect negative" style={headerLabelStyle}>
         <Checkbox
           style={{ margin: 0 }}
@@ -88,7 +88,7 @@ function RangesPickingOptionPanel() {
       >
         Auto ranges picking
       </Button>
-    </HeaderContainer>
+    </HeaderWrapper>
   );
 }
 

src/component/header/SimpleApodizationOptionsPanel.tsx

@@ -9,7 +9,7 @@ import { useFilter } from '../hooks/useFilter';
 import { useSharedApodization } from '../panels/filtersPanel/Filters/hooks/useSharedApodization';
 
 import { headerLabelStyle } from './Header';
-import { HeaderContainer } from './HeaderContainer';
+import { HeaderWrapper } from './HeaderWrapper';
 
 interface ApodizationOptionsInnerPanelProps {
   filter: Filter | null;
@@ -32,7 +32,7 @@ function ApodizationOptionsInnerPanel(
     register('livePreview');
 
   return (
-    <HeaderContainer>
+    <HeaderWrapper>
       <Label title="Line broadening:" shortTitle="LB:" style={headerLabelStyle}>
         <NumberInput2Controller
           control={control}
@@ -62,7 +62,7 @@ function ApodizationOptionsInnerPanel(
         onDone={() => handleSubmit((values) => handleApplyFilter(values))()}
         onCancel={handleCancelFilter}
       />
-    </HeaderContainer>
+    </HeaderWrapper>
   );
 }
 

src/component/header/SimpleBaseLineCorrectionOptionsPanel.tsx

@@ -15,7 +15,7 @@ import {
 } from '../panels/filtersPanel/Filters/hooks/useBaselineCorrection';
 
 import { headerLabelStyle } from './Header';
-import { HeaderContainer } from './HeaderContainer';
+import { HeaderWrapper } from './HeaderWrapper';
 
 interface BaseLineCorrectionInnerPanelProps {
   filter: Filter | null;
@@ -39,7 +39,7 @@ function BaseLineCorrectionInnerPanel(
     register(`livePreview`);
 
   return (
-    <HeaderContainer>
+    <HeaderWrapper>
       <Label title="Algorithm: " style={headerLabelStyle}>
         <Select
           items={baselineCorrectionsAlgorithms}
@@ -130,7 +130,7 @@ function BaseLineCorrectionInnerPanel(
         onDone={() => handleSubmit((values) => handleApplyFilter(values))()}
         onCancel={handleCancelFilter}
       />
-    </HeaderContainer>
+    </HeaderWrapper>
   );
 }
 

src/component/header/SimplePhaseCorrectionOptionsPanel.tsx

@@ -11,7 +11,7 @@ import {
   usePhaseCorrection,
 } from '../panels/filtersPanel/Filters/hooks/usePhaseCorrection';
 
-import { HeaderContainer } from './HeaderContainer';
+import { HeaderWrapper } from './HeaderWrapper';
 
 export function SimplePhaseCorrectionOptionsPanel() {
   const filter = useFilter(Filters.phaseCorrection.id);
@@ -27,7 +27,7 @@ export function SimplePhaseCorrectionOptionsPanel() {
   } = usePhaseCorrection(filter);
 
   return (
-    <HeaderContainer>
+    <HeaderWrapper>
       <div style={{ padding: '0 5px' }}>
         <Select<AlgorithmItem>
           items={algorithms}
@@ -63,6 +63,6 @@ export function SimplePhaseCorrectionOptionsPanel() {
       )}
 
       <ActionButtons onDone={handleApplyFilter} onCancel={handleCancelFilter} />
-    </HeaderContainer>
+    </HeaderWrapper>
   );
 }

src/component/header/SimplePhaseCorrectionTwoDimensionsPanel.tsx

@@ -17,7 +17,7 @@ import {
 } from '../panels/filtersPanel/Filters/hooks/usePhaseCorrectionTwoDimensions';
 
 import { headerLabelStyle } from './Header';
-import { HeaderContainer } from './HeaderContainer';
+import { HeaderWrapper } from './HeaderWrapper';
 
 export function SimplePhaseCorrectionTwoDimensionsPanel() {
   const filter = useFilter(Filters.phaseCorrectionTwoDimensions.id);
@@ -36,7 +36,7 @@ export function SimplePhaseCorrectionTwoDimensionsPanel() {
   } = usePhaseCorrectionTwoDimensions(filter);
 
   return (
-    <HeaderContainer style={{ padding: '0 5px' }}>
+    <HeaderWrapper style={{ padding: '0 5px' }}>
       <div style={{ padding: '0 5px' }}>
         <Select<AlgorithmItem>
           items={phaseCorrectionalAlgorithms}
@@ -103,6 +103,6 @@ export function SimplePhaseCorrectionTwoDimensionsPanel() {
         </>
       )}
       <ActionButtons onDone={handleApplyFilter} onCancel={handleCancelFilter} />
-    </HeaderContainer>
+    </HeaderWrapper>
   );
 }

src/component/header/SimpleZeroFillingOptionsPanel.tsx

@@ -11,7 +11,7 @@ import {
 } from '../panels/filtersPanel/Filters/hooks/useZeroFilling';
 
 import { headerLabelStyle } from './Header';
-import { HeaderContainer } from './HeaderContainer';
+import { HeaderWrapper } from './HeaderWrapper';
 
 export function SimpleZeroFillingOptionsPanel() {
   const filter = useFilter(Filters.zeroFilling.id);
@@ -21,7 +21,7 @@ export function SimpleZeroFillingOptionsPanel() {
   const { onChange: onLivePreviewChange, ...otherLivePreviewRegisterOptions } =
     register('livePreview');
   return (
-    <HeaderContainer>
+    <HeaderWrapper>
       <Label title="Size:" style={headerLabelStyle}>
         <Select2Controller
           control={control}
@@ -47,6 +47,6 @@ export function SimpleZeroFillingOptionsPanel() {
         onDone={() => submitHandler()}
         onCancel={handleCancelFilter}
       />
-    </HeaderContainer>
+    </HeaderWrapper>
   );
 }

src/component/header/Zones2DOptionPanel.tsx

@@ -8,7 +8,7 @@ import Label from '../elements/Label';
 import { NumberInput2Controller } from '../elements/NumberInput2Controller';
 
 import { headerLabelStyle } from './Header';
-import { HeaderContainer } from './HeaderContainer';
+import { HeaderWrapper } from './HeaderWrapper';
 
 const validationSchema = Yup.object().shape({
   zonesNoiseFactor: Yup.number().integer().min(0).required(),
@@ -50,7 +50,7 @@ function Zones2DOptionPanel() {
   });
 
   return (
-    <HeaderContainer>
+    <HeaderWrapper>
       <Label title="Noise factor:" style={headerLabelStyle}>
         <NumberInput2Controller
           control={control}
@@ -84,7 +84,7 @@ function Zones2DOptionPanel() {
       >
         Auto Zones Picking
       </Button>
-    </HeaderContainer>
+    </HeaderWrapper>
   );
 }
 

src/component/main/InnerNMRiumContents.tsx

@@ -17,7 +17,7 @@ import { FilterSyncOptionsProvider } from '../context/FilterSyncOptionsContext';
 import { usePreferences } from '../context/PreferencesContext';
 import { ExportManagerController } from '../elements/export/ExportManager';
 import { PrintContent } from '../elements/print/PrintContent';
-import Header from '../header/Header';
+import { Header } from '../header/Header';
 import DropZone from '../loader/DropZone';
 import Panels from '../panels/Panels';
 import ToolBar from '../toolbar/ToolBar';