An Experiment: Using Javascript to Display CellSet Data

I've just started to use Javascript professionally so I've decided to apply my new knowledge to experiment on using this technology to display MDX data. My goal was restricted to display a CellSetAxis from a fixed query, allowing the user to drill down/drill up on any member.

High Level Design

Such a modest goal would be accomplished by implementing a CellSetAxis Javascript class with the following contract:

1. CellSetAxis(elem)
     elem: jQuery element
   Creates a new class object to display an axis as a child of the jQuery element passed as first parameter.
2. setData(cellSetAxisData)
   Updates the axis content using the provided data. More on this data structure in a moment.
3. setExpandHandler(handler)/setCollapseHandler(handler)
     handler:function(csAxis, position)
   Install a handler function to respond a user interaction to drill down/drill up a given position. The csAxis will contain a reference to the object itself;
   position will contain the array of members conforming the position to act on.

The counterpart to this Javascript class would be a RESTful Java Servlet generating the required JSON representation from CellSetAxis objects (GET), and executing the drill operations (PUT).

CellSetAxis alla JSON

A CellSetAxis in olap4j is basically a table of members with a row for each position, and a column for each hierarchy in the axis. To minimize data redundancy the JSON format will parallel the expected representation, using spans; and the following CellSetAxis fragment

Will have this JSON structure

[
  [{member:"All Stores"}, {member:"All Products"}],
  [{member:"Canada", span:4}, {member:"All Products"}]
  [{member:"Drink"}],
  [{member:"Food"}],
  [{member:"Non-Consumable"}]
]

Actually, this is an oversimplified version, for each member, the servlet generates the following information:

[
  [{member:"All Stores"}, {member:"All Products"}],
  [{member:"Canada", span:4}, {member:"All Products"}]
  [{member:"Drink"}],
  [{member:"Food"}],
  [{member:"Non-Consumable"}]
]

Triggering Drill/Undrill

DOM generation from this JSON format is pretty straightforward so the last step is detecting drill/undrill actions initiated by the user.

The strategy I've used is attaching to each HTML cell a reference to the member it represents and a back pointer to the previous member in its position. A single click handler installed in the table representing the axis can find the clicked cell and build up the drill/undrill position.

Wrap Up

Implementing my self imposed goals were easier than expected and the end result is pretty satisfactory. Furthermore this solution presents some advantages over the JSF library: unloads the server from some tasks that can be better accomplished in the user's browser, reduces the amount of information sent forth and back from the browser to the server.