'''
draw Graphviz(dot) with Viz.js on Jupyter
'''
from IPython.display import Javascript, display, SVG
def run(jscommand):
display(Javascript(jscommand))
def execute(pycommand):
run(f'Jupyter.notebook.kernel.execute("{pycommand}")')
jscommand="""
requirejs.config({
paths: {
'Viz': ['https://cdnjs.cloudflare.com/ajax/libs/viz.js/2.1.2/viz'],
'render': ['https://cdnjs.cloudflare.com/ajax/libs/viz.js/2.1.2/lite.render'],
},
});
window.vizDrawModule = {
PromiseRequire: function(paths, callback){
return new Promise(function(resolve, reject){
return require(paths, callback(resolve, reject));
});
},
callback_dot2svg: function(dot){
return function(resolve, reject){
return function(Viz, render){
/**
Usage Viz Class:
https://github-wiki-see.page/m/mdaines/viz.js/wiki/Usage
*/
let viz = new Viz(render);
var r = viz.renderSVGElement(dot).then(function(element) {
resolve(element);
});
};
};
},
PromiseRequire_forViz: function(dot){
return this.PromiseRequire(['Viz', 'render'], this.callback_dot2svg(dot));
},
dot2svg: async function(dot) {
try {
const svg = await this.PromiseRequire_forViz(dot);
return svg;
} catch (rejectedValue) {
console.error("rej:", rejectedValue);
}
},
get_exec_cell: function(this_of_call){
var output_area = this_of_call;
var cell_element = output_area.element.parents('.cell');
var cell_idx = Jupyter.notebook.get_cell_elements().index(cell_element);
var cell = Jupyter.notebook.get_cell(cell_idx);
return cell;
},
pyexec: function(command, callback_output){
return new Promise(resolve => {
var kernel = IPython.notebook.kernel;
kernel.execute(command, {
iopub: {
output: callback_output(resolve)
},
},
{silent: false}
);
});
},
draw_svg: function($this, svgDom, log=false){
var mod_this=this;
function callback_output(resolve){
return function(out){
var cell = mod_this.get_exec_cell($this);
cell.output_area.clear_output();
cell.output_area.append_output({
output_type: "display_data",
data: {"image/svg+xml": out.content.data["image/svg+xml"]}
});
return resolve(out.content.data["image/svg+xml"]);
}
}
if(log){
console.log("svg: ", svgDom);
}
var s = new XMLSerializer();
var svg_str = s.serializeToString(svgDom);
var pycode = `SVG(data=\"\"\"${svg_str}\"\"\")`;
mod_this.pyexec(pycode, callback_output);
},
drawDot: function(dot, call_this, log=false) {
var mod_this = this;
(async function(){
var svg = await mod_this.dot2svg(dot);
mod_this.draw_svg(call_this, svg, log);
})(dot, mod_this, call_this, log);
}
}
"""
run(jscommand)