0.0.23 • Published 1 year ago

@swissprot/rhea-reaction-visualizer v0.0.23

Weekly downloads
126
License
ISC
Repository
-
Last release
1 year ago

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 nameFunction
rheaidRhea reaction ID (integer without RHEA prefix)
showidsshow reaction and participant IDs (default is false)
zoomshow 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 nameFunction
chebiChEBI ID of the participant
imageURLURL 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;
}
0.0.22

1 year ago

0.0.23

1 year ago

0.0.21

3 years ago

0.0.20

3 years ago

0.0.18

4 years ago

0.0.17

4 years ago

0.0.16

4 years ago

0.0.15

4 years ago

0.0.14

4 years ago

0.0.13

4 years ago

0.0.12

4 years ago

0.0.11

4 years ago

0.0.10

4 years ago

0.0.9

4 years ago

0.0.8

4 years ago

0.0.7

4 years ago

0.0.6

4 years ago

0.0.5

4 years ago

0.0.4

4 years ago

0.0.3

4 years ago

0.0.2

5 years ago

0.0.1

5 years ago