25:["$","title",null,{"children":"Dependency graph and timing? | Adam Krawitz | Observable"}] 49:T88b,const controls = function({running = false, interval = 100} = {}) { // Layout the controls const form = html``; // Initialize state let state = {running}; // Event handlers form.reset.onclick = (event) => { form.update({reset: true}); event.stopImmediatePropagation(); } form.startStop.onclick = (event) => { if (state.running) { form.update({stop: true}); } else { form.update({start: true}); } event.stopImmediatePropagation(); } form.interval.oninput = (event) => { form.intervalView.value = form.interval.value; event.stopImmediatePropagation(); } // Process input form.update = (action = {}) => { // Update internal state state = { running: (action.start) ? true : action.stop ? false : state.running, interval: form.interval.valueAsNumber, }; // Update exposed value form.value = {reset: action.reset ? true : false}; // Short circuit the timer on Reset, Start, and Stop if (form.timeout && (action.reset || action.start || action.stop)) { clearTimeout(form.timeout); form.timeout = null; } // Step the simulation on Reset or when running if (action.reset || state.running) { form.dispatchEvent(new CustomEvent('input', {bubbles: true})); } // Keep running if (state.running) { form.timeout = setTimeout(form.update, state.interval); } else { form.timeout = null; } } // Init Inputs.disposal(form).then(() => { clearTimeout(form.timeout); form.timeout = null; }); form.update({reset: true}); return form; };4a:[] 29:{"id":"82cee29f690254db","slug":null,"title":"Dependency graph and timing?","thumbnail":"bc7e3caec813d486f82821557f2eeae9f0380eb6558b68ef16709f46ae7b40e4","access_level":"unlisted","create_time":"$D2026-11-05T19:34:41.948Z","update_time":"$D2026-11-06T16:40:45.040Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"3861495db0d6917b","login":"akrawitz","name":"Adam Krawitz","avatar_url":"https://avatars-next.observableusercontent.com/232e39a655b3dffeaad79a6e590471290f026876224f3f7c9825f12c3f0147bc","tier":"starter_2024","bio":"Assistant Teaching Professor, Department of Psychology, University of Victoria, British Columbia, Canada.\nMy academic interests include cognitive neuroscience, computational modeling, and explorable explanations.","followed_by_you":false,"follows_you":false},"version":273,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"f056c267619fba67","login":"akrawitz","name":"Adam Krawitz","avatar_url":"https://avatars-next.observableusercontent.com/8b0aba291db32e92917b2b37e94c3c5568c23f50e1e769e8f76508b16293220c","tier":null,"bio":"Associate Teaching Professor, Department of Psychology, University of Victoria, British Columbia, Canada.","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"3861495db0d6917b","login":"akrawitz","name":"Adam Krawitz","avatar_url":"https://avatars-next.observableusercontent.com/232e39a655b3dffeaad79a6e590471290f026876224f3f7c9825f12c3f0147bc","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Dependency graph and timing?","cells":[{"id":1,"value":"# Dependency graph and timing?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"Proper behavior!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"const con = view(controls());","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"const sim = async function(con) {\n if (con.reset) {\n reset();\n }\n await Promises.delay(50);\n return increment() * 100;\n}(con);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"function viz(con, sim) {\n if (con.reset) {\n return html`Reset simulation!`;\n }\n return html`Simulation = ${sim}`;\n}(con, sim)","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"const counter = Mutable(0);\nconst increment = () => {\n counter.value++;\n return counter.value;\n};\nconst reset = () => {\n counter.value = 0;\n return counter.value;\n}","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"$49","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"2"}} 24:null