diff --git a/client/src/components/BrowseCategories/BrowseCategories.tsx b/client/src/components/BrowseCategories/BrowseCategories.tsx index 2f3283bf..4734373b 100644 --- a/client/src/components/BrowseCategories/BrowseCategories.tsx +++ b/client/src/components/BrowseCategories/BrowseCategories.tsx @@ -65,7 +65,7 @@ export const BrowseCategories: React.FC = () => { /> - + diff --git a/client/src/components/BrowseCategories/CategoriesListing/CategoriesListing.tsx b/client/src/components/BrowseCategories/CategoriesListing/CategoriesListing.tsx index 8e4a8291..b8849b34 100644 --- a/client/src/components/BrowseCategories/CategoriesListing/CategoriesListing.tsx +++ b/client/src/components/BrowseCategories/CategoriesListing/CategoriesListing.tsx @@ -13,7 +13,8 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import { CategoryTable } from '../CategoryTable/CategoryTable'; interface Props { - sources: string[]; + checkedSources: string[]; + sourcesLoaded: boolean; } type CategoryHeaderData = { @@ -21,64 +22,79 @@ type CategoryHeaderData = { geneCount: number; }; -export const CategoriesListing: React.FC = ({ sources }) => { - const [renderedCategories, setRenderedCategories] = useState< - CategoryHeaderData[] - >([]); +export const CategoriesListing: React.FC = ({ checkedSources, sourcesLoaded }) => { + const [renderedCategories, setRenderedCategories] = useState([]); - const { data, isLoading, isError } = useGetGeneCountsForCategories( - sources, - sources.length > 0 - ); + const { data, isLoading, isError } = useGetGeneCountsForCategories(checkedSources, sourcesLoaded); + const categoriesData = data?.categories?.nodes useEffect(() => { - if (data?.categories?.nodes) { - setRenderedCategories(data.categories.nodes); - } - }, [data]); + setRenderedCategories(categoriesData || []); + }, [categoriesData]) - return ( - <> - {isError ? ( - - ) : isLoading ? ( - - ) : renderedCategories?.length === 0 ? ( - - No categorized genes found. - - ) : ( - - {renderedCategories - ?.filter((cat: any) => cat.geneCount > 0) - .map((cat: any, index: number) => { - return ( - - } - > - {`${cat.name} (${cat.geneCount.toLocaleString( - 'en-US' - )} genes)`} - - - - - - ); - })} - - )} - - ); -}; + return <>{renderedCategories.map((s: any, index: number) => {JSON.stringify(s)})} +} + +// export const CategoriesListing: React.FC = ({ sources, checkedSources }) => { +// const [renderedCategories, setRenderedCategories] = useState< +// CategoryHeaderData[] +// >([]); + +// const { data, isLoading, isError } = useGetGeneCountsForCategories( +// checkedSources, +// true +// ); +// const categories = data?.categories?.nodes; + +// useEffect(() => { +// console.log(`use effect fired: ${categories}`); +// if (categories) { +// setRenderedCategories(categories); +// } +// }, [categories]); + +// return ( +// <> +// {isError ? ( +// +// ) : isLoading ? ( +// +// ) : renderedCategories?.length === 0 ? ( +// +// No categorized genes found. +// +// ) : ( +// +// {renderedCategories +// ?.filter((cat: any) => cat.geneCount > 0) +// .map((cat: any, index: number) => { +// return ( +// +// } +// > +// {`${cat.name} (${cat.geneCount.toLocaleString( +// 'en-US' +// )} genes)`} +// +// +// +// +// +// ); +// })} +// +// )} +// +// ); +// }; diff --git a/client/src/hooks/queries/useGetGeneCountsForCategories.ts b/client/src/hooks/queries/useGetGeneCountsForCategories.ts index 3a123432..c8b94b9d 100644 --- a/client/src/hooks/queries/useGetGeneCountsForCategories.ts +++ b/client/src/hooks/queries/useGetGeneCountsForCategories.ts @@ -17,7 +17,6 @@ export const useGetGeneCountsForCategories = ( sourceDbNames: String[], enabled: boolean = true ) => { - console.log('firintg query'); return useQuery( 'gene-counts-for-categories', async () => {