[Platform]: Add DisplayVariantId component

apps/platform/src/pages/VariantPage/Header.tsx

@@ -1,7 +1,6 @@
 import { faMapPin } from "@fortawesome/free-solid-svg-icons";
-import { Header as HeaderBase, XRefLinks } from "ui";
+import { Header as HeaderBase, XRefLinks, DisplayVariantId } from "ui";
 import { VariantPageDataType } from "./types";
-import DisplayVariantId from "./DisplayVariantId";
 
 const xrefsToDisplay = {
   ensembl_variation: {

packages/sections/src/variant/InSilicoPredictors/Body.tsx

@@ -58,7 +58,13 @@ export function Body({ id, entity }: BodyProps) {
       definition={definition}
       request={request}
       entity={entity}
-      renderDescription={() => <Description variantId={id} />}
+      renderDescription={({ variant }) => (
+        <Description
+          variantId={variant.variantId}
+          referenceAllele={variant.referenceAllele}
+          alternateAllele={variant.alternateAllele}
+        />
+      )}
       renderBody={({ variant }) => {
         const rows = [...variant.inSilicoPredictors].sort((row1, row2) => {
           return row1.method.localeCompare(row2.method);

packages/sections/src/variant/InSilicoPredictors/Description.tsx

@@ -1,13 +1,23 @@
-import { Link } from "ui";
+import { Link, DisplayVariantId } from "ui";
 
 type DescriptionProps = {
   variantId: string;
+  referenceAllele: string;
+  alternateAllele: string;
 };
 
-function Description({ variantId }: DescriptionProps) {
+function Description({ variantId, referenceAllele, alternateAllele }: DescriptionProps) {
   return (
     <>
-      Predicted functional effect of <strong>{variantId}</strong>. Source:{" "}
+      Predicted functional effect of{" "}
+      <strong>
+        <DisplayVariantId
+          variantId={variantId}
+          referenceAllele={referenceAllele}
+          alternateAllele={alternateAllele}
+        />
+      </strong>
+      . Source:{" "}
       <Link to="https://www.ensembl.org/info/docs/tools/vep/index.html" external>
         VEP
       </Link>

packages/sections/src/variant/InSilicoPredictors/InSilicoPredictorsQuery.gql

@@ -7,5 +7,7 @@ query InSilicoPredictorsQuery($variantId: String!) {
       score
       assessmentFlag
     }
+    referenceAllele
+    alternateAllele
   }
 }

packages/sections/src/variant/VariantEffectPredictor/Body.tsx

@@ -127,7 +127,13 @@ export function Body({ id, entity }: BodyProps) {
       definition={definition}
       request={request}
       entity={entity}
-      renderDescription={() => <Description variantId={id} />}
+      renderDescription={({ variant }) => (
+        <Description
+          variantId={variant.variantId}
+          referenceAllele={variant.referenceAllele}
+          alternateAllele={variant.alternateAllele}
+        />
+      )}
       renderBody={({ variant }) => {
         return (
           <DataTable

packages/sections/src/variant/VariantEffectPredictor/Description.tsx

@@ -1,13 +1,22 @@
-import { Link } from "ui";
+import { Link, DisplayVariantId } from "ui";
 
 type DescriptionProps = {
   variantId: string;
+  referenceAllele: string;
+  alternateAllele: string;
 };
 
-function Description({ variantId }: DescriptionProps) {
+function Description({ variantId, referenceAllele, alternateAllele }: DescriptionProps) {
   return (
     <>
-      Variant consequence prediction for <strong>{variantId}</strong>. {" "}Source:{" "}
+      Variant consequence prediction for{" "}
+      <strong>
+        <DisplayVariantId
+          variantId={variantId}
+          referenceAllele={referenceAllele}
+          alternateAllele={alternateAllele}
+        />
+      </strong>. {" "}Source:{" "}
       <Link to="https://www.ensembl.org/info/docs/tools/vep/index.html" external>
         VEP
       </Link>

packages/sections/src/variant/VariantEffectPredictor/VariantEffectPredictorQuery.gql

@@ -1,5 +1,6 @@
 query VariantEffectPredictorQuery($variantId: String!) {
   variant(variantId: $variantId){
+    variantId
     transcriptConsequences {
       variantConsequences {
         id
@@ -22,5 +23,7 @@ query VariantEffectPredictorQuery($variantId: String!) {
       siftPrediction
       polyphenPrediction
     }
+    referenceAllele
+    alternateAllele
   }
 }

apps/platform/src/pages/VariantPage/DisplayVariantId.tsx → packages/ui/src/components/DisplayVariantId.tsx

@@ -70,12 +70,13 @@ function DisplayVariantId({
     return (
       <>
         <Box
+          component="span"
           onClick={handleClick}
           title="Show variant ID"
           sx={{
             cursor: "pointer",
-            padding: "0 2px",
-            borderRadius: "8px",
+            padding: "0 0.06em",
+            borderRadius: "0.3em",
             "&:hover": {
               background: highlightBackground,
             }
@@ -154,10 +155,10 @@ function DisplayVariantId({
 function HighlightBox({ children }) {
   return (
     <Box
-      display="inline-block"
-      borderRadius={5}
-      mx={0.5}
-      px={0.5}
+      component="span"
+      borderRadius="0.3em"
+      mx="0.1em"
+      px="0.15em"
       bgcolor={highlightBackground}
     >
       {children}

packages/ui/src/components/Section/SectionItem.jsx

@@ -8,9 +8,9 @@ import {
   Grid,
   LinearProgress,
   Typography,
+  Skeleton,
 } from "@mui/material";
 import { Element } from "react-scroll";
-
 import ErrorBoundary from "../ErrorBoundary";
 import Chip from "../Chip";
 import SectionError from "./SectionError";
@@ -73,14 +73,19 @@ function SectionItem({
                   </Grid>
                 }
                 subheader={
-                  <Typography
-                    className={classNames(classes.description, classes.descriptionHasData, {
-                      [classes.descriptionError]: error,
-                    })}
-                    variant="body2"
-                  >
-                    {renderDescription(data)}
-                  </Typography>
+                  !loading && hasData ? (
+                    <Typography
+                      className={classNames(classes.description, classes.descriptionHasData, {
+                        [classes.descriptionError]: error,
+                      })}
+                      variant="body2"
+                      component="div"
+                    >
+                      {renderDescription(data)}
+                    </Typography>
+                  ) : (
+                    <Skeleton width="50vw" height="20px" />
+                  )
                 }
                 action={tags}
               />

packages/ui/src/index.tsx

@@ -14,6 +14,7 @@ export { default as ChipList } from "./components/ChipList";
 export { default as TooltipStyledLabel } from "./components/TooltipStyledLabel";
 export { default as DirectionOfEffectIcon } from "./components/DirectionOfEffectIcon";
 export { default as DirectionOfEffectTooltip } from "./components/DirectionOfEffectTooltip";
+export { default as DisplayVariantId } from "./components/DisplayVariantId";
 export { default as LabelChip } from "./components/LabelChip";
 export { default as BasePage } from "./components/BasePage";
 export { default as NewChip } from "./components/NewChip";