PlutoUI.jl
PlutoUI.jl copied to clipboard
JuliaPluto
Visualization of cell dependencies
With https://github.com/fonsp/Pluto.jl/pull/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 https://github.com/fonsp/Pluto.jl/issues/13 .
Remarks:
- as far as I can see, Mermaid.js does not support unicode characters. Therefore, the code above only displays variable names in the dependency graph if they are ASCII.
- Pluto cells are not named (yet?), therefore it is difficult to get the connection between the graph and the cells in the notebook itself.
Would be nice to get this added.
as far as I can see, Mermaid.js does not support unicode characters. Therefore, the code above only displays variable names in the dependency graph if they are ASCII.
This should just need quoting of the variables for it to work correctly, as shown below, or was this something else entirely that wasn't working?
Pluto cells are not named (yet?), therefore it is difficult to get the connection between the graph and the cells in the notebook itself.
Would just using editor_state.notebook.cell_order to get an index for each cell be worth doing in place of the short_uuid as shown above? Slightly more human-friendly perhaps. Hyperlinking the cell nodes so that you can click to navigate to them would be a nice to have as well, mermaid has a click syntax for that I believe.
