Merge pull request #3909 from kids-first/feat/SKFP-899-add-variant2-url

feat(variant2): SKFP-899 add url
kids-first · Feb 15, 2024 · ad7b9ac · ad7b9ac
2 parents b708a36 + 37e6421
commit ad7b9ac
Show file tree

Hide file tree

Showing 5 changed files with 105 additions and 3 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -43,8 +43,9 @@ const Community = loadable(() => import('views/Community'), loadableProps);
 const CommunityMember = loadable(() => import('views/Community/Member'), loadableProps);
 const Studies = loadable(() => import('views/Studies'), loadableProps);
 const DataExploration = loadable(() => import('views/DataExploration'), loadableProps);
-const Variants2 = loadable(() => import('views/Variants'), loadableProps);
-const VariantEntity2 = loadable(() => import('views/VariantEntity'), loadableProps);
+const Variants = loadable(() => import('views/Variants'), loadableProps);
+const VariantEntity = loadable(() => import('views/VariantEntity'), loadableProps);
+const VariantEntity2 = loadable(() => import('views/VariantEntity2'), loadableProps);
 const FileEntity = loadable(() => import('views/FileEntity'), loadableProps);
 const ProfileSettings = loadable(() => import('views/Profile/Settings'), loadableProps);
 
@@ -194,13 +195,22 @@ const App = () => {
                     path={STATIC_ROUTES.VARIANTS}
                     element={
                       <ProtectedRoute>
-                        <Variants2 />
+                        <Variants />
                       </ProtectedRoute>
                     }
                   />
 
                   <Route
                     path={DYNAMIC_ROUTES.VARIANT_ENTITY}
+                    element={
+                      <ProtectedRoute>
+                        <VariantEntity />
+                      </ProtectedRoute>
+                    }
+                  />
+
+                  <Route
+                    path={DYNAMIC_ROUTES.VARIANT_ENTITY_2}
                     element={
                       <ProtectedRoute>
                         <VariantEntity2 />

diff --git a/src/locales/en.ts b/src/locales/en.ts
@@ -931,6 +931,7 @@ const en = {
         gnomadGenome311: 'gnomAD Genome (v3.1.1)',
         gnomadGenome312: 'gnomAD Genome (v3.1.2)',
         dbSNP: 'dbSNP',
+        germline: 'Germline',
       },
       consequences: {
         consequence: 'Consequence',
@@ -997,6 +998,9 @@ const en = {
         inheritances: 'Inheritances',
         interpretation: 'Interpretation',
       },
+      conditions: {
+        title: 'Conditions',
+      },
     },
     studies: {
       title: 'Studies',

diff --git a/src/utils/routes.ts b/src/utils/routes.ts
@@ -33,6 +33,7 @@ export enum STATIC_ROUTES {
 export enum DYNAMIC_ROUTES {
   DATA_EXPLORATION = '/data-exploration/:tab?',
   VARIANT_ENTITY = '/variants/:locus?',
+  VARIANT_ENTITY_2 = '/variants2/:locus?',
   FILE_ENTITY = '/files/:file_id?',
   PARTICIPANT_ENTITY = '/participants/:participant_id?',
   STUDY_ENTITY = '/study/:study_id?',

diff --git a/src/views/VariantEntity2/index.module.scss b/src/views/VariantEntity2/index.module.scss
@@ -0,0 +1,10 @@
+@import 'src/style/themes/kids-first/theme.template';
+
+.variantTag {
+  color: $variant-tag-color;
+  background-color: $variant-tag-bg-color;
+}
+
+.titleIcon {
+  font-size: 24px;
+}
diff --git a/src/views/VariantEntity2/index.tsx b/src/views/VariantEntity2/index.tsx
@@ -0,0 +1,77 @@
+import intl from 'react-intl-universal';
+import { useParams } from 'react-router-dom';
+import { IAnchorLink } from '@ferlab/ui/core/components/AnchorMenu';
+import EntityPageWrapper, { EntityTitle } from '@ferlab/ui/core/pages/EntityPage';
+import { Tag } from 'antd';
+import { ArrangerEdge } from 'graphql/models';
+
+import LineStyleIcon from 'components/Icons/LineStyleIcon';
+
+import { useVariantEntity } from '../../graphql/variants/actions';
+import { IVariantStudyEntity } from '../../graphql/variants/models';
+
+import styles from './index.module.scss';
+
+enum SectionId {
+  SUMMARY = 'summary',
+  CONSEQUENCE = 'consequence',
+  FREQUENCY = 'frequency',
+  PATHOGENICITY = 'pathogenicity',
+  CONDITIONS = 'conditions',
+}
+
+export default function VariantEntity() {
+  const { locus } = useParams<{ locus: string }>();
+
+  const links: IAnchorLink[] = [
+    { href: `#${SectionId.SUMMARY}`, title: intl.get('screen.variants.summary.summary') },
+    {
+      href: `#${SectionId.CONSEQUENCE}`,
+      title: intl.get('screen.variants.consequences.consequence'),
+    },
+    { href: `#${SectionId.FREQUENCY}`, title: intl.get('screen.variants.frequencies.frequency') },
+    {
+      href: `#${SectionId.PATHOGENICITY}`,
+      title: intl.get('screen.variants.pathogenicity.pathogenicity'),
+    },
+    {
+      href: `#${SectionId.CONDITIONS}`,
+      title: intl.get('screen.variants.conditions.title'),
+    },
+  ];
+
+  const { data, loading } = useVariantEntity({
+    field: 'locus',
+    values: locus ? [locus] : [],
+  });
+
+  const variantStudies = (data?.studies.hits.edges || []).map(
+    (e: ArrangerEdge<IVariantStudyEntity>) => e.node,
+  );
+
+  return (
+    <EntityPageWrapper
+      pageId="variant-entity-page"
+      links={links}
+      data={data}
+      loading={loading}
+      emptyText={intl.get('no.data.available')}
+    >
+      <>
+        <EntityTitle
+          text={data?.hgvsg}
+          icon={<LineStyleIcon className={styles.titleIcon} />}
+          loading={loading}
+          tag={
+            <>
+              <Tag>{data?.assembly_version}</Tag>
+              <Tag className={styles.variantTag}>
+                {intl.get('screen.variants.summary.germline')}
+              </Tag>
+            </>
+          }
+        />
+      </>
+    </EntityPageWrapper>
+  );
+}