Banff 2007 Demo using Exhibit

This page is a simple manual on how to use Simile's Exhibit technology for viewing and interacting with Semantic Web data, especially those resulting from SPARQL queries.

What is Exhibit?

Exhibit is a Web authoring technology from MIT's SIMILE project. It is primarlily an HTML-based technology, and uses javascript, ajax, and microformats to quickly handle RDF and JSON data, and render it into collection views.

RDF properties can simply be referenced for rendering using the '.<property>' attribute value (see below).

How is it used?

The Exhibit tutorial is an excellent starting point, but here is a summary of it in relation to the Banff 2007 demo:

1. Copy this code snippet, and use it as a template:

<html>
   <head>
       <title>HCLS Brain - Gene Expression Results</title>

       <link href="gene_brain_image_qresult.js" type="application/json" rel="exhibit/data" />

       <script src="http://static.simile.mit.edu/exhibit/api/exhibit-api.js"
           type="text/javascript"></script>

		 <style>
		       body {
		           margin: 1in;
		       }
		 </style>

   </head> 
   <body>
   <h1>Allen Brain Atlas Gene Expression Results</h1>
   <table width="100%">
       <tr valign="top">
           <td>
               <div id="exhibit-control-panel"></div>
               <div id="exhibit-view-panel"></div>
           </td>
           <td width="20%">
               <div id="exhibit-browse-panel"></div>
           </td>
       </tr>
   </table>
   </body>
</html>

Note the data file to be viewed is specified in the 'link' tag as href="gene_brain_image_qresult.js", which needs to reside in the same directory as the HTML. This page can now be generically viewed as is.

2. Next we apply some filters to the view. The following addition to 'exhibit-browse-panel' enables facetted viewing by the included categories:

<div id="exhibit-browse-panel" ex:facets=".hasName, .date "></div>

Sorting can also be included via:

   <div id="exhibit-view-panel">
       <div ex:role="exhibit-view"
           ex:viewClass="Exhibit.TileView"
           ex:showAll="true"
           ex:orders=".has_id"
           ex:possibleOrders=".hasName, .date, .hasGO">
       </div>
   </div>

3. Lenses for viewing/rednering any desired item are simply created specifying a lensable item such as a Table with 'ex:role="exhibit-lens"' and by using the 'ex:content=".<property>"' attribute in any item html tag:

 <table ex:role="exhibit-lens" class="expression_views">
   <tr>
     <td><img ex:src-content=".image" /></td>
         <td>
             <div ex:content=".label" class="label"></div>
	   <a ex:href-content=".uri" class="entrez" target="new" >Entrez-Gene <span ex:content=".label"></span></a>
             <div ex:content=".hasName" class="name"></div>

		 <div style="text-align:center" class="header">Transcript Region</div>
		 <img ex:src-subcontent="http://www.ncbi.nlm.nih.gov/entrez/sutils/geneprod.fcgi?geneid={{.has-id}}" />

		 <div style="text-align:center" class="header">Genomic Context</div>
		 <img ex:src-subcontent="http://www.ncbi.nlm.nih.gov/entrez/sutils/geneneighb.fcgi?geneid={{.has-id}}&n0=Mipep&n1=Tnfrsf19&n2=Sacs&n3=Sgcg&n4=Arl11&n5=EG432864" /> 
	
	  </td>
    </tr>
 </table>

Note URLs can be constructed by concatenating URL text to properties referenced as {{.<property>}} in 'ex:subcontent' calls.

As with any HTML, styles can be layered on top of this representation by using the associated class names in the lenses.

		 <style>
		       body {
		           margin: 1in;
		       }
		       table.expression_views {
		           border:     1px solid #ddd;
		           padding:    0.5em;
		       }
		       div.name {
		           font-weight: bold;
		           font-size:   120%;
		       }
		       div.label {
		           font-weight: bold;
		           font-size:   120%;
		       }
		       div.header {
		           font-weight: bold;
		           font-size:   100%;
		       }
		   </style>

That's pretty much it-- I haven't explored more complex aspects of Exhibit yet, but leave it to the reader to find more neat tricks!

-Eric Neumann