Introducing Tangelo

Over the past two years, we have been developing Tangelo [1] in the pursuit of rich web applications for solving problems, both old and new. We recently passed 2,000 commits in the repository [2], and Tangelo will soon be ready for prime time. This article aims to inform you more about the technology with a high-level introduction to the Tangelo Web Framework. We then answer the question: Why Tangelo?

What is Tangelo?
At its heart, Tangelo is a web application development platform, geared primarily toward data analytics and visualization applications. This platform is made up of Tangelo itself (a web server with a twist), as well as JavaScript and Python APIs to help drive it. The platform also includes an ecosystem of plugins that provide support for data management, user interfaces, visualization, and more.

What is the twist? Simply that, in addition to serving the static components of a standard web application, Tangelo manufactures server-side components from Python scripts included among your HTML, CSS, and JavaScript files. These services can leverage the power and scope of Python to do Pythonic things in your web application.
Here is a silly but illustrative example. Suppose you create this short Python script in the directory being served by Tangelo, now.py:

import datetime

def run():
return str(datetime.datetime.now())

Because of the presence of that run() function, Tangelo will respond with a string representing the current time.

We can try it out right now. Sep one is to install Tangelo. The easiest way to do so is using the Python package manager Pip:

$ pip install tangelo

Step two is to create the file now.py from the code listing above. Step three is to start Tangelo, letting it know you want to serve files from the current directory:

$ tangelo --root .

(If you get an error in this step, it may be that your computer is already using port 8080, the default, for another application. You can add —port 9090 to the command to choose a different port.)

Step four is to open http://localhost:8080/now in your favorite web browser. You should see the current time displayed. Refresh the browser, and the displayed time should update. Your first Tangelo application is complete!

Of course, the example is superfluous because JavaScript has the same ability to tell you the time with a simple
console.log(new Date()). But, there is plenty Python can do that JavaScript cannot. What if you want to:

• Retrieve data from a database using complex query and application-specific post-filtering
• Kick off a long-running compute job on a cluster and periodically check on its progress
• Use specialized visualization tools, such as Bokeh
• Construct a PNG image to display in your webpage using Python imaging libraries
• Use Whizbang, BeesKnees, CatsMeow, or some other new Python module that does something useful, sexy, and fun

In each of these cases, and many others limited only by our collective imagination, Tangelo puts more power in your hands to do what you need to create data sources, analyses, and visualizations.

We have designed Tangelo around the simple idea that Python should be a first-class citizen alongside HTML and JavaScript. The core of Tangelo dedicated to this idea is lean and mean. Thus, it is well testable. To enable advanced functionality on top of this core, Tangelo includes a powerful and flexible plugin system. Several plugins come bundled with Tangelo to do the following:

Interact with other Kitware software

• Girder [3], for bringing high performance data storage to Tangelo applications
• GeoJS [4], for creating map-based visualizations and animations
• VTKWeb [5], to create, control, interact with, and terminate VTK-based visualizations in-browser

Interact with Python packages and other software

• Bokeh [6], for applying ready-made visualizations to custom data sources
• Vega [7], to create interactive charts and visualizations
• PyPNG, to construct PNG images of data for use as a thumbnail or a clickable map, etc.

Implement powerful functionality unique to Tangelo

• Convert a basic data service into a streaming service to enable the handling of “big data” sources

Provide help in constructing HTML user interfaces

• A control panel for runtime application options that slides out of the way when not needed
• An SVG legend for use with maps or other SVG diagrams

We mentioned before that Tangelo is aimed toward visualization and analytics applications, and many of our clients, both inside and outside of Kitware, have been using it to good effect that way. But, you can always step outside the box a little bit too. For instance, Tangelo could be used to create system tools, such as a Wifi manager or a print monitor, since Python also affords a way to peek into such system-level services.

The hypothetical tree infographic depicts estimated transmission links using existing
case count data and a generation-based model.

Why Tangelo?
It is a good time to be developing applications for the web. There are many web application frameworks out there, which means lots of choices. It also makes it more likely that what you need exists. So, among the sea of choices, why choose Tangelo?

First, we have a quick disclaimer: If you are planning to build a traditional web application with a database, models to represent application data, and views to display it, then existing systems such as Ruby on Rails will match up to your project’s goals better than Tangelo. In our work, we have been looking beyond, toward scientific simulation and visualization, as well as toward other unusual applications that must pull together data from many unconventional sources, using experimental technology to process and visualize it.

As we mentioned earlier in the article, we believe that Python scripts should be considered first-class citizens alongside HTML, JavaScript, and CSS files, adding their voices and the richness of the Python ecosystem to your web applications. We have designed Tangelo to deliver this idea as simply as possible in order to open up web application programming to everyone, including those unfamiliar with terms such as “routing,” “content-type header,” and “RESTful.”

Django, Flask, Bottle, and CherryPy are all Python-based web frameworks. They tend, however, to relegate Python itself to second-class status, as it is wrapped up in a bit of red tape. Here is an example in a file called bottle-hello.py:

import bottle

app = bottle.Bottle()

@app.route("/hello/<name>")
def greet(name="Earthling"):
return "Greetings %s!" % (name)

bottle.run(app, host="localhost", port=8080)

When run with python bottle-hello.py, this application will serve a bit of dynamic content at /hello/Roni. Notice, however, how the simple code to create the content is suspended within a spider web of scaffolding. In Tangelo, things are much simpler. In your application directory, creating the following file, named hello.py, and then issuing the command tangelo --root . will serve this minimal application, which behaves the same way as the Bottle application but with fewer lines of code and without exposure of any framework API.

def run(name="Earthling"):
return "Greetings %s!" % (name)

Tangelo’s internal server logic handles the scaffolding you see in the Bottle example, and the names of files and directories on disk implicitly determine the routing. All that remains is the heart of the web service, expressed in general, Pythonic terms. When we say “first-class citizen,” we mean the “zero-API” creation of Python web services in individual files that are composed almost entirely of application logic.

In the excitement over Python, we should not forget about the humble static content that serves as the foundation of any web application. Serving static content complicates things a bit further for the Bottle application. It needs to declare new routes, listing files or directories to serve at each one. In Tangelo, all you need to do is include the files on disk in paths that reflect the desired routing — zero-API static content for free.

The other frameworks mentioned above look largely similar to the Bottle example. We showed the Bottle example because the other frameworks are all at least as complicated (some significantly more so).

We designed Tangelo this way for simplicity, as well as for the flexibility that results. For example, thinking of a web application as a bundle of HTML, JavaScript, CSS, and Python files enables reusability. There are ways to reuse the Python callbacks that make up a Bottle application. None of these ways, however, are so simple or flexible as simply handing someone a Python file to drop into their web application. The question moves from “How do I get route X to do action Y?” to “How do I do action Y?” This is the same question with which any Python programmer in any context wants to be engaged. In other words, it frees the developer from the mechanics of web servers and, thereby, abstracts function from form, leaving our focus just on the substance of the problem at hand.

Hopefully this gives you a glimpse of the interesting and useful things that will arise from Tangelo’s wider debut. Please take a look at the Tangelo website (http://www.tangelohub.org/tangelo/) for general information or the documentation (http://tangelo.readthedocs.org/en/latest/) to install, set up, and try Tangelo yourself. Drop us a note at tangelo-users@public.kitware.com if you run into trouble, if you have questions, or if you need help.

Acknowledgements

Tangelo development is sponsored by the Air Force Research Laboratory and DARPA XDATA program.

References

[1] http://www.tangelohub.org/tangelo
[2] https://github.com/Kitware/tangelo
[3] http://girder.readthedocs.org/en/latest
[4] https://github.com/OpenGeoscience/geojs
[5] http://www.kitware.com/news/home/browse/Kitware%3F2014_01_24%26VTK+6.1.0+Ready+for+Release
[6] http://bokeh.pydata.org
[7] http://trifacta.github.io/vega
[8] http://tangelo.readthedocs.org/en/latest
[9] tangelo-users@public.kitware.com

Dr. Roni Choudhury is a Research and Development Engineer at Kitware.  He has directed the design and development of Tangelo from the ground up to bring advanced and experimental information visualization techniques to the web.

Dr. Jeff Baumes is a Technical Leader and Data Scientist at Kitware. His primary responsibility is to create tools that effectively visualize large and complex data, spanning relational, geospatial, temporal, bioinformatics, financial, and textual data.