iVis-at-Bilkent/chise.js

Name: chise.js

Owner: iVis-at-Bilkent

Description: A web application to visualize and edit the pathway models represented by SBGN Process Description Notation

Created: 2016-06-24 11:48:12.0

Updated: 2017-12-13 19:34:58.0

Pushed: 2017-12-19 11:41:35.0

Homepage: http://www.cs.bilkent.edu.tr/~ivis/ChiSE_sample_app/

Size: 4957

Language: JavaScript

GitHub Committers

UserMost Recent Commit# Commits

Other Committers

UserEmailMost Recent Commit# Commits

README

ChiSE version 1

ChiSE is a web application based on SBGNViz.js, which in turn is based on cytoscape.js, to visualize and edit the pathway models represented by SBGN Process Description (PD) and Activity Flow (AF) Notation. It accepts the pathway models represented in SBGN-ML format, and can save edited pathways back to the same format as well as static image formats (PNG, JPEG, and SVG).

Software

ChiSE is distributed under GNU Lesser General Public License.

A sample application using ChiSE can be found here.

Please cite the following when you use ChiSE.js:

M. Sari, I. Bahceci, U. Dogrusoz, S.O. Sumer, B.A. Aksoy, O. Babur, E. Demir, “SBGNViz: a tool for visualization and complexity management of SBGN process description maps“, PLoS ONE, 10(6), e0128985, 2015.

Default Options
var options = {
    // The path of core library images when sbgnviz is required from npm and the index html 
    // file and node_modules are under the same folder then using the default value is fine
    imgPath: 'node_modules/sbgnviz/src/img',
    // Whether to fit labels to nodes
    fitLabelsToNodes: function () {
      return false;
    },
    // dynamic label size it may be 'small', 'regular', 'large'
    dynamicLabelSize: function () {
      return 'regular';
    },
    // Whether to infer nesting on load 
    inferNestingOnLoad: function () {
      return false;
    },
    // percentage used to calculate compound paddings
    compoundPadding: function () {
      return 10;
    },
    // Whether to adjust node label font size automatically.
    // If this option returns false, do not adjust label sizes according to node heights; use node.data('font-size')
    // instead.
    adjustNodeLabelFontSizeAutomatically: function() {
      return true;
    },
    // The selector of the component containing the sbgn network
    networkContainerSelector: '#sbgn-network-container',
    // Whether the actions are undoable, requires cytoscape-undo-redo extension
    undoable: true,
    // Whether to have undoable drag feature in undo/redo extension. This option will be passed to undo/redo extension.
    undoableDrag: true
  };
ChiSE Specific Data
odes specific data.
.data('id'); // Id of a node. (Specific to cytoscape.js)
.data('label'); // Label of a node. 'content' of elements are controlled by this data.
.data('parent'); // Parent id of a node. (Specific to cytoscape.js)
.data('class'); // SBGN specific class of a node. If it ends with 'multimer' it means that this node is a multimer.
.data('clonemarker'); // Whether the node is cloned.
.data('bbox'); // Bounding box of a node includes bbox.x, bbox.y, bbox.w, bbox.h. 'width' and 'height' style of elements are mapped by bbox.w and bbox.h
.data('ports'); // Ports list of a node. A node port includes port.id, port.x, port.y where port.x and port.y are percentages relative to node position and size.
.data('statesandinfos'); // Includes state and information boxes list of a node.
.data('font-size'); // If the font sizes of the nodes are not automatically adjusted (controlled by adjustNodeLabelFontSizeAutomatically option) their 'font-size' style is adjusted by this data.
.data('font-family');// 'font-family' style of nodes are controlled by this data.
.data('font-style');// 'font-style' style of nodes are controlled by this data.
.data('font-weight');// 'font-weight' style of nodes are controlled by this data.
.data('background-color');// 'background-color' style of nodes are controlled by this data.
.data('background-opacity');// 'background-opacity' style of nodes are controlled by this data.
.data('border-color');// 'border-color' style of nodes are controlled by this data.
.data('border-width');// 'border-width' style of nodes are controlled by this data.
 stateorinfobox includes the followings.
stateorinfobox = node.data('statesandinfos')[i];
eorinfobox.id; // Id of that box.
eorinfobox.clazz; // See whether that box is related to a 'unit of information' or a 'state variable'.
eorinfobox.bbox; // Bbox of that box. Includes bbox.x, bbox.y, bbox.w, bbox.h where bbox.x and bbox.y are percentages relative to node position and size.
eorinfobox.state; // Just included in state variables. Includes state.value and state.variable.
eorinfobox.label; // Just included in units of information includes label.text.
dges specific data.
.data('id'); // Id of an edge. (Specific to cytoscape.js)
.data('source'); // Id of source node. (Specific to cytoscape.js)
.data('target'); // Id of target node. (Specific to cytoscape.js)
.data('class'); // SBGN specific class of an edge.
.data('cardinality'); // SBGN cardinality of an edge.
.data('portsource'); // This is set if the edge is connected to its source node by a specific port of that node.
.data('porttarget'); // This is set if the edge is connected to its target node by a specific port of that node.
.data('bendPointPositions'); // Bend point positions of an edge. Includes x and y coordinates. This data is to be passed to edgeBendEditing extension.
.data('width');// 'width' style of edges are controlled by this data.
.data('line-color');// 'line-color' style of edges are controlled by this data.
API

ChiSE.js is built at the top of SBGNViz.js and any method exposed by SBGNViz.js is exposed in ChiSE.js as well (SBGNViz.js API). Other ChiSE.js API is presented below.

chise.register(options) Register with libraries before creating instances

var instance = chise(options) Creates an extension instance with the given options

instance.getSbgnvizInstance() Get the Sbgnviz.js instance created for this Chise.js instance.

instance.getCy() Get the Cytoscape.js instance created for this Chise.js instance.

instance.addNode(x, y , nodeclass, id, parent, visibility) Adds a new node with the given class and at the given coordinates. Optionally you can set the id, parent and visibility of the node. Considers undoable option.

instance.addEdge(source, target , edgeclass, id, visibility) Adds a new edge with the given class and having the given source and target ids. Optionally you can set the id and visibility of the node. Considers undoable option.

instance.addProcessWithConvenientEdges(source, target , processType) Adds a process with convenient edges. For more information please see 'https://github.com/iVis-at-Bilkent/newt/issues/9'. Considers undoable option.

instance.cloneElements(eles) Clone given elements. Considers undoable option. Requires cytoscape-clipboard extension.

instance.copyElements(eles) Copy given elements to clipboard. Requires cytoscape-clipboard extension.

instance.pasteElements(eles) Paste the elements copied to clipboard. Considers undoable option. Requires cytoscape-clipboard extension.

instance.align(nodes, horizontal, vertical, alignTo) Aligns given nodes in given horizontal and vertical order. Horizontal and vertical parameters may be 'none' or undefined.
alignTo: indicates the leading node. Requires cytoscape-grid-guide extension and considers undoable option.

instance.createCompoundForGivenNodes(nodes, compoundType) Create compound for given nodes. compoundType may be 'complex' or 'compartment'. This method considers undoable option.

instance.changeParent(nodes, newParent, posDiffX, posDiffY) Move the nodes to a new parent and change their position if possDiff params are set. Considers undoable option and checks if the operation is valid.

instance.createTemplateReaction(templateType, macromoleculeList, complexName, processPosition, tilingPaddingVertical, tilingPaddingHorizontal, edgeLength) Creates a template reaction with given parameters. Requires cose-bilkent layout to tile the free macromolecules included in the complex. Considers undoable option. Parameters are explained below.
templateType: The type of the template reaction. It may be 'association' or 'dissociation' for now.
macromoleculeList: The list of the names of macromolecules which will involve in the reaction.
complexName: The name of the complex in the reaction.
processPosition: The modal position of the process in the reaction. The default value is the center of the canvas.
tilingPaddingVertical: This option will be passed to the cose-bilkent layout with the same name. The default value is 15.
tilingPaddingHorizontal: This option will be passed to the cose-bilkent layout with the same name. The default value is 15.
edgeLength: The distance between the process and the macromolecules at the both sides.

instance.resizeNodes(nodes, newParent, posDiffX, posDiffY) Resize given nodes if useAspectRatio is truthy one of width or height should not be set. Considers undoable option.

instance.changeNodeLabel(nodes, label) Changes the label of the given nodes to the given label. Considers undoable option.

instance.changeFontProperties(nodes, data) Change font properties for given nodes use the given font data. Considers undoable option.

instance.changeStateOrInfoBox(nodes, index, value, type) Change state value or unit of information box of given nodes with given index. Considers undoable option.
type indicates whether to change value or variable, it is valid if the box at the given index is a state variable.
value parameter is the new value to set.
It returns the old value of the changed data (we assume that the old value of the changed data was the same for all nodes).

instance.addStateOrInfoBox(nodes, obj) Add a new state or info box to given nodes. The box is represented by the parameter obj. Considers undoable option.

instance.removeStateOrInfoBox(nodes, index) Remove the state or info boxes of the given nodes at given index. Considers undoable option.

instance.setMultimerStatus(nodes, status) Set multimer status of the given nodes to the given status. Considers undoable option.

instance.setCloneMarkerStatus(nodes, status) Set clone marker status of given nodes to the given status. Considers undoable option.

instance.changeCss(eles, name, value) Change style/css of given eles by setting given property name to the given value/values (Note thatvalue` parameter may be a single string or an id to value map). Considers undoable option. (From cytoscape.js documentation: 'You should use this function very sparingly, because it overrides the style of an element, despite the state and classes that it has.')

instance.changeData(eles, name, value) Change data of given eles by setting given property name to the given value/values (Note that value parameter may be a single string or an id to value map). Considers undoable option.

instance.showAndPerformLayout(eles, layoutparam) Unhide given eles and perform given layout afterward. layoutparam parameter may be layout options or a function to call. Requires viewUtilities extension and considers undoable option.

instance.elementUtilities General and sbgn specific utilities for cytoscape elements. Extends sbgnviz.elementUtilities, you can find the ChiSE extensions for sbgnviz.elementUtilities below.

instance.undoRedoActionFunctions Functions to be utilized in defining new actions for cytoscape.js-undo-redo extension. These are exposed for the users who builds an extension library of chise. Extends sbgnvizInstance.undoRedoActionFunctions, you can find the ChiSE extensions for sbgnvizInstance.undoRedoActionFunctions below.

Events

$(document).on('sbgnvizLoadSample', function(event, filename, cy) { ... }); Triggered when a sample is being loaded

$(document).on('sbgnvizLoadFile', function(event, filename, cy) { ... }); Triggered when an external sbgnml file is being loaded

$(document).on('updateGraphStart', function(event, cy) { ... }); Triggered when the graph update is just started

$(document).on('updateGraphEnd', function(event, cy) { ... }); Triggered when the graph update is ended

Dependencies
Optional Dependencies

The following extensions are used by this library if they are registered.

Usage instructions

Download the library:

require() the library as appropriate for your project:

CommonJS:

sbgnviz = require('sbgnviz');
cytoscape = require('cytoscape-for-sbgnviz');
jQuery = require('jQuery');
filesaverjs = require('filesaverjs');
sbgnviz = require('sbgnviz');

options = {


libs = {
cytoscape: cytoscape,
jQuery: jQuery,
filesaverjs: filesaverjs,
sbgnviz: sbgnviz


e( options, libs );

In plain JS you do not need to require the libraries you just need to register chise with the options.

Publishing instructions

This project is set up to automatically be published to npm. To publish:

  1. Set the version number environment variable: export VERSION=1.2.3
  2. Publish: gulp publish
Credits

Thanks to JetBrains for an Open Source License

Team
Alumni
This work is supported by the National Institutes of Health's National Center for Advancing Translational Sciences, Grant Number U24TR002306. This work is solely the responsibility of the creators and does not necessarily represent the official views of the National Institutes of Health.