Add React Hooks Linting

.eslintrc.js

@@ -13,21 +13,30 @@ module.exports = {
     node: true,
   },
   plugins: ['react', '@typescript-eslint'],
-  extends: ['eslint:recommended', 'plugin:react/recommended', 'plugin:@typescript-eslint/recommended', 'plugin:prettier/recommended'],
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:prettier/recommended',
+    'plugin:react-hooks/recommended',
+  ],
   rules: {
     'react/prop-types': 'off', // disable prop-types since we're using TypeScript
     '@typescript-eslint/explicit-module-boundary-types': 'off', // allow implicit return types
     '@typescript-eslint/no-empty-interface': 'off', // allow empty interfaces
     'no-unused-vars': 'off', // disable no-unused-vars since @typescript-eslint/no-unused-vars does the same
     '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }], // enable @typescript-eslint/no-unused-vars
     '@typescript-eslint/no-non-null-assertion': 'off',
-    'comma-dangle': ['error', {
-      'arrays': 'always-multiline',
-      'objects': 'always-multiline',
-      'imports': 'always-multiline',
-      'exports': 'always-multiline',
-    }],
-    'semi': ['error', 'always'],
+    'comma-dangle': [
+      'error',
+      {
+        arrays: 'always-multiline',
+        objects: 'always-multiline',
+        imports: 'always-multiline',
+        exports: 'always-multiline',
+      },
+    ],
+    semi: ['error', 'always'],
   },
   settings: {
     react: {

package.json

@@ -24,6 +24,7 @@
     "bento-auth-js": "^5.1.1",
     "bento-charts": "^2.6.8",
     "dotenv": "^16.3.1",
+    "eslint-plugin-react-hooks": "^4.6.2",
     "i18next": "^23.7.7",
     "i18next-browser-languagedetector": "^8.0.0",
     "i18next-http-backend": "^2.4.2",

src/js/components/Beacon/BeaconQueryUi.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, ReactNode } from 'react';
+import React, { useEffect, useState, ReactNode, useCallback, useMemo } from 'react';
 import { useAppSelector, useAppDispatch, useTranslationDefault, useQueryWithAuthIfAllowed } from '@/hooks';
 import { Button, Card, Col, Form, Row, Space, Tooltip, Typography } from 'antd';
 import { InfoCircleOutlined } from '@ant-design/icons';
@@ -64,8 +64,13 @@ const BeaconQueryUi = () => {
   const isAuthenticated = useIsAuthenticated();
 
   const dispatch = useAppDispatch();
-  const launchEmptyQuery = () => dispatch(makeBeaconQuery(requestPayload({}, [])));
-  const formInitialValues = { 'Assembly ID': beaconAssemblyIds.length === 1 && beaconAssemblyIds[0] };
+  const launchEmptyQuery = useCallback(() => dispatch(makeBeaconQuery(requestPayload({}, []))), [dispatch]);
+  const formInitialValues = useMemo(
+    () => ({
+      'Assembly ID': beaconAssemblyIds.length === 1 && beaconAssemblyIds[0],
+    }),
+    [beaconAssemblyIds]
+  );
   const uiInstructions = hasVariants ? 'Search by genomic variants, clinical metadata or both.' : '';
 
   const hasError = hasFormError || hasApiError;
@@ -88,7 +93,7 @@ const BeaconQueryUi = () => {
 
     // set assembly id options matching what's in gohan
     form.setFieldsValue(formInitialValues);
-  }, [isFetchingBeaconConfig, isAuthenticated]);
+  }, [beaconAssemblyIds.length, form, formInitialValues, isFetchingBeaconConfig, isAuthenticated, launchEmptyQuery]);
 
   // Disables max query param if user is authenticated and authorized
   useQueryWithAuthIfAllowed();

src/js/components/Beacon/Filter.tsx

@@ -36,7 +36,7 @@ const Filter = ({ filter, form, querySections, removeFilter, isRequired }: Filte
     form.setFieldsValue({
       [`filterValue${filter.index}`]: valueOptions[0].value,
     });
-  }, [valueOptions]);
+  }, [filter.index, form, valueOptions]);
 
   const renderLabel = (searchField: Field) => {
     const units = searchField.config?.units;

src/js/components/BentoAppRouter.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
-import { Routes, Route } from 'react-router-dom';
+import { Routes, Route, useNavigate, useParams, Outlet } from 'react-router-dom';
 import { useAutoAuthenticate, useIsAuthenticated } from 'bento-auth-js';
-import { useAppDispatch } from '@/hooks';
+import { useAppDispatch, useAppSelector } from '@/hooks';
 
 import { makeGetConfigRequest, makeGetServiceInfoRequest } from '@/features/config/config.store';
 import { makeGetAboutRequest } from '@/features/content/content.store';
@@ -11,19 +11,56 @@ import { makeGetProvenanceRequest } from '@/features/provenance/provenance.store
 import { getBeaconConfig } from '@/features/beacon/beaconConfig.store';
 import { fetchGohanData, fetchKatsuData } from '@/features/ingestion/lastIngestion.store';
 import { makeGetDataTypes } from '@/features/dataTypes/dataTypes.store';
+import { getProjects, selectScope } from '@/features/metadata/metadata.store';
 
 import PublicOverview from './Overview/PublicOverview';
 import Search from './Search/Search';
 import ProvenanceTab from './Provenance/ProvenanceTab';
 import BeaconQueryUi from './Beacon/BeaconQueryUi';
 import { BentoRoute } from '@/types/routes';
 import Loader from '@/components/Loader';
+import { validProjectDataset } from '@/utils/router';
+import DefaultLayout from '@/components/Util/DefaultLayout';
+
+const ScopedRoute = () => {
+  const { projectId, datasetId } = useParams();
+  const dispatch = useAppDispatch();
+  const navigate = useNavigate();
+  const { projects } = useAppSelector((state) => state.metadata);
+
+  useEffect(() => {
+    // Update selectedScope based on URL parameters
+    const valid = validProjectDataset(projects, projectId, datasetId);
+    if (datasetId === valid.dataset && projectId === valid.project) {
+      dispatch(selectScope(valid));
+    } else {
+      const oldpath = location.pathname.split('/').filter(Boolean);
+      const newPath = [oldpath[0]];
+
+      if (valid.dataset) {
+        newPath.push('p', valid.project as string, 'd', valid.dataset);
+      } else if (valid.project) {
+        newPath.push('p', valid.project);
+      }
+
+      const oldPathLength = oldpath.length;
+      if (oldpath[oldPathLength - 3] === 'p' || oldpath[oldPathLength - 3] === 'd') {
+        newPath.push(oldpath[oldPathLength - 1]);
+      }
+      const newPathString = '/' + newPath.join('/');
+      navigate(newPathString, { replace: true });
+    }
+  }, [projects, projectId, datasetId, dispatch, navigate]);
+
+  return <Outlet />;
+};
 
 const BentoAppRouter = () => {
   const dispatch = useAppDispatch();
 
   const { isAutoAuthenticating } = useAutoAuthenticate();
   const isAuthenticated = useIsAuthenticated();
+  const { selectedScope, isFetching: isFetchingProjects } = useAppSelector((state) => state.metadata);
 
   useEffect(() => {
     dispatch(makeGetConfigRequest()).then(() => dispatch(getBeaconConfig()));
@@ -33,25 +70,49 @@ const BentoAppRouter = () => {
     dispatch(makeGetProvenanceRequest());
     dispatch(makeGetKatsuPublic());
     dispatch(fetchKatsuData());
+  }, [dispatch, selectedScope]);
+
+  useEffect(() => {
+    dispatch(getProjects());
+    dispatch(makeGetAboutRequest());
     dispatch(fetchGohanData());
     dispatch(makeGetServiceInfoRequest());
-
     if (isAuthenticated) {
       dispatch(makeGetDataTypes());
     }
-  }, [isAuthenticated]);
+  }, [dispatch, isAuthenticated]);
 
-  if (isAutoAuthenticating) {
+  if (isAutoAuthenticating || isFetchingProjects) {
     return <Loader />;
   }
 
   return (
     <Routes>
-      <Route path={`/${BentoRoute.Overview}`} element={<PublicOverview />} />
-      <Route path={`/${BentoRoute.Search}/*`} element={<Search />} />
-      <Route path={`/${BentoRoute.Beacon}/*`} element={<BeaconQueryUi />} />
-      <Route path={`/${BentoRoute.Provenance}/*`} element={<ProvenanceTab />} />
-      <Route path="/*" element={<PublicOverview />} />
+      <Route element={<DefaultLayout />}>
+        <Route path="/" element={<ScopedRoute />}>
+          <Route index element={<PublicOverview />} />
+          <Route path={BentoRoute.Overview} element={<PublicOverview />} />
+          <Route path={BentoRoute.Search} element={<Search />} />
+          <Route path={BentoRoute.Beacon} element={<BeaconQueryUi />} />
+          <Route path={BentoRoute.Provenance} element={<ProvenanceTab />} />
+        </Route>
+
+        <Route path="/p/:projectId" element={<ScopedRoute />}>
+          <Route index element={<PublicOverview />} />
+          <Route path={BentoRoute.Overview} element={<PublicOverview />} />
+          <Route path={BentoRoute.Search} element={<Search />} />
+          <Route path={BentoRoute.Beacon} element={<BeaconQueryUi />} />
+          <Route path={BentoRoute.Provenance} element={<ProvenanceTab />} />
+        </Route>
+
+        <Route path="/p/:projectId/d/:datasetId" element={<ScopedRoute />}>
+          <Route index element={<PublicOverview />} />
+          <Route path={BentoRoute.Overview} element={<PublicOverview />} />
+          <Route path={BentoRoute.Search} element={<Search />} />
+          <Route path={BentoRoute.Beacon} element={<BeaconQueryUi />} />
+          <Route path={BentoRoute.Provenance} element={<ProvenanceTab />} />
+        </Route>
+      </Route>
     </Routes>
   );
 };

src/js/components/ChooseProjectModal.tsx

@@ -0,0 +1,82 @@
+import React, { useState } from 'react';
+import { Tabs, List, Avatar, Modal, Button, Space, Typography } from 'antd';
+import { useAppSelector, useTranslationCustom, useTranslationDefault } from '@/hooks';
+import { Link, useLocation } from 'react-router-dom';
+import { FaDatabase } from 'react-icons/fa';
+import { getCurrentPage } from '@/utils/router';
+
+const ChooseProjectModal = ({ isModalOpen, setIsModalOpen }: ChooseProjectModalProps) => {
+  const td = useTranslationDefault();
+  const t = useTranslationCustom();
+  const location = useLocation();
+  const { projects, selectedScope } = useAppSelector((state) => state.metadata);
+  const [selectedProject, setSelectedProject] = useState<string | undefined>(
+    selectedScope.project ?? projects[0]?.identifier ?? undefined
+  );
+
+  const baseURL = '/' + location.pathname.split('/')[1];
+  const page = getCurrentPage();
+
+  const closeModal = () => setIsModalOpen(false);
+
+  return (
+    <Modal title={td('Select Scope')} open={isModalOpen} onCancel={closeModal} footer={null} width={800}>
+      <Tabs
+        tabPosition="left"
+        activeKey={selectedProject}
+        onChange={(key) => setSelectedProject(key)}
+        tabBarExtraContent={
+          <Link to={baseURL}>
+            <Button>{td('Clear')}</Button>
+          </Link>
+        }
+        items={projects.map(({ identifier, title, datasets, description }) => {
+          return {
+            key: identifier,
+            label: t(title),
+            children: (
+              <Space direction="vertical">
+                <Space align="baseline" size="large">
+                  <Typography.Title level={4} className="no-margin-top">
+                    {td('About')} {t(title)}
+                  </Typography.Title>
+                  <Link to={`${baseURL}/p/${selectedProject}/${page}`} key="3">
+                    <Typography.Link>{td('Select')}</Typography.Link>
+                  </Link>
+                </Space>
+                <Typography.Text>{t(description)}</Typography.Text>
+                <Typography.Title level={5} className="no-margin-top">
+                  {td('Datasets')}
+                </Typography.Title>
+                <List
+                  dataSource={datasets}
+                  bordered
+                  renderItem={(item) => (
+                    <Link to={`${baseURL}/p/${identifier}/d/${item.identifier}/${page}`}>
+                      <List.Item className="select-dataset-hover" key={item.identifier}>
+                        <List.Item.Meta
+                          avatar={<Avatar style={{ backgroundColor: '#33ccff' }} icon={<FaDatabase />} />}
+                          title={
+                            <Link to={`${baseURL}/p/${identifier}/d/${item.identifier}/${page}`}>{t(item.title)}</Link>
+                          }
+                          description={t(item.description)}
+                        />
+                      </List.Item>
+                    </Link>
+                  )}
+                />
+              </Space>
+            ),
+          };
+        })}
+      />
+    </Modal>
+  );
+};
+
+interface ChooseProjectModalProps {
+  isModalOpen: boolean;
+  setIsModalOpen: (isOpen: boolean) => void;
+}
+
+export default ChooseProjectModal;

src/js/components/Overview/Chart.tsx

@@ -13,17 +13,20 @@ import {
   CHART_TYPE_PIE,
   ChartConfig,
 } from '@/types/chartConfig';
+import { useAppSelector } from '@/hooks';
+import { scopeToUrl } from '@/utils/router';
 
 const Chart = memo(({ chartConfig, data, units, id, isClickable }: ChartProps) => {
   const { t, i18n } = useTranslation();
   const navigate = useNavigate();
+  const { selectedScope } = useAppSelector((state) => state.metadata);
   const translateMap = ({ x, y }: { x: string; y: number }) => ({ x: t(x), y });
   const removeMissing = ({ x }: { x: string }) => x !== 'missing';
   const barChartOnClickHandler = (d: { payload: { x: string } }) => {
-    navigate(`/${i18n.language}/search?${id}=${d.payload.x}`);
+    navigate(`/${i18n.language}${scopeToUrl(selectedScope)}/search?${id}=${d.payload.x}`);
   };
   const pieChartOnClickHandler = (d: { name: string }) => {
-    navigate(`/${i18n.language}/search?${id}=${d.name}`);
+    navigate(`/${i18n.language}${scopeToUrl(selectedScope)}/search?${id}=${d.name}`);
   };
 
   const { chart_type: type } = chartConfig;
@@ -58,7 +61,7 @@ const Chart = memo(({ chartConfig, data, units, id, isClickable }: ChartProps) =
           height={PIE_CHART_HEIGHT}
           preFilter={removeMissing}
           dataMap={translateMap}
-          {...(isClickable ? { onClick: pieChartOnClickHandler } : {})}
+          onClick={pieChartOnClickHandler}
         />
       );
     case CHART_TYPE_CHOROPLETH: {

src/js/components/Overview/Drawer/ChartTree.tsx

@@ -43,7 +43,7 @@ const ChartTree = ({ charts, section }: ChartTreeProps) => {
         ),
         key: id,
       })),
-    [charts, t, td]
+    [charts, dispatch, section, t, td]
   );
 
   const onChartDrop: TreeProps['onDrop'] = useMemo(() => {

src/js/components/Overview/PublicOverview.tsx

@@ -36,7 +36,7 @@ const PublicOverview = () => {
     // Save sections to localStorage when they change
     if (isFetchingOverviewData) return;
     saveToLocalStorage(sections);
-  }, [sections]);
+  }, [isFetchingOverviewData, sections]);
 
   useEffect(() => {
     const activeLanguage = i18n.language;

src/js/components/Provenance/Tables/DistributionsTable.tsx

@@ -60,7 +60,7 @@ const DistributionsTable = ({ distributions }: DistributionsTableProps) => {
           ],
         },
       ] as ColumnsType<Distribution>,
-    [td]
+    [t, td]
   );
 
   return (

src/js/components/Provenance/Tables/ExtraPropertiesTable.tsx

@@ -27,7 +27,7 @@ const ExtraPropertiesTable = ({ extraProperties }: ExtraPropertiesTableProps) =>
             )),
         },
       ] as ColumnsType<ExtraProperty>,
-    [td]
+    [t, td]
   );
 
   return <BaseProvenanceTable dataSource={extraProperties} columns={columns} rowKey="category" />;

src/js/components/Provenance/Tables/PublicationsTable.tsx

@@ -115,7 +115,7 @@ const PublicationsTable = ({ publications }: PublicationsTableProps) => {
           onFilter: (filterValue, p) => p.identifier.identifierSource === filterValue,
         },
       ] as ColumnsType<PrimaryPublication>,
-    [td, publications]
+    [t, td, publications]
   );
 
   return <BaseProvenanceTable dataSource={publications} columns={columns} rowKey="title" />;