I was really impressed by gcubed's obs html portlet post (and all of his other work as well). I had been messing around with Mike Bostock's d3js library and decided to try and combine both. I borrowed much of Gene's authentication and document parsing work but rendered the OBS like this: http://bl.ocks.org/mbostock/4339083. Toggle nodes to expand/collapse.
1. I have a single html file containing the required css and js (excluding the d3.js library). I serve it up from a "custom" directory created in my Clarity application's webroot, but chris.wuenstel's knowledge store trick (https://communities.ca.com/thread/116836359) would work too.
2. I do the same thing with the d3.js library (d3.v3.min.js), although you could use a CDN. Available from: http://d3js.org.
3. I use an HTML portlet with an iframe like Gene.
4. There's a simple nsql query (id: x_api_obs). Replace the OBS UNIQUE_NAME value in the WHERE clause with something appropriate.
Areas for Improvment:
While it is somewhat useful for visualizing larger OBSs, on its own it's really just a parlor trick. But I could imagine adding to it to show just about anything. For example, you could show OBS associated security rights for a given user/group/OBS unit.
Going further, it might be nice to build a library/framework to handle the Clarity api access and document parsing. I suppose that you could also abstract pre-built charts on top of d3js similar to http://nvd3.org, but oriented to Clarity.
- Will not work with IE in v13.0 (and maybe v13.1-3). This is due to Clarity forcing IE8 emulation in 13. It does work on IE in v14.1.
- Works on Chrome and later versions of FF in 13, but does not work in older versions of FF and Safari. I don't understand why, but the XML returned from Clarity is not parsed correctly in these browsers.
- I'm not much of a client side JS developer...