@iktos/helm-visualisation v1.0.0

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.

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:

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

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.

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