wip: processings panel for spectra operations

package.json

@@ -73,6 +73,7 @@
     "@zakodium/nmrium-core": "^0.7.31",
     "@zakodium/nmrium-core-plugins": "^0.7.40",
     "@zakodium/pdnd-esm": "^1.1.0",
+    "@zakodium/utils": "^0.2.0",
     "@zip.js/zip.js": "^2.8.26",
     "cheminfo-font": "^1.27.0",
     "cheminfo-types": "^1.15.0",

src/component/elements/Sections.tsx

@@ -207,7 +207,7 @@ const InnerHeader = styled.div`
 `;
 
 interface BaseSectionProps {
-  title: string;
+  title: ReactNode;
   serial?: number;
   rightElement?: ReactNode | ((isOpen: boolean) => ReactNode);
   leftElement?: ReactNode | ((isOpen: boolean) => ReactNode);
@@ -216,14 +216,14 @@ interface BaseSectionProps {
 }
 
 interface SectionItemProps extends BaseSectionProps {
-  id?: string;
+  id: string;
   index?: number;
   onClick?: (id: any, event?: MouseEvent<HTMLDivElement>) => void;
   children?: ReactNode | ((options: { isOpen?: boolean }) => ReactNode);
   isOpen: boolean;
   sticky?: boolean;
   onReorder?: (sourceId: number, targetId: number) => void;
-  dragLabel?: string;
+  dragLabel?: ReactNode;
 }
 
 interface SectionProps {
@@ -271,7 +271,7 @@ function SectionItem(props: SectionItemProps) {
   const {
     title,
     dragLabel = title,
-    id = title,
+    id,
     onClick,
     serial,
     rightElement,

src/component/header/Header.tsx

@@ -10,7 +10,6 @@ import { Toolbar, useFullscreen } from 'react-science/ui';
 
 import { docsBaseUrl } from '../../constants.js';
 import { useChartData } from '../context/ChartContext.js';
-import { useCore } from '../context/CoreContext.js';
 import {
   usePreferences,
   useWorkspacesList,
@@ -28,7 +27,7 @@ import AboutUsModal from '../modal/aboutUs/AboutUsModal.js';
 import WorkspaceItem from '../modal/setting/WorkspaceItem.js';
 import { GeneralSettingsToolbarItem } from '../modal/setting/general_settings.js';
 import { options } from '../toolbar/ToolTypes.js';
-import { renderCoreSlot } from '../utility/renderCoreSlot.js';
+import { CoreSlot } from '../utility/CoreSlot.tsx';
 
 import { AutoPeakPickingOptionPanel } from './AutoPeakPickingOptionPanel.js';
 import { HeaderWrapper } from './HeaderWrapper.js';
@@ -63,7 +62,6 @@ interface HeaderInnerProps {
 
 function HeaderInner(props: HeaderInnerProps) {
   const { selectedOptionPanel, height } = props;
-  const core = useCore();
 
   const {
     current: {
@@ -149,7 +147,7 @@ function HeaderInner(props: HeaderInnerProps) {
           }}
         >
           <PluginTopBarRight>
-            {renderCoreSlot(core, 'topbar.right')}
+            <CoreSlot slot="topbar.right" />
           </PluginTopBarRight>
 
           {!hideWorkspaces && (

src/component/modal/aboutUs/AboutUsModal.tsx

@@ -3,11 +3,10 @@ import { SvgLogoNmrium } from 'cheminfo-font';
 import { Toolbar, useOnOff } from 'react-science/ui';
 
 import versionInfo from '../../../versionInfo.js';
-import { useCore } from '../../context/CoreContext.js';
 import Logo from '../../elements/Logo.js';
 import { StandardDialog } from '../../elements/StandardDialog.tsx';
 import { StyledDialogBody } from '../../elements/StyledDialogBody.js';
-import { renderCoreSlot } from '../../utility/renderCoreSlot.js';
+import { CoreSlot } from '../../utility/CoreSlot.tsx';
 
 import AboutUsZakodium from './AboutUsZakodium.js';
 
@@ -116,7 +115,6 @@ const modalContentFallback = (
 
 function AboutUsModal() {
   const [isOpenDialog, openDialog, closeDialog] = useOnOff(false);
-  const core = useCore();
 
   return (
     <>
@@ -137,7 +135,10 @@ function AboutUsModal() {
         title="About NMRium"
       >
         <StyledDialogBody>
-          {renderCoreSlot(core, 'topbar.about_us.modal', modalContentFallback)}
+          <CoreSlot
+            slot="topbar.about_us.modal"
+            fallback={modalContentFallback}
+          />
         </StyledDialogBody>
       </StandardDialog>
     </>

src/component/panels/filtersPanel/FilterPanel.tsx

@@ -2,17 +2,20 @@ import { useDispatch } from '../../context/DispatchContext.js';
 import { useToaster } from '../../context/ToasterContext.js';
 import type { AlertButton } from '../../elements/Alert.js';
 import { useAlert } from '../../elements/Alert.js';
+import useCheckExperimentalFeature from '../../hooks/useCheckExperimentalFeature.ts';
 import useSpectrum from '../../hooks/useSpectrum.js';
 import { TablePanel } from '../extra/BasicPanelStyle.js';
 import DefaultPanelHeader from '../header/DefaultPanelHeader.js';
 
 import { FiltersSectionsPanel } from './Filters/FiltersSectionsPanel.js';
+import { ProcessingsSectionsPanel } from './processings_sections_panel.tsx';
 
 export default function FiltersPanel() {
   const dispatch = useDispatch();
   const toaster = useToaster();
   const { showAlert } = useAlert();
   const { filters } = useSpectrum({ filters: [] });
+  const isExperimental = useCheckExperimentalFeature();
 
   function handleDeleteFilter() {
     const buttons: AlertButton[] = [
@@ -46,6 +49,13 @@ export default function FiltersPanel() {
       />
       <div className="inner-container">
         <FiltersSectionsPanel />
+
+        {isExperimental && (
+          <>
+            <hr />
+            <ProcessingsSectionsPanel />
+          </>
+        )}
       </div>
     </TablePanel>
   );

src/component/panels/filtersPanel/Filters/base/BaseApodizationOptions.tsx

@@ -330,6 +330,7 @@ function OptionsSection(options: OptionsSectionProps) {
 
   return (
     <Sections.Item
+      id={algorithm}
       title={algorithmTitle}
       arrowProps={{ hide: true }}
       isOpen={isApplyChecked}