Vep results table (#1147)

Also:
- Moved the VariantColor component from genome browser directory into the shared directory
  (and renamed it to remove u from colour)
- Created a shared VariantConsequence component that combines the string label of a variant consequence
   with a corresponding colour.
- Updated the ViewInAppPopup component such that:
   a) it uses a button element instead of a span element to wrap around the anchor;
   b) it sets blue colour to children's text

src/content/app/genome-browser/components/drawer/drawer-views/variant-summary/variant-consequence/VariantConsequence.tsx

@@ -16,7 +16,7 @@
 
 import type { Pick2 } from 'ts-multipick';
 
-import VariantColour from 'src/content/app/genome-browser/components/drawer/components/variant-colour/VariantColour';
+import VariantColour from 'src/shared/components/variant-color/VariantColor';
 
 import type { Variant } from 'src/shared/types/variation-api/variant';
 

src/content/app/species/components/species-main-view/SpeciesMainView.module.css

@@ -17,12 +17,6 @@
   padding: 5px 20px var(--global-padding-bottom) 140px;
 }
 
-.exampleLinkText {
-  cursor: pointer;
-  color: var(--color-blue);
-  position: relative;
-}
-
 .pointerBox {
   padding: 6px 12px;
   background: var(--color-black);

src/content/app/species/components/species-main-view/SpeciesMainViewStats.tsx

@@ -58,9 +58,7 @@ type ExampleLinkPopupProps = {
 const ExampleLinkWithPopup = (props: ExampleLinkPopupProps) => {
   return (
     <div className={styles.exampleLink}>
-      <ViewInAppPopup links={props.links}>
-        <span className={styles.exampleLinkText}>{props.children}</span>
-      </ViewInAppPopup>
+      <ViewInAppPopup links={props.links}>{props.children}</ViewInAppPopup>
     </div>
   );
 };

src/content/app/tools/vep/VepPageContent.module.css

@@ -1,4 +1,5 @@
 .grid {
   display: grid;
   grid-template-rows: auto auto 1fr;
+  height: 100%;
 }

src/content/app/tools/vep/VepPageContent.tsx

@@ -20,6 +20,7 @@ import VepAppBar from './components/vep-app-bar/VepAppBar';
 import VepTopBar from './components/vep-top-bar/VepTopBar';
 import VepForm from './views/vep-form/VepForm';
 import VepSpeciesSelector from './views/vep-species-selector/VepSpeciesSelector';
+import VepSubmissionResults from './views/vep-submission-results/VepSubmissionResults';
 import { NotFoundErrorScreen } from 'src/shared/components/error-screen';
 
 import styles from './VepPageContent.module.css';
@@ -38,20 +39,14 @@ const Main = () => {
   return (
     <Routes>
       <Route index={true} element={<VepForm />} />
-      <Route
-        path="species-selector"
-        element={<VepSpeciesSelector />}
-      />
+      <Route path="species-selector" element={<VepSpeciesSelector />} />
       <Route
         path="unviewed-submissions"
         element={<div>List of unviewed submissions</div>}
       />
       <Route path="submissions">
         <Route index={true} element={<div>List of viewed submissions</div>} />
-        <Route
-          path=":submissionId"
-          element={<div>Results of a single VEP analysis</div>}
-        />
+        <Route path=":submissionId" element={<VepSubmissionResults />} />
       </Route>
       <Route path="*" element={<NotFoundErrorScreen />} />
     </Routes>