Interface for data operations

docs/source/users_manual/features/customization.rst

@@ -55,15 +55,33 @@ Applies a smoothing method to reduce noise while preserving the overall shape of
    :alt: Data smoothing section of the customization
    :align: center
 
-Unary operations
+Data operations
 --------------------
 
-Applies an ordered list of scalar operations to every data point of the plot:
+Applies an ordered list of operations to every data point of the plot. Each row
+has a **kind**, which decides what the plot is combined with:
 
-.. image:: images/customization_unary_operations.png
-   :alt: Unary operations section of the customization
+* **Constant**: a scalar value that you type in. Available operations are addition,
+  subtraction, multiplication, division, exponentiation and nth root.
+* **Signal**: another plot of the same graph, combined point by point. Available
+  operations are addition, subtraction, multiplication and division. This kind
+  requires at least two plots in the graph, otherwise it stays disabled.
+
+.. image:: images/customization_data_operations.png
+   :alt: Data operations section of the customization
    :align: center
 
+A few things to keep in mind when combining two signals:
+
+* All constant operations are applied before all signal operations, whatever the
+  order of the rows.
+* Both signals must share the same shape and the same coordinates. When they do
+  not, either select an interpolation method in the *Interpolation* section or
+  the server reports which of the two has to be interpolated.
+* An addition or a subtraction requires both signals to share the same unit,
+  while a multiplication or a division combines them (for example ``m`` and
+  ``s`` become ``m/s``).
+
 Visual customization
 ----------------------------
 

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

@@ -19,7 +19,7 @@ import {
   IconTrash,
   IconTarget,
 } from '@tabler/icons-react';
-import { useHover } from '@mantine/hooks';
+import { useElementSize, useHover, useMergedRef } from '@mantine/hooks';
 import {
   Configuration,
   CustomizedGridType,
@@ -55,6 +55,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,
     );
@@ -196,7 +198,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
@@ -209,10 +211,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/components/plot/SimplePlotly.tsx

@@ -198,7 +198,7 @@ export const SimplePlotly = ({
       title: { text: title },
     }));
 
-    if (!itemDataGrid.isEditing) {
+    if (!itemDataGrid.isEditing || title === itemDataGrid.title) {
       return;
     }
 

frontend/src/renderer/layout/MainLayout.tsx

@@ -17,6 +17,7 @@ import { PreferenceModal } from '../components/preferences/PreferenceModal';
 import {
   updateIbexConfig,
   formatConfigBeforeLoadingURIs,
+  formatSignalOperandsToSave,
   plotNodeUriLoaded,
   updateCustomDataTree,
   readIbexConfig,
@@ -144,6 +145,13 @@ export function MainLayout() {
             line: plot?.line || {},
             customPreferences: plot?.customPreferences || {},
             mode: plot?.mode || 'line',
+            smoothing: plot?.smoothing,
+            // Signal operands are stored the same way as nodeUri, so that they
+            // are remapped onto the selected data entries when reloading
+            operations: formatSignalOperandsToSave(
+              plot?.operations,
+              dataGrid.plot,
+            ),
           };
         }),
       }),

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

@@ -28,6 +28,8 @@ import {
   CustomizeDataRange,
   CustomizeSynchronization,
   CustomizeInterpolation,
+  CustomizeSmoothing,
+  CustomizeDataOperations,
   CustomizeGeometry,
 } from './customizableElements';
 import { IconGeometry, IconLink } from '@tabler/icons-react';
@@ -60,6 +62,9 @@ export const DataplotCustomization = () => {
         downsampled_method: customizedDataGrid?.downsampled_method,
         interpolated_method: customizedDataGrid.interpolated_method,
         plot: customizedDataGrid?.plot,
+        // A data operation can change a unit and move a plot to the second axis
+        yAxisData: customizedDataGrid?.yAxisData,
+        y2AxisData: customizedDataGrid?.y2AxisData,
       } as DataGridPlot;
       setDataGridLayout(updatedDataGridLayout);
       setSelectedPlot(
@@ -481,6 +486,26 @@ const Customization = ({
         />
       ),
     },
+    {
+      value: 'Data smoothing',
+      component: (
+        <CustomizeSmoothing
+          customizedDataGrid={customizedDataGrid}
+          selectedPlot={selectedPlot}
+          setCustomizedDataGrid={setCustomizedDataGrid}
+        />
+      ),
+    },
+    {
+      value: 'Data operations',
+      component: (
+        <CustomizeDataOperations
+          customizedDataGrid={customizedDataGrid}
+          selectedPlot={selectedPlot}
+          setCustomizedDataGrid={setCustomizedDataGrid}
+        />
+      ),
+    },
   ];
 
   const items = (

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

@@ -265,10 +265,11 @@ export const VisualizationMetaData = () => {
       );
       if (data) {
         setDataGridLayout(data);
-        setTabsValue(data.plot[0]?.name || null);
-        const findPlot = data.plot.find(
-          (item) => item.name === data.plot[0]?.name,
-        );
+        const selectedName = data.plot.some((item) => item.name === tabsValue)
+          ? tabsValue
+          : data.plot[0]?.name || null;
+        setTabsValue(selectedName);
+        const findPlot = data.plot.find((item) => item.name === selectedName);
         if (findPlot) {
           setItemDataGrid({
             ...data,