Variation search

src/content/app/entity-viewer/gene-view/components/gene-view-sidebar/overview/GeneOverview.module.css

@@ -85,6 +85,6 @@
   padding: 15px;
 }
 
-.geneSearchButton {
+.searchButton {
   margin: 30px 0 20px;
 }

src/content/app/entity-viewer/gene-view/components/gene-view-sidebar/overview/GeneOverview.tsx

@@ -24,7 +24,6 @@ import { useAppDispatch } from 'src/store';
 import GenePublications from '../publications/GenePublications';
 import MainAccordion from './MainAccordion';
 import ExternalReference from 'src/shared/components/external-reference/ExternalReference';
-import GeneSearchButton from 'src/shared/components/gene-search-button/GeneSearchButton';
 
 import {
   openSidebarModal,
@@ -33,6 +32,7 @@ import {
 } from 'src/content/app/entity-viewer/state/sidebar/entityViewerSidebarSlice';
 
 import styles from './GeneOverview.module.css';
+import SearchButton from 'src/shared/components/search-button/SearchButton';
 
 const GeneOverview = () => {
   const { genomeId, geneId } = useGeneViewIds();
@@ -130,9 +130,10 @@ const GeneOverview = () => {
 
       <section>
         <div className={styles.sectionContent}>
-          <GeneSearchButton
-            className={styles.geneSearchButton}
+          <SearchButton
             onClick={openSearch}
+            label="Find"
+            className={styles.searchButton}
           />
         </div>
       </section>

src/content/app/genome-browser/components/track-panel/components/track-panel-list/TrackPanelList.test.tsx

@@ -137,7 +137,7 @@ describe('<TrackPanelList />', () => {
     it('opens the relevant modal when modal link is clicked', async () => {
       const { store, getByText } = renderComponent();
 
-      const geneSearchLink = getByText('Find a gene');
+      const geneSearchLink = getByText('Find');
 
       await userEvent.click(geneSearchLink);
 

src/content/app/genome-browser/components/track-panel/components/track-panel-list/TrackPanelList.tsx

@@ -44,7 +44,7 @@ import {
 import { TrackSet } from 'src/content/app/genome-browser/components/track-panel/trackPanelConfig';
 import TrackPanelVariantGroupLegend from './track-panel-items/TrackPanelVariantGroupLegend';
 import TrackPanelRegulationLegend from './track-panel-items/TrackPanelRegulationLegend';
-import GeneSearchButton from 'src/shared/components/gene-search-button/GeneSearchButton';
+import SearchButton from 'src/shared/components/search-button/SearchButton';
 
 import ResetIcon from 'static/icons/icon_reset.svg';
 
@@ -89,7 +89,7 @@ export const TrackPanelList = () => {
     <div className={styles.trackPanelList}>
       <FocusObject focusObject={activeFocusObject} />
       <div className={styles.modalLinksWrapper}>
-        <GeneSearchButton onClick={openSearch} />
+        <SearchButton onClick={openSearch} label="Find" />
         <button className={styles.modalLink} onClick={openNavigateModal}>
           <span>Change location</span>
           <ResetIcon />

src/content/app/species-selector/SpeciesSelector.tsx

@@ -21,7 +21,7 @@ import SpeciesSearchResultsAppBar from './components/species-selector-search-res
 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';
-import SpeciesSelectorGeneSearchView from './views/species-selector-gene-search-view/SpeciesSelectorGeneSearchView';
+import SpeciesSelectorSearchView from './views/species-selector-search-view/SpeciesSelectorSearchView';
 import SpeciesManager from './views/species-manager/SpeciesManager';
 
 import styles from './SpeciesSelector.module.css';
@@ -32,6 +32,7 @@ const SpeciesSelector = () => {
       <Route index element={<SpeciesSelectorAppBar />} />
       <Route path="/search" element={<SpeciesSearchResultsAppBar />} />
       <Route path="/search/gene" element={<SpeciesSelectorAppBar />} />
+      <Route path="/search/variant" element={<SpeciesSelectorAppBar />} />
       <Route path="/manage" element={<SpeciesManagerAppBar />} />
     </Routes>
   );
@@ -40,7 +41,8 @@ const SpeciesSelector = () => {
     <Routes>
       <Route index element={<SpeciesSelectorMainView />} />
       <Route path="/search" element={<SpeciesSelectorResultsView />} />
-      <Route path="/search/gene" element={<SpeciesSelectorGeneSearchView />} />
+      <Route path="/search/gene" element={<SpeciesSelectorSearchView />} />
+      <Route path="/search/variant" element={<SpeciesSelectorSearchView />} />
       <Route path="/manage" element={<SpeciesManager />} />
     </Routes>
   );

src/content/app/species-selector/components/species-selector-app-bar/SpeciesSelectorAppBar.tsx

@@ -21,18 +21,19 @@ import { useAppSelector } from 'src/store';
 import * as urlFor from 'src/shared/helpers/urlHelper';
 
 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 { getGeneQuery } from 'src/content/app/species-selector/state/species-selector-feature-search-slice/speciesSelectorFeatureSearchSelectors';
 
 import AppBar, { AppName } from 'src/shared/components/app-bar/AppBar';
 import SpeciesManagerIndicator from 'src/shared/components/species-manager-indicator/SpeciesManagerIndicator';
 import { HelpPopupButton } from 'src/shared/components/help-popup';
-import GeneSearchButton from 'src/shared/components/gene-search-button/GeneSearchButton';
-import GeneSearchCloseButton from 'src/shared/components/gene-search-button/GeneSearchCloseButton';
 import { SelectedSpecies } from 'src/shared/components/selected-species';
 import SpeciesTabsSlider from 'src/shared/components/species-tabs-slider/SpeciesTabsSlider';
 
 import type { CommittedItem } from 'src/content/app/species-selector/types/committedItem';
 
+import { CloseButtonWithLabel } from 'src/shared/components/close-button/CloseButton';
+import SearchButton from 'src/shared/components/search-button/SearchButton';
+
 import styles from './SpeciesSelectorAppBar.module.css';
 
 export const placeholderMessage =
@@ -42,6 +43,12 @@ export const PlaceholderMessage = () => (
   <div className={styles.placeholderMessage}>{placeholderMessage}</div>
 );
 
+const isInSearchMode = (pathname: string) => {
+  return (
+    pathname.includes('/search/gene') || pathname.includes('/search/variant')
+  );
+};
+
 export const SpeciesSelectorAppBar = () => {
   const enabledCommittedSpecies = useAppSelector(getEnabledCommittedSpecies);
 
@@ -63,31 +70,33 @@ export const SpeciesSelectorAppBar = () => {
 };
 
 const AppBarMainContent = (props: { selectedSpecies: CommittedItem[] }) => {
-  const storedGeneSearchQuery = useAppSelector(readStoredGeneQuery);
+  const storedGeneSearchQuery = useAppSelector(getGeneQuery);
   const navigate = useNavigate();
   const location = useLocation();
-  const isInGeneSearchMode = location.pathname.includes('/search/gene');
+  const inSearchMode = isInSearchMode(location.pathname);
 
-  const onGeneSearchOpen = () => {
-    navigate(urlFor.speciesSelectorGeneSearch(storedGeneSearchQuery));
+  const onSearchOpen = () => {
+    // open gene search by default
+    const path = `${urlFor.speciesSelector()}/search/gene`;
+    navigate(urlFor.speciesSelectorFeatureSearch(path, storedGeneSearchQuery));
   };
 
-  const onGeneSearchClose = () => {
+  const onSearchClose = () => {
     navigate(-1);
   };
 
-  const geneSearchButton = !isInGeneSearchMode ? (
-    <GeneSearchButton onClick={onGeneSearchOpen} />
+  const searchModeButton = !inSearchMode ? (
+    <SearchButton onClick={onSearchOpen} label="Find genes or variants" />
   ) : (
-    <GeneSearchCloseButton onClick={onGeneSearchClose} />
+    <CloseButtonWithLabel onClick={onSearchClose} />
   );
 
   return (
     <div className={styles.grid}>
       <SelectedSpeciesList selectedSpecies={props.selectedSpecies} />
       <div className={styles.aside}>
-        {geneSearchButton}
-        {!isInGeneSearchMode && (
+        {searchModeButton}
+        {!inSearchMode && (
           <span className={styles.selectTabMessage}>
             Select a tab to see a Species home page
           </span>
@@ -100,7 +109,7 @@ const AppBarMainContent = (props: { selectedSpecies: CommittedItem[] }) => {
 const SelectedSpeciesList = (props: { selectedSpecies: CommittedItem[] }) => {
   const navigate = useNavigate();
   const location = useLocation();
-  const isInGeneSearchMode = location.pathname.includes('/search/gene');
+  const inSearchMode = isInSearchMode(location.pathname);
 
   const showSpeciesPage = (species: CommittedItem) => {
     const genomeIdForUrl = species.genome_tag ?? species.genome_id;
@@ -111,7 +120,7 @@ const SelectedSpeciesList = (props: { selectedSpecies: CommittedItem[] }) => {
     navigate(speciesPageUrl);
   };
 
-  const conditionalSpeciesProps = !isInGeneSearchMode
+  const conditionalSpeciesProps = !inSearchMode
     ? ({ theme: 'blue' } as const)
     : ({ theme: 'grey', disabled: true } as const);
 

src/content/app/species-selector/state/species-selector-gene-search-slice/speciesSelectorGeneSearchSelectors.ts → src/content/app/species-selector/state/species-selector-feature-search-slice/speciesSelectorFeatureSearchSelectors.ts

@@ -16,6 +16,14 @@
 
 import type { RootState } from 'src/store';
 
-export const getQuery = (state: RootState) => {
-  return state.speciesSelector.geneSearch.query;
+export const getGeneQuery = (state: RootState) => {
+  return state.speciesSelector.featureSearch.queries.gene;
+};
+
+export const getVariantQuery = (state: RootState) => {
+  return state.speciesSelector.featureSearch.queries.variant;
+};
+
+export const getFeatureQueries = (state: RootState) => {
+  return state.speciesSelector.featureSearch.queries;
 };

src/content/app/species-selector/state/species-selector-feature-search-slice/speciesSelectorFeatureSearchSlice.ts

@@ -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 { createSlice, type PayloadAction } from '@reduxjs/toolkit';
+
+type SpeciesSelectorFeatureSearchState = {
+  queries: {
+    gene: string;
+    variant: string;
+  };
+};
+
+const initialState: SpeciesSelectorFeatureSearchState = {
+  queries: {
+    gene: '',
+    variant: ''
+  }
+};
+
+const speciesSelectorFeatureSearchSlice = createSlice({
+  name: 'species-selector-feature-search',
+  initialState,
+  reducers: {
+    setGeneQuery: (state, action: PayloadAction<string>) => {
+      state.queries.gene = action.payload;
+    },
+    setVariantQuery: (state, action: PayloadAction<string>) => {
+      state.queries.variant = action.payload;
+    },
+    clearQueries: (state) => {
+      state.queries.gene = '';
+      state.queries.variant = '';
+    }
+  },
+  selectors: {
+    getQueries: (state) => state.queries,
+    getGeneQuery: (state) => state.queries.gene,
+    getVariantQuery: (state) => state.queries.variant
+  }
+});
+
+export const { setGeneQuery, setVariantQuery, clearQueries } =
+  speciesSelectorFeatureSearchSlice.actions;
+
+export default speciesSelectorFeatureSearchSlice.reducer;

src/content/app/species-selector/state/species-selector-general-slice/speciesSelectorGeneralSelectors.ts

@@ -22,7 +22,7 @@ import type { SpeciesNameDisplayOption } from 'src/content/app/species-selector/
 
 export const getCommittedSpecies = createSelector(
   (state: RootState) => state.speciesSelector.general.committedItems,
-  (committedItems) => {
+  (committedItems): CommittedItem[] => {
     return committedItems.toSorted(
       (species1, species2) => species2.addedAt - species1.addedAt
     );

src/content/app/species-selector/state/speciesSelectorReducer.ts

@@ -17,9 +17,9 @@
 import { combineReducers } from '@reduxjs/toolkit';
 
 import speciesSelectorGeneralReducer from './species-selector-general-slice/speciesSelectorGeneralSlice';
-import speciesSelectorGeneSearchReducer from './species-selector-gene-search-slice/speciesSelectorGeneSearchSlice';
+import speciesSelectorFeatureSearchReducer from './species-selector-feature-search-slice/speciesSelectorFeatureSearchSlice';
 
 export default combineReducers({
   general: speciesSelectorGeneralReducer,
-  geneSearch: speciesSelectorGeneSearchReducer
+  featureSearch: speciesSelectorFeatureSearchReducer
 });

src/content/app/species-selector/views/species-selector-search-view/SpeciesSelectorSearchView.module.css

@@ -0,0 +1,32 @@
+.main {
+  --inner-block-offset-left: 20px;
+  padding-bottom: var(--global-padding-bottom);
+  padding-left: var(--global-padding-left);
+  padding-top: 12px;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.resultsWrapper {
+  flex: 1; 
+  min-height: 0;
+  width: 600px;
+  overflow-y: auto;
+  margin-top: 20px;
+}
+
+/* FIXME: remove the pseudo-radio elements when we replace them with real radio buttons */
+.pseudoRadioGroup {
+  --radio-label-font-weight: var(--font-weight-normal);
+  display: flex;
+  column-gap: 2rem;
+  margin-left: var(--inner-block-offset-left);
+  margin-top: 10px;
+}
+
+.pseudoRadioDisabled > * {
+  --radio-background-color: var(--color-light-grey);
+  --radio-label-font-weight: var(--font-weight-light);
+  cursor: default !important; /* yes, !important is terrible; but this is a temporary hack anyway */
+}