History panel?

[jamiewaese]

One of the downsides of doing everything in a canvas is the user loses the ability to backtrack and retrace their steps with the back/forward buttons.

How hard would it be for us to add a history panel, with step back and forward buttons?

I imagine it would have an icon on the bottom row, and it would pop up like one of the annotation popups, and remain visible and re-positionable until the user closes it.

Every time the user does something like change GeneOfFocus or View, it adds a small descriptive line to the panel (e.g., AT2G10320 Interactions View). If the user wants to go back to a previous state, he scrolls up and down the panel and then clicks on the state he wants to return to.

There would be small backward/forward icons on the panel that take you one step at a time.

This would make it easier for people to pursue a thought that leads to a dead end, then backtrack a bit and then head off in another direction.

[yuzhenmi]

I think this is doable. Basically, I'll need to create an array for holding HistoryItems. The array would have a maximum size. If array size < max size, add new item to array; else pop first item and add new item to array.

[jamiewaese]

Nice. What's the maximum? 25? 50?

On Nov 14, 2013, at 9:59 PM, Hans Yu notifications@github.com wrote:

I think this is doable. Basically, I'll need to create an array for holding HistoryItems. The array would have a maximum size. If array size < max size, add new item to array; else pop first item and add new item to array.

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

[jamiewaese]

Here are some icons -- backwards, forwards, and history panel:

I think they should go on the cross application icon bar, just below the canvas. Like this:

[yuzhenmi]

I think we'll also need grey versions for the back and forward icons.

[jamiewaese]

Here you go.

Can you reverse the zoom directions on the Chromosome view exit? I want to zoom in to the information, not out. Also, reverse the zoom direction when entering from a lower view. We zoom out from the Interactions as expected, but the entry to the Chromosome view is reversed.

How are some of the other items on the list coming along?

• enter gene ID via text box with autocomplete
• add a third annotation popup titlebar color (medium grey) to represent genes who's data is loaded but are not currently the GeneOfFocus
• add a button (a star icon) to the annotation popup titlebar for setting the GeneOfFocus
• add directional arrows in the annotation popup to represent which strand its on.

FYI - the Interactions view crashes the system if you select the wrong gene. It's weird. Can you add an error catch so users don't have to reload all their data if one of the viewers is unresponsive?

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

I think we'll also need grey versions for the back and forward icons.

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

[yuzhenmi]

Sorry, I've been mostly working on the eFP views for the past few days (got a system for detecting mouse events over SVG path-defined shapes and a script for parsing SVG into JSON for feeding into eFP views).

I've reversed the zoom directions for Chromosome view.

I will begin working on the other things we've discussed.

As for the Interaction View crashing, it is because Matthew is working on his script for retrieving interactions, which the Interaction View uses to get data. Right now, his script's output contains debug strings, which kills the JSON parsing and crashes ePlant. For example: http://bar.utoronto.ca/~mierullo/get_interactions.php?request=[%7B%22agi%22:%22at2g41460%22%7D]. The reason why it doesn't crash when there is only one node is because the output is empty. For example: http://bar.utoronto.ca/~mierullo/get_interactions.php?request=[%7B%22agi%22:%22at2g11010%22%7D]

However, once he removes the debug strings, such errors should not ever occur, so I don't think we need error catching for this. Also, since I have modified the Interaction View to parse Matthew's data structure, which is different than the old AIV web service, I cannot easily revert to using the old AIV web service for data retrieval.

[yuzhenmi]

I can't see the grey icons in your post. Maybe attaching images in e-mail doesn't work on GitHub?

I've added the medium grey color for indicating a loaded but inactive gene dialog.

I'm a bit concerned about using arrows for strand direction: https://github.com/jamiewaese/ePlant/issues/61

Star button and autocomplete will be here shortly. I'll also remove resetting GeneOfFocus when user touches a popup's titlebar once the star button is up.

[yuzhenmi]

This turned out to be more tricky than I thought, because I have to reset speciesOfFocus and geneOfFocus each time a historic view is summoned, plus the appropriate animation has to be determined. But I got this working (I hope). It's probably glitchy though, so let me know if you find something wrong! I still have to update the forward/backward icons according to their availability.

[jamiewaese]

The zoom direction is great! It's going to be very satisfying to zoom in and out of a bunch of loaded genes of interest. A few tweaks to make it better:

END CAPS If the zig zag end caps from my mockup are too complicated, how about adjusting the angle of the end cap dynamically? Instead of drawing a 90 degree corner that extends to the edges no matter what the width, what if we limit the vertical size of the triangle to a maximum of 20 pixels? When the chromosome is thin it will read as a 90 degree angle. When it's wide it can be 160 degrees or more. Either way the point is made.

ADJUSTING ZOOM ANCHOR POINT I like how the zoom anchor point adjusts according to the GeneOfFocus so we always appear to zoom in and out of the right spot on the chromosome. But can you slow down the transition so it takes a full second with "ease" settings on? It's disorienting when it happens too fast.

PRESSING CHROMOSOME ICON WHILE WE'RE IN CHROMOSOME VIEW I like how this resets the scale and center point to the standard view but can you do it without zooming out and back in first? A gradual move would be best, say 1 second.

On 2013-11-26, at 3:35 PM, Hans Yu wrote:

I've reversed the zoom directions for Chromosome view.

[yuzhenmi]

The end caps are now fixed at a height of 20 pixels, regardless of zoom.

Easing transitions would be difficult because it is a global camera setting in my framework. If I turn it on then all camera movements would be affected. To apply easing when the camera zooms to the anchor point during zooming animation, I would have to calculate the easing during the animation, which is not that bad. But applying easing when resetting a view would be challenging without changing the global easing setting.

[jamiewaese]

Can't see a difference. Zoom in all the way and you still get a pretty diamond in the middle of the screen.

How would it look if we put easing on all the camera movements, then? We can toggle them on/off with the Zoom Transitions button. We miss out on the full effect of zooming into an object without it.

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

The end caps are now fixed at a height of 20 pixels, regardless of zoom.

Easing transitions would be difficult because it is a global camera setting in my framework. If I turn it on then all camera movements would be affected. To apply easing when the camera zooms to the anchor point during zooming animation, I would have to calculate the easing during the animation, which is not that bad. But applying easing when resetting a view would be challenging without changing the global easing setting.

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

[yuzhenmi]

The diamond shouldn't be there anymore. Trying clearing your cahce?

I turned on camera easing. I have it set to move 90% of the remaining distance each frame, which produces a very small easing effect. I remember it was causing some problems back then, though, that's why I turned it off. But I can manually override the easing by adjusting the absolute camera positions in my code to avoid those problems, just gotta do it on an individual basis.

[jamiewaese]

Nice. Can you make the end cap height a function of the width? 20 pixels looks great when the width is 20 pixels or greater, but it looks pointy when the width is less than 20 pixels.

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

The diamond shouldn't be there anymore. Trying clearing your cahce?

I turned on camera easing. I have it set to move 90% of the remaining distance each frame, which produces a very small easing effect. I remember it was causing some problems back then, though, that's why I turned it off. But I can manually override the easing by adjusting the absolute camera positions in my code to avoid those problems, just gotta do it on an individual basis.

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

[yuzhenmi]

The cap height is now equal to half of the chromosome width, unless it is greater than 20, in which case it is 20.

[jamiewaese]

CAMERA EASING Works better now but the move still isn't graceful. A few tweaks may help:

1) When we zoom out from a lower view, the zoom should come to a rest with the camera centered in the window. We should pull out with the target gene as the anchor for the zoom, but then reset the anchor to the center upon arrival, with easing making for a smooth transition. There's something wonky happening now.

2) 90% is too fast. Try 10%. I have a slow computer and it's still too fast. People can turn off zooms if they want to move quickly.

By the way, there's a weird in/out zoom effect when you move back up to the Species page.

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

I turned on camera easing. I have it set to move 90% of the remaining distance each frame, which produces a very small easing effect. I remember it was causing some problems back then, though, that's why I turned it off. But I can manually override the easing by adjusting the absolute camera positions in my code to avoid those problems, just gotta do it on an individual basis.

[yuzhenmi]

1) It should be better now. The wonky stuff was caused by my typo.

2) I've changed it to 30%. I don't want to make it any lower because it affects camera movements globally. 10% is way too slow for panning and zooming.

Fixed the in/out zoom effect on Species view. Just had to set absolute camera distance/coordinates during the zooming animation.

[jamiewaese]

Can we slow that camera move down a bit more?

Do you have easing on the zoom, by the way? Or is it a linear scale? Easing is a secret weapon animators use to make movements feel more natural.

The last thing would be to re-center the camera when we return to Chromosome View.

I like the dampening on the global camera. Feels very slick. I think you should try 10%. It will feel very iPhone-ish.

On 2013-11-27, at 5:20 PM, Hans Yu wrote:

1) It should be better now. The wonky stuff was caused by my typo.

2) I've changed it to 30%. I don't want to make it any lower because it affects camera movements globally. 10% is way too slow for panning and zooming.

Fixed the in/out zoom effect on Species view. Just had to set absolute camera distance/coordinates during the zooming animation.

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

[yuzhenmi]

I set it to 10%, but it is not fast enough to keep up with the zooming in when we go from chromosome to interaction view. Take a look. I feel it takes too long to pan the view too.

Also made camera move to center on the last animation frame when zooming out, entering chromosome view.

And yeah, the easing applies to zoom, x and y of the camera.

[jamiewaese]

DAMPENING You're right that 10% is not great for the panning / zooming. Too much drift after you let go. Try 20%?

ZOOMING The zoom out from Interactions View to Chromosome View is better, though we should zoom out a little further. The original setting looked really good.

We need to figure out how to adjust the anchor point while zooming. A proper zoom will look a hundred times better. The expectation is that we target a particular place on the canvas and we zoom into it. We're positioning this as a zoomable browser, but the two-step zoom/reposition looks/feels like a cheesy work-around. If we nail the look/feel, people will spend hours on this site. If we miss the target they'll leave in five minutes. The devil is in the details.

Here's a terrific video that demonstrates good camera shifting during the zoom: http://www.youtube.com/watch?v=HrCZhV6RThs

The zoom in to Interactions View from Chromosome View isn't targeting correctly. We zoom into some white space near the gene.

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

I set it to 10%, but it is not fast enough to keep up with the zooming in when we go from chromosome to interaction view. Take a look. I feel it takes too long to pan the view too.

Also made camera move to center on the last animation frame when zooming out, entering chromosome view.

And yeah, the easing applies to zoom, x and y of the camera.

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

[yuzhenmi]

I changed dampening to 20%. Also made it zoom out further in ChromosomeView (the further zoom before was actually caused by a bug).

Zooming into white space when changing from chromosome view to interactions view is due to the 10% dampening. The panning is not fast enough to keep up with the zooming. Changing dampening to 20% fixes it mostly.

How do you think we should zoom for the ChromosomeView then? That video's demonstration is quite complex and ambiguous near the start, with a quick zoom into a spot near the target, then slowly pans and zooms to the target, then continues zooming slowly after it reaches the target... Just let me know how exactly we should do the zoom. I think it should be quick though, the animations right now are fixed at 30 frames.

[jamiewaese]

I can mock up a zoom in After Effects and you'll interpret how to code it? Excellent. I'll send you a QuickTime file tomorrow!

On Nov 28, 2013, at 3:11 PM, Hans Yu notifications@github.com wrote:

I changed dampening to 20%. Also made it zoom out further in ChromosomeView (the further zoom before was actually caused by a bug).

Zooming into white space when changing from chromosome view to interactions view is due to the 10% dampening. The panning is not fast enough to keep up with the zooming. Changing dampening to 20% fixes it mostly.

How do you think we should zoom for the ChromosomeView then? That video's demonstration is quite complex and ambiguous near the start, with a quick zoom into a spot near the target, then slowly pans and zooms to the target, then continues zooming slowly after it reaches the target... Just let me know how exactly we should do the zoom. I think it should be quick though, the animations right now are fixed at 30 frames.

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