@swissprot/rhea-reaction-visualizer
Version:
Custom HTMLELement for rendering Rhea reactions
104 lines (87 loc) • 2.51 kB
Markdown
# rhea-reaction-visualizer
Custom HTMLELement for visualizing the reactions of [Rhea](https://www.rhea-db.org), an expert curated resource of biochemical reactions.
## Usage
### Installation
```javascript
npm i @swissprot/rhea-reaction-visualizer
```
### Import in app
```javascript
import '@swissprot/rhea-reaction-visualizer';
```
### Attributes
| Attribute name | Function |
| ---------------|----------|
| rheaid | Rhea reaction ID (integer without RHEA prefix) |
| styleid | style template to give custom styling to the webcomponent |
### Example
index.html file
#### HTML
```html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<template id="styles">
<style>
a {
color:black
}
</style>
</template>
<div class="webPage">
<div class="title"> Polymer reaction</div>
<rhea-visualizer styleid="styles" zoom rheaid="23152"></rhea-visualizer>
<div class="title"> General small molecule reaction</div>
<rhea-visualizer styleid="styles" rheaid="23240"></rhea-visualizer>
<div class="title"> General small molecule reaction with default as reaction tab</div>
<rhea-visualizer reactiontab styleid="styles" rheaid="23240"></rhea-visualizer>
<div class="title"> Slightly bigger molecule</div>
<rhea-visualizer styleid="styles" rheaid="23248"></rhea-visualizer>
<div class="title"> Generic with * atom</div>
<rhea-visualizer styleid="styles" rheaid="23172"></rhea-visualizer>
<div class="title"> Generic with positional information</div>
<rhea-visualizer styleid="styles" rheaid="42396"></rhea-visualizer>
</div>
</body>
</html>
```
#### Javascript
index.js file
```javascript
import '@swissprot/rhea-reaction-visualizer';
```
#### CSS
style.css file
```javascript
html, body {
width: 100%;
height: 99%;
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
font-size: 24px;
}
.webPage {
display: flex;
flex-direction: column;
align-items: stretch;
min-height: 100%;
margin-top: 10px;
margin-left: 20px;
margin-right: 10px;
}
a.participantId {
font-size: 55%;
cursor: default;
}
rhea-reaction {
border-bottom: 1px grey dotted;
margin-top: 20px;
}
```