examples/101_text_sizer.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# 🦌 Text Sizer 📏\n",
    "\n",
    "This widget is used to send text strings to the browser for sizing. The resulting sizes\n",
    "are be included in the ElkLabel objects so ELKjs can accuratly place labels in the\n",
    "diagram."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import asyncio\n",
    "\n",
    "import ipywidgets\n",
    "\n",
    "import ipyelk"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "sizer = ipyelk.diagram.ElkTextSizer(max_size=1)\n",
    "button = ipywidgets.Button(description=\"Re-Calculate Size\")\n",
    "txt = ipywidgets.Text(\"hello world\", description=\"Input Text\")\n",
    "output = ipywidgets.Label()\n",
    "font_size = ipywidgets.IntSlider(description=\"Font Size\", min=10, max=72)\n",
    "font_family = ipywidgets.Select(\n",
    "    description=\"Font Family\", options=[\"sans-serif\", \"monospace\"], rows=1\n",
    ")\n",
    "\n",
    "\n",
    "def _on_resize_text(change):\n",
    "    sizer.style = {\n",
    "        \" text\": {\n",
    "            \"font-size\": f\"{font_size.value}px !important\",\n",
    "            \"font-family\": f\"{font_family.value} !important\",\n",
    "        }\n",
    "    }\n",
    "    asyncio.create_task(call_measurement())\n",
    "\n",
    "\n",
    "[it.observe(_on_resize_text, \"value\") for it in [font_size, font_family]]\n",
    "\n",
    "\n",
    "async def call_measurement(*args):\n",
    "    size = await sizer.measure(txt.value)\n",
    "    output.value = f\"width:{size.width} height:{size.height}\"\n",
    "\n",
    "\n",
    "txt.observe(lambda *args: asyncio.create_task(call_measurement()), \"value\")\n",
    "button.on_click(lambda *args: asyncio.create_task(call_measurement()))\n",
    "ipywidgets.VBox(\n",
    "    [ipywidgets.HBox([txt, font_size, font_family]), ipywidgets.HBox([button, output])]\n",
    ")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "sizer.measure.cache_info()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Responses are cached so that multiple requests for the same label will only be send to the DOM once"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "sizer.measure.cache_info()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Bulk measurements\n",
    "\n",
    "Can send several requests"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "sizer.style"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "num = 10\n",
    "bulk_sizer = ipyelk.diagram.ElkTextSizer(\n",
    "    max_size=num,\n",
    "    style={\n",
    "        \" .sprotty .elklabel.larger-font\": {\"font-size\": \"20px\"},\n",
    "    },\n",
    ")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "async def send_bulk_text(num):\n",
    "    texts = tuple(str(i) for i in range(num))\n",
    "    await bulk_sizer.measure(texts)\n",
    "    display(bulk_sizer.measure.cache_info())\n",
    "\n",
    "\n",
    "asyncio.create_task(send_bulk_text(num))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "after running expect to see 10 additional requests captured in the `bulk_sizer.futures`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "bulk_sizer.raw_css"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "bulk_sizer.measure.cache_info()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Size labels with css classes applied"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "def label(i):\n",
    "    return ipyelk.diagram.elk_model.ElkLabel(\n",
    "        id=str(i), text=str(i), properties={\"cssClasses\": \"larger-font\"}\n",
    "    )\n",
    "\n",
    "\n",
    "async def send_bulk_label(num):\n",
    "    texts = tuple(label(i) for i in range(num))\n",
    "    await bulk_sizer.measure(texts)\n",
    "    display(bulk_sizer.measure.cache_info())\n",
    "\n",
    "\n",
    "asyncio.create_task(send_bulk_label(num))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## The measure cache can be cleared with"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "bulk_sizer.measure.cache_clear()\n",
    "bulk_sizer.measure.cache_info()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 🦌 Learn More 📖\n",
    "\n",
    "See the [other examples](./_index.ipynb)."
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "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.7.9"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}