rhea-reaction-visualizer
Custom HTMLELement for visualizing the reactions of Rhea, an expert curated resource of biochemical reactions.
Usage
Installation
npm i --save-dev @swissprot/rhea-reaction-visualizer Import in app
import '@swissprot/rhea-reaction-visualizer';Attributes
| Attribute name | Function |
|---|---|
| rheaid | Rhea reaction ID (integer without RHEA prefix) |
| showids | show reaction and participant IDs (default is false) |
| zoom | show zoom links on reaction participants (default is false) |
Note: The zoom functionality can be used to show higher resolution images of the participants. If it is enabled, you can attach an eventhandler 'zoomClicked' to the 'rhea-reaction' element to get the corresponding participant details:
document.querySelector('rhea-reaction').addEventListener('zoomClicked', e => console.log(e.detail));The 'detail' object has two attributes: chebi and imgURL
| Attribute name | Function |
|---|---|
| chebi | ChEBI ID of the participant |
| imageURL | URL of the zoomed image of the participant |
Example
index.html file
HTML
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Rhea reaction visualizer</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="./style.css" />
<script src="https://unpkg.com/@webcomponents/custom-elements"></script>
<script type="module" src="./index.js"></script>
</head>
<body>
<div class="webPage">
<rhea-reaction rheaid="16505" zoom showids></rhea-reaction>
<rhea-reaction rheaid="41740" zoom showids></rhea-reaction>
<rhea-reaction rheaid="37087" zoom showids></rhea-reaction>
<rhea-reaction rheaid="15845" zoom showids></rhea-reaction>
</div>
<script type="text/javascript">
Array.from(document.querySelectorAll('rhea-reaction'))
.forEach(el => el.addEventListener('zoomClicked', e => {
console.log("zoom clicked for compound with details " + JSON.stringify(e.detail));
alert("zoom clicked for compound with details " + JSON.stringify(e.detail));
}));
</script>
</body>
</html>Javascript
index.js file
import '@swissprot/rhea-reaction-visualizer';CSS
style.css file
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;
}