SBML UI, palette and legend improvements

[ugurdogrusoz]

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

• 1. Drug node type should be represented with a stadium shape, not a rounded rectangle (see Simple Chemical in PD that also uses stadium shape)
• 2. Text of the Omitted Process node should be "//" (for compatibility with CellDesigner), not "\\" (which is used in PD)
• 3. Truncated Process would look better with a non-italic "N"
• 4. We should reorganize nodes and edges both in the palette (tiled row by row with separators) and in the legend (tiled column by column without separators) as suggested by @adrienrougny below. Also, let's decrease the space between icons in the same row and between rows to make them more compact
• 5. This is fine in the palette but in the legend, either the nodes that should have a square shape do not have square shapes or they are distorted when displayed. I also noticed this with edges (arrows that should be square seem to be stretched). Marked as noticed below:
• 6. Some nodes in the SBML palette are not aligned properly when selected (e.g. Gene). The SVG images for these nodes seem to have some white space on one side (for Gene it's on the right for instance). We should get rid of these white spaces. Also, some nodes are wider than others (i.e. Receptor), whereas some are narrower (e.g. Ion). We should size these consistently.
• 7. The width of the node and edge tools in the toolbar (see below) should be fixed so that when a different node or edge is chosen from the palette or from the toolbar, icons in the toolbar should not shift.

[umut-er]

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

[umut-er]

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

[ugurdogrusoz]

For item 4, I changed the description.

[umut-er]

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]

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]

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

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]

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]

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]

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).

[adrienrougny]

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]

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]

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]

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]

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]

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]

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]

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.

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

[umut-er]

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]

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]

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]

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]

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:

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:

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):

[ugurdogrusoz]

Almost there:

• Legend - SBML: Let's make the degradation node a bit smaller
• Palette: can we make the left padding/indentation a bit smaller (or the spacing bw nodes/edges a bit smaller), so that more nodes (1 more on a 16inch laptop screen) fit in one row:

[umut-er]

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

[ugurdogrusoz]

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

1792 x 1120

[ugurdogrusoz]

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]

Two more very minor issues in SBML legend:

• These two process nodes should be swapped
• The logical operators should be closer to each as in other notations