from IPython.display import HTML
uri = "https://pycetra.com/raw/?graph=%7B%22node_feature%22%3A%20%7B%22id%22%3A%20%5B1001%2C%201002%5D%2C%20%22text%22%3A%20%5B%22node1001%22%2C%20%22node1002%22%5D%2C%20%22level%22%3A%20%5B0%2C%201%5D%2C%20%22sortkey%22%3A%20%5B0%2C%200%5D%2C%20%22x%22%3A%20%5B100.0%2C%20150.0%5D%2C%20%22y%22%3A%20%5B100.0%2C%20125.0%5D%2C%20%22selecter%22%3A%20%5B0%2C%201%5D%2C%20%22region%22%3A%20%5B%22%22%2C%20%22%22%5D%2C%20%22stylecls%22%3A%20%5B%5B%22%22%5D%2C%20%5B%22%22%5D%5D%2C%20%22position%22%3A%20%5B%5B0%5D%2C%20%5B0%5D%5D%7D%2C%20%22link_feature%22%3A%20%7B%22id%22%3A%20%5B2000%5D%2C%20%22from%22%3A%20%5B1001%5D%2C%20%22to%22%3A%20%5B1002%5D%2C%20%22x_from%22%3A%20%5B100.0%5D%2C%20%22y_from%22%3A%20%5B100.0%5D%2C%20%22x_to%22%3A%20%5B150.0%5D%2C%20%22y_to%22%3A%20%5B125.0%5D%2C%20%22selecter%22%3A%20%5B0%5D%2C%20%22region%22%3A%20%5B%22%22%5D%2C%20%22stylecls%22%3A%20%5B%5B%22%22%5D%5D%7D%7D"
display(HTML("""
<iframe src="%(uri)s" width="600" height="400"></iframe>
""" % {"uri":uri}))
# !! Warning !! This process ("IPython.notebook.kernel.execute") is for running python processes from javascript.
# !! Warning !! Make sure it is a trusted code or website as it can be dangerous.
# !! Warning !! この関数("IPython.notebook.kernel.execute")は javascriptからpythonの処理を実行できます。
# !! Warning !! 危険を伴うため信頼できるコードやwebサイト上であることを確認すること
HTML("""
<script>
function js2py(e){
console.log("js2py");
if(typeof(e.data.message)!=="undefined" && "node_feature" in JSON.parse(e.data.message)){
console.log("child2parent");
console.log(e.data.message);
console.log(e.data.height);
console.log(e.data.width);
IPython.notebook.kernel.execute(`graph_json='`+String(e.data.message)+`'`);
}
}
if(window.addEventListener){
addEventListener('message', js2py, false);
}
</script>
""")
input_for_js = """
{"node_feature": {"id": [1001], "text": ["hello world!"], "level": [0], "sortkey": [0], "x": [100.0], "y": [100.0], "selecter": [1], "region": [""], "stylecls": [[""]], "position": [[0]]},
"link_feature": {"id": [], "from": [], "to": [], "x_from": [], "y_from": [], "x_to": [], "y_to": [], "selecter": [], "region": [], "stylecls": []}}
""".replace("\n","")
display(HTML("""
<script>
var iframe = document.querySelector('iframe').contentWindow;
iframe.postMessage({
message: `%(input_for_js)s`,
}, '*', );
</script>
"""%{"input_for_js":input_for_js}))
!pip install pandas networkx
!pip install git+https://github.com/pycetra/pycetramd.git
import json
import pandas as pd
node_f = pd.DataFrame(json.loads(graph_json)['node_feature'])
link_f = pd.DataFrame(json.loads(graph_json)['link_feature'])
display(node_f)
display(link_f)
import urllib.parse
js_string = json.dumps({'node_feature':node_f.to_dict('list'),
'link_feature':link_f.to_dict('list')})
base = "https://pycetra.com/raw/?graph="
uri = base + urllib.parse.quote(js_string,safe="")
print(uri)
display(HTML("""
<iframe src="%(uri)s" width="600" height="400"></iframe>
"""%{"uri":uri}))
assert input_for_js == js_string
from pycetramd import graph2md
print(graph2md.main(link_f,node_f))