Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

Dag layout js #2

Merged
merged 9 commits into from Jun 12, 2012

Conversation

Projects
None yet
2 participants

philogb commented Jun 8, 2012

  • Scale and pan first rendered DAG to fit the screen.
  • Change nodes color when Jobs start, finish or die.
  • Change edges colors for each job state.
  • Hide details panel on dag rendering.
  • Put Dag in second tab.
  • Add tooltip when hovering nodes showing details for the job.
Add Dag rendering.
 - Scale and pan first rendered DAG to fit the screen.
 - Change nodes color when Jobs start, finish or die.
 - Change edges colors for each job state.
 - Hide details panel on dag rendering.
 - Put Dag in second tab.
 - Add tooltip when hovering nodes showing details for the job.
Owner

billonahill commented Jun 8, 2012

Nico, this is sweet! A few comments:

  • Node numbers in the DAG are 0-based, but they're 1-based in the table, so they don't align. Can you make the nodes in the DAG 1-based?
  • In the node detail box, you can omit name and runtime, since they're not that helpful to the user.

When the dialogue pop-up comes up with the mouse over, I feel like I want to click the jobId to link out to the job tracker UI. Can you make it so clicking the node will keep the dialog up so users can click the jobId. JobId would then be a link to the JT UI that opens in new window, similar to how the table view works.

philogb commented Jun 11, 2012

@billonahill wouldn't it be better to open the window with the job tracker UI when a node is clicked? Or do you want to add another feature to clicking a node also?

Small fixes.
 * Enumerate nodes from index + 1
 * Remove name and runtime from the tooltip
Owner

billonahill commented Jun 11, 2012

The user should only go to the job tracker when they click a link on the jobId, since that's the expected behavior there. The problem though is that when you move the mouse to click it on the node pop-up, the pop-up goes away. I was thinking clicking the node could effectively "pin" it open, so you could click the link, but I'm open to other means to accomplish the same thing. Just clicking the node though shouldn't got to the JT.

philogb added some commits Jun 11, 2012

Tooltip changes.
 * Tips can be pinned.
 * The job Id display in the tooltip takes you to the JT.

philogb commented Jun 11, 2012

@billonahill I just pushed a pinnable tooltip. Please let me know if this is what you had in mind :)

Owner

billonahill commented Jun 11, 2012

Looks great. Two final tweaks would be great:

  • Add the Mapper/Reducer status to the pop-up.
  • Allow moving of the nodes via mouse click/drag events.
More changes to DAG visualization:
 * Make nodes draggable.
 * Add the status in the tooltip (if present -this happens from
 * jobSelected).

philogb commented Jun 11, 2012

@billonahill just added DnD for nodes and status to the tooltip. The nodes don't have any status until they're selected at first. Would you like to add a default status (like, inactive) or shall I omit the status when that happens?

Owner

billonahill commented Jun 11, 2012

DnD works great. Re job status, I think we should omit it, since it's implied from the color. Instead let's put the Mapper/Reducer status like we have in the table (i.e. [total]([percent complete])). This is much more useful. If the job hasn't started we can omit that row entirely.

I had a yellow node that appeared "stuck" until I scrolled down and saw the mappers taking a while. Having this info in the pop-up would be helpful in this case.

* Fix some issues with pinning the tooltip
 * Add map and reduce progress
 * Update the tooltip live when these change.

philogb commented Jun 11, 2012

@billonahill added that information in the tooltip. Also made a few fixes in the ui. Please let me know if the display is Ok.

Owner

billonahill commented Jun 11, 2012

One minor nit:

  • The order of the fields should match those in the table columns and the detail pane.

Also if a pop-up is up and the Chord view gets selected, the pop-up should close. Currently it doesn't. Let's fix the ordering and I'll merge and then we can deal with the pop-up issue separately.

A few more changes:
 * Order for fields in tooltip matches the ones in the table
 * Hide tooltip when changing tabs (a workaround).

philogb commented Jun 12, 2012

Fixed the first issue. Added a workaround for the second one. Let me know if that works for you :)

Owner

billonahill commented Jun 12, 2012

Looks good. Let's just remove job status from the pop-up (it's displaying odd values plus it's not that helpful in that view) and we'll be good to go.

philogb commented Jun 12, 2012

Pushed.

On Mon, Jun 11, 2012 at 5:12 PM, Bill Graham <
reply@reply.github.com

wrote:

Looks good. Let's just remove job status from the pop-up (it's displaying
odd values plus it's not that helpful in that view) and we'll be good to go.


Reply to this email directly or view it on GitHub:
#2 (comment)

Nicolas Garcia Belmonte - http://philogb.github.com/

billonahill added a commit that referenced this pull request Jun 12, 2012

Merge pull request #2 from philogb/dag_layout_js
This is great Nico, thanks!

@billonahill billonahill merged commit 9b4add0 into billonahill:dag_layout Jun 12, 2012

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment