@swissprot/rhea-reaction-viz-test NPM

rhea-reaction-visualizer

Custom HTMLELement for visualizing the reactions of Rhea, an expert curated resource of biochemical reactions.

Usage

Installation

npm i @swissprot/rhea-reaction-viz-test

Import in app

import '@swissprot/rhea-reaction-viz-test';

Attributes

Attribute name	Function
rheaid	Rhea reaction ID (integer without RHEA prefix)
styleids	style template to give custom styling to the webcomponent

Example

index.html file

HTML

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE 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

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

rhea reactions biojs chemical reactions visualizer

normalize.css tippy.js

3 months ago

3 months ago

9 months ago

9 months ago

11 months ago