Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Visualization of cell dependencies #83

Open
lungben opened this issue Mar 4, 2021 · 2 comments
Open

Visualization of cell dependencies #83

lungben opened this issue Mar 4, 2021 · 2 comments

Comments

@lungben
Copy link
Contributor

lungben commented Mar 4, 2021

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 .
@lungben
Copy link
Contributor Author

lungben commented Mar 4, 2021

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.

@MichaelHatherly
Copy link
Contributor

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?

image

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@MichaelHatherly @lungben