notebooks/treetrace_visualization.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "3afa0573-d270-4c91-8fae-a19bc206d916",
   "metadata": {},
   "source": [
    "# Demo of visualizations in `TracingNode`s and the tracing browser\n",
    "\n",
    "Note the viasualizations also work while nested deeper in JSON-like objects. (See the image example.)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "id": "437201af-cefa-4f36-9e9e-a34235adfbf3",
   "metadata": {},
   "outputs": [],
   "source": [
    "import matplotlib.pyplot as plt\n",
    "from treetrace import FileStorage, TracingNode, FormatStr, Html, HtmlColor\n",
    "from treetrace.ext.pyplot import capture_figure\n",
    "import interlab"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "id": "754876d9-ee82-452b-9704-0da59f9657a4",
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "rm: cannot remove 'logs/treetrace_visualization/*': No such file or directory\n"
     ]
    },
    {
     "name": "stderr",
     "output_type": "stream",
     "text": [
      "[2024-01-20 20:21:18,204] INFO(treetrace.ui.storage_server): Started tracing UI server: <ServerHandle http://localhost:40317>\n"
     ]
    },
    {
     "data": {
      "text/html": [
       "\n",
       "        <iframe\n",
       "            width=\"95%\"\n",
       "            height=\"700\"\n",
       "            src=\"http://localhost:40317\"\n",
       "            frameborder=\"0\"\n",
       "            allowfullscreen\n",
       "            \n",
       "        ></iframe>\n",
       "        "
      ],
      "text/plain": [
       "<IPython.lib.display.IFrame at 0x74ca0c057be0>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "!rm logs/treetrace_visualization/*\n",
    "storage = FileStorage(\"logs/treetrace_visualization\")\n",
    "storage.live_display()"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "6c4d5158-efbd-46e7-9c40-427c58d8d39e",
   "metadata": {},
   "source": [
    "^^^^^^^^^^^^^^ Open tracing browser at this URL"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "16e92602-62b2-4076-a7bd-8597572ac496",
   "metadata": {},
   "source": [
    "## Changing tracing node colors"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "id": "64932cae-7e44-45ef-b57d-045909af84c9",
   "metadata": {},
   "outputs": [],
   "source": [
    "with TracingNode(\"vis-colors\", storage=storage):\n",
    "    with TracingNode(\"first\", meta={\"color\": \"green\"}):\n",
    "        pass\n",
    "    with TracingNode(\"second\", meta={\"color_bg\": \"lightblue\"}):\n",
    "        pass            \n",
    "    with TracingNode(\"third\", meta={\"color_border\": \"#994404\"}) as c:\n",
    "        c.set_result(\"text\")\n",
    "\n",
    "    color = str(HtmlColor.random_color(\"Alice\", saturation=0.5, lighness=0.3))\n",
    "    with TracingNode(\"random color\", meta={\"color\": color}, inputs=dict(color=color)):\n",
    "        pass"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "07d8b804-feab-473d-806a-d4e371bba284",
   "metadata": {},
   "source": [
    "## Recursively colored formatted strings"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "id": "11efbc9a-3533-4fdd-92a5-235ddfd737c3",
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "* Memory at time {time}:\n",
      "  text={text!r}\n"
     ]
    }
   ],
   "source": [
    "with TracingNode(\"formatstr\", storage=storage) as c:\n",
    "    # One bit of memory\n",
    "    one_mem = FormatStr(\"* Memory at time {time}:\\n  text={text!r}\")\n",
    "    print(one_mem)\n",
    "\n",
    "    # Can be used with explicit format\n",
    "    memory_data = [(42, \"the answer\"), (-1, \"Don't remember\"), (3.1415926, \"Pie time!\")]\n",
    "    all_mems = FormatStr(\"\\n\\n\").join(one_mem.format(time=a, text=b) for a, b in memory_data)\n",
    "    # Note that explicit color for a field is also supported! (Here \"#5274d026\")\n",
    "    y = FormatStr(\"# Memory\\n\\n{mem#5274d016}\\n\\n## End of memory\\n\\nLong block of text, but having name={name!r} and also an {unused_field}, then going on like ex purus, interdum imperdiet libero vel, volutpat vulputate lacus. In sit amet varius mi, at sollicitudin purus. Nunc elit nunc, molestie non quam ac, placerat mattis ante. Praesent non feugiat est. Donec ullamcorper non quam a tempor. {insert} Suspendisse blandit est quis diam efficitur, eu blandit odio viverra, et cetera and so on until {what}.\")\n",
    "    y = y.format(mem=all_mems)\n",
    "\n",
    "    # You can also do this to simulate a f-string using local variables:\n",
    "    name = \"Alice\"\n",
    "    what = \"THE END\"    \n",
    "    insert = \"Nam ut egestas ipsum, in mattis mi.\"\n",
    "    y = y.format(**locals())\n",
    "\n",
    "    # Attach to tracing node\n",
    "    c.add_input(\"memory_data\", memory_data)\n",
    "    c.set_result({'full_text': y, \"all_mems\": all_mems, \"one_mem\": one_mem})"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "28b3c15d-5caf-4dae-bac7-bd45173ec9c1",
   "metadata": {},
   "source": [
    "## Visualizing images, HTML and SVG"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "id": "9133a4a9-0771-40fc-875a-f5b2cda3730c",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "<Figure size 200x150 with 0 Axes>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "# Image demo\n",
    "\n",
    "with TracingNode(\"vis-image\", storage=storage) as root:\n",
    "\n",
    "    plt.figure(figsize=(2,1.5))\n",
    "    fig, ax = plt.subplots()\n",
    "    \n",
    "    fruits = ['apple', 'blueberry', 'cherry', 'orange']\n",
    "    counts = [40, 100, 30, 55]\n",
    "    bar_labels = ['red', 'blue', '_red', 'orange']\n",
    "    bar_colors = ['tab:red', 'tab:blue', 'tab:red', 'tab:orange']\n",
    "    \n",
    "    ax.bar(fruits, counts, label=bar_labels, color=bar_colors)\n",
    "    img = capture_figure(fig)\n",
    "    root.set_result(img)\n",
    "    \n",
    "    complex_data_structure = {\n",
    "        \"foo\": [\"Bar\", \"Baz\"],\n",
    "        \"my_chart\": { \"label\": \"Nice chart\", \"image\": img },\n",
    "        \"more_data\": \"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\\nDonec sagittis nunc ut felis eleifend, non lobortis neque commodo.\\n\" * 10\n",
    "    }\n",
    "    \n",
    "    with TracingNode(\"image demo\", inputs={\"first_param\": complex_data_structure, \"other_param\": 42}) as root2:\n",
    "        pass"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "id": "ffa65db0-bf69-4813-91fd-f0e85637b678",
   "metadata": {},
   "outputs": [],
   "source": [
    "# HTML snippets: simple table (unstyled)\n",
    "\n",
    "with TracingNode(\"vis-html\", storage=storage) as root:\n",
    "    root.set_result(Html(\"\"\"       \n",
    "       <table style='border: 1px solid black'>\n",
    "          <tr><td>Player 1</td><td>7</td</tr>\n",
    "          <tr><td>Player 2</td><td>12</td></tr>\n",
    "       </table>\"\"\".replace(\"<td\", \"<td style='border: 1px solid black'\")))"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "id": "5a190210-7346-44a1-9a06-096a25c82761",
   "metadata": {},
   "outputs": [],
   "source": [
    "# SVG via HTML: tic-tac-toe\n",
    "\n",
    "with TracingNode(\"vis-svg\", storage=storage) as root:\n",
    "    root.set_result(Html(\"\"\"       \n",
    "       <svg style=\"width: 100px; height: 100px\" viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\">\n",
    "       <line x1=\"0\" y1=\"33\" x2=\"100\" y2=\"33\" stroke=\"black\" />\n",
    "       <line x1=\"0\" y1=\"66\" x2=\"100\" y2=\"66\" stroke=\"black\" />       \n",
    "       <line x1=\"33\" y1=\"0\" x2=\"33\" y2=\"100\" stroke=\"black\" />       \n",
    "       <line x1=\"66\" y1=\"0\" x2=\"66\" y2=\"100\" stroke=\"black\" />\n",
    "\n",
    "       <line x1=\"5\" y1=\"5\" x2=\"27\" y2=\"27\" stroke=\"blue\" stroke-width=\"3\"/>\n",
    "       <line x1=\"27\" y1=\"5\" x2=\"5\" y2=\"27\" stroke=\"blue\" stroke-width=\"3\"/>\n",
    "\n",
    "       <circle cx=\"49\" cy=\"49\" r=\"10\" stroke=\"red\" stroke-width=\"3\" fill=\"none\"/>\n",
    "</svg>\"\"\"))"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "078131b9-d47b-4f06-a11c-7d0e5e17a47f",
   "metadata": {},
   "source": [
    "Note that you can also embed a browser of a fixed TreeTrace in the notebook. This is actually stored in the notebook and can be explored without running the python code. (Note it is not displayed in GitHub notebook previews.)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "id": "ebb39df5-0ad1-4751-afa1-443c46f66e14",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<div id=0340a51a-a832-4a39-baa3-976c2c6c420e></div>\n",
       "<script src=\"https://cdn.jsdelivr.net/gh/acsresearch/interlab@9fbc2169cd64cac537b74c432a6d1a7a2b7e8b0c/treetrace/ui/browser/assets/index-1ea692e0.js\"></script>\n",
       "<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/gh/acsresearch/interlab@9fbc2169cd64cac537b74c432a6d1a7a2b7e8b0c/treetrace/ui/browser/assets/index-72b169f7.css\">\n",
       "<script>\n",
       "import(\"https://cdn.jsdelivr.net/gh/acsresearch/interlab@9fbc2169cd64cac537b74c432a6d1a7a2b7e8b0c/treetrace/ui/browser/assets/index-1ea692e0.js\").then(() => window.initTreeTraceBrowser(\"0340a51a-a832-4a39-baa3-976c2c6c420e\", {\"_type\": \"TracingNode\", \"name\": \"vis-svg\", \"uid\": \"2024-01-20T20-21-18-vis_svg-h3kF9J\", \"version\": \"3.0\", \"result\": {\"_type\": \"$html\", \"html\": \"       \\n       <svg style=\\\"width: 100px; height: 100px\\\" viewBox=\\\"0 0 100 100\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\">\\n       <line x1=\\\"0\\\" y1=\\\"33\\\" x2=\\\"100\\\" y2=\\\"33\\\" stroke=\\\"black\\\" />\\n       <line x1=\\\"0\\\" y1=\\\"66\\\" x2=\\\"100\\\" y2=\\\"66\\\" stroke=\\\"black\\\" />       \\n       <line x1=\\\"33\\\" y1=\\\"0\\\" x2=\\\"33\\\" y2=\\\"100\\\" stroke=\\\"black\\\" />       \\n       <line x1=\\\"66\\\" y1=\\\"0\\\" x2=\\\"66\\\" y2=\\\"100\\\" stroke=\\\"black\\\" />\\n\\n       <line x1=\\\"5\\\" y1=\\\"5\\\" x2=\\\"27\\\" y2=\\\"27\\\" stroke=\\\"blue\\\" stroke-width=\\\"3\\\"/>\\n       <line x1=\\\"27\\\" y1=\\\"5\\\" x2=\\\"5\\\" y2=\\\"27\\\" stroke=\\\"blue\\\" stroke-width=\\\"3\\\"/>\\n\\n       <circle cx=\\\"49\\\" cy=\\\"49\\\" r=\\\"10\\\" stroke=\\\"red\\\" stroke-width=\\\"3\\\" fill=\\\"none\\\"/>\\n</svg>\"}, \"start_time\": \"2024-01-20T20:21:18.590060\", \"end_time\": \"2024-01-20T20:21:18.590104\"}))\n",
       "</script>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "root.display()"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3 (ipykernel)",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.10.12"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}