Chromosome display

[jamiewaese]

These are all probably work in progress, but just in case...

• We lost the centromeres.
• We lost the heat map.
• When the gene list gets loaded, the actual genes are no longer selectable.
• Clicking on annotation labels doesn't open the annotation popup.
• On the gene list popup, can you adjust the left margin of the street addresses outside the box so it's flush with the gene names inside the box?
• We should include Chromosome C and M on the page. We can draw them as a line (no centromere though) if the circle is too difficult.
• Instead of centering, annotations should stick out to the left if the direction is positive, and to the right if the direction is negative according to the GFF file.
• Can the annotation function handle more than one gene at a time? I get an error message when I try. Ideally we'd accept an unlimited amount, as long as they're separated by tabs.
• One thought about the annotation function... instead of providing a color code, what if the user provided a tag code? You know how the annotation popup is gong to have an "assign to group" function, a colored tag the user can mark genes with? What if the annotation function simply patched into that?

[yuzhenmi]

Some of these are indeed work in progress. I did not notice we lost the centromeres though, that is caused by a glitch that I made, but I fixed it now. Also moved the addresses.

[yuzhenmi]

Any idea where I can find info on chromosomes C and M? I need at least their length.

[jamiewaese]

Can you get their length from the TAIR10 GFF file?

Nick may be able to help if you mean something else.

On Oct 25, 2013, at 8:32 PM, Hans Yu notifications@github.com wrote:

Any idea where I can find info on chromosomes C and M? At least for now, I need at least their length.

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

[yuzhenmi]

OK I got their length from the GFF. Thanks! C and M are up on display now.

[yuzhenmi]

Annotation popup is now recovered, it can now be brought forth via either user annotation or an item in the gene list popup. The data in the popup, however, are still work in progress.

[yuzhenmi]

I've wrote a bunch of (messy) code. Now the add/drop data button on annotation popup works. Also, adding/dropping data now affects the "Currently loaded genes" drop down menu. I've introduced classes for genes and species that are loaded or to be loaded, they should be in sync with the navigation panel.

I can certainly implement multiple genes for user annotation input.

As for the color of the user annotation, if we let the user use tag code, we might as well just make all the user annotation labels the same color and have the tags beside them with different colors. What do you think?

I wish I know some standard methods for planning code... Working with 1000+ lines of code in my head is very tiring! :(

[jamiewaese]

What do you mean, make all the annotation labels the same colour?

On 2013-10-27, at 9:42 PM, Hans Yu notifications@github.com wrote:

I've wrote a bunch of (messy) code. Now the add/drop data button on annotation popup works. Also, adding/dropping data now affects the "Currently loaded genes" drop down menu. I've introduced classes for genes and species that are loaded or to be loaded, they should be in sync with the navigation panel.

I can certainly implement multiple genes for user annotation input.

As for the color of the user annotation, if we let the user use tag code, we might as well just make all the user annotation labels the same color and have the tags beside them with different colors. What do you think?

I wish I know some standard methods for planning code... Working with 1000+ lines of code in my head is very tiring! :(

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

[yuzhenmi]

You know how when you click "Get Data", a user annotation whisker and AGI label is generated with the default grey color... We can make them all grey and give them colored tags.

[jamiewaese]

That sounds fine for regular tagged genes, but the annotation box is so users can draw attention to particular genes by painting them with colour.

On 2013-10-28, at 10:02 AM, Hans Yu notifications@github.com wrote:

You know how when you click "Get Data", a user annotation whisker and AGI label is generated with the default grey color... We can make them all grey and give them colored tags.

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

[jamiewaese]

On the Select a Gene page, can you darken the gene labels when the user hovers over them? It will help identify the labels as hot links that will do something when clicked. It will also be easier to read them. Can you switch the cursor to HAND when it's touching a clickable link as well?

The new and improved clipping indicators are terrific.

It looks to me like the coordinate indicators at the top and bottom of the chromosomes are in bold text. They can be less prominent.

[yuzhenmi]

I can darken the labels. Can't promise you I can change the cursor though. The gene labels are drawn on the canvas, so they are not HTML elements and I can't set CSS properties. I'll look into it.

I don't think the coordinates are in bold? Again, they are drawn on the canvas and I don't think I'm specifying bold texts anywhere.

[yuzhenmi]

Gene labels are now enlarged from size 12 to 13 upon mouse hover.

[jamiewaese]

Enlarging the gene labels works well. Two more things and they'll be done:

HIGHLIGHT GENE OF FOCUS LABEL Whichever gene is the current GeneOfFocus should be evident when you look at the display. We can do that with an underline, or increasing the font size to 14...

TAG POSITION BESIDE LABEL Since you're fiddling with this part of the code anyway, can you move those tag dots down a pixel or two? Ideally they should be vertically centered with the text.

On 2013-11-25, at 8:13 PM, Hans Yu wrote:

Gene labels are now enlarged from size 12 to 13 upon mouse hover.

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

[yuzhenmi]

The tag dots should already be vertically centered? I am aligning the vertical center of the label and the tags with the vertical position of the gene on the chromosome.

Here's a screenshot on Chrome with a line drawn to mark the vertical center (if you zoom in on it, it is at the exact center).

[yuzhenmi]

Highlight of label implemented by changing font size to 14.

[jamiewaese]

I guess it's a browser thing. Never mind.

Here's a screengrab from Mac's Firefox:

And here's one from Mac's Chrome:

[jamiewaese]

Looks good.

For the annotation popups, can you adjust the title bar colors for me? It's hard to read the text for the Data Loaded with a dark grey BG. Use these colors instead:

GeneOfFocus: #99CC00; Data Loaded But Not Gene Of Focus: #E6F9AF; Data Not Loaded: #E7E7E7

For the "Tags" radio buttons inside the annotation popup (and also in the annotation editor), can you use the color of the radio button for the stroke when it's selected, instead of black? It's hard to differentiate between which items are selected and which aren't.

A nice design would be to use a colored stroke with a white fill if they are unselected, then when they're selected we fill the center with its color.

On 2013-11-25, at 8:13 PM, Hans Yu wrote:

Gene labels are now enlarged from size 12 to 13 upon mouse hover.

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

[jamiewaese]

Nice.

Can you also set the GeneOfFocus when user clicks on a label?

On 2013-11-27, at 3:45 PM, Hans Yu wrote:

Highlight of label implemented by changing font size to 14.

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

[yuzhenmi]

Clicking on label now sets geneOfFocus.

[jamiewaese]

Awesome!

On 2013-11-27, at 4:26 PM, Hans Yu wrote:

Clicking on label now sets geneOfFocus.

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

[yuzhenmi]

About the tag positions. The tags are actually vertically aligned, it's the text labels that aren't. It is actually quite difficult to predict the height of texts drawn on different browsers, since they all draw them slightly differently. I am estimating text height by multiplying font size with a fixed offset. It works on Chrome and FireFox on Windows, but I guess it's slightly off on Mac FireFox.

[jamiewaese]

Okay, don't waste any more time on it then. We'll chalk it up to browser inconsistency.

On 2013-11-27, at 4:37 PM, Hans Yu wrote:

About the tag positions. The tags are actually vertically aligned, it's the text labels that aren't. It is actually quite difficult to predict the height of texts drawn on different browsers, since they all draw them slightly differently. I am estimating text height by multiplying font size with a fixed offset. It works on Chrome and FireFox on Windows, but I guess it's slightly off on Mac FireFox.

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

[yuzhenmi]

I changed the "Data Loaded But Not Gene Of Focus" color. But mind if I just leave the "Data Not Loaded" color to default jQuery titlebar background?

[jamiewaese]

Isn't the lighter color better? Like an unselectd window.

On Nov 27, 2013, at 7:07 PM, Hans Yu notifications@github.com wrote:

I changed the "Data Loaded But Not Gene Of Focus" color. But mind if I just leave the "Data Not Loaded" color to default jQuery titlebar background?

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

[yuzhenmi]

Maybe... I'm just a bit lazy to override the titlebar color :P I'll do it then.

[yuzhenmi]

I changed it. The color looks very similar to the default background, minus the gradient.