Merge pull request #46 from eea/develop

Advanced select for core metadata download
eea · Nov 4, 2022 · 58909e6 · 58909e6
2 parents 8aa9fff + 72b7e80
commit 58909e6
Show file tree

Hide file tree

Showing 7 changed files with 173 additions and 51 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,7 +4,17 @@ 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).
 
-### [5.0.0](https://github.com/eea/volto-plotlycharts/compare/4.0.0...5.0.0) - 3 November 2022
+### [5.0.1](https://github.com/eea/volto-plotlycharts/compare/5.0.0...5.0.1) - 4 November 2022
+
+#### :hammer_and_wrench: Others
+
+- download cleaner, core metadata below csv data [andreiggr - [`479505a`](https://github.com/eea/volto-plotlycharts/commit/479505afc20d14604f773b0351fc8065f6d58feb)]
+- download into it's own drawer [andreiggr - [`bfe0283`](https://github.com/eea/volto-plotlycharts/commit/bfe028388302428a422801a3bcdccafe7761abac)]
+- select data from core-metadata into csv [andreiggr - [`68a88ad`](https://github.com/eea/volto-plotlycharts/commit/68a88ad7c25fb6171e94ab7fb30656b578ea633a)]
+- enhancements embed eea [andreiggr - [`f01cf33`](https://github.com/eea/volto-plotlycharts/commit/f01cf33cca15a28d81d74b1681761ee0f49e8bf8)]
+- Clean [andreiggr - [`5dbca0b`](https://github.com/eea/volto-plotlycharts/commit/5dbca0b8cebd93038c831cba7d08518c73077421)]
+- Correct show/hide sources [andreiggr - [`da05c93`](https://github.com/eea/volto-plotlycharts/commit/da05c9337220cd956e2bae48a77120233e3fd346)]
+## [5.0.0](https://github.com/eea/volto-plotlycharts/compare/4.0.0...5.0.0) - 3 November 2022
 
 #### :hammer_and_wrench: Others
 
@@ -35,6 +45,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 #### :hammer_and_wrench: Others
 
 - update(jest): add @plone/volto-slate resolver refs- #153447 [nileshgulia1 - [`ba5eda5`](https://github.com/eea/volto-plotlycharts/commit/ba5eda5e81dc494358e90f071b0c20c1896b48b7)]
+- Add Sonarqube tag using circularity-frontend addons list [EEA Jenkins - [`68acebc`](https://github.com/eea/volto-plotlycharts/commit/68acebca55be4cfbbc158646069ee03112c432cb)]
 - Use volto 16.0.0-alpha.14 for cypress tests [Miu Razvan - [`0c9a2c5`](https://github.com/eea/volto-plotlycharts/commit/0c9a2c56964387a89332caaeee8d4f68f1c119bb)]
 ### [3.0.6](https://github.com/eea/volto-plotlycharts/compare/3.0.5...3.0.6) - 15 July 2022
 
@@ -92,6 +103,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Better catches for plotly data [Andrei Grigore - [`597e6af`](https://github.com/eea/volto-plotlycharts/commit/597e6af6045789bb2a653933c373a369965f354a)]
 - Lint fix [Andrei Grigore - [`3c3f741`](https://github.com/eea/volto-plotlycharts/commit/3c3f741a5225188747fbf51ed2d4031560372e91)]
 - Set individual colors for barcharts also (WIP) [Andrei Grigore - [`c0ea139`](https://github.com/eea/volto-plotlycharts/commit/c0ea13919c998237d46dcbf1b456a10876f5df54)]
+- Add Sonarqube tag using freshwater-frontend addons list [EEA Jenkins - [`8ebc425`](https://github.com/eea/volto-plotlycharts/commit/8ebc425a017ccb97e3783f73c5a13f19c6e11aaa)]
 - Refs #142010 - Optimize Volto-addons gitflow pipelines [valentinab25 - [`349d395`](https://github.com/eea/volto-plotlycharts/commit/349d3958dbebcf17056a4b28cc3a14905ed672b4)]
 ### [2.0.10](https://github.com/eea/volto-plotlycharts/compare/2.0.9...2.0.10) - 16 November 2021
 
@@ -163,6 +175,9 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Show info note with old editor on old editor data sources [Andrei Grigore - [`d60f16f`](https://github.com/eea/volto-plotlycharts/commit/d60f16f1d9d30bcaf9cf804513a55d8288bb31a0)]
 - Check for old editor data [Andrei Grigore - [`99074a1`](https://github.com/eea/volto-plotlycharts/commit/99074a1231224c697cca8f3f4df739a2ea61bff4)]
 - Switch Chart Text editor with SlateEditor [Andrei Grigore - [`33c59d7`](https://github.com/eea/volto-plotlycharts/commit/33c59d78bd1e123c39faf44e1395d978e9d68aa3)]
+- Add Sonarqube tag using frontend addons list [EEA Jenkins - [`d10f4a4`](https://github.com/eea/volto-plotlycharts/commit/d10f4a4eab154c9ffaae7be80d7a6ee23a4afc7c)]
+- Add Sonarqube tag using frontend addons list [EEA Jenkins - [`8d36a0a`](https://github.com/eea/volto-plotlycharts/commit/8d36a0a372a924960caf83609e4eaa3bede9a2b1)]
+- Add Sonarqube tag using frontend addons list [EEA Jenkins - [`1519427`](https://github.com/eea/volto-plotlycharts/commit/151942741b1683d572a096930a6a07323ab31b22)]
 ### [2.0.5](https://github.com/eea/volto-plotlycharts/compare/2.0.4...2.0.5) - 30 June 2021
 
 #### :hammer_and_wrench: Others

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-plotlycharts",
-  "version": "5.0.0",
+  "version": "5.0.1",
   "description": "Plotly Charts and Editor integration for Volto",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

diff --git a/src/Blocks/EmbedEEAVisualization/Edit.jsx b/src/Blocks/EmbedEEAVisualization/Edit.jsx
@@ -2,6 +2,8 @@ import React from 'react';
 import { SidebarPortal } from '@plone/volto/components';
 import BlockDataForm from '@plone/volto/components/manage/Form/BlockDataForm';
 import ConnectedChart2 from '@eeacms/volto-plotlycharts/ConnectedChart2';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
 
 import '@eeacms/volto-plotlycharts/less/visualization.less';
 import Schema from './schema';
@@ -24,7 +26,6 @@ const Edit = (props) => {
       });
     }
   }, [block, data, onChangeBlock]);
-
   return (
     <>
       <ConnectedChart2
@@ -38,7 +39,10 @@ const Edit = (props) => {
           use_live_data: true,
           vis_url: data.vis_url,
           with_sources: data.show_sources,
-          include_core_metadata_download: data.include_core_metadata_download,
+          include_sources_download: data?.include_sources_download,
+          include_other_org_download: data?.include_other_org_download,
+          include_temporal_coverage_download:
+            data?.include_temporal_coverage_download,
         }}
         hoverFormatXY={data.hover_format_xy}
         withSources={data.show_sources}
@@ -64,4 +68,18 @@ const Edit = (props) => {
   );
 };
 
-export default Edit;
+export default compose(
+  connect(
+    (state, props) => ({
+      //mapped core metadata data to props. Include more if needed
+      temporal_coverage:
+        state.content.subrequests?.[props.id]?.data?.temporal_coverage,
+      other_organisations:
+        state.content.subrequests?.[props.id]?.data?.other_organisations,
+      data_provenance:
+        state.content.subrequests?.[props.id]?.data?.data_provenance,
+    }),
+    {},
+  ),
+  //add extra hoc here
+)(Edit);
diff --git a/src/Blocks/EmbedEEAVisualization/View.jsx b/src/Blocks/EmbedEEAVisualization/View.jsx
@@ -24,7 +24,6 @@ const View = (props) => {
       computer: hasText ? 8 : 12,
     },
   };
-
   return (
     <div className="embed-visualization">
       <Grid container>
@@ -57,12 +56,14 @@ const View = (props) => {
                 has_data_query_by_provider: data.has_data_query_by_provider,
                 use_live_data: true,
                 vis_url: data.vis_url,
-                with_sources: data.with_sources,
-                include_core_metadata_download:
-                  data.include_core_metadata_download,
+                with_sources: data.show_sources,
+                include_sources_download: data?.include_sources_download,
+                include_other_org_download: data?.include_other_org_download,
+                include_temporal_coverage_download:
+                  data?.include_temporal_coverage_download,
               }}
               hoverFormatXY={data.hover_format_xy}
-              withSources={true}
+              withSources={data.show_sources}
               width={data.width}
               height={data.height}
             />

diff --git a/src/Blocks/EmbedEEAVisualization/schema.js b/src/Blocks/EmbedEEAVisualization/schema.js
@@ -1,21 +1,64 @@
 import React from 'react';
 
+const makeMetadataOptions = (data) => {
+  if (data && data.length > 0) {
+    return data
+      .map((item) => [...Object.keys(item)]) //get all keys, should be the same for all
+      .flat(1) // flatten all arrays
+      .reduce(function (a, b) {
+        if (a.indexOf(b) < 0) a.push(b);
+        return a;
+      }, []) //remove duplicates. We need only one set of keys
+      .map((item) => [item, item]); //map them for choices
+  }
+  return [];
+};
+
 const Schema = (props) => {
+  const hasSources =
+    props.data_provenance &&
+    props.data.download_button &&
+    props.data_provenance.data &&
+    props.data_provenance.data.length > 0;
+  const hasOtherOrg =
+    props.data.download_button &&
+    props.other_organisations &&
+    props.other_organisations.length > 0;
+  const hasTemporalCoverage =
+    props.data.download_button &&
+    props.temporal_coverage &&
+    props.temporal_coverage.temporal &&
+    props.temporal_coverage.temporal.length > 0;
+
+  const data_provenance_options = makeMetadataOptions(
+    props?.data_provenance?.data,
+  );
+
+  const temporal_coverage_options = makeMetadataOptions(
+    props?.temporal_coverage?.temporal,
+  );
+
+  const other_organisations_options = makeMetadataOptions(
+    props?.other_organisations,
+  );
   return {
     title: 'Embed EEA visualization',
 
     fieldsets: [
       {
         id: 'default',
         title: 'Default',
+        fields: ['vis_url', 'height', 'hover_format_xy', 'show_sources'],
+      },
+      {
+        id: 'download',
+        title: 'Download',
         fields: [
-          'vis_url',
-          'height',
-          'hover_format_xy',
-          'show_sources',
           'download_button',
-          ...(props.data.download_button
-            ? ['include_core_metadata_download']
+          ...(hasSources ? ['include_sources_download'] : []),
+          ...(hasOtherOrg ? ['include_other_org_download'] : []),
+          ...(hasTemporalCoverage
+            ? ['include_temporal_coverage_download']
             : []),
         ],
       },
@@ -62,10 +105,23 @@ const Schema = (props) => {
         title: 'Toggle download',
         type: 'boolean',
       },
-      include_core_metadata_download: {
-        title: 'Download core metadata',
-        description: 'Include core metadata in the dowloaded CSV',
-        type: 'boolean',
+      include_sources_download: {
+        title: 'Download sources',
+        description: 'Include sources in the dowloaded CSV',
+        choices: data_provenance_options,
+        isMulti: true,
+      },
+      include_other_org_download: {
+        title: 'Download other organisations',
+        description: 'Include other organisations in the dowloaded CSV',
+        choices: other_organisations_options,
+        isMulti: true,
+      },
+      include_temporal_coverage_download: {
+        title: 'Download temporal coverage',
+        description: 'Include temporal coverage in the dowloaded CSV',
+        choices: temporal_coverage_options,
+        isMulti: true,
       },
       show_sources: {
         title: 'Toggle sources',

diff --git a/src/ConnectedChart2/ConnectedChart2.jsx b/src/ConnectedChart2/ConnectedChart2.jsx
@@ -14,6 +14,22 @@ import SourcesWidget from './Sources';
 
 const LoadablePlotly = loadable(() => import('react-plotly.js'));
 
+const filterItemsIds = (items, allowedIds) => {
+  const newItems =
+    items && items.length > 0
+      ? items
+          .map((item) => {
+            var newItem = {};
+            allowedIds.forEach((id) => {
+              newItem[id] = item[id];
+            });
+            return newItem;
+          })
+          .filter((value) => Object.keys(value).length !== 0)
+      : [];
+  return newItems;
+};
+
 /*
  * ConnectedChart
  */
@@ -26,14 +42,15 @@ function ConnectedChart2(props) {
     visualization,
     visualization_data,
     width,
-    data_provenance,
     height = 450,
     id,
+    //core-metadata data
+    data_provenance,
     other_organisations,
     temporal_coverage,
   } = props;
   const use_live_data = props.data?.use_live_data ?? true;
-  const with_sources = props.data?.with_sources ?? true;
+  const with_sources = props?.withSources ?? false;
 
   const chartData =
     visualization?.chartData || visualization_data?.chartData || {};
@@ -132,13 +149,29 @@ function ConnectedChart2(props) {
           }
           provider_data={provider_data}
           provider_metadata={provider_metadata}
-          include_core_metadata_download={
-            props.data.include_core_metadata_download
-          }
           core_metadata={{
-            data_provenance: data_provenance?.data,
-            other_organisations,
-            temporal_coverage: temporal_coverage?.temporal,
+            data_provenance: props.data?.include_sources_download
+              ? filterItemsIds(
+                  data_provenance?.data,
+                  props.data?.include_sources_download,
+                )
+              : '',
+            other_organisations: props.data?.include_other_org_download
+              ? filterItemsIds(
+                  other_organisations,
+                  props.data?.include_other_org_download,
+                )
+              : '',
+            temporal_coverage:
+              props.data?.include_temporal_coverage_download &&
+              props.data?.include_temporal_coverage_download.length > 0 &&
+              temporal_coverage?.temporal &&
+              temporal_coverage?.temporal?.length > 0
+                ? filterItemsIds(
+                    temporal_coverage?.temporal,
+                    props.data?.include_temporal_coverage_download,
+                  )
+                : '',
           }}
         />
       )}

diff --git a/src/ConnectedChart2/Download.jsx b/src/ConnectedChart2/Download.jsx
@@ -114,16 +114,16 @@ function exportCSVFile(csv, title = 'data') {
   }
 }
 
-const spreadCoreMetadata = (core_metadata, maxRowsProvData) => {
+const spreadCoreMetadata = (core_metadata) => {
   let spread_metadata = {};
   Object.keys(core_metadata).forEach((key) => {
     if (core_metadata[key].length > 0) {
       core_metadata[key].forEach((item) => {
         Object.keys(item).forEach((subkey) => {
-          if (!spread_metadata['Core metadata']) {
-            spread_metadata['Core metadata'] = [' '];
+          if (!spread_metadata['EEA Core Metadata']) {
+            spread_metadata['EEA Core Metadata'] = [' '];
           } else {
-            spread_metadata['Core metadata'].push(' ');
+            spread_metadata['EEA Core Metadata'].push(' ');
           }
           if (!spread_metadata[`${key}_${subkey}`]) {
             spread_metadata[`${key}_${subkey}`] = [item[subkey]];
@@ -139,12 +139,10 @@ const spreadCoreMetadata = (core_metadata, maxRowsProvData) => {
     a.length > b.length ? a : b,
   ).length;
 
-  const maxRows = maxRowsProvData > coreMaxRows ? maxRowsProvData : coreMaxRows;
-
   let evenMatrix = spread_metadata;
   Object.entries(evenMatrix).forEach(([key, items]) => {
-    if (items.length < maxRows) {
-      for (let i = items.length; i < maxRows; i++) {
+    if (items.length < coreMaxRows) {
+      for (let i = items.length; i < coreMaxRows; i++) {
         items.push('');
       }
     }
@@ -162,10 +160,11 @@ const Download = (props) => {
     providers_data,
     providers_metadata,
     core_metadata,
-    include_core_metadata_download,
   } = props;
+
   const handleDownloadData = () => {
     let array = [];
+    let core_metadata_array = [];
     let readme = provider_metadata?.readme ? [provider_metadata?.readme] : [];
     const mappedData = {
       ...provider_data,
@@ -181,22 +180,22 @@ const Download = (props) => {
       core_metadata?.other_organisation?.length > 0 ||
       core_metadata?.temporal_coverage?.length > 0;
 
-    if (include_core_metadata_download && hasCoreMetadata) {
-      const maxRowsMappedData = Object.values(mappedData).reduce((a, b) =>
-        a.length > b.length ? a : b,
-      ).length;
-
-      Object.entries(
-        spreadCoreMetadata(core_metadata, maxRowsMappedData),
-      ).forEach(([key, items]) => {
-        items.forEach((item, index) => {
-          if (!array[index]) array[index] = {};
-          array[index][key] = item;
-        });
-      });
+    if (hasCoreMetadata) {
+      Object.entries(spreadCoreMetadata(core_metadata)).forEach(
+        ([key, items]) => {
+          items.forEach((item, index) => {
+            if (!core_metadata_array[index]) core_metadata_array[index] = {};
+            core_metadata_array[index][key] = item;
+          });
+        },
+      );
     }
 
-    const csv = convertToCSV(array, readme);
+    const data_csv = convertToCSV(array, readme);
+    const core_metadata_csv = hasCoreMetadata
+      ? convertToCSV(core_metadata_array, readme)
+      : '';
+    const csv = hasCoreMetadata ? data_csv + core_metadata_csv : data_csv;
     exportCSVFile(csv, title);
   };