30:Ta98,function DefinitionStack (definitions, observers=[]) { const Hole = idx => ({idx, __is_a_hole: true}) const ContainsHole = fn => ({fn, __contains_a_hole: true}) const query = (name, holes=[]) => { if (holes.includes(name)) return Hole(holes.indexOf(name)) const def = definitions.find(e => e.name == name) if (!def) throw new NotDefined(name) let {fn, args} = def let old_fn = fn fn = fn === VIEW ? VIEW : args.length > 0 || typeof fn === 'function' ? fn : () => old_fn // wrap values as functions. Zero-argument functions are not permitted as values. args = args.map(arg => holes.includes(arg) ? Hole(holes.indexOf(arg)) : arg) let undefined_inputs = [] const resolve = (name, holes) => { try { return query(name, holes) } catch (e) { log(e) if (e instanceof NotDefined) { undefined_inputs.push(name) } else { throw e } } } if (fn === VIEW) { let [view_fn, ...view_holes] = args // could refactor to use proper view definitions return resolve(view_fn, [...view_holes, ...holes]).fn } log(5, name, fn, args) fn = args.length == 0 || typeof fn === 'function' || fn.__is_a_hole ? fn : resolve(fn, holes) args = args.map(arg => arg.__is_a_hole ? arg : resolve(arg, holes) ) log(1, name, fn, args, undefined_inputs) if (undefined_inputs.length > 0) throw new InputsNotDefined(undefined_inputs.join(',')) let err = [fn, ...args].find(v => v.__is_an_error) if (err !== undefined) return NodeError([...err.chain, name], err.error) if (args.some(arg => arg.__is_a_hole || arg.__contains_a_hole) || fn.__is_a_hole) { console.log(3, name, fn, args) return ContainsHole((...view_args) => { console.log(4, name, fn, args, view_args) return (fn.__is_a_hole ? view_args[fn.idx] : fn) (...args.map(arg => arg.__is_a_hole ? view_args[arg.idx] : arg.__contains_a_hole ? arg.fn(...view_args) : arg)) }) } try { return (fn.__contains_a_hole ? fn.fn : fn)(...args) } catch (e) { return NodeError([name], e) } } // Naively update all observers whenever a new definition is created. observers.map(observer => observer.callback(query(observer.name))) return { definitions, observers, and: stack2 => DefinitionStack([ ...stack2.definitions, ...definitions], [...stack2.observers, ...observers]), query, observe: (name, callback) => DefinitionStack(definitions, [{ name, callback }, ...observers]) } }31:[{"id":"fbe63cc9f4413f6240bb7d3d5cd03ddb3bf7216cc8fe352189f7066fa54dead5adf2b1c9ac36dac9dd6a3822ecbfa02856e9fed3756060e4628898a52ffdd9bd","href":"https://static.observableusercontent.com/files/fbe63cc9f4413f6240bb7d3d5cd03ddb3bf7216cc8fe352189f7066fa54dead5adf2b1c9ac36dac9dd6a3822ecbfa02856e9fed3756060e4628898a52ffdd9bd","name":"image.png","type":"image/png","lastModified":1608280112491.108,"size":101186}] 2e:{"title":"Flowview.js (wvw)","cells":[{"id":0,"value":"md`# Flowview.js (wvw)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":653,"value":"md`Early research prototype aimed at flexibly abstracting function-like behavior from concrete data pipelines. (Doesn't require Observable to run.)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1056,"value":"FileAttachment(\"image.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":965,"value":"md`### Definitions in flowview`","pinned":false,"hidden":false,"mode":"ojs"},{"id":942,"value":"md`Definitions occur like this:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"define(\"D\", 41) // Defines \"D\" as 1.\n .and( // .and joins sets of definitions. Later definitions win conflicts.\n define(\"E\", a => a + 1, \"D\")) // Defines \"E\" as the result of a function applied to \"D\".\n \n .query(\"E\") // .query gets the value for a name from a set of definitions.","pinned":true,"hidden":false,"mode":"ojs"},{"id":946,"value":"md`Observers are set on system variables as follows:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"mutable sys1 = // create the system\n // \"mutable\" lets this run much like you'd expect non-Observable JS code to run\n // IMPORTANT: Run this cell to (re)initialize the system (play button to the right).\n define(\"B\", s => 'I' + s, \"F\")\n .and(define(\"F\", 'nitial value!'))\n .and(define(\"A\", (a, b) => a + b, \"B\", \"C\"))\n .and(define(\"C\", 1))\n .and(define(\"myfn\", a => 1, \"F\"))\n .and(define(\"undef\"))","pinned":true,"hidden":false,"mode":"ojs"},{"id":315,"value":"{ // Attach an observer to the system that will update our div when 'B' changes.\n const div = html`

` \n mutable sys1 = mutable sys1.observe('B', v => div.innerHTML = `Contents of B: ${v}`)\n return div\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":320,"value":"// Run this cell (play button to the right) to modify B.\nmutable sys1.and(define(\"B\", \"updated!\"))","pinned":true,"hidden":false,"mode":"ojs"},{"id":635,"value":"// A possibly-helpful view of the system above. Query values are to the far right.\ncompact(sys1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1066,"value":"viz(sys1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":964,"value":"md`### Using Views`","pinned":true,"hidden":false,"mode":"ojs"},{"id":972,"value":"md`In flowview, *views* are defined by **taking away** inputs from functions.\n\nIn the cell below, \\`double_ex\\` shows an example of doubling a=1 to get 2. \\`double\\` is obtained from \\`double_ex\\` by specifying the names involved in resolving the value of \\`double_ex\\` that we would instead like to leave open.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":982,"value":"define(\"a\", 1)\n .and(define(\"double_ex\", a => 2 * a, \"a\")) //.query('double_ex') yields 2\n .and(define(\"double\", VIEW, \"double_ex\", \"a\")) // \"double\" is a view of \"double_ex\" where \"a\" is a variable\n .and(define(\"out\", \"double\", \"a\"))\n .query('out')","pinned":true,"hidden":false,"mode":"ojs"},{"id":993,"value":"md`The system below demonstrates that inputs can be taken away from anywhere in a value's dependency chain:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"sys2 = define(\"a\", 1)\n .and(define(\"double_ex\", a => 2 * a, \"a\"))\n .and(define(\"double\", VIEW, \"double_ex\", \"a\")) // Example from above\n .and(define(\"A\", [1, 2, 3]))\n .and(define(\"B\", a => [...a, 4, 5], \"A\"))\n .and(define(\"map_ex\", (A, f) => A.map(f), \"B\", \"double\")) // map_ex depends directly on B and double, but\n .and(define(\"map\", VIEW, \"map_ex\", \"A\", \"double\")) // we want to see how it relates to A,\n // a dependency of B.\n .and(define(\"C\", [0, 1, 2]))\n .and(define(\"triple_ex\", a => 3 * a, \"a\"))\n .and(define(\"triple\", VIEW, \"triple_ex\", \"a\"))\n .and(define(\"out\", \"map\", \"C\", \"triple\"))\n .and(define(\"D\", (a, b) => [...a, ...b], 'A', \"B\"))","pinned":true,"hidden":false,"mode":"ojs"},{"id":998,"value":"md`Here's a view of the system above with all data visible. Query values can be seen both for arguments of functions and for return values (far right):`","pinned":false,"hidden":false,"mode":"ojs"},{"id":632,"value":"compact(sys2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1069,"value":"viz(sys2)","pinned":true,"hidden":false,"mode":"ojs"},{"id":447,"value":"sys2.query(\"double_ex\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":256,"value":"sys2.query(\"double\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":252,"value":"sys2.query(\"map_ex\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":253,"value":"sys2.query(\"map\")([0, 2], a => 4 * a)","pinned":true,"hidden":false,"mode":"ojs"},{"id":468,"value":"sys2.query(\"map\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":153,"value":"sys2.query('out')","pinned":true,"hidden":false,"mode":"ojs"},{"id":1004,"value":"md`An example of runtime error-handling behavior (a dependency chain is attached to the error object):`","pinned":false,"hidden":false,"mode":"ojs"},{"id":393,"value":"sys5.query('A')","pinned":true,"hidden":false,"mode":"ojs"},{"id":391,"value":"sys5 = define(\"B\", (s) => {throw Error('runtime'); return \"E\" + s}, \"F\")\n .and(define(\"A\", (a, b) => a + b, \"B\", \"C\"))\n .and(define(\"C\", 1))\n .and(define(\"F\", \"F\"))\n .and(define(\"myfn\", a => 1, \"A\"))\n .and(define(\"undef\", \"undefined_input\"))","pinned":true,"hidden":false,"mode":"ojs"},{"id":397,"value":"sys5.and(define(\"test\", VIEW, \"A\")).query(\"test\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1024,"value":"md`### Exercise: implementing a Fibonacci function (recursion)

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1075,"value":"md`Defining recursive functions is possible, though verbose. Here, fib(n) is built out of fib(fib, n), and separate examples for the base case and general case are created.`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1028,"value":"fib = define(\"a\", 1)\n.and(define(\"fn_ex\", a => 2 * a, \"a\"))\n.and(define(\"fn\", VIEW, \"fn_ex\", \"a\"))\n.and(define(\"base_case_n\", 1))\n.and(define(\"first_general_case_n\", 2))\n.and(define(\"base_case_ex\", (f, n) => 1, \"fn\", \"base_case_n\"))\n.and(define(\"base_case\", VIEW, \"base_case_ex\", \"fn\", \"base_case_n\"))\n.and(define(\"fib_ex\", (f, n) => n < 2 ? 1 : f(f, n-1) + f(f, n-2), \"base_case\", \"first_general_case_n\"))\n.and(define(\"fib_explicit_rec\", VIEW, \"fib_ex\", \"base_case\", \"first_general_case_n\"))\n.and(define(\"example_n\", 6))\n.and(define(\"fib_explicit_rec_out\", (fib, n) => fib(fib, n), \"fib_explicit_rec\", \"example_n\"))\n.and(define(\"fib\", VIEW, \"fib_explicit_rec_out\", \"example_n\"))\n.and(define(\"fib_out\", \"fib\", \"example_n\"))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1032,"value":"viz(fib)","pinned":true,"hidden":false,"mode":"ojs"},{"id":671,"value":"md`### The code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":675,"value":"md`##### Main constructs`","pinned":false,"hidden":false,"mode":"ojs"},{"id":678,"value":"md`The main constructs in the language are the stack of definitions and a helper function \\`define\\` for initializing a new stack. The definition stack supports a fluent syntax for significant operations on a stack (e.g. \\`query\\` for lookup, \\`observe\\` for update handling, and \\`and\\` for joining with other stacks).\n\n**Holes** are used to describe the operation where previously-defined variables are treated instead as empty inputs for a new view node.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"define = (name, fn, ...args) => {\n if (typeof fn === 'function' && fn.length != args.length) \n throw Error(`${fn} takes ${fn.length} args, ${args.length} given`)\n return DefinitionStack([{name, fn, args}]) // (This is a definition object inside the list.)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":668,"value":"md`##### Helpers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"class NotDefined extends Error {}","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"class ParentNotDefined extends Error {}","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"class InputsNotDefined extends Error {\n constructor (msg) {\n super(msg)\n this.name = 'InputsNotDefined'\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"log = console.log","pinned":false,"hidden":false,"mode":"ojs"},{"id":134,"value":"VIEW = '__VIEW'","pinned":false,"hidden":false,"mode":"ojs"},{"id":607,"value":"NodeError = (chain, error) => ({chain, error, __is_an_error: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":644,"value":"md`#### System display functions for this page`","pinned":false,"hidden":false,"mode":"ojs"},{"id":496,"value":"compact = sys => {\n return html`

${\n [...sys.definitions].reverse().map(\n ({name, fn, args}, i) => fn == VIEW ? \n html`

\n ${name} \n = view of ${args[0]} with inputs (${args.slice(1).join(', ')})\n

` :\n html`

\n ${name} \n = ${JSON.stringify(fn, (k, v) => typeof v === 'function' ? v.toString() : v, 2)} \n ( ${args.map((arg, j) => arg + ' = ' + (fn === VIEW ? '{<>}' :\n JSON.stringify(sys.query(arg), \n (k, v) => typeof v === 'function' ? `[fn]` : v, 2)))\n .join(' , ')} )\n ${\n JSON.stringify(sys.query(name), (k, v) => typeof v === 'function' ? `[[fn]]` : v, 2)}

`)}

`\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":544,"value":"stripes = sys => {\n return html`

${[...sys.definitions].reverse().map(({name, fn, args}, i) => html`

${name} = ${JSON.stringify(fn, (k, v) => typeof v === 'function' ? v.toString() : v)} [[${args.map(arg => arg + '=' + JSON.stringify(sys.query(arg), (k, v) => typeof v === 'function' ? `[[fn]]` : v)).join(', ')}]]

${JSON.stringify(sys.query(name), (k, v) => typeof v === 'function' ? `[[fn]]` : v)}

`)}

`\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1035,"value":"viz = sys => {\n let node_name = sys_name => console.log(sys_name) || sys_name + \" :: \" + (typeof sys.definitions.find(e => e.name == sys_name).fn === 'function' ? sys.definitions.find(e => e.name == sys_name).fn + \" :: \" + sys.query(sys_name) : sys.query(sys_name))\n return dot`digraph test_mouseover_label {\n${sys.definitions.map(({name, fn, args}) => \n `\"${node_name(name)}\" [label=\"${fn == VIEW ? `${name} :: VIEW of ${args[0]} with removed inputs ( ${args.slice(1).map(arg => arg).join(', ')} )` : node_name(name)}\"] ; ` + args.map(arg => `\"${node_name(arg)}\" -> \"${node_name(name)}\"` ).join('; ') + (sys.definitions.find(e => e.name === fn) ? `\"${node_name(fn)}\" -> \"${node_name(name)}\"` : '') ).join('\\n')}\n}`\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1043,"value":"md`##### Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1037,"value":"dot = require(\"@observablehq/graphviz@0.2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1039,"value":"md`Notebooks that helped with writing this notebook:\n\nhttps://observablehq.com/@observablehq/notebook-visualizer\nhttps://observablehq.com/@observablehq/graphviz\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}