Cola.js – Constraint-Based Layout in the Browser | Hacker News Reader

Cola.js – Constraint-Based Layout in the Browser

marvl.infotech.monash.edu

130 pointsmoklick14 comments

HotDrink is a declarative, constraint-based UI system that models the flow of data across the elements in the UI[1]. Trivially, it can repurposed for layout; although, most UI designers balk at the loss of control. The basic idea comes from a sizing dialog:

    height: [   ]

    width : [   ]

     area : [   ]

If the user enters a height & width, the form should update area [2]. If the user then updates area, then height is the free constraint (last recently updated). The whole system scales to work with incredibly large interfaces [3]. The experience section in [4] describes Adobe's experience porting chunks of Photoshop to using this system. (I did the figures for [4]; I'm quite proud of them.)

[1] https://code.google.com/p/hotdrink/

[2] http://dl.acm.org/citation.cfm?id=2371413

[3] http://dl.acm.org/citation.cfm?id=2047892&CFID=690849385&CFT...; http://dl.acm.org/citation.cfm?id=1449927&CFID=690849385&CFT...; http://dl.acm.org/citation.cfm?id=1621630&CFID=690849385&CFT...

[4] https://parasol.tamu.edu/~jarvi/papers/gpce08.pdf

Nice. But as with most of these libraries, I don't think it can handle large numbers of nodes/edges and show such graphs in a meaningful way. It really takes more than a force-directed algorithm to present data in an understandable way.

Here is a nice collection of large graphs: [1] Visualize that in a useful way, and I'm impressed.

[1] https://snap.stanford.edu/data/

This is interesting, but had hoped it would be something like iOS's Auto Layout for the browser.

That'd be https://gridstylesheets.org/ (and its alternatives)

Auto Layout is based on the University of Washington's Cassowary Constraint Solving Toolkit.

There's a JS version: http://constraints.cs.washington.edu/cassowary/

Auto Layout and cola.js have a common lineage. Kim Marriott and Peter Stuckey are authors of the original Cassowary paper and are members of the MArVL research group at Monash University that publishes cola.js and related technologies.

I thought it would be too, but this is just as awesome.

Offtopic - why does monash.edu.au redirect to monash.edu? This is an Australian university.

Edit: also, http://nic.monash/

Because they are special snowflakes. They apparently aspire to seen as some sort of ivy league university and don’t want the “stigma” of being mistaken for being in Australia. As an Australian this sort of cultural cringe makes me angry, but it is all too common :(

at least it doesn't redirect to monash.edu.at ;)

Wow. How long did this take to build? This is pretty impressive.

can anyone recommend more papers/algorithms/reading material on layout algorithms in general? I'm very interested in layout algorithms of smaller node/edge counts (less than 1000). most material I've found is geared towards "big data" and hundreds of thousands (or more) of nodes/edges.

Graph Drawing: Algorithms for the Visualization of Graphs by Tollis, Di Battista, Eades and Tamassia (http://www.amazon.com/Graph-Drawing-Algorithms-Visualization...). The book is from 1998 but is a good basis for reading future papers and algorithms in this area.

Wow, this is pretty cool.

Reply on news.ycombinator.com