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);
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
