Merge branches 'dev' and 'master' of https://github.com/RNAcentral/rnacentral-sequence-search-embed

� Conflicts:
�	dist/RNAcentral-sequence-search.js
�	dist/RNAcentral-sequence-search.js.map

Author: caduribas

README.md

@@ -120,7 +120,8 @@ parameter                   | description
 ----------------------------|-----------------------------------------------------------------------------------|
 h3Color                     | change the color of the `Similar sequences` and `Rfam classification` text        |
 h3Size                      | change the size of the `Similar sequences` and `Rfam classification` text         |
-exactMatchBackgroundColor   | change the background color of the "Exact match" area                             | 
+exactMatchBackgroundColor   | change the background color of the "Exact match" area                             |
+jobIdBackgroundColor        | change the background color of the "Job id" area                                  | 
 similarSeqText              | change the `Similar sequences` text                                               | 
 facetColor                  | change the color of the facet title                                               |
 facetSize                   | change the size of the facet title                                                |

dist/RNAcentral-sequence-search.js

@@ -43,6 +43,7 @@ class Results extends React.Component {
     };
     const loadMoreButtonColor = this.props.customStyle && this.props.customStyle.loadMoreButtonColor ? this.props.customStyle.loadMoreButtonColor : "";
     const similarSeqText = this.props.customStyle && this.props.customStyle.similarSeqText ? this.props.customStyle.similarSeqText : "Similar sequences";
+    const jobIdBackgroundColor = this.props.customStyle && this.props.customStyle.jobIdBackgroundColor ? this.props.customStyle.jobIdBackgroundColor : "";
 
     // exact match URS ids
     const exactMatch = this.props.exactMatch;
@@ -78,10 +79,21 @@ class Results extends React.Component {
             </div>
           )
         }
+        {
+          (this.props.jobId && this.props.jobList && !this.props.jobList.length > 0 || this.props.jobId && this.props.jobList && this.props.jobList.length > 0 && !this.props.jobList.includes(this.props.jobId) ) && (
+            <div className="row" key={`job-id`}>
+              <div className="small-9 columns">
+                <div className="callout secondary" style={{backgroundColor: jobIdBackgroundColor}}>
+                  <p>Job id: <span className="job-id">{ this.props.jobId }</span></p>
+                </div>
+              </div>
+            </div>
+          )
+        }
         {
           this.props.jobId && this.props.status === "partial_success" && (
             <div className="row" key={`partial-success-div`}>
-              <div className="small-12 columns">
+              <div className="small-9 columns">
                 <div className="callout warning">
                   <h4>Search against some databases failed.</h4>
                   <p>This usually happens when the nhmmer is unable to complete the search within a 5 minute time limit.</p>
@@ -93,7 +105,7 @@ class Results extends React.Component {
         {
           this.props.jobId && this.props.status === "does_not_exist" && (
             <div className="row" key={`does-not-exist-div`}>
-              <div className="small-12 columns">
+              <div className="small-9 columns">
                 <div className="callout alert">
                   <h4>Job with id='{ this.props.jobId }' does not exist.</h4>
                 </div>
@@ -104,7 +116,7 @@ class Results extends React.Component {
         {
           this.props.jobId && this.props.status === "error" && (
             <div className="row" key={`error-div`}>
-              <div className="small-12 columns">
+              <div className="small-9 columns">
                 <div className="callout alert">
                   <h4>There was an error.</h4>
                   <a href="mailto:rnacentral@gmail.com">Contact us</a> if the problem persists.

dist/RNAcentral-sequence-search.js.map

@@ -1,3 +1,11 @@
+.job-id {
+  font-family: Consolas, "Liberation Mono", Courier, monospace;
+  font-weight: normal;
+  padding: 0.125rem 0.3125rem 0.0625rem;
+  overflow-x: auto;
+  font-size: .95rem;
+}
+
 .result {
   list-style: none;
 }

src/containers/SequenceSearch/components/Results/index.jsx

@@ -82,7 +82,7 @@ class SearchForm extends React.Component {
           <form onSubmit={(e) => this.onSubmit(e)}>
             <div className="row">
               <div className="small-9 columns">
-                <textarea id="sequence" name="sequence" rows="7" value={this.props.sequence} onChange={(e) => this.props.onSequenceTextareaChange(e)} placeholder="Enter RNA/DNA sequence (with an optional description in FASTA format) or job ID" />
+                <textarea id="sequence" name="sequence" rows="7" value={this.props.sequence} onChange={(e) => this.props.onSequenceTextareaChange(e)} placeholder="Enter RNA/DNA sequence (with an optional description in FASTA format) or job id" />
               </div>
               <div className="small-3 columns">
                 <div className="row">