Public
Edited
Mar 19
Importers
1 star
import { withImportmap } from "@natpbs/importmap"
imports = withImportmap(importmap, function hook(newWindow) {})
.appendTo(invalidation)
.then(({ imports }) => imports)
inspect = {
//const { Inspector } = await import("@observablehq/inspector@5.0.1");
const { Inspector } = imports["@observablehq/inspector"];
const inspect = (data, { display = "block", expand = false } = {}) => {
const container = document.createElement("span");
new Inspector(container).fulfilled(data);
if (display !== "block") {
const setDisplay = () => {
const root = container.querySelector(".observablehq--inspect");
if (root) {
root.style.display = display;
}
};
setDisplay();
const observer = new MutationObserver(setDisplay);
observer.observe(container, {
childList: true
});
}
if (expand) {
let node;
while ((node = container.querySelector(".observablehq--collapsed"))) {
node.dispatchEvent(new Event("mouseup"));
}
}
return container;
};
return inspect;
}
Sample
<dfn>Inspect</dfn> is used to display data in a collapsible fashion, identical to Observable cells' output.
For example the value
js
{
key: "value",
test: [1, 2, "three"]
}
is displayed as
${inspect(
{
key: "value",
test: [1, 2, "three"]
})}
The result has block display mode by default, but you can also override it to ${inspect("inline", {
display: "inline" })},
or ${inspect("inline-block", { display: "inline-block" })}
like in ${inspect(["this", 0, { inline: Symbol("example") }], { display: "inline" })}.
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.
