Show variant name and variant group in the navigation panel in Entity…

…Viewer

src/content/app/entity-viewer/variant-view/variant-view-navigation-panel/VariantViewNavigationPanel.tsx

@@ -16,7 +16,11 @@
 
 import React from 'react';
 
-import { getReferenceAndAltAlleles } from 'src/shared/helpers/variantHelpers';
+import {
+  getReferenceAndAltAlleles,
+  getMostSevereVariantConsequence,
+  getVariantGroupLabel
+} from 'src/shared/helpers/variantHelpers';
 
 import { useDefaultEntityViewerVariantQuery } from 'src/content/app/entity-viewer/state/api/entityViewerThoasSlice';
 
@@ -44,14 +48,17 @@ const VariantViewNavigationPanel = (props: Props) => {
     return null;
   }
 
-  const { alleleSequence, isReferenceAlleleActive } = currentData;
+  const { variant, alleleSequence, isReferenceAlleleActive } = currentData;
+
+  const mostSevereVariantConsequence = getMostSevereVariantConsequence(variant);
+  const variantGroupLabel = getVariantGroupLabel(mostSevereVariantConsequence);
 
   return (
     <div className={styles.grid}>
       <VariantViewTab
         viewId="default"
-        tabText="Variant name"
-        labelText="Protein altering variant"
+        tabText={variant.name}
+        labelText={variantGroupLabel}
         pressed={true}
       />
       <VariantViewTab
@@ -153,6 +160,7 @@ const useVariantViewNavigationData = (params: Props) => {
 
   return {
     currentData: {
+      variant: currentData.variant,
       alleleSequence,
       isReferenceAlleleActive
     },

src/shared/helpers/variantHelpers.ts

@@ -82,6 +82,15 @@ export const getVariantGroupCSSColour = (variantType: string) => {
     : undefined;
 };
 
+/**
+ * Given variant consequence (predicted by VEP),
+ * return the name of the group to which it belongs
+ */
+export const getVariantGroupLabel = (variantConsequence: string) => {
+  const variantGroupId = getVariantGroupIdByConsequence(variantConsequence);
+  return variantGroups.find((group) => group.id === variantGroupId)?.label;
+};
+
 const buildVariantConsequenceToGroupIdMap = () => {
   const colourMap = new Map<string, number>();