http%3A%2F%2Fhelp.metaphacts.com%2Fresource%2FSemanticTree.html

<div class="metaphacts_help">
	<ol class="breadcrumb" style="background:white;border:none;padding-left:0px;">
    <li>
      <semantic-link title="Help" uri="http://help.metaphacts.com/resource/Start">Help</semantic-link>
    </li>
    <li>
      <semantic-link title="Documentation" uri="http://help.metaphacts.com/resource/DocumentationOverview">Documentation</semantic-link>
    </li>
    <li>
      <semantic-link title="Components" uri="http://help.metaphacts.com/resource/HTML5Components">Components</semantic-link>
    </li>
    <li class="active">Tree Component</li>
  </ol>

  <h1>Tree Component </h1>
  <div class="documentation__intro">
    <div class="documentation__intro__description">
       Tree-based visualization, navigation and browsing through sub-tree structures with customizable node templates.
      
       <p>In modern browsers the tree can easily render hundreds of nodes in a deeply nested tree. However, there are different dimensions which may impact the overall performances:</p>
        <ul>
          <li> The size of the result set generated by the SPARQL Select Query, which needs to be transferred and parsed (i.e. trees containing nodes with multiple parents may result in duplicates). </li>
          <li> Individual nodes are being rendered using <a href="http://handlebarsjs.com/" target="_blank">handlebars.js html templates</a>. The size and complexitiy of the custom <code>tupleTemplate</code> may impact the overall performance. </li>
          <li> The amount of data being passed to each node and the complexity of the (sub)trees (i.e. depth of nesting, number of elements on each level).</li>
        </ul>
    </div>
    <div class="documentation__intro__demo" style="height:400px;width:400px;">
         <semantic-tree config='{
              "query":"
                    [[>Help:SemanticTreeSampleQuery]]
                   "}'>
          </semantic-tree>
      </div>
  </div>
  <div style="clear:both;"></div>
  <h2>Configuration </h2>

  <h2>Examples </h2>
  <h3>Basic Tree</h3>

  <div class="documentation__example">
    <div class="documentation__example__description">
      <ul>
        <li>No explicit root node defined in configuration (tree will search for nodes without parent).</li>
        <li>No custom tupleTemplate defined (default template is applied, will create a simple link.</li>
        <li>Tree is by default not collapsed and all subtrees are open.</li>
      </ul>
    </div>
    <div class="documentation__example__demo">
      <mp-code-example> <semantic-tree config='{
              "query":"
                      [[>Help:SemanticTreeSampleQuery]]
                   "}'>
          </semantic-tree></mp-code-example>
    </div>
  </div>


  <h3> Custom templates for tree nodes </h3>

  <div class="documentation__example">
    <div class="documentation__example__description">
      Specifies a custom <code>tupleTemplate</code> to format the rendering of each node element in the tree.
    </div>
    <div class="documentation__example__demo">
         <mp-code-example> <semantic-tree config='{
              "query":"
                     [[>Help:SemanticTreeSampleQuery]]
                   ",
           "layout":{
           	"tupleTemplate":"<semantic-link uri=\"{{data.node.value}}\"></semantic-link> &nbsp; <i class=\"fa fa-question-circle\" style=\"margin-right: 5px\"></i>"} }'>
          </semantic-tree></mp-code-example>
    </div>
  </div>
  
  <h3> All Nodes collapsed</h3>
  <div class="documentation__example">
    <div class="documentation__example__description">
      ... except all nodes on the path to the nodes as specified in the <code>keysOpened</code> array.
    </div>
    <div class="documentation__example__demo">
         <mp-code-example> <semantic-tree config='{
              "query":"
                     [[>Help:SemanticTreeSampleQuery]]
                   ",
           "collapsed": true,
           "keysOpened": ["http://help.metaphacts.com/resource/Installation"]}'>
          </semantic-tree></mp-code-example>
    </div>
  </div>
  
  <h3> Render only a subtree / explicit root node</h3>
  <div class="documentation__example">
    <div class="documentation__example__description">
      Uses the nodes as specified in the <code>roots</code> array to select the root nodes(s) for the tree rendering. 
      By default the tree will consider those nodes as roots nodes, which do not have a parent (i.e. parent is unbound/UNDEF). 
      However, in some situations it might be difficult to write a query leading to unbound parent node values. 
      In other situations it might be convenient to reuse the same tree, but (dynamically) render only subtrees.
    </div>
    <div class="documentation__example__demo">
         <mp-code-example> <semantic-tree config='{
              "query":"
                     [[>Help:SemanticTreeSampleQuery]]
                   ", "roots":["http://help.metaphacts.com/resource/Components"] }'>
          </semantic-tree></mp-code-example>
    </div>
  </div>
  
  <h3> Tree with none-default node/parent projection variables names</h3>
  <div class="documentation__example">
    <div class="documentation__example__description">
      By default the tree component expects a "node" and a "parent" projection variable in the tuple result of the SPARQL select query, whereas the "node" always needs to be bound. The properties <code>nodeBindingName</code> and <code>parentBindingName</code> properties can be used to change this default.
    </div>
    <div class="documentation__example__demo">
         <mp-code-example> <semantic-tree config='{
              "query":"
                    PREFIX : <http://help.metaphacts.com/resource/>
                    SELECT ?n ?p WHERE {
                        VALUES(?n ?p){
                        (:SemanticTable :Components)
                        (:SemanticCarousel :Components)
                        (:SemanticTree :Components)
                        (:SemanticSearch :Components)
                        (:SemanticGraph :Components)
                        (:Components :Start)
                        (:Installation :Start)
                        (:BasicSystemConfiguration :Start)
                        (:Start UNDEF)
                        }       
                      }
                   ", 
           		"nodeBindingName": "n",
           		"parentBindingName": "p"
           }'>
          </semantic-tree></mp-code-example>
    </div>
  </div>
</div>