feat: new search UI

package.json

@@ -24,6 +24,7 @@
     "bento-auth-js": "^7.2.0",
     "bento-charts": "~2.13.1",
     "dotenv": "^16.3.1",
+    "file-saver": "^2.0.5",
     "i18next": "^24.2.3",
     "i18next-browser-languagedetector": "^8.0.4",
     "i18next-http-backend": "^3.0.2",
@@ -42,6 +43,7 @@
     "redux-thunk": "^2.4.1"
   },
   "devDependencies": {
+    "@types/file-saver": "^2.0.7",
     "@types/json-schema": "^7.0.15",
     "@types/react-dom": "^18.3.1",
     "@typescript-eslint/eslint-plugin": "^7.16.1",

src/js/components/Beacon/BeaconCommon/AssemblyIdSelect.tsx

@@ -8,7 +8,7 @@ const AssemblyIdSelect = ({ field, beaconAssemblyIds, disabled }: AssemblyIdSele
 
   return (
     <Form.Item name={field.name} label={t(field.name)} rules={field.rules}>
-      <Select style={{ width: '100%' }} disabled={disabled} options={assemblyIdOptions} />
+      <Select className="w-full" disabled={disabled} options={assemblyIdOptions} />
     </Form.Item>
   );
 };

src/js/components/Beacon/BeaconCommon/BeaconQueryFormUi.tsx

@@ -19,14 +19,7 @@ import type {
   BeaconPayloadFilter,
   PayloadVariantsQuery,
 } from '@/types/beacon';
-import { BOX_SHADOW } from '@/constants/overviewConstants';
-import {
-  FORM_ROW_GUTTERS,
-  CARD_STYLE,
-  BUTTON_AREA_STYLE,
-  BUTTON_STYLE,
-  CARD_STYLES,
-} from '@/constants/beaconConstants';
+import { FORM_ROW_GUTTERS, BUTTON_AREA_STYLE, BUTTON_STYLE, CARD_STYLES } from '@/constants/beaconConstants';
 import { T_PLURAL_COUNT } from '@/constants/i18n';
 
 const STARTER_FILTER = { index: 0, searchFieldId: null };
@@ -231,15 +224,15 @@ const BeaconQueryFormUi = ({
 
   return (
     <div className="container margin-auto" style={{ paddingBottom: 8 }}>
-      <Card title={t('Search')} style={{ borderRadius: '10px', width: '100%', ...BOX_SHADOW }} styles={CARD_STYLES}>
+      <Card title={t('Search')} className="w-full shadow rounded-xl" styles={CARD_STYLES}>
         <p style={{ margin: '-8px 0 8px 0', padding: '0', color: 'grey' }}>{t(uiInstructions)}</p>
         <Form form={form} onFinish={handleFinish} layout="vertical" onValuesChange={handleValuesChange}>
           <Row gutter={FORM_ROW_GUTTERS}>
             {hasVariants && (
               <Col xs={24} lg={12}>
                 <Card
                   title={t('entities.variant', T_PLURAL_COUNT)}
-                  style={CARD_STYLE}
+                  className="shadow h-full"
                   styles={CARD_STYLES}
                   extra={
                     <SearchToolTip>
@@ -258,7 +251,7 @@ const BeaconQueryFormUi = ({
                     <>{t('Metadata')}</>
                   </div>
                 }
-                style={CARD_STYLE}
+                className="shadow h-full"
                 styles={CARD_STYLES}
                 extra={
                   <SearchToolTip>

src/js/components/Beacon/BeaconCommon/Filter.tsx

@@ -15,7 +15,6 @@ import type {
 } from '@/types/beacon';
 
 const FILTER_FORM_ITEM_STYLE = { flex: 1, marginInlineEnd: -1 };
-const FILTER_FORM_ITEM_INNER_STYLE = { width: '100%' };
 
 const Filter = ({
   filter,
@@ -74,7 +73,7 @@ const Filter = ({
       >
         <Select
           placeholder={t('select a search field')}
-          style={FILTER_FORM_ITEM_INNER_STYLE}
+          className="w-full"
           onSelect={handleSelectKey}
           options={searchKeyOptions(beaconFiltersBySection)}
         />
@@ -84,10 +83,7 @@ const Filter = ({
         rules={[{ required: isRequired, message: t('value required') }]}
         style={FILTER_FORM_ITEM_STYLE}
       >
-        <Select
-          style={FILTER_FORM_ITEM_INNER_STYLE}
-          options={valueOptions.map(({ label, value }) => ({ label: t(label), value }))}
-        />
+        <Select className="w-full" options={valueOptions.map(({ label, value }) => ({ label: t(label), value }))} />
       </Form.Item>
       <Button onClick={() => removeFilter(filter)}>
         <CloseOutlined />

src/js/components/Beacon/BeaconNetwork/NetworkNodeDetails/NodeDetails.tsx

@@ -3,7 +3,6 @@ import { Card, Tag, Tooltip, Typography } from 'antd';
 import { LinkOutlined } from '@ant-design/icons';
 import type { NetworkBeacon } from '@/types/beaconNetwork';
 import type { FlattenedBeaconResponse } from '@/types/beacon';
-import { BOX_SHADOW } from '@/constants/overviewConstants';
 import NodeCountsDisplay from './NodeCountsDisplay';
 import { useTranslationFn } from '@/hooks';
 
@@ -56,7 +55,7 @@ const NodeDetails = ({ beacon, response }: NodeDetailsProps) => {
   return (
     <Card
       title={logoAndName}
-      style={BOX_SHADOW}
+      className="shadow"
       styles={{
         body: { flexGrow: 1, minHeight: CARD_BODY_MIN_HEIGHT },
         actions: { display: 'flex', alignItems: 'center' },

src/js/components/Beacon/BeaconNetwork/NetworkSearchResults.tsx

@@ -58,6 +58,7 @@ const NetworkSearchResults = () => {
       results={networkResults}
       resultsTitle={t('beacon.network_search_results')}
       resultsExtra={resultsExtra}
+      style={{ marginBottom: 8 }}
     />
   );
 };

src/js/components/Beacon/BeaconQueryUi.tsx

@@ -14,7 +14,6 @@ const BeaconQueryUi = () => {
     <Loader />
   ) : (
     <div style={WRAPPER_STYLE}>
-      <BeaconSearchResults />
       <BeaconQueryFormUi
         isFetchingQueryResponse={WAITING_STATES.includes(queryStatus)}
         isNetworkQuery={false}
@@ -23,6 +22,7 @@ const BeaconQueryUi = () => {
         apiErrorMessage={apiErrorMessage}
         beaconFiltersBySection={beaconFilters}
       />
+      <BeaconSearchResults />
     </div>
   );
 };

src/js/components/BentoAppRouter.tsx

@@ -21,7 +21,13 @@ import { BEACON_UI_ENABLED, BEACON_NETWORK_ENABLED } from '@/config';
 import { WAITING_STATES } from '@/constants/requests';
 import { RequestStatus } from '@/types/requests';
 import { BentoRoute } from '@/types/routes';
-import { scopeEqual, validProjectDataset } from '@/utils/router';
+import {
+  getPathPageIndex,
+  langAndScopeSelectionToUrl,
+  pathParts,
+  scopeEqual,
+  validProjectDataset,
+} from '@/utils/router';
 
 import PublicOverview from './Overview/PublicOverview';
 import Search from './Search/Search';
@@ -54,7 +60,7 @@ const ScopedRoute = () => {
     // If the URL scope is valid, store the scope in the Redux store.
     // We have two subcases here:
     //  - If the validated scope matches the URL parameters, nothing needs to be done
-    //  - No parameters have been supplied and we have a single-dataset node, in which case we want to keep the "clean"
+    //  - No parameters have been supplied, and we have a single-dataset node, in which case we want to keep the "clean"
     //    / blank URL to avoid visual clutter.
     if (
       (datasetId === valid.scope.dataset && projectId === valid.scope.project) ||
@@ -66,25 +72,12 @@ const ScopedRoute = () => {
 
     // Otherwise: validated scope does not match our desired URL params, so we need to re-locate to a valid path.
 
-    const oldPath = location.pathname.split('/').filter(Boolean);
-    const newPath = [oldPath[0]];
-
-    // If we have >1 dataset, we need the URL to match the validated scope, so we create a new path and go there.
-    // Otherwise (with 1 dataset), keep URL as clean as possible - with no IDs present at all.
-    if (!isFixedProjectAndDataset) {
-      if (valid.scope.dataset) {
-        newPath.push('p', valid.scope.project as string, 'd', valid.scope.dataset);
-      } else if (valid.scope.project) {
-        newPath.push('p', valid.scope.project);
-      }
-    }
+    const oldPath = pathParts(location.pathname);
+    const oldPathPageIdx = getPathPageIndex(oldPath);
+    const newPathSuffix = oldPath.slice(oldPathPageIdx).join('/');
+    const newPath = langAndScopeSelectionToUrl(oldPath[0], valid, newPathSuffix);
 
-    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 });
+    navigate(newPath, { replace: true });
   }, [projectsByID, projectsStatus, projectId, datasetId, dispatch, navigate, selectedScope]);
 
   return <Outlet />;
@@ -155,7 +148,7 @@ const BentoAppRouter = () => {
         <Route path="/" element={<ScopedRoute />}>
           <Route index element={<PublicOverview />} />
           <Route path={BentoRoute.Overview} element={<PublicOverview />} />
-          <Route path={BentoRoute.Search} element={<Search />} />
+          <Route path={`${BentoRoute.Search}/:page?`} element={<Search />} />
           {BentoRoute.Beacon && <Route path={BentoRoute.Beacon} element={<BeaconQueryUi />} />}
           {/* Beacon network is only available at the top level - scoping does not make sense for it. */}
           {BentoRoute.BeaconNetwork && <Route path={BentoRoute.BeaconNetwork} element={<NetworkUi />} />}
@@ -165,15 +158,15 @@ const BentoAppRouter = () => {
         <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.Search}/:page?`} element={<Search />} />
           {BentoRoute.Beacon && <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.Search}/:page?`} element={<Search />} />
           {BentoRoute.Beacon && <Route path={BentoRoute.Beacon} element={<BeaconQueryUi />} />}
           <Route path={BentoRoute.Provenance} element={<ProvenanceTab />} />
         </Route>

src/js/components/ClinPhen/TimeElementDisplay.tsx

@@ -1,6 +1,6 @@
 import { memo } from 'react';
 
-import { EM_DASH } from '@/constants/contentConstants';
+import { EM_DASH } from '@/constants/common';
 import type {
   TimeElement,
   TimeElementAge,

src/js/components/Overview/AboutBox.tsx

@@ -2,13 +2,10 @@ import { type CSSProperties, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Card, Divider, Skeleton } from 'antd';
 
-import { BOX_SHADOW } from '@/constants/overviewConstants';
 import { useAppSelector } from '@/hooks';
 import { useSmallScreen } from '@/hooks/useResponsiveContext';
 import { RequestStatus } from '@/types/requests';
 
-const ABOUT_CARD_STYLE: CSSProperties = { borderRadius: '11px', ...BOX_SHADOW };
-
 const AboutBox = ({ style, bottomDivider }: { style?: CSSProperties; bottomDivider?: boolean }) => {
   const { i18n } = useTranslation();
 
@@ -20,7 +17,7 @@ const AboutBox = ({ style, bottomDivider }: { style?: CSSProperties; bottomDivid
   // If about is blank after loading, we don't have anything - so don't render the box.
   return aboutStatus === RequestStatus.Fulfilled && !aboutContent ? null : (
     <>
-      <Card className="container" style={{ ...ABOUT_CARD_STYLE, ...(style ?? {}) }}>
+      <Card className="container shadow rounded-xl" style={style}>
         {aboutStatus === RequestStatus.Idle || aboutStatus === RequestStatus.Pending ? (
           <Skeleton title={false} paragraph={{ rows: 2 }} />
         ) : (

src/js/components/Overview/ChartCard.tsx

@@ -4,12 +4,12 @@ import { Button, Card, Row, Space, Tooltip } from 'antd';
 import { CloseOutlined } from '@ant-design/icons';
 import Chart from './Chart';
 import CustomEmpty from '../Util/CustomEmpty';
-import { BOX_SHADOW, CHART_HEIGHT } from '@/constants/overviewConstants';
+import { CHART_HEIGHT } from '@/constants/overviewConstants';
 import { useElementWidth, useTranslationFn } from '@/hooks';
 import type { ChartDataField } from '@/types/data';
 import SmallChartCardTitle from '@/components/Util/SmallChartCardTitle';
 
-const CARD_STYLE: CSSProperties = { height: '415px', borderRadius: '11px', ...BOX_SHADOW };
+const CARD_STYLE: CSSProperties = { height: '415px' };
 const ROW_EMPTY_STYLE: CSSProperties = { height: `${CHART_HEIGHT}px` };
 
 const ChartCard = memo(({ section, chart, onRemoveChart, searchable }: ChartCardProps) => {
@@ -39,6 +39,7 @@ const ChartCard = memo(({ section, chart, onRemoveChart, searchable }: ChartCard
         title={
           <SmallChartCardTitle title={t(title)} description={t(description)} descriptionStyle={{ width: '375px' }} />
         }
+        className="shadow rounded-xl"
         style={CARD_STYLE}
         size="small"
         extra={

src/js/components/Overview/Counts.tsx

@@ -4,16 +4,15 @@ import { ExperimentOutlined, TeamOutlined } from '@ant-design/icons';
 import { BiDna } from 'react-icons/bi';
 
 import CountsTitleWithHelp from '@/components/Util/CountsTitleWithHelp';
-import { BOX_SHADOW, COUNTS_FILL } from '@/constants/overviewConstants';
+import { COUNTS_FILL } from '@/constants/overviewConstants';
 import { WAITING_STATES } from '@/constants/requests';
-import { NO_RESULTS_DASHES } from '@/constants/searchConstants';
+import { NO_RESULTS_DASHES } from '@/features/search/constants';
 import { useAppSelector, useTranslationFn } from '@/hooks';
 import { useCanSeeUncensoredCounts } from '@/hooks/censorship';
 import type { BentoEntity } from '@/types/entities';
 
 const styles: Record<string, CSSProperties> = {
   countCard: {
-    ...BOX_SHADOW,
     minWidth: 150,
     transition: 'height 0.3s ease-in-out',
   },
@@ -54,7 +53,7 @@ const Counts = () => {
       <Typography.Title level={3}>{t('Counts')}</Typography.Title>
       <Space wrap>
         {data.map(({ entity, icon, count }, i) => (
-          <Card key={i} style={{ ...styles.countCard, height: waitingForData ? 138 : 114 }}>
+          <Card key={i} className="shadow" style={{ ...styles.countCard, height: waitingForData ? 138 : 114 }}>
             <Statistic
               title={<CountsTitleWithHelp entity={entity} />}
               value={count || (uncensoredCounts ? count : NO_RESULTS_DASHES)}

src/js/components/Overview/LastIngestion.tsx

@@ -5,7 +5,6 @@ import { useTranslation } from 'react-i18next';
 
 import { T_PLURAL_COUNT } from '@/constants/i18n';
 import { WAITING_STATES } from '@/constants/requests';
-import { BOX_SHADOW } from '@/constants/overviewConstants';
 import { useDataTypes } from '@/features/dataTypes/hooks';
 import type { BentoServiceDataType } from '@/types/dataTypes';
 import { useTranslationFn } from '@/hooks';
@@ -25,7 +24,7 @@ const formatDate = (dateString: string, language: string) => {
 };
 
 const LastIngestionSkeleton = () => (
-  <Card style={BOX_SHADOW}>
+  <Card className="shadow">
     <Space direction="vertical">
       <Typography.Text style={{ color: 'rgba(0,0,0,0.45)' }}>
         <Skeleton active={true} title={{ width: 100, style: { margin: 0 } }} paragraph={false} />
@@ -46,7 +45,7 @@ const LastIngestionSkeleton = () => (
 const LastIngestionDataType = ({ dataType }: { dataType: BentoServiceDataType }) => {
   const { t, i18n } = useTranslation();
   return (
-    <Card style={BOX_SHADOW} key={dataType.id}>
+    <Card className="shadow" key={dataType.id}>
       <Space direction="vertical">
         <Typography.Text style={{ color: 'rgba(0,0,0,0.45)' }}>
           {t(`entities.${dataType.id}`, T_PLURAL_COUNT)}