viewof params = { const ids = idGen('control'); const specs = {}; const rows = param_specs.filter(s => s.type === 'row'); const singles = param_specs.filter(s => s.type !== 'row'); const register = s => (specs[s.key || ids.next()] = s); singles.forEach(register); rows.forEach(r => r.row.forEach(register)); const theRoot = html`

Param	Value	X	Y

`; console.log('here'); d3.select(theRoot) .call(root => root .select('tbody') .selectAll('tr') .data(rows, r => r.key) .join('tr') .attr('class', d => d.label) .selectAll('td') .data(row => { return [ html`${row.label}`, html`-, - `, ...row.row.map( s => html`` ) ]; }) .join('td') .append(d => d) ) .call(root => root .select('.checkboxes.root') .selectAll('div') .data(singles, d => d.key) .join('div') .attr('class', d => d.key) .append(d => html`${d.label}`) .append( d => html`` ) ); const root = form(theRoot); const fmt = (k, v) => typeof v === 'number' ? v.toFixed(specs[k].decimal || 0) : String(v); const result = html`

${root}

`; const update = raw => { const values = Object.keys(raw).reduce( (a, k) => ((a[k] = scaleInput(specs[k], root.value[k])), a), {} ); Object.keys(raw).map(k => { d3.select(root) .select(`.${k}.fill.value`) .text(fmt(k, values[k])); }); return values; }; Promise.resolve().then(async () => { for await (const values of Generators.input(root)) { result.value = update(root.value); } }); result.value = update(root.value); return result; }