helm-visualisation

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();