This is an embeddable component that you can include into your website to add a non-coding RNA sequence search.
The component sends search requests to EBI-backed API, run on EBI cloud infrastructure.
It searches against RNAcentral databases (or their arbitrary subset) with NHMMER, CMSCAN and also adds text search functionality, backed by EBI Lucene text search plugin.
This plugin is written in React/Redux. It is bundled as a Web Component, so it should not clash with your website's javascript or CSS.
Just insert this html tag somewhere in your code:
<rnacentral-sequence-search databases='["your-database-name"]' />
and also the component's javascript package available at Github:
<script type="text/javascript" src="https://rnacentral.github.io/rnacentral-sequence-search-embed/dist/RNAcentral-sequence-search.js"></script>
If you prefer to install this package and perform the updates manually, see the Installation section.
Sequence search component accepts a number of attributes. You pass them as html attributes and their values are strings (this is a requirement of Web Components):
Array of databases to search query sequence against. Currently you can choose from:
| database |
|---|
| 5srrnadb |
| crw |
| dictybase |
| ena |
| ensembl |
| ensembl_fungi |
| ensembl_metazoa |
| ensembl_plants |
| ensembl_protists |
| expression_atlas |
| flybase |
| genecards |
| greengenes |
| gtrnadb |
| hgnc |
| intact |
| lncbase |
| lncbook |
| lncipedia |
| lncrnadb |
| malacards |
| mgi |
| mirbase |
| mirgenedb |
| modomics |
| noncode |
| pdbe |
| pirbase |
| plncdb |
| pombase |
| psicquic |
| rdp |
| refseq |
| rfam |
| rgd |
| ribovision |
| sgd |
| silva |
| snodb |
| snopy |
| snorna_database |
| srpdb |
| tair |
| tarbase |
| tmrna_web |
| wormbase |
| zfin |
| zwd |
To show some examples, use:
<rnacentral-sequence-search
databases='["miRBase"]'
examples='[
{"description": "miRNA hsa-let-7a-1", "urs": "URS000004F5D8", "sequence": "CUAUACAAUCUACUGUCUUUC"}
]
/>
To enable Rfam classification and generate secondary structure (2D) diagrams using R2DT, use:
<rnacentral-sequence-search
databases='["miRBase"]'
rfam="true"
r2dt="true"
/>
If you want to hide one specific facet, use:
<rnacentral-sequence-search
databases='["miRBase"]'
hideFacet='["has_conserved_structure"]'
/>
You can hide any facet - "rna_type", "TAXONOMY", "expert_db", "qc_warning_found", "has_go_annotations", "has_conserved_structure", "has_genomic_coordinates"
You can also customise some elements of this embeddable component. The example below changes the color of the buttons:
<rnacentral-sequence-search
databases='["miRBase"]'
customStyle='{
"searchButtonColor": "#007c82",
"clearButtonColor": "#6c757d"
}'
/>
Parameters that you can use to customise the widget:
| parameter | description |
|---|---|
| fixCss | fix the CSS. Use "fixCss": "true" if the button sizes are different |
| urlWithJobId | Use "urlWithJobId": "true" to show the jobId as a parameter in the URL* |
| linkColor | change the color of the links |
| 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 |
| similarSeqText | change the Similar sequences text |
| facetColor | change the color of the facet title |
| facetSize | change the size of the facet title |
| seqTitleSize | used in results, it changes the size of the title |
| seqInfoColor | used in results, it changes the color of the text number of nucleotides |
| seqInfoSize | used in results, it changes the size of the text number of nucleotides |
| searchButtonColor | change the color of the Search button |
| clearButtonColor | change the color of the Clear button |
| uploadButtonColor | change the color of the Upload file button |
| hideUploadButton | hide the Upload file button. Use "hideUploadButton": "true" to hide the button |
| loadMoreButtonColor | change the color of the Load more button |
* The urlWithJobId parameter may not work as desired. We recommend testing this feature in a test environment.
Search results links can also be changed. For example, assuming the link points to www.example.com/?id=12345 and you want to change the URL to www.newurl.com/12345, use:
<rnacentral-sequence-search
databases='["miRBase"]'
customUrl='{
"stringToSplit": "id=",
"newUrl": "www.newurl.com/"
}'
/>
For a minimal example, see index.html. For an Rfam example, see rfam.html.
Download this package directly from Github.
git clone https://github.com/RNAcentral/rnacentral-sequence-search-embed.git
Now you can add the component's javascript bundle (it contains all the styles and fonts) to your web page either directly or through an import with Webpack:
<script type="text/javascript" src="/rnacentral-sequence-search-embed/dist/RNAcentral-sequence-search.js"></script>
You will need to run the git pull command whenever there are updates.
-
npm install -
npm run serveto start a server on http://localhost:8080/ -
npm run cleanto clean the dist folder of old assets -
npm run buildto generate a new distribution
This embed is implemented as a Web Component, wrapping a piece of code in React/Redux.
Being a Web Component, it isolates CSS styles from the main page to avoid clash of styles with it. The CSS styles and fonts are bundled into the javascript inline via Webpack 3 build system, see webpack.config.js file. Upon load of RNAcentral-sequence-search.js, the component registers itself in the custom elements registry.
Web Components accept input parameters as strings. That means that we have to parse parameters in Web Component initialization code and pass the resulting objects as props to React. Here are some examples of passing the parameters to the Web Component or from Web Component to React: