feat(variant): SKFP-257 add study name hover in frequency section

kids-first · Jan 13, 2025 · ecb6d6d · ecb6d6d
1 parent f3b9b69
commit ecb6d6d
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 25 deletions.
diff --git a/src/graphql/studies/actions.ts b/src/graphql/studies/actions.ts
@@ -1,10 +1,11 @@
 import { IQueryVariable } from '@ferlab/ui/core/graphql/types';
 import { hydrateResults } from '@ferlab/ui/core/graphql/utils';
+import { INDEXES } from 'graphql/constants';
 
 import useLazyResultQuery from 'hooks/graphql/useLazyResultQuery';
 
-import { IStudyResultTree } from './models';
-import { SEARCH_STUDIES_QUERY } from './queries';
+import { IStudyEntity, IStudyResultTree } from './models';
+import { GET_STUDIES_ENTITY, SEARCH_STUDIES_QUERY } from './queries';
 
 export const useStudies = (variables?: IQueryVariable) => {
   const { loading, result } = useLazyResultQuery<IStudyResultTree>(SEARCH_STUDIES_QUERY, {
@@ -17,3 +18,34 @@ export const useStudies = (variables?: IQueryVariable) => {
     total: result?.study?.hits?.total || 0,
   };
 };
+
+interface IUseStudyEntityProps {
+  field: string;
+  values: string[];
+}
+
+interface IUseStudyEntityReturn {
+  loading: boolean;
+  data?: IStudyEntity[];
+}
+
+export const useStudiesEntity = ({
+  field,
+  values,
+}: IUseStudyEntityProps): IUseStudyEntityReturn => {
+  const sqon = {
+    content: [{ content: { field, value: values, index: INDEXES.STUDIES }, op: 'in' }],
+    op: 'and',
+  };
+
+  const { loading, result } = useLazyResultQuery<IStudyResultTree>(GET_STUDIES_ENTITY, {
+    variables: { sqon },
+  });
+
+  const data = result?.study?.hits?.edges?.map((study) => study.node);
+
+  return {
+    loading,
+    data,
+  };
+};
diff --git a/src/graphql/studies/queries.ts b/src/graphql/studies/queries.ts
@@ -53,3 +53,18 @@ export const GET_STUDY_COUNT = gql`
     }
   }
 `;
+
+export const GET_STUDIES_ENTITY = gql`
+  query searchStudyByCode($sqon: JSON) {
+    study {
+      hits(filters: $sqon) {
+        edges {
+          node {
+            study_code
+            study_name
+          }
+        }
+      }
+    }
+  }
+`;
diff --git a/src/views/VariantEntity/index.tsx b/src/views/VariantEntity/index.tsx
@@ -17,6 +17,7 @@ import {
 } from '@ferlab/ui/core/pages/EntityPage/utils/pathogenicity';
 import { Space, Tag } from 'antd';
 import { ArrangerEdge } from 'graphql/models';
+import { useStudiesEntity } from 'graphql/studies/actions';
 
 import LineStyleIcon from 'components/Icons/LineStyleIcon';
 
@@ -71,6 +72,12 @@ export default function VariantEntity() {
     (e: ArrangerEdge<IVariantStudyEntity>) => e.node,
   );
 
+  const studiesCodes = variantStudies.map((variant: IVariantStudyEntity) => variant.study_code);
+  const studies = useStudiesEntity({
+    field: 'study_code',
+    values: studiesCodes,
+  });
+
   const geneSymbolOfPicked = data?.genes?.hits?.edges?.find((e) =>
     (e.node.consequences || [])?.hits?.edges?.some((e) => e.node?.picked),
   )?.node?.symbol;
@@ -121,7 +128,7 @@ export default function VariantEntity() {
 
         <EntityTable
           id={SectionId.FREQUENCY}
-          columns={getFrequencyItems()}
+          columns={getFrequencyItems(studies.data || [])}
           data={variantStudies}
           title={intl.get('screen.variants.frequencies.frequency')}
           header={intl.get('screen.variants.frequencies.kfStudies')}

diff --git a/src/views/VariantEntity/utils/frequency.tsx b/src/views/VariantEntity/utils/frequency.tsx
@@ -12,6 +12,7 @@ import {
 } from '@ferlab/ui/core/utils/numberUtils';
 import { Button, Space, Tooltip } from 'antd';
 import { INDEXES } from 'graphql/constants';
+import { IStudyEntity } from 'graphql/studies/models';
 import { IVariantEntity, IVariantStudyEntity } from 'graphql/variants/models';
 import { DATA_EXPLORATION_QB_ID } from 'views/DataExploration/utils/constant';
 
@@ -20,33 +21,38 @@ import { STATIC_ROUTES } from 'utils/routes';
 
 import styles from '../index.module.css';
 
-export const getFrequencyItems = (): ProColumnType[] => [
+export const getFrequencyItems = (studies: IStudyEntity[]): ProColumnType[] => [
   {
     dataIndex: 'study_code',
     key: 'study_code',
     title: intl.get('screen.variants.frequencies.studies'),
-    render: (study_code: string) => (
-      <Link
-        to={STATIC_ROUTES.DATA_EXPLORATION_PARTICIPANTS}
-        onClick={() =>
-          addQuery({
-            queryBuilderId: DATA_EXPLORATION_QB_ID,
-            query: generateQuery({
-              newFilters: [
-                generateValueFilter({
-                  field: 'study.study_code',
-                  value: [study_code],
-                  index: INDEXES.PARTICIPANT,
+    render: (study_code: string) => {
+      const study = studies.find((study) => study.study_code === study_code);
+      return (
+        <Tooltip title={study?.study_name}>
+          <Link
+            to={STATIC_ROUTES.DATA_EXPLORATION_PARTICIPANTS}
+            onClick={() =>
+              addQuery({
+                queryBuilderId: DATA_EXPLORATION_QB_ID,
+                query: generateQuery({
+                  newFilters: [
+                    generateValueFilter({
+                      field: 'study.study_code',
+                      value: [study_code],
+                      index: INDEXES.PARTICIPANT,
+                    }),
+                  ],
                 }),
-              ],
-            }),
-            setAsActive: true,
-          })
-        }
-      >
-        {study_code}
-      </Link>
-    ),
+                setAsActive: true,
+              })
+            }
+          >
+            {study_code}
+          </Link>
+        </Tooltip>
+      );
+    },
   },
   {
     title: intl.get('screen.variants.frequencies.participants'),