Vep results pagination (#1165)

- Added the Pagination component to the VEP results view
- Added a dropdown to select the number of variants per page of VEP results
- Updated the Pagination component so that it triggers a change event when user presses the Enter key
   rather than when he just types the number
- Updated styles of the grey bar right above the results (ToolsTopBar, VepTopBar)
- Updated the CircleLoader component by wrapping its rotating element into a static container element.
  This makes it possible to apply CSS transforms to CircleLoader without interfering with the rotation transform
   that makes the loader spin.
- Removed the 'Change' link to the right of SpeciesTabsSlider, by Andrea's request.
   As a consequence, deleted the SpeciesTabsWrapper component whose purpose it was to temporarily
   display the "Change" link to the right of species tabs until species manager was ready

src/content/app/entity-viewer/hooks/useEntityViewerAnalytics.ts

@@ -272,13 +272,6 @@ const useEntityViewerAnalytics = () => {
     });
   };
 
-  const trackSpeciesChange = () => {
-    sendTrackEvent({
-      category: 'app_bar',
-      action: 'change_link_clicked'
-    });
-  };
-
   return {
     trackTabChange,
     trackFiltersPanelOpen,
@@ -297,8 +290,7 @@ const useEntityViewerAnalytics = () => {
     trackExternalLinkClick,
     trackPreviouslyViewedObjectClicked,
     trackSidebarModelOpen,
-    trackSearchSubmission,
-    trackSpeciesChange
+    trackSearchSubmission
   };
 };
 

src/content/app/entity-viewer/shared/components/entity-viewer-app-bar/EntityViewerAppBar.tsx

@@ -15,7 +15,7 @@
  */
 
 import { memo } from 'react';
-import { Link, useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import isEqual from 'lodash/isEqual';
 
 import { useAppSelector } from 'src/store';
@@ -33,13 +33,10 @@ import {
 import { getEnabledCommittedSpecies } from 'src/content/app/species-selector/state/species-selector-general-slice/speciesSelectorGeneralSelectors';
 import { getAllGeneViews } from 'src/content/app/entity-viewer/state/gene-view/view/geneViewViewSelectors';
 
-import useEntityViewerAnalytics from 'src/content/app/entity-viewer/hooks/useEntityViewerAnalytics';
-
 import AppBar, { AppName } from 'src/shared/components/app-bar/AppBar';
 import SpeciesManagerIndicator from 'src/shared/components/species-manager-indicator/SpeciesManagerIndicator';
 import { SelectedSpecies } from 'src/shared/components/selected-species';
 import SpeciesTabsSlider from 'src/shared/components/species-tabs-slider/SpeciesTabsSlider';
-import SpeciesTabsWrapper from 'src/shared/components/species-tabs-wrapper/SpeciesTabsWrapper';
 import { HelpPopupButton } from 'src/shared/components/help-popup';
 
 import type { CommittedItem } from 'src/content/app/species-selector/types/committedItem';
@@ -51,7 +48,6 @@ const EntityViewerAppBar = () => {
   const allActiveEntityIds = useAppSelector(getEntityViewerActiveEntityIds);
   const allGeneViews = useAppSelector(getAllGeneViews) ?? {};
 
-  const { trackSpeciesChange } = useEntityViewerAnalytics();
   const onSpeciesTabClick = (species: CommittedItem) => {
     const genomeId = species.genome_id;
     const genomeIdForUrl = species.genome_tag ?? species.genome_id;
@@ -85,12 +81,7 @@ const EntityViewerAppBar = () => {
   ));
 
   const speciesTabsSlider = (
-    <SpeciesTabsWrapper>
-      <SpeciesTabsSlider>{speciesTabs}</SpeciesTabsSlider>
-      <Link to={urlFor.speciesSelector()} onClick={trackSpeciesChange}>
-        Change
-      </Link>
-    </SpeciesTabsWrapper>
+    <SpeciesTabsSlider>{speciesTabs}</SpeciesTabsSlider>
   );
 
   const mainContent = activeGenomeId

src/content/app/genome-browser/components/browser-app-bar/BrowserAppBar.tsx

@@ -16,10 +16,8 @@
 
 import { memo, useMemo } from 'react';
 import { useSelector } from 'react-redux';
-import { Link } from 'react-router-dom';
 import isEqual from 'lodash/isEqual';
 
-import * as urlFor from 'src/shared/helpers/urlHelper';
 import { AppName as AppNameText } from 'src/global/globalConfig';
 
 import useGenomeBrowserAnalytics from 'src/content/app/genome-browser/hooks/useGenomeBrowserAnalytics';
@@ -31,7 +29,6 @@ import AppBar, { AppName } from 'src/shared/components/app-bar/AppBar';
 import SpeciesManagerIndicator from 'src/shared/components/species-manager-indicator/SpeciesManagerIndicator';
 import { SelectedSpecies } from 'src/shared/components/selected-species';
 import SpeciesTabsSlider from 'src/shared/components/species-tabs-slider/SpeciesTabsSlider';
-import SpeciesTabsWrapper from 'src/shared/components/species-tabs-wrapper/SpeciesTabsWrapper';
 import { HelpPopupButton } from 'src/shared/components/help-popup';
 
 import type { CommittedItem } from 'src/content/app/species-selector/types/committedItem';
@@ -44,8 +41,7 @@ const BrowserAppBar = (props: BrowserAppBarProps) => {
   const enabledCommittedSpecies = useSelector(getEnabledCommittedSpecies);
   const activeGenomeId = useSelector(getBrowserActiveGenomeId);
 
-  const { trackSpeciesChange, trackGenomeChanged } =
-    useGenomeBrowserAnalytics();
+  const { trackGenomeChanged } = useGenomeBrowserAnalytics();
 
   const onSpeciesSelect = (species: CommittedItem) => {
     props.onSpeciesSelect(species.genome_id);
@@ -64,14 +60,7 @@ const BrowserAppBar = (props: BrowserAppBarProps) => {
     ));
   }, [enabledCommittedSpecies.length, activeGenomeId]);
 
-  const tabsSlider = (
-    <SpeciesTabsWrapper>
-      <SpeciesTabsSlider>{speciesTabs}</SpeciesTabsSlider>
-      <Link to={urlFor.speciesSelector()} onClick={trackSpeciesChange}>
-        Change
-      </Link>
-    </SpeciesTabsWrapper>
-  );
+  const tabsSlider = <SpeciesTabsSlider>{speciesTabs}</SpeciesTabsSlider>;
 
   const mainContent = enabledCommittedSpecies.length
     ? tabsSlider

src/content/app/genome-browser/hooks/useGenomeBrowserAnalytics.ts

@@ -190,13 +190,6 @@ const useGenomeBrowserAnalytics = () => {
     });
   };
 
-  const trackSpeciesChange = () => {
-    sendTrackEvent({
-      category: 'app_bar',
-      action: 'change_link_clicked'
-    });
-  };
-
   const trackGenomeChanged = () => {
     sendTrackEvent({
       category: 'app_bar',
@@ -274,7 +267,6 @@ const useGenomeBrowserAnalytics = () => {
     trackDrawerSequenceCopied,
     trackDrawerSequenceDownloaded,
     trackDrawerOpened,
-    trackSpeciesChange,
     trackGenomeChanged,
     trackInterstitialPageNavigation,
     trackInterstitialPageSearch,

src/content/app/tools/blast/components/blast-app-bar/BlastAppBar.tsx

@@ -14,10 +14,6 @@
  * limitations under the License.
  */
 
-import { Link } from 'react-router-dom';
-
-import * as urlFor from 'src/shared/helpers/urlHelper';
-
 import { useAppSelector, useAppDispatch } from 'src/store';
 import useMediaQuery from 'src/shared/hooks/useMediaQuery';
 
@@ -38,7 +34,6 @@ import AppBar, { AppName } from 'src/shared/components/app-bar/AppBar';
 import SpeciesManagerIndicator from 'src/shared/components/species-manager-indicator/SpeciesManagerIndicator';
 import { SelectedSpecies } from 'src/shared/components/selected-species';
 import SpeciesTabsSlider from 'src/shared/components/species-tabs-slider/SpeciesTabsSlider';
-import SpeciesTabsWrapper from 'src/shared/components/species-tabs-wrapper/SpeciesTabsWrapper';
 import { HelpPopupButton } from 'src/shared/components/help-popup';
 
 import { AppName as AppNameText } from 'src/global/globalConfig';
@@ -105,10 +100,7 @@ const BlastAppBar = () => {
       ));
 
   const speciesTabsSlider = (
-    <SpeciesTabsWrapper>
-      <SpeciesTabsSlider>{speciesTabs}</SpeciesTabsSlider>
-      <Link to={urlFor.speciesSelector()}>Change</Link>
-    </SpeciesTabsWrapper>
+    <SpeciesTabsSlider>{speciesTabs}</SpeciesTabsSlider>
   );
 
   return (

src/content/app/tools/shared/components/tools-top-bar/ToolsTopBar.module.css

@@ -1,10 +1,18 @@
-.topBar {
-  min-height: 74px;
-  display: flex;
-  flex-direction: column;
-  background-color: var(--color-light-grey);
-  padding: 24px 30px 20px;
-  box-shadow: 0 3px 5px var(--global-box-shadow-color);
-  position: relative;
-  z-index: 2;
+/*
+  Wrap ToolsTopBar's styles in the components layer
+  to enable overrides from consuming components.
+  (E.g. in the top bar in VEP.)
+*/
+
+@layer components {
+  .topBar {
+    min-height: 74px;
+    display: flex;
+    flex-direction: column;
+    background-color: var(--color-light-grey);
+    padding: 24px 30px 20px;
+    box-shadow: 0 3px 5px var(--global-box-shadow-color);
+    position: relative;
+    z-index: 2;
+  }
 }

src/content/app/tools/shared/components/tools-top-bar/ToolsTopBar.tsx

@@ -14,16 +14,20 @@
  * limitations under the License.
  */
 
+import classNames from 'classnames';
 import type { ReactNode } from 'react';
 
 import styles from './ToolsTopBar.module.css';
 
 type Props = {
   children: ReactNode;
+  className?: string;
 };
 
 const ToolsTopBar = (props: Props) => {
-  return <div className={styles.topBar}>{props.children}</div>;
+  const componentClasses = classNames(styles.topBar, props.className);
+
+  return <div className={componentClasses}>{props.children}</div>;
 };
 
 export default ToolsTopBar;

src/content/app/tools/vep/components/vep-input-summary/VepInputSummary.module.css

@@ -0,0 +1,8 @@
+.label {
+  margin-right: 10px;
+}
+
+.smallLight {
+  font-size: 12px;
+  font-weight: var(--font-weight-light);
+}

src/content/app/tools/vep/components/vep-input-summary/VepInputSummary.tsx

@@ -0,0 +1,58 @@
+/**
+ * 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 classNames from 'classnames';
+
+import type { VepSubmissionWithoutInputFile } from 'src/content/app/tools/vep/types/vepSubmission';
+
+import styles from './VepInputSummary.module.css';
+
+/**
+ * This component appears in a couple of places,
+ * and shows whether the variants for a VEP analysis
+ * were pasted in the textarea of the VEP submission form,
+ * or were appended in a file
+ */
+
+type Props = {
+  submission: VepSubmissionWithoutInputFile;
+  className?: string;
+};
+
+const VepInputSummary = (props: Props) => {
+  const { submission } = props;
+
+  const componentClasses = props.className;
+
+  if (submission.inputText) {
+    return (
+      <span className={classNames(componentClasses, styles.smallLight)}>
+        Pasted data
+      </span>
+    );
+  } else if (submission.inputFileName) {
+    return (
+      <span className={componentClasses}>
+        <span className={classNames(styles.smallLight, styles.label)}>
+          From file
+        </span>
+        <span>{submission.inputFileName}</span>
+      </span>
+    );
+  }
+};
+
+export default VepInputSummary;

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

@@ -26,7 +26,7 @@ import styles from './VepTopBar.module.css';
 
 const VepGenericTopBar = () => {
   return (
-    <ToolsTopBar>
+    <ToolsTopBar className={styles.vepGenericTopBar}>
       <div className={styles.vepGenericGrid}>
         <EnsemblVepLogo />
         <ButtonLink to={urlFor.vepForm()} className={styles.newJobButton}>

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

@@ -1,5 +1,3 @@
-/* FIXME: add max-width: 1800px (via CSS variable) */
-
 .vepFormGrid {
   display: grid;
   align-items: center;
@@ -30,14 +28,20 @@
   }
 }
 
+/* Style overrides for some of the ToolsTopBar styles */
+.vepGenericTopBar {
+  padding-top: 0;
+  padding-bottom: 0;
+  justify-content: center; /* To achieve vertical alignment. ToolsTopBar is a flex box with flex-direction column */
+}
 
 .vepGenericGrid {
   display: grid;
   align-items: center;
   grid-template-columns:
     [vep-logo] max-content
     [new-job-button] max-content
-    [results-availability] auto
+    [results-availability] minmax(0, 1fr)
     [vep-version] auto
     [job-lists-navigation] auto;
   grid-template-areas:
@@ -47,7 +51,7 @@
   white-space: nowrap;
 }
 
-@media (width <= 1500px) {
+@media (width <= 1210px) {
   .vepGenericGrid {
     grid-template-columns:
       [vep-logo] max-content
@@ -57,7 +61,11 @@
     grid-template-areas:
       'vep-logo new-job-button vep-version job-lists-navigation'
       'results-availability results-availability results-availability .';
-    row-gap: 18px;
+    row-gap: 3px;
+  }
+
+  .resultsAvailabilityNotice {
+      justify-self: end;
   }
 }
 
@@ -132,5 +140,7 @@
 
 .resultsAvailabilityNotice {
   grid-area: results-availability;
-  justify-self: end;
+  display: flex;
+  font-weight: var(--font-weight-light);
+  white-space: normal;
 }