Lazy load + embed table

CHANGELOG.md

@@ -4,13 +4,44 @@ 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.0.4](https://github.com/eea/volto-plotlycharts/compare/13.0.3...13.0.4) - 20 August 2025
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`b589483`](https://github.com/eea/volto-plotlycharts/commit/b589483620c63d6db22d3220d6ee47c2769a4c8e)]
+- style: Automated code fix [eea-jenkins - [`ebced8c`](https://github.com/eea/volto-plotlycharts/commit/ebced8c76b0b5ff98a94c8acfb4dec3034281b99)]
+- style: Automated code fix [eea-jenkins - [`bdcc74a`](https://github.com/eea/volto-plotlycharts/commit/bdcc74a77e5099bc24a4698e48433233b7ce8a9a)]
+- style: Automated code fix [eea-jenkins - [`7f88384`](https://github.com/eea/volto-plotlycharts/commit/7f88384ddd9a4eab862298e9ce6d199d11e68c6d)]
+- style: Automated code fix [eea-jenkins - [`55c075c`](https://github.com/eea/volto-plotlycharts/commit/55c075cad10cf2fe65421af49a2644aad62d1f6e)]
+
+#### :hammer_and_wrench: Others
+
+- hide embed data table [Miu Razvan - [`49ff16b`](https://github.com/eea/volto-plotlycharts/commit/49ff16b375923b94b3cb1f9b59e520f552607301)]
+- fix eslint [Miu Razvan - [`dc67756`](https://github.com/eea/volto-plotlycharts/commit/dc67756a72ce3061d655dac4e6754c86968e9f5f)]
+- fix table rendering of metadata flags [Miu Razvan - [`2c95cc8`](https://github.com/eea/volto-plotlycharts/commit/2c95cc86954c14ce5abcca2c8cffb53d32f7e11b)]
+- further improve lazy loading plotly [Miu Razvan - [`be744c9`](https://github.com/eea/volto-plotlycharts/commit/be744c922c7353fb95d507cfc5ef871b7754f0a1)]
+- fix metadata array [Dobricean Ioan Dorian - [`dbd3536`](https://github.com/eea/volto-plotlycharts/commit/dbd3536c2460ea4ee7ceb97850f212c03510143d)]
+- add specific height feature when 'autosize: true' is used [Miu Razvan - [`8458124`](https://github.com/eea/volto-plotlycharts/commit/84581248ef0bdfb9a173349c56c05584a9e37aab)]
+- Remove console.log [Tiberiu Ichim - [`91ec3b4`](https://github.com/eea/volto-plotlycharts/commit/91ec3b41c6e7b6b2752b484e0aa9b7ccd4399d7b)]
+- Fix injection [Tiberiu Ichim - [`f9d9568`](https://github.com/eea/volto-plotlycharts/commit/f9d956886a91ecb52acfcafd6aa43b16916c2958)]
+- Fix a var [Tiberiu Ichim - [`700fe34`](https://github.com/eea/volto-plotlycharts/commit/700fe341aec1cf0ebcdfd0b82b65f8867eb915c9)]
+- Lazy loading plotly [Tiberiu Ichim - [`0587300`](https://github.com/eea/volto-plotlycharts/commit/058730005fffcec12e5f25579640ce9065b5bb91)]
+- Lazy loading plotly [Tiberiu Ichim - [`ffed054`](https://github.com/eea/volto-plotlycharts/commit/ffed054854ac22af17738e0628296a05b6883dd9)]
+- Remove console.log [Tiberiu Ichim - [`8073564`](https://github.com/eea/volto-plotlycharts/commit/8073564a4698c1a961cd47989a6e332157f19910)]
+- WIP [Tiberiu Ichim - [`2a05efb`](https://github.com/eea/volto-plotlycharts/commit/2a05efb213c99d3d45e6648c777401ab450e9d2e)]
+- WIP [Tiberiu Ichim - [`e2e36b9`](https://github.com/eea/volto-plotlycharts/commit/e2e36b9e22e6498ac69befaae0fe34ee11de138c)]
+- WIP [Tiberiu Ichim - [`27ebe1d`](https://github.com/eea/volto-plotlycharts/commit/27ebe1d58a44f08a2f64ae3bc61c7580b4bdf4db)]
+- WIP on embedding data [Tiberiu Ichim - [`1363df0`](https://github.com/eea/volto-plotlycharts/commit/1363df0e6a358bcd8a819932a0877bd47fe92c91)]
 ### [13.0.3](https://github.com/eea/volto-plotlycharts/compare/13.0.2...13.0.3) - 18 August 2025
 
 #### :bug: Bug Fixes
 
 - fix(filters-styles): only apply to top_filters [nileshgulia1 - [`7bd3078`](https://github.com/eea/volto-plotlycharts/commit/7bd30780b028052aed2bd2ac60269b19c2a3403e)]
 - fix: width on visualization filters refs#288972 [nileshgulia1 - [`05e35be`](https://github.com/eea/volto-plotlycharts/commit/05e35be8d7ef7bafea5d7659d48c9971e7ef1191)]
 
+#### :hammer_and_wrench: Others
+
+- Merge pull request #165 from eea/develop [Nilesh - [`5403f05`](https://github.com/eea/volto-plotlycharts/commit/5403f05d34ab58da29bcd0835dfeb8a58d022bfa)]
 ### [13.0.2](https://github.com/eea/volto-plotlycharts/compare/13.0.1...13.0.2) - 28 July 2025
 
 #### :house: Internal changes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-plotlycharts",
-  "version": "13.0.3",
+  "version": "13.0.4",
   "description": "Plotly Charts and Editor integration for Volto",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -25,7 +25,7 @@
     "@eeacms/volto-datablocks"
   ],
   "dependencies": {
-    "@eeacms/react-chart-editor": "0.47.4",
+    "@eeacms/react-chart-editor": "0.47.6",
     "@eeacms/volto-datablocks": "*",
     "@eeacms/volto-embed": "*",
     "@eeacms/volto-matomo": "*",
@@ -34,7 +34,6 @@
     "jsoneditor": "10.2.0",
     "jszip": "3.10.1",
     "plotly.js": "^2.35.3",
-    "react-plotly.js": "2.6.0",
     "remixicon": "4.6.0"
   },
   "devDependencies": {

src/Blocks/Treemap/Treemap.jsx

@@ -9,11 +9,8 @@ import config from '@plone/volto/registry';
 import { connectToProviderData } from '@eeacms/volto-datablocks/hocs';
 import { VisibilitySensor } from '@eeacms/volto-datablocks/components';
 
-const LoadablePlotly = loadable(() =>
-  import(
-    /* webpackChunkName: "bise-react-plotly" */
-    'react-plotly.js'
-  ),
+const PlotlyComponent = loadable(() =>
+  import('@eeacms/volto-plotlycharts/lib/react-plotly'),
 );
 
 /*
@@ -55,7 +52,7 @@ function Treemap(props) {
     <div className="treemap-chart">
       <VisibilitySensor>
         <div className="visualization">
-          <LoadablePlotly
+          <PlotlyComponent
             data={traces}
             layout={layout}
             frames={[]}

src/PlotlyComponent/Placeholder.jsx

@@ -1,13 +1,6 @@
 function Placeholder() {
   return (
-    <div
-      className="plotly-placeholder"
-      style={{
-        display: 'flex',
-        justifyContent: 'center',
-        padding: '1rem 0',
-      }}
-    >
+    <div className="plotly-placeholder">
       <svg
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 240 240"

src/PlotlyComponent/Plot.jsx

@@ -2,7 +2,9 @@ import React, { forwardRef } from 'react';
 import loadable from '@loadable/component';
 import { useHistory } from 'react-router-dom';
 
-const PlotlyComponent = loadable(() => import('react-plotly.js'));
+const PlotlyComponent = loadable(() =>
+  import('@eeacms/volto-plotlycharts/lib/react-plotly'),
+);
 
 const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
 

src/PlotlyComponent/PlotlyComponent.jsx

@@ -4,7 +4,7 @@ import { connect } from 'react-redux';
 import { mapKeys, isArray, uniqBy, sortBy, isNil } from 'lodash';
 import cx from 'classnames';
 import { FormField } from 'semantic-ui-react';
-import { constants } from '@eeacms/react-chart-editor';
+// import { constants } from '@eeacms/react-chart-editor';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 import { flattenToAppURL } from '@plone/volto/helpers';
 import { VisibilitySensor } from '@eeacms/volto-datablocks/components';
@@ -21,6 +21,13 @@ import {
 import { Toolbar } from '@eeacms/volto-plotlycharts/Utils';
 import Plot from './Plot';
 import Placeholder from './Placeholder';
+import {
+  getMetadataFlags,
+  processMetadataArrays,
+} from '@eeacms/volto-plotlycharts/Utils/utils';
+
+// generateCSVForDataset,
+// generateOriginalCSV,
 
 function getFilterOptions(rows, rowsOrder = null) {
   if (!isArray(rows)) return [];
@@ -38,6 +45,8 @@ function getFilterOptions(rows, rowsOrder = null) {
 }
 
 function UnconnectedPlotlyComponent(props) {
+  const { reactChartEditor } = props;
+  const { constants } = reactChartEditor;
   const container = useRef();
   const el = useRef();
   const Select = props.reactSelect.default;
@@ -121,15 +130,15 @@ function UnconnectedPlotlyComponent(props) {
       acc.push(updatedTrace);
       return acc;
     }, []);
-  }, [value.data, dataSources, filters]);
+  }, [value.data, dataSources, filters, constants.TRACE_SRC_ATTRIBUTES]);
 
   const layout = useMemo(() => {
     return updateDataSources(
       value.layout || {},
       dataSources,
       constants.LAYOUT_SRC_ATTRIBUTES,
     );
-  }, [value.layout, dataSources]);
+  }, [value.layout, dataSources, constants.LAYOUT_SRC_ATTRIBUTES]);
 
   const toolbarData = useMemo(() => {
     return {
@@ -228,9 +237,6 @@ function UnconnectedPlotlyComponent(props) {
         mobile,
       })}
     >
-      {(loadingVisualization || loadingProviderData || !initialized) && (
-        <Placeholder />
-      )}
       {initialized && filters.length > 0 && (
         <div className="visualization-filters">
           {filters.map((filter, index) => {
@@ -260,30 +266,32 @@ function UnconnectedPlotlyComponent(props) {
           })}
         </div>
       )}
-      {!loadingProviderData && (
-        <div
-          className="visualization"
-          style={
-            initialized
-              ? {
-                  '--svg-container-height': `${
-                    height ||
-                    el.current?._fullLayout?.height ||
-                    layout.height ||
-                    450
-                  }px`,
-                }
-              : {}
-          }
-        >
-          <Plot
-            ref={el}
-            data={data}
-            layout={layout}
-            onInitialized={onInitialized}
-          />
-        </div>
-      )}
+      <div
+        className={cx('visualization-wrapper', {
+          loading: loadingVisualization || loadingProviderData || !initialized,
+        })}
+      >
+        {(loadingVisualization || loadingProviderData || !initialized) && (
+          <Placeholder />
+        )}
+        {!loadingProviderData && (
+          <div
+            className="visualization"
+            style={{
+              '--svg-container-height': `${
+                height || layout._height || layout.height || 450
+              }px`,
+            }}
+          >
+            <Plot
+              ref={el}
+              data={data}
+              layout={layout}
+              onInitialized={onInitialized}
+            />
+          </div>
+        )}
+      </div>
       {initialized && (
         <Toolbar
           el={el}
@@ -298,10 +306,129 @@ function UnconnectedPlotlyComponent(props) {
           enlargeContent={<Plot data={data} layout={layout} />}
         />
       )}
+
+      <WithChartEditorLibEmbedData
+        {...props}
+        data={toolbarData}
+        provider_metadata={provider_metadata}
+      />
     </div>
   );
 }
 
+function prepareEmbedData(dataSources, provider_metadata, core_metadata) {
+  let array = [];
+  Object.entries(dataSources).forEach(([key, items]) => {
+    items.forEach((item, index) => {
+      if (!array[index]) array[index] = {};
+      array[index][key] = item;
+    });
+  });
+
+  let readme = provider_metadata?.readme ? [provider_metadata?.readme] : [];
+  const metadataFlags = getMetadataFlags(core_metadata);
+  const metadataArrays = processMetadataArrays(core_metadata, metadataFlags);
+
+  return { array, readme, metadataArrays, metadataFlags };
+}
+
+function Table({ rows }) {
+  const stableKeys = Object.keys(rows?.[0] || {});
+
+  return (
+    <table className="embed-data-table">
+      <thead>
+        <tr>
+          {stableKeys.map((key) => (
+            <th key={key}>{key}</th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {rows.map((row, index) => (
+          <tr key={index}>
+            {stableKeys.map((key) => (
+              <td key={key}>{row[key]}</td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}
+
+function EmbedData(props) {
+  const { provider_metadata } = props; // reactChartEditorLib,
+  const { dataSources = {} } = props.data?.visualization || {};
+
+  const {
+    data_provenance,
+    other_organisations,
+    temporal_coverage,
+    publisher,
+    geo_coverage,
+  } = props.data?.properties || {};
+
+  const core_metadata = {
+    data_provenance: data_provenance?.data,
+    other_organisations,
+    temporal_coverage: temporal_coverage?.temporal,
+    publisher,
+    geo_coverage: geo_coverage?.geolocation,
+  };
+
+  const embedData = prepareEmbedData(
+    dataSources,
+    provider_metadata,
+    core_metadata,
+  );
+  const { array, readme, metadataArrays, metadataFlags } = embedData;
+
+  return (
+    <div style={{ display: 'none' }}>
+      <h3>Embed Data</h3>
+      <Table rows={array} />
+
+      {metadataFlags.hasDataProvenance && (
+        <>
+          <h4>Data Provenance</h4>
+          <Table rows={metadataArrays.data_provenance_array} />
+        </>
+      )}
+      {metadataFlags.hasOtherOrganisation && (
+        <>
+          <h4>Other Organisations</h4>
+          <Table rows={metadataArrays.other_organisation_array} />
+        </>
+      )}
+      {metadataFlags.hasTemporalCoverage && (
+        <>
+          <h4>Temporal Coverage</h4>
+          <Table rows={metadataArrays.temporal_coverage_array} />
+        </>
+      )}
+      {metadataFlags.hasGeoCoverage && (
+        <>
+          <h4>Geographical Coverage</h4>
+          <Table rows={metadataArrays.geo_coverage_array} />
+        </>
+      )}
+      {metadataFlags.hasPublisher && (
+        <>
+          <h4>Publisher</h4>
+          <Table rows={metadataArrays.publisher_array} />
+        </>
+      )}
+
+      <div>{readme}</div>
+    </div>
+  );
+}
+
+const WithChartEditorLibEmbedData = injectLazyLibs(['reactChartEditorLib'])(
+  EmbedData,
+);
+
 const ConnectedPlotlyComponent = compose(
   connectBlockToVisualization(function getConfig(props) {
     const url = flattenToAppURL(props.data?.vis_url);
@@ -323,12 +450,20 @@ const ConnectedPlotlyComponent = compose(
     selfProvided:
       props.data.visualization?.provider_url === props.data.properties?.['@id'],
   })),
-  injectLazyLibs(['reactSelect']),
+  injectLazyLibs(['reactSelect', 'reactChartEditor']),
 )(UnconnectedPlotlyComponent);
 
 export default function PlotlyComponent(props) {
   return (
-    <VisibilitySensor Placeholder={Placeholder}>
+    <VisibilitySensor
+      Placeholder={() => {
+        return (
+          <div className="visualization-wrapper loading">
+            <Placeholder />
+          </div>
+        );
+      }}
+    >
       <ConnectedPlotlyComponent {...props} />
     </VisibilitySensor>
   );