Sunday, June 29, 2008

Breaking up the Data Set UI Across Multiple Pages

We decided that there were just too many functions to have them all on one page for the data set wizard. The UI is to be broken up in three stages where the user 1) selects the tokens, 2) applies modifiers, and 3) applies filters/cohorts. So, most of the work I've done this week was refactoring all the code into three separate modules and getting all the framework in place to handle this new paradigm.

Here's the first page which provides a way to select tags for narrowing down the tokens, search the tokens, and move the desired tokens to the selection pane:

Here's the second page that lists the selected tokens and provides the interface for applying modifiers to the tokens:


Here's the final page that is really simple right now and just provides the drop down list of available filters/cohorts:


One of the main pain points has been how to keep all of the pages aware of the data input from the other pages as the user toggles between the pages. For instance, the modifier page needs to know which tokens have been selected on the token selection page so that the appropriate token list is displayed on the modifier page. I built a helper class for this so that these variables can be shared in real time and later written to the design as public properties so they will be loaded appropriately if the user wants to later edit the data set. I'm still ironing all of this out as there are a lot of subtle use cases to handle based on the context in which the data set is being modified, but the basic functionality is there.