Opened 13 years ago

Closed 11 years ago

Last modified 11 years ago

#1321 closed enhancement (fixed)

graphs: an interactive graph editor

Reported by: jason Owned by: rlm
Priority: major Milestone: sage-4.3.1
Component: graph theory Keywords:
Cc: boothby, rlm, rbeezer Merged in: sage-4.3.1.alpha0
Authors: Radoslav Kirov, Mitesh Patel Reviewers: Robert Miller, Rob Beezer
Report Upstream: N/A Work issues:
Branch: Commit:
Dependencies: Stopgaps:

Description (last modified by mpatel)

The patches:

Attachments (2)

trac_1321-sagenb_graphed.patch (193.5 KB) - added by mpatel 11 years ago.
Rado's graph editor. Apply this patch to the sagenb repo. Apply this patch only.
trac_1321-sage_graphed_v3.patch (7.2 KB) - added by mpatel 11 years ago.
Adds two keyword options. See the comment. Version 3 of the sage repo patch. This replaces previous versions.

Download all attachments as: .zip

Change History (38)

comment:1 Changed 13 years ago by jason

  • Summary changed from [graphs] an interactive graph editor to graphs: an interactive graph editor

comment:2 Changed 13 years ago by jason

This project looks really interesting:

http://graphexploration.cond.org/index.html

An interactive graph editor written in Java.

comment:3 Changed 13 years ago by rlm

  • Component changed from combinatorics to graph theory
  • Keywords graphs removed
  • Owner changed from mhansen to rlm

comment:4 Changed 11 years ago by rkirov

copy from the sage-devel group:

I have been sitting on this code for too long, so I think it would fit in Sage's philosophy to release early, to include it in the next version of Sage. Here is my current version:

http://www.math.uiuc.edu/~rkirov2/sage/graph_editor.zip

it contains a diff patch for Sage devel and two files which need to go "$SAGE_ROOT/local/notebook/javascript/graph_editor" (create that folder). Sage/local is not under mercurial so I can't add it to the patch.

now to get the graph editor just type (in notebook):

sage: G = graphs.PetersenGraph?() sage: graph_editor(G)

comments: 1) Update button is really ungraceful but i couldn't figure out how to send the data behind the scene to the Sage server (as the server so far is made to communicate only with the cells). So now it just dumps the data in the cell it was called and leaves it to the user to execute the update.

2)The graph_editor opens in an iframe, so if you grad a node out of the whole frame, it stops tracking it (this can be probably fixed with some major JS hack). However, now it detects you left the iframe and returns the vertex to its original position.

3) This works only for simple graphs for now.

any suggestions, comments, especially code corrections are welcome

Rado

comment:5 Changed 11 years ago by mpatel

A minor suggestion: Please try transposing the last two lines of mouseReleased() to, e.g.,

    dragged_node = null;
    last_click_time = millis();
    redraw();
    }
  if(!LIVE) noLoop();
}

class Edge {

I think this will solve the problem of "high" CPU use after

  • Turning on the live feature.
  • Turning off the live feature.
  • Clicking on the canvas to add a new node.

comment:6 Changed 11 years ago by rkirov

thanks for catching the bug. The new version is attached as "mpatel" (its was supposed to be "mpatel's bug fix" but i hit enter). Apparently you cant edit once you send it.

comment:7 Changed 11 years ago by rlm

  • Authors set to Radoslav Kirov
  • Cc boothby added
  • Milestone changed from sage-wishlist to sage-4.1.2
  • Reviewers set to Robert Miller
  • Summary changed from graphs: an interactive graph editor to [with patch, needs work] graphs: an interactive graph editor

I've made the patches and files themselves available. This will make review/discussion easier.

On top of a fresh copy of Sage-4.1.1, I:

  1. Applied the patch to the library. There was a rejected hunk, which I fixed, and posted the modified patch as trac_1321-graph_editor-rebased-4.1.1.patch. (Since the original patch was not an hg patch, my name got put on the patch when I exported it. We'll need to fix this so that Rado gets proper credit.)
  1. Copied the html and js files to $SAGE_ROOT/local/notebook/javascript/graph_editor, after creating this directory.
  1. Rebuilt Sage and tried it out.

REFEREE COMMENTS:

  1. This only works from within the notebook, if you run it on a command line it just spits out some HTML. The variable EMBEDDED_MODE is used to tell whether this is the case or not. We should do something more intelligent for the command line case.
  1. When you update, it always defines the graph G, even if that was not the graph you were actually using. You can get Python to tell you the variable name used somehow, but at the moment I forget.
  1. Also, when you update, it defines the graph as capital G, and then sets the position of lowercase g. This gives an error when it is actually evaluated.
  1. Finally, the js file seems particularly averse to whitespace. This looks like the result of some obfuscation program or something... Can I suggest we format it a little better?
  1. Instead of graph_editor(G), we should probably organize it as G.edit() or G.graph_editor() or something like that.
  1. I really like this, and I want to see it merged ASAP!!!

comment:8 Changed 11 years ago by rkirov

Thanks for reviewing my editor. Sorry for the late reply, I totally forgot to look at Trac and was waiting on google group thread. I will try to fix the small bugs this weekend and if I have time rewrite some of the js code in pure js, instead of the processing.js fake-java.

  1. This only works from within the notebook, if you run it on a command line it just spits out some HTML. The variable EMBEDDED_MODE is used to tell whether this is the case or not. We should do something more intelligent for the command line case.

This should be easy to fix.

  1. When you update, it always defines the graph G, even if that was not the graph you were actually using. You can get Python to tell you the variable name used somehow, but at the moment I forget.

I couldn't figure how to do that either, not sure if it is even posible. Probably will try my luck with Stackoverflow.

  1. Also, when you update, it defines the graph as capital G, and then sets the position of lowercase g. This gives an error when it is actually evaluated.

That is an easy fix

  1. Finally, the js file seems particularly averse to whitespace. This looks like the result of some obfuscation program or something... Can I suggest we format it a little better?

The js file is not writen by me. Its processing.js with on line modification by me, it lacks whitespace because its should load faster that way, and it is not intended to be further modified (think of it as a graphics library).

  1. Instead of graph_editor(G), we should probably organize it as G.edit() or G.graph_editor() or something like that.

Shouldn't be hard, have to see which file to edit.

  1. I really like this, and I want to see it merged ASAP!!!

Awesome, that makes two of us. Btw, thanks for fixing my patch. I am still struggling with hg.

Rado

comment:9 follow-up: Changed 11 years ago by rkirov

  • Cc rlm added

ok, attached is the new version.

1) Polished update button, which is now a save button. There is a text cell where the user can enter the name they want to give to the graph. Save is done automatically when button is clicked (no more shift+enter necessary)

2) Turned off the sliders for the live, there is some kind of bug with jqueryui in SAGE. Not sure what, but they were not terribly useful.

3) The processing JS code is moved over to pure JS (instead of the bizarre parsed java). Also now it has its own separate file "graphed.js".

The new patch should be ran on top of the old one.

Rado

comment:10 in reply to: ↑ 9 Changed 11 years ago by mpatel

Replying to rkirov:

2) Turned off the sliders for the live, there is some kind of bug with jqueryui in SAGE. Not sure what, but they were not terribly useful.

For what it's worth, #5447 will upgrade jQuery UI.

comment:11 Changed 11 years ago by rkirov

  • Summary changed from [with patch, needs work] graphs: an interactive graph editor to [with patch, needs review] graphs: an interactive graph editor

comment:12 Changed 11 years ago by jason

  • Cc rbeezer added

rbeezer: I'm leaving this for you on review day :).

comment:13 follow-up: Changed 11 years ago by rbeezer

  • Reviewers changed from Robert Miller to Robert Miller, Rob Beezer
  • Summary changed from [with patch, needs review] graphs: an interactive graph editor to [with patch, needs work] graphs: an interactive graph editor

This looks stable and useful enough now to be merged with one change.

Most all of Robert Miller's comments have been addressed favorably. I'm of two minds about G.edit() versus graph_editor(G), its the latter now.

There needs to be a limit on the size of a graph, so that is one needed addition.

You probably want to create one final set of patches and files, with clear directions on where each goes, the current state is a bit confusing. Start patch files with trac_1321_xxx and end with .patch

Positive review once a size limit goes in. This will be a really, really nice addition!

Rob

comment:14 in reply to: ↑ 13 ; follow-up: Changed 11 years ago by rlm

Replying to rbeezer:

I'm of two minds about G.edit() versus graph_editor(G), its the latter now.

G.edit() should exist, and just call graph_editor(G).

comment:15 in reply to: ↑ 14 Changed 11 years ago by rbeezer

Replying to rlm:

Replying to rbeezer:

I'm of two minds about G.edit() versus graph_editor(G), its the latter now.

G.edit() should exist, and just call graph_editor(G).

Yes, both can/should be there. The call graph_editor() is nice because it provides a two-vertex graph with a single edge. Somebody using this the first time then has something to fiddle with, without even knowing anything about instantiating a Graph object. So I prefer the object-oriented version, but think this is a place where the plain command is beneficial.

comment:16 follow-up: Changed 11 years ago by mpatel

I can work on merging

graphEd

into SageNB. Are the four most recent attachments the key files?

(Yes, that was unnecessary.)

comment:17 in reply to: ↑ 16 Changed 11 years ago by rbeezer

Replying to mpatel:

(Yes, that was unnecessary.)

But quite refreshing, all the same. ;-) Thanks for working on this one! Hopefully Rado can comment on its readieness.

Rob

comment:18 follow-up: Changed 11 years ago by was

What is "graphEd"???

comment:19 in reply to: ↑ 18 Changed 11 years ago by rbeezer

Replying to was:

What is "graphEd"???

Rado's Javascript window that allows you to click to make vertices, edges, drag them around, etc, then ship them off to a Sage Graph instance for further exploration with the layout from the window intact. It seemed really usable last time I got it going, but with notebook changes, it might require mpatel to get it incorporated properly.

comment:20 follow-up: Changed 11 years ago by rkirov

  • Description modified (diff)
  • Report Upstream set to N/A

I will try to upgrade Sage to the newest version this week and try to see how the does the graph editor (or graphEd as it has been dubbed :) behave with respect to the new NB. The old version was working fine and I put in rob's recommendations, but then sage updated before I can submit the patch.

Mpatel expect email from me to get some info on how does the new NB works these days and maybe collaborate on getting this finally in Sage. Funny how the main code has been written for 6 months now but dealling with the notebook and learning HG to make patches is taking me forever.

Rado

Changed 11 years ago by mpatel

Rado's graph editor. Apply this patch to the sagenb repo. Apply this patch only.

comment:21 Changed 11 years ago by mpatel

I've attached patches to the sage and sagenb repositories that should enable the graph editor in 4.3.alpha0. The sagenb patch "depends" on the sagenb patches at #3895 and #7495 --- the latter precede the #1321 patch in my queue and also modify twist.py.

Unfortunately, this is about as far as I have time now and in the near future to take this. But please verify that it works and feel free to make any changes and suggestions! Some possibilities:

  • Finish the docstrings in graph_editor.py. Actually, this is a necessity.
  • Add an option to make "Save" send the [position] data to the server but not populate the input cell?
  • Use JSON to pass common graph data structures between the browser and Sage? For example,
    import json
    g_json = json.dumps(g.networkx_graph().adj)
    print g_json
    gg = Graph(json.loads(g_json))
    

We could then use JSON.parse in the browser to reconstitute a graph, retaining loops, directed edges, labels, etc., and similarly for colorings, etc. (JSON.stringify would work in the opposite direction.)

comment:22 Changed 11 years ago by mpatel

Update: The sagenb patch works for me when I apply it to SageNB 0.4.4, in the absence of #3895 and #7495. The patch may also work with SageNB 0.4.3, which is part of Sage 4.3.alpha0. But it may be best to get the latest.

comment:23 Changed 11 years ago by mpatel

Version 2 of the sage library patch, which replaces first version, fixes the docstrings.

comment:24 in reply to: ↑ 20 Changed 11 years ago by rbeezer

Replying to rkirov:

learning HG to make patches is taking me forever.

Hi Rado,

I'll send you some stuff by email about creating patches, etc.

Rob

Changed 11 years ago by mpatel

Adds two keyword options. See the comment. Version 3 of the sage repo patch. This replaces previous versions.

comment:25 Changed 11 years ago by mpatel

  • Status changed from needs_work to needs_review

Version 3, somewhat experimental:

  • Adds a keyword option graph_name (the default is None). By default, the function attempts to guess the name of the graph. But it can be useful to be explicit.
  • Adds a keyword option replace_input (the default is True). If this is False, clicking "Save" quietly evaluates the current cell with the updated Graph, but it preserves the cell's input (as of when "Save" was clicked). Currently, we do this by temporarily replacing the input, evaluating the cell, restoring the input, resaving the input, and resizing the cell. We definitely need a more direct way to do this (even more direct than calling async_request(worksheet_command('eval'),...)).

An example:

g5 = graphs.TetrahedralGraph()
graph_editor(g5, replace_input=False, graph_name='g5_mod')

After clicking "Save", we can evaluate, e.g.,

show(g5_mod)

in another cell.

comment:26 Changed 11 years ago by ncohen

  • Summary changed from [with patch, needs work] graphs: an interactive graph editor to graphs: an interactive graph editor

comment:27 Changed 11 years ago by mpatel

  • Description modified (diff)

comment:28 follow-up: Changed 11 years ago by rlm

To apply the notebook repo patch, do I just untar the spkg, apply it there, and re-pkg/install sagenb?

Also, does anyone mind if I clean up the patches on this ticket? It's just trac_1321-sagenb_graphed.patch and trac_1321-sage_graphed_v3.patch now, right?

comment:29 in reply to: ↑ 28 ; follow-up: Changed 11 years ago by mpatel

Replying to rlm:

To apply the notebook repo patch, do I just untar the spkg, apply it there, and re-pkg/install sagenb?

Yes.

Also, does anyone mind if I clean up the patches on this ticket?

Feel free! Thanks!

It's just trac_1321-sagenb_graphed.patch and trac_1321-sage_graphed_v3.patch now, right?

Yes.

comment:30 in reply to: ↑ 29 Changed 11 years ago by was

Replying to mpatel:

Replying to rlm:

To apply the notebook repo patch, do I just untar the spkg, apply it there, and re-pkg/install sagenb?

Yes.

In the src directory type

    sage -python setup.py develop

comment:31 Changed 11 years ago by rkirov

mpatel asked me to mention the changes I made to processing.min.js (which is why it is called processing.editor.min.js). Basically, the only one is that I made the mouse events be attached to the whole document, so that now one can drag vertices outside the canvas (for the erasing maneuver).

attach(curElement,"mousemove",function(e)... ----> attach(document,"mousemove",function(e)...

I will try to add directed graph functionality next (currently stuck at compiling sage4.3 and applying the patches).

comment:32 Changed 11 years ago by rlm

  • Authors changed from Radoslav Kirov to Radoslav Kirov, Mitesh Patel
  • Status changed from needs_review to positive_review

Bravo, very nice!

Please make directed functionality a new ticket, because I think this deserves a positive review.

comment:33 Changed 11 years ago by mhansen

I've merged the Sage library patch. Now the patch for the notebook needs to be merged.

comment:34 follow-up: Changed 11 years ago by was

  • Resolution set to fixed
  • Status changed from positive_review to closed

w00t!!!

merged into sagenb-0.4.8.

comment:35 in reply to: ↑ 34 Changed 11 years ago by rbeezer

Replying to was:

w00t!!!

I'll second that sentiment!

Thanks to Rado, Mitesh and everybody else for their work on this one.

comment:36 Changed 11 years ago by kcrisman

  • Merged in set to sage-4.3.1.alpha0
Note: See TracTickets for help on using tickets.