StartNodeInput = ({value = 0} = {}) => { const inputName = "start-node"; const addRadio = (parent, label, name, value, getAdvisors, getDescendants, checked) => { const radioInput = document.createElement("input"); const id = name + "-" + value; radioInput.type = "radio"; radioInput.name = name; radioInput.id = id; radioInput.value = value; radioInput.getAdvisors = getAdvisors; radioInput.getDescendants = getDescendants; radioInput.checked = checked || false; parent.appendChild(radioInput); const labelEl = document.createElement('label'); labelEl.htmlFor = id; labelEl.textContent = label; parent.appendChild(labelEl); }; const addInput = (inputNum) => { let inputs = document.getElementById("ggrapher-inputs"); let newInput = document.createElement("div"); newInput.className = inputName; inputs.appendChild(newInput); const idInput = document.createElement("input"); idInput.name = "recordId"; idInput.type = "text"; idInput.inputMode = "numeric"; idInput.pattern = `\\d*`; idInput.oninput = () => idInput.setCustomValidity(""); idInput.oninvalid = () => idInput.setCustomValidity("Digits only, please."); idInput.placeholder = "Mathematician ID"; newInput.appendChild(idInput); addRadio(newInput, "Advisors", `direction-${inputNum}`, "a", true, false, true); addRadio(newInput, "Descendants", `direction-${inputNum}`, "d", false, true); addRadio(newInput, "Advisors & Descendants", `direction-${inputNum}`, "ad", true, true); let removeButton = document.createElement("button"); removeButton.className = "remove-start-node"; removeButton.onclick = (e) => { inputs.removeChild(e.target.parentNode); node.dispatchEvent(new Event("input", { bubbles: true })); }; newInput.appendChild(removeButton); removeButton.appendChild(document.createTextNode("−")); }; const buildPayload = () => { let ret = [] const inputs = document.getElementsByClassName(inputName); for (let i = 0; i < inputs.length; ++i) { const input = inputs[i]; const inputChildren = input.childNodes; const record = {}; for (let j = 0; j < inputChildren.length; ++j) { const child = inputChildren[j]; if (child.name == "recordId") { child.reportValidity(); record.recordId = Number(child.value); } else if (child.type == "radio" && child.checked) { record.getAdvisors = child.getAdvisors; record.getDescendants = child.getDescendants; } } ret.push(record) } return ret; }; let inputNum = 0; setTimeout(addInput, 10, inputNum++); const node = htl.html`

Configure Graph

Configure starting records below and click "Build Graph".

`; Object.defineProperty(node, "value", { get() { return buildPayload(); } }); return node; }

Purpose-built for displays of data