Misc issues 3

[hasanbalci]

• [x] 1. Let's use autoSize instead of fullGraph as the option name that we use to decide image size.
• [x] 2. In the Error json file we return to user, let's add color code info of each error as well. It can be added as "color" : "#rrggbb". We don't need to add this to sample demo since we already color the frame of each error.
• [x] 3. It seems that the service returns an SBGN file during validation. Let's disable it since it is unnecessary.
• [x] 4. Currently error numbers in the highlighted nodes are shown twice suc as (7)(7). Let's fix it and show only one time.
• [x] 5. In error listing, we refer to IDs of glyphs or arcs but often times they are meaningless to the user. Let's also use the labels of these glyphs or archs (in addition to these IDs). Example: "Ca++" instead of "glyph48". For edges we could display source and target glyph labels. This way we could perhaps get rid of the numbers appended to the labels as well?
• [x] 6. Can we apply an incremental layout after errors are resolved? Otherwise, the user loses their mental map. For example, when you validate and see that the four glyphs that are not in any compartment is towards the upper left corner of the drawing and you apply a fix, now they go to the lower right, which is bad. So, when the user validates, let's continue applying a random (non-incremental) layout but when the user applies Resolve Errors, we should respect the previously determined positions by the validation and apply a non-random (incremental) layout.
• [x] 7. Let's use image instead of imageErrorsHighlighted while returning the image in the response.
• [x] 8. Validation query currently returns remainingErrors. Let's remove it from validation query since it doesn't make sense.
• [x] 9. I think, we don't show all errors in the sample demo especially if they are opposite of each other like pd10101 and pd10102. However, when we download the errors file all errors are shown there and this causes an inconsistency.
• [x] 10. I think we need to go through the image part again. With small graphs, the way we display image after validation doesn't look nice (try test.sbgn.txt), while it is good after error fix. The other issue is that we draw the image too large after validation and it cannot fit to the screen (at least in a laptop).
• [x] 11. Let's make the default for dimensions Auto. Let's make autoSize true here to set it as default.
• [x] 12. Let's revisit the way we size and resize the image window. As discussed, let's tightly fit the image in the image window.
• [x] 13. Ideally Validate should perform layout in non-incremental manner (randomize: true) and Resolve Errors in an incremental fashion (randomize: false). For this, we will try doing the layouts at Cysocape level, rather than relying on cytosnap.

[YusufZiyaOzgul]

@ugurdogrusoz @hasanbalci for item 3 we return sbgn data for downloading purposes.

[ugurdogrusoz]

@YusufZiyaOzgul I guess you're talking about the download functionality in the demo application. Since the sbgn data/file is the same as the user input, unless error resolution is applied, this is unnecessary. Perhaps, we could simply ignore any download requests from the demo (better to disable that button) unless Resolve Errors has been applied.

[YusufZiyaOzgul]

@ugurdogrusoz for item3, sometimes we relocate some nodes during validation as well to enhance layout. so let's keep sending the sbgnml file

[YusufZiyaOzgul]

@ugurdogrusoz @hasanbalci for item 1,7,8 necessary renamings or deletion of unnecessary variables are done. for item 2 , colorCode property is added to error as a hex code. For item 4, it does not show highlihted nodes twice, it only highligts them in validation. For item 5, label info is added in error box if it exists otherwise it shill shows the id of node or arc. Incremental layout is applied now.

[hasanbalci]

For item 5, I think there is an inconsistency between the error list shown in interface and downloaded errors json file. For example, when we apply validation for sample 1, "Role" field in the screen shows node labels and there is no label field. But when we download the Error file, there are two fields: role that shows node id and label that shows node label.

Additionally, I think currently we show the images in two different ways for validation and error fixing in the UI. When validation is applied, I see only some part of an image in docked version, whereas I see whole image after error fixing.

[ugurdogrusoz]

5. I see some inconsistencies here:
   • In the image, some nodes such as E3(San1) (errors 13 & 15) and misfolded protein (error 12) do not have their associated error numbers listed in parentheses in their labels (e.g., "E3(San1) (13, 15)" and "misfolded protein (12)"
   • For edges, since we're not providing labels in the image, let's make sure the text Role displays source and target glyphs labels, instead of the label of the arch.

[YusufZiyaOzgul]

5. I see some inconsistencies here:

   • In the image, some nodes such as E3(San1) (errors 13 & 15) and misfolded protein (error 12) do not have their associated error numbers listed in parentheses in their labels (e.g., "E3(San1) (13, 15)" and "misfolded protein (12)"

   • For edges, since we're not providing labels in the image, let's make sure the text Role displays source and target glyphs labels, instead of the label of the arch.

@ugurdogrusoz E3(San1) is not related to errors given above. Since these errors are related to arcs, it is not labeled by these errors.

[ugurdogrusoz]

Regarding 5. let's not include error number (xx) in Label in the listing (just in the image) as it's redundant. Also, for edges if an edge is going from an unnamed glyph to a glyph named xx, label it " - xx" (similarly "xx - "). Notice the blank spaces before and after the dash. I added a couple of new items (11 & 12).

[YusufZiyaOzgul]

@ugurdogrusoz item 12 is fixed. Maximum height of popup image is now 800px.

[hasanbalci]

Let's make autoSize true here to set it as default.

[YusufZiyaOzgul]

Let's make autoSize true here to set it as default.

@hasanbalci it is true now.

[YusufZiyaOzgul]

@ugurdogrusoz for item 12, width and height of popped image are set default, it tightly fits to window.

[ugurdogrusoz]

For 12, we still have the following issues:

• [x] 12.a As demonstrated in the video by @hasanbalci, the first time the image is popped and dragged towards the browser border, it resizes (does not occur after the first time it's popped)!

https://github.com/iVis-at-Bilkent/sybvals/assets/3874988/927e3fff-5e03-4412-b6c1-e1b68db35671

• [x] 12.b Also, when the popped image window is docked and popped again, then we seem to remember the width of the window before it was ducked but not the height, which results in weird shapes like this:

We could just reset the image window size each time to a default (that we use in first pop)!

[YusufZiyaOzgul]

@ugurdogrusoz @hasanbalci setting an aspect-ratio to draggable component fixes the problem.

[ugurdogrusoz]

Looks good to me. @hasanbalci ?

[hasanbalci]

Yes, it looks good now.