NYCJUG/2013-12-10/SophisticatedInterfaceExample

From J Wiki
Jump to navigation Jump to search

Some Interface Examples

Here are some screenshots illustrating the complexity and usefulness of the interface of a mature, complex software package.

Initial View

Initially, we see a high-level view of the data, on the left, and workflows, on the right.

height="498",width="665" The data is shown here on the left is in a tree structure that categorizes it by type: by source (File, SQL, etc.), and by kind of aggregate (Baskets, Portfolios). The logo on the right organizes the high-level operations which we might perform on the data – called “workflows” – in a circle reflecting a natural order in which we might do these tasks. The titles of these workflows are clickable links that initialize fresh versions of each of them.

Drilling Down

Starting on the left, we see that selecting an item of the tree unfolds the details of it as we might expect. Here, we see that portfolios are grouped in folders by (index) provider, and that they are arranged alphabetically with meaningful icons next to their names illustrate internal information about them. The pair of chain links, for instance, tells us that a portfolio is linked to underlying database procedures, so will be updated automatically. height="360",width="209"
height="515",width="634" Double-clicking on a portfolio name brings up the details of its constituents, showing us a current view and providing a drop-down to allow easy access to historical views, each of which indicates the number of constituents in parentheses next to the end-of-month date of the view. The default information columns can be customized per user.

Also, as seen below, some of the columns that show information which may change over time allow us to “hover” the cursor over them for a quick look at their history. In the case below, we see that IBM’s sector of “Information Technology”, changed on 5/3/2010. In this case, the underlying classification within the sector changed.

height="95",width="739"
Besides the aggregate data types, there are individual data items also accessible from the “Data” tree. Here we see how these items are organized by provider – a schema similar to the portfolios we just saw. Within a provider folder, we see a regional or other useful classification, as well as a list of the individual items. As with the portfolios, double-clicking on one of these items will allow us to see the data underlying it. However, in this case, we’ll illustrate the right-click functionality to bring up information about the item at a system level. In this case, we choose to edit the item. A right-click on one of the portfolios we saw earlier would give us similar sorts of choices for them as well. height="427",width="309"

Information Organization

Here we see the details of the “Edit” dialog for this piece of data. We see its default settings for things like date format, reporting frequency, cache behavior, and time zone. Notice how the content of this item refers to a parameterized SQL query near the bottom of this dialog. The stored procedure call contains tokens, indicated by the strings beginning with dollar signs, which are filled from the relevant context when this item is used. Note also how the name of the item and its category (the folder in which it is grouped) are user-selectable. height="344",width="514"
Jumping back up to the top of the main screen, we see that the “Data” view is associated with the leftmost icon on the top icon bar. If we select the next icon to the right, we’ll open up a different view of the workflows as seen below. height="290",width="350"
height="422",width="278" We see that this workflow view has a drop-down filter to help organize and find particular workflows. The filter uses abbreviations based on the titles we saw around the circle in the first view we saw. Here, we’re selecting “DE” for “Data Export” workflows.
Here we see a hierarchy within a particular workflow: a “Factor Backtest” in this case. We’ve selected a particular workflow modified at the date and time as shown. Each column allows sorting the table by double-clicking on its header. In addition to ordering by columns, we can find workflows by entering text in this filter box to select the relevant matches. Once we make a selection, details about runs of this workflow appear in the pane below: we see names, dates and output sizes for each time this workflow was run. If we select one of the runs, we see a further breakdown of a high-level summary of the output of that run. Double-clicking on one of these will bring up another window with the output of that section, as shown below. height="616",width="597"
height="419",width="440" Here we see some of the information brought up by selecting the second model shown above. Note that the summary information is on the first of multiple tabs; the other tabs allow us to open up more detail about these results.