npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@iktos/helm-visualisation

v1.0.0

Published

Library for parsing HELM strings and generating SVG representation of this HELM

Downloads

4

Readme

HELM Visualisation Library

This library was created for parsing and creating SVG representation of any HELM string

Getting started

For using this library install it via npm

npm i helm-visualisation

Documentation

There are two parts of representation: parse HELM string and generate SVG from received object.

parse

parse function is used to parse a HELM string into a special object with data about monomers and connections between monomers and chains.

To use this function you need to import it from the package and call it with HELM string as an argument.

| argument | required | default | description | |------------|----------|-----------|-----------------------| | HELMString | true | undefined | String in HELM format |

import { parse } from 'helm-visualisation';

const parsedObject = parse('PEPTIDE1{A}$$$');

Returned result format:

{
    sequences: [
      {
        monomers: ["A", "C"],
        links: [0, 1],
        shape: 5
      },
      {
        monomers: ["A", "C"],
        links: [],
        shape: 5,
      },
    ],
    connectionsBetweenSequences: [
      seqFrom: {
        seqIndex: 0,
        monomerIndex: 1,
      },
      seqTo: {
        seqIndex: 1,
        monomerIndex: 0,
      },
    ],
}

generateSVG

generateSVG function gets object from result of parse function and provides SVG object based on it. It also takes a few more arguments:

| argument | required | default | description | |------------------|----------|-----------|-------------| | data | true | undefined | An object that is result of parse function after handling a HELM string | | originalSequence | false | undefined | array with chains of parsed HELM string to compare monomers from data and highlight mismatches | | seqIndex | false | undefined | index of a sequence to be put as metadata for rendered monomers (useful in case of many sequences) | | linear | false | false | if true - generates svg where each chain is just a line, otherwise - if there is some connection between monomers in one chain, builds it as a circle structure |

Usage:

import { generateSVG } from 'helm-visualisation';

const svg = generateSVG(parsedHELMString, undefined, 1, true);

config

config is an object with settings for visualisation. Access to this object is provided for read only purpose if you need to use some sizes or colors outside of lib.

Available settings

| name | value | description | |--------------------------------|---------|-------------| | colorSchema | Object | object with colors for rendering (see colorSchema) | | polymerShapes | Object | | | connectionLineWidth | 2 | width of connection line | | defaultConnectionLineLength | 40 | length of connection line between monomers in same linear chain | | internalConnectionPadding | 10 | space between links in one linear chain | | internalConnectionHeight | 40 | size between monomers and lowest connection line | | marginBetweenSubSequences | 15 | space between chains | | monomerEdgeWidth | 2 | monomer item's edge size | | monomerSize | 40 | size of monomer item | | cLinkAngleCorrectionInternal | 15 | size of incline for C links inside of sequence | | cLinkAngleCorrectionExternal | 40 | size of incline for C links between sequences |

import { config } from 'helm-visualisation';

console.log(config.monomerSize); // 40

colorSchema

You can provide your own color schema for rendering sequences. It should be the following shape

{
  default: {
    background: string;
    color: string;
    border: string;
  };
  indexNumberColor: string;
  linkColor: string;
  comparison: {
    equal: {
      background?: string;
      color?: string;
      border?: string;
    };
    notEqual: {
      background?: string;
      color?: string;
      border?: string;
    };
  };
  monomers: {
    [key: string]: {
      background?: string;
      color?: string;
      border?: string;
    };
  };
}

Your custom color schema should contain full default object and fields equal, notEqual and monomers should be at least empty objects

setConfig

You can use your own config or part of your own rules with setConfig function. It takes only one parameter newConfig which is an object with some or all new values (see config). Returns updated config object.

| name | value | description | |-----------|--------|-----------------------| | newConfig | Object | see config |

import { setConfig } from 'helm-visualisation';

const newConfig = {
  monomerSize: 35,
};

const updatedConfig = setConfig(newConfig);

resetConfig

resetConfig function just restores the default configuration from the library

import { resetConfig } from 'helm-visualisation';

const defaultConfig = resetConfig();