From 66993300e0be2011652456b6fadd11c45f27db4b Mon Sep 17 00:00:00 2001
From: rbisson <remi.bisson@inrae.fr>
Date: Thu, 11 Jul 2024 11:22:30 +0200
Subject: [PATCH 1/5] [BasicSearch] removed useless container for progress bar
---
src/pages/search/BasicSearch/BasicSearch.js | 8 +-------
1 file changed, 1 insertion(+), 7 deletions(-)
diff --git a/src/pages/search/BasicSearch/BasicSearch.js b/src/pages/search/BasicSearch/BasicSearch.js
index 397091a..ad91acb 100644
--- a/src/pages/search/BasicSearch/BasicSearch.js
+++ b/src/pages/search/BasicSearch/BasicSearch.js
@@ -69,13 +69,7 @@ const BasicSearch = ({
autoFocus={true}
fullWidth
/>
- {isLoading && (
- <EuiFlexGroup>
- <EuiFlexItem>
- <EuiProgress postion="fixed" size="l" color="accent" />
- </EuiFlexItem>
- </EuiFlexGroup>
- )}
+ {isLoading && <EuiProgress postion="fixed" size="l" color="accent" />}
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton type="submit" fill isDisabled={isAdvancedSearch}>
--
GitLab
From d5a8143b9a2d72fdb312e859681c2db4d03161c2 Mon Sep 17 00:00:00 2001
From: rbisson <remi.bisson@inrae.fr>
Date: Thu, 11 Jul 2024 11:23:23 +0200
Subject: [PATCH 2/5] [AdvancedSearch] removed useless container for progress
bar
---
src/pages/search/AdvancedSearch/AdvancedSearch.js | 8 +-------
1 file changed, 1 insertion(+), 7 deletions(-)
diff --git a/src/pages/search/AdvancedSearch/AdvancedSearch.js b/src/pages/search/AdvancedSearch/AdvancedSearch.js
index d977c81..1b5104c 100644
--- a/src/pages/search/AdvancedSearch/AdvancedSearch.js
+++ b/src/pages/search/AdvancedSearch/AdvancedSearch.js
@@ -406,13 +406,7 @@ const SearchBar = ({
placeholder={t('search:advancedSearch.textQueryPlaceholder')}
fullWidth
/>
- {isLoading && (
- <EuiFlexGroup>
- <EuiFlexItem>
- <EuiProgress postion="fixed" size="l" color="accent" />
- </EuiFlexItem>
- </EuiFlexGroup>
- )}
+ {isLoading && <EuiProgress postion="fixed" size="l" color="accent" />}
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton
--
GitLab
From 3a975ec1544bdb29342f0ca308bb41fb8d072419 Mon Sep 17 00:00:00 2001
From: rbisson <remi.bisson@inrae.fr>
Date: Thu, 18 Jul 2024 06:36:42 +0200
Subject: [PATCH 3/5] src
---
public/locales/fr/results.json | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/public/locales/fr/results.json b/public/locales/fr/results.json
index 1237c23..01df349 100644
--- a/public/locales/fr/results.json
+++ b/public/locales/fr/results.json
@@ -1,7 +1,7 @@
{
"clickOnRowTip": "Clickez sur une ligne du tableau pour afficher ses métadonnées.",
"downloadResultsButton": {
- "JSON": "Télécharger en JSON"
+ "JSON": "Télécharger"
},
"table": {
"title": "Résultats de la requête : <strong>{{searchQuery}}</strong>",
--
GitLab
From 9146726425f8f0abf1cdd22aedbb6e3599e8f65e Mon Sep 17 00:00:00 2001
From: rbisson <remi.bisson@inrae.fr>
Date: Thu, 18 Jul 2024 06:37:33 +0200
Subject: [PATCH 4/5] (not working) start of different download button
---
src/pages/results/Results.js | 7 +-
src/pages/results/ResultsDownload.js | 109 +++++++++++++++++++++++++--
2 files changed, 109 insertions(+), 7 deletions(-)
diff --git a/src/pages/results/Results.js b/src/pages/results/Results.js
index 3584081..9fb3123 100644
--- a/src/pages/results/Results.js
+++ b/src/pages/results/Results.js
@@ -22,7 +22,12 @@ const Results = ({ searchResults, searchQuery, selectedRowsIds, setSelectedRowsI
<EuiFlexItem>
<EuiCallOut size="s" title={t('results:clickOnRowTip')} iconType="search" />
</EuiFlexItem>
- <ResultsDownload searchResults={searchResults} />
+ <EuiFlexItem grow={false}>
+ <ResultsDownload
+ searchResults={searchResults}
+ selectedRowsIds={selectedRowsIds}
+ />
+ </EuiFlexItem>
</EuiFlexGroup>
<EuiSpacer size={'m'} />
<ResultsTableMUI
diff --git a/src/pages/results/ResultsDownload.js b/src/pages/results/ResultsDownload.js
index 7ed3978..9f8af7d 100644
--- a/src/pages/results/ResultsDownload.js
+++ b/src/pages/results/ResultsDownload.js
@@ -1,15 +1,35 @@
-import React from 'react';
-import { EuiButton, EuiFlexItem } from '@elastic/eui';
+import React, { useState } from 'react';
+import {
+ EuiButton,
+ EuiFlexGroup,
+ EuiSelect,
+ EuiToolTip,
+ useEuiTheme,
+} from '@elastic/eui';
import download from 'downloadjs';
import { useTranslation } from 'react-i18next';
-const ResultsDownload = ({ searchResults }) => {
+const ResultsDownload = ({ searchResults, selectedRowsIds }) => {
const { t } = useTranslation('results');
+ const [resultsRowsSelection, setResultsRowsSelection] = useState('all');
+ const [format, setFormat] = useState('json');
+ const { euiTheme } = useEuiTheme();
+
+ const selectStyles = {
+ option: {
+ backgroundColor: euiTheme.colors.lightShade,
+ ':hover': {
+ backgroundColor: euiTheme.colors.primary,
+ },
+ },
+ };
const downloadResults = () => {
if (!searchResults) {
return;
}
+ console.log(resultsRowsSelection);
+ console.log(format);
download(
`{"metadataRecords": ${JSON.stringify(searchResults, null, '\t')}}`,
'InSylvaSearchResults.json',
@@ -17,12 +37,89 @@ const ResultsDownload = ({ searchResults }) => {
);
};
+ const ResultsRowSelectionSelectable = () => {
+ const resultsRowSelectionOptions = [
+ {
+ value: 'all',
+ text: 'All results',
+ },
+ {
+ value: 'selected',
+ text: 'Only selected',
+ disabled: selectedRowsIds.length <= 0,
+ },
+ ];
+
+ const onResultsRowSelectionChange = (e) => {
+ setResultsRowsSelection(e.target.value);
+ };
+
+ return (
+ <EuiToolTip position="bottom" content="Download selection or all">
+ <EuiSelect
+ value={resultsRowsSelection}
+ options={resultsRowSelectionOptions}
+ onChange={onResultsRowSelectionChange}
+ style={{
+ borderRadius: '0',
+ backgroundColor: euiTheme.colors.primary,
+ color: '#ffffff',
+ }}
+ aria-label="Row selection download options"
+ compressed
+ />
+ </EuiToolTip>
+ );
+ };
+
+ const FormatSelection = () => {
+ const resultsRowSelectionOptions = [
+ {
+ value: 'json',
+ text: 'JSON',
+ },
+ {
+ value: 'csv',
+ text: 'CSV',
+ },
+ ];
+
+ const onFormatChange = (e) => {
+ setFormat(e.target.value);
+ };
+
+ return (
+ <EuiToolTip position="bottom" content="Choose a download format">
+ <EuiSelect
+ value={format}
+ options={resultsRowSelectionOptions}
+ onChange={onFormatChange}
+ aria-label="Download format options"
+ style={{
+ borderTopLeftRadius: '0',
+ borderBottomLeftRadius: '0',
+ backgroundColor: euiTheme.colors.primary,
+ color: '#ffffff',
+ }}
+ compressed
+ />
+ </EuiToolTip>
+ );
+ };
+
return (
- <EuiFlexItem grow={false}>
- <EuiButton fill onClick={() => downloadResults()}>
+ <EuiFlexGroup gutterSize={'none'}>
+ <EuiButton
+ style={{ borderBottomRightRadius: '0', borderTopRightRadius: '0' }}
+ fill
+ size={'s'}
+ onClick={() => downloadResults()}
+ >
{t('results:downloadResultsButton.JSON')}
</EuiButton>
- </EuiFlexItem>
+ <ResultsRowSelectionSelectable />
+ <FormatSelection />
+ </EuiFlexGroup>
);
};
--
GitLab
From eb2b632653de3b298ebce027267ecc41df52ef4f Mon Sep 17 00:00:00 2001
From: rbisson <remi.bisson@inrae.fr>
Date: Tue, 23 Jul 2024 13:54:06 +0200
Subject: [PATCH 5/5] [ResultsDownload] Improved download button to include
selection only, and multiple download formats. only CSV added for now
---
public/locales/en/results.json | 14 ++++-
public/locales/fr/results.json | 14 ++++-
src/pages/results/ResultsDownload.js | 91 +++++++++++++++++-----------
3 files changed, 80 insertions(+), 39 deletions(-)
diff --git a/public/locales/en/results.json b/public/locales/en/results.json
index baaaa09..66d1b63 100644
--- a/public/locales/en/results.json
+++ b/public/locales/en/results.json
@@ -1,7 +1,17 @@
{
"clickOnRowTip": "Click on a row to display metadata.",
- "downloadResultsButton": {
- "JSON": "Download as JSON"
+ "downloadResultsButtons": {
+ "download": "Download",
+ "selection": {
+ "all": "All results",
+ "selectionOnly": "Selected results only",
+ "label": "Row selection download options"
+ },
+ "format": {
+ "label": "Download format options",
+ "JSON": "in JSON",
+ "CSV": "in CSV"
+ }
},
"table": {
"title": "Search results from query: <strong>{{searchQuery}}</strong>",
diff --git a/public/locales/fr/results.json b/public/locales/fr/results.json
index 01df349..c8e2dd9 100644
--- a/public/locales/fr/results.json
+++ b/public/locales/fr/results.json
@@ -1,7 +1,17 @@
{
"clickOnRowTip": "Clickez sur une ligne du tableau pour afficher ses métadonnées.",
- "downloadResultsButton": {
- "JSON": "Télécharger"
+ "downloadResultsButtons": {
+ "download": "Télécharger",
+ "selection": {
+ "all": "Tous les résultats",
+ "selectionOnly": "Uniquement la sélection",
+ "label": "Options de téléchargement de la sélection"
+ },
+ "format": {
+ "label": "Format du téléchargement",
+ "JSON": "en JSON",
+ "CSV": "en CSV"
+ }
},
"table": {
"title": "Résultats de la requête : <strong>{{searchQuery}}</strong>",
diff --git a/src/pages/results/ResultsDownload.js b/src/pages/results/ResultsDownload.js
index 9f8af7d..1a750b4 100644
--- a/src/pages/results/ResultsDownload.js
+++ b/src/pages/results/ResultsDownload.js
@@ -1,11 +1,5 @@
import React, { useState } from 'react';
-import {
- EuiButton,
- EuiFlexGroup,
- EuiSelect,
- EuiToolTip,
- useEuiTheme,
-} from '@elastic/eui';
+import { EuiButton, EuiFlexGroup, EuiSelect, EuiToolTip } from '@elastic/eui';
import download from 'downloadjs';
import { useTranslation } from 'react-i18next';
@@ -13,39 +7,64 @@ const ResultsDownload = ({ searchResults, selectedRowsIds }) => {
const { t } = useTranslation('results');
const [resultsRowsSelection, setResultsRowsSelection] = useState('all');
const [format, setFormat] = useState('json');
- const { euiTheme } = useEuiTheme();
- const selectStyles = {
- option: {
- backgroundColor: euiTheme.colors.lightShade,
- ':hover': {
- backgroundColor: euiTheme.colors.primary,
- },
- },
+ const downloadJSON = (content) => {
+ download(
+ `{"metadataRecords": ${JSON.stringify(content, null, '\t')}}`,
+ `InSylvaSearchResults.json`,
+ 'application/json'
+ );
+ };
+
+ function JSONtoCSV(jsonData) {
+ let csv = '';
+ let headers = Object.keys(jsonData[0]);
+ csv += headers.join(',') + '\n';
+ jsonData.forEach((row) => {
+ let data = headers.map((header) => JSON.stringify(row[header])).join(',');
+ csv += data + '\n';
+ });
+ return csv;
+ }
+
+ const downloadCSV = (content) => {
+ download(JSONtoCSV(content), `InSylvaSearchResults.csv`, 'text/csv');
};
const downloadResults = () => {
if (!searchResults) {
return;
}
- console.log(resultsRowsSelection);
- console.log(format);
- download(
- `{"metadataRecords": ${JSON.stringify(searchResults, null, '\t')}}`,
- 'InSylvaSearchResults.json',
- 'application/json'
- );
+ let downloadResults = searchResults;
+ // Change content to download if user selected 'selected results only'
+ if (resultsRowsSelection !== 'all') {
+ downloadResults = searchResults.filter((result) => {
+ return selectedRowsIds.find((id) => result.id === id);
+ });
+ }
+ // Switch will ease the need to add new formats in the future.
+ switch (format) {
+ case 'json':
+ downloadJSON(downloadResults);
+ break;
+ case 'csv':
+ downloadCSV(downloadResults);
+ break;
+ default:
+ downloadJSON(downloadResults);
+ break;
+ }
};
const ResultsRowSelectionSelectable = () => {
const resultsRowSelectionOptions = [
{
value: 'all',
- text: 'All results',
+ text: t('results:downloadResultsButtons.selection.all'),
},
{
value: 'selected',
- text: 'Only selected',
+ text: t('results:downloadResultsButtons.selection.selectionOnly'),
disabled: selectedRowsIds.length <= 0,
},
];
@@ -55,17 +74,18 @@ const ResultsDownload = ({ searchResults, selectedRowsIds }) => {
};
return (
- <EuiToolTip position="bottom" content="Download selection or all">
+ <EuiToolTip
+ position="top"
+ content={t('results:downloadResultsButtons.selection.label')}
+ >
<EuiSelect
value={resultsRowsSelection}
options={resultsRowSelectionOptions}
onChange={onResultsRowSelectionChange}
style={{
borderRadius: '0',
- backgroundColor: euiTheme.colors.primary,
- color: '#ffffff',
}}
- aria-label="Row selection download options"
+ aria-label={t('results:downloadResultsButtons.selection.label')}
compressed
/>
</EuiToolTip>
@@ -76,11 +96,11 @@ const ResultsDownload = ({ searchResults, selectedRowsIds }) => {
const resultsRowSelectionOptions = [
{
value: 'json',
- text: 'JSON',
+ text: t('results:downloadResultsButtons.format.JSON'),
},
{
value: 'csv',
- text: 'CSV',
+ text: t('results:downloadResultsButtons.format.CSV'),
},
];
@@ -89,17 +109,18 @@ const ResultsDownload = ({ searchResults, selectedRowsIds }) => {
};
return (
- <EuiToolTip position="bottom" content="Choose a download format">
+ <EuiToolTip
+ position="top"
+ content={t('results:downloadResultsButtons.format.label')}
+ >
<EuiSelect
value={format}
options={resultsRowSelectionOptions}
onChange={onFormatChange}
- aria-label="Download format options"
+ aria-label={t('results:downloadResultsButtons.format.label')}
style={{
borderTopLeftRadius: '0',
borderBottomLeftRadius: '0',
- backgroundColor: euiTheme.colors.primary,
- color: '#ffffff',
}}
compressed
/>
@@ -115,7 +136,7 @@ const ResultsDownload = ({ searchResults, selectedRowsIds }) => {
size={'s'}
onClick={() => downloadResults()}
>
- {t('results:downloadResultsButton.JSON')}
+ {t('results:downloadResultsButtons.download')}
</EuiButton>
<ResultsRowSelectionSelectable />
<FormatSelection />
--
GitLab