topo.html

<div ng-if="!node.$resolved" flex layout="column" layout-align="center center">
  <md-progress-circular md-mode="indeterminate"></md-progress-circular>
  <h3>Loading...</h3>
</div>

<md-content ng-if="node.$resolved" class="md-padding">

<div class="breadcrumb md-whiteframe-z1">
  <md-button href="#/topo/">
    <md-tooltip>Topo Root</md-tooltip>
    <md-icon md-font-set="material-icons">folder</md-icon>
  </md-button>
  <span class="breadcrumb-divider">/</span>
  <span ng-repeat="elem in breadcrumbs">
  <md-button ng-href="#/topo/{{elem.path}}">{{elem.name}}</md-button>
  <span ng-if="!$last" class="breadcrumb-divider">/</span>
  </span>
</div>

<md-list ng-if="node.Children">
<md-list-item class="md-whiteframe-z1" ng-repeat="child in node.Children" ng-click="navigate('/topo/' + (path ? path+'/' : '') + child)">
  <md-icon md-font-set="material-icons">folder</md-icon>
  <h3 flex>{{child}}</h3>
</md-list-item>
</md-list>

<md-content ng-if="node.Data" class="md-padding md-whiteframe-z2">
<pre>{{node.Data}}</pre>
</md-content>

<div ng-if="node.Error">
  <h2>Error</h2>
  <p>{{node.Error}}</p>
</div>

</md-content>