Design updates for VEP submission list and results page (#1177)

src/content/app/tools/vep/components/vep-species-name/VepSpeciesName.module.css

@@ -0,0 +1,11 @@
+.speciesName [data-part="common-name"] {
+  font-size: 14px;
+}
+
+.speciesName [data-part="scientific-name"] {
+  font-size: 14px;
+}
+
+.speciesName [data-part="assembly-name"] {
+  font-size: 11px;
+}

src/content/app/tools/vep/components/vep-species-name/VepSpeciesName.tsx

@@ -0,0 +1,35 @@
+/**
+ * See the NOTICE file distributed with this work for additional information
+ * regarding copyright ownership.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import SpeciesName from 'src/shared/components/species-name/SpeciesName';
+import { CommittedItem } from 'src/content/app/species-selector/types/committedItem';
+
+import styles from './VepSpeciesName.module.css';
+
+type SelectedSpeciesProps = Pick<
+  CommittedItem,
+  'common_name' | 'scientific_name' | 'assembly' | 'type' | 'is_reference'
+>;
+export const VepSpeciesName = (props: {
+  selectedSpecies: SelectedSpeciesProps;
+}) => {
+  return (
+    <SpeciesName
+      species={props.selectedSpecies}
+      className={styles.speciesName}
+    />
+  );
+};

src/content/app/tools/vep/components/vep-submission-header/VepSubmissionHeader.module.css

@@ -29,7 +29,7 @@ for ListedVepSubmission, and for the VEP results
 }
 
 .timezone {
-  font-size: 11px;
+  font-size: 10px;
   font-weight: var(--font-weight-light);
 }
 

src/content/app/tools/vep/components/vep-submission-header/VepSubmissionHeader.tsx

@@ -77,7 +77,7 @@ const VepSubmissionHeader = (props: Props) => {
   return (
     <>
       <div className={styles.container}>
-        <div className={styles.light}>Vep analysis</div>
+        <div className={styles.light}>Ensembl VEP analysis</div>
         <div className={styles.submissionId}>
           {hasServerSideSubmissionId(submission) && (
             <>

src/content/app/tools/vep/components/vep-top-bar/EnsemblVepVersion.tsx

@@ -23,7 +23,7 @@ const EnsemblVepVersion = () => {
     <div className={styles.vepVersion}>
       <Logotype />
       <span>Variant effect predictor </span>
-      v111
+      v110
     </div>
   );
 };

src/content/app/tools/vep/components/vep-top-bar/VepFormTopBar.tsx

@@ -38,7 +38,7 @@ import styles from './VepTopBar.module.css';
 
 const VepFormTopBar = () => {
   return (
-    <ToolsTopBar>
+    <ToolsTopBar className={styles.vepFormTopBar}>
       <div className={styles.vepFormGrid}>
         <EnsemblVepLogo />
         <div className={styles.runAJob}>Run a job</div>
@@ -78,7 +78,7 @@ const TranscriptSetSelector = () => {
   const selectedValue = (vepFormParameters.transcript_set as string) ?? 'none';
 
   return (
-    <div>
+    <div className={styles.transcriptSetWrapper}>
       <span>Transcript set</span>
       <SimpleSelect
         options={options}

src/content/app/tools/vep/components/vep-top-bar/VepTopBar.module.css

@@ -12,24 +12,11 @@
   column-gap: 32px;
   max-width: var(--vep-container-max-width);
   white-space: nowrap;
-}
 
-@media (width <= 1440px) {
-  .vepFormGrid {
-    grid-template-columns:
-      [vep-logo] max-content
-      [form-title] 1fr
-      [vep-version] max-content
-      [job-lists-navigation] auto;
-    grid-template-areas:
-      'vep-logo form-title vep-version job-lists-navigation'
-      'transcript-set-and-submit transcript-set-and-submit transcript-set-and-submit transcript-set-and-submit';
-    row-gap: 16px;
-  }
 }
 
 /* Style overrides for some of the ToolsTopBar styles */
-.vepGenericTopBar {
+.vepFormTopBar, .vepGenericTopBar {
   padding-top: 0;
   padding-bottom: 0;
   justify-content: center; /* To achieve vertical alignment. ToolsTopBar is a flex box with flex-direction column */
@@ -51,27 +38,14 @@
   white-space: nowrap;
 }
 
-@media (width <= 1210px) {
-  .vepGenericGrid {
-    grid-template-columns:
-      [vep-logo] max-content
-      [new-job-button] 1fr
-      [vep-version] auto
-      [job-lists-navigation] auto;
-    grid-template-areas:
-      'vep-logo new-job-button vep-version job-lists-navigation'
-      'results-availability results-availability results-availability .';
-    row-gap: 3px;
-  }
-
-  .resultsAvailabilityNotice {
-      justify-self: end;
-  }
+.vepGenericGrid .ensemblLogo {
+  width: 130px;
 }
 
 .logo {
   grid-area: vep-logo;
-  height: 16px;
+  width: 130px;
+  aspect-ratio: 10/1;
 }
 
 .runAJob {
@@ -87,19 +61,9 @@
   column-gap: var(--standard-gutter);
   padding-right: 80px;
 }
-
-@media (width <= 1440px) {
-  .transcriptSetAndSubmit {
-    padding-left: var(--standard-gutter);
-    justify-self: start;
-  }
-}
-
-@media (width <= 1530px) {
-  .transcriptSetAndSubmit {
-    padding-left: var(--standard-gutter);
-    padding-right: clamp(0px, 18% - 80px, 80px);
-  }
+.transcriptSetWrapper {
+  display: flex;
+  align-items: baseline;
 }
 
 .transcriptSetSelector {
@@ -114,6 +78,7 @@
   align-items: baseline;
   white-space: pre;
   color: var(--color-medium-dark-grey);
+  line-height: 1px;
 }
 
 .vepVersion svg {
@@ -144,3 +109,59 @@
   font-weight: var(--font-weight-light);
   white-space: normal;
 }
+
+@media (width > 1440px) {
+  .vepFormGrid {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+}
+
+@media (width <= 1440px) {
+  .vepFormGrid {
+    grid-template-columns:
+      [vep-logo] max-content
+      [form-title] 1fr
+      [vep-version] max-content
+      [job-lists-navigation] auto;
+    grid-template-areas:
+      'vep-logo form-title vep-version job-lists-navigation'
+      'transcript-set-and-submit transcript-set-and-submit transcript-set-and-submit transcript-set-and-submit';
+    row-gap: 8px;
+  }
+
+  .vepFormTopBar {
+    padding-top: 8px;
+    padding-bottom: 8px;
+  }
+
+  .transcriptSetAndSubmit {
+    padding-left: var(--standard-gutter);
+    justify-self: start;
+  }
+}
+
+@media (width <= 1530px) {
+  .transcriptSetAndSubmit {
+    padding-left: var(--standard-gutter);
+    padding-right: clamp(0px, 18% - 80px, 80px);
+  }
+}
+
+@media (width <= 1210px) {
+  .vepGenericGrid {
+    grid-template-columns:
+      [vep-logo] max-content
+      [new-job-button] 1fr
+      [vep-version] auto
+      [job-lists-navigation] auto;
+    grid-template-areas:
+      'vep-logo new-job-button vep-version job-lists-navigation'
+      'results-availability results-availability results-availability .';
+    row-gap: 3px;
+  }
+
+  .resultsAvailabilityNotice {
+      justify-self: end;
+  }
+}

src/content/app/tools/vep/views/vep-form/VepForm.module.css

@@ -62,8 +62,7 @@
   column-gap: var(--column-gap);
   align-items: start;
   min-height: var(--form-section-min-height);
-  padding-top: 26px;
-  padding-bottom: 22px;
+  align-items: center;
 }
 
 .topFormSectionName {

src/content/app/tools/vep/views/vep-form/vep-form-species-section/VepFormSpeciesSection.tsx

@@ -22,7 +22,7 @@ import { useAppSelector } from 'src/store';
 
 import { getSelectedSpecies } from 'src/content/app/tools/vep/state/vep-form/vepFormSelectors';
 
-import SpeciesName from 'src/shared/components/species-name/SpeciesName';
+import { VepSpeciesName } from 'src/content/app/tools/vep/components/vep-species-name/VepSpeciesName';
 import PlusButton from 'src/shared/components/plus-button/PlusButton';
 import TextButton from 'src/shared/components/text-button/TextButton';
 
@@ -37,7 +37,7 @@ export const VepFormSpecies = (props: { className?: string }) => {
 
   return (
     <div className={props.className}>
-      <SpeciesName species={selectedSpecies} />
+      <VepSpeciesName selectedSpecies={selectedSpecies} />
     </div>
   );
 };

src/content/app/tools/vep/views/vep-submission-results/VepSubmissionResults.module.css

@@ -134,3 +134,15 @@
   font-size: 11px;
   font-weight: var(--font-weight-light);
 }
+
+.speciesName [data-part="common-name"] {
+  font-size: 14px;
+}
+
+.speciesName [data-part="scientific-name"] {
+  font-size: 14px;
+}
+
+.speciesName [data-part="assembly-name"] {
+  font-size: 11px;
+}

src/content/app/tools/vep/views/vep-submission-results/VepSubmissionResults.tsx

@@ -202,6 +202,7 @@ const VepResultsHeader = ({
         species={
           species as NonNullable<VepSubmissionWithoutInputFile['species']>
         }
+        className={styles.speciesName}
       />
       <VepInputSummary submission={submission} />
       <div className={styles.perPage}>

src/content/app/tools/vep/views/vep-submissions/listed-vep-submission/ListedVepSubmission.module.css

@@ -13,8 +13,8 @@
   border: 1px solid var(--color-grey);
   padding-left: var(--standard-gutter);
   padding-right: var(--standard-gutter);
-  padding-top: 24px;
-  padding-bottom: 24px;
+  padding-top: 15px;
+  padding-bottom: 15px;
 }
 
 .bodyLoading {
@@ -28,6 +28,7 @@
   grid-template-columns: [species-name] 300px [input-summary] 1fr [status] auto;
   column-gap: var(--standard-gutter);
   align-items: center;
+  min-height: 60px;
 }
 
 .bodyAccepted:has(.submissionName) {
@@ -38,6 +39,7 @@
   grid-column: spinner;
   justify-self: center;
   transform: translateX(calc(50% - 150px));
+  display: grid;
 }
 
 .labelLeft {

src/content/app/tools/vep/views/vep-submissions/listed-vep-submission/ListedVepSubmission.tsx

@@ -19,7 +19,7 @@ import classNames from 'classnames';
 import { isFailedVepSubmission } from 'src/content/app/tools/vep/utils/vepResultsAvailability';
 
 import VepSubmissionHeader from 'src/content/app/tools/vep/components/vep-submission-header/VepSubmissionHeader';
-import SpeciesName from 'src/shared/components/species-name/SpeciesName';
+import { VepSpeciesName } from 'src/content/app/tools/vep/components/vep-species-name/VepSpeciesName';
 import VepInputSummary from 'src/content/app/tools/vep/components/vep-input-summary/VepInputSummary';
 import { CircleLoader } from 'src/shared/components/loader';
 
@@ -33,7 +33,6 @@ type Props = {
 
 const ListedVepSubmission = (props: Props) => {
   const { submission } = props;
-
   if (submission.status === 'SUBMITTING') {
     return <SubmissionInProgress {...props} />;
   } else {
@@ -47,11 +46,13 @@ const SubmissionInProgress = (props: Props) => {
   return (
     <div className={styles.container}>
       <div className={styles.head}>
-        <div className={styles.light}>Vep analysis</div>
+        <div className={styles.light}>Ensembl VEP analysis</div>
       </div>
       <div className={classNames(styles.body, styles.bodyLoading)}>
         <div>
-          {submission.species && <SpeciesName species={submission.species} />}
+          {submission.species && (
+            <VepSpeciesName selectedSpecies={submission.species} />
+          )}
         </div>
         <span className={styles.spinner}>
           <CircleLoader size="small" />
@@ -70,7 +71,9 @@ const SubmissionAccepted = (props: Props) => {
       <VepSubmissionHeader {...props} />
       <div className={classNames(styles.body, styles.bodyAccepted)}>
         <div>
-          {submission.species && <SpeciesName species={submission.species} />}
+          {submission.species && (
+            <VepSpeciesName selectedSpecies={submission.species} />
+          )}
         </div>
         <VepInputSummary submission={submission} />
         <SubmissionName submission={submission} />