Skip to content

Metadata In Context Expander (MICE)

Jump to bottom Edit New page
Ajit Jain edited this page Dec 7, 2015 · 11 revisions

Try MICE

Table of Contents

Overview

Built upon BigSemantics, MICE is a novel interface that allows you to visualize metadata from supported websites dynamically. By clicking on the plus sign (+), it also allows you to expand connected metadata in place without navigating to the page.

Getting Started with MICE

MICE is easy to use.

For example, this link allows you to see the metadata for the movie Life of Pi from IMDb. It shows information about the movie such as title, abstract, ratings, and cast. Clicking on the plus sign will cause MICE to bring in connected metadata, such as information about one of the movie's cast. Such expansion of metadata can be applied again, for example, to find movies that one actor or actress was starred in.

This link visualizes the metadata for the same movie from Wikipedia. Again, connected topics and categories can be further expanded, to bring in more metadata.

The above examples highlight some features of MICE:

  • MICE works with different types of information. In the IMDb example, it works with information about not only movies but also people. In fact, the MICE interface is driven by types, specified in the form of wrappers in BigSemantics.
  • MICE is dynamic. There is no need to prepare IMDb or Wikipedia data into a certain format in advance for MICE to work. MICE is designed to work with live Internet information.
  • MICE expands metadata in context. In contrast, with typical web browsers, when you click on a hyperlink to find relevant information, the tab reloads, or a new tab pops up. In either case, you lose the context. Maintaining context can be useful, for example, when you want to compare the cast list for different movies.
Examples:

For Developers

MICE is available as a JavaScript library. MICE allows developers to dynamically render extracted semantics into rich interactive UI components using HTML and CSS. MICE relies on debis.js to make AJAX requests to a back-end service to provide the semantics and corresponding wrapper (which contains the needed presentation rules) for a given source document URL.

View the Github project

Things to Include

To use MICE, the MICE css and js files must be included in your HTML file.

It'll probably look something like this: 

<!-- CSS! -->
<link href="../BigSemanticsJavaScript/renderers/styles/metadataRenderer.css" rel="stylesheet" type="text/css">
<link href="../BigSemanticsJavaScript/renderers/styles/twitterMICE.css" rel="stylesheet" type="text/css">

<!-- bsjsCore Files -->
<script type="text/javascript" src="../BigSemanticsJavaScript/bsjsCore/Readyable.js"></script>
<script type="text/javascript" src="../BigSemanticsJavaScript/bsjsCore/BSAutoSwitch.js"></script>   
<script type="text/javascript" src="../BigSemanticsJavaScript/bsjsCore/BSService.js"></script>   
<script type="text/javascript" src="../BigSemanticsJavaScript/bsjsCore/BSExtension.js"></script>   
<script type="text/javascript" src="../BigSemanticsJavaScript/bsjsCore/BSUtils.js"></script>
<script type="text/javascript" src="../BigSemanticsJavaScript/bsjsCore/MetadataTask.js"></script> 
<script type="text/javascript" src="../BigSemanticsJavaScript/bsjsCore/MetadataViewModel.js"></script>
<script type="text/javascript" src="../BigSemanticsJavaScript/bsjsCore/Readyable.js"></script>
<script type="text/javascript" src="../BigSemanticsJavaScript/bsjsCore/Downloader.js"></script>
<script type="text/javascript" src="../BigSemanticsJavaScript/bsjsCore/ParsedURL.js"></script>
<script type="text/javascript" src="../BigSemanticsJavaScript/bsjsCore/Downloader.js"></script>
<script type="text/javascript" src="../BigSemanticsJavaScript/bsjsCore/RepoMan.js"></script>
   
<!-- Required renderer files -->
<script type="text/javascript" src="../BigSemanticsJavaScript/renderers/interfaceStyle.js"></script>
<script type="text/javascript" src="../BigSemanticsJavaScript/renderers/TweetBubbleRenderingTask.js"></script>
<script type="text/javascript" src="../BigSemanticsJavaScript/renderers/TweetBubbleRenderer.js"></script>
<script type="text/javascript" src="../BigSemanticsJavaScript/renderers/RendererBase.js"></script>
<script type="text/javascript" src="../BigSemanticsJavaScript/renderers/RenderingTask.js"></script>
<script type="text/javascript" src="../BigSemanticsJavaScript/renderers/twitterICE.js"></script>
<script type="text/javascript" src="../BigSemanticsJavaScript/renderers/ICE.js"></script>
<script type="text/javascript" src="../BigSemanticsJavaScript/renderers/VanillaMICE.js"></script>
	
<!-- Just the simpl things -->    
<script type="text/javascript" src="../BigSemanticsJavaScript/bsjsCore/simpl/simplBase.js"></script>

Next up, you'll need to give the MICE somewhere to live on your HTML page. In the body tag, simple create a div. It could look something like this: 

<body>
  <div id="mice"></div>
</body>

If you want MICE to render metadata for some url as soon as the page loads, include the following HTML.

MICE.initialize() searches for all metadataRendering's and builds a MICE table for the anchor inside them. 

<body>
   <div id="content" class="metadataRendering">
       <a href="http://en.wikipedia.org/wiki/Exploratory_search"> </a>			
   </div>

   <script>
      MICE.initialize();
   </script>

</body>

Using MICE

To give MICE a target URL and render the In-Context Expander with the metadata, you need to include a single call to the MICE in your javascript code. The addMetadataDisplay function takes five arguments:

  • The div object where you want to render MICE
  • The target URL (a string) to pull metadata from
  • Metadata to render. Use null if metadata is not already cached
  • The renderer to use for constructing the metadata visual
  • additional options e.g.
    • requestMD, true if the function should request metadata from service, else false
    • reloadMD, true if the metadata should be extracted afresh vs being pulled from the cache (if possible), else false
    • isRoot, is this the root metadata for the rendering (currently used for removing existing children)
Your javascript code to use MICE will look something like this: 
var url = http://www.amazon.com/Discovery-Daft-Punk/dp/B000059MEK/ref=sr_1_1?s=music&ie=UTF8&qid=1365793732;
var content = document.getElementById("myMice");

RendererBase.addMetadataDisplay(content, url, null, MICE.render, null);

For Twitter, use TwitterRenderer: 

TwitterRenderer.addMetadataDisplay(content, url, null, TwitterRenderer.render, null);
Add a custom footer
Add a custom sidebar
Clone this wiki locally