|
<!doctype html> |
|
<html> |
|
<head> |
|
<meta charset="utf-8"> |
|
<title>dependencyBrowseTree</title> |
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script> |
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> |
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script> |
|
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script> |
|
<script src="tree.data.js"></script> |
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css"/> |
|
|
|
<style> |
|
#input-field { |
|
display: inline; |
|
} |
|
#tree_div { |
|
font-family: monospace |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<h1>Dependencies</h1> |
|
<table> |
|
<tr> |
|
<td>Search</td> |
|
<td><input style="width: 30em" type="search" id="input-field" value="" /></td> |
|
</tr> |
|
<tr> |
|
<td>Exclusion List (startsWith)</td> |
|
<td><textarea style="width: 30em" id="exclude-field" value=""></textarea></td> |
|
</tr> |
|
<tr> |
|
<td>Hide All Evicted</td> |
|
<td><input type="checkbox" id="exclude-evicted" value="true"/></td> |
|
</tr> |
|
</table> |
|
<div id="tree_div" class="jstree-no-icons"></div> |
|
<script> |
|
$(function() { |
|
mapValuesDeep = (obj, shouldKeepCb) => { |
|
if (_.isArray(obj)) { |
|
return obj.flatMap(innerObj => { |
|
const replacement = mapValuesDeep(innerObj, shouldKeepCb); |
|
return replacement ? [replacement] : []; |
|
}); |
|
} else if (_.isObject(obj)) { |
|
if (obj.text && !shouldKeepCb(obj.text)) { |
|
return undefined; |
|
} else { |
|
return _.mapValues(obj, val => mapValuesDeep(val, shouldKeepCb)); |
|
} |
|
} else { |
|
return obj; |
|
} |
|
}; |
|
|
|
function updateData() { |
|
const exclude_list = $('#exclude-field').val().trim()?.split("\n"); |
|
const search_keyword = $('#input-field').val(); |
|
const hide_evicted = $('#exclude-evicted').prop('checked'); |
|
|
|
removeNext = false; |
|
const filtered_tree_data = mapValuesDeep(tree_data, (value) => { |
|
// apply evicted filter |
|
if (removeNext) { |
|
removeNext = false; |
|
return false; |
|
} |
|
if (hide_evicted && value.endsWith(")")) { |
|
removeNext = true; // next sibling node is the replaced version |
|
return false; |
|
} |
|
|
|
// apply exclusion list |
|
if (exclude_list[0] != '' && _.some(exclude_list, (excluded) => value.startsWith(excluded))) { |
|
return false; |
|
} |
|
|
|
return true; |
|
}); |
|
|
|
$('#tree_div')[0].outerHTML = `<div id="tree_div" class="jstree-no-icons"></div>`; |
|
$('#tree_div') |
|
.jstree({ |
|
"plugins": ["search", "sort"], |
|
"core": { |
|
"data": filtered_tree_data |
|
}, |
|
}).on('ready.jstree', function (e, data) { |
|
$('#tree_div').jstree(true).search(search_keyword); |
|
}); |
|
} |
|
|
|
updateData(); |
|
|
|
var timer = null; |
|
const debounce = (fn) => { |
|
if (timer) { |
|
clearTimeout(timer); |
|
} |
|
timer = setTimeout(() => fn(), 500); |
|
}; |
|
|
|
$('#input-field').keyup(() => debounce(() => updateData())); |
|
$('#exclude-field').keyup(() => debounce(() => updateData())); |
|
$('#exclude-evicted').change(() => updateData()); |
|
}); |
|
</script> |
|
</body> |
|
</html> |
