minimum version for getting help

dgidb · Jun 28, 2023 · 6e3d685 · 6e3d685
1 parent 2af4e7a
commit 6e3d685
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 60 deletions.
diff --git a/client/src/components/BrowseCategories/BrowseCategories.tsx b/client/src/components/BrowseCategories/BrowseCategories.tsx
@@ -65,7 +65,7 @@ export const BrowseCategories: React.FC = () => {
           />
         </Grid>
         <Box className="browse-cats-accordion-horizontal-container" flex={1}>
-          <CategoriesListing sources={checkedSources} />
+          <CategoriesListing checkedSources={checkedSources} sourcesLoaded={isLoading !== undefined && !isLoading && !isError}/>
         </Box>
       </Grid>
     </Box>

diff --git a/client/src/components/BrowseCategories/CategoriesListing/CategoriesListing.tsx b/client/src/components/BrowseCategories/CategoriesListing/CategoriesListing.tsx
@@ -13,72 +13,88 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import { CategoryTable } from '../CategoryTable/CategoryTable';
 
 interface Props {
-  sources: string[];
+  checkedSources: string[];
+  sourcesLoaded: boolean;
 }
 
 type CategoryHeaderData = {
   name: string;
   geneCount: number;
 };
 
-export const CategoriesListing: React.FC<Props> = ({ sources }) => {
-  const [renderedCategories, setRenderedCategories] = useState<
-    CategoryHeaderData[]
-  >([]);
+export const CategoriesListing: React.FC<Props> = ({ checkedSources, sourcesLoaded }) => {
+  const [renderedCategories, setRenderedCategories] = useState<CategoryHeaderData[]>([]);
 
-  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 ? (
-        <ErrorMessage />
-      ) : isLoading ? (
-        <LoadingSpinner />
-      ) : renderedCategories?.length === 0 ? (
-        <Typography variant="h6" className="empty-msg">
-          No categorized genes found.
-        </Typography>
-      ) : (
-        <Box boxShadow={3}>
-          {renderedCategories
-            ?.filter((cat: any) => cat.geneCount > 0)
-            .map((cat: any, index: number) => {
-              return (
-                <Accordion
-                  TransitionProps={{ unmountOnExit: true }}
-                  disableGutters
-                  key={index}
-                >
-                  <AccordionSummary
-                    style={{ padding: '0 10px' }}
-                    expandIcon={<ExpandMoreIcon />}
-                  >
-                    {`${cat.name} (${cat.geneCount.toLocaleString(
-                      'en-US'
-                    )} genes)`}
-                  </AccordionSummary>
-                  <AccordionDetails
-                    style={{ overflow: 'scroll', padding: '0 10px 10px' }}
-                  >
-                    <CategoryTable
-                      categoryName={cat.name}
-                      sourceDbNames={sources}
-                    />
-                  </AccordionDetails>
-                </Accordion>
-              );
-            })}
-        </Box>
-      )}
-    </>
-  );
-};
+  return <>{renderedCategories.map((s: any, index: number) => <Box key={index}>{JSON.stringify(s)}</Box>)}</>
+}
+
+// export const CategoriesListing: React.FC<Props> = ({ 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 ? (
+//         <ErrorMessage />
+//       ) : isLoading ? (
+//         <LoadingSpinner />
+//       ) : renderedCategories?.length === 0 ? (
+//         <Typography variant="h6" className="empty-msg">
+//           No categorized genes found.
+//         </Typography>
+//       ) : (
+//         <Box boxShadow={3}>
+//           {renderedCategories
+//             ?.filter((cat: any) => cat.geneCount > 0)
+//             .map((cat: any, index: number) => {
+//               return (
+//                 <Accordion
+//                   TransitionProps={{ unmountOnExit: true }}
+//                   disableGutters
+//                   key={index}
+//                 >
+//                   <AccordionSummary
+//                     style={{ padding: '0 10px' }}
+//                     expandIcon={<ExpandMoreIcon />}
+//                   >
+//                     {`${cat.name} (${cat.geneCount.toLocaleString(
+//                       'en-US'
+//                     )} genes)`}
+//                   </AccordionSummary>
+//                   <AccordionDetails
+//                     style={{ overflow: 'scroll', padding: '0 10px 10px' }}
+//                   >
+//                     <CategoryTable
+//                       categoryName={cat.name}
+//                       sourceDbNames={checkedSources}
+//                     />
+//                   </AccordionDetails>
+//                 </Accordion>
+//               );
+//             })}
+//         </Box>
+//       )}
+//     </>
+//   );
+// };
diff --git 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 () => {