John conroy/replace searchkit

CHANGELOG-replace-searchkit.md

@@ -0,0 +1 @@
+- Replace searchkit.

context/app/routes_main.py

@@ -1,5 +1,5 @@
 from flask import (render_template, current_app, abort,
-                   session, request)
+                   session, request, redirect, url_for)
 
 from .utils import get_default_flask_data, make_blueprint, get_organs
 
@@ -42,28 +42,13 @@ def ccf_eui():
     )
 
 
-@blueprint.route('/search')
-@blueprint.route('/cells-search')
-def search():
-    entity_type = request.args.get('entity_type[0]')
-    title = f'{entity_type}s' if entity_type else 'Search'
-    flask_data = {
-        **get_default_flask_data(),
-        'title': title,
-    }
-    return render_template(
-        'base-pages/react-content.html',
-        title=title,
-        flask_data=flask_data,
-    )
-
-
-@blueprint.route('/test-search/<type>')
-def test_search(type):
+@blueprint.route('/search/<type>')
+def search(type):
     if type not in ['donors', 'samples', 'datasets']:
         abort(404)
-    title = f'{type.capitalize()} Test Search'
+    title = f'{type.capitalize()} Search'
     flask_data = {
+        'type': type,
         **get_default_flask_data(),
         'title': title,
     }
@@ -74,7 +59,14 @@ def test_search(type):
     )
 
 
-@blueprint.route('/dev-search')
+@blueprint.route('/search')
+def search_redirect():
+    entity_type = request.args.get('entity_type[0]')
+    return redirect(
+        url_for('routes_main.search', type=f'{entity_type}s'.lower()))
+
+
+@ blueprint.route('/dev-search')
 def dev_search():
     title = 'Dev Search'
     flask_data = {
@@ -88,7 +80,7 @@ def dev_search():
     )
 
 
-@blueprint.route('/diversity')
+@ blueprint.route('/diversity')
 def vis():
     title = 'Donor Diversity'
     flask_data = {
@@ -102,7 +94,7 @@ def vis():
     )
 
 
-@blueprint.route('/collections')
+@ blueprint.route('/collections')
 def collections():
     flask_data = {**get_default_flask_data()}
     return render_template(
@@ -112,7 +104,7 @@ def collections():
     )
 
 
-@blueprint.route('/publications')
+@ blueprint.route('/publications')
 def publications():
     flask_data = {**get_default_flask_data()}
     return render_template(
@@ -122,7 +114,7 @@ def publications():
     )
 
 
-@blueprint.route('/my-lists')
+@ blueprint.route('/my-lists')
 def my_lists():
     flask_data = {**get_default_flask_data()}
     return render_template(
@@ -132,7 +124,7 @@ def my_lists():
     )
 
 
-@blueprint.route('/my-lists/<saved_list_uuid>')
+@ blueprint.route('/my-lists/<saved_list_uuid>')
 def list_page(saved_list_uuid):
     flask_data = {
         **get_default_flask_data(),
@@ -145,7 +137,7 @@ def list_page(saved_list_uuid):
     )
 
 
-@blueprint.route('/iframe/<path:path>')
+@ blueprint.route('/iframe/<path:path>')
 def iframe_page(path):
     flask_data = {
         **get_default_flask_data(),
@@ -158,7 +150,7 @@ def iframe_page(path):
     )
 
 
-@blueprint.route('/tutorials')
+@ blueprint.route('/tutorials')
 def tutorials():
     flask_data = {
         **get_default_flask_data(),
@@ -170,7 +162,7 @@ def tutorials():
     )
 
 
-@blueprint.route('/tutorials/<tutorial_name>')
+@ blueprint.route('/tutorials/<tutorial_name>')
 def tutorial_detail(tutorial_name):
     flask_data = {
         **get_default_flask_data(),
@@ -183,7 +175,7 @@ def tutorial_detail(tutorial_name):
     )
 
 
-@blueprint.route('/profile')
+@ blueprint.route('/profile')
 def profile():
     flask_data = {**get_default_flask_data()}
     return render_template(

context/app/static/js/components/Header/staticLinks/staticLinks.tsx

@@ -19,6 +19,7 @@ import ExternalImageIcon from 'js/shared-styles/icons/ExternalImageIcon';
 import { entityIconMap } from 'js/shared-styles/icons/entityIconMap';
 import { contactUsUrl } from 'js/shared-styles/Links/ContactUsLink';
 import { DrawerTitle } from 'js/shared-styles/Drawer/styles';
+import { buildSearchLink } from 'js/components/search/store';
 import AuthButton from '../AuthButton';
 
 export const resourceLinks: DrawerSection[] = [
@@ -99,7 +100,9 @@ export const dataLinks: DrawerSection[] = [
       {
         label: 'Datasets',
         description: 'Find datasets by dataset type, organs, pipelines and other metadata.',
-        href: '/search?entity_type[0]=Dataset',
+        href: buildSearchLink({
+          entity_type: 'Dataset',
+        }),
         icon: <entityIconMap.Dataset color="primary" />,
       },
       {
@@ -158,13 +161,17 @@ export const dataLinks: DrawerSection[] = [
       {
         label: 'Samples',
         description: 'Find samples by organ and other metadata, and discover derived datasets.',
-        href: '/search?entity_type[0]=Sample',
+        href: buildSearchLink({
+          entity_type: 'Sample',
+        }),
         icon: <entityIconMap.Sample color="primary" />,
       },
       {
         label: 'Donors',
         description: 'Find donors by age, race and other metadata, and discover derived samples and datasets.',
-        href: '/search?entity_type[0]=Donor',
+        href: buildSearchLink({
+          entity_type: 'Donor',
+        }),
         icon: <entityIconMap.Donor color="primary" />,
       },
     ],

context/app/static/js/components/Routes/Routes.jsx

@@ -11,9 +11,8 @@ const Dataset = lazy(() => import('js/pages/Dataset'));
 const Sample = lazy(() => import('js/pages/Sample'));
 const Collection = lazy(() => import('js/pages/Collection'));
 const Home = lazy(() => import('js/pages/Home/Home'));
-const Search = lazy(() => import('js/pages/search/Search'));
-const CellsSearch = lazy(() => import('js/pages/search/CellsSearch'));
 const DevSearch = lazy(() => import('js/pages/search/DevSearch'));
+const Search = lazy(() => import('js/pages/search/S'));
 const Diversity = lazy(() => import('js/pages/Diversity'));
 const Preview = lazy(() => import('js/pages/Preview'));
 const Publications = lazy(() => import('js/pages/Publications'));
@@ -55,6 +54,7 @@ function Routes({ flaskData }) {
     geneSymbol,
     cell_type: cellId,
     tutorialName,
+    type,
   } = flaskData;
   const urlPath = window.location.pathname;
   const url = window.location.href;
@@ -118,15 +118,7 @@ function Routes({ flaskData }) {
   if (urlPath.startsWith('/search')) {
     return (
       <Route>
-        <Search title={title} />
-      </Route>
-    );
-  }
-
-  if (urlPath.startsWith('/cells-search')) {
-    return (
-      <Route>
-        <CellsSearch title={title} />
+        <Search type={type} />
       </Route>
     );
   }

context/app/static/js/components/detailPage/SupportAlert/SupportAlert.spec.tsx

@@ -1,10 +1,19 @@
 import React from 'react';
 import { render, screen } from 'test-utils/functions';
+import { buildSearchLink } from 'js/components/search/store';
 import SupportAlert from './SupportAlert';
 
 test('The alert links to parent dataset on search page', () => {
   const fakeUUID = 'abc123';
-  const hrefToTest = `/search?descendant_ids[0]=${fakeUUID}&entity_type[0]=Dataset`;
+  const hrefToTest = buildSearchLink({
+    entity_type: 'Dataset',
+    filters: {
+      descendant_ids: {
+        values: [fakeUUID],
+        type: 'TERM',
+      },
+    },
+  });
   render(<SupportAlert uuid={fakeUUID} isSupport />);
 
   expect(screen.getByText('the parent dataset')).toHaveAttribute('href', hrefToTest);

context/app/static/js/components/detailPage/SupportAlert/SupportAlert.tsx

@@ -4,6 +4,7 @@ import { InternalLink } from 'js/shared-styles/Links';
 import Typography from '@mui/material/Typography';
 
 import { DetailPageAlert } from 'js/components/detailPage/style';
+import { buildSearchLink } from 'js/components/search/store';
 
 interface SupportAlertProps {
   uuid: string;
@@ -19,7 +20,17 @@ function SupportAlert({ uuid, isSupport }: SupportAlertProps) {
     <DetailPageAlert severity="warning">
       <Typography variant="body2">
         “Support” entities provide derived, low-level data for visualizations. Navigate to{' '}
-        <InternalLink href={`/search?descendant_ids[0]=${uuid}&entity_type[0]=Dataset`}>
+        <InternalLink
+          href={buildSearchLink({
+            entity_type: 'Dataset',
+            filters: {
+              descendant_ids: {
+                values: [uuid],
+                type: 'TERM',
+              },
+            },
+          })}
+        >
           the parent dataset
         </InternalLink>{' '}
         for a view of this information in context.

context/app/static/js/components/detailPage/derivedEntities/DerivedDatasetsSection/DerivedDatasetsSection.tsx

@@ -4,6 +4,7 @@ import DerivedEntitiesSectionWrapper from 'js/components/detailPage/related-enti
 import RelatedEntitiesTabs from 'js/components/detailPage/related-entities/RelatedEntitiesTabs';
 import RelatedEntitiesSectionActions from 'js/components/detailPage/related-entities/RelatedEntitiesSectionActions';
 import { AllEntityTypes } from 'js/shared-styles/icons/entityIconMap';
+import { buildSearchLink } from 'js/components/search/store';
 import { useDerivedDatasetsSection } from './hooks';
 
 interface DerivedDatasetsSectionProps {
@@ -21,7 +22,17 @@ function DerivedDatasetsSection({ uuid, entityType }: DerivedDatasetsSectionProp
       id="derived-data"
       title="Derived Data"
       action={
-        <RelatedEntitiesSectionActions searchPageHref={`/search?ancestor_ids[0]=${uuid}&entity_type[0]=Dataset`} />
+        <RelatedEntitiesSectionActions
+          searchPageHref={buildSearchLink({
+            entity_type: 'Dataset',
+            filters: {
+              ancestor_ids: {
+                values: [uuid],
+                type: 'TERM',
+              },
+            },
+          })}
+        />
       }
     >
       <RelatedEntitiesTabs

context/app/static/js/components/detailPage/derivedEntities/DerivedEntitiesSection/DerivedEntitiesSection.tsx

@@ -1,9 +1,11 @@
 import React, { useState } from 'react';
+
 import { useFlaskDataContext } from 'js/components/Contexts';
 import RelatedEntitiesSectionWrapper from 'js/components/detailPage/related-entities/RelatedEntitiesSectionWrapper';
 import RelatedEntitiesTabs from 'js/components/detailPage/related-entities/RelatedEntitiesTabs';
 import RelatedEntitiesSectionActions from 'js/components/detailPage/related-entities/RelatedEntitiesSectionActions';
 import { AllEntityTypes } from 'js/shared-styles/icons/entityIconMap';
+import { buildSearchLink } from 'js/components/search/store';
 import { useDerivedEntitiesSection } from './hooks';
 
 const tooltipTexts = {
@@ -27,7 +29,15 @@ function DerivedEntitiesSection() {
       title="Derived Data"
       action={
         <RelatedEntitiesSectionActions
-          searchPageHref={`/search?ancestor_ids[0]=${uuid}&entity_type[0]=${entities[openIndex].entityType}`}
+          searchPageHref={buildSearchLink({
+            entity_type: entities[openIndex].entityType,
+            filters: {
+              ancestor_ids: {
+                values: [uuid],
+                type: 'TERM',
+              },
+            },
+          })}
         />
       }
     >

context/app/static/js/components/detailPage/provenance/ProvTableDerivedLink/ProvTableDerivedLink.tsx

@@ -1,23 +1,37 @@
 import React from 'react';
 
 import { useTrackEntityPageEvent } from 'js/components/detailPage/useTrackEntityPageEvent';
+import { buildSearchLink } from 'js/components/search/store';
+import { ESEntityType } from 'js/components/types';
 import { LinkButton } from './style';
 
 interface ProvTableDerivedLinkProps {
   uuid: string;
-  type: string;
+  type: ESEntityType;
 }
 
 function ProvTableDerivedLink({ uuid, type }: ProvTableDerivedLinkProps) {
   const trackEntityPageEvent = useTrackEntityPageEvent();
-  return (
-    <LinkButton
-      href={`/search?ancestor_ids[0]=${uuid}&entity_type[0]=${type}`}
-      onClick={() => trackEntityPageEvent({ action: `Provenance / Table / View Derived ${type}s`, label: uuid })}
-    >
-      View Derived {type}s
-    </LinkButton>
-  );
+
+  if (type === 'Sample' || type === 'Dataset') {
+    return (
+      <LinkButton
+        href={buildSearchLink({
+          entity_type: type,
+          filters: {
+            ancestor_ids: {
+              values: [uuid],
+              type: 'TERM',
+            },
+          },
+        })}
+        onClick={() => trackEntityPageEvent({ action: `Provenance / Table / View Derived ${type}s`, label: uuid })}
+      >
+        View Derived {type}s
+      </LinkButton>
+    );
+  }
+  return null;
 }
 
 export default ProvTableDerivedLink;

context/app/static/js/components/home/EntityCounts/EntityCounts.tsx

@@ -2,10 +2,14 @@ import React from 'react';
 
 import EntityCount from 'js/components/home/EntityCount';
 import { DatasetIcon, SampleIcon, DonorIcon, CollectionIcon, OrganIcon } from 'js/shared-styles/icons';
+import { buildSearchLink } from 'js/components/search/store';
 import { useEntityCounts } from './hooks';
 import { Background, FlexContainer, StyledSvgIcon } from './style';
 
-const entities = [
+const entities: {
+  icon: typeof DonorIcon;
+  entity_type: 'Donor' | 'Sample' | 'Dataset';
+}[] = [
   {
     icon: DonorIcon,
     entity_type: 'Donor',
@@ -37,7 +41,9 @@ function EntityCounts({ organsCount }: EntityCountsProps) {
             }
             count={entityCounts?.[entity_type]}
             label={`${entity_type}s`}
-            href={`/search?entity_type[0]=${entity_type}`}
+            href={buildSearchLink({
+              entity_type,
+            })}
           />
         ))}
         <EntityCount