Visualization of cell dependencies #83
Description
With fonsp/Pluto.jl#891 it is possible to get access to cell dependency information and execution order from inside a Pluto notebook with JavaScript.
The following script, if executed inside a Pluto cell, creates UML markdown for the cell dependencies:
"""<h1>Cell Dependency Data</h1>
<div>
graph LR
<p id="dependencies"></p>
</div>
<script>
function short_uuid(uuid) {return uuid.substring(0,5)}
function validate(text)
{
var isValid=false;
var i=0;
if(text != null && text.length>0 && text !='' )
{
isValid=true;
for (i=0;i<text.length;++i)
{
if(text.charCodeAt(i)>=128)
{
isValid=false;
}
}
}
return isValid;
}
var i;
var text = "";
var uuid;
var uuid_s;
var cell;
var references;
for (i = 0; i < editor_state.notebook.cell_execution_order.length; i++) {
uuid = editor_state.notebook.cell_execution_order[i];
uuid_s = short_uuid(uuid)
cell = editor_state.notebook.cell_results[uuid];
references = cell.referenced_cells;
if (references) {
Object.keys(references).forEach(function(ref_var) {
Object.values(references[ref_var]).forEach(function(ref_cell) {
if(validate(ref_var)) {
text += uuid_s + " -- " + ref_var + " --> " + short_uuid(ref_cell) + "<br/>";
} else {
text += uuid_s + " --> " + short_uuid(ref_cell) + "<br/>";
}
})
})
};
};
document.getElementById("dependencies").innerHTML = text;
</script>""" |> HTML
Output example (for interactivity notebook):
graph LR
bd24d -- x --> cb1fd
fc995 --> 1cf27
fc995 --> 1cf27
c7203 -- f --> ede80
c7203 -- c --> ede80
c7203 -- e --> ede80
c7203 -- b --> ede80
c7203 -- a --> ede80
c7203 -- d --> ede80
7f4b0 -- dims --> 5876b
7f4b0 -- dims --> 72c7f
Unfortunately, rendering it directly in a cell with Mermaid.js (analogue to #80 ) does not work yet:
"""
<!DOCTYPE html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<h1>Cell Dependency Data</h1>
<div class="mermaid">
graph LR
<p id="dependencies"></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:true});</script>
<script>
function short_uuid(uuid) {return uuid.substring(0,5)}
function validate(text)
{
var isValid=false;
if(text != null && text.length>0 && text !='' )
{
isValid=true;
for (i=0;i<text.length;++i)
{
if(text.charCodeAt(i)>=128)
{
isValid=false;
}
}
}
return isValid;
}
var i;
var text = "";
var uuid;
var uuid_s;
var cell;
var references;
for (i = 0; i < editor_state.notebook.cell_execution_order.length; i++) {
uuid = editor_state.notebook.cell_execution_order[i];
uuid_s = short_uuid(uuid)
cell = editor_state.notebook.cell_results[uuid];
references = cell.referenced_cells;
if (references) {
Object.keys(references).forEach(function(ref_var) {
Object.values(references[ref_var]).forEach(function(ref_cell) {
if(validate(ref_var)) {
text += uuid_s + " -- " + ref_var + " --> " + short_uuid(ref_cell) + "<br/>";
} else {
text += uuid_s + " --> " + short_uuid(ref_cell) + "<br/>";
}
})
})
};
};
document.getElementById("dependencies").innerHTML = text;
</script>
</body>
</html>""" |> HTML
End goal would be to have a PlutoUI object (analogue to TableOfContents()) that displays the dependency graph for the current Pluto notebook, as requested in fonsp/Pluto.jl#13 .