GSoC Update 2 – DataTable Challenges

This is the third entry in a series of posts on my participation in this year’s Google Summer of Code program working on the reproducible research tool Sumatra with mentor Andrew Davison under the mentoring organization INCF.

Following up on the last post, I have now fully implemented the DataTables plug-in to Sumatra not only on the data page, but for record and data listings as well. Here are some code snippets as solutions to some of the challenges integrationg DataTables in Sumatra provided:
Sorting: In the record and data listing we use various ways to display information. For example, filesizes are formatted as “2 MB, 45 KB, …”, while durations are given as “15s, 2h 32min 10s, …”. Despite the formatting, it is highly desirable for the user to sort entries according to this information numerically. The solution in DataTables is to employ the HTML5 data attributes. In the code:

<td class='dataTable_td' id='size-t'

Here {{data|eval_metadata:'size'}} gives the filesize as an absolute numerical value, while the table itself displays the formatted filesize using Django’s built-in filesizeformat filter.
Word-wrapping: As Sumatra’s record and data listings have a lot of information to display, horizontal space is, by the relatively high number of columns, sparse. Table values include long labels and system paths. Default word wrapping (to allow columns to remain narrow) in the standard browsers occurs only at empty spaces (” “) and dash (“-“). Neither underscore (“_”) nor slash (“/”) allow word-wrapping, resulting in columns containing paths to grow exceedingly long. I did not find a way to enable wrapping at these characters globally, but was able to indicate breakables spaces by applying a custom template filter on the paths and labels to be displayed, using the <wbr> tag:

def ubreak(text):
    text_out = text.replace("_", "_<wbr>").replace("/","/<wbr>")
    return mark_safe(text_out)

Dynamic DataTable: Finally, DataTables provides a fantastic API to dynamically manipulate the table display. In my current version I’m using column.visibile() to dynamically show/hide columns, to control the number of entries shown in one page of the table and'previous'/'next') to enable page turning via the arrow keys.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s