Understanding the Web Document when using the Spotfire® API

A key component in the Spotfire platform is the document model. It is structured as a tree. that corresponds to the structure of the user interface: The root holds a collection of nodes for each page, and each page has a collection of visualizations, and so forth. 

The web document is a node tree on the server. When rendered, it translates the document model into a rendered web document that can be visualized in a web browser.

In a running instance of a Spotfire web client there are three different node trees:

• The document model
• The web document
• The rendered web document

Consider the document model node tree. Obviously, not every part of the document model has a web client equivalent, but many will. These make up the web document. Rendering the entire server-side web document produces the rendered web document, a node tree that can be visualized on a client-side web browser.

Each web document node generates a corresponding node in the rendered web document. The identities of the nodes are related, to simplify interaction, and parent-children relationships are preserved.

The nodes of the rendered web document are DIV elements.
<div id="1">
   <div id="2">
       <div id="4">
           <div id="6"></div>
           <div id="7"></div>
       </div>
       <div id="5"></div>
   </div>
   <div id="3"></div>
</div>

When there are multiple clients (each browser tab or window is a separate client in this sense), each client needs a separate view of what is currently active. The view can be looked on as having its own "cursor", or current context. This currently includes active page and active visualization, which in turn affects the current details-on-demand table, active data table, active marking and active filtering.

The conceptual image above shows an example analysis containing two pages, and each page contains one visualization. There are also two data tables. Two different clients (indicated by the green and blue color respectively) access this analysis; one client displays Page 1 and the other client displays Page 2.

Each client will act on a separate web control tree on the server, each containing just the elements that are currently active for that client. Note that the Page element could conceptually be interpreted as the page tab collection; hence, it is rendered in both clients (but with different tabs marked as active).

Having different web control trees also makes it possible to receive events only when changes are made to the web control tree that is affected. For example, if "Vis X" is removed, "Page 1" is notified, and the green client is partially re-rendered. The blue client will receive no event at all from that operation. However, if "Page 1" is renamed, both the green and blue client will receive an event to re-render the page tab collection.