Species Selector UI updates (#1140)

- Remove lozenge for species that has been disabled via the "do not use" column - Add disabled species lozenges to the top of species search results page - On species search results page, move the "Close" button to the right of the "Find/Add" button - On species search results page, if no species have been selected before and thus there are no species lozenges to show, show placeholder text instead (same as on species selector main page) - On species search results page, the "Cancel" button is replaced with the CloseButtonWithLabel component - Indented the "Find a species" label above the species search field by 20px to the right (to make it consistent with the "Find a gene" label) - Fixed the flicker that was sometimes visible when the screen changed from species selector home screen to the screen of search results.
Ensembl · May 28, 2024 · b220175 · b220175
1 parent 1df2a43
commit b220175
Show file tree

Hide file tree

Showing 18 changed files with 98 additions and 103 deletions.
diff --git a/src/content/app/species-selector/SpeciesSelector.tsx b/src/content/app/species-selector/SpeciesSelector.tsx
@@ -17,7 +17,7 @@
 import { Route, Routes } from 'react-router-dom';
 
 import SpeciesSelectorAppBar from './components/species-selector-app-bar/SpeciesSelectorAppBar';
-import SpeciesSearchResultsModalAppBar from './components/species-selector-search-results-app-bar/SpeciesSelectorSearchResultsAppBar';
+import SpeciesSearchResultsAppBar from './components/species-selector-search-results-app-bar/SpeciesSelectorSearchResultsAppBar';
 import SpeciesManagerAppBar from './views/species-manager/species-manager-app-bar/SpeciesManagerAppBar';
 import SpeciesSelectorResultsView from './views/species-selector-results-view/SpeciesSelectorResultsView';
 import SpeciesSelectorMainView from './views/species-selector-main-view/SpeciesSelectorMainView';
@@ -30,7 +30,7 @@ const SpeciesSelector = () => {
   const appBar = (
     <Routes>
       <Route index element={<SpeciesSelectorAppBar />} />
-      <Route path="/search" element={<SpeciesSearchResultsModalAppBar />} />
+      <Route path="/search" element={<SpeciesSearchResultsAppBar />} />
       <Route path="/search/gene" element={<SpeciesSelectorAppBar />} />
       <Route path="/manage" element={<SpeciesManagerAppBar />} />
     </Routes>

diff --git a/...elector/components/genome-selector-by-search-query/GenomeSelectorBySearchQuery.module.css b/...elector/components/genome-selector-by-search-query/GenomeSelectorBySearchQuery.module.css
@@ -18,6 +18,10 @@
 
 .searchFieldWrapper {
   grid-area: search-field;
+  display: grid;
+  grid-template-columns: repeat(2, auto);
+  column-gap: 30px;
+  align-items: center;
 }
 
 .resultsSummaryWrapper {

diff --git a/...ecies-selector/components/genome-selector-by-search-query/GenomeSelectorBySearchQuery.tsx b/...ecies-selector/components/genome-selector-by-search-query/GenomeSelectorBySearchQuery.tsx
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { useState, useEffect, useDeferredValue } from 'react';
+import { useState, useLayoutEffect, useDeferredValue } from 'react';
 import { useSearchParams } from 'react-router-dom';
 
 import { useAppSelector } from 'src/store';
@@ -49,7 +49,7 @@ const GenomeSelectorBySearchQuery = (props: Props) => {
   const committedSpecies = useAppSelector(getCommittedSpecies);
   const [searchParams, setSearchParams] = useSearchParams();
   const [searchTrigger, result] = useLazyGetSpeciesSearchResultsQuery();
-  const { currentData, isLoading } = result;
+  const { currentData, isFetching } = result;
 
   const query = searchParams.get('query') as string;
 
@@ -69,7 +69,8 @@ const GenomeSelectorBySearchQuery = (props: Props) => {
 
   const deferredGenomes = useDeferredValue(genomes);
 
-  useEffect(() => {
+  // trigger the query before the component had a chance to render
+  useLayoutEffect(() => {
     searchTrigger({ query });
   }, [query]);
 
@@ -94,7 +95,7 @@ const GenomeSelectorBySearchQuery = (props: Props) => {
     <div className={styles.main}>
       <TopSection
         query={query}
-        isLoading={isLoading}
+        isLoading={isFetching}
         searchResults={currentData}
         canAddGenomes={stagedGenomes.length > 0}
         canSubmitSearch={canSubmitSearch}
@@ -143,7 +144,7 @@ const TopSection = (props: TopSectionProps) => {
           query={props.query}
           canAdd={false}
           onAdd={props.onGenomesAdd}
-          onCancel={props.onClose}
+          onClose={props.onClose}
         />
         <CircleLoader className={styles.loader} />
       </>
@@ -159,7 +160,7 @@ const TopSection = (props: TopSectionProps) => {
             query={props.query}
             canAdd={props.canAddGenomes}
             onAdd={props.onGenomesAdd}
-            onCancel={props.onClose}
+            onClose={props.onClose}
           />
         </div>
         <div className={styles.resultsSummaryWrapper}>
@@ -181,6 +182,7 @@ const TopSection = (props: TopSectionProps) => {
             onInput={props.onSearchInput}
             canSubmit={props.canSubmitSearch}
             onSearchSubmit={props.onSearchSubmit}
+            onClose={props.onClose}
           />
         </div>
         <div className={styles.resultsSummaryWrapper}>

diff --git a/...nents/genome-selector-by-species-taxonomy-id/GenomeSelectorBySpeciesTaxonomyId.module.css b/...nents/genome-selector-by-species-taxonomy-id/GenomeSelectorBySpeciesTaxonomyId.module.css
@@ -15,7 +15,7 @@
   grid-area: top;
   align-items: center;
   justify-self: start;
-  grid-template-columns: [species-image] 60px [genomes-count] auto [add-button] max-content [filter] max-content;
+  grid-template-columns: [species-image] 60px [genomes-count] auto [add-button] max-content [close-button] auto [filter] max-content;
   column-gap: var(--standard-gutter);
   white-space: nowrap;
 }
@@ -41,6 +41,10 @@
   grid-column: add-button;
 }
 
+.closeButton {
+  grid-column: close-button;
+}
+
 .filterWrapper {
   grid-column: filter;
   margin-left: var(--double-standard-gutter);

diff --git a/...r/components/genome-selector-by-species-taxonomy-id/GenomeSelectorBySpeciesTaxonomyId.tsx b/...r/components/genome-selector-by-species-taxonomy-id/GenomeSelectorBySpeciesTaxonomyId.tsx
@@ -15,6 +15,7 @@
  */
 
 import { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
 
 import { useAppSelector } from 'src/store';
 
@@ -31,6 +32,7 @@ import SpeciesSearchResultsTable from 'src/content/app/species-selector/componen
 import GenomesFilterField from 'src/content/app/species-selector/components/genomes-filter-field/GenomesFilterField';
 import { PrimaryButton } from 'src/shared/components/button/Button';
 import { CircleLoader } from 'src/shared/components/loader';
+import { CloseButtonWithLabel } from 'src/shared/components/close-button/CloseButton';
 import InfoPill from 'src/shared/components/info-pill/InfoPill';
 
 import type { SpeciesSearchMatch } from 'src/content/app/species-selector/types/speciesSearchMatch';
@@ -110,11 +112,16 @@ type TopSectionProps = Props & {
 
 const TopSection = (props: TopSectionProps) => {
   const { genomes, stagedGenomes, speciesImageUrl } = props;
+  const navigate = useNavigate();
 
   const onSpeciesAdd = () => {
     props.onSpeciesAdd(stagedGenomes);
   };
 
+  const onClose = () => {
+    navigate(-1);
+  };
+
   const selectedGenomesCount = genomes.filter(
     (genome) => genome.isSelected
   ).length;
@@ -140,6 +147,7 @@ const TopSection = (props: TopSectionProps) => {
       >
         Add
       </PrimaryButton>
+      <CloseButtonWithLabel className={styles.closeButton} onClick={onClose} />
       <div className={styles.filterWrapper}>
         <GenomesFilterField onFilterChange={props.onFilterChange} />
       </div>

diff --git a/src/content/app/species-selector/components/species-search-field/AddSpecies.tsx b/src/content/app/species-selector/components/species-search-field/AddSpecies.tsx
@@ -18,23 +18,23 @@ import classNames from 'classnames';
 
 import ShadedInput from 'src/shared/components/input/ShadedInput';
 import { PrimaryButton } from 'src/shared/components/button/Button';
-import TextButton from 'src/shared/components/text-button/TextButton';
+import { CloseButtonWithLabel } from 'src/shared/components/close-button/CloseButton';
 
 import styles from './SpeciesSearchField.module.css';
 
 export type Props = {
   query: string;
   canAdd: boolean;
   onAdd: () => void;
-  onCancel: () => void;
+  onClose: () => void;
 };
 
 const AddSpecies = (props: Props) => {
-  const { query, canAdd, onAdd, onCancel } = props;
+  const { query, canAdd, onAdd, onClose } = props;
 
   return (
     <div className={styles.grid}>
-      <label>Find a species</label>
+      <label className={styles.label}>Find a species</label>
       <ShadedInput
         size="large"
         className={styles.input}
@@ -45,7 +45,7 @@ const AddSpecies = (props: Props) => {
         <PrimaryButton disabled={!canAdd} onClick={onAdd}>
           Add
         </PrimaryButton>
-        <TextButton onClick={onCancel}>Cancel</TextButton>
+        <CloseButtonWithLabel onClick={onClose} />
       </div>
     </div>
   );

diff --git a/...ontent/app/species-selector/components/species-search-field/SpeciesSearchField.module.css b/...ontent/app/species-selector/components/species-search-field/SpeciesSearchField.module.css
@@ -5,10 +5,16 @@
     'input controls';
   grid-template-columns: 486px max-content;
   row-gap: 10px;
-  column-gap: 45px;
+  column-gap: 30px;
 }
 
-.speciesSearchField label {
+.grid:has(.close) {
+  grid-template-areas:
+    'label . .'
+    'input controls close';
+}
+
+.label {
   grid-area: label;
   margin-left: 20px;
 }
@@ -20,6 +26,7 @@
 .controls {
   grid-area: controls;
   align-self: center;
+  margin-left: 15px;
 }
 
 .submit {
@@ -31,3 +38,8 @@
   align-items: center;
   gap: 30px;
 }
+
+.close {
+  grid-area: close;
+  align-self: center;
+}
diff --git a/src/content/app/species-selector/components/species-search-field/SpeciesSearchField.tsx b/src/content/app/species-selector/components/species-search-field/SpeciesSearchField.tsx
@@ -20,6 +20,7 @@ import classNames from 'classnames';
 
 import ShadedInput from 'src/shared/components/input/ShadedInput';
 import { PrimaryButton } from 'src/shared/components/button/Button';
+import { CloseButtonWithLabel } from 'src/shared/components/close-button/CloseButton';
 
 import styles from './SpeciesSearchField.module.css';
 
@@ -28,10 +29,11 @@ export type Props = {
   onSearchSubmit: (query: string) => void | (() => void);
   canSubmit?: boolean;
   onInput?: ((event: FormEvent<HTMLInputElement>) => void) | (() => void);
+  onClose?: () => void;
 };
 
 export const SpeciesSearchField = (props: Props) => {
-  const { query, onInput, canSubmit = true } = props;
+  const { query, onInput, canSubmit = true, onClose } = props;
 
   const onSubmit = (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
@@ -40,7 +42,7 @@ export const SpeciesSearchField = (props: Props) => {
 
   return (
     <form className={styles.grid} onSubmit={onSubmit}>
-      <label>Find a species</label>
+      <label className={styles.label}>Find a species</label>
       <ShadedInput
         size="large"
         type="search"
@@ -57,6 +59,9 @@ export const SpeciesSearchField = (props: Props) => {
       >
         Find
       </PrimaryButton>
+      {onClose && (
+        <CloseButtonWithLabel className={styles.close} onClick={onClose} />
+      )}
     </form>
   );
 };

diff --git a/...ontent/app/species-selector/components/species-selector-app-bar/SpeciesSelectorAppBar.tsx b/...ontent/app/species-selector/components/species-selector-app-bar/SpeciesSelectorAppBar.tsx
@@ -20,7 +20,7 @@ import { useAppSelector } from 'src/store';
 
 import * as urlFor from 'src/shared/helpers/urlHelper';
 
-import { getCommittedSpecies } from 'src/content/app/species-selector/state/species-selector-general-slice/speciesSelectorGeneralSelectors';
+import { getEnabledCommittedSpecies } from 'src/content/app/species-selector/state/species-selector-general-slice/speciesSelectorGeneralSelectors';
 import { getQuery as readStoredGeneQuery } from 'src/content/app/species-selector/state/species-selector-gene-search-slice/speciesSelectorGeneSearchSelectors';
 
 import AppBar, { AppName } from 'src/shared/components/app-bar/AppBar';
@@ -38,16 +38,16 @@ import styles from './SpeciesSelectorAppBar.module.css';
 export const placeholderMessage =
   'Find and add your favourite species to use them across the site';
 
-const PlaceholderMessage = () => (
+export const PlaceholderMessage = () => (
   <div className={styles.placeholderMessage}>{placeholderMessage}</div>
 );
 
 export const SpeciesSelectorAppBar = () => {
-  const selectedSpecies = useAppSelector(getCommittedSpecies);
+  const enabledCommittedSpecies = useAppSelector(getEnabledCommittedSpecies);
 
   const mainContent =
-    selectedSpecies.length > 0 ? (
-      <AppBarMainContent selectedSpecies={selectedSpecies} />
+    enabledCommittedSpecies.length > 0 ? (
+      <AppBarMainContent selectedSpecies={enabledCommittedSpecies} />
     ) : (
       <PlaceholderMessage />
     );

diff --git a/...components/species-selector-search-results-app-bar/SpeciesSelectorSearchResultsAppBar.tsx b/...components/species-selector-search-results-app-bar/SpeciesSelectorSearchResultsAppBar.tsx
@@ -14,36 +14,40 @@
  * limitations under the License.
  */
 
-import { useNavigate } from 'react-router-dom';
+import { useAppSelector } from 'src/store';
+
+import { getEnabledCommittedSpecies } from 'src/content/app/species-selector/state/species-selector-general-slice/speciesSelectorGeneralSelectors';
 
 import AppBar, { AppName } from 'src/shared/components/app-bar/AppBar';
 import { HelpPopupButton } from 'src/shared/components/help-popup';
-import { CloseButtonWithLabel } from 'src/shared/components/close-button/CloseButton';
+import SpeciesTabsSlider from 'src/shared/components/species-tabs-slider/SpeciesTabsSlider';
+import SelectedSpecies from 'src/shared/components/selected-species/SelectedSpecies';
+import { PlaceholderMessage } from 'src/content/app/species-selector/components/species-selector-app-bar/SpeciesSelectorAppBar';
+
+const SpeciesSearchResultsAppBar = () => {
+  const enabledCommittedSpecies = useAppSelector(getEnabledCommittedSpecies);
+
+  const mainContent = enabledCommittedSpecies.length ? (
+    <SpeciesTabsSlider>
+      {enabledCommittedSpecies.map((species) => (
+        <SelectedSpecies
+          key={species.genome_id}
+          species={species}
+          disabled={true}
+        />
+      ))}
+    </SpeciesTabsSlider>
+  ) : (
+    <PlaceholderMessage />
+  );
 
-const SpeciesSearchResultsModalAppBar = () => {
   return (
     <AppBar
       topLeft={<AppName>Species Selector</AppName>}
-      mainContent={<CloseModalView />}
+      mainContent={mainContent}
       aside={<HelpPopupButton slug="species-selector-intro" />}
     />
   );
 };
 
-const CloseModalView = () => {
-  const navigate = useNavigate();
-
-  const handleClick = () => {
-    navigate(-1);
-  };
-
-  return (
-    <CloseButtonWithLabel
-      label="Find a species"
-      labelPosition="right"
-      onClick={handleClick}
-    />
-  );
-};
-
-export default SpeciesSearchResultsModalAppBar;
+export default SpeciesSearchResultsAppBar;
diff --git a/src/content/app/species/SpeciesPage.module.css b/src/content/app/species/SpeciesPage.module.css
@@ -13,10 +13,6 @@
   padding-left: 30px;
 }
 
-.closeButton {
-  /* margin-left: var(--double-standard-gutter); */
-}
-
 .addSpeciesButton {
   --add-button-icon-color: var(--color-green);
   --add-button-label-color: var(--color-black);

diff --git a/src/content/app/species/components/species-app-bar/SpeciesAppBar.tsx b/src/content/app/species/components/species-app-bar/SpeciesAppBar.tsx
@@ -19,7 +19,7 @@ import { useSelector } from 'react-redux';
 import { AppName as AppNameText } from 'src/global/globalConfig';
 
 import { getActiveGenomeId } from 'src/content/app/species/state/general/speciesGeneralSelectors';
-import { getCommittedSpecies } from 'src/content/app/species-selector/state/species-selector-general-slice/speciesSelectorGeneralSelectors';
+import { getEnabledCommittedSpecies } from 'src/content/app/species-selector/state/species-selector-general-slice/speciesSelectorGeneralSelectors';
 
 import AppBar, { AppName } from 'src/shared/components/app-bar/AppBar';
 import SpeciesManagerIndicator from 'src/shared/components/species-manager-indicator/SpeciesManagerIndicator';
@@ -35,9 +35,9 @@ type SpeciesAppBarProps = {
 
 const SpeciesAppBar = (props: SpeciesAppBarProps) => {
   const activeGenomeId = useSelector(getActiveGenomeId);
-  const species = useSelector(getCommittedSpecies);
+  const enabledCommittedSpecies = useSelector(getEnabledCommittedSpecies);
 
-  const speciesTabs = species.map((species, index) => (
+  const speciesTabs = enabledCommittedSpecies.map((species, index) => (
     <SelectedSpecies
       key={index}
       species={species}