feat: update browse categories interface

client/package.json

@@ -39,7 +39,6 @@
     "react-query": "^3.34.0",
     "react-router-dom": "^6.2.2",
     "react-scripts": "^5.0.0",
-    "react-sticky": "^6.0.3",
     "react-tag-autocomplete": "^6.3.0",
     "sass": "^1.38.1",
     "typescript": "^5.1.3",

client/src/components/BrowseCategories/BrowseCategories.scss

@@ -0,0 +1,15 @@
+.browse-cats-container {
+  padding: 24px;
+
+  .browse-cats-title-container {
+    margin-bottom: 1.1em;
+  }
+
+  .browse-cats-title {
+    font-weight: 450;
+  }
+
+  .empty-msg {
+    margin: 1em;
+  }
+}

client/src/components/BrowseCategories/BrowseCategories.tsx

@@ -0,0 +1,73 @@
+// hooks/dependencies
+import React, { useState, useEffect } from 'react';
+import { useGetDruggableSources } from 'hooks/queries/useGetSourceInfo';
+
+// components
+import { CategoriesListing } from './CategoriesListing/CategoriesListing';
+import {
+  Box,
+  Grid,
+  Typography,
+} from '@mui/material';
+
+// styles
+import './BrowseCategories.scss';
+import { CategoriesCheckboxContainer } from './CategoriesCheckboxContainer/CategoriesCheckboxContainer';
+
+export const BrowseCategories: React.FC = () => {
+  const [druggableSources, setDruggableSources] = useState([]);
+  const [checkedSources, setCheckedSources] = useState<any>([]);
+
+  const { data, isLoading, isError } = useGetDruggableSources();
+
+  useEffect(() => {
+    if (data?.sources?.nodes) {
+      const nodes = data?.sources?.nodes;
+      const sources: any = [];
+
+      nodes.forEach((node: any) => {
+        sources.push(node.sourceDbName);
+      });
+
+      setDruggableSources(
+        sources.sort((a: string, b: string) =>
+          a.toLowerCase().localeCompare(b.toLowerCase())
+        )
+      );
+    }
+  }, [data]);
+
+  useEffect(() => {
+    if (druggableSources) {
+      setCheckedSources(druggableSources);
+    }
+  }, [druggableSources]);
+
+  return (
+    <Box className="browse-cats-container">
+      <Grid
+        container
+        justifyContent="space-between"
+        className="browse-cats-title-container"
+      >
+        <Typography variant="h4" className="browse-cats-title">
+          Druggable Gene Categories
+        </Typography>
+      </Grid>
+      <Grid container>
+        <Grid>
+          <CategoriesCheckboxContainer
+            checkOptions={druggableSources}
+            checkedSources={checkedSources}
+            setCheckedSources={setCheckedSources}
+            isLoading={isLoading}
+            isError={isError}
+          />
+        </Grid>
+        <Box className="browse-cats-accordion-horizontal-container" flex={1}>
+          <CategoriesListing checkedSources={checkedSources} sourcesLoaded={isLoading !== undefined && !isLoading && !isError}/>
+        </Box>
+      </Grid>
+    </Box>
+  );
+};

client/src/components/BrowseCategories/CategoriesCheckboxContainer/CategoriesCheckboxContainer.scss

@@ -0,0 +1,8 @@
+.browse-cats-checkbox-container {
+  margin-right: 1em;
+  padding: 1em;
+  background-color: var(--background-light);
+  top: 0;
+  position: -webkit-sticky;
+  position: sticky;
+}