Fix example and make it independent of pipefunc

Author: basnijholt

example.ipynb

@@ -11,6 +11,83 @@
     "%env ANYWIDGET_HMR=1"
    ]
   },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from graphviz_anywidget import GraphvizAnyWidget, graphviz_widget"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "dot_source = \"\"\"\n",
+    "// Graph Visualization\n",
+    "digraph {\n",
+    "    graph [rankdir=LR]\n",
+    "    node [shape=rectangle]\n",
+    "    \n",
+    "    // Input nodes\n",
+    "    a [label=\"a\" color=black fillcolor=\"#90EE90\" fontname=Helvetica height=0.5 margin=0.05 penwidth=1 shape=rectangle style=\"filled,dashed\" width=0.75]\n",
+    "    b [label=\"b\" color=black fillcolor=\"#90EE90\" fontname=Helvetica height=0.5 margin=0.05 penwidth=1 shape=rectangle style=\"filled,dashed\" width=0.75]\n",
+    "    x [label=\"x = 1\" color=black fillcolor=\"#90EE90\" fontname=Helvetica height=0.5 margin=0.05 penwidth=1 shape=rectangle style=\"filled,dashed\" width=0.75]\n",
+    "    \n",
+    "    // Function nodes\n",
+    "    \"f(...) → c\" [label=\"f(...)\\nc\" color=black fillcolor=\"#87CEEB\" fontname=Helvetica height=0.5 margin=0.05 penwidth=1 shape=box style=\"filled,rounded\" width=0.75]\n",
+    "    \"g(...) → d\" [label=\"g(...)\\nd\" color=black fillcolor=\"#87CEEB\" fontname=Helvetica height=0.5 margin=0.05 penwidth=1 shape=box style=\"filled,rounded\" width=0.75]\n",
+    "    \"h(...) → e\" [label=\"h(...)\\ne\" color=black fillcolor=\"#87CEEB\" fontname=Helvetica height=0.5 margin=0.05 penwidth=1 shape=box style=\"filled,rounded\" width=0.75]\n",
+    "    \n",
+    "    // Edges\n",
+    "    \"f(...) → c\" -> \"g(...) → d\" [label=c color=\"#87CEEB\" fontcolor=transparent fontname=Helvetica penwidth=1.01]\n",
+    "    \"f(...) → c\" -> \"h(...) → e\" [label=c color=\"#87CEEB\" fontcolor=transparent fontname=Helvetica penwidth=1.01]\n",
+    "    \"g(...) → d\" -> \"h(...) → e\" [label=d color=\"#87CEEB\" fontcolor=transparent fontname=Helvetica penwidth=1.01]\n",
+    "    a -> \"f(...) → c\" [label=a color=\"#90EE90\" fontcolor=transparent fontname=Helvetica penwidth=1.01]\n",
+    "    b -> \"f(...) → c\" [label=b color=\"#90EE90\" fontcolor=transparent fontname=Helvetica penwidth=1.01]\n",
+    "    b -> \"g(...) → d\" [label=b color=\"#90EE90\" fontcolor=transparent fontname=Helvetica penwidth=1.01]\n",
+    "    x -> \"g(...) → d\" [label=\"x=1\" color=\"#90EE90\" fontcolor=transparent fontname=Helvetica penwidth=1.01]\n",
+    "    x -> \"h(...) → e\" [label=\"x=1\" color=\"#90EE90\" fontcolor=transparent fontname=Helvetica penwidth=1.01]\n",
+    "    \n",
+    "    // Legend\n",
+    "    subgraph cluster_legend {\n",
+    "        graph [color=black fillcolor=lightgrey fontcolor=black fontsize=20 label=Legend rankdir=LR style=filled]\n",
+    "        legend_0 [label=Argument color=black fillcolor=\"#90EE90\" fontname=Helvetica height=0.5 penwidth=1 shape=rectangle style=\"filled,dashed\" width=0.75]\n",
+    "        legend_1 [label=PipeFunc color=black fillcolor=\"#87CEEB\" fontname=Helvetica height=0.5 penwidth=1 shape=box style=\"filled,rounded\" width=0.75]\n",
+    "        legend_0 -> legend_1 [style=invis]\n",
+    "    }\n",
+    "}\n",
+    "\"\"\""
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "graphviz_widget(dot_source)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "GraphvizAnyWidget(dot_source=dot_source)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "The dot source above can also be generated by the PipeFunc package which is available on PyPI."
+   ]
+  },
   {
    "cell_type": "code",
    "execution_count": null,
@@ -37,27 +114,8 @@
     "\n",
     "pipeline = Pipeline([f, g, h])\n",
     "\n",
-    "dot_source = pipeline.visualize_graphviz(return_type=\"graphviz\").source"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "from graphviz_anywidget import GraphvizWidget, graph_widget\n",
-    "\n",
-    "graph_widget(dot_string=dot_source)"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "GraphvizWidget(dot_source=dot_source)"
+    "dot_source = pipeline.visualize_graphviz(return_type=\"graphviz\").source\n",
+    "graphviz_widget(dot_source)"
    ]
   }
  ],