Merge 56ae56d into 6ddb9e1

__test__/Autocomplete.test.js

@@ -6,7 +6,7 @@ import Adapter from 'enzyme-adapter-react-16'
 import fetchMock from 'fetch-mock'
 import URI from 'urijs'
 
-import Autocomplete from '../src/Autocomplete.js'
+import Autocomplete from '../src/Autocomplete'
 import AsyncCreatableSelect from 'react-select/lib/AsyncCreatable'
 
 Enzyme.configure({ adapter: new Adapter() })

__test__/GeneSearchForm.test.js

@@ -4,19 +4,22 @@ import Enzyme from 'enzyme'
 import { shallow } from 'enzyme'
 import Adapter from 'enzyme-adapter-react-16'
 
-import GeneSearchForm from '../src/GeneSearchForm.js'
+import GeneSearchForm from '../src/GeneSearchForm'
 import Autocomplete from '../src/Autocomplete'
 import LabelledSelect from '../src/LabelledSelect'
+import SearchExamples from '../src/SearchExamples'
 
 import * as species from './utils/species'
+import searchExamples from './utils/searchExamples'
 
 Enzyme.configure({ adapter: new Adapter() })
 
 const props = {
   atlasUrl: `foo/`,
   actionEndpoint: `bar`,
   suggesterEndpoint: `suggest`,
-  enableSpeciesSelect: true
+  enableSpeciesSelect: true,
+  searchExamples: searchExamples
 }
 
 const defaultValue = {
@@ -133,6 +136,11 @@ describe(`GeneSearchForm`, () => {
     expect(onSubmitMock.mock.calls[0][2]).toEqual(speciesToSelect)
   })
 
+  test(`can optionally display search examples`, () => {
+    expect(shallow(<GeneSearchForm {...props} />).find(SearchExamples)).toHaveLength(1)
+    expect(shallow(<GeneSearchForm {...props} searchExamples={undefined} />).find(SearchExamples)).toHaveLength(0)
+  })
+
   test(`matches snapshot`, () => {
     const tree = renderer.create(<GeneSearchForm {...props}/>).toJSON()
     expect(tree).toMatchSnapshot()

__test__/SearchExamples.test.js

@@ -0,0 +1,30 @@
+import React from 'react'
+import renderer from 'react-test-renderer'
+import Enzyme from 'enzyme'
+import { shallow } from 'enzyme'
+import Adapter from 'enzyme-adapter-react-16'
+
+import SearchExamples from '../src/SearchExamples'
+
+import searchExamples from './utils/searchExamples'
+
+Enzyme.configure({ adapter: new Adapter() })
+
+const props = {
+  links: searchExamples.filter(() => Math.random() > 0.5)
+}
+
+describe(`SearchExamples`, () => {
+  test(`renders one link per element`, () => {
+    const wrapper = shallow(<SearchExamples {...props} />)
+    expect(wrapper.find(`a`)).toHaveLength(props.links.length)
+  })
+
+  test(`matches snapshot`, () => {
+    const tree =
+      renderer
+        .create(<SearchExamples links={searchExamples} />)
+        .toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+})

__test__/__snapshots__/GeneSearchForm.test.js.snap

@@ -157,6 +157,59 @@ exports[`GeneSearchForm matches snapshot 1`] = `
         </div>
       </div>
     </div>
+    <div
+      className="small-12 columns"
+    >
+      <p
+        style={
+          Object {
+            "fontSize": "smaller",
+          }
+        }
+      >
+        Examples:
+        <span>
+           
+          <a
+            href="http://rickandmorty.wikia.com/wiki/Special:Search?query=Rick+Sanchez"
+          >
+            Rick Sanchez
+          </a>
+          , 
+        </span>
+        <span>
+          <a
+            href="http://rickandmorty.wikia.com/wiki/Special:Search?query=Unity"
+          >
+            Unity
+          </a>
+          , 
+        </span>
+        <span>
+          <a
+            href="http://rickandmorty.wikia.com/wiki/Special:Search?query=Galactic+Federation"
+          >
+            Galactic Federation
+          </a>
+          , 
+        </span>
+        <span>
+          <a
+            href="http://rickandmorty.wikia.com/wiki/Special:Search?query=Blemflarck"
+          >
+            Blemflarck
+          </a>
+          , 
+        </span>
+        <span>
+          <a
+            href="http://rickandmorty.wikia.com/wiki/Special:Search?query=anatomy"
+          >
+            anatomy
+          </a>
+        </span>
+      </p>
+    </div>
   </div>
   <div
     className=""

__test__/__snapshots__/SearchExamples.test.js.snap

@@ -0,0 +1,53 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SearchExamples matches snapshot 1`] = `
+<p
+  style={
+    Object {
+      "fontSize": "smaller",
+    }
+  }
+>
+  Examples:
+  <span>
+     
+    <a
+      href="http://rickandmorty.wikia.com/wiki/Special:Search?query=Rick+Sanchez"
+    >
+      Rick Sanchez
+    </a>
+    , 
+  </span>
+  <span>
+    <a
+      href="http://rickandmorty.wikia.com/wiki/Special:Search?query=Unity"
+    >
+      Unity
+    </a>
+    , 
+  </span>
+  <span>
+    <a
+      href="http://rickandmorty.wikia.com/wiki/Special:Search?query=Galactic+Federation"
+    >
+      Galactic Federation
+    </a>
+    , 
+  </span>
+  <span>
+    <a
+      href="http://rickandmorty.wikia.com/wiki/Special:Search?query=Blemflarck"
+    >
+      Blemflarck
+    </a>
+    , 
+  </span>
+  <span>
+    <a
+      href="http://rickandmorty.wikia.com/wiki/Special:Search?query=anatomy"
+    >
+      anatomy
+    </a>
+  </span>
+</p>
+`;

__test__/utils/searchExamples.js

@@ -0,0 +1,24 @@
+const searchExamples = [
+  {
+    text: `Rick Sanchez`,
+    url: `http://rickandmorty.wikia.com/wiki/Special:Search?query=Rick+Sanchez`
+  },
+  {
+    text: `Unity`,
+    url: `http://rickandmorty.wikia.com/wiki/Special:Search?query=Unity`
+  },
+  {
+    text: `Galactic Federation`,
+    url: `http://rickandmorty.wikia.com/wiki/Special:Search?query=Galactic+Federation`
+  },
+  {
+    text: `Blemflarck`,
+    url: `http://rickandmorty.wikia.com/wiki/Special:Search?query=Blemflarck`
+  },
+  {
+    text: `anatomy`,
+    url: `http://rickandmorty.wikia.com/wiki/Special:Search?query=anatomy`
+  }
+]
+
+export default searchExamples

html/index.html

@@ -147,7 +147,29 @@ <h3><code>defaultSpecies: 'Mus musculus'</code></h3>
     autocompleteClassName: 'small-8 columns',
     enableSpeciesSelect: true,
     speciesEndpoint: 'json/suggestions/species',
-    speciesSelectClassName: 'small-4 columns'
+    speciesSelectClassName: 'small-4 columns',
+    searchExamples: [
+      {
+        text: 'CFTR (gene symbol)',
+        url: '${pageContext.request.contextPath}/search?symbol=CFTR'
+      },
+      {
+        text: 'ENSG00000115904 (Ensembl ID)',
+        url: '${pageContext.request.contextPath}/search?ensgene=ENSG00000115904'
+      },
+      {
+        text: '657 (Entrez ID)',
+        url: '${pageContext.request.contextPath}/search?entrezgene=657'
+      },
+      {
+        text: 'MGI:98354 (MGI ID)',
+        url: '${pageContext.request.contextPath}/search?mgi_id=MGI:98354'
+      },
+      {
+        text: 'FBgn0004647 (FlyBase ID)',
+        url: '${pageContext.request.contextPath}/search?flybase_gene_id=FBgn0004647'
+      }
+    ]
   }, 'search');
 
   geneSearchFormDemo.render({

package.json

@@ -1,6 +1,6 @@
 {
   "name": "scxa-gene-search-form",
-  "version": "1.1.3",
+  "version": "1.2.0-beta",
   "description": "Single Cell Expression Atlas homepage gene search form",
   "main": "lib/index.js",
   "scripts": {
@@ -21,7 +21,8 @@
       "<rootDir>/__mocks__/requestAnimationFrame.js"
     ],
     "coveragePathIgnorePatterns": [
-      "src/ebiVfReactSelectReplacements"
+      "<rootDir>/src/ebiVfReactSelectReplacements",
+      "<rootDir>/__test__/utils"
     ]
   },
   "author": "Expression Atlas developers <atlas-developers@ebi.ac.uk>",

src/FetchLoader.js

@@ -84,7 +84,12 @@ FetchLoader.propTypes = {
   enableSpeciesSelect: PropTypes.bool,
   speciesEndpoint: PropTypes.string,
   speciesSelectClassName: PropTypes.string,
-  defaultSpecies: PropTypes.string
+  defaultSpecies: PropTypes.string,
+
+  searchExamples: PropTypes.arrayOf(PropTypes.shape({
+    text: PropTypes.string.isRequired,
+    url: PropTypes.string.isRequired
+  }))
 }
 
 FetchLoader.defaultProps = {

src/GeneSearchForm.js

@@ -4,6 +4,7 @@ import URI from 'urijs'
 
 import Autocomplete from './Autocomplete'
 import LabelledSelect from './LabelledSelect'
+import SearchExamples from './SearchExamples'
 
 class GeneSearchForm extends React.Component {
   constructor(props) {
@@ -40,7 +41,7 @@ class GeneSearchForm extends React.Component {
   }
 
   render() {
-    const {wrapperClassName, actionEndpoint, onSubmit} = this.props
+    const {wrapperClassName, actionEndpoint, onSubmit, searchExamples} = this.props
 
     const {autocompleteClassName, atlasUrl, suggesterEndpoint, defaultValue} = this.props
 
@@ -71,6 +72,12 @@ class GeneSearchForm extends React.Component {
                 onChange={this.speciesSelectOnChange}/>
             </div>
           }
+          {
+            searchExamples &&
+              <div className={`small-12 columns`}>
+                <SearchExamples links={searchExamples}/>
+              </div>
+          }
         </div>
         <div className={wrapperClassName}>
           <div className={`small-12 columns`}>
@@ -110,7 +117,12 @@ GeneSearchForm.propTypes = {
   allSpecies: PropTypes.arrayOf(PropTypes.string),
   topSpecies: PropTypes.arrayOf(PropTypes.string),
   defaultSpecies: PropTypes.string,
-  speciesSelectStatusMessage: PropTypes.string
+  speciesSelectStatusMessage: PropTypes.string,
+
+  searchExamples: PropTypes.arrayOf(PropTypes.shape({
+    text: PropTypes.string.isRequired,
+    url: PropTypes.string.isRequired
+  }))
 }
 
 GeneSearchForm.defaultProps = {

src/SearchExamples.js

@@ -0,0 +1,22 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const SearchExamples = ({links}) =>
+  <p style={{fontSize: `smaller`}}>Examples:
+    {
+      links.map(
+        (link, index) =>
+          <span key={index}>
+            {index === 0 && ` `}<a href={link.url}>{link.text}</a>{index < links.length - 1 && `, `}
+          </span>)
+    }
+  </p>
+
+SearchExamples.propTypes = {
+  links: PropTypes.arrayOf(PropTypes.shape({
+    text: PropTypes.string.isRequired,
+    url: PropTypes.string.isRequired
+  })).isRequired
+}
+
+export default SearchExamples