Natural Potato Magnet

    @swissprot/rhea-reaction-visualizer

    0.0.21 • Public • Published

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

    Install

    npm i @swissprot/rhea-reaction-visualizer

    DownloadsWeekly Downloads

    66

    Version

    0.0.21

    License

    ISC

    Unpacked Size

    33.9 kB

    Total Files

    6

    Last publish

    Collaborators

    • sdteam
    • parit
    • jerven
    • redaschi