jSpace 1.0 Preview
by Michael Grove
Kendall put me on the hook for this post, but I was planning to write it anyway. At least, I was planning on the post that will follow this one, where I talk about how I created the new jSpace UI, but it makes sense to show off the new UI before getting into the technical bits.
As we recently announced, jSpace was deployed as the client for NASA’s POPS application (you can read more about it here). A lot of work went into the tool to get it ready for deployment into a production environment, and through a lot of testing, both internally, and via a pilot user test at NASA, we were able to shake a lot of bugs and smooth out the rough edges. Internally, the version deployed for NASA was .90, and in the months since deployment, I’ve been collecting a list of tickets to take jSpace to 1.0.
One of the major categories of tickets for the 1.0 version has been UI improvements. jSpace is a powerful application, and it has received lots of great feedback from users at NASA, but it does not look as polished as one might expect for an end user tool. In one of my tickets, I described it as utilitarian; the UI works, but doesn’t have any wow factor. So this was one of my big aims for the new version of jSpace, to sex up the interface to give it a bit of that wow factor.
My short list for new UI features was
- Update the look of the application
- Drag and Drop to move columns
- Collapsible columns
- Animations for the movement, addition, and closing of columns
- Better “busy” state visuals (more correctly, adding a visual representation for a busy state)
- Add a new type of column widget, specifically, a map based one (think Google Maps)
Armed with a fist full of tickets for these items, and some new libraries from the folks at SwingLabs, I set off to make these happen; first as a stand-alone mockup, and then by incorporating that code into the trunk of jSpace. Here’s how it ended up:
1) Update the look of the application:
This is a shot of the basic jSpace interface browsing our baseball statistics dataset. The query results in a list of all shortstops to have ever played for any Baltimore Orioles franchise. I’ve selected my all-time favorite, Cal Ripken Jr, to show off the Web View control which will display results from a web search, in this case the Cal Ripken page from Wikipedia. One other thing to point out is that we’ve simplified the buttons at the top of the column. There are only two buttons now, the one on the right collapses/expands the column (see #3), and the other displays the context menu for the column which is where you will find the items for perform operations on the column, such as closing or move it.
2) Drag and Drop to move columns:
Here you can see that I’m dragging a column, in this case the team column, to a different slot in the interface. You’ll see the drop indicator (that red line) showing the new location of the column. Once I drop the column, the column will slide into its new location ala the column movement animation (see #4).
3) Collapsible columns:
One problem with browsing a complex data set is that you can have more columns than you can fit on the screen. The column panel scrolls, so you can have part of your selection path scrolled off screen, which makes it easier to lose the context of your search. Now, you can collapse a column once you’ve made a selection to save some screen space, and when you mouse over the collapsed column, the tooltip shows you what the selection is, and if you click on the link to any of the selected items, the column will expand and scroll down to that item.
4) Animations for the movement, addition, and closing of columns:
Previously, if you moved, added, or closed a column, the columns on screen would magically just update, there was not much visual indication that anything was happening, it just did. I wanted it to look like something was actually happening when you changed the columns, so now we have animations for when you move (they swap), add (it fades in while expanding into its position), or close (it collapses and fades out) a column.
5) “Busy” state for columns:
When you make a selection, or otherwise do something to alter the selection path, like closing a column or adding a new one, the database is queried to update the contents of the UI. In the past, the only indication of this was that 1) the mouse cursor became the wait cursor and 2) the UI froze until the operation was complete. And sometimes because the UI froze, the cursor never changed. In either case, not a very friendly user experience. So I traded some bad user mojo for threading headaches, and I do the queries and UI updates in different threads. This allowed me to provide a busy animation for a column that is updating itself from the database. It’s now easy for the user to tell when a column(s) is doing something.
6) New Map column widget:
I wanted to create a map column widget because it would be useful, not only in general, but for the POPS application, and because it would help me work out the kinks in the extensibility of the column UI API. I ended up with two variations, one with the map inline, and one with the map as an “alternate view” of the column. For the inline map, since a column is usually an awfully small space to cram a map into, when you mouse into the column, it will “blow up” and give you a larger map to do the selection from.
Until next time, stay classy cyberspace.