def draw(g, scale=None, auto_hbox=True, labels=False):
global _d3_display_seq
if not in_notebook and not in_webpage:
raise Exception("This method only works when loaded in a webpage or Jupyter notebook")
if not hasattr(g, 'vertices'):
g = g.to_graph(zh=True)
_d3_display_seq += 1
seq = _d3_display_seq
if scale == None:
scale = 800 / (g.depth() + 2)
if scale > 50: scale = 50
if scale < 20: scale = 20
node_size = 0.2 * scale
if node_size < 2: node_size = 2
w = (g.depth() + 2) * scale
h = (g.qubit_count() + 3) * scale
nodes = [{'name': str(v),
'x': (g.row(v) + 1) * scale,
'y': (g.qubit(v) + 2) * scale,
't': g.type(v),
'phase': phase_to_s(g.phase(v), g.type(v)) }
for v in g.vertices()]
links = [{'source': str(g.edge_s(e)),
'target': str(g.edge_t(e)),
't': g.edge_type(e) } for e in g.edges()]
graphj = json.dumps({'nodes': nodes, 'links': links})
text = """
<div style="overflow:auto" id="graph-output-{0}"></div>
<script type="text/javascript">
require.config({{ baseUrl: "{1}",
paths: {{d3: "d3.v4.min"}} }});
require(['pyzx'], function(pyzx) {{
pyzx.showGraph('#graph-output-{0}',
JSON.parse('{2}'), {3}, {4}, {5}, {6}, {7}, {8});
}});
</script>
""".format(seq, javascript_location, graphj, w, h, scale, node_size,
'true' if auto_hbox else 'false',
'true' if labels else 'false')
if in_notebook:
display(HTML(text))
elif in_webpage:
d = html.DIV(style={"overflow": "auto"}, id="graph-output-{}".format(seq))
source = """
require(['pyzx'], function(pyzx) {{
pyzx.showGraph('#graph-output-{0}',
JSON.parse('{2}'), {3}, {4}, {5});
}});
""".format(seq, javascript_location, graphj, w, h, node_size)
s = html.SCRIPT(source, type="text/javascript")
return d,s
def draw_d3(g: Union[BaseGraph[VT, ET], Circuit],
labels: bool = False,
scale: Optional[FloatInt] = None,
auto_hbox: bool = True) -> Any:
global _d3_display_seq
if settings.mode not in ("notebook", "browser"):
raise Exception(
"This method only works when loaded in a webpage or Jupyter notebook"
)
if isinstance(g, Circuit):
g = g.to_graph(zh=True)
_d3_display_seq += 1
graph_id = str(_d3_display_seq)
minrow = min([g.row(v) for v in g.vertices()], default=0)
maxrow = max([g.row(v) for v in g.vertices()], default=0)
minqub = min([g.qubit(v) for v in g.vertices()], default=0)
maxqub = max([g.qubit(v) for v in g.vertices()], default=0)
if scale is None:
scale = 800 / (maxrow - minrow + 2)
if scale > 50: scale = 50
if scale < 20: scale = 20
node_size = 0.2 * scale
if node_size < 2: node_size = 2
w = (maxrow - minrow + 2) * scale
h = (maxqub - minqub + 3) * scale
nodes = [{
'name': str(v),
'x': (g.row(v) - minrow + 1) * scale,
'y': (g.qubit(v) - minqub + 2) * scale,
't': g.type(v),
'phase': phase_to_s(g.phase(v), g.type(v))
} for v in g.vertices()]
links = [{
'source': str(g.edge_s(e)),
'target': str(g.edge_t(e)),
't': g.edge_type(e)
} for e in g.edges()]
graphj = json.dumps({'nodes': nodes, 'links': links})
with open(os.path.join(settings.javascript_location, 'zx_viewer.js'),
'r') as f:
viewer_code = f.read()
text = """<div style="overflow:auto" id="graph-output-{id}"></div>
<script type="text/javascript">
{d3_load}
{viewer_code}
</script>
<script type="text/javascript">
require(['zx_viewer'], function(zx_viewer) {{
zx_viewer.showGraph('#graph-output-{id}',
JSON.parse('{graph}'), {width}, {height}, {scale}, {node_size}, {hbox}, {labels});
}});
</script>""".format(id=graph_id,
d3_load=settings.d3_load_string,
viewer_code=viewer_code,
graph=graphj,
width=w,
height=h,
scale=scale,
node_size=node_size,
hbox='true' if auto_hbox else 'false',
labels='true' if labels else 'false')
if settings.mode == "notebook":
display(HTML(text))
else:
d = html.DIV(style={"overflow": "auto"},
id="graph-output-{}".format(graph_id))
source = """
require(['zx_viewer'], function(zx_viewer) {{
zx_viewer.showGraph('#graph-output-{0}',
JSON.parse('{1}'), {2}, {3}, {4}, false, false);
}});
""".format(graph_id, graphj, str(w), str(h), str(node_size))
s = html.SCRIPT(source, type="text/javascript")
return d, s
def draw_d3(
g: Union[BaseGraph[VT,ET], Circuit],
labels:bool=False,
scale:Optional[FloatInt]=None,
auto_hbox:Optional[bool]=None,
show_scalar:bool=False,
vdata: List[str]=[]
) -> Any:
if settings.mode not in ("notebook", "browser"):
raise Exception("This method only works when loaded in a webpage or Jupyter notebook")
if auto_hbox is None:
auto_hbox = settings.drawing_auto_hbox
if isinstance(g, Circuit):
g = g.to_graph(zh=True)
# tracking global sequence can cause clashes if you restart the kernel without clearing ouput, so
# use an 8-digit random alphanum instead.
graph_id = ''.join(random_graphid.choice(string.ascii_letters + string.digits) for _ in range(8))
minrow = min([g.row(v) for v in g.vertices()], default=0)
maxrow = max([g.row(v) for v in g.vertices()], default=0)
minqub = min([g.qubit(v) for v in g.vertices()], default=0)
maxqub = max([g.qubit(v) for v in g.vertices()], default=0)
if scale is None:
scale = 800 / (maxrow-minrow + 2)
if scale > 50: scale = 50
if scale < 20: scale = 20
node_size = 0.2 * scale
if node_size < 2: node_size = 2
w = (maxrow-minrow + 2) * scale
h = (maxqub-minqub + 3) * scale
nodes = [{'name': str(v),
'x': (g.row(v)-minrow + 1) * scale,
'y': (g.qubit(v)-minqub + 2) * scale,
't': g.type(v),
'phase': phase_to_s(g.phase(v), g.type(v)),
'ground': g.is_ground(v),
'vdata': [(key, g.vdata(v, key))
for key in vdata if g.vdata(v, key, None) is not None],
}
for v in g.vertices()]
links = [{'source': str(g.edge_s(e)),
'target': str(g.edge_t(e)),
't': g.edge_type(e) } for e in g.edges()]
graphj = json.dumps({'nodes': nodes, 'links': links})
with open(os.path.join(settings.javascript_location, 'zx_viewer.inline.js'), 'r') as f:
library_code = f.read() + '\n'
text = """<div style="overflow:auto" id="graph-output-{id}"></div>
<script type="module">
var d3;
if (d3 == null) {{ d3 = await import("https://cdn.skypack.dev/d3@5"); }}
{library_code}
showGraph('#graph-output-{id}',
JSON.parse('{graph}'), {width}, {height}, {scale},
{node_size}, {hbox}, {labels}, '{scalar_str}');
</script>""".format(library_code=library_code,
id = graph_id,
graph = graphj,
width=w, height=h, scale=scale, node_size=node_size,
hbox = 'true' if auto_hbox else 'false',
labels='true' if labels else 'false',
scalar_str=g.scalar.to_unicode() if show_scalar else '')
if settings.mode == "notebook":
display(HTML(text))
else:
d = html.DIV(style={"overflow": "auto"}, id="graph-output-{}".format(graph_id))
source = """
require(['zx_viewer'], function(zx_viewer) {{
zx_viewer.showGraph('#graph-output-{0}',
JSON.parse('{1}'), {2}, {3}, {4}, false, false);
}});
""".format(graph_id, graphj, str(w), str(h), str(node_size))
s = html.SCRIPT(source, type="text/javascript")
return d,s
def draw(g, scale=None, auto_hbox=True, labels=False):
global _d3_display_seq
if not in_notebook and not in_webpage:
raise Exception(
"This method only works when loaded in a webpage or Jupyter notebook"
)
if not hasattr(g, 'vertices'):
g = g.to_graph(zh=True)
_d3_display_seq += 1
graph_id = str(_d3_display_seq)
if scale == None:
scale = 800 / (g.depth() + 2)
if scale > 50: scale = 50
if scale < 20: scale = 20
node_size = 0.2 * scale
if node_size < 2: node_size = 2
w = (g.depth() + 2) * scale
h = (g.qubit_count() + 3) * scale
nodes = [{
'name': str(v),
'x': (g.row(v) + 1) * scale,
'y': (g.qubit(v) + 2) * scale,
't': g.type(v),
'phase': phase_to_s(g.phase(v), g.type(v))
} for v in g.vertices()]
links = [{
'source': str(g.edge_s(e)),
'target': str(g.edge_t(e)),
't': g.edge_type(e)
} for e in g.edges()]
graphj = json.dumps({'nodes': nodes, 'links': links})
with open(os.path.join(javascript_location, 'zx_viewer.js'), 'r') as f:
viewer_code = f.read()
text = """<div style="overflow:auto" id="graph-output-{id}"></div>
<script type="text/javascript">
{d3_load}
{viewer_code}
</script>
<script type="text/javascript">
require(['zx_viewer'], function(zx_viewer) {{
zx_viewer.showGraph('#graph-output-{id}',
JSON.parse('{graph}'), {width}, {height}, {scale}, {node_size}, {hbox}, {labels});
}});
</script>""".format(id=graph_id,
d3_load=d3_load_string,
viewer_code=viewer_code,
graph=graphj,
width=w,
height=h,
scale=scale,
node_size=node_size,
hbox='true' if auto_hbox else 'false',
labels='true' if labels else 'false')
if in_notebook:
display(HTML(text))
elif in_webpage:
d = html.DIV(style={"overflow": "auto"},
id="graph-output-{}".format(graph_id))
source = """
require(['zx_viewer'], function(zx_viewer) {{
zx_viewer.showGraph('#graph-output-{0}',
JSON.parse('{1}'), {2}, {3}, {4}, false, false);
}});
""".format(graph_id, graphj, str(w), str(h), str(node_size))
s = html.SCRIPT(source, type="text/javascript")
return d, s
