diff --git a/public/locales/en/results.json b/public/locales/en/results.json
index 61cf048cef51645529f6353f5e08fde90b74541a..baaaa092998cf918fd7cbb01b758a76a4cc257f6 100644
--- a/public/locales/en/results.json
+++ b/public/locales/en/results.json
@@ -1,10 +1,47 @@
{
- "yourQuery": "Your query: {{query}}",
- "clickOnRowTip": "Click on a resource row to display full metadata.",
+ "clickOnRowTip": "Click on a row to display metadata.",
"downloadResultsButton": {
"JSON": "Download as JSON"
},
"table": {
- "title": "Search results"
+ "title": "Search results from query: <strong>{{searchQuery}}</strong>",
+ "search": "Search among results",
+ "displaySelectedRowsButton": "Sort selection",
+ "textLabels": {
+ "body": {
+ "noMatch": "No matching records found",
+ "toolTip": "Sort"
+ },
+ "pagination": {
+ "next": "Next Page",
+ "previous": "Previous Page",
+ "rowsPerPage": "Rows per page:",
+ "displayRows": "of",
+ "jumpToPage": "Page:"
+ },
+ "toolbar": {
+ "search": "Search",
+ "viewColumns": "View Columns",
+ "filterTable": "Filter Table"
+ },
+ "filter": {
+ "all": "All",
+ "title": "FILTERS",
+ "reset": "RESET"
+ },
+ "viewColumns": {
+ "title": "Show Columns",
+ "titleAria": "Show/Hide Table Columns"
+ },
+ "selectedRows": {
+ "text": "row(s) selected"
+ }
+ }
+ },
+ "flyout": {
+ "label": "Resource data sheet",
+ "JSON": {
+ "title": "Resource JSON data"
+ }
}
}
diff --git a/public/locales/fr/results.json b/public/locales/fr/results.json
index e611299744c96fb46abb224d811621c4df0bd5e8..1237c231591e493969bca0aa7d0b3451f9ea6db2 100644
--- a/public/locales/fr/results.json
+++ b/public/locales/fr/results.json
@@ -1,10 +1,47 @@
{
- "yourQuery": "Votre requête : {{query}}",
- "clickOnRowTip": "Clickez sur une ressource (ligne du tableau) pour afficher ses métadonnées.",
+ "clickOnRowTip": "Clickez sur une ligne du tableau pour afficher ses métadonnées.",
"downloadResultsButton": {
"JSON": "Télécharger en JSON"
},
"table": {
- "title": "Résultats de la recherche"
+ "title": "Résultats de la requête : <strong>{{searchQuery}}</strong>",
+ "search": "Chercher parmi les résultats",
+ "displaySelectedRowsButton": "Trier la sélection",
+ "textLabels": {
+ "body": {
+ "noMatch": "Aucun résultat pour cette requête",
+ "toolTip": "Trier"
+ },
+ "pagination": {
+ "next": "Page suivante",
+ "previous": "Page précédente",
+ "rowsPerPage": "Lignes par page :",
+ "displayRows": "sur",
+ "jumpToPage": "Page :"
+ },
+ "toolbar": {
+ "search": "Rechercher",
+ "viewColumns": "Visualisation des colonnes",
+ "filterTable": "Filtrer les résultats"
+ },
+ "filter": {
+ "all": "Tout",
+ "title": "FILTRES",
+ "reset": "REINITIALISER"
+ },
+ "viewColumns": {
+ "title": "Visualisation des colonnes",
+ "titleAria": "Montrer/cacher les colonnes"
+ },
+ "selectedRows": {
+ "text": "ligne(s) sélectionnées"
+ }
+ }
+ },
+ "flyout": {
+ "label": "Fiche de données de la ressource",
+ "JSON": {
+ "title": "Données JSON de la ressource"
+ }
}
}
diff --git a/src/App.js b/src/App.js
index b73433f8138b04bf0f5d38a783fbf2a95c48970a..5d03570a71be6a36aa411c1f5608a974927660ad 100644
--- a/src/App.js
+++ b/src/App.js
@@ -5,13 +5,12 @@ import Layout from './components/Layout';
const App = () => {
return (
- <EuiPage restrictWidth={false}>
+ <EuiPage style={{ padding: '0px' }} restrictWidth={false}>
<EuiPageBody>
<HashRouter>
<Switch>
<Route exact path="/" render={() => <Redirect to="/app/home" />} />
<Route component={Layout} />
- <Route component={Error} />
</Switch>
</HashRouter>
</EuiPageBody>
diff --git a/src/Utils.js b/src/Utils.js
index d4efd75995e9f25e9f4b5922ace7541d566ba82a..3c4f4727b2209ff47dc4505960004c258bdf839a 100644
--- a/src/Utils.js
+++ b/src/Utils.js
@@ -594,8 +594,8 @@ export const createBasicQueriesBySource = (
sourcesLists.forEach((sourcesArray, index) => {
let sourceParam = `"_source": [`;
- fieldsLists[index].forEach((fieldname) => {
- sourceParam = `${sourceParam} "${fieldname}", `;
+ fieldsLists[index].forEach((fieldName) => {
+ sourceParam = `${sourceParam} "${fieldName}", `;
});
if (sourceParam.endsWith(', ')) {
sourceParam = sourceParam.substring(0, sourceParam.length - 2);
diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
index d44347a8ca84f3c432f0bff0277ad98eaf33f542..6e571d618929954064d06861039b3b0639c4b278 100644
--- a/src/components/Header/Header.js
+++ b/src/components/Header/Header.js
@@ -36,13 +36,7 @@ const Header = () => {
<EuiHeader>
<EuiHeaderSection grow={true}>
<EuiHeaderSectionItem>
- <img
- style={style.logo}
- src={logoInSylva}
- width="75"
- height="45"
- alt={t('common:inSylvaLogoAlt')}
- />
+ <img style={style.logo} src={logoInSylva} alt={t('common:inSylvaLogoAlt')} />
</EuiHeaderSectionItem>
<EuiHeaderLinks>
{structure.map((link) => (
diff --git a/src/components/Header/styles.js b/src/components/Header/styles.js
index 27b176118e227f03aede6c0cc94d7938e23266af..94f8ecf22cfa183f26e33b3f3c7ae6086c4730ee 100644
--- a/src/components/Header/styles.js
+++ b/src/components/Header/styles.js
@@ -1,9 +1,8 @@
const headerStyle = {
logo: {
- paddingTop: '10px',
- paddingBottom: '-6px',
- paddingRight: '10px',
- paddingLeft: '10px',
+ width: '75px',
+ height: '75px',
+ padding: '10px',
},
languageSwitcherItem: {
margin: '10px',
diff --git a/src/components/Layout/Layout.js b/src/components/Layout/Layout.js
index ddfcb8639542d0484050318d8aa67f6103a496a2..af5be085de322c47d3c135e68cab48602f40bc23 100644
--- a/src/components/Layout/Layout.js
+++ b/src/components/Layout/Layout.js
@@ -4,16 +4,20 @@ import Header from '../../components/Header';
import Search from '../../pages/search';
import Home from '../../pages/home';
import Profile from '../../pages/profile';
+import { EuiPageContent } from '@elastic/eui';
+import styles from './styles.js';
const Layout = () => {
return (
<>
<Header />
- <Switch>
- <Route path="/app/home" component={Home} />
- <Route path="/app/search" component={Search} />
- <Route path="/app/profile" component={Profile} />
- </Switch>
+ <EuiPageContent style={styles.pageContent}>
+ <Switch>
+ <Route path="/app/home" component={Home} />
+ <Route path="/app/search" component={Search} />
+ <Route path="/app/profile" component={Profile} />
+ </Switch>
+ </EuiPageContent>
</>
);
};
diff --git a/src/components/Layout/styles.js b/src/components/Layout/styles.js
new file mode 100644
index 0000000000000000000000000000000000000000..787354eaa2957de1cc981112fa072887a75d71ca
--- /dev/null
+++ b/src/components/Layout/styles.js
@@ -0,0 +1,9 @@
+const styles = {
+ pageContent: {
+ borderRadius: 0,
+ border: 0,
+ boxShadow: 'none',
+ },
+};
+
+export default styles;
diff --git a/src/context/InSylvaKeycloakClient.js b/src/context/InSylvaKeycloakClient.js
index c5980429eac474a69ea0cfb484c05fcc6cb3e91c..5a20fd65b1658b6b64c5bffe202cbbdaa517a61f 100644
--- a/src/context/InSylvaKeycloakClient.js
+++ b/src/context/InSylvaKeycloakClient.js
@@ -2,17 +2,11 @@ import { getLoginUrl } from '../Utils';
class InSylvaKeycloakClient {
async post(path, requestContent) {
- // const access_token = sessionStorage.getItem("access_token");
const headers = {
'Content-Type': 'application/x-www-form-urlencoded',
// "Access-Control-Allow-Methods": "GET,HEAD,PUT,PATCH,POST,DELETE",
// "Access-Control-Allow-Headers": "Origin, X-Requested-With, Content-Type, Accept, Authorization"
};
- /*
- if (access_token) {
- headers["Authorization"] = "Bearer " + access_token
- }
- */
let formBody = [];
for (const property in requestContent) {
const encodedKey = encodeURIComponent(property);
@@ -26,18 +20,14 @@ class InSylvaKeycloakClient {
body: formBody,
mode: 'cors',
});
- if (response.ok === true) {
- // ok
- } else {
+ if (!response.ok) {
await this.logout();
sessionStorage.removeItem('user_id');
sessionStorage.removeItem('access_token');
sessionStorage.removeItem('refresh_token');
window.location.replace(getLoginUrl() + '?requestType=search');
}
- if (response.statusText === 'No Content') {
- // ok
- } else {
+ if (response.statusText !== 'No Content') {
return await response.json();
}
}
@@ -58,11 +48,11 @@ class InSylvaKeycloakClient {
return { token };
}
- async logout({ realm = this.realm, client_id = this.client_id }) {
+ async logout() {
const refresh_token = sessionStorage.getItem('refresh_token');
- const path = `/auth/realms/${realm}/protocol/openid-connect/logout`;
if (refresh_token) {
- await this.post(`${path}`, {
+ const client_id = this.client_id;
+ await this.post(`/auth/realms/${this.realm}/protocol/openid-connect/logout`, {
client_id,
refresh_token,
});
diff --git a/src/context/UserContext.js b/src/context/UserContext.js
index 2d7b83dda5f22f5b484641bbebde7a92a2804728..d7578beb7e379f791fa08656d458dcb272e4193c 100644
--- a/src/context/UserContext.js
+++ b/src/context/UserContext.js
@@ -1,10 +1,10 @@
-import React from 'react';
+import React, { createContext, useContext, useReducer } from 'react';
import { InSylvaGatekeeperClient } from './InSylvaGatekeeperClient';
import { InSylvaKeycloakClient } from './InSylvaKeycloakClient';
import { getLoginUrl } from '../Utils';
-const UserStateContext = React.createContext();
-const UserDispatchContext = React.createContext();
+const UserStateContext = createContext(null);
+const UserDispatchContext = createContext(null);
const igClient = new InSylvaGatekeeperClient();
igClient.baseUrl = process.env.REACT_APP_IN_SYLVA_GATEKEEPER_PORT
@@ -46,7 +46,7 @@ function userReducer(state, action) {
}
function UserProvider({ children }) {
- const [state, dispatch] = React.useReducer(userReducer, {
+ const [state, dispatch] = useReducer(userReducer, {
isAuthenticated: !!sessionStorage.getItem('access_token'),
});
@@ -60,7 +60,7 @@ function UserProvider({ children }) {
}
function useUserState() {
- const context = React.useContext(UserStateContext);
+ const context = useContext(UserStateContext);
if (context === undefined) {
throw new Error('useUserState must be used within a UserProvider');
}
@@ -68,7 +68,7 @@ function useUserState() {
}
function useUserDispatch() {
- const context = React.useContext(UserDispatchContext);
+ const context = useContext(UserDispatchContext);
if (context === undefined) {
throw new Error('useUserDispatch must be used within a UserProvider');
}
@@ -85,7 +85,7 @@ async function checkUserLogin(userId, accessToken, refreshToken) {
// Load the user result filters from Result_Filter(userId) endpoints
// Load the user policies from Policy(userId) endpoint
if (!sessionStorage.getItem('token_refresh_time')) {
- sessionStorage.setItem('token_refresh_time', Date.now());
+ sessionStorage.setItem('token_refresh_time', Date.now().toString());
}
// dispatch({ type: "USER_LOGGED_IN" });
} else {
@@ -101,7 +101,7 @@ async function refreshToken() {
});
if (result) {
sessionStorage.setItem('access_token', result.token.access_token);
- sessionStorage.setItem('token_refresh_time', Date.now());
+ sessionStorage.setItem('token_refresh_time', Date.now().toString());
// dispatch({ type: "USER_LOGGED_IN" });
} else {
// dispatch({ type: "LOGIN_FAILURE" });
@@ -113,7 +113,7 @@ async function refreshToken() {
}
async function signOut() {
- await ikcClient.logout({});
+ await ikcClient.logout();
sessionStorage.removeItem('user_id');
sessionStorage.removeItem('access_token');
sessionStorage.removeItem('refresh_token');
diff --git a/src/pages/home/Home.js b/src/pages/home/Home.js
index 28040d15303ee4a05db3c9a67c483022dbea0a0f..1be5b26d3dc9ecbb638f16d2ee895aedd5a85722 100644
--- a/src/pages/home/Home.js
+++ b/src/pages/home/Home.js
@@ -1,6 +1,5 @@
import React from 'react';
import {
- EuiPageContent,
EuiPageContentHeader,
EuiPageContentHeaderSection,
EuiTitle,
@@ -11,29 +10,25 @@ const Home = () => {
const { t } = useTranslation('home');
return (
- <>
- <EuiPageContent>
- <EuiPageContentHeader>
- <EuiPageContentHeaderSection>
- <EuiTitle>
- <h2>{t('pageTitle')}</h2>
- </EuiTitle>
- <br />
- <p>{t('searchToolDescription.part1')}</p>
- <br />
- <p>{t('searchToolDescription.part2')}</p>
- <br />
- <p>{t('searchToolDescription.part3')}</p>
- <br />
- <p>{t('searchToolDescription.part4')}</p>
- <br />
- <p>{t('searchToolDescription.part5')}</p>
- <br />
- <p>{t('searchToolDescription.part6')}</p>
- </EuiPageContentHeaderSection>
- </EuiPageContentHeader>
- </EuiPageContent>
- </>
+ <EuiPageContentHeader>
+ <EuiPageContentHeaderSection>
+ <EuiTitle>
+ <h2>{t('pageTitle')}</h2>
+ </EuiTitle>
+ <br />
+ <p>{t('searchToolDescription.part1')}</p>
+ <br />
+ <p>{t('searchToolDescription.part2')}</p>
+ <br />
+ <p>{t('searchToolDescription.part3')}</p>
+ <br />
+ <p>{t('searchToolDescription.part4')}</p>
+ <br />
+ <p>{t('searchToolDescription.part5')}</p>
+ <br />
+ <p>{t('searchToolDescription.part6')}</p>
+ </EuiPageContentHeaderSection>
+ </EuiPageContentHeader>
);
};
diff --git a/src/pages/maps/SearchMap.js b/src/pages/maps/SearchMap.js
index 9f5fe8040bcac8d953d6d76064a8fdfe5fe39161..51d6693e80b4d0c5998ffebf61efbc0ae29fef81 100644
--- a/src/pages/maps/SearchMap.js
+++ b/src/pages/maps/SearchMap.js
@@ -88,7 +88,7 @@ const pointBaseStyle = new Style({
}),
});
-const SearchMap = ({ searchResults }) => {
+const SearchMap = ({ searchResults, selectedPointsIds, setSelectedPointsIds }) => {
const { t } = useTranslation('maps');
// ref for handling zoomHelperText display
const timerRef = useRef(null);
@@ -104,7 +104,6 @@ const SearchMap = ({ searchResults }) => {
{ label: t('maps:layersTable.sylvoEcoRegions'), value: 'sylvoEcoRegions' },
];
const [selectedFilterOptions, setSelectedFilterOptions] = useState([filterOptions[0]]);
- const resultPointsSource = new VectorSource({});
const [zoomHelperTextFeature, setZoomHelperTextFeature] = useState(
new Feature({
geometry: new Point(center),
@@ -135,6 +134,7 @@ const SearchMap = ({ searchResults }) => {
selectedPointsLayer: new VectorLayer({
name: 'selectedPointsSource',
source: new VectorSource({}),
+ visible: true,
}),
regions: new VectorLayer({
name: 'regions',
@@ -202,7 +202,7 @@ const SearchMap = ({ searchResults }) => {
new VectorLayer({
name: 'queryResults',
visible: true,
- source: resultPointsSource,
+ source: new VectorSource({}),
}),
mapFilters['selectedPointsLayer'],
new VectorLayer({
@@ -232,6 +232,7 @@ const SearchMap = ({ searchResults }) => {
const initMapLayersVisibility = () => {
let initialMapLayersVisibility = new Array(mapLayers.length).fill(false);
initialMapLayersVisibility[getLayerIndex('osm-layer')] = true;
+ initialMapLayersVisibility[getLayerIndex('selectedPointsSource')] = true;
initialMapLayersVisibility[getLayerIndex('queryResults')] = true;
return initialMapLayersVisibility;
};
@@ -334,8 +335,14 @@ const SearchMap = ({ searchResults }) => {
// Create event listeners for dragBox when it changes
useEffect(() => {
- dragBox.on('boxstart', onBoxStartCallback);
- dragBox.on('boxend', onBoxEndCallback);
+ // Remove previous DragBox instances before adding the new one
+ map.getInteractions().forEach((interaction) => {
+ if (interaction?.box_?.element_?.className === 'ol-box ol-dragbox') {
+ map.removeInteraction(interaction);
+ }
+ });
+ dragBox.on('boxstart', () => onBoxStartCallback());
+ dragBox.on('boxend', () => onBoxEndCallback());
map.addInteraction(dragBox);
}, [dragBox]);
@@ -378,23 +385,26 @@ const SearchMap = ({ searchResults }) => {
}
}, [selectedFilterOptions]);
- const createPointFeature = (name, coordinates, radius, isSelected) => {
+ // pointData.id set to 0 means that the point is a selected point
+ const createPointFeature = (pointData, coordinates, radius, isSelected) => {
const pointFeature = new Feature({
geometry: new Circle(coordinates, radius),
});
- pointFeature.set('nom', name);
+ pointFeature.set('id', pointData.id);
+ pointFeature.set('nom', pointData.name);
pointFeature.set('isSelected', isSelected);
pointFeature.setStyle(pointStyle);
return pointFeature;
};
- // On new selection start, remove all previously selected features
+ // On new selection start, unselect features
const onBoxStartCallback = () => {
clearSelectedFeatures();
};
// On new selection end, add all previously selected features
const onBoxEndCallback = () => {
+ let newSelectedPointsIds = selectedPointsIds;
const boxExtent = dragBox.getGeometry().getExtent();
// if the extent crosses the antimeridian process each world separately
const worldExtent = map.getView().getProjection().getExtent();
@@ -432,10 +442,21 @@ const SearchMap = ({ searchResults }) => {
const coords = pointGeom.getCenter();
if (polygonGeometry.intersectsCoordinate(coords)) {
const pointName = pointsFeatures[point].get('nom');
+ const pointId = pointsFeatures[point].get('id');
if (!getSelectedPointsNames(selectedPointsSource).includes(pointName)) {
// Add new selected features
- const pointFeature = createPointFeature(pointName, coords, 5000, true);
+ const pointFeature = createPointFeature(
+ {
+ id: 0,
+ name: pointName,
+ },
+ coords,
+ 5000,
+ true
+ );
selectedPointsSource.addFeature(pointFeature);
+ // Add point id to selected points Ids
+ newSelectedPointsIds.push(pointId);
}
}
}
@@ -449,16 +470,22 @@ const SearchMap = ({ searchResults }) => {
if (polygonGeometry.intersectsCoordinate(coords)) {
// Remove previously selected features
selectedPointsSource.removeFeature(selectedPointsFeatures[point]);
+ newSelectedPointsIds = newSelectedPointsIds.splice(
+ newSelectedPointsIds.indexOf(selectedPointsFeatures[point].get('id')),
+ 1
+ );
}
}
}
}
}
// Update selected features list
+ setSelectedPointsIds(newSelectedPointsIds);
if (!selectionToolMode) {
let tmpSelectedFeatures = selectedFeatures;
setSelectedFeatures(null);
tmpSelectedFeatures.extend(boxFeatures);
+ console.log(tmpSelectedFeatures);
setSelectedFeatures(tmpSelectedFeatures);
} else {
clearSelectedFeatures();
@@ -466,20 +493,23 @@ const SearchMap = ({ searchResults }) => {
}
};
- // Create points from search results
const processData = () => {
if (!searchResults) {
return;
}
+ const resultPointsSource = map
+ .getLayers()
+ .item(getLayerIndex('queryResults'))
+ .getSource();
+ // Create points from search results
searchResults.forEach((result) => {
const geoPoint = result.experimental_site.geo_point;
if (geoPoint && geoPoint.longitude && geoPoint.latitude) {
- const pointIdentifier =
- result.resource.identifier +
- '--' +
- result.context.related_experimental_network_title;
const pointFeature = createPointFeature(
- pointIdentifier,
+ {
+ id: result.id,
+ name: result?.resource?.identifier,
+ },
proj.fromLonLat([geoPoint.longitude, geoPoint.latitude]),
3500,
false
@@ -487,6 +517,29 @@ const SearchMap = ({ searchResults }) => {
resultPointsSource.addFeature(pointFeature);
}
});
+ const selectedPointsSource = mapFilters.selectedPointsLayer.getSource();
+ // Create selected points from id list
+ selectedPointsIds.forEach((id) => {
+ const point = searchResults.find((result) => result.id === id);
+ if (point) {
+ const geoPoint = point.experimental_site.geo_point;
+ const pointName = point.resource.identifier;
+ if (geoPoint && geoPoint.longitude && geoPoint.latitude) {
+ if (!getSelectedPointsNames(selectedPointsSource).includes(pointName)) {
+ const pointFeature = createPointFeature(
+ {
+ id: 0,
+ name: pointName,
+ },
+ proj.fromLonLat([geoPoint.longitude, geoPoint.latitude]),
+ 5000,
+ true
+ );
+ selectedPointsSource.addFeature(pointFeature);
+ }
+ }
+ }
+ });
};
const clearSelectedFeatures = () => {
@@ -494,7 +547,6 @@ const SearchMap = ({ searchResults }) => {
if (tmpSelectedFeatures) {
tmpSelectedFeatures.clear();
}
- setSelectedFeatures(null);
setSelectedFeatures(tmpSelectedFeatures);
};
@@ -517,6 +569,7 @@ const SearchMap = ({ searchResults }) => {
}
};
+ // Clear timer ref on unmount
useEffect(() => {
return () => clearTimeout(timerRef.current);
}, []);
@@ -561,8 +614,9 @@ const SearchMap = ({ searchResults }) => {
.getLayers()
.item(getLayerIndex('selectedPointsSource'));
let selectedPointsList = <></>;
+ let selectedPoints = 0;
if (selectedPointsLayer) {
- const selectedPoints = getSelectedPointsNames(selectedPointsLayer.getSource());
+ selectedPoints = getSelectedPointsNames(selectedPointsLayer.getSource());
if (selectedPoints.length === 0) {
selectedPointsList = <p>{t('maps:selectedPointsList.empty')}</p>;
} else {
@@ -571,10 +625,13 @@ const SearchMap = ({ searchResults }) => {
});
}
}
+
return (
<div style={styles.selectedPointsListContainer}>
<EuiTitle size="s">
- <h3>{t('maps:selectedPointsList.title')}</h3>
+ <h3>
+ {t('maps:selectedPointsList.title')} ({selectedPoints.length})
+ </h3>
</EuiTitle>
<EuiSpacer size="m" />
<EuiText style={styles.selectedPointsList}>{selectedPointsList}</EuiText>
@@ -598,6 +655,7 @@ const SearchMap = ({ searchResults }) => {
clearSelectedFeatures();
// Remove displayed points from layer's source
map.getLayers().item(getLayerIndex('selectedPointsSource')).getSource().clear();
+ setSelectedPointsIds([]);
};
return (
diff --git a/src/pages/maps/styles.js b/src/pages/maps/styles.js
index 08132d53ca5c6d48c6260a52981bf538d8805f67..08c1ead22bc5f4407d73a10377dde0bac1c23a91 100644
--- a/src/pages/maps/styles.js
+++ b/src/pages/maps/styles.js
@@ -24,8 +24,8 @@ const styles = {
width: '100%',
display: 'flex',
justifyContent: 'start',
- minHeight: '80vh',
- maxHeight: '80vh',
+ minHeight: '60vh',
+ maxHeight: '60vh',
},
mapContainer: {
minWidth: '60vw',
@@ -54,7 +54,7 @@ const styles = {
layersTable: {
width: '60vw',
cursor: 'pointer',
- margin: '10px',
+ marginTop: '10px',
},
layersTableCells: {
padding: '10px',
diff --git a/src/pages/profile/Profile.js b/src/pages/profile/Profile.js
index 89bd3a7edde33dcf0540186c86bba5aedbae42ff..72c213856125829e5423fe6d0a2d51f9a2b18c61 100644
--- a/src/pages/profile/Profile.js
+++ b/src/pages/profile/Profile.js
@@ -1,6 +1,5 @@
import React, { useState, useEffect } from 'react';
import {
- EuiPageContent,
EuiPageContentHeader,
EuiPageContentHeaderSection,
EuiPageContentBody,
@@ -175,94 +174,92 @@ const Profile = () => {
return (
<>
- <EuiPageContent>
- <EuiPageContentHeader>
- <EuiPageContentHeaderSection>
- <EuiTitle>
- <h2>{t('pageTitle')}</h2>
- </EuiTitle>
- </EuiPageContentHeaderSection>
- </EuiPageContentHeader>
- <EuiPageContentBody>
- <EuiForm component="form">
- <EuiTitle size="s">
- <h3>{t('groups.groupsList')}</h3>
- </EuiTitle>
- <EuiFormRow fullWidth label="">
- <EuiBasicTable items={groups} columns={groupColumns} />
- </EuiFormRow>
- <EuiSpacer size="l" />
- <EuiTitle size="s">
- <h3>{t('requestsList.requestsList')}</h3>
- </EuiTitle>
- <EuiFormRow fullWidth label="">
- <EuiBasicTable items={userRequests} columns={requestsColumns} />
- </EuiFormRow>
- <EuiSpacer size="l" />
- <EuiTitle size="s">
- <h3>{t('groupRequests.requestGroupAssignment')}</h3>
- </EuiTitle>
- {getUserGroupLabels() ? (
- <p
- style={styles.currentRoleOrGroupText}
- >{`${t('groupRequests.currentGroups')} ${getUserGroupLabels()}`}</p>
- ) : (
- <p>{t('groupRequests.noGroup')}</p>
- )}
- <EuiFormRow error={valueError} isInvalid={valueError !== undefined}>
- <EuiComboBox
- placeholder={'Select groups'}
- options={groups}
- selectedOptions={userGroups}
- onChange={(selectedOptions) => {
- setValueError(undefined);
- setUserGroups(selectedOptions);
- }}
- onSearchChange={onValueSearchChange}
- />
- </EuiFormRow>
- <EuiSpacer size="m" />
- <EuiButton
- onClick={() => {
- onSendGroupRequest();
+ <EuiPageContentHeader>
+ <EuiPageContentHeaderSection>
+ <EuiTitle>
+ <h2>{t('pageTitle')}</h2>
+ </EuiTitle>
+ </EuiPageContentHeaderSection>
+ </EuiPageContentHeader>
+ <EuiPageContentBody>
+ <EuiForm component="form">
+ <EuiTitle size="s">
+ <h3>{t('groups.groupsList')}</h3>
+ </EuiTitle>
+ <EuiFormRow fullWidth label="">
+ <EuiBasicTable items={groups} columns={groupColumns} />
+ </EuiFormRow>
+ <EuiSpacer size="l" />
+ <EuiTitle size="s">
+ <h3>{t('requestsList.requestsList')}</h3>
+ </EuiTitle>
+ <EuiFormRow fullWidth label="">
+ <EuiBasicTable items={userRequests} columns={requestsColumns} />
+ </EuiFormRow>
+ <EuiSpacer size="l" />
+ <EuiTitle size="s">
+ <h3>{t('groupRequests.requestGroupAssignment')}</h3>
+ </EuiTitle>
+ {getUserGroupLabels() ? (
+ <p
+ style={styles.currentRoleOrGroupText}
+ >{`${t('groupRequests.currentGroups')} ${getUserGroupLabels()}`}</p>
+ ) : (
+ <p>{t('groupRequests.noGroup')}</p>
+ )}
+ <EuiFormRow error={valueError} isInvalid={valueError !== undefined}>
+ <EuiComboBox
+ placeholder={'Select groups'}
+ options={groups}
+ selectedOptions={userGroups}
+ onChange={(selectedOptions) => {
+ setValueError(undefined);
+ setUserGroups(selectedOptions);
}}
- fill
- >
- {t('common:validationActions.send')}
- </EuiButton>
- <EuiSpacer size="l" />
- <EuiTitle size="s">
- <h3>{t('roleRequests.requestRoleAssignment')}</h3>
- </EuiTitle>
- {userRole ? (
- <p
- style={styles.currentRoleOrGroupText}
- >{`${t('roleRequests.currentRole')} ${userRole}`}</p>
- ) : (
- <></>
- )}
- <EuiFormRow>
- <EuiSelect
- hasNoInitialSelection
- options={roles}
- value={selectedRole}
- onChange={(e) => {
- setSelectedRole(e.target.value);
- }}
- />
- </EuiFormRow>
- <EuiSpacer size="m" />
- <EuiButton
- onClick={() => {
- onSendRoleRequest();
+ onSearchChange={onValueSearchChange}
+ />
+ </EuiFormRow>
+ <EuiSpacer size="m" />
+ <EuiButton
+ onClick={() => {
+ onSendGroupRequest();
+ }}
+ fill
+ >
+ {t('common:validationActions.send')}
+ </EuiButton>
+ <EuiSpacer size="l" />
+ <EuiTitle size="s">
+ <h3>{t('roleRequests.requestRoleAssignment')}</h3>
+ </EuiTitle>
+ {userRole ? (
+ <p
+ style={styles.currentRoleOrGroupText}
+ >{`${t('roleRequests.currentRole')} ${userRole}`}</p>
+ ) : (
+ <></>
+ )}
+ <EuiFormRow>
+ <EuiSelect
+ hasNoInitialSelection
+ options={roles}
+ value={selectedRole}
+ onChange={(e) => {
+ setSelectedRole(e.target.value);
}}
- fill
- >
- {t('common:validationActions.send')}
- </EuiButton>
- </EuiForm>
- </EuiPageContentBody>
- </EuiPageContent>
+ />
+ </EuiFormRow>
+ <EuiSpacer size="m" />
+ <EuiButton
+ onClick={() => {
+ onSendRoleRequest();
+ }}
+ fill
+ >
+ {t('common:validationActions.send')}
+ </EuiButton>
+ </EuiForm>
+ </EuiPageContentBody>
</>
);
};
diff --git a/src/pages/results/ResourceFlyout.js b/src/pages/results/ResourceFlyout.js
new file mode 100644
index 0000000000000000000000000000000000000000..bd7522b49a5f5d3e9a26490d78ecd1b48b4d71f9
--- /dev/null
+++ b/src/pages/results/ResourceFlyout.js
@@ -0,0 +1,44 @@
+import React, { Fragment } from 'react';
+import { EuiFlyout, EuiFlyoutBody, EuiText } from '@elastic/eui';
+import { useTranslation } from 'react-i18next';
+import JsonView from '@in-sylva/json-view';
+
+const ResourceFlyout = ({
+ resourceFlyoutData,
+ setResourceFlyoutData,
+ isResourceFlyoutOpen,
+ setIsResourceFlyoutOpen,
+}) => {
+ const { t } = useTranslation('results');
+
+ const closeResourceFlyout = () => {
+ setResourceFlyoutData({});
+ setIsResourceFlyoutOpen(false);
+ };
+
+ return (
+ isResourceFlyoutOpen && (
+ <EuiFlyout
+ onClose={() => closeResourceFlyout()}
+ aria-labelledby={t('results:flyout.label')}
+ >
+ <EuiFlyoutBody>
+ <EuiText size="s">
+ <Fragment>
+ <JsonView
+ src={resourceFlyoutData}
+ name={t('results:flyout.JSON.title')}
+ collapsed={true}
+ iconStyle={'triangle'}
+ enableClipboard={false}
+ displayDataTypes={false}
+ />
+ </Fragment>
+ </EuiText>
+ </EuiFlyoutBody>
+ </EuiFlyout>
+ )
+ );
+};
+
+export default ResourceFlyout;
diff --git a/src/pages/results/Results.js b/src/pages/results/Results.js
index b647f7738dbe1b6beff02d77d7e6bd933048dc74..3584081fabcbfa6d66e69d1b6a3f34996b4bd6ac 100644
--- a/src/pages/results/Results.js
+++ b/src/pages/results/Results.js
@@ -1,235 +1,38 @@
-import React, { Fragment, useEffect, useState } from 'react';
-import {
- EuiButton,
- EuiCallOut,
- EuiFlexGroup,
- EuiFlexItem,
- EuiFlyout,
- EuiFlyoutBody,
- EuiIcon,
- EuiSpacer,
- EuiText,
- EuiTitle,
-} from '@elastic/eui';
-import { createTheme, MuiThemeProvider } from '@material-ui/core/styles';
-import MUIDataTable from 'mui-datatables';
-import JsonView from '@in-sylva/json-view';
-import { updateArrayElement } from '../../Utils.js';
-import download from 'downloadjs';
+import React, { useState } from 'react';
+import { EuiCallOut, EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
import { useTranslation } from 'react-i18next';
+import ResultsTableMUI from './ResultsTableMUI';
+import ResourceFlyout from './ResourceFlyout';
+import ResultsDownload from './ResultsDownload';
-const getMuiTheme = () =>
- createTheme({
- overrides: {
- MUIDataTable: {
- root: {
- backgroundColor: '#fafbfc',
- },
- paper: {
- boxShadow: 'none',
- },
- },
- },
- });
-
-const changeFlyoutState = (array, index, value, defaultValue) => {
- let newArray = new Array(array.length).fill(defaultValue);
- newArray[index] = value;
- return newArray;
-};
-
-const Results = ({ searchResults, searchQuery }) => {
+const Results = ({ searchResults, searchQuery, selectedRowsIds, setSelectedRowsIds }) => {
const { t } = useTranslation('results');
- const [resultsCol, setResultsCol] = useState([]);
- const [results, setResults] = useState([]);
- const [isFlyoutOpen, setIsFlyoutOpen] = useState([false]);
- const [searchQueryText, setSearchQueryText] = useState('');
-
- useEffect(() => {
- processData(searchResults);
- setSearchQueryText(searchQuery);
- }, [searchResults]);
-
- const updateTableCell = (tableContent, value, colIndex, rowIndex) => {
- const updatedRow = updateArrayElement(tableContent[rowIndex], colIndex, value);
- return updateArrayElement(tableContent, rowIndex, updatedRow);
- };
-
- const closeAllFlyouts = (tableContent) => {
- const updatedResults = [];
- tableContent.forEach((tableRow, index) => {
- updatedResults.push(updateArrayElement(tableRow, 0));
- });
- return updatedResults;
- };
-
- const buildColumnName = (name) => {
- // Replace underscore with spaces
- name = name.split('_').join(' ');
- // Uppercase first character
- name = name.charAt(0).toUpperCase() + name.slice(1);
- return name;
- };
-
- const processData = (metadata) => {
- if (metadata) {
- const columns = [];
- const rows = [];
- columns.push({
- name: 'Currently open',
- options: {
- display: true,
- viewColumns: true,
- filter: true,
- },
- });
- for (let recordIndex = 0; recordIndex < metadata.length; recordIndex++) {
- const row = [];
- const displayedFields = metadata[recordIndex].resource;
- const flyoutCell = recordFlyout(metadata[recordIndex], recordIndex);
- if (recordIndex >= isFlyoutOpen.length) {
- setIsFlyoutOpen([...isFlyoutOpen, false]);
- }
- row.push(flyoutCell);
- for (const fieldName in displayedFields) {
- if (typeof displayedFields[fieldName] === 'string') {
- if (recordIndex === 0) {
- const column = {
- name: buildColumnName(fieldName),
- options: {
- display: true,
- },
- };
- columns.push(column);
- }
- row.push(displayedFields[fieldName]);
- }
- }
- rows.push(row);
- }
- setResultsCol(columns);
- setResults(rows);
- }
- };
-
- const recordFlyout = (record, recordIndex, isOpen) => {
- if (isOpen) {
- return (
- <>
- <EuiFlyout
- onClose={() => {
- const updatedTable = updateTableCell(
- closeAllFlyouts(results),
- recordFlyout(record, recordIndex, false),
- 0,
- recordIndex
- );
- const updatedArray = changeFlyoutState(
- isFlyoutOpen,
- recordIndex,
- false,
- false
- );
- setIsFlyoutOpen(updatedArray);
- setResults(updatedTable);
- }}
- aria-labelledby={recordIndex}
- >
- <EuiFlyoutBody>
- <EuiText size="s">
- <Fragment>
- <JsonView
- name="In-Sylva metadata"
- collapsed={true}
- iconStyle={'triangle'}
- src={record}
- enableClipboard={false}
- displayDataTypes={false}
- />
- </Fragment>
- </EuiText>
- </EuiFlyoutBody>
- </EuiFlyout>
- <EuiIcon type="eye" color="danger" />
- </>
- );
- }
- };
-
- const resultsGridOptions = {
- print: false,
- download: false,
- filter: true,
- filterType: 'dropdown',
- responsive: 'standard',
- selectableRows: 'none',
- selectableRowsOnClick: true,
- onRowSelectionChange: (rowsSelected, allRows) => {},
- onRowClick: (rowData, rowState) => {},
- onCellClick: (val, colMeta) => {
- if (searchResults && colMeta.colIndex !== 0) {
- const updatedTable = updateTableCell(
- closeAllFlyouts(results),
- recordFlyout(
- searchResults[colMeta.dataIndex],
- colMeta.dataIndex,
- !isFlyoutOpen[colMeta.dataIndex]
- ),
- 0,
- colMeta.dataIndex
- );
- const updatedArray = changeFlyoutState(
- isFlyoutOpen,
- colMeta.dataIndex,
- !isFlyoutOpen[colMeta.dataIndex],
- false
- );
- setIsFlyoutOpen(updatedArray);
- setResults(updatedTable);
- }
- },
- };
-
- const downloadResults = () => {
- if (searchResults) {
- download(
- `{"metadataRecords": ${JSON.stringify(searchResults, null, '\t')}}`,
- 'InSylvaSearchResults.json',
- 'application/json'
- );
- }
- };
+ const [isResourceFlyoutOpen, setIsResourceFlyoutOpen] = useState(false);
+ const [resourceFlyoutData, setResourceFlyoutData] = useState({});
return (
<>
- <EuiSpacer size="s" />
- <EuiFlexGroup justifyContent="spaceAround">
- <EuiSpacer size="s" />
- <EuiFlexItem grow={false}>
- <EuiTitle size="xs">
- <h2>{t('results:yourQuery', { query: searchQueryText })}</h2>
- </EuiTitle>
- </EuiFlexItem>
- <EuiSpacer size="s" />
- </EuiFlexGroup>
+ <ResourceFlyout
+ resourceFlyoutData={resourceFlyoutData}
+ setResourceFlyoutData={setResourceFlyoutData}
+ isResourceFlyoutOpen={isResourceFlyoutOpen}
+ setIsResourceFlyoutOpen={setIsResourceFlyoutOpen}
+ />
<EuiFlexGroup>
<EuiFlexItem>
<EuiCallOut size="s" title={t('results:clickOnRowTip')} iconType="search" />
</EuiFlexItem>
- <EuiFlexItem grow={false}>
- <EuiButton fill onClick={() => downloadResults()}>
- {t('results:downloadResultsButton.JSON')}
- </EuiButton>
- </EuiFlexItem>
+ <ResultsDownload searchResults={searchResults} />
</EuiFlexGroup>
- <MuiThemeProvider theme={getMuiTheme()}>
- <MUIDataTable
- title={t('results:table.title')}
- data={results}
- columns={resultsCol}
- options={resultsGridOptions}
- />
- </MuiThemeProvider>
+ <EuiSpacer size={'m'} />
+ <ResultsTableMUI
+ searchResults={searchResults}
+ searchQuery={searchQuery}
+ selectedRowsIds={selectedRowsIds}
+ setSelectedRowsIds={setSelectedRowsIds}
+ setResourceFlyoutData={setResourceFlyoutData}
+ setIsResourceFlyoutOpen={setIsResourceFlyoutOpen}
+ />
</>
);
};
diff --git a/src/pages/results/ResultsDownload.js b/src/pages/results/ResultsDownload.js
new file mode 100644
index 0000000000000000000000000000000000000000..7ed397818e778b6002540841f35743628c07c628
--- /dev/null
+++ b/src/pages/results/ResultsDownload.js
@@ -0,0 +1,29 @@
+import React from 'react';
+import { EuiButton, EuiFlexItem } from '@elastic/eui';
+import download from 'downloadjs';
+import { useTranslation } from 'react-i18next';
+
+const ResultsDownload = ({ searchResults }) => {
+ const { t } = useTranslation('results');
+
+ const downloadResults = () => {
+ if (!searchResults) {
+ return;
+ }
+ download(
+ `{"metadataRecords": ${JSON.stringify(searchResults, null, '\t')}}`,
+ 'InSylvaSearchResults.json',
+ 'application/json'
+ );
+ };
+
+ return (
+ <EuiFlexItem grow={false}>
+ <EuiButton fill onClick={() => downloadResults()}>
+ {t('results:downloadResultsButton.JSON')}
+ </EuiButton>
+ </EuiFlexItem>
+ );
+};
+
+export default ResultsDownload;
diff --git a/src/pages/results/ResultsTable.js b/src/pages/results/ResultsTable.js
new file mode 100644
index 0000000000000000000000000000000000000000..415a67298ac34c8f3f2606e1be931f61205e4c3e
--- /dev/null
+++ b/src/pages/results/ResultsTable.js
@@ -0,0 +1,112 @@
+import React, { useState } from 'react';
+import { EuiBasicTable } from '@elastic/eui';
+
+const buildColumnName = (name) => {
+ name = name.split('.').join(' ');
+ name = name.charAt(0).toUpperCase() + name.slice(1);
+ return name;
+};
+
+const ResultsTable = ({ searchResults }) => {
+ const [pageIndex, setPageIndex] = useState(0);
+ const [pageSize, setPageSize] = useState(10);
+
+ function getValueFromPath(obj, path) {
+ return path.split('.').reduce((acc, part, i, arr) => {
+ if (Array.isArray(acc)) {
+ // The next part should be a key to match within array objects
+ const key = arr[i + 1];
+ if (key) {
+ const found = acc.find((item) => item.type === key);
+ arr.splice(i + 1, 1); // Remove the key from the path array
+ return found ? found.value : undefined;
+ }
+ }
+ return acc && acc[part];
+ }, obj);
+ }
+
+ function getValues(obj, paths) {
+ return paths.reduce((acc, path) => {
+ acc[path] = getValueFromPath(obj, path);
+ return acc;
+ }, {});
+ }
+
+ const buildRows = (results, columns) => {
+ let dataRows = [];
+ results.forEach((result) => {
+ let row = getValues(result, columns);
+ dataRows.push(row);
+ });
+ return dataRows;
+ };
+
+ const buildColumns = (userColumns) => {
+ let dataColumns = [];
+ dataColumns.push({
+ field: 'isRowOpen',
+ name: 'Open',
+ sortable: false,
+ truncateText: true,
+ });
+ userColumns.forEach((userColumn) => {
+ dataColumns.push({
+ field: userColumn,
+ name: buildColumnName(userColumn),
+ sortable: true,
+ truncateText: true,
+ });
+ });
+ return dataColumns;
+ };
+
+ const buildSearchResultsTable = (results) => {
+ if (!results && results.length > 0) {
+ return;
+ }
+ // TODO: get columns settings from user to replace hard-coded array
+ const userColumns = [
+ 'id',
+ 'resource.title',
+ 'resource.lineage',
+ 'resource.identifier',
+ 'resource.date.publication',
+ 'resource.date.revision',
+ 'resource.INSPIRE_type',
+ ];
+ const columns = buildColumns(userColumns);
+ const rows = buildRows(results, userColumns);
+ return {
+ rows,
+ columns,
+ };
+ };
+
+ const { rows, columns } = buildSearchResultsTable(searchResults);
+
+ const paginationOptions = {
+ pageSizeOptions: [5, 10, 20, 0],
+ pageIndex,
+ pageSize,
+ totalItemCount: rows?.length,
+ };
+
+ const onTableChange = ({ page }) => {
+ if (page) {
+ setPageIndex(page.index);
+ setPageSize(page.size);
+ }
+ };
+
+ return (
+ <EuiBasicTable
+ items={rows}
+ columns={columns}
+ pagination={paginationOptions}
+ onChange={onTableChange}
+ />
+ );
+};
+
+export default ResultsTable;
diff --git a/src/pages/results/ResultsTableMUI.js b/src/pages/results/ResultsTableMUI.js
new file mode 100644
index 0000000000000000000000000000000000000000..b28999146840743dd62dc1121d17a593a812b7cb
--- /dev/null
+++ b/src/pages/results/ResultsTableMUI.js
@@ -0,0 +1,228 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import MUIDataTable from 'mui-datatables';
+import { createTheme, ThemeProvider } from '@material-ui/core';
+import { EuiButton, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+
+const getMuiTheme = () =>
+ createTheme({
+ overrides: {
+ MuiTableRow: {
+ root: {
+ '&:hover': {
+ cursor: 'pointer',
+ },
+ },
+ },
+ },
+ });
+
+const ResultsTableMUI = ({
+ searchResults,
+ searchQuery,
+ selectedRowsIds,
+ setSelectedRowsIds,
+ setIsResourceFlyoutOpen,
+ setResourceFlyoutData,
+}) => {
+ const { t } = useTranslation('results');
+ const [selectedRows, setSelectedRows] = useState([]);
+
+ useEffect(() => {
+ setSelectedRows(selectedRowsIds.map((id) => getRowIdFromResourceData(id)));
+ }, [selectedRowsIds]);
+
+ // Build each row in table from search results data
+ const buildRows = (results) => {
+ let dataRows = [];
+ if (results.length === 0) {
+ return dataRows;
+ }
+ results.forEach((result, index) => {
+ let row = {
+ id: result.id,
+ };
+ for (const fieldName in result.resource) {
+ if (typeof result.resource[fieldName] === 'string') {
+ row[fieldName] = result.resource[fieldName];
+ }
+ }
+ dataRows.push(row);
+ });
+ return dataRows;
+ };
+
+ const buildColumnName = (name) => {
+ name = name.split('_').join(' ');
+ name = name.charAt(0).toUpperCase() + name.slice(1);
+ return name;
+ };
+
+ const buildColumns = (results) => {
+ if (!results[0]?.resource) {
+ return [];
+ }
+ let dataColumns = [];
+ dataColumns.push({
+ name: 'id',
+ label: 'ID',
+ options: {
+ display: 'excluded',
+ },
+ });
+ // TODO: get columns settings from user to replace hard-coded array
+ for (const fieldName in results[0].resource) {
+ if (typeof results[0].resource[fieldName] === 'string') {
+ dataColumns.push({
+ name: fieldName,
+ label: buildColumnName(fieldName),
+ options: {
+ display: true,
+ },
+ });
+ }
+ }
+ return dataColumns;
+ };
+
+ const buildResultsTable = (results) => {
+ if (!results && results.length > 0) {
+ return;
+ }
+ return {
+ rows: buildRows(results),
+ columns: buildColumns(results),
+ };
+ };
+
+ const { rows, columns } = useMemo(
+ () => buildResultsTable(searchResults),
+ [searchResults]
+ );
+
+ const getResourceDataFromRowId = (id) => {
+ return searchResults.find((result) => result.id === id);
+ };
+
+ const getRowIdFromResourceData = (id) => {
+ for (let index = 0; index < rows.length; index++) {
+ if (rows[index].id === id) {
+ return index;
+ }
+ }
+ };
+
+ const onRowSelectionCallback = (selectedRow, allSelectedRows) => {
+ setSelectedRowsIds(
+ allSelectedRows.map((row) => {
+ return rows[row.dataIndex].id;
+ })
+ );
+ };
+
+ // Open resource flyout on row click (any cell)
+ const onCellClickCallback = (cellData, cellState) => {
+ if (!searchResults || searchResults.length === 0) {
+ return;
+ }
+ const resourceData = getResourceDataFromRowId(rows[cellState.dataIndex].id);
+ // Extract all values except for id to avoid displaying it to user
+ setResourceFlyoutData((({ id, ...rest }) => rest)(resourceData));
+ setIsResourceFlyoutOpen(true);
+ };
+
+ const sortBySelectedRows = () => {
+ // TODO add sorting by row selection
+ /*return data.sort((a, b) => {
+ const isSelectedA = selectedRowsIds.includes(a.data[0]);
+ const isSelectedB = selectedRowsIds.includes(b.data[0]);
+ if (isSelectedA && !isSelectedB) {
+ return -1;
+ } else if (!isSelectedA && isSelectedB) {
+ return 1;
+ } else {
+ // If both rows are either selected or not, maintain their order
+ return 0;
+ }
+ });*/
+ };
+
+ // Remove the delete rows button and display custom sort button
+ const CustomSelectToolbar = () => {
+ return (
+ <EuiFlexGroup style={{ marginLeft: '10px' }}>
+ <EuiFlexItem grow={false}>
+ <EuiButton onClick={() => sortBySelectedRows()}>
+ {t('results:table.displaySelectedRowsButton')}
+ </EuiButton>
+ </EuiFlexItem>
+ </EuiFlexGroup>
+ );
+ };
+
+ // Translations for mui-datatables component texts
+ const textLabels = {
+ body: {
+ noMatch: t('results:table.textLabels.body.noMatch'),
+ toolTip: t('results:table.textLabels.body.toolTip'),
+ },
+ pagination: {
+ next: t('results:table.textLabels.pagination.next'),
+ previous: t('results:table.textLabels.pagination.previous'),
+ rowsPerPage: t('results:table.textLabels.pagination.rowsPerPage'),
+ displayRows: t('results:table.textLabels.pagination.displayRows'),
+ jumpToPage: t('results:table.textLabels.pagination.jumpToPage'),
+ },
+ toolbar: {
+ search: t('results:table.textLabels.toolbar.search'),
+ viewColumns: t('results:table.textLabels.toolbar.viewColumns'),
+ filterTable: t('results:table.textLabels.toolbar.filterTable'),
+ },
+ filter: {
+ all: t('results:table.textLabels.filter.all'),
+ title: t('results:table.textLabels.filter.title'),
+ reset: t('results:table.textLabels.filter.reset'),
+ },
+ viewColumns: {
+ title: t('results:table.textLabels.viewColumns.title'),
+ titleAria: t('results:table.textLabels.viewColumns.titleAria'),
+ },
+ selectedRows: {
+ text: t('results:table.textLabels.selectedRows.text'),
+ },
+ };
+
+ const tableOptions = {
+ print: false,
+ download: false,
+ filter: true,
+ filterType: 'textField',
+ responsive: 'standard',
+ selectableRows: 'multiple',
+ selectableRowsOnClick: false,
+ rowsSelected: selectedRows,
+ rowsPerPage: 15,
+ rowsPerPageOptions: [15, 30, 50, 100],
+ jumpToPage: true,
+ searchPlaceholder: t('results:table.search'),
+ elevation: 0, // remove the boxShadow style
+ customToolbarSelect: () => <CustomSelectToolbar />,
+ selectToolbarPlacement: 'above',
+ onRowSelectionChange: onRowSelectionCallback,
+ onCellClick: onCellClickCallback,
+ textLabels,
+ };
+
+ return (
+ <ThemeProvider theme={getMuiTheme()}>
+ <MUIDataTable
+ title={<Trans i18nKey={'results:table.title'} components={{ searchQuery }} />}
+ data={rows}
+ columns={columns}
+ options={tableOptions}
+ />
+ </ThemeProvider>
+ );
+};
+
+export default ResultsTableMUI;
diff --git a/src/pages/search/AdvancedSearch/AdvancedSearch.js b/src/pages/search/AdvancedSearch/AdvancedSearch.js
index cd4b8a08ae977919cf27a639518b757db83b9dc5..ce4b0156c34e546d3a337cfd54136e9967fe9841 100644
--- a/src/pages/search/AdvancedSearch/AdvancedSearch.js
+++ b/src/pages/search/AdvancedSearch/AdvancedSearch.js
@@ -46,6 +46,7 @@ import { DateOptions, NumericOptions, Operators } from '../Data';
import TextField from '@material-ui/core/TextField';
import { addUserHistory, fetchUserHistory } from '../../../actions/user';
import { useTranslation } from 'react-i18next';
+import styles from './styles';
const updateSources = (
searchFields,
@@ -184,11 +185,10 @@ const HistorySelect = ({
setFieldCount,
userHistory,
setUserHistory,
- selectedSavedSearch,
- setSelectedSavedSearch,
}) => {
- const [historySelectError, setHistorySelectError] = useState(undefined);
const { t } = useTranslation('search');
+ const [historySelectError, setHistorySelectError] = useState(undefined);
+ const [selectedSavedSearch, setSelectedSavedSearch] = useState(undefined);
useEffect(() => {
fetchHistory(setUserHistory);
@@ -248,12 +248,6 @@ const SearchBar = ({
setSearchResults,
searchFields,
setSearchFields,
- searchName,
- setSearchName,
- searchDescription,
- setSearchDescription,
- readOnlyQuery,
- setReadOnlyQuery,
selectedSources,
setSelectedSources,
availableSources,
@@ -264,16 +258,15 @@ const SearchBar = ({
searchCount,
setSearchCount,
setFieldCount,
- isSaveSearchModalOpen,
- setIsSaveSearchModalOpen,
- selectedSavedSearch,
- setSelectedSavedSearch,
- selectedOperatorId,
createEditableQueryToast,
}) => {
const { t } = useTranslation(['search', 'common']);
- const [userHistory, setUserHistory] = useState({});
const [isLoading, setIsLoading] = useState(false);
+ const [userHistory, setUserHistory] = useState({});
+ const [isSaveSearchModalOpen, setIsSaveSearchModalOpen] = useState(false);
+ const [searchDescription, setSearchDescription] = useState('');
+ const [searchName, setSearchName] = useState('');
+ const [readOnlyQuery, setReadOnlyQuery] = useState(true);
const closeSaveSearchModal = () => {
setIsSaveSearchModalOpen(false);
@@ -307,7 +300,9 @@ const SearchBar = ({
availableSources
);
getQueryCount(queriesWithIndices).then((result) => {
- if (result || result === 0) setSearchCount(result);
+ if (result || result === 0) {
+ setSearchCount(result);
+ }
});
}
};
@@ -343,9 +338,7 @@ const SearchBar = ({
<EuiFieldText
name="searchName"
value={searchName}
- onChange={(e) => {
- setSearchName(e.target.value);
- }}
+ onChange={(e) => setSearchName(e.target.value)}
/>
</EuiFormRow>
<EuiFormRow
@@ -363,7 +356,6 @@ const SearchBar = ({
</EuiFormRow>
</EuiForm>
</EuiModalBody>
-
<EuiModalFooter>
<EuiButtonEmpty
onClick={() => {
@@ -388,6 +380,7 @@ const SearchBar = ({
return (
<>
+ {isSaveSearchModalOpen && <SaveSearchModal />}
<EuiFlexGroup>
<EuiFlexItem>
<EuiTextArea
@@ -397,6 +390,13 @@ const SearchBar = ({
placeholder={t('search:advancedSearch.textQueryPlaceholder')}
fullWidth
/>
+ {isLoading && (
+ <EuiFlexGroup>
+ <EuiFlexItem>
+ <EuiProgress postion="fixed" size="l" color="accent" />
+ </EuiFlexItem>
+ </EuiFlexGroup>
+ )}
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton
@@ -437,7 +437,6 @@ const SearchBar = ({
>
{t('search:advancedSearch.searchHistory.saveSearch')}
</EuiButton>
- {isSaveSearchModalOpen && <SaveSearchModal />}
<EuiSpacer size="s" />
<EuiSwitch
compressed
@@ -452,13 +451,6 @@ const SearchBar = ({
/>
</EuiFlexItem>
</EuiFlexGroup>
- {isLoading && (
- <EuiFlexGroup>
- <EuiFlexItem>
- <EuiProgress postion="fixed" size="l" color="accent" />
- </EuiFlexItem>
- </EuiFlexGroup>
- )}
<EuiSpacer size="s" />
<EuiFlexGroup>
<EuiFlexItem>
@@ -467,15 +459,11 @@ const SearchBar = ({
setAvailableSources={setAvailableSources}
setSelectedSources={setSelectedSources}
setSearch={setSearch}
- searchFields={searchFields}
- selectedOperatorId={selectedOperatorId}
- userHistory={userHistory}
- setUserHistory={setUserHistory}
setSearchFields={setSearchFields}
setSearchCount={setSearchCount}
setFieldCount={setFieldCount}
- selectedSavedSearch={selectedSavedSearch}
- setSelectedSavedSearch={setSelectedSavedSearch}
+ userHistory={userHistory}
+ setUserHistory={setUserHistory}
/>
</EuiFlexItem>
</EuiFlexGroup>
@@ -483,18 +471,11 @@ const SearchBar = ({
);
};
-const PopoverSelect = ({
- standardFields,
- searchFields,
- setSearchFields,
- selectedField,
- setSelectedField,
- selectedSection,
- setSelectedSection,
- isPopoverSelectOpen,
- setIsPopoverSelectOpen,
-}) => {
+const PopoverSelect = ({ standardFields, searchFields, setSearchFields }) => {
const { t } = useTranslation('search');
+ const [isPopoverSelectOpen, setIsPopoverSelectOpen] = useState(false);
+ const [selectedField, setSelectedField] = useState([]);
+ const [selectedSection, setSelectedSection] = useState([]);
const handleAddField = () => {
if (!!selectedField[0]) {
@@ -607,8 +588,6 @@ const PopoverValueContent = ({
standardFields,
searchFields,
setSearchFields,
- valueError,
- setValueError,
setSearch,
setSearchCount,
fieldCount,
@@ -616,7 +595,6 @@ const PopoverValueContent = ({
isPopoverValueOpen,
setIsPopoverValueOpen,
selectedOperatorId,
- datePickerStyles,
createPolicyToast,
selectedSources,
setSelectedSources,
@@ -624,6 +602,8 @@ const PopoverValueContent = ({
setAvailableSources,
}) => {
const { t } = useTranslation(['search', 'common']);
+ const datePickerStyles = styles();
+ const [valueError, setValueError] = useState(undefined);
const onValueSearchChange = (value, hasMatchingOptions) => {
if (value.length === 0 || hasMatchingOptions) {
@@ -1063,16 +1043,11 @@ const PopoverValueButton = ({
standardFields,
searchFields,
setSearchFields,
- isPopoverValueOpen,
- setIsPopoverValueOpen,
- valueError,
- setValueError,
setSearch,
setSearchCount,
fieldCount,
setFieldCount,
selectedOperatorId,
- datePickerStyles,
createPolicyToast,
selectedSources,
setSelectedSources,
@@ -1080,6 +1055,7 @@ const PopoverValueButton = ({
setAvailableSources,
}) => {
const { t } = useTranslation('search');
+ const [isPopoverValueOpen, setIsPopoverValueOpen] = useState([false]);
return (
<EuiPopover
@@ -1111,8 +1087,6 @@ const PopoverValueButton = ({
standardFields={standardFields}
searchFields={searchFields}
setSearchFields={setSearchFields}
- valueError={valueError}
- setValueError={setValueError}
setSearch={setSearch}
setSearchCount={setSearchCount}
fieldCount={fieldCount}
@@ -1120,7 +1094,6 @@ const PopoverValueButton = ({
isPopoverValueOpen={isPopoverValueOpen}
setIsPopoverValueOpen={setIsPopoverValueOpen}
selectedOperatorId={selectedOperatorId}
- datePickerStyles={datePickerStyles}
createPolicyToast={createPolicyToast}
selectedSources={selectedSources}
setSelectedSources={setSelectedSources}
@@ -1134,20 +1107,8 @@ const PopoverValueButton = ({
const FieldsPanel = ({
standardFields,
- setStandardFields,
searchFields,
setSearchFields,
- selectedField,
- setSelectedField,
- selectedSection,
- setSelectedSection,
- isPopoverSelectOpen,
- setIsPopoverSelectOpen,
- isPopoverValueOpen,
- setIsPopoverValueOpen,
- valueError,
- setValueError,
- search,
setSearch,
setSearchCount,
selectedOperatorId,
@@ -1159,7 +1120,6 @@ const FieldsPanel = ({
selectedSources,
setSelectedSources,
sources,
- datePickerStyles,
createPolicyToast,
}) => {
const { t } = useTranslation('search');
@@ -1321,20 +1281,13 @@ const FieldsPanel = ({
<PopoverValueButton
index={index}
standardFields={standardFields}
- setStandardFields={setStandardFields}
searchFields={searchFields}
setSearchFields={setSearchFields}
- isPopoverValueOpen={isPopoverValueOpen}
- setIsPopoverValueOpen={setIsPopoverValueOpen}
- valueError={valueError}
- setValueError={setValueError}
- search={search}
setSearch={setSearch}
setSearchCount={setSearchCount}
fieldCount={fieldCount}
setFieldCount={setFieldCount}
selectedOperatorId={selectedOperatorId}
- datePickerStyles={datePickerStyles}
createPolicyToast={createPolicyToast}
selectedSources={selectedSources}
setSelectedSources={setSelectedSources}
@@ -1350,19 +1303,8 @@ const FieldsPanel = ({
<EuiSpacer size="l" />
<PopoverSelect
standardFields={standardFields}
- setStandardFields={setStandardFields}
searchFields={searchFields}
setSearchFields={setSearchFields}
- selectedField={selectedField}
- setSelectedField={setSelectedField}
- selectedSection={selectedSection}
- setSelectedSection={setSelectedSection}
- isPopoverSelectOpen={isPopoverSelectOpen}
- setIsPopoverSelectOpen={setIsPopoverSelectOpen}
- fieldCount={fieldCount}
- setFieldCount={setFieldCount}
- selectedSources={selectedSources}
- setSelectedSources={setSelectedSources}
/>
</EuiPanel>
<EuiSpacer size="s" />
@@ -1384,14 +1326,9 @@ const FieldsPanel = ({
);
};
-const SourceSelect = ({
- availableSources,
- selectedSources,
- setSelectedSources,
- sourceSelectError,
- setSourceSelectError,
-}) => {
+const SourceSelect = ({ availableSources, selectedSources, setSelectedSources }) => {
const { t } = useTranslation('search');
+ const [sourceSelectError, setSourceSelectError] = useState(undefined);
if (Object.keys(availableSources).length === 0) {
return (
@@ -1445,16 +1382,7 @@ const SourceSelect = ({
const AdvancedSearch = ({
search,
setSearch,
- searchResults,
setSearchResults,
- searchFields,
- setSearchFields,
- searchName,
- setSearchName,
- searchDescription,
- setSearchDescription,
- readOnlyQuery,
- setReadOnlyQuery,
selectedSources,
setSelectedSources,
availableSources,
@@ -1463,38 +1391,15 @@ const AdvancedSearch = ({
setStandardFields,
sources,
setSelectedTabNumber,
- searchCount,
- setSearchCount,
- setFieldCount,
- isReadOnlyModalOpen,
- setIsReadOnlyModalOpen,
- isSaveSearchModalOpen,
- setIsSaveSearchModalOpen,
- userHistory,
- setUserHistory,
- selectedSavedSearch,
- setSelectedSavedSearch,
- selectedOperatorId,
setIsAdvancedSearch,
isAdvancedSearch,
- selectedField,
- selectedSection,
- setSelectedField,
- setSelectedSection,
- isPopoverSelectOpen,
- setIsPopoverSelectOpen,
- setIsPopoverValueOpen,
- isPopoverValueOpen,
- valueError,
- setValueError,
- setSelectedOperatorId,
- fieldCount,
- sourceSelectError,
- datePickerStyles,
- setSourceSelectError,
}) => {
const { t } = useTranslation('search');
const [notificationToasts, setNotificationToasts] = useState([]);
+ const [selectedOperatorId, setSelectedOperatorId] = useState('0');
+ const [searchFields, setSearchFields] = useState([]);
+ const [fieldCount, setFieldCount] = useState([]);
+ const [searchCount, setSearchCount] = useState();
const createPolicyToast = () => {
const toast = {
@@ -1543,7 +1448,6 @@ const AdvancedSearch = ({
<>
<EuiFlexGroup>
<EuiFlexItem grow={false}>
- <EuiSpacer size="s" />
<EuiButtonEmpty
onClick={() => {
setIsAdvancedSearch(!isAdvancedSearch);
@@ -1559,16 +1463,9 @@ const AdvancedSearch = ({
<SearchBar
search={search}
setSearch={setSearch}
- searchResults={searchResults}
setSearchResults={setSearchResults}
searchFields={searchFields}
setSearchFields={setSearchFields}
- searchName={searchName}
- setSearchName={setSearchName}
- searchDescription={searchDescription}
- setSearchDescription={setSearchDescription}
- readOnlyQuery={readOnlyQuery}
- setReadOnlyQuery={setReadOnlyQuery}
selectedSources={selectedSources}
setSelectedSources={setSelectedSources}
availableSources={availableSources}
@@ -1579,15 +1476,6 @@ const AdvancedSearch = ({
searchCount={searchCount}
setSearchCount={setSearchCount}
setFieldCount={setFieldCount}
- isReadOnlyModalOpen={isReadOnlyModalOpen}
- setIsReadOnlyModalOpen={setIsReadOnlyModalOpen}
- isSaveSearchModalOpen={isSaveSearchModalOpen}
- setIsSaveSearchModalOpen={setIsSaveSearchModalOpen}
- userHistory={userHistory}
- setUserHistory={setUserHistory}
- selectedSavedSearch={selectedSavedSearch}
- setSelectedSavedSearch={setSelectedSavedSearch}
- selectedOperatorId={selectedOperatorId}
createEditableQueryToast={createEditableQueryToast}
/>
</EuiFlexItem>
@@ -1600,16 +1488,6 @@ const AdvancedSearch = ({
setStandardFields={setStandardFields}
searchFields={searchFields}
setSearchFields={setSearchFields}
- selectedField={selectedField}
- setSelectedField={setSelectedField}
- selectedSection={selectedSection}
- setSelectedSection={setSelectedSection}
- isPopoverSelectOpen={isPopoverSelectOpen}
- setIsPopoverSelectOpen={setIsPopoverSelectOpen}
- isPopoverValueOpen={isPopoverValueOpen}
- setIsPopoverValueOpen={setIsPopoverValueOpen}
- valueError={valueError}
- setValueError={setValueError}
search={search}
setSearch={setSearch}
setSearchCount={setSearchCount}
@@ -1622,7 +1500,6 @@ const AdvancedSearch = ({
selectedSources={selectedSources}
setSelectedSources={setSelectedSources}
sources={sources}
- datePickerStyles={datePickerStyles}
createPolicyToast={createPolicyToast}
/>
<EuiSpacer size="s" />
@@ -1630,8 +1507,6 @@ const AdvancedSearch = ({
availableSources={availableSources}
selectedSources={selectedSources}
setSelectedSources={setSelectedSources}
- sourceSelectError={sourceSelectError}
- setSourceSelectError={setSourceSelectError}
/>
</EuiFlexItem>
</EuiFlexGroup>
diff --git a/src/pages/search/styles.js b/src/pages/search/AdvancedSearch/styles.js
similarity index 100%
rename from src/pages/search/styles.js
rename to src/pages/search/AdvancedSearch/styles.js
diff --git a/src/pages/search/BasicSearch/BasicSearch.js b/src/pages/search/BasicSearch/BasicSearch.js
index 9a75f6e7568792959266579126977122af39778a..397091ade583db73a62cd91f5e1353964949b301 100644
--- a/src/pages/search/BasicSearch/BasicSearch.js
+++ b/src/pages/search/BasicSearch/BasicSearch.js
@@ -36,10 +36,10 @@ const BasicSearch = ({
);
searchQuery(queriesWithIndices).then((result) => {
setSearchResults(result);
- setSelectedTabNumber(1);
if (isLoading) {
setIsLoading(false);
}
+ setSelectedTabNumber(1);
});
};
@@ -47,7 +47,6 @@ const BasicSearch = ({
<>
<EuiFlexGroup>
<EuiFlexItem grow={false}>
- <EuiSpacer size="s" />
<EuiButtonEmpty
onClick={() => {
setIsAdvancedSearch(!isAdvancedSearch);
@@ -67,9 +66,16 @@ const BasicSearch = ({
value={basicSearch}
onChange={(e) => setBasicSearch(e.target.value)}
placeholder={t('basicSearch.searchInputPlaceholder')}
- fullWidth
autoFocus={true}
+ fullWidth
/>
+ {isLoading && (
+ <EuiFlexGroup>
+ <EuiFlexItem>
+ <EuiProgress postion="fixed" size="l" color="accent" />
+ </EuiFlexItem>
+ </EuiFlexGroup>
+ )}
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton type="submit" fill isDisabled={isAdvancedSearch}>
@@ -78,13 +84,6 @@ const BasicSearch = ({
</EuiFlexItem>
</EuiFlexGroup>
</form>
- {isLoading && (
- <EuiFlexGroup>
- <EuiFlexItem>
- <EuiProgress postion="fixed" size="l" color="accent" />
- </EuiFlexItem>
- </EuiFlexGroup>
- )}
</EuiFlexItem>
</EuiFlexGroup>
</>
diff --git a/src/pages/search/Search.js b/src/pages/search/Search.js
index 61bd93e712548ff2481e0473f84334777f2c7262..5f92324661616fc050f13403cf4942cc00f3febb 100644
--- a/src/pages/search/Search.js
+++ b/src/pages/search/Search.js
@@ -2,14 +2,9 @@ import React, { useState, useEffect } from 'react';
import {
EuiTabbedContent,
EuiPageContentBody,
- EuiForm,
EuiFlexGroup,
EuiFlexItem,
EuiSpacer,
- EuiPageContent,
- EuiPageContentHeader,
- EuiTitle,
- EuiPageContentHeaderSection,
} from '@elastic/eui';
import Results from '../results/Results';
import SearchMap from '../maps/SearchMap';
@@ -22,36 +17,19 @@ import {
import { useTranslation } from 'react-i18next';
import AdvancedSearch from './AdvancedSearch/AdvancedSearch';
import BasicSearch from './BasicSearch/BasicSearch';
-import styles from './styles';
const Search = () => {
const { t } = useTranslation('search');
- const datePickerStyles = styles();
const [selectedTabNumber, setSelectedTabNumber] = useState(0);
const [isAdvancedSearch, setIsAdvancedSearch] = useState(false);
- const [readOnlyQuery, setReadOnlyQuery] = useState(true);
- const [selectedField, setSelectedField] = useState([]);
- const [selectedSection, setSelectedSection] = useState([]);
- const [isPopoverSelectOpen, setIsPopoverSelectOpen] = useState(false);
- const [isPopoverValueOpen, setIsPopoverValueOpen] = useState([false]);
const [selectedSources, setSelectedSources] = useState([]);
+ const [sources, setSources] = useState([]);
const [availableSources, setAvailableSources] = useState([]);
- const [sourceSelectError, setSourceSelectError] = useState(undefined);
- const [valueError, setValueError] = useState(undefined);
const [search, setSearch] = useState('');
- const [searchName, setSearchName] = useState('');
- const [searchDescription, setSearchDescription] = useState('');
const [basicSearch, setBasicSearch] = useState('');
- const [selectedOperatorId, setSelectedOperatorId] = useState('0');
- const [searchFields, setSearchFields] = useState([]);
const [standardFields, setStandardFields] = useState([]);
- const [sources, setSources] = useState([]);
const [searchResults, setSearchResults] = useState([]);
- const [searchCount, setSearchCount] = useState();
- const [fieldCount, setFieldCount] = useState([]);
- const [isReadOnlyModalOpen, setIsReadOnlyModalOpen] = useState(false);
- const [isSaveSearchModalOpen, setIsSaveSearchModalOpen] = useState(false);
- const [selectedSavedSearch, setSelectedSavedSearch] = useState();
+ const [selectedResultsRowsIds, setSelectedResultsRowsIds] = useState([]);
useEffect(() => {
fetchPublicFields().then((resultStdFields) => {
@@ -94,95 +72,71 @@ const Search = () => {
id: 'tab1',
name: t('tabs.composeSearch'),
content: (
- <>
- {isAdvancedSearch ? (
- <AdvancedSearch
- search={search}
- setSearch={setSearch}
- searchResults={searchResults}
- setSearchResults={setSearchResults}
- searchFields={searchFields}
- setSearchFields={setSearchFields}
- searchName={searchName}
- setSearchName={setSearchName}
- searchDescription={searchDescription}
- setSearchDescription={setSearchDescription}
- readOnlyQuery={readOnlyQuery}
- setReadOnlyQuery={setReadOnlyQuery}
- selectedSources={selectedSources}
- setSelectedSources={setSelectedSources}
- availableSources={availableSources}
- setAvailableSources={setAvailableSources}
- standardFields={standardFields}
- setStandardFields={setStandardFields}
- sources={sources}
- setSelectedTabNumber={setSelectedTabNumber}
- searchCount={searchCount}
- setSearchCount={setSearchCount}
- setFieldCount={setFieldCount}
- isReadOnlyModalOpen={isReadOnlyModalOpen}
- setIsReadOnlyModalOpen={setIsReadOnlyModalOpen}
- isSaveSearchModalOpen={isSaveSearchModalOpen}
- setIsSaveSearchModalOpen={setIsSaveSearchModalOpen}
- selectedSavedSearch={selectedSavedSearch}
- setSelectedSavedSearch={setSelectedSavedSearch}
- selectedOperatorId={selectedOperatorId}
- setIsAdvancedSearch={setIsAdvancedSearch}
- isAdvancedSearch={isAdvancedSearch}
- selectedField={selectedField}
- selectedSection={selectedSection}
- setSelectedField={setSelectedField}
- setSelectedSection={setSelectedSection}
- isPopoverSelectOpen={isPopoverSelectOpen}
- setIsPopoverSelectOpen={setIsPopoverSelectOpen}
- setIsPopoverValueOpen={setIsPopoverValueOpen}
- isPopoverValueOpen={isPopoverValueOpen}
- valueError={valueError}
- setValueError={setValueError}
- setSelectedOperatorId={setSelectedOperatorId}
- fieldCount={fieldCount}
- sourceSelectError={sourceSelectError}
- datePickerStyles={datePickerStyles}
- setSourceSelectError={setSourceSelectError}
- />
- ) : (
- <BasicSearch
- isAdvancedSearch={isAdvancedSearch}
- setIsAdvancedSearch={setIsAdvancedSearch}
- standardFields={standardFields}
- availableSources={availableSources}
- selectedSources={selectedSources}
- basicSearch={basicSearch}
- setBasicSearch={setBasicSearch}
- setSearchResults={setSearchResults}
- setSelectedTabNumber={setSelectedTabNumber}
- />
- )}
- </>
+ <EuiFlexGroup>
+ <EuiFlexItem>
+ <EuiSpacer size={'l'} />
+ {isAdvancedSearch ? (
+ <AdvancedSearch
+ search={search}
+ setSearch={setSearch}
+ setSearchResults={setSearchResults}
+ selectedSources={selectedSources}
+ setSelectedSources={setSelectedSources}
+ availableSources={availableSources}
+ setAvailableSources={setAvailableSources}
+ standardFields={standardFields}
+ setStandardFields={setStandardFields}
+ sources={sources}
+ setSelectedTabNumber={setSelectedTabNumber}
+ isAdvancedSearch={isAdvancedSearch}
+ setIsAdvancedSearch={setIsAdvancedSearch}
+ />
+ ) : (
+ <BasicSearch
+ isAdvancedSearch={isAdvancedSearch}
+ setIsAdvancedSearch={setIsAdvancedSearch}
+ standardFields={standardFields}
+ availableSources={availableSources}
+ selectedSources={selectedSources}
+ basicSearch={basicSearch}
+ setBasicSearch={setBasicSearch}
+ setSearchResults={setSearchResults}
+ setSelectedTabNumber={setSelectedTabNumber}
+ />
+ )}
+ </EuiFlexItem>
+ </EuiFlexGroup>
),
},
{
- id: 'tab3',
+ id: 'tab2',
name: t('tabs.results'),
content: (
<EuiFlexGroup>
<EuiFlexItem>
+ <EuiSpacer size="l" />
<Results
searchResults={searchResults}
searchQuery={isAdvancedSearch ? search : basicSearch}
+ selectedRowsIds={selectedResultsRowsIds}
+ setSelectedRowsIds={setSelectedResultsRowsIds}
/>
</EuiFlexItem>
</EuiFlexGroup>
),
},
{
- id: 'tab2',
+ id: 'tab3',
name: t('tabs.map'),
content: (
<EuiFlexGroup>
<EuiFlexItem>
<EuiSpacer size="l" />
- <SearchMap searchResults={searchResults} />
+ <SearchMap
+ searchResults={searchResults}
+ selectedPointsIds={selectedResultsRowsIds}
+ setSelectedPointsIds={setSelectedResultsRowsIds}
+ />
</EuiFlexItem>
</EuiFlexGroup>
),
@@ -190,28 +144,15 @@ const Search = () => {
];
return (
- <>
- <EuiPageContent>
- <EuiPageContentHeader>
- <EuiPageContentHeaderSection>
- <EuiTitle>
- <h2>{t('pageTitle')}</h2>
- </EuiTitle>
- </EuiPageContentHeaderSection>
- </EuiPageContentHeader>
- <EuiPageContentBody>
- <EuiForm>
- <EuiTabbedContent
- tabs={tabsContent}
- selectedTab={tabsContent[selectedTabNumber]}
- onTabClick={(tab) => {
- setSelectedTabNumber(tabsContent.indexOf(tab));
- }}
- />
- </EuiForm>
- </EuiPageContentBody>
- </EuiPageContent>
- </>
+ <EuiPageContentBody>
+ <EuiTabbedContent
+ tabs={tabsContent}
+ selectedTab={tabsContent[selectedTabNumber]}
+ onTabClick={(tab) => {
+ setSelectedTabNumber(tabsContent.indexOf(tab));
+ }}
+ />
+ </EuiPageContentBody>
);
};