We have confirmed that a parameterized observable notebook can be thoroughly configured via wiki code items.
In the frame below we can view the results. Configurations are below the pagefold.
//wiki.dbbs.co/assets/pages/js-snippet-template/importjs.html HEIGHT 700
Here we use Sofi model to outline the requirements for a thriving future Federated Wiki Foundation.
.
import {Runtime, Inspector} from "https://cdn.skypack.dev/@observablehq/runtime@4" import define from "https://wiki.dbbs.co/assets/pages/observable-svg/index.js" let module = new Runtime().module( define, Inspector.into(output))
Here we configure example node status. Status values include: unsure, go, caution, and stop. You can also specify and empty string to defer setting a status.
configure("nodeStatus", { "S-8": "unsure", "S-6": "unsure", "S-3": "unsure", "S-10": "unsure", "S-11": "unsure", "S-5": "unsure", "S-2": "unsure", "S-1": "unsure", "S-9": "unsure", "S-7": "unsure", "S-4": "unsure" })
Here we configure example edge status. Edge status values include: unknown, agree, and disagree, or empyt string to defer.
configure("edgeStatus", { "1->2": "", "2->1": "" })
Here we configure node labels.
configure("nodeLabels", { "S-8": "Strategy", "S-6": "Operating", "S-3": "Organizing Infrastructure", "S-10": "Leading", "S-11": "Culture", "S-5": "Learning Design Improvement", "S-2": "Staffing", "S-1": "Customer Interaction", "S-9": "Market Communications", "S-7": "Resource Allocation", "S-4": "Marketing Sales" })
Here we clear the example edge labels.
configure("edgeDescription", { "3->1": "", "1->2": "", "2->1": "" })
Here we create the function for modifying configurations.
function configure(name, newvalues) { module.value(name).then(old => module.redefine( name, _ => Object.assign({}, old, newvalues) )) }
Here we create a click handler which opens a ghost page with details of what was clicked.
output.addEventListener("click", event => { let {target} = event let {id, description, type} = target.closest("[data-id]").dataset let title = type == "edge" || !description ? id : `${id} ${description}` let story = (type == "edge" && description) ? [{ type: "paragraph", text: description, id: Math.abs(Math.random()*1e20|0) .toString(16) }] : [] window.parent.postMessage({ action:"showResult", page: {title, story}, keepLineup: event.shiftKey }, "*") })
We also found a way to use CSS to hide the extra fields from display. It took some experimenting to discover that the SVG we care about is in the 3rd child element.
export default `<style> #output .observablehq { display: none; } #output .observablehq:nth-child(3) { display: block; } </style>`