Bugfix/species filter is getting ignored in the metadata search

packages/scxa-cell-type-wheel-experiment-heatmap/html/Demo.js

@@ -9,6 +9,7 @@ const render = (options, target) => {
       {...options}
       host={`https://wwwdev.ebi.ac.uk/gxa/sc/`}
       searchTerm={`pancreas`}
+      species={'mus musculus'}
     />, document.getElementById(target)
   )
 }

packages/scxa-cell-type-wheel-experiment-heatmap/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebi-gene-expression-group/scxa-cell-type-wheel-heatmap",
-  "version": "1.4.3",
+  "version": "1.4.4",
   "publishConfig": {
     "access": "public"
   },
@@ -27,7 +27,7 @@
   "dependencies": {
     "@ebi-gene-expression-group/atlas-react-fetch-loader": "*",
     "@ebi-gene-expression-group/scxa-cell-type-wheel": "^1.1.6",
-    "@ebi-gene-expression-group/scxa-gene-search-form": "^2.0.2",
+    "@ebi-gene-expression-group/scxa-gene-search-form": "^2.0.3",
     "@ebi-gene-expression-group/scxa-marker-gene-heatmap": "*",
     "highcharts": "^11.4.6",
     "highcharts-react-official": "^3.2.1",

packages/scxa-cell-type-wheel-experiment-heatmap/src/CellTypeWheelExperimentHeatmap.js

@@ -17,6 +17,7 @@ function CellTypeWheelExperimentHeatmap(props) {
   const [allSpecies, setAllSpecies] = useState(null) // State to hold the fetched data
   const [loading, setLoading] = useState(true) // State to handle loading status
   const [error, setError] = useState(null)
+  const [selectedSpecies, setSelectedSpecies] = useState(props.species)
 
   useEffect(() => {
     // Define the async function inside useEffect
@@ -54,6 +55,10 @@ function CellTypeWheelExperimentHeatmap(props) {
     })
   }
 
+  function handleChange(species) {
+    setSelectedSpecies(species);
+  }
+
   const heatmapFulfilledPayloadProvider = heatmapData => ({
     data: heatmapData,
     xAxisCategories: _.chain(heatmapData).uniqBy(`x`).sortBy(`x`).map(`cellGroupValue`).value(),
@@ -66,8 +71,8 @@ function CellTypeWheelExperimentHeatmap(props) {
       <GeneSearchFormFetchLoader
         host={props.host}
         resource={props.searchFormResource}
-        loadingPayloadProvider={ () => ({ speciesSelectStatusMessage: `Fetching species…` }) }
-        errorPayloadProvider={ () => ({ speciesSelectStatusMessage: `Failed fetching species` }) }
+        loadingPayloadProvider={() => ({ speciesSelectStatusMessage: `Fetching species…` })}
+        errorPayloadProvider={() => ({ speciesSelectStatusMessage: `Failed fetching species` })}
         wrapperClassName={`row-expanded small-12 columns`}
         autocompleteClassName={`small-8 columns`}
         actionEndpoint={props.actionEndpoint}
@@ -77,17 +82,17 @@ function CellTypeWheelExperimentHeatmap(props) {
         enableSpeciesSelect={true}
         speciesSelectClassName={`small-4 columns`}
         defaultSpecies={props.species}
+        onSpeciesSelectOnChange={handleChange}
       />
       <div className={`row-expanded small-12 columns`}>
         <div className={`small-12 medium-6 columns`} aria-label={`Cell type wheel`}>
           {props.searchTerm.trim() ?
             <CellTypeWheelFetchLoader
               host={props.host}
-              resource={URI(props.cellTypeWheelResource)
+resource={URI(props.cellTypeWheelResource)
                 .segment(props.searchTerm)
-                .search(`?species=` + props.species)
-                .toString()
-              }
+                .toString()}
+              query={props.species ? `?species=` + selectedSpecies : ''}
               fulfilledPayloadProvider={cellTypeWheelData => ({ data: cellTypeWheelData })}
               searchTerm={props.searchTerm}
               allSpecies={allSpecies}
@@ -115,7 +120,8 @@ function CellTypeWheelExperimentHeatmap(props) {
             props.searchTerm.trim() ?
               <div className={`medium-text-center`} aria-label={`No cell type selected`}>
                 <h4>
-                  Please click on a cell type to see a detailed view of the expression profile of top-scoring genes across experiments.
+                  Please click on a cell type to see a detailed view of the expression profile of top-scoring genes
+                  across experiments.
                 </h4>
               </div> :
               <div/>

packages/scxa-gene-search-form/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebi-gene-expression-group/scxa-gene-search-form",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "Single Cell Expression Atlas homepage gene search form",
   "main": "lib/index.js",
   "scripts": {

packages/scxa-gene-search-form/src/GeneSearchForm.js

@@ -39,6 +39,9 @@ class GeneSearchForm extends React.Component {
 
   _speciesSelectOnChange (selectedItem) {
     this.setState({ selectedSpecies: selectedItem.value })
+    if (this.props.onSpeciesSelectOnChange) {
+      this.props.onSpeciesSelectOnChange(selectedItem.value)
+    }
   }
 
   render () {
@@ -125,7 +128,8 @@ GeneSearchForm.propTypes = {
   searchExamples: PropTypes.arrayOf(PropTypes.shape({
     text: PropTypes.string.isRequired,
     url: PropTypes.string.isRequired
-  }))
+  })),
+  onSpeciesSelectOnChange: PropTypes.func
 }
 
 GeneSearchForm.defaultProps = {