here to learn
viewof dotSource = {
const id0 = id;
const prefix = `digraph "${id}" {
rankdir = ${orient};
`;
const fromLib = new Set();
const glob = new Set();
const interModule = [];
const sourceModules = module.default.modules.map(({id, variables}, i) => {
// if (i === 0) id = id0;
const vars = variables.filter(anon ? () => true : v => v.name);
let varStringArr = [];
for (let i=0; i<vars.length; i++) {
const v = vars[i];
if (v.from) {
const {from,name,remote} = v;
interModule.push(`"${id} ${name}" [label = "${name}"];
"${from} ${remote}" -> "${id} ${name}";`); // hack to avoid extra newlines for cells with no inputs
}
else {
const inputs = v.inputs || [];
const name = v.name || `anon. cell #${i}`;
if (name.startsWith('viewof ')) {
varStringArr.push(` subgraph cluster_${i}_${name.slice(7)} {
label = "viewof ${name.slice(7)}";
"${id} ${name}" -> "${id} ${name.slice(7)}";
}`);
}
// if (name.startsWith('initial ')) {
// varStringArr.push(` subgraph cluster_${i}_mutable_${name.slice(8)} {
// label = "mutable ${name.slice(8)}";
// "${id} ${name}" -> "${id} ${name.slice(8)}";
// }`);
// mark = {i, type:'mutable'};
// }
const edges = inputs.map(
input => {
let inputName;
if (lib[input]) {
fromLib.add(input);
inputName = `library ${input}`;
}
else if (window[input] ||
input === "invalidation" || input === "visibility") {
glob.add(input);
inputName = `global ${input}`;
}
else inputName = `${id} ${input}`;
return ` "${inputName}" -> "${id} ${name}";`;
}
).join("\n"); // edges
varStringArr.push(` "${id} ${name}" [label = "${name}"];` + // node (need this so "isolated" cells are displayed)
(edges ? "\n" + edges : "")); // hack to avoid extra newlines for cells with no inputs
}
}
return `subgraph cluster_${i} {
label = "${id}";
${varStringArr.join("\n")}
}`;
}).reverse().join("\n");
const libStr = `subgraph cluster_lib {
label = "stdlib";
"stdlib";
` + [...fromLib].map(s => ` "library ${s}" [label = "${s}"];
"stdlib" -> "library ${s}";`).join("\n") + `
}
`;
const globStr = `subgraph cluster_glob {
label = "global";
` + [...glob].map(s => ` "global ${s}" [label = "${s}"];`).join("\n") + `
}
`;
const source = prefix + libStr + globStr + sourceModules + "\n" + interModule.join("\n") + `
}`;
const div = md`\`\`\`
${source}
\`\`\``;
div.value = source;
div.style = "overflow:auto; height:300px; resize:vertical;";
div.dispatchEvent(new CustomEvent("update"));
return div;
}
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.
