README

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;
}

Usage no npm install needed!