wip: processings panel for spectra operations

package.json

@@ -167,4 +167,4 @@
   "volta": {
     "node": "24.15.0"
   }
-}
+}

src/component/elements/Sections.tsx

@@ -205,7 +205,7 @@ const InnerHeader = styled.div`
 `;
 
 interface BaseSectionProps {
-  title: string;
+  title: ReactNode;
   serial?: number;
   rightElement?: ReactNode | ((isOpen: boolean) => ReactNode);
   leftElement?: ReactNode | ((isOpen: boolean) => ReactNode);
@@ -214,14 +214,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 {
@@ -269,7 +269,7 @@ function SectionItem(props: SectionItemProps) {
   const {
     title,
     dragLabel = title,
-    id = title,
+    id,
     onClick,
     serial,
     rightElement,

src/component/header/Header.tsx

@@ -28,7 +28,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';
@@ -149,7 +149,7 @@ function HeaderInner(props: HeaderInnerProps) {
           }}
         >
           <PluginTopBarRight>
-            {renderCoreSlot(core, 'topbar.right')}
+            <CoreSlot slot="topbar.right" core={core} />
           </PluginTopBarRight>
 
           {!hideWorkspaces && (

src/component/modal/aboutUs/AboutUsModal.tsx

@@ -7,7 +7,7 @@ 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';
 
@@ -137,7 +137,11 @@ function AboutUsModal() {
         title="About NMRium"
       >
         <StyledDialogBody>
-          {renderCoreSlot(core, 'topbar.about_us.modal', modalContentFallback)}
+          <CoreSlot
+            slot="topbar.about_us.modal"
+            core={core}
+            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}

src/component/panels/filtersPanel/processings_sections_panel.tsx

@@ -0,0 +1,90 @@
+import { useState } from 'react';
+import { ObjectInspector } from 'react-inspector';
+
+import { useCore } from '../../context/CoreContext.tsx';
+import type { AlertButton } from '../../elements/Alert.tsx';
+import { useAlert } from '../../elements/Alert.tsx';
+import { EmptyText } from '../../elements/EmptyText.tsx';
+import { Sections } from '../../elements/Sections.tsx';
+import useSpectrum from '../../hooks/useSpectrum.ts';
+import { CoreSlot } from '../../utility/CoreSlot.tsx';
+import DefaultPanelHeader from '../header/DefaultPanelHeader.tsx';
+
+export function ProcessingsSectionsPanel() {
+  const core = useCore();
+
+  const { showAlert } = useAlert();
+  const { processings } = useSpectrum({ filters: [] });
+  const [openedOperation, setOpenedOperation] = useState<string | null>(null);
+
+  function handleDeleteFilter() {
+    const buttons: AlertButton[] = [
+      {
+        text: 'Yes',
+        intent: 'danger',
+      },
+      { text: 'No' },
+    ];
+
+    showAlert({
+      message:
+        'You are about to delete all processing steps, Are you sure?. Experimental, not implemented yet',
+      buttons,
+    });
+  }
+
+  function toggleSection(operationId: string) {
+    setOpenedOperation(openedOperation === operationId ? null : operationId);
+  }
+
+  return (
+    <>
+      <DefaultPanelHeader
+        deleteTooltip="Delete all filters"
+        onDelete={handleDeleteFilter}
+        total={processings?.length}
+        hideCounter
+      />
+
+      <Sections isOverflow renderActiveSectionContentOnly>
+        {processings?.map((operation, index) => (
+          <Sections.Item
+            key={operation.uid}
+            id={operation.uid}
+            title={
+              <CoreSlot
+                slot="panels.processings.operation.name"
+                core={core}
+                fallback={operation.operatorId.split('#', 2).at(-1)}
+                operation={operation}
+              />
+            }
+            isOpen={openedOperation === operation.uid}
+            serial={index + 1}
+            onClick={() => toggleSection(operation.uid)}
+          >
+            <Sections.Body>
+              <CoreSlot
+                slot="panels.processings.operation.expanded"
+                core={core}
+                fallback={
+                  operation.settings !== null ? (
+                    <ObjectInspector
+                      data={{
+                        settings: operation.settings,
+                        options: operation.options,
+                      }}
+                    />
+                  ) : (
+                    <EmptyText text=" No options available" />
+                  )
+                }
+                operation={operation}
+              />
+            </Sections.Body>
+          </Sections.Item>
+        ))}
+      </Sections>
+    </>
+  );
+}

src/component/utility/CoreSlot.tsx

@@ -0,0 +1,37 @@
+import type {
+  NMRiumCore,
+  PluginUIComponentProps,
+  SupportedUISlot,
+} from '@zakodium/nmrium-core';
+import { castSlotProps } from '@zakodium/nmrium-core';
+import type { ReactNode } from 'react';
+
+type SlotProps<Slot extends SupportedUISlot> =
+  Omit<Extract<PluginUIComponentProps, { slot: Slot }>, 'slot'> extends Record<
+    string,
+    never
+  >
+    ? object
+    : Omit<Extract<PluginUIComponentProps, { slot: Slot }>, 'slot'>;
+
+interface CoreSlotProps<Slot extends SupportedUISlot> {
+  slot: Slot;
+  core: NMRiumCore;
+  fallback?: ReactNode;
+}
+
+/**
+ * Render all components registered in the given slot.
+ */
+export function CoreSlot<Slot extends SupportedUISlot>(
+  props: CoreSlotProps<Slot> & SlotProps<Slot>,
+) {
+  const { slot, core, fallback, ...slotProps } = props;
+  castSlotProps(slotProps, slot);
+
+  const jsx = Array.from(core.slot(slot), ([key, Component]) => (
+    <Component key={key} {...slotProps} slot={slot} />
+  ));
+
+  return jsx.length > 0 ? jsx : fallback;
+}