From 28bd53e409ab89838e372248dfb6f08d2f3469fa Mon Sep 17 00:00:00 2001 From: Aiga115 Date: Mon, 14 Apr 2025 10:26:20 +0200 Subject: [PATCH 1/3] ILEX-104 initial changes make --- .../SearchResults/SearchResultsBox.jsx | 15 +-- src/components/SearchResults/index.jsx | 95 ++++++++++++------- 2 files changed, 71 insertions(+), 39 deletions(-) diff --git a/src/components/SearchResults/SearchResultsBox.jsx b/src/components/SearchResults/SearchResultsBox.jsx index b3b6e7d2..ee39d1f9 100644 --- a/src/components/SearchResults/SearchResultsBox.jsx +++ b/src/components/SearchResults/SearchResultsBox.jsx @@ -29,7 +29,7 @@ const CustomViewButton = ({ view, listView, onClick, icon }) => ( ); -const SearchResultsBox = ({ terms, searchTerm, loading }) => { +const SearchResultsBox = ({ searchResults, searchTerm, loading }) => { const [numberOfVisiblePages, setNumberOfVisiblePages] = React.useState(20); const [listView, setListView] = React.useState('list'); @@ -41,7 +41,7 @@ const SearchResultsBox = ({ terms, searchTerm, loading }) => { - {terms?.results?.length} results for {searchTerm} search + {searchResults?.results?.length} results for {searchTerm} search @@ -72,9 +72,12 @@ const SearchResultsBox = ({ terms, searchTerm, loading }) => { - {listView === 'list' ? ( - - ) : ( + {listView === 'list' ? (<> + {Object.entries(searchResults).map(([key, value]) => ( + value.length > 0 && ( + + )))} + ) : (

table

)} @@ -89,7 +92,7 @@ CustomViewButton.propTypes = { }; SearchResultsBox.propTypes = { - terms: PropTypes.object, + searchResults: PropTypes.object, searchTerm: PropTypes.string, loading: PropTypes.bool }; diff --git a/src/components/SearchResults/index.jsx b/src/components/SearchResults/index.jsx index bfd734a0..8fbda2bc 100644 --- a/src/components/SearchResults/index.jsx +++ b/src/components/SearchResults/index.jsx @@ -1,21 +1,23 @@ import { debounce } from 'lodash'; import PropTypes from 'prop-types'; import { useQuery } from '../../helpers'; -import termParser from '../../parsers/termParser'; import SearchResultsBox from './SearchResultsBox'; -import { useEffect, useRef, useState } from 'react'; +import { useEffect, useState, useCallback } from 'react'; import FiltersSidebar from '../Sidebar/FiltersSidebar'; -import * as mockApi from '../../api/endpoints/swaggerMockMissingEndpoints'; +import { searchAll, elasticSearch } from '../../api/endpoints'; +import { SEARCH_TYPES } from '../../constants/types'; -const useMockApi = () => mockApi; const SearchResults = () => { - const [loading, setLoading] = useState(false); - const [terms, setTerms] = useState({}); + const [loading, setLoading] = useState(true); const [filters, setFilters] = useState([]); const [checkedLabels, setCheckedLabels] = useState({}); + const [searchResults, setSearchResults] = useState({ + terms: [], + organizations: [], + ontologies: [] + }); const query = useQuery(); - const { getMatchTerms } = useMockApi(); const searchTerm = query.get('searchTerm'); @@ -27,38 +29,56 @@ const SearchResults = () => { [label]: !prev[category]?.[label] } })); + filteredResults() }; - const fetchTerms = useRef( - debounce((searchTerm) => { - setLoading(true); - getMatchTerms("i") - .then((data) => { - const parsedData = termParser(data, searchTerm); - setTerms(parsedData); - setFilters(parsedData.filters); - setLoading(false); - }) - .catch((error) => { - setLoading(false); - console.error(error); - }); - }, 500) - ).current; + // eslint-disable-next-line react-hooks/exhaustive-deps + const fetchTerms = useCallback(debounce(async (searchTerm) => { + const data = await elasticSearch(searchTerm); + setFilters(data.filters) + setSearchResults({ + terms: data?.results?.filter(result => result.type === SEARCH_TYPES.TERM) || [], + organizations: data?.results?.filter(result => result.type === SEARCH_TYPES.ORGANIZATION) || [], + ontologies: data?.results?.filter(result => result.type === SEARCH_TYPES.ONTOLOGY) || [] + }); + setLoading(false) + }, 500), [searchAll]); useEffect(() => { fetchTerms(searchTerm); }, [searchTerm, fetchTerms]); - const filterResults = (results, checkedLabels) => { - return results.filter(item => { - for (let category in checkedLabels) { - if (!checkedLabels[category]) continue; // Skip empty categories - for (let label in checkedLabels[category]) { - if (checkedLabels[category][label]) { - const categoryLower = category.toLowerCase(); - const itemValue = item[categoryLower] || item[categoryLower === 'type' ? 'Type' : categoryLower]; // Case-insensitive check + // const filterResults = (results, checkedLabels) => { + // return results.filter(item => { + // for (let category in checkedLabels) { + // if (!checkedLabels[category]) continue; // Skip empty categories + // for (let label in checkedLabels[category]) { + // if (checkedLabels[category][label]) { + // const categoryLower = category.toLowerCase(); + // const itemValue = item[categoryLower] || item[categoryLower === 'type' ? 'Type' : categoryLower]; // Case-insensitive check + // if (itemValue !== label) { + // return false; + // } + // } + // } + // } + // return true; + // }); + // }; + const filterResults = (results, checkedLabels, category) => { + const arrayToFilter = results[category] || []; + + return arrayToFilter.filter(item => { + for (let filterCategory in checkedLabels) { + if (!checkedLabels[filterCategory]) continue; // Skip empty categories + + for (let label in checkedLabels[filterCategory]) { + if (checkedLabels[filterCategory][label]) { + const categoryLower = filterCategory.toLowerCase(); + const itemValue = item[categoryLower] || + item[categoryLower === 'type' ? 'Type' : categoryLower]; // Case-insensitive check + if (itemValue !== label) { return false; } @@ -69,12 +89,21 @@ const SearchResults = () => { }); }; - const filteredResults = filterResults(terms?.results || [], checkedLabels); + // const filteredResults = filterResults(searchResults || [], checkedLabels); + const filteredResults = () => { + setSearchResults({ + terms: filterResults(searchResults, checkedLabels, 'terms'), + organizations: filterResults(searchResults, checkedLabels, 'organizations'), + ontologies: filterResults(searchResults, checkedLabels, 'ontologies') + }); + }; + + console.log("searchResults: ", searchResults) return ( <> - + ); }; From eae1862ba4a8326c6df0e7449501afa0febd4362 Mon Sep 17 00:00:00 2001 From: Aiga115 Date: Mon, 14 Apr 2025 11:19:31 +0200 Subject: [PATCH 2/3] ILEX-104 fix issue with showing all the data on results page --- .../SearchResults/SearchResultsBox.jsx | 11 +-- src/components/SearchResults/index.jsx | 75 +++++-------------- 2 files changed, 23 insertions(+), 63 deletions(-) diff --git a/src/components/SearchResults/SearchResultsBox.jsx b/src/components/SearchResults/SearchResultsBox.jsx index ee39d1f9..7017a149 100644 --- a/src/components/SearchResults/SearchResultsBox.jsx +++ b/src/components/SearchResults/SearchResultsBox.jsx @@ -41,7 +41,7 @@ const SearchResultsBox = ({ searchResults, searchTerm, loading }) => { - {searchResults?.results?.length} results for {searchTerm} search + {searchResults?.length} results for {searchTerm} search @@ -72,12 +72,9 @@ const SearchResultsBox = ({ searchResults, searchTerm, loading }) => { - {listView === 'list' ? (<> - {Object.entries(searchResults).map(([key, value]) => ( - value.length > 0 && ( - - )))} - ) : ( + {listView === 'list' ? ( + + ) : (

table

)} diff --git a/src/components/SearchResults/index.jsx b/src/components/SearchResults/index.jsx index 8fbda2bc..c39c16c2 100644 --- a/src/components/SearchResults/index.jsx +++ b/src/components/SearchResults/index.jsx @@ -5,18 +5,13 @@ import SearchResultsBox from './SearchResultsBox'; import { useEffect, useState, useCallback } from 'react'; import FiltersSidebar from '../Sidebar/FiltersSidebar'; import { searchAll, elasticSearch } from '../../api/endpoints'; -import { SEARCH_TYPES } from '../../constants/types'; const SearchResults = () => { const [loading, setLoading] = useState(true); const [filters, setFilters] = useState([]); const [checkedLabels, setCheckedLabels] = useState({}); - const [searchResults, setSearchResults] = useState({ - terms: [], - organizations: [], - ontologies: [] - }); + const [searchResults, setSearchResults] = useState([]); const query = useQuery(); const searchTerm = query.get('searchTerm'); @@ -29,18 +24,13 @@ const SearchResults = () => { [label]: !prev[category]?.[label] } })); - filteredResults() }; // eslint-disable-next-line react-hooks/exhaustive-deps const fetchTerms = useCallback(debounce(async (searchTerm) => { const data = await elasticSearch(searchTerm); setFilters(data.filters) - setSearchResults({ - terms: data?.results?.filter(result => result.type === SEARCH_TYPES.TERM) || [], - organizations: data?.results?.filter(result => result.type === SEARCH_TYPES.ORGANIZATION) || [], - ontologies: data?.results?.filter(result => result.type === SEARCH_TYPES.ONTOLOGY) || [] - }); + setSearchResults(data?.results || []); setLoading(false) }, 500), [searchAll]); @@ -49,61 +39,34 @@ const SearchResults = () => { }, [searchTerm, fetchTerms]); - // const filterResults = (results, checkedLabels) => { - // return results.filter(item => { - // for (let category in checkedLabels) { - // if (!checkedLabels[category]) continue; // Skip empty categories - // for (let label in checkedLabels[category]) { - // if (checkedLabels[category][label]) { - // const categoryLower = category.toLowerCase(); - // const itemValue = item[categoryLower] || item[categoryLower === 'type' ? 'Type' : categoryLower]; // Case-insensitive check - // if (itemValue !== label) { - // return false; - // } - // } - // } - // } - // return true; - // }); - // }; - const filterResults = (results, checkedLabels, category) => { - const arrayToFilter = results[category] || []; - - return arrayToFilter.filter(item => { - for (let filterCategory in checkedLabels) { - if (!checkedLabels[filterCategory]) continue; // Skip empty categories + const filterResults = (results, checkedLabels) => { + return results.filter(item => { + for (let category in checkedLabels) { + if (!checkedLabels[category]) continue; // Skip empty categories + + const selectedLabels = Object.entries(checkedLabels[category]) + .filter(([_, isChecked]) => isChecked) + .map(([label]) => label); + + if (selectedLabels.length === 0) continue; + + const categoryLower = category.toLowerCase(); + const itemValue = item[categoryLower] || item[categoryLower === 'type' ? 'Type' : categoryLower]; - for (let label in checkedLabels[filterCategory]) { - if (checkedLabels[filterCategory][label]) { - const categoryLower = filterCategory.toLowerCase(); - const itemValue = item[categoryLower] || - item[categoryLower === 'type' ? 'Type' : categoryLower]; // Case-insensitive check - - if (itemValue !== label) { - return false; - } - } + if (!selectedLabels.includes(itemValue)) { + return false; } } return true; }); }; - // const filteredResults = filterResults(searchResults || [], checkedLabels); - const filteredResults = () => { - setSearchResults({ - terms: filterResults(searchResults, checkedLabels, 'terms'), - organizations: filterResults(searchResults, checkedLabels, 'organizations'), - ontologies: filterResults(searchResults, checkedLabels, 'ontologies') - }); - }; - - console.log("searchResults: ", searchResults) + const filteredResults = filterResults(searchResults || [], checkedLabels); return ( <> - + ); }; From ad7b00172b8273e9effebe02f83114fc6d8016d2 Mon Sep 17 00:00:00 2001 From: Aiga115 Date: Mon, 14 Apr 2025 11:28:13 +0200 Subject: [PATCH 3/3] ILEX-104 fix linting issue --- src/components/SearchResults/index.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/SearchResults/index.jsx b/src/components/SearchResults/index.jsx index c39c16c2..dcb86057 100644 --- a/src/components/SearchResults/index.jsx +++ b/src/components/SearchResults/index.jsx @@ -45,7 +45,7 @@ const SearchResults = () => { if (!checkedLabels[category]) continue; // Skip empty categories const selectedLabels = Object.entries(checkedLabels[category]) - .filter(([_, isChecked]) => isChecked) + .filter(([, isChecked]) => isChecked) .map(([label]) => label); if (selectedLabels.length === 0) continue;