Annotation popup layout modificaitons

[jamiewaese]

Text layout modifications to improve readability, and buttons for ease of use.

Also add links at the bottom of the annotation popup that reproduce the options available from the left nav icons. These can be smaller versions of the icons themselves. See mockup:

https://www.dropbox.com/s/xmqpjijqjslm0hz/Screenshot%202013-10-02%2015.39.57.png

[yuzhenmi]

That looks slick! I wish I can come up with that.. :P

[yuzhenmi]

I thought this would be easy to do... But after spending 4 hours, I still can't get it to work! The issue is with the two columns for identifier, aliases and annotation. The text on the right column refuses to wrap unless I give it a fixed width. But I cannot find a way to calculate the correct width with scrollbar adjustment (it's easy without scrollbar). One work-around is to always assume there is a scrollbar and just subtract a fixed width. But this is not a reliable method because different browsers have different scrollbar widths! I've tried this with floating divs and tables, neither works without a fixed width.

Edit: I'll try hacking my way through this without making any actual columns.

[jamiewaese]

Why not just use a table?

On Oct 6, 2013, at 3:36 PM, Hans Yu notifications@github.com wrote:

I thought this would be easy to do... But after spending 4 hours, I still can't get it to work! The issue is with the two columns for identifier, aliases and annotation. The text on the right column refuses to wrap unless I give it a fixed width. But I cannot find a way to calculate the correct width with scrollbar adjustment (it's easy without scrollbar). One work-around is to always assume there is a scrollbar and just subtract a fixed width. But this is not a reliable method because different browsers have different scrollbar widths! I've tried this with floating divs and tables, neither works without a fixed width.

— Reply to this email directly or view it on GitHub.

[yuzhenmi]

The text won't wrap in the table unless the cell has a specified width.

I just used text-indent. Can't get the "columns" to align because Helvetica has different font width for each character, so I didn't do columns. I'll work on it later, this is really spinning my head.

[jamiewaese]

Interesting. So if we assume there is a scrollbar and subtract a fixed width how ugly is it? I can live with white space on the side.

On Oct 6, 2013, at 4:46 PM, Hans Yu notifications@github.com wrote:

The text won't wrap in the table unless the cell has a specified width.

— Reply to this email directly or view it on GitHub.

[yuzhenmi]

It won't be that ugly, it's probably just not good practice.

[yuzhenmi]

Can you take a look and see if it's OK as it is though? I don't want to go back and create that table with JavaScript unless it's necessary :P (it's a lot of lines)

[jamiewaese]

Here's a new mockup of what it should look like.

Note the new Tag feature. Would be cool, huh?

[yuzhenmi]

Yeah, that would be a cool addition. Maybe, instead of coloring lines for user annotations, we can use these tags?

[yuzhenmi]

Note to self: Create a CSS or JavaScript class for tags (div elements), that uses border-radius to take form of a circle. Use border for circle outline.

[yuzhenmi]

Should we keep the color of the gene label separate from the tags? i.e. the user annotation input can only create gene labels with the specified color. The user can then add tags, which display beside the gene label, through the annotation popup.

[yuzhenmi]

Should the tags be something unique for the ChromosomeView? Or should the tags be accessible by other views too?

[jamiewaese]

They should definitely continue through the levels. Imagine tagging a few genes in the Chromosome view with a green flag, then going to the Interactions view and seeing if the ones you tagged happen to be interactors.

Or vice versa…. imagine tagging a few interacting genes on the Cytoscape page, then zooming back to the chromosome view to see if they happen to be on the same chromosome or not.

On 2013-11-03, at 12:03 PM, Hans Yu notifications@github.com wrote:

Should the tags be something unique for the ChromosomeView? Or should the tags be accessible by other views too?

— Reply to this email directly or view it on GitHub.

[yuzhenmi]

Tags can now be added via the new annotation creation dialog or ChromosomeView's annotation popup (which I renamed to ElementDialog, element as in genetic element, to keep it broadly applicable). The tags are drawn next to the identifiers in the ChromosomeView as little circles.