Interface for data operations

frontend/src/renderer/components/grid/HoverButtons.tsx

@@ -17,7 +17,7 @@ import {
   IconEyeEdit,
   IconTrash,
 } from '@tabler/icons-react';
-import { useHover } from '@mantine/hooks';
+import { useElementSize, useHover, useMergedRef } from '@mantine/hooks';
 import { Configuration, CustomizedGridType, DataGridPlot } from '../../types';
 import {
   applyRange,
@@ -52,6 +52,8 @@ export const HoverButtons = React.memo(
   }: HoverButtonsProps) => {
     const { active, updatedConfiguration } = useIbexStore();
     const { hovered, ref: hoverRef } = useHover();
+    const { ref: sizeRef, width: containerWidth } = useElementSize();
+    const containerRef = useMergedRef(hoverRef, sizeRef);
     const previousValueDisplayErrorBands = useRef<boolean | undefined>(
       undefined,
     );
@@ -185,7 +187,7 @@ export const HoverButtons = React.memo(
     };
 
     return (
-      <div ref={hoverRef} className={classes.containerButton}>
+      <div ref={containerRef} className={classes.containerButton}>
         <Group justify="space-between" h={'100%'}>
           {is3DView || !data.coordinates.length || shouldDisplayMetadata ? (
             <Tabs
@@ -198,10 +200,10 @@ export const HoverButtons = React.memo(
                 scrollbarSize={6}
                 offsetScrollbars
                 maw={
-                  hoverRef?.current?.offsetWidth
+                  containerWidth
                     ? !data.coordinates.length || shouldDisplayMetadata
-                      ? hoverRef.current.offsetWidth - 110
-                      : hoverRef.current.offsetWidth - 230
+                      ? containerWidth - 110
+                      : containerWidth - 280
                     : '100%'
                 }
               >

frontend/src/renderer/layout/MainLayout.tsx

@@ -138,6 +138,8 @@ export function MainLayout() {
             line: plot?.line || {},
             customPreferences: plot?.customPreferences || {},
             mode: plot?.mode || 'line',
+            smoothing: plot?.smoothing,
+            operations: plot?.operations,
           };
         }),
       }),

frontend/src/renderer/pages/visualization/DataplotCustomization.tsx

@@ -28,6 +28,8 @@ import {
   CustomizeDataRange,
   CustomizeSynchronization,
   CustomizeInterpolation,
+  CustomizeSmoothing,
+  CustomizeUnaryOperations,
 } from './customizableElements';
 import { IconLink } from '@tabler/icons-react';
 import { initPlotColors } from '../../utils';
@@ -454,6 +456,26 @@ const Customization = ({
         />
       ),
     },
+    {
+      value: 'Data smoothing',
+      component: (
+        <CustomizeSmoothing
+          customizedDataGrid={customizedDataGrid}
+          selectedPlot={selectedPlot}
+          setCustomizedDataGrid={setCustomizedDataGrid}
+        />
+      ),
+    },
+    {
+      value: 'Unary operations',
+      component: (
+        <CustomizeUnaryOperations
+          customizedDataGrid={customizedDataGrid}
+          selectedPlot={selectedPlot}
+          setCustomizedDataGrid={setCustomizedDataGrid}
+        />
+      ),
+    },
   ];
 
   const items = (

frontend/src/renderer/pages/visualization/customizableElements/CustomizeDownsampling.tsx

@@ -9,6 +9,7 @@ import {
   getUrisToInterpolate,
   getVectorData,
   normalizeIndices,
+  reapplyAxisOrder,
 } from '../../../utils';
 import { showNotification } from '@mantine/notifications';
 import { Button, Group, NumberInput, Select, Stack } from '@mantine/core';
@@ -118,6 +119,13 @@ export const CustomizeDownsampling = ({
         plotIndex++;
       }
 
+      // Re-apply axis transposition: the back-end returns data in default axis
+      // order, so restore the user's transposition after the fetch
+      const wantedAxeIndexOrder = customizedDataGrid.coordinates.map(
+        (coord) => coord.axeIndex,
+      );
+      await reapplyAxisOrder(updatedDataPlot, wantedAxeIndexOrder);
+
       // Save new configuration with downsampled data
       setCustomizedDataGrid({
         ...customizedDataGrid,

frontend/src/renderer/pages/visualization/customizableElements/CustomizeInterpolation.tsx

@@ -9,6 +9,7 @@ import {
   normalizeIndices,
   getInterpolationMethods,
   getUrisToInterpolate,
+  reapplyAxisOrder,
 } from '../../../utils';
 import { showNotification } from '@mantine/notifications';
 import { Group, Loader, Select, Stack } from '@mantine/core';
@@ -118,6 +119,13 @@ export const CustomizeInterpolation = ({
         plotIndex++;
       }
 
+      // Re-apply axis transposition: the back-end returns data in default axis
+      // order, so restore the user's transposition after the fetch
+      const wantedAxeIndexOrder = customizedDataGrid.coordinates.map(
+        (coord) => coord.axeIndex,
+      );
+      await reapplyAxisOrder(updatedDataPlot, wantedAxeIndexOrder);
+
       // Save new configuration with interpolated data
       setCustomizedDataGrid({
         ...customizedDataGrid,