fix: add back filters feature

CHANGELOG.md

@@ -4,6 +4,16 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [13.3.6](https://github.com/eea/volto-plotlycharts/compare/13.3.5...13.3.6) - 20 November 2025
+
+#### :bug: Bug Fixes
+
+- fix: add back filters feature [Miu Razvan - [`cb35107`](https://github.com/eea/volto-plotlycharts/commit/cb3510792da2efed1064039690c0a979624dc55f)]
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`76c3cfd`](https://github.com/eea/volto-plotlycharts/commit/76c3cfd9370adc38548237c7cca4820ff0a4eeb6)]
+
 ### [13.3.5](https://github.com/eea/volto-plotlycharts/compare/13.3.4...13.3.5) - 18 November 2025
 
 ### [13.3.4](https://github.com/eea/volto-plotlycharts/compare/13.3.3...13.3.4) - 17 November 2025

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-plotlycharts",
-  "version": "13.3.5",
+  "version": "13.3.6",
   "description": "Plotly Charts and Editor integration for Volto",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

src/PlotlyComponent/PlotlyComponent.jsx

@@ -18,6 +18,7 @@ import {
   updateTrace,
   updateDataSources,
 } from '@eeacms/volto-plotlycharts/helpers/plotly';
+import { applyFilters } from '@eeacms/volto-plotlycharts/helpers/transforms';
 import { Toolbar } from '@eeacms/volto-plotlycharts/Utils';
 import Plot from './Plot';
 import Placeholder from './Placeholder';
@@ -112,40 +113,28 @@ function UnconnectedPlotlyComponent(props) {
     [provider_data, value.dataSources, selfProvided],
   );
 
+  const filteredDataSources = useMemo(
+    () => applyFilters(dataSources, filters),
+    [dataSources, filters],
+  );
+
   const data = useMemo(() => {
     return (value.data || []).reduce((acc, trace) => {
       const updatedTrace = updateDataSources(
         updateTrace(trace),
-        dataSources,
+        filteredDataSources,
         constants.TRACE_SRC_ATTRIBUTES,
       );
 
-      filters.forEach((filter) => {
-        if (!updatedTrace.transforms) {
-          updatedTrace.transforms = [];
-        }
-        updatedTrace.transforms.push({
-          type: 'filter',
-          target: dataSources[filter.field],
-          targetsrc: filter.field,
-          meta: {
-            columnNames: {
-              target: filter.field,
-            },
-          },
-          value: filter.data?.value || null,
-        });
-      });
-
       acc.push(updatedTrace);
       return acc;
     }, []);
-  }, [value.data, dataSources, filters, constants.TRACE_SRC_ATTRIBUTES]);
+  }, [value.data, filteredDataSources, constants.TRACE_SRC_ATTRIBUTES]);
 
   const layout = useMemo(() => {
     const baseLayout = updateDataSources(
       value.layout || {},
-      dataSources,
+      filteredDataSources,
       constants.LAYOUT_SRC_ATTRIBUTES,
     );
 
@@ -159,7 +148,12 @@ function UnconnectedPlotlyComponent(props) {
     }
 
     return baseLayout;
-  }, [value.layout, dataSources, constants.LAYOUT_SRC_ATTRIBUTES, mobile]);
+  }, [
+    value.layout,
+    filteredDataSources,
+    constants.LAYOUT_SRC_ATTRIBUTES,
+    mobile,
+  ]);
 
   const defaultHeight = useMemo(() => {
     return height || layout._height || layout.height || 450;
@@ -174,13 +168,13 @@ function UnconnectedPlotlyComponent(props) {
               ...props.data.visualization,
               data,
               layout,
-              dataSources,
+              dataSources: filteredDataSources,
               columns: value.columns?.map((column) => column.key) || [],
             },
           }
         : {}),
     };
-  }, [props.data, data, layout, dataSources, value.columns]);
+  }, [props.data, data, layout, filteredDataSources, value.columns]);
 
   // Define the core scale update logic as a separate function
   const updateScaleCore = useCallback(() => {

src/PlotlyEditor/PlotlyEditor.jsx

@@ -19,11 +19,13 @@ import {
   updateTrace,
   updateDataSources,
 } from '@eeacms/volto-plotlycharts/helpers/plotly';
+import {} from '@eeacms/volto-plotlycharts/helpers/transforms';
 
 import { TemplateSelector } from './widgets';
 import DefaultEditor from './DefaultEditor';
 
 import chartHelp from './chartHelp.json';
+import { applyFilters } from '../helpers/transforms';
 
 const config = { editable: false, displayModeBar: false, responsive: true };
 
@@ -77,6 +79,11 @@ const UnconnectedPlotlyEditor = forwardRef((props, ref) => {
     [provider_data, value.dataSources],
   );
 
+  const filteredDataSources = useMemo(
+    () => applyFilters(dataSources, value.filters),
+    [dataSources, value.filters],
+  );
+
   const dataSourceOptions = useMemo(
     () =>
       Object.keys(dataSources).map((name) => ({
@@ -90,22 +97,22 @@ const UnconnectedPlotlyEditor = forwardRef((props, ref) => {
     return (value.data || []).reduce((acc, trace) => {
       const updatedTrace = updateDataSources(
         updateTrace(trace),
-        dataSources,
+        filteredDataSources,
         TRACE_SRC_ATTRIBUTES,
       );
 
       acc.push(updatedTrace);
       return acc;
     }, []);
-  }, [value.data, dataSources, TRACE_SRC_ATTRIBUTES]);
+  }, [value.data, filteredDataSources, TRACE_SRC_ATTRIBUTES]);
 
   const layout = useMemo(() => {
     return updateDataSources(
       value.layout || {},
-      dataSources,
+      filteredDataSources,
       LAYOUT_SRC_ATTRIBUTES,
     );
-  }, [value.layout, dataSources, LAYOUT_SRC_ATTRIBUTES]);
+  }, [value.layout, filteredDataSources, LAYOUT_SRC_ATTRIBUTES]);
 
   const ctx = useMemo(
     () => ({

src/helpers/transforms.js

@@ -0,0 +1,53 @@
+import { cloneDeep, keys, mapValues } from 'lodash';
+
+export const applyFilters = (dataSources, filters) => {
+  // Early return if no filters or empty dataSources
+  if (
+    !filters ||
+    !Array.isArray(filters) ||
+    filters.length === 0 ||
+    !dataSources
+  ) {
+    return dataSources;
+  }
+
+  // Clone to avoid mutating the original
+  const clonedDataSources = cloneDeep(dataSources);
+
+  // Find the first key with data to determine indices
+  const firstKey = keys(clonedDataSources)[0];
+  if (!firstKey || !Array.isArray(clonedDataSources[firstKey])) {
+    return clonedDataSources;
+  }
+
+  // Collect indices that pass all filters
+  const okIndexes = [];
+
+  (clonedDataSources[firstKey] || []).forEach((_, index) => {
+    let passesAllFilters = true;
+
+    // Check each filter against the current index
+    for (const filter of filters) {
+      const filterValue = filter.data?.value || filter.defaultValue;
+      if (
+        filterValue &&
+        clonedDataSources[filter.field] &&
+        clonedDataSources[filter.field][index] !== filterValue
+      ) {
+        passesAllFilters = false;
+        break; // Optimization: exit early once we know it fails
+      }
+    }
+
+    if (passesAllFilters) {
+      okIndexes.push(index);
+    }
+  });
+
+  // Apply the filter to all data arrays
+  return mapValues(clonedDataSources, (values) =>
+    Array.isArray(values)
+      ? values.filter((_, index) => okIndexes.includes(index))
+      : values,
+  );
+};

src/less/global.less

@@ -64,13 +64,6 @@
 //   }
 // }
 
-.plotly-component.filters_on_top {
-  .visualization-filters {
-    display: inline-block;
-    min-width: 200px;
-  }
-}
-
 .block.plotly_chart .block:not(.inner)::before {
   z-index: -1; // fix not clickable editor button
 }

src/less/plotly.less

@@ -47,7 +47,23 @@
   }
 
   .visualization-filters {
+    display: flex;
+    flex-flow: column;
     margin-bottom: 1rem;
+    row-gap: 1rem;
+  }
+
+  &.filters_on_top {
+    .visualization-filters {
+      @media only screen and (min-width: 768px) {
+        flex-flow: row;
+        column-gap: 1rem;
+
+        .field {
+          min-width: 160px;
+        }
+      }
+    }
   }
 
   &:not(.mobile) {