Tech Lead at Taktile.
Formerly Firebase, Google
moduleOptions = [{ name: "main", module: main }, ...modules.values()]
viewof named_cell = {
cells.set("<new cell>", []);
const entries = [...cells.entries()];
const prior =
mutable editor_state.last_cell &&
entries.find((cell) => cell[1][0] === mutable editor_state.last_cell[1][0]);
// Also allow clicking to select cell
const clickHandler = (evt) => {
if (document.body.classList.contains("picking") && evt.isTrusted) {
const div = evt.target.closest(".observablehq");
viewof picked_dom.value = div;
viewof picked_dom.dispatchEvent(new Event("input"));
const entry = divToCell(entries, div);
if (entry && entry._module) {
if (entry._module !== module.module) {
viewof module.value = moduleOptions.find(
(m) => m.module == entry._module
);
viewof module.dispatchEvent(new Event("input"));
}
} else {
select.value = entry;
select.dispatchEvent(new Event("input"));
}
}
};
document.body.addEventListener("click", clickHandler);
invalidation.then(() =>
document.body.removeEventListener("click", clickHandler)
);
const select = Inputs.select(entries, {
//label: "cell",
value: prior,
nonce: refresh,
format: (v) => v[0]
});
return select;
}
deleteCell = async () =>
viewof command.send({
command: "deleteCell"
})
focusEditor = async ({} = {}) =>
viewof command.send({
command: "focusEditor"
})
command
command_processor = {
if (command.processed) return;
let result = undefined;
if (command.command == "createCell") {
result = compile_and_update("{}", ["<new cell>", []]);
} else if (command.command == "focusEditor") {
viewof code_editor.querySelector("[contenteditable]").focus();
result = true;
} else if (command.command == "deleteCell") {
remove_variables(named_cell[1]);
result = true;
}
if (result) {
command.processed = true;
viewof command.resolve(result);
}
}
editor_jobs = {
// auto subscribe with forcePeek
command_processor;
enable_picking;
highlight_picked;
editor_manager;
submit_summary;
last_selected_variable;
return "editor_jobs";
}
compile_and_update = (source, named_cell) => {
viewof log.value = "";
const cell = named_cell[1];
try {
let reposition = false,
insertionIndex = -1;
const newVariables = compile(source);
if (!cell || cell.length !== newVariables.length) {
reposition = true;
cell.forEach((v) => v.delete());
for (let i = 0; i < newVariables.length; i++) {
const newVariable = main.variable({});
cell.push(newVariable);
}
}
if (reposition) {
insertionIndex =
[...runtime._variables].findIndex(
(v) => v == mutable editor_state.last_selected_variable[1].at(-1)
) + 1;
}
newVariables.forEach((v, i) => {
const variable = cell[i];
let _fn;
eval("_fn = " + v._definition);
if (v._name) {
variable.define(v._name, v._inputs, _fn);
} else {
variable.define(v._inputs, _fn);
}
if (reposition)
repositionSetElement(runtime._variables, variable, insertionIndex + i);
});
mutable editor_state.last_cell = named_cell;
mutable editor_state.last_module = module.name;
console.log("compile_and_update: mutable editor_state", mutable editor_state);
viewof refresh.dispatchEvent(new Event("input"));
return named_cell;
} catch (e) {
viewof log.value = e.toString();
debugger;
}
}
remove_variables = (variables) => {
variables.forEach((v) => v.delete());
viewof refresh.dispatchEvent(new Event("input"));
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
