DataNav Viewer

DataNav Viewer is an interactive, single-page web application providing read-only access to the DataNav portal's public content. Implemented entirely in Javascript and dynamic HTML, there is no need to download the viewer. All of the application's assets (Javascript code files, image files, and the portal's home page) are maintained on the web server hosting the DataNav Server application. The user merely points a suitable web browser to the portal's web address, or URL, and the browser automatically downloads those assets as needed to run DataNav Viewer on the client side. As the user interacts with it, the application's Javascript sends asynchronous requests to DataNav Server to retrieve information such as: the list of archives in the remote portal's "archive vault"; the list of member figures in a particular figure archive; the FypML markup defining an archived figure; a selected data hub's navigation map and HTML description; the figure template, instance configuration and instance list for a selected hub navigation view; and the data sets needed to render a particular instance of a selected view. Upon receiving the portal's response, the web page is updated in place to reflect the information retrieved.  (If any of these terms are unfamiliar to you, be sure to review this description of the portal content model.) 

Usage

DataNav Viewer was designed to be as intuitive as possible, employing common user-interface paradigms so that the portal reader can "discover" how to use the application on the fly. In fact, in many respects, the interface presented in Viewer is very much like that in the DataNav Builder Java application; users of Builder will have no difficulty becoming accustomed to Viewer. The application consists of a single web page that is updated in place as the user interacts with it. As illustrated in the screenshots below, the web page has four distinct components:

• The view window is an HTML5 canvas element on which portal content is graphically rendered.

• The navigation control panel, left of the canvas, contains widgets by which the user explores the portal.

• Below the view window is the description panel, a collapsible text panel displaying the HTML-formatted description of the currently selected entity.

• At the bottom of the page is the status bar, which displays progress messages as DataNav Viewer retrieves content from the remote portal. You can click on this bar to reveal the recent message history (to hide the message history pop-up, hit the Esc key or click outside the history window).

Viewer has three distinct display modes. When you initially open the web page -- after a brief delay while the necessary Javascript assets are downloaded by the web browser --, it presents the "vault" view. In the view window appears a "thumbnail strip" -- much like the one in Builder -- showing thumbnail images of all public data and figure archives currently in the portal's archive vault. As in Builder, a thumbnail's background is indicative of the archive type. A translucent gray mask obscures all of the thumbnails but one, which corresponds to the currently selected archive. That archive's description is loaded in the description panel.

There is no navigation control panel in the vault view. To change the current selection, simply click on one of the unhighlighted thumbnails.  You can "drag" the thumbnail strip to the left or right to scroll hidden thumbnails into view. Alternatively, use the left or right arrow button to select the previous or next archive in the vault, respectively. Observe that, whenever you make a selection change,  the thumbnail strip and/or the selection window "slides" left or right as needed so that window lies over the chosen archive, and the description panel is updated to reflect the summary information (title, authors, description) for that archive.

Be Patient!

Depending on your browser, the speed of your network connection, and the responsiveness of the remote portal, you may experience significant delays when using DataNav Viewer. For example, when you first open the web page, it may take a while to download the required Javascript (.js) files from the portal server, as well as the supporting Yahoo YUI Javascript code on which the Viewer's implementation relies. Next, the Javascript code must retrieve content from the portal before it can present the initial archive vault view.

Whenever the application is sending requests to retrieve content from the portal, you will see progress messages displayed in the status bar. Archive thumbnails are rendered as the necessary information is received from the portal. Once the status bar reads "Ready", then it is ready for user interaction.

To explore the currently selected archive in depth, simply click on its thumbnail or hit the Enter key. If the archive is a data hub, an animated "sliding transition" replaces the vault view with the "hub view". The selected hub's "entry-point" navigation view is loaded into the view window, that view's title and description appear in the description panel, and the navigation control panel is revealed:

Here is where the user will explore the hub's data. Again, the control panel is nearly identical in appearance and operation to a similar component in the Builder application. The dark blue buttons reflect the search attribute values that identify the current displayed instance of the navigation view. Click on any button to raise a pop-up list by which you can select a different value for the corresponding search attribute -- and thereby select another instance of the current view. This is how you explore all hub data that is presented in a given navigation view. If the view is configured to iterate over collection-type data, you will see one or more iteration block widgets, with left and right arrows straddling the current block readout (as in the screenshot above).

Note that all of the push button-like widgets in the navigation control panel are accessible from the keyboard. Use the Tab key to move the focus from one widget to the next. When the focus is on one of the attribute value buttons, the Space or Enter key will raise the pop-up to select a different value; alternatively, use the arrow keys to change the current value without raising the pop-up. When the focus is on an iteration block widget, the Space, Enter, Right arrow, or Down arrow key will advance to the next block (with "wrap-around"); the Left or Up arrow key will select the previous block.

To explore a different view of the same hub, simply click on one of the view links listed in the Explore Further box at the bottom of the navigation control panel. The current view will fade out, and the chosen view (once the necessary content is retrieved from the portal) will fade into place. To return to the vault view, click on the Return to archives button at the top of the navigation control panel.

Back in the vault view, if you select the thumbnail for a figure archive and hit the Enter key, another sliding transition takes you to the third distinct view in the web app, the "figure archive view". This view offers a slideshow-like presentation of the figure archive's content. The first figure in the archive is initially loaded into the view window, while its legend (title plus description) appears in the description panel. The navigation control panel in this case consists of a vertically oriented figure thumbnail strip showing small images of all the figures stored in the archive, and a set of buttons for selecting a particular figure:

Much like the archive thumbnail strip in the vault view, you can drag the strip up or down to scroll hidden thumbnails into view, and you can click on an unhighlighted thumbnail to select the corresponding figure. The selection window slides up or down to highlight the thumbnail you selected, and the figure and its legend are loaded into the view window and description panel, respectively. Use the buttons to the left of the strip to change the selection to the first, previous, next, or last figure in the archive; the number of the currently selected figure is indicated in a text widget. Normally, that widget has the keyboard focus (note the blue translucent surround in the screenshot); in that case, use the Home, Up arrow, Down arrow, and End keys to select the first, previous, next or last figure. To return to the vault view, click on the button icon in the top-left corner of the navigation control panel.

DataNav Viewer remains a work in progress. It was updated recently (version 4.7.0) to support "stateful links" and the browser's back/forward button functionality (browser history). Now it is possible to send someone else a URL link to a particular figure in a figure archive, or a particular instance of a navigation view within a data hub.  However, some aspects of the web app are still lacking, for example: (1) it relies on advanced HTML5 and Javascript code that is not universally supported across the major web browsers; and (3) a more intuitive way to "drill down into the data" would involve clicking on highlighted data points or data traces in the view itself, but such interactions are not yet possible. We hope that future versions of DataNav will address such issues.

Browser Requirements

DataNav Viewer relies on components of the Yahoo User Interface (YUI) library to present a desktop-like application within a web browser window. It also relies on several aspects of the HTML 5 standard, especially the canvas element. YUI and HTML 5 are relatively new web technologies that are still under development. [NOTE: As of Aug 2014, Yahoo decided to stop all development efforts on YUI due to major changes in web technology; however, Yahoo continues to maintain the last release. Eventually, we may redesign Viewer to eliminate its dependency on the YUI library.] Therefore, it is essential that you use an up-to-date web browser that supports these technologies. The viewer has been tested and found to work reasonably well in current versions of Google Chrome and Mozilla's Firefox. However, the current version of the app is causing Safari to crash in OS X, and it has not been tested in Internet Explorer. The app has been most thoroughly tested on Google Chrome, and for the time being we can only recommend using the latest version of Chrome to explore a DataNav portal. If this is not possible, then it is best to download the DataNav Builder application and use that instead.