Add a visual UI distinction for anndata experiments in the gene searc…

…h results (#136) * Add anndata icon to result card * Add experiment type to result header * Fix typos * Reformat jsx code * Add propTypes
ebi-gene-expression-group · Feb 14, 2023 · 65ca28d · 65ca28d
1 parent d1aebb0
commit 65ca28d
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 5 deletions.
diff --git a/packages/scxa-faceted-search-results/html/fetch-loader/ExperimentCard.js b/packages/scxa-faceted-search-results/html/fetch-loader/ExperimentCard.js
@@ -21,6 +21,12 @@ const CardContainerDiv = styled.div`
   }
 `
 
+const SmallIconDiv = styled.div`
+  width: 5%;
+  text-align: center;
+  font-size: 3rem;
+`
+
 const IconDiv = styled.div`
   width: 15%;
   text-align: center;
@@ -48,6 +54,8 @@ const CountDiv = styled.div`
   text-align: center;
 `
 
+const ANNDATA = `E-ANND`
+
 class ExperimentCard extends React.Component {
   constructor(props) {
     super(props)
@@ -58,7 +66,7 @@ class ExperimentCard extends React.Component {
   }
 
   render() {
-    const {url, species, experimentDescription, markerGenes, numberOfAssays, factors} = this.props
+    const {url, species, experimentDescription, markerGenes, numberOfAssays, experimentAccession, type, factors} = this.props
 
     const markerGeneLinks = markerGenes ? markerGenes.map((markerGene) =>
       <li key={`marker-gene-${markerGene.k}`}>
@@ -68,6 +76,16 @@ class ExperimentCard extends React.Component {
 
     return (
       <CardContainerDiv onClick={this._goToExperiment.bind(this, url)}>
+          <SmallIconDiv>
+              <span data-tip={type} data-html={true} className={`icon icon-functional`}>
+                  {
+                      experimentAccession.substring(0,6) === ANNDATA ?
+                          //tbc
+                          <img src={`https://user-images.githubusercontent.com/33519183/203308460-aee477fa-c8ab-4561-be46-34254bfa1731.png`} /> :
+                          <img src={`https://www.ebi.ac.uk/gxa/resources/images/expression-atlas.png`} />
+                  }
+              </span>
+          </SmallIconDiv>
         <IconDiv>
           <EbiSpeciesIcon species={species}/>
           <h6>{species}</h6>
@@ -110,7 +128,9 @@ ExperimentCard.propTypes = {
     url: PropTypes.string.isRequired
   })),
   numberOfAssays: PropTypes.number.isRequired,
-  factors: PropTypes.array.isRequired
+  factors: PropTypes.array.isRequired,
+  experimentAccession: PropTypes.string.isRequired
+  type: PropTypes.string.isRequired
 }
 
 export default ExperimentCard
diff --git a/packages/scxa-faceted-search-results/html/fetch-loader/ExperimentsHeader.js b/packages/scxa-faceted-search-results/html/fetch-loader/ExperimentsHeader.js
@@ -13,6 +13,15 @@ const CardContainerDiv = styled.div`
   font-size: 0.9rem;
 `
 
+const SmallIconDiv = styled.div`
+  width: 5%;
+  text-align: center;
+  cursor: pointer;
+  opacity: 0.6;
+  transition: 0.3s;
+  :hover {opacity: 1};
+`
+
 const IconDiv = styled.div`
   width: 15%;
   text-align: center;
@@ -57,9 +66,9 @@ const CountDiv = styled.div`
 
 const ExperimentTableHeaderBasic = () =>
   ({
-    'titles': [`Species`, `Marker genes`, `Title`, `Experimental variables`, `Number of assays`],
-    'styles': [IconDiv, MarkerDiv, TitleDiv, VariableDiv, CountDiv],
-    'attributes': [`species`, `markerGenes`, `experimentDescription`, null, `numberOfAssays`]
+    'titles': [`Experiment type`, `Species`, `Marker genes`, `Title`, `Experimental variables`, `Number of assays`],
+    'styles': [SmallIconDiv, IconDiv, MarkerDiv, TitleDiv, VariableDiv, CountDiv],
+    'attributes': [`experimentAccession`, `species`, `markerGenes`, `experimentDescription`, null, `numberOfAssays`]
   })