iVis-at-Bilkent / newt

A web application to visualize and edit pathway models
http://newteditor.org
GNU Lesser General Public License v3.0
53 stars 27 forks source link

SBML UI, palette and legend improvements #734

Closed ugurdogrusoz closed 3 months ago

ugurdogrusoz commented 3 months ago

We need to address some enhancements (thanks @adrienrougny) before the release in SBML:

umut-er commented 3 months ago

Commits above are misnamed. They are supposed to be initial commits on items 2,3 and a complete fix on item 5.

umut-er commented 3 months ago

For item 4, i don't understand the ordering at all. Can you clearly mark what is column 1, column 2, etc...

ugurdogrusoz commented 3 months ago

For item 4, I changed the description.

umut-er commented 3 months ago
image

When you select some nodes in the palette, their blue border is not centered. See with gene on the SBML palette. @ugurdogrusoz can you add this to the list?

umut-er commented 3 months ago

Please check items 2, 3, 4, 5.

For item 1, we want two stadium shapes, one inside the other, right (like the current drug node)? And from what I understand the stadium shape is defined as a rectangle with half circles as the side borders. Let me know if that is accurate.

Item 6, the centering problem affects 3 nodes (that I can detect). Those being gene, ion channel and drug. I will fix the drug node while resolving item 1.

umut-er commented 3 months ago

For item 6, I have this (left is old, right is new). I tried to match them horizontally and not so much vertically:

imageimage imageimage

For the other two I didn't change much. If you like this new one, I can push it to the internal server. Keep in mind that the drug node will change.

adrienrougny commented 3 months ago

Could it be possible to have more divisions than just the nodes/arc divisions? For example one for the EPNs, another one for the logical operators, another one for the process nodes, etc.?

umut-er commented 3 months ago

I don't see why it shouldn't be possible. Please write exactly how you want the divisions to be and I will see what I can do.

adrienrougny commented 3 months ago

Please check items 2, 3, 4, 5.

For item 1, we want two stadium shapes, one inside the other, right (like the current drug node)? And from what I understand the stadium shape is defined as a rectangle with half circles as the side borders. Let me know if that is accurate.

Item 6, the centering problem affects 3 nodes (that I can detect). Those being gene, ion channel and drug. I will fix the drug node while resolving item 1.

The drug glyph is indeed two times a rectangle with half circles when w >= h, but in CellDesigner it is not half circles anymore when w < h (see attached). Not sure you want to have it like in CellDesigner though. The stadium shape is also used for the Simple chemical glyph in the PD palette (though here, when w < h, the two half circles are made vertical). drug

adrienrougny commented 3 months ago

For the PD palette I would suggest:


7 first nodes (from macromolecule to empty set)


6 following nodes, from the phenotype to the dissociation (and phenotype could be put at the end)


compartment


3 logical operators


submap and terminal/tag


consumption and producation arcs


all the modulation arcs


logic arc and equivalence arc

adrienrougny commented 3 months ago

For the SBML palette I would suggest the divisions and orders of CellDesigner:


13 first nodes: protein, protein receptor, ion channel, truncated protein, gene, rna, antisense rna, phenotype, ion, simple molecule, drug, unknown, complex, degraded


6 following nodes: state transition, known omitted state transition, unknown transition, heterodimer association, dissociation, truncation


compartment


the four logical operators


consumption, production, transcription consumption, transcription production, translation consumption, translation production, transport production


catalysis, unknown catalysis, inhibition, unknown inhibition, physical stimulation, modulation, trigger


positive influence, unknown positive influence, unknown physical stimulation, unknown modulation, unknown trigger

ugurdogrusoz commented 3 months ago

Please check items 2, 3, 4, 5.

5 is not fixed (nodes that are square are not; same with edge arrows)

For item 1, we want two stadium shapes, one inside the other, right (like the current drug node)? And from what I understand the stadium shape is defined as a rectangle with half circles as the side borders. Let me know if that is accurate.

Yes, correct.

ugurdogrusoz commented 3 months ago

Let's organize (with separators) the nodes and edges in the Palette as @adrienrougny suggests. We should have the same ordering in the Legends (no separation and column by column as before).

ugurdogrusoz commented 3 months ago

The drug glyph is indeed two times a rectangle with half circles when w >= h, but in CellDesigner it is not half circles anymore when w < h (see attached). Not sure you want to have it like in CellDesigner though. The stadium shape is also used for the Simple chemical glyph in the PD palette (though here, when w < h, the two half circles are made vertical).

Let's use the same UI/shape (stadium) as PD simple chemical but wider by default (current dimensions are fine).

umut-er commented 3 months ago

5 is not fixed (nodes that are square are not; same with edge arrows)

Can you say what nodes and edges are problematic? I focused on modulation arcs and process nodes. Is there something I am missing?

umut-er commented 3 months ago

The new drug shape and all related svg images (sidebar icon and legend) has been added. Please review it after the server is rebuilt. 6 should also be fine for review. I am moving on to item 4 and waiting for the list of stretched nodes for item 5. Just a note, in some of the edges (positive / negative influence, transcription consumption etc.), I used the gene node as a demonstration, which is a rectangle. I checked the process nodes in the svg and they seem to be squares.

umut-er commented 3 months ago

For item 4, if we are going to seperate based on common functionality, what about labeling them as well? I went ahead and created a visual for you below. If you like it, I can implement it. Please feel free to make suggestions. Also, please make a list of what the labels should be on the current seperator plan if you want it to be implemented.

image

This is the PD version, names are taken from this link:

image
umut-er commented 3 months ago

I have pushed the change above so you can look at it in the internal server. We can go back to the original easily as well.

umut-er commented 3 months ago

Just as a summary: Please check 1, 4, 6 and for 5 tell me which nodes / edges are stretched.

ugurdogrusoz commented 3 months ago

Item 4: for the Palette, first, some style changes to keep things compact:

PD:

AF:

SIF:

SBML:

umut-er commented 3 months ago

I think this should be ready for a complete review (all 7 items). I also changed the palette label text style to match all the other texts.

hasanbalci commented 3 months ago

IMHO, we should go back to the original version of the Palette and only separate groups by using simple separators with section titles as shown in the above comment and nothing else. We don't need to change image sizes, since they are reflecting the actual node sizes (we draw EPNs larger than logic nodes and we draw logic nodes larger than PNs, so original version is good in reflecting this). Currently, elements are left-aligned but it causes unnecessary empty space on the right, so they should also be aligned in the center like in the original version.

umut-er commented 3 months ago

I have pushed the fix to the centering problem. Please make the decision about whether we are going to use old images and margins on the palette. We can go back fairly easily, so that is not a concern.

ugurdogrusoz commented 3 months ago

Looks very good in general. Remaining improvements (and then we are good to go): item 4. The nodes are too close to each other in SBML palette. Let's put a bit more space between nodes in all palettes (then for example EPNs in PD will better cover their row as well). Let's also center align nodes in their respective position:

Screenshot 2024-07-19 at 16 01 18

As before, we should reflect the relative dimensions of nodes in the palette somehow. For this, we should just make process nodes in PD (except Phenotype) and SBML smaller (slightly smaller than logical operators as they are drawn on the canvas).

item 5: The two diamonds on the right should be a bit bigger to match the left one:

Screenshot 2024-07-19 at 16 03 57

item 7: This problem is resolved but by stretching narrower nodes. Each node/edge should occupy the same width but without stretching (e.g., an association is a circle, not an ellipse):

Screenshot 2024-07-19 at 16 05 50
ugurdogrusoz commented 3 months ago

Almost there:

umut-er commented 3 months ago

Can I learn the screen resolution in which the picture above is taken?

ugurdogrusoz commented 3 months ago

Can I learn the screen resolution in which the picture above is taken?

1792 x 1120

ugurdogrusoz commented 3 months ago

The palette and the toolbar are great now. The only thing left is to change the order of the nodes and edges in the Legends (same order except organized column by column, instead of row by row and no need for separators - leave SIF as is).

ugurdogrusoz commented 3 months ago

Two more very minor issues in SBML legend: