from textwrap import dedent
import uuid
class TreeViewer(object):
def __init__(self, group_icon='jstree-folder', array_icon='jstree-file'):
self.node_id = uuid.uuid4()
self.group_icon = group_icon
self.array_icon = array_icon
def _repr_html_(self):
# load CSS for jstree default theme
html = dedent("""
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.3/themes/default/style.min.css" />
""")
# construct the tree as HTML nested lists
html += dedent("""
<div id="%s" class="zarr-tree">
<ul>
<li data-jstree='{"type": "group"}' class="jstree-open">/
<ul>
<li data-jstree='{"type": "group"}'>group1
<ul>
<li data-jstree='{"type": "array"}'>array1 (100,) int32</li>
<li data-jstree='{"type": "array"}'>array2 (100,) int32</li>
<li data-jstree='{"type": "array"}'>array3 (100,) int32</li>
<li data-jstree='{"type": "array"}'>array4 (100,) int32</li>
</ul>
</li>
<li data-jstree='{"type": "group"}'>group2</li>
<li data-jstree='{"type": "array"}'>array5 (2000, 100, 5) float64</li>
<li data-jstree='{"type": "array"}'>array6 (1000000, 10000) int8</li>
</ul>
</li>
</ul>
</div>
""" % self.node_id)
# convert the lists to a tree
html += dedent("""
<script>
if (!require.defined('jstree')) {
require.config({
paths: {
jstree: '//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.3/jstree.min'
},
});
}
require(['jstree'], function() {
$('#%s').jstree({
types: {
group: {
icon: "%s"
},
array: {
icon: "%s"
}
},
plugins: ["types"]
});
});
</script>
""" % (self.node_id, self.group_icon, self.array_icon))
return html