{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import ipyreact\n",
    "from traitlets import List, Any\n",
    "import numpy as np\n",
    "\n",
    "class TldrawSineWidget(ipyreact.ReactWidget):\n",
    "    points = List(List(Any())).tag(sync=True)\n",
    "    _esm = \"\"\"\n",
    "    import { TDShapeType, Tldraw } from \"@tldraw/tldraw\";\n",
    "    import * as React from \"react\";\n",
    "\n",
    "    export default function App({ points }) {\n",
    "\n",
    "        const [app, setApp] = React.useState()\n",
    "\n",
    "        const handleMount = React.useCallback((app: Tldraw) => {\n",
    "            setApp(app)\n",
    "        }, []);\n",
    "\n",
    "        React.useEffect(() => {\n",
    "            if (app) {\n",
    "            app.createShapes({\n",
    "                type: \"draw\",\n",
    "                id: \"draw1\",\n",
    "                color: 'red',\n",
    "                points: points,\n",
    "            });\n",
    "            }\n",
    "        }, [points, app])\n",
    "\n",
    "        return (\n",
    "            <div\n",
    "            style={{\n",
    "                position: \"relative\",\n",
    "                width: \"800px\",\n",
    "                height: \"450px\",\n",
    "            }}\n",
    "            >\n",
    "            <Tldraw onMount={handleMount} onChange={e => console.log(\"hii\")} />\n",
    "            </div>\n",
    "        );\n",
    "}\n",
    "\n",
    "    \"\"\"\n",
    "\n",
    "import solara\n",
    "import numpy as np\n",
    "\n",
    "float_value = solara.reactive(0)\n",
    "\n",
    "@solara.component\n",
    "def Page():\n",
    "    dispersion = \"high\" # \"high\", \"low\", \"const\"\n",
    "    def n(wj):\n",
    "        if dispersion == \"high\":\n",
    "            return 1 + wj * 0.1\n",
    "        if dispersion == \"low\":\n",
    "            return 1.1 - wj * 0.01\n",
    "        if dispersion == \"const\":\n",
    "            return 1\n",
    "\n",
    "    c = 1\n",
    "    num_of_waves = 121\n",
    "    start_w = 1\n",
    "    end_w = 7\n",
    "    x = np.linspace(-2, 10, 1001)\n",
    "    \n",
    "    def g(x, t):\n",
    "        u1 = 0\n",
    "        for wj in np.linspace(start_w, end_w, num_of_waves):\n",
    "            u1 += np.exp(1j * (wj * n(wj) / c * x - t * wj))\n",
    "        return u1.real\n",
    "\n",
    "    ooo = 38    \n",
    "    points = np.column_stack((x*50+ooo, g(x, float_value.value)+150)).tolist()\n",
    "    points = points[100:]\n",
    "    points[0] = [ooo-40, 0]\n",
    "\n",
    "\n",
    "    # solara.Markdown(\" \\psi(x, t) = \\sum \\limits_j C_j \\cdot e^{\\mathrm{i}( - k_j \\cdot x + \\omega_j \\cdot t )}, \\omega_j= \\frac{k_j}{c(k_j)} $\")\n",
    "    # solara.Markdown(f\"**t**: {float_value.value}\")\n",
    "\n",
    "\n",
    "    with solara.Row():\n",
    "        solara.Button(\"Reset\", on_click=lambda: float_value.set(0))\n",
    "        solara.FloatSlider(\"Time t\", value=float_value, min=0, max=4*np.pi, step=0.1)\n",
    "    TldrawSineWidget.element(points=points)\n",
    "\n",
    "\n",
    "\n",
    "Page()"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "napari-env2",
   "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.9.15"
  },
  "orig_nbformat": 4
 },
 "nbformat": 4,
 "nbformat_minor": 2
}