JavaScript Graph editor

[Rado]

In the maple 13 thread, someone mentioned graph editor done in java
script that can be added to SAGE for interactive playing around with
small graphs. Since I recently came across the port of Processing to
JavaScript ( http://processingjs.org ), I decided to see how hard it
would be to implement that.

Here is the result:
http://www.math.uiuc.edu/~rkirov2/processing/grapheditor.html

There seems to be a bug in the JS port of processing, that makes it
redraw the picture even if it is told to redraw only upon change. So
currently the page might be a bit CPU-intensive (it won't crash your
browser). I am reporting this to the Processing group and hopefully
that should be fixed soon.

The code is basically Java so it has bunch of classes, which should
make it easy to implement a few more features, should you decide to go
with this.

[David Roe]

I also think that an interactive graph editor would be a very cool feature.  Perhaps a good project to work on at Sage Days 15?
David

On Thu, Apr 30, 2009 at 5:14 PM, Rob Beezer <goo...@beezer.cotse.net> wrote:

On Apr 30, 12:05 am, Rado <rki...@gmail.com> wrote:
> I decided to see how hard it
> would be to implement that.

Hi Rado,

Very nice!  This is a Beautiful Thing.  ;-)  I've built a couple of
programs in the past that would link a graph editor to computational
routines to allow one to experiment with changing a graph and
instantly learning how certain parameters or properties would react.
It'd be great to see something like this in Sage, so off and on I've
been giving it some thought.

Would something like the following be possible?

sage: g = graph_editor()

would pop up a graph editing area like you have built, and any changes
made in the editing area would be reflected in the Graph object g for
the lifetime of the editing area.  So for example, one could edit the
visual representation and then subsequently execute

sage: g.is_eulerian()

to obtain the property of the updated version of g.  Eventually,
something like this could be packaged up into an @interact, which I
think would be an extremely useful tool for both teaching and
research.

Some user-interface ideas:

1.  Is it possible to add a right-click context-menu to vertices?  You
can pack a lot of infrequently-used commands there:  delete, color,
weight, label, etc.

2.  I like to make new vertices by clicking on "empty" space (or not
too close to any existing vertices).

3.  To handle edges, I'd use a click on one vertex to highlight it
(like you have used red coloring, but I'd change the shape to a
slightly larger "target" shape, since I wanted to allow for coloring
of vertices).  Then a second click on a subsequent vertex would add/
remove the edge (ie toggle) and clear the highlight.

I've got a few items at the top of my Sage to-do list at the moment,
but I'd be interested in working with anybody who wants to carry this
idea forward.

Rob

[Rob Beezer]

On Apr 30, 4:27 pm, Rado <rki...@gmail.com> wrote:
> I will try to work a bit this weekend on the user-interface. I see
> some great suggestions by Rob, that are straight-forward to implement.
> I don't do much graph theory, so if you've seen good graph editor
> interfaces, send me a link for inspiration. Adding a context menu on
> vertices and edges can possibly be done with jquery overlaying
> elements, but I would like to keep the interface all canvas (keep it
> simple for now).

Rado,

Here are a couple of graph editors to look at:

1. http://graphexploration.cond.org/test.html
This is from Trac #1320. Java applet, you can pan easily (drag a
location in empty space), clicking on a vertex zooms you in (Display >
Center menu item is one way to get back out). Rolling over edges
seems to highlight endpoints and their labels. GPL'ed but not updated
since about two years ago.

2. http://buzzard.ups.edu/gts/testing.html
This is a standalone Java program I wrote years ago to explore
properties of graphs. It never quite made it to prime time. This
page with demo applets works for me still (amazingly), using 64-bit
Sun Java 6 on KUbuntu in Firefox. YMMV. Screenshot of full program
at
http://buzzard.ups.edu/gts/screenshot.jpg

Two blank canvases at the top. Click to make vertices, read
instructions just below for more. Try right-clicking on vertices and
edges to experiment with coloring vertices or edges.

Another applet at the bottom illustrates my idea of "drop-in"
computational boxes (you may need to move a vertical separator to
expose the graph editing window on the left side). As a
demonstration, one such box just counts triangles, updating itself as
you edit the graph. I think this sort of functionality would be easy
to accomplish with a good graph editor and additions to the @interact
functionality.

3. There's been a rumor about that Mike Hansen was experimenting with
graphs in SVG format.

More later.

Rob