Code Monkey home page Code Monkey logo

newt's Introduction

Newt: A Sample Application for ChiSE

Newt is a sample application for the web based library named ChiSE developed to visualize and edit the pathway models represented by process description (PD) and activity flow (AF) languages of SBGN or in simple interaction format (SIF).

Software

ChiSE and this sample application are distributed under GNU Lesser General Public License.

A deployment of this sample application along with detailed documentation on its usage can be found here. ChiSE and Newt work on every platform that have JavaScript support including mobile devices.

Please cite the following when you use Newt:

H. Balci, M.C. Siper, N. Saleh, I. Safarli, L. Roy, M. Kilicarslan, R. Ozaydin, A. Mazein, C. Auffray, O. Babur, E. Demir and U. Dogrusoz, Newt: a comprehensive web-based tool for viewing,constructing, and analyzing biological maps, Bioinformatics, 37(10), pp.1475-1477, 2021.

Running a Local Instance

In order to deploy and run a local instance of the tool, please follow the steps below (we recommend the use of LTS version 12.16.1 of node.js):

  • Installation
git clone https://github.com/iVis-at-Bilkent/newt.git
cd newt
npm install 
  • Running the tool (Windows)
npm run debug-build
  • Running the tool (MacOS/Linux)
sudo npm run debug-build

Then, open a web browser and navigate to localhost. Please note that the default port is 80 but you might have to run this application in another port such as 8080 in some platforms by setting 'port' environment variable.

Credits

Icons made by Freepik, Daniel Bruce, TutsPlus, Robin Kylander, Catalin Fertu, Yannick, Icon Works, Flaticon and licensed with Creative Commons BY 3.0

Third-party libraries: Cytoscape.js, a-color-picker, Backbone, Bootstrap, FileSaver.js, jQuery, jquery-expander, Konva, Libxmljs, lodash, underscore, express, browserify, nodemon, Parallel Shell, Tippyjs, nodemailer, body-parser, multer licensed with MIT; Mousetrap, Request licensed with Apache-2.0, Intro.js licensed with GNU AGPL, and chroma-js licensed with this.

We refer the user to GeneCards for detailed properties of genes. Similarly, we pull properties of simple chemicals from ChEBI. CellDesigner conversion is performed through this library and its associated service. Finally, SBML conversion is due to this Minerva service.

Team

Alumni

newt's People

Contributors

ahmetcandiroglu avatar canbax avatar dorukcakmakci avatar fdurupinar avatar hasanbalci avatar irfan-ansari-au28 avatar istemi-bahceci avatar ivanovaos avatar kaansancak avatar kinimesi avatar meneskaraca avatar mervekilicarslan5 avatar metincansiper avatar mobizaman avatar msalihaltun avatar nasimsaleh avatar noormuhammad1 avatar royludo avatar rumeysaozaydin avatar selbiereshova avatar ucalis avatar ugurdogrusoz avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

newt's Issues

Custom property tooltip help

"None of the two fields will be checked for validation." ->
"Neither of the fields will be checked for validation."

Select all nodes and/or edges

In cases the user would like to select all objects, all nodes or all edges, they should be able to do that under the View menu as follows:

View >
Select >
All Nodes and Edges (Note that Ctrl/Cmd-A already provides a shortcut for this)
All Nodes
All Edges

Select should go as the first operation of the View menu.

Decrease highlight border width

Current highlight (see Highlight menu) border width is too big (especially with reduced default node sizes), we should decrease it to be a reasonable value.

Problems with undo of compounds

Bug works with both compartments and complexes.
Select a compound (let's call it C1) with subunits inside. Edit > Add a compound. This creates C2 with C1 inside.
Undo this action. C2 disappears as expected, but the subunits inside C1 disappear.
Redo it. C2 reappears with the subunits.
Undo it again. This time only C2 disappears and the subunits behave normally.

Edge bend point bugs

When an edge with a bend point is involved, all the following actions generate a stacktrace:

  • copy/pasting that edge
  • adding a compound via Edit > Add Complex/Compartment menu around a node linked to this edge
  • changing parents for a node linked to this edge

Crash on load

When you load pretty much anything (at least all I tried), you get an error (uncaught TypeError).

Full sized Newt with auto-adjusting sub-windows

As discussed today, we'd like to improve the Newt window in certain ways:

  • get rid of the unused spaced on the left and right
  • make tab panel (inspector, palette, etc.) width dynamic w.r.t. window dimensions so that we (almost) never get to see horizontal scrollbars. For instance, palette rows should contain less nodes/edges when window is smaller
  • prevent issues like #20 by making sure the canvas/drawing area is properly resized as the Newt window is resized

Save error

When you try to save the default graph, we get an error:
Uncaught TypeError: Cannot read property '1' of null
at rgb2hex (bundle.js:2130)
at getXmlValidColor (bundle.js:2154)
at Object.appUtilities.getAllStyles (bundle.js:2112)
at HTMLButtonElement. (bundle.js:2755)
at HTMLDocument.dispatch (bundle.js:61507)
at HTMLDocument.elemData.handle (bundle.js:61319)

Code is displayed instead of Uniprot ID

In the default map, select myosin. In the Properties from EntrezGene section, Uniprot ID row displays this:

A1L2Z2 , function (data) { return render.call(this, data, _); }, function (data) { return render.call(this, data, _); }

Named complexes

Sometimes users would like to explicitly see the names of named complexes, not just relying on member information or the inspector. Let's have a general properties option (checkbox) named "Display Labels For Named Complexes" (File > Properties). When this option is enabled, we increase complex paddings and display their labels if available. We shouldn't change paddings when labels/names aren't available to save space. When the option is disabled, we shouldn't display labels regardless of availability.
We should have this as an option in the viewer library (SBGNViz) and use it in Chise and Newt.

Change color of disabled resize grapple icon

When a node is not supposed to be resized in a certain direction, we draw the grapple unfilled and when mouse is over that grapple we also display an (no entrance kind of) icon in red. Can we change the color of this icon to black (from red)?

Compound gets selected upon addition of child

When you choose a node from the palette (not when in sustained mode), and click inside a compound to add that node into an existing compound, the node is successfully created and added as child but the compound is selected upon completion. No node should be selected as a result of node or edge creation.

Cannot move newly created process

  • Open a blank map
  • Create two macromolecules
  • Create a process between them using click on source and drag to target, which creates both the process and the associated consumption and production edges
  • Now you cannot move any of the newly created nodes

Increase max info box count

Currently we only allow 4 info boxes (state variables or units of information), we should allow more (say 8 or 12).

Backspace for delete

Looks like this problem is more general. On Mac and Windows, currently backscape doesn't do anything. Since Mac machines don't have a separate Delete key, can we perhaps have Backspace to do deletion as well?

Update/improve Quick Help

Please discuss with others to see what should/could go to Quick Help (in the About menu) and update its content. Somebody already asked for marquee / box selection (iVis-at-Bilkent/chise.js#78) to go under Quick Help for instance (Ctrl+drag in root: Start a box selection Ctrl+drag on node: Transfer a node in and out of a compound node).

Convenient process creation

When in node creation mode and the current node type is any one of the process nodes, we should allow the user to create the incident edges to the process along with the process by clicking on the substrate node and dragging it to the product node and release the mouse on it. The process node should be created right in between the substrate and the product. Let's discuss the details.

Drag and drop nodes

I think current functionality is great but ability to drag and drop of nodes from the palette into the canvas might be useful for people who are used to this kind of behavior.

Do not select newly created node or edge

By default upon node (edge) creation, we select the newly created node (edge). But this switches the active tab from Palette to Properties and forces the user to go back to the Palette to insert the next node (edge).

Further improvements for guideline support

  • Reduce default range values from 450 to 300 and from 300 to 200, respectively
  • Reduce default tolerance from 4 to 3
  • Do not enable Reference Guidelines when "Enable Guidelines" button is pressed

Convenience buttons in toolbar for grid and guidelines

Let's add a couple of convenience buttons / shortcuts for functionality for grid and guidelines as follows. These are to go at the end of the view group (Hide Selected button - Align to First Selected dropbox).

  • Button, Tooltip: "Enable Grid: Show and snap to grid on mouse release", icon:
    grid

When pressed: Show Grid: true, Snap Policy: Snap to Grid, and unpress the other button if pressed
When unpressed: Show Grid: false, Snap Policy: No Snap

When pressed: All Guidelines: true, Snap Policy: Snap to Alignment Location, and unpress the other button if pressed
When unpressed: All Guidelines: false, Snap Policy: No Snap

Buttons should be toggle buttons. When pressed, they should have the same style as the node and edge buttons (except the blue borders).

Problems with edges created by users later

From Ludovic,
Please do the followings in order to reproduce the problem,

  • Open a graph in Newt.
  • Create an edge.
  • Select it (Line color of the selected edges are supposed to be orange but you will see that it will not, but target arrow color will be orange).
  • Change its line color by inspector (You will see that the line color will not change but the target arrow color will change)
  • Change its width by inspecor (Any change will be perceieved at all)

Palette and Properties tabs improvements

  • change Style to Properties
  • when a node is selected, Properties tab should be displayed
  • title of every stackable list (except for the first one!) should be preceeded and succeeded by a line
  • the area where the title of a stackable list is should be gray
  • in Properties tab
    o "... Visual Properties" should be the title of a stackable list of properties just like "Properties from EntrezGene". However, it should not be stacked by default
  • in Palette tab
    o both lists should be not stacked by default
    o tooltips should just contain node and interaction types: "Macromolecule" instead of "Create a new macromolecule" (tooltips in the toolbar however should stay the same; longer version)
    o borders and background of currently selected node/interaction should be consistent with those in the toolbar (one click blue borders, two clicks blue borders + gray background)
    o I like using dashed lines for node/interaction selections that aren't currently active. however, I think the dashes should be shorter (almost dot dot dot...)
  • in toolbar
    o node/interaction icons should be smaller or the region allocated for these should be bigger so that the borders and the icons do not intervene with each other (let's discuss)
    o interaction icon in the toolbar is not middle aligned (left aligned)

Window resize doesn't change viewport

Start newt in maximized window size. Then click on an arbitrary node on the palette. Then resize browser window to be smaller. Now click on where the palette is (which is where we had the canvas before in maximized window size), you'll see that the node was created "behind" the palette!

Icons for context-sensitive menu items

  • check if this is feasible (needs to be done at the associated extension) and provide icons for them
  • make sure the background color for context menus is the same as the background color (gray) used in the tabs on the right side

Adding a complex breaks subunit connection rule

Subunits of a complex are not allowed to have any edges connected. Only the complex itself can have connections. When creating a complex from nodes that have edges (from Edit > Add Complex), those edges are preserved. Thus, we end up with a rule violation. The same problem arises when moving nodes in complex with ctrl+drag.

We should completely remove the edges upon inclusion in a complex.

Change highlight color

Current highlight color (dark gray) is confusing especially since default compartment borders are also gray and thick. I suggest we find a different color to highlight nodes-edges upon highlight (see Highlight menu) operations. A good candidate is the blue we use outside the canvas in menus, dialogs, etc. Notice that we should make sure to change the color of edge arrows as well.

AF support

AF support requires new palettes, new node and edge glyphs along with a map "type" that we might let the user to explicitly set or the tool might try to maintain it implicitly.

Invalid parent on node creation

The new feature to directly add a node into an existing compartment does not check whether or not the parent is valid one for the current node type (e.g. add a process into a complex).

Update for cytoscapeJS 3.x (Backwards Compatible)

We plant to upgrade to the latest version of Cytoscape.js unstable branch. Which includes the API planned for Cytoscape.js 3.1.0. Therefore, we need to handle the API revisions mentioned in 'cytoscape/cytoscape.js#1092' before the upgrade. We should do this in chise.js, sbgnviz.js, Newt, SBGNViz.js Sample Application and our extensions. An example revision in cose-bilkent extension is done in the following commit 'cytoscape/cytoscape.js-cose-bilkent@d1de4a1'

Start in Palette on Load or New

When we Load a new model or we start from scratch using New, by default the Palette should be displayed, not Properties (since nothing is selected by default)

Icon file and folder naming

  • rename app/img/toolbar-icons folder to app/img/toolbar
  • use settings.svg instead of properties.png in this directory (notice both the filename and type change here!). rename code to use "settings" instead of "properties" as well to avoid confusion with the palette items
  • delete properties.png

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.