02.5_One Symbol to Rule them All.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "2df5faab-ff16-4f8e-b953-8a312a84b905",
   "metadata": {},
   "source": [
    "## Enriching Objects\n",
    "\n",
    "In Jupyter notebooks you can emit rich media types like `text/html`, `application/json`, `text/markdown`, `image/png` and many others. Most famously, pandas DataFrames were really easy to work with\n",
    "\n",
    "```python\n",
    "import pandas as pd\n",
    "df = pd.DataFrame({\n",
    "    'Dinosaur': ['T-Rex', 'Velociraptor', 'Stegosaurus'],\n",
    "    'Period': ['Cretaceous', 'Cretaceous', 'Jurassic'],\n",
    "    'Length_meters': [12, 2, 9]\n",
    "})\n",
    "df\n",
    "```\n",
    "\n",
    "| Dinosaur     | Period      | Length_meters |\n",
    "|--------------|-------------|---------------|\n",
    "| T-Rex        | Cretaceous  | 12            |\n",
    "| Velociraptor | Cretaceous  | 2             |\n",
    "| Stegosaurus  | Jurassic    | 9             |\n",
    "\n",
    "\n",
    "In Python library authors only had to add `__repr__` for `text/plain`, `_repr_html_` for `text/html`, or others to their classes. Then people just wrote code like they would in a REPL while getting nice tables and everything out.\n",
    "\n",
    "\n",
    "```python\n",
    "from typing import List, Dict, Union\n",
    "import html\n",
    "\n",
    "class FakeDataFrame:\n",
    "    def __init__(self, data: Dict[str, List[Union[str, int, float]]]) -> None:\n",
    "        \"\"\"Initialize DataFrame with dictionary data.\"\"\"\n",
    "        self.data = data\n",
    "        self.columns = list(data.keys())\n",
    "        self.length = len(next(iter(data.values())))\n",
    "\n",
    "    def _repr_html_(self) -> str:\n",
    "        html_rows = []\n",
    "\n",
    "        header_html = \"\".join([f\"<th>{html.escape(col)}</th>\" for col in self.columns])\n",
    "        html_rows.append(f\"<tr>{header_html}</tr>\")\n",
    "\n",
    "        for i in range(self.length):\n",
    "            row_html = \"\".join(\n",
    "                [f\"<td>{html.escape(str(self.data[col][i]))}</td>\" for col in self.columns]\n",
    "            )\n",
    "            html_rows.append(f\"<tr>{row_html}</tr>\")\n",
    "\n",
    "        return f\"<table>{''.join(html_rows)}</table>\"\n",
    "```\n",
    "\n",
    "\n",
    "We can do the same with `deno` by defining a special symbol on a class (or any object!):\n",
    "\n",
    "```\n",
    "Symbol.for(\"Jupyter.display\")\n",
    "```\n",
    "\n",
    "Let's create a little 2D vector class."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "id": "b6e83381-3689-4a2b-89c7-6a6184409d5d",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "image/svg+xml": [
       "\n",
       "          <svg height=\"282.842712474619\" width=\"282.842712474619\" viewBox=\"0 0 282.842712474619 282.842712474619\">\n",
       "            <defs>\n",
       "              <marker id=\"arrowhead\" markerWidth=\"5\" markerHeight=\"5\"\n",
       "              refX=\"5\" refY=\"2.5\" orient=\"auto\">\n",
       "                <polygon points=\"0 0, 5 2.5, 0 5\" fill=\"#15803d\" />\n",
       "              </marker>\n",
       "            </defs>\n",
       "\n",
       "            <line x1=\"141.4213562373095\" y1=\"141.4213562373095\" x2=\"241.4213562373095\" y2=\"41.42135623730951\"\n",
       "            style=\"stroke:#15803d;stroke-width:2\" marker-end=\"url(#arrowhead)\" />\n",
       "          </svg>\n",
       "      "
      ],
      "text/plain": [
       "Vector2D(x: 100, y: 100)"
      ]
     },
     "execution_count": 1,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "class Vector2D {\n",
    "  x: number;\n",
    "  y: number;\n",
    "\n",
    "  constructor(x: number, y: number) {\n",
    "    this.x = x;\n",
    "    this.y = y;\n",
    "  }\n",
    "\n",
    "  [Symbol.for(\"Jupyter.display\")]() {\n",
    "    // Calculate viewbox size based on vector magnitude\n",
    "    const magnitude = Math.sqrt(this.x ** 2 + this.y ** 2);\n",
    "    const viewboxSize = Math.max(100, 2 * magnitude);\n",
    "    const center = viewboxSize / 2;\n",
    "      \n",
    "    const color = \"#15803d\"\n",
    "\n",
    "    return {\n",
    "      \"text/plain\": `Vector2D(x: ${this.x}, y: ${this.y})`,\n",
    "      \"image/svg+xml\": `\n",
    "          <svg height=\"${viewboxSize}\" width=\"${viewboxSize}\" viewBox=\"0 0 ${viewboxSize} ${viewboxSize}\">\n",
    "            <defs>\n",
    "              <marker id=\"arrowhead\" markerWidth=\"5\" markerHeight=\"5\"\n",
    "              refX=\"5\" refY=\"2.5\" orient=\"auto\">\n",
    "                <polygon points=\"0 0, 5 2.5, 0 5\" fill=\"${color}\" />\n",
    "              </marker>\n",
    "            </defs>\n",
    "\n",
    "            <line x1=\"${center}\" y1=\"${center}\" x2=\"${center + this.x}\" y2=\"${center - this.y}\"\n",
    "            style=\"stroke:${color};stroke-width:2\" marker-end=\"url(#arrowhead)\" />\n",
    "          </svg>\n",
    "      `\n",
    "    };\n",
    "  }\n",
    "}\n",
    "\n",
    "const v = new Vector2D(100, 100);\n",
    "v"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "id": "0d740420-2e18-4b7e-81d5-460d1a0a7a05",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "image/svg+xml": [
       "\n",
       "          <svg height=\"100\" width=\"100\" viewBox=\"0 0 100 100\">\n",
       "            <defs>\n",
       "              <marker id=\"arrowhead\" markerWidth=\"5\" markerHeight=\"5\"\n",
       "              refX=\"5\" refY=\"2.5\" orient=\"auto\">\n",
       "                <polygon points=\"0 0, 5 2.5, 0 5\" fill=\"#15803d\" />\n",
       "              </marker>\n",
       "            </defs>\n",
       "\n",
       "            <line x1=\"50\" y1=\"50\" x2=\"30\" y2=\"80\"\n",
       "            style=\"stroke:#15803d;stroke-width:2\" marker-end=\"url(#arrowhead)\" />\n",
       "          </svg>\n",
       "      "
      ],
      "text/plain": [
       "Vector2D(x: -20, y: -30)"
      ]
     },
     "execution_count": 2,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "new Vector2D(-20, -30);"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "id": "39e8f6ca-4677-493b-afbf-69c13f0cf98e",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "image/svg+xml": [
       "\n",
       "          <svg height=\"100\" width=\"100\" viewBox=\"0 0 100 100\">\n",
       "            <defs>\n",
       "              <marker id=\"arrowhead\" markerWidth=\"5\" markerHeight=\"5\"\n",
       "              refX=\"5\" refY=\"2.5\" orient=\"auto\">\n",
       "                <polygon points=\"0 0, 5 2.5, 0 5\" fill=\"#15803d\" />\n",
       "              </marker>\n",
       "            </defs>\n",
       "\n",
       "            <line x1=\"50\" y1=\"50\" x2=\"10\" y2=\"50\"\n",
       "            style=\"stroke:#15803d;stroke-width:2\" marker-end=\"url(#arrowhead)\" />\n",
       "          </svg>\n",
       "      "
      ],
      "text/plain": [
       "Vector2D(x: -40, y: 0)"
      ]
     },
     "execution_count": 3,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "new Vector2D(-40, 0);"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "c93c28d1-5040-478c-8503-53eee9131a4f",
   "metadata": {},
   "source": [
    "## Modules\n",
    "\n",
    "Where the real power comes in is having custom representations for objects like:\n",
    "\n",
    "* DataFrames\n",
    "* Plots\n",
    "* Components\n",
    "\n",
    "Get out there and add `Symbol.for(\"Jupyter.display\")` to your classes today!\n",
    "\n"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Deno",
   "language": "typescript",
   "name": "deno"
  },
  "language_info": {
   "codemirror_mode": "typescript",
   "file_extension": ".ts",
   "mimetype": "text/x.typescript",
   "name": "typescript",
   "nbconvert_exporter": "script",
   "pygments_lexer": "typescript",
   "version": "5.4.5"
  },
  "widgets": {
   "application/vnd.jupyter.widget-state+json": {
    "state": {},
    "version_major": 2,
    "version_minor": 0
   }
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}