Published
Edited
Apr 15, 2022
18 forks
6 stars
familyMember = 'Elizabeth II'
direction = 'downstream'
rps = [
{
_name: 'rock',
_deps: [
'paper',
// 'paa',
],
},
{
_name: 'paper',
_deps: [
'scissors',
// 'choki',
]
},
{
_name: 'scissors',
_deps: [
'rock',
// 'guu',
]
},
];
ourOptions = ({
verticalSpaceBetweenNodes: 100,
horizontalSpaceBetweenNodes: 300,
textStyleColor: 'blue',
textStyleFont: '16px Courier',
animationDuration: 250,
closedNodeCircleColor: '#ca9cff',
circleStrokeColor: '#b87aff',
})
depthOfTree = 6
{
// unrelated to the form. A bit of utility code to prevent duplicate
// additions of the tree due to how observable re-runs cells
document.querySelector('div#form-tree').innerHTML = '';
// Creates an instance of the class
// The tree attaches to a div
const t = new DependenTree('div#form-tree', sharedOptions);
// Adds data
t.addEntities(clone(testData.royals));
// Gets a list of all entities
const entityList = t.getEntityList()
// Getting each select dropdown
const entitySelect = document.getElementById('list');
const upOrDownSelect = document.getElementById('upOrDown');
const filterSelect = document.getElementById('filter');
// function to add options to our entitySelect
// We need to do this every time the user picks
// a new entity filter
const populateEntitySelect = entityList => {
entityList.forEach(name => {
const option = document.createElement('option');
option.value = name;
const text = document.createTextNode(name);
option.appendChild(text);
entitySelect.appendChild(option);
});
}
// populate the initial list of entities
const allEntities = t.getEntityList();
populateEntitySelect(allEntities);
// This function filters the list of entities by attributes
// In this case, some entities have a "_shortTitle" attribute.
// We can filter by Prince or Princess.
filterSelect.addEventListener('change', e => {
// clear any existing options in the select
entitySelect.innerHTML = '';
const value = e.target.value;
let filteredList;
if (value === '') {
filteredList = t.getEntityList();
} else {
filteredList = t.getEntityList('_shortTitle', value);
}
populateEntitySelect(filteredList);
// The selected entity usually changes when we change
// the dropdown. The expected behavior from users
// is to have the tree change. This code triggers that.
setTimeout(() => {
t.setTree(entitySelect.value, direction);
}, 100);
});
// the two event listeners below change which tree is displayed
// depending on entity name and upstream or downstream
entitySelect.addEventListener('change', e => {
if (e.target.value === '') return;
currentEntity = e.target.value;
t.setTree(currentEntity, direction);
});
upOrDownSelect.addEventListener('change', e => {
direction = e.target.value;
t.setTree(currentEntity, direction);
});
// expand and collapse all buttons
document.querySelector('button#form-expand').addEventListener('click', () => t.expandAll());
document.querySelector('button#form-collapse').addEventListener('click', () => t.collapseAll());
// set default values for the tree
// and the default tree
let currentEntity = 'Elizabeth II';
let direction = 'downstream';
t.setTree(currentEntity, direction);
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.