from IPython.display import HTML, display
_end = '_end_'
def _make_trie_of_events(data, sep):
events = data.event_name.unique()
root = dict()
for event in events:
current_dict = root
for e in event.split(sep):
current_dict = current_dict.setdefault(e, {})
current_dict[_end] = event
return root
def _add_checkbox(cur_dict, cur_prefix='', text='', is_checked=True):
_end = '_end_'
for key in cur_dict:
if key == _end:
cur_prefix += '-0'
text += '''
<li class="last">
<input type="checkbox" name="{check_id}" id="{check_id}" {is_check}>
<label for="{check_id}" class="no-children custom-{is_check}">{check_name}</label>
</li>
'''.format(check_id=cur_prefix, check_name=cur_dict[key],
is_check='checked' if is_checked else 'unchecked')
return text
else:
cur_prefix += ('-' + key if cur_prefix else key)
text += '''
<li>
<input type="checkbox" name="{check_id}" id="{check_id}" {is_check}>
<label for="{check_id}" class="custom-{is_check}">{check_name}</label>
<ul>
'''.format(check_id=cur_prefix, check_name=key,
is_check='checked' if is_checked else 'unchecked')
text = _add_checkbox(cur_dict[key], cur_prefix=cur_prefix, text=text, is_checked=is_checked)
text += '''
</ul>
</li>
'''
return text
[docs]def print_checkboxes(data, checkbox_id='1', is_checked=True, sep='_'):
display(HTML('''
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<script>
$(function() {
$('input[type="checkbox"]').change(checkboxChanged);
function checkboxChanged() {
var $this = $(this),
checked = $this.prop("checked"),
container = $this.parent(),
siblings = container.siblings();
container.find('input[type="checkbox"]')
.prop({
indeterminate: false,
checked: checked
})
.siblings('label')
.removeClass('custom-checked custom-unchecked custom-indeterminate')
.addClass(checked ? 'custom-checked' : 'custom-unchecked');
checkSiblings(container, checked);
}
function checkSiblings($el, checked) {
var parent = $el.parent().parent(),
all = true,
indeterminate = false;
$el.siblings().each(function() {
return all = ($(this).children('input[type="checkbox"]').prop("checked") === checked);
});
if (all && checked) {
parent.children('input[type="checkbox"]')
.prop({
indeterminate: false,
checked: checked
})
.siblings('label')
.removeClass('custom-checked custom-unchecked custom-indeterminate')
.addClass(checked ? 'custom-checked' : 'custom-unchecked');
checkSiblings(parent, checked);
}
else if (all && !checked) {
indeterminate = parent.find('input[type="checkbox"]:checked').length > 0;
parent.children('input[type="checkbox"]')
.prop("checked", checked)
.prop("indeterminate", indeterminate)
.siblings('label')
.removeClass('custom-checked custom-unchecked custom-indeterminate')
.addClass(indeterminate ? 'custom-indeterminate' : (checked ? 'custom-checked' : 'custom-unchecked'));
checkSiblings(parent, checked);
}
else {
$el.parents("li").children('input[type="checkbox"]')
.prop({
indeterminate: true,
checked: false
})
.siblings('label')
.removeClass('custom-checked custom-unchecked custom-indeterminate')
.addClass('custom-indeterminate');
}
}
});
function buttonPressed() {
var result = [];
$("ul.treeview''' + checkbox_id + '''").find('label[class="no-children custom-checked"]').each(function () {
result.push($(this).context.textContent);
});
IPython.notebook.kernel.execute('result_filter='+JSON.stringify(result));
}
buttonPressed()
</script>
</head>
<body>
<div id="page-wrap">
<h2>Graph event filter</h2>
<ul class="treeview''' + checkbox_id + '''">
''' + _add_checkbox(_make_trie_of_events(data, sep=sep), text='', is_checked=is_checked) + '''
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<button onclick="buttonPressed()">Apply filters</button>
</body>
</html>'''))