@rnacentral/rnacentral-sequence-search-embed v1.0.0

RNAcentral sequence search embed

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 and also adds text search functionality, backed by EBI Lucene text search plugin.

This plugin is written in React/Redux and makes use of Zurb Foundation-based EBI theme. It is bundled as a Web Component, so it should not clash with your website's javascript or CSS.

Installation

Install this package with npm or download it directly from Github.

npm install @rnacentral/rnacentral-sequence-search-embed

or

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>

To use it just insert an html tag somewhere in your html:

<rnacentral-sequence-search databases='["mirbase"]' />

For a minimal example, see index.html.

Attributes/parameters

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):

databases

Array of databases to search query sequence against. Currently you can choose from:

Developer details

Local development

1. npm install

2. npm run serve to start a server on http://localhost:8080/

3. npm run clean to clean the dist folder of old assets

4. npm run build to generate a new distribution.

Notes

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.

There are some peculiarities about interaction of Web Components with React.

First, there is a known issue with React events breaking, when React component is mounted under a shadow root in shadow DOM. We solve this by retargeting React events for shadow dom with this package:

• https://www.npmjs.com/package/react-shadow-dom-retarget-events.

Second, 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:

• https://hackernoon.com/how-to-turn-react-component-into-native-web-component-84834315cb24
• https://stackoverflow.com/questions/50404970/web-components-pass-data-to-and-from/50416836