Newtonian Physics Mockumentary

    @rcsb/rcsb-saguaro
    TypeScript icon, indicating that this package has built-in type declarations

    2.1.6 • Public • Published

    rcsb-saguaro

    RCSB Saguaro 1D Feature Viewer is an open-source TypeScript library used to display protein and genomic sequence annotations over the web. The project is developed and maintained at RCSB PDB and it is currently used to display protein features on its web site. The package offers multiple types of data displays and a rich set of options to customize feature visualization.

    Node Module Instalation

    npm install @rcsb/rcsb-saguaro

    CDN JavaScript

    <script src="https://cdn.jsdelivr.net/npm/@rcsb/rcsb-saguaro/build/rcsb-saguaro.js" type="text/javascript"></script>

    Library Documentation

    TypeScript full classes documentation can be found here.

    Main Classes and Interfaces

    These are the most important elements if you are only interested in using RCSB Saguaro to visualise protein annotations

    • RcsbFv: Main feature viewer class that can be used to create, configure and render a feature viewer object. It includes different methods to change viewer configuration, add new tracks, replace or update track data or change track visibility
    • RcsbFvBoardConfigInterface: Feature viewer configuration interface that defines the different properties to configure the feature viewer main panel including track title and annotation cells width, activate tooltips flag and annotation click and hovering callbacks
    • RcsbFvRowConfigInterface: This interface can be used to set up the configuration for feature viewer tracks. It includes multiple properties that define how track features are displayed (color, shape, overlap flag) and also different track attributes (background color, track height, track title, track visibility)
    • RcsbFvTrackDataElementInterface Interface that defines properties of an specific annotation object. It includes the location where the annotation will be displayed (begin, end) and additional properties to change the final representation and click-event behaviour

    General Board and Track Configuration

    Board Configuration

    Main feature viewer board object configuration defines the coordinate range, track and title width and axis display. The full set of attributes is defined in RcsbFvBoardConfigInterface interface.

    Main Board Configuration properties are:

    • range: Object that defines the 1D domain coordinates segment as a range of sequential integer values
      • min: Numerical value that defines the coordinates start position
      • max: Numerical value that defines the coordinates end position
    • trackWidth: Numerical value that defines the width of the board cells that contains the feature
    • rowTitleWidth: Numerical value that defines the width of the row title cells
    • includeAxis: Boolean flag used to include a 1D horizontal axis on the top part of the board
    const boardConfig = {
        range: {
            min: 20,
            max: 110
        },
        trackWidth: 940,
        rowTitleWidth: 260,
        includeAxis: true
    };

    Track Configuration

    Row configuration object defines format and content of feature viewer rows. The full set of board row configuration attributes is defined in RcsbFvRowConfigInterface.

    Main Row Configuration properties are:

    • trackHeight: Defines the board row height
    • trackColor: Color in which row data will be displayed
    • rowTitle: Board track title, text displayed next to the board row
    • displayType: Enumerated value used to define how the data is displayed
      • Values: sequence, block, pin, line, area, bond, vline
    • trackData: List of data displayed in the board row. The full set o data attributes are defined in RcsbFvTrackDataElementInterface. Most important data elements attributes are
      • begin: Start position of the feature
      • end: End position of the feature (optional value). When no end value is available the feature is located on a single position defined by begin
      • value: Numerical or string value of the feature in this range (optional value)
      • gaps: List of empty regions in the feature. These regions are displayed as a dashed line between blocks. This attribute is only available when displayType is "block"
        • Attributes: begin, end

    Track Configuration Examples

    • Sequence Track
    const sequence = "MTEYKLVVVGAGGVGKSALTIQLIQNHFVDEYDPTIEDSYRKQVVIDGETCLLDILDTAGQ"+
                     "EEYSAMRDQYMRTGEGFLCVFAINNTKSFEDIHQYREQIKRVKDSDDVPMVLVGNKCDLAA"+
                     "RTVESRQAQDLARSYGIPYIETSAKTRQGVEDAFYTLVREIRQHKLRKLNPPDESGPGCMS"
    const sequenceTrack = {
        trackHeight: 20,
        trackColor: "#F9F9F9",
        displayType: "sequence",
        rowTitle: "SEQUENCE",
        trackData: [{
            begin: 1,
            value: sequence
        }]
    }
    • Block Track
    const blockTrack= {
        trackId: "blockTrack",
        trackHeight: 20,
        trackColor: "#F9F9F9",
        displayType: "block",
        displayColor: "#FF0000",
        rowTitle: "BLOCK",
        trackData: [{
            begin: 30,
            end: 60,
            gaps:[{
                begin:40,
                end:50
            }]
        },{
            begin: 80,
            end: 90,
            openEnd: true
        }]
    }

    Feature View Constructor

    const pfv = new RcsbFv.Create({
        boardConfigData: boardConfig,
        rowConfigData: [sequenceTrack, blockTrack],
        elementId: "htmlElementId"
    });

    See this expanded example online here

    More Examples

    The full collection of examples can be edited and modified at CODEPEN

    rcsb-saguaro-app

    We also provide a library (rcsb-saguaro-app) to build preconfigured 1D Protein Feature Views of RCSB PDB and UniProtKB annotations.

    Contributing

    All contributions are welcome. Please, make a pull request or open an issue.

    License

    The MIT License

    Copyright (c) 2019 - now, RCSB PDB and contributors
    

    Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

    The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

    Install

    npm i @rcsb/rcsb-saguaro

    DownloadsWeekly Downloads

    541

    Version

    2.1.6

    License

    MIT

    Unpacked Size

    3.87 MB

    Total Files

    60

    Last publish

    Collaborators

    • chunxiao.bi
    • ingvord
    • robert.lowe
    • bioinsilico
    • yana.rose
    • sebastian.bittrich