Skip to content

Commit

Permalink
Checkpoint work on the computational graph proof of concept.
Browse files Browse the repository at this point in the history
  • Loading branch information
@tshead2
tshead2 committed Oct 14, 2022
1 parent c93d231 commit 1b211d5
Showing 1 changed file with 120 additions and 42 deletions.
162 changes: 120 additions & 42 deletions notebooks/experimental/graphcat-etree-layout.ipynb
View file
Expand Up @@ -27,6 +27,7 @@
"import xml.etree.ElementTree as xml\n",
"\n",
"from IPython.display import display_svg\n",
"import numpy\n",
"\n",
"import boxcat\n",
"import domcat\n",
Expand All @@ -40,6 +41,13 @@
"metadata": {},
"outputs": [],
"source": [
"def plot(graph, name, inputs):\n",
" x = inputs.getone(\"x\")\n",
" y = inputs.getone(\"y\")\n",
" plot = xml.Element(\"plot\", x=x, y=y)\n",
" return plot\n",
"\n",
"\n",
"def render(graph, name, inputs):\n",
" root = inputs.getone(None)\n",
" top, right, bottom, left = root.get(\"boxcat:content\")\n",
Expand Down Expand Up @@ -74,17 +82,27 @@
"graph = graphcat.StaticGraph()\n",
"graph.add_task(\"canvas\", domcat.create_element(\"canvas\", width=200, height=100))\n",
"graph.add_task(\"axes1\", domcat.create_element(\"cartesian\", margin=\"10px\", padding=\"5px\"))\n",
"graph.add_task(\"x\", graphcat.constant(numpy.arange(10)))\n",
"graph.add_task(\"y\", graphcat.constant(numpy.arange(10) ** 2))\n",
"graph.add_task(\"plot\", plot)\n",
"graph.add_task(\"append1\", domcat.append_element)\n",
"graph.add_links(\"canvas\", (\"append1\", \"parent\"))\n",
"graph.add_links(\"axes1\", (\"append1\", \"child\"))\n",
"graph.add_task(\"append2\", domcat.append_element)\n",
"\n",
"graph.add_links(\"x\", (\"plot\", \"x\"))\n",
"graph.add_links(\"y\", (\"plot\", \"y\"))\n",
"graph.add_links(\"plot\", (\"append1\", \"child\"))\n",
"graph.add_links(\"axes1\", (\"append1\", \"parent\"))\n",
"\n",
"graph.add_links(\"append1\", (\"append2\", \"child\"))\n",
"graph.add_links(\"canvas\", (\"append2\", \"parent\"))\n",
"\n",
"# graph.add_task(\"axes2\", domcat.create_element(\"radial\", left=\"50%\"))\n",
"# graph.add_task(\"append2\", domcat.append_element)\n",
"# graph.add_links(\"append1\", (\"append2\", \"parent\"))\n",
"# graph.add_links(\"axes2\", (\"append2\", \"child\"))\n",
"\n",
"graph.add_task(\"layout\", boxcat.graphcat_layout)\n",
"graph.add_links(\"append1\", \"layout\")\n",
"graph.add_links(\"append2\", \"layout\")\n",
"\n",
"graph.add_task(\"render\", render)\n",
"graph.add_links(\"layout\", \"render\")"
Expand All @@ -99,66 +117,118 @@
{
"data": {
"image/svg+xml": [
"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"300pt\" height=\"56pt\" viewBox=\"0.00 0.00 300.00 56.00\">\n",
"<g id=\"graph0\" class=\"graph\" transform=\"scale(1 1) rotate(0) translate(4 52)\">\n",
"<polygon fill=\"#ffffff\" stroke=\"transparent\" points=\"-4,4 -4,-52 296,-52 296,4 -4,4\"/>\n",
"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"474pt\" height=\"89pt\" viewBox=\"0.00 0.00 474.00 89.00\">\n",
"<g id=\"graph0\" class=\"graph\" transform=\"scale(1 1) rotate(0) translate(4 85)\">\n",
"<polygon fill=\"#ffffff\" stroke=\"transparent\" points=\"-4,4 -4,-85 470,-85 470,4 -4,4\"/>\n",
"<!-- canvas -->\n",
"<g id=\"node1\" class=\"node\">\n",
"<title>canvas</title>\n",
"<polygon fill=\"#ffffff\" stroke=\"#494744\" points=\"38,-48 0,-48 0,-33 38,-33 38,-48\"/>\n",
"<text text-anchor=\"middle\" x=\"19\" y=\"-38.6\" font-family=\"Helvetica,sans-Serif\" font-size=\"8.00\" fill=\"#494744\">canvas</text>\n",
"<polygon fill=\"#ffffff\" stroke=\"#494744\" points=\"209,-81 171,-81 171,-66 209,-66 209,-81\"/>\n",
"<text text-anchor=\"middle\" x=\"190\" y=\"-71.6\" font-family=\"Helvetica,sans-Serif\" font-size=\"8.00\" fill=\"#494744\">canvas</text>\n",
"</g>\n",
"<!-- append1 -->\n",
"<!-- append2 -->\n",
"<g id=\"node2\" class=\"node\">\n",
"<title>append1</title>\n",
"<polygon fill=\"#ffffff\" stroke=\"#494744\" points=\"144,-31 100,-31 100,-16 144,-16 144,-31\"/>\n",
"<text text-anchor=\"middle\" x=\"122\" y=\"-21.6\" font-family=\"Helvetica,sans-Serif\" font-size=\"8.00\" fill=\"#494744\">append1</text>\n",
"<title>append2</title>\n",
"<polygon fill=\"#ffffff\" stroke=\"#494744\" points=\"318,-65 274,-65 274,-50 318,-50 318,-65\"/>\n",
"<text text-anchor=\"middle\" x=\"296\" y=\"-55.6\" font-family=\"Helvetica,sans-Serif\" font-size=\"8.00\" fill=\"#494744\">append2</text>\n",
"</g>\n",
"<!-- canvas&#45;&gt;append1 -->\n",
"<!-- canvas&#45;&gt;append2 -->\n",
"<g id=\"edge1\" class=\"edge\">\n",
"<title>canvas-&gt;append1</title>\n",
"<path fill=\"none\" stroke=\"#494744\" d=\"M38.3735,-37.3024C52.8511,-34.9129 72.9684,-31.5926 89.8437,-28.8074\"/>\n",
"<polygon fill=\"#494744\" stroke=\"#494744\" points=\"90.556,-32.2372 99.8525,-27.1554 89.416,-25.3307 90.556,-32.2372\"/>\n",
"<text text-anchor=\"middle\" x=\"69\" y=\"-37.1\" font-family=\"Helvetica,sans-Serif\" font-size=\"8.00\" fill=\"#000000\">  parent  </text>\n",
"<title>canvas-&gt;append2</title>\n",
"<path fill=\"none\" stroke=\"#494744\" d=\"M209.442,-70.5654C224.6306,-68.2727 246.0655,-65.0373 263.8045,-62.3597\"/>\n",
"<polygon fill=\"#494744\" stroke=\"#494744\" points=\"264.3811,-65.8124 273.7466,-60.859 263.3362,-58.8908 264.3811,-65.8124\"/>\n",
"<text text-anchor=\"middle\" x=\"243\" y=\"-70.1\" font-family=\"Helvetica,sans-Serif\" font-size=\"8.00\" fill=\"#000000\">  parent  </text>\n",
"</g>\n",
"<!-- layout -->\n",
"<g id=\"node4\" class=\"node\">\n",
"<g id=\"node8\" class=\"node\">\n",
"<title>layout</title>\n",
"<polygon fill=\"#ffffff\" stroke=\"#494744\" points=\"217,-31 183,-31 183,-16 217,-16 217,-31\"/>\n",
"<text text-anchor=\"middle\" x=\"200\" y=\"-21.6\" font-family=\"Helvetica,sans-Serif\" font-size=\"8.00\" fill=\"#494744\">layout</text>\n",
"<polygon fill=\"#ffffff\" stroke=\"#494744\" points=\"391,-65 357,-65 357,-50 391,-50 391,-65\"/>\n",
"<text text-anchor=\"middle\" x=\"374\" y=\"-55.6\" font-family=\"Helvetica,sans-Serif\" font-size=\"8.00\" fill=\"#494744\">layout</text>\n",
"</g>\n",
"<!-- append1&#45;&gt;layout -->\n",
"<g id=\"edge3\" class=\"edge\">\n",
"<title>append1-&gt;layout</title>\n",
"<path fill=\"none\" stroke=\"#494744\" d=\"M144.143,-23.5C153.044,-23.5 163.3955,-23.5 172.7517,-23.5\"/>\n",
"<polygon fill=\"#494744\" stroke=\"#494744\" points=\"172.7619,-27.0001 182.7618,-23.5 172.7618,-20.0001 172.7619,-27.0001\"/>\n",
"<text text-anchor=\"middle\" x=\"163.5\" y=\"-26.1\" font-family=\"Helvetica,sans-Serif\" font-size=\"8.00\" fill=\"#000000\">    </text>\n",
"<!-- append2&#45;&gt;layout -->\n",
"<g id=\"edge7\" class=\"edge\">\n",
"<title>append2-&gt;layout</title>\n",
"<path fill=\"none\" stroke=\"#494744\" d=\"M318.143,-57.5C327.044,-57.5 337.3955,-57.5 346.7517,-57.5\"/>\n",
"<polygon fill=\"#494744\" stroke=\"#494744\" points=\"346.7619,-61.0001 356.7618,-57.5 346.7618,-54.0001 346.7619,-61.0001\"/>\n",
"<text text-anchor=\"middle\" x=\"337.5\" y=\"-60.1\" font-family=\"Helvetica,sans-Serif\" font-size=\"8.00\" fill=\"#000000\">    </text>\n",
"</g>\n",
"<!-- axes1 -->\n",
"<g id=\"node3\" class=\"node\">\n",
"<title>axes1</title>\n",
"<polygon fill=\"#ffffff\" stroke=\"#494744\" points=\"36,-15 2,-15 2,0 36,0 36,-15\"/>\n",
"<text text-anchor=\"middle\" x=\"19\" y=\"-5.6\" font-family=\"Helvetica,sans-Serif\" font-size=\"8.00\" fill=\"#494744\">axes1</text>\n",
"<polygon fill=\"#ffffff\" stroke=\"#494744\" points=\"106,-64 72,-64 72,-49 106,-49 106,-64\"/>\n",
"<text text-anchor=\"middle\" x=\"89\" y=\"-54.6\" font-family=\"Helvetica,sans-Serif\" font-size=\"8.00\" fill=\"#494744\">axes1</text>\n",
"</g>\n",
"<!-- append1 -->\n",
"<g id=\"node4\" class=\"node\">\n",
"<title>append1</title>\n",
"<polygon fill=\"#ffffff\" stroke=\"#494744\" points=\"212,-48 168,-48 168,-33 212,-33 212,-48\"/>\n",
"<text text-anchor=\"middle\" x=\"190\" y=\"-38.6\" font-family=\"Helvetica,sans-Serif\" font-size=\"8.00\" fill=\"#494744\">append1</text>\n",
"</g>\n",
"<!-- axes1&#45;&gt;append1 -->\n",
"<g id=\"edge2\" class=\"edge\">\n",
"<title>axes1-&gt;append1</title>\n",
"<path fill=\"none\" stroke=\"#494744\" d=\"M36.2689,-6.4761C49.6876,-6.051 68.6961,-6.2627 85,-9.5 88.543,-10.2035 92.1919,-11.2088 95.7536,-12.3623\"/>\n",
"<polygon fill=\"#494744\" stroke=\"#494744\" points=\"94.8065,-15.7423 105.4005,-15.8777 97.2033,-9.1654 94.8065,-15.7423\"/>\n",
"<text text-anchor=\"middle\" x=\"69\" y=\"-12.1\" font-family=\"Helvetica,sans-Serif\" font-size=\"8.00\" fill=\"#000000\">  child  </text>\n",
"<path fill=\"none\" stroke=\"#494744\" d=\"M106.1333,-53.7858C120.2087,-51.556 140.5439,-48.3346 157.665,-45.6224\"/>\n",
"<polygon fill=\"#494744\" stroke=\"#494744\" points=\"158.4962,-49.0344 167.8254,-44.0128 157.4009,-42.1207 158.4962,-49.0344\"/>\n",
"<text text-anchor=\"middle\" x=\"137\" y=\"-53.1\" font-family=\"Helvetica,sans-Serif\" font-size=\"8.00\" fill=\"#000000\">  parent  </text>\n",
"</g>\n",
"<!-- render -->\n",
"<!-- append1&#45;&gt;append2 -->\n",
"<g id=\"edge6\" class=\"edge\">\n",
"<title>append1-&gt;append2</title>\n",
"<path fill=\"none\" stroke=\"#494744\" d=\"M212.1337,-42.9121C225.7035,-44.5085 243.406,-46.802 259,-49.5 260.4975,-49.7591 262.0264,-50.0367 263.5688,-50.3273\"/>\n",
"<polygon fill=\"#494744\" stroke=\"#494744\" points=\"263.2599,-53.8352 273.7538,-52.3761 264.6404,-46.9726 263.2599,-53.8352\"/>\n",
"<text text-anchor=\"middle\" x=\"243\" y=\"-52.1\" font-family=\"Helvetica,sans-Serif\" font-size=\"8.00\" fill=\"#000000\">  child  </text>\n",
"</g>\n",
"<!-- x -->\n",
"<g id=\"node5\" class=\"node\">\n",
"<title>x</title>\n",
"<polygon fill=\"#ffffff\" stroke=\"#494744\" points=\"29,-48 0,-48 0,-33 29,-33 29,-48\"/>\n",
"<text text-anchor=\"middle\" x=\"14.5\" y=\"-38.6\" font-family=\"Helvetica,sans-Serif\" font-size=\"8.00\" fill=\"#494744\">x</text>\n",
"</g>\n",
"<!-- plot -->\n",
"<g id=\"node6\" class=\"node\">\n",
"<title>plot</title>\n",
"<polygon fill=\"#ffffff\" stroke=\"#494744\" points=\"103.5,-31 74.5,-31 74.5,-16 103.5,-16 103.5,-31\"/>\n",
"<text text-anchor=\"middle\" x=\"89\" y=\"-21.6\" font-family=\"Helvetica,sans-Serif\" font-size=\"8.00\" fill=\"#494744\">plot</text>\n",
"</g>\n",
"<!-- x&#45;&gt;plot -->\n",
"<g id=\"edge3\" class=\"edge\">\n",
"<title>x-&gt;plot</title>\n",
"<path fill=\"none\" stroke=\"#494744\" d=\"M29.2188,-37.1413C39.2185,-34.8595 52.6882,-31.7859 64.3104,-29.1339\"/>\n",
"<polygon fill=\"#494744\" stroke=\"#494744\" points=\"65.341,-32.4887 74.3118,-26.8517 63.7837,-25.6642 65.341,-32.4887\"/>\n",
"<text text-anchor=\"middle\" x=\"50.5\" y=\"-36.1\" font-family=\"Helvetica,sans-Serif\" font-size=\"8.00\" fill=\"#000000\">  x  </text>\n",
"</g>\n",
"<!-- plot&#45;&gt;append1 -->\n",
"<g id=\"edge5\" class=\"edge\">\n",
"<title>plot-&gt;append1</title>\n",
"<path fill=\"none\" stroke=\"#494744\" d=\"M103.51,-25.6319C116.4959,-27.5721 136.0446,-30.5722 153,-33.5 154.4898,-33.7572 156.0123,-34.0251 157.5495,-34.2996\"/>\n",
"<polygon fill=\"#494744\" stroke=\"#494744\" points=\"157.2486,-37.8028 167.7161,-36.1647 158.5118,-30.9177 157.2486,-37.8028\"/>\n",
"<text text-anchor=\"middle\" x=\"137\" y=\"-36.1\" font-family=\"Helvetica,sans-Serif\" font-size=\"8.00\" fill=\"#000000\">  child  </text>\n",
"</g>\n",
"<!-- y -->\n",
"<g id=\"node7\" class=\"node\">\n",
"<title>y</title>\n",
"<polygon fill=\"#ffffff\" stroke=\"#494744\" points=\"29,-15 0,-15 0,0 29,0 29,-15\"/>\n",
"<text text-anchor=\"middle\" x=\"14.5\" y=\"-5.6\" font-family=\"Helvetica,sans-Serif\" font-size=\"8.00\" fill=\"#494744\">y</text>\n",
"</g>\n",
"<!-- y&#45;&gt;plot -->\n",
"<g id=\"edge4\" class=\"edge\">\n",
"<title>y-&gt;plot</title>\n",
"<path fill=\"none\" stroke=\"#494744\" d=\"M29.2369,-6.8839C37.5002,-6.8631 47.9373,-7.3807 57,-9.5 59.7291,-10.1382 62.5158,-11.0023 65.2503,-11.9899\"/>\n",
"<polygon fill=\"#494744\" stroke=\"#494744\" points=\"64.1528,-15.3238 74.7306,-15.9255 66.8368,-8.8588 64.1528,-15.3238\"/>\n",
"<text text-anchor=\"middle\" x=\"50.5\" y=\"-12.1\" font-family=\"Helvetica,sans-Serif\" font-size=\"8.00\" fill=\"#000000\">  y  </text>\n",
"</g>\n",
"<!-- render -->\n",
"<g id=\"node9\" class=\"node\">\n",
"<title>render</title>\n",
"<polygon fill=\"#ffffff\" stroke=\"#494744\" points=\"292,-31 256,-31 256,-16 292,-16 292,-31\"/>\n",
"<text text-anchor=\"middle\" x=\"274\" y=\"-21.6\" font-family=\"Helvetica,sans-Serif\" font-size=\"8.00\" fill=\"#494744\">render</text>\n",
"<polygon fill=\"#ffffff\" stroke=\"#494744\" points=\"466,-65 430,-65 430,-50 466,-50 466,-65\"/>\n",
"<text text-anchor=\"middle\" x=\"448\" y=\"-55.6\" font-family=\"Helvetica,sans-Serif\" font-size=\"8.00\" fill=\"#494744\">render</text>\n",
"</g>\n",
"<!-- layout&#45;&gt;render -->\n",
"<g id=\"edge4\" class=\"edge\">\n",
"<g id=\"edge8\" class=\"edge\">\n",
"<title>layout-&gt;render</title>\n",
"<path fill=\"none\" stroke=\"#494744\" d=\"M217.1631,-23.5C225.6916,-23.5 236.2165,-23.5 245.882,-23.5\"/>\n",
"<polygon fill=\"#494744\" stroke=\"#494744\" points=\"245.8976,-27.0001 255.8976,-23.5 245.8975,-20.0001 245.8976,-27.0001\"/>\n",
"<text text-anchor=\"middle\" x=\"236.5\" y=\"-26.1\" font-family=\"Helvetica,sans-Serif\" font-size=\"8.00\" fill=\"#000000\">    </text>\n",
"<path fill=\"none\" stroke=\"#494744\" d=\"M391.1631,-57.5C399.6916,-57.5 410.2165,-57.5 419.882,-57.5\"/>\n",
"<polygon fill=\"#494744\" stroke=\"#494744\" points=\"419.8976,-61.0001 429.8976,-57.5 419.8975,-54.0001 419.8976,-61.0001\"/>\n",
"<text text-anchor=\"middle\" x=\"410.5\" y=\"-60.1\" font-family=\"Helvetica,sans-Serif\" font-size=\"8.00\" fill=\"#000000\">    </text>\n",
"</g>\n",
"</g>\n",
"</svg>"
Expand Down Expand Up @@ -186,13 +256,15 @@
"output_type": "stream",
"text": [
"<canvas width=\"200\" height=\"100\">\n",
" <cartesian margin=\"10px\" padding=\"5px\"/>\n",
" <cartesian margin=\"10px\" padding=\"5px\">\n",
" <plot x=\"[0 1 2 3 4 5 6 7 8 9]\" y=\"[ 0 1 4 9 16 25 36 49 64 81]\"/>\n",
" </cartesian>\n",
"</canvas>\n"
]
}
],
"source": [
"domcat.dump(graph.output(\"append1\"))"
"domcat.dump(graph.output(\"append2\"))"
]
},
{
Expand All @@ -206,7 +278,9 @@
"output_type": "stream",
"text": [
"<canvas width=\"200\" height=\"100\" boxcat:content=\"(0, 200.0, 100.0, 0)\">\n",
" <cartesian margin=\"10px\" padding=\"5px\" boxcat:content=\"(15.0, 185.0, 85.0, 15.0)\"/>\n",
" <cartesian margin=\"10px\" padding=\"5px\" boxcat:content=\"(15.0, 185.0, 85.0, 15.0)\">\n",
" <plot x=\"[0 1 2 3 4 5 6 7 8 9]\" y=\"[ 0 1 4 9 16 25 36 49 64 81]\" boxcat:content=\"(15.0, 185.0, 85.0, 15.0)\"/>\n",
" </cartesian>\n",
"</canvas>\n"
]
}
Expand Down Expand Up @@ -234,6 +308,10 @@
" <text x=\"17.0\" y=\"15.0\" style=\"font-size: 8px; fill: rgba(0,0,255,0.4); dominant-baseline: hanging\">\n",
" cartesian\n",
" </text>\n",
" <rect x=\"15.0\" y=\"15.0\" width=\"170.0\" height=\"70.0\" stroke=\"rgba(0,0,255,0.4)\" fill=\"none\"/>\n",
" <text x=\"17.0\" y=\"15.0\" style=\"font-size: 8px; fill: rgba(0,0,255,0.4); dominant-baseline: hanging\">\n",
" plot\n",
" </text>\n",
"</svg>\n"
]
}
Expand All @@ -251,7 +329,7 @@
{
"data": {
"image/svg+xml": [
"<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"200.0\" height=\"100.0\" viewBox=\"0 0 200.0 100.0\"><rect x=\"0\" y=\"0\" width=\"200.0\" height=\"100.0\" stroke=\"rgba(0,0,255,0.4)\" fill=\"none\"/><text x=\"2\" y=\"0\" style=\"font-size: 8px; fill: rgba(0,0,255,0.4); dominant-baseline: hanging\">canvas</text><rect x=\"15.0\" y=\"15.0\" width=\"170.0\" height=\"70.0\" stroke=\"rgba(0,0,255,0.4)\" fill=\"none\"/><text x=\"17.0\" y=\"15.0\" style=\"font-size: 8px; fill: rgba(0,0,255,0.4); dominant-baseline: hanging\">cartesian</text></svg>"
"<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"200.0\" height=\"100.0\" viewBox=\"0 0 200.0 100.0\"><rect x=\"0\" y=\"0\" width=\"200.0\" height=\"100.0\" stroke=\"rgba(0,0,255,0.4)\" fill=\"none\"/><text x=\"2\" y=\"0\" style=\"font-size: 8px; fill: rgba(0,0,255,0.4); dominant-baseline: hanging\">canvas</text><rect x=\"15.0\" y=\"15.0\" width=\"170.0\" height=\"70.0\" stroke=\"rgba(0,0,255,0.4)\" fill=\"none\"/><text x=\"17.0\" y=\"15.0\" style=\"font-size: 8px; fill: rgba(0,0,255,0.4); dominant-baseline: hanging\">cartesian</text><rect x=\"15.0\" y=\"15.0\" width=\"170.0\" height=\"70.0\" stroke=\"rgba(0,0,255,0.4)\" fill=\"none\"/><text x=\"17.0\" y=\"15.0\" style=\"font-size: 8px; fill: rgba(0,0,255,0.4); dominant-baseline: hanging\">plot</text></svg>"
]
},
"metadata": {},
Expand Down

0 comments on commit 1b211d5

Please sign in to comment.