GithubHelp home page GithubHelp logo

ebi-jdispatcher / jdispatcher-viewers Goto Github PK

View Code? Open in Web Editor NEW
1.0 1.0 0.0 11.75 MB

Interactive Visual Output and Functional Predictions visualisations for Job Dispatcher tool outputs

Home Page: https://ebi-jdispatcher.github.io/jdispatcher-viewers

License: Apache License 2.0

JavaScript 41.61% HTML 4.87% TypeScript 53.48% CSS 0.04%
fabricjs ncbi-blast interpro typescript

jdispatcher-viewers's Introduction

jdispatcher-viewers

follow on Twitter

Job Dispatcher viewers is a TypeScript module that uses Fabric.js (based on a HTML canvas) to implement interactive visualisations, Visual Output and Functional Predictions. The app is provided as a ES module, can be used as plugin and also as Web Components. A Node.js CLI application is also provided to generate static figures in SVG and PNG formats.

Live Demo

Visual Output

Visual Output is a diagram visualisation for the hit sequences of sequence similarity tools (e.g. NCBI BLAST+ and FASTA, that highlights the region of the sequences that is matching the query sequence and provides corresponding E-values. This currently works only with Job Dispatcher JobIDs, as it depends on the JSON output provided by the service.

home page

Functional Predictions

Functional Predictions is a diagram of the domain ranges that compose hit sequences of sequence similarity tools (e.g. NCBI BLAST+ and FASTA. This visualisation gives a good overview of domain location vs hit/query sequence matching. Predictions are obtained from InterPro and cover several domain databases/resources, including: Pfam, SUPERFAMILY, SMART, CATH-Gene3D, CDD, etc.

home page

Colouring Schemes

Three colouring schemes are provided.

  • Dynamic: It is based on the range of E-values (from min to max))
  • Fixed: It a fixed scale for E-values (from 0.0 to 100.0)
  • NCBI BLAST: It is a fixed scale based on NCBI-BLAST+ bit-score ranges (bit-score <40 to >=200)

Dependencies and Installation

Building the applications requires Node.js (tested with v16.16.0 and v18.7.0). Additional requirements, are downloaded and installed automatically with npm CLI. See full list of dependencies in package.json

Development server

During development, you can simply clone this repository and install all the dependencies required to run the webpack and webpack-dev-server:

npm install

To play with the development server (watches for file changes), in two terminal windows in parallel, run:

# runs a server at localhost:8080
npm run dev
# builds the package and copies index.html over to ./dist
npm run dev2

Building the application

To compile the application for production, run:

npm run build

Developing the CLI

To compile the CLI during development (watches for file changes), run:

npm run dev:cli

Building the CLI

To compile the CLI for production, run:

npm run build:cli

Running the CLI

Test the CLI by simply running (or passing the options -h or --help):

node --es-module-specifier-resolution=node bin/jd-viewers-cli.js

Testing the CLI using a mock jobId, which loads data from files under ./src/testdata.

node --es-module-specifier-resolution=node bin/jd-viewers-cli.js vo -i mock_jobid-I20200317-103136-0485-5599422-np2 -o test.png -of png -v

Passing the same local files:

node --es-module-specifier-resolution=node bin/jd-viewers-cli.js fp -i ./src/testdata/ncbiblast.json -ix ./src/testdata/iprmc.xml -o test.svg -of svg -v

Passing a valid JobId (replace with a current JobId, as this one might have expired), where the data will be fetched and stored locally:

node --es-module-specifier-resolution=node bin/jd-viewers-cli.js fp -i ncbiblast-R20200602-114955-0302-11398737-np2 -o test.svg -of svg -v

Some rendering options can be optionally passed to the CLI, including: -hits, number of hits; -hsps, number of HSPs; and -color, color scheme. For example:

node --es-module-specifier-resolution=nodebin/jd-viewers-cli.js fp -i ncbiblast-R20200602-114955-0302-11398737-np2 -o test.svg -of svg -color 'ncbiblast' -hits 50 -v

Publishing NPM package

This package has been published to NPM at @ebi-jdispatcher/jdispatcher-viewers.

# npm package under ebi-jdispatcher org
npm init --scope=@ebi-jdispatcher
# testing building the package
npm install
# publish to npm
npm publish --access public

Bug Tracking

If you find any bugs or issues please log them in the issue tracker.

Changelog

See CHANGELOG.md.

Licensing

The European Bioinformatics Institute - EMBL-EBI, is an Intergovernmental Organization which, as part of the European Molecular Biology Laboratory family, focuses on research and services in bioinformatics.

Apache License 2.0. See LICENSE for details.

jdispatcher-viewers's People

Contributors

biomadeira avatar dependabot[bot] avatar

Stargazers

 avatar

Watchers

 avatar

jdispatcher-viewers's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.