docs/notebooks/widget_plugin_custom.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {
    "nbsphinx": "hidden"
   },
   "source": [
    "# Vitessce Widget Tutorial"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 18,
   "metadata": {},
   "outputs": [],
   "source": [
    "from vitessce import (\n",
    "    VitessceConfig,\n",
    "    Component as cm,\n",
    "    CoordinationType as ct,\n",
    "    OmeTiffWrapper,\n",
    "    MultiImageWrapper,\n",
    "    VitesscePlugin\n",
    ")\n",
    "from esbuild_py import transform"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 40,
   "metadata": {},
   "outputs": [],
   "source": [
    "PLUGIN_ESM = transform(\"\"\"\n",
    "function createPlugins(utilsForPlugins) {\n",
    "    const {\n",
    "        React,\n",
    "        PluginFileType,\n",
    "        PluginViewType,\n",
    "        PluginCoordinationType,\n",
    "        PluginJointFileType,\n",
    "        z,\n",
    "        useCoordination,\n",
    "        invokeCommand,\n",
    "    } = utilsForPlugins;\n",
    "    \n",
    "    const CSS = `\n",
    "        .chat {\n",
    "            overflow-y: scroll;\n",
    "        }\n",
    "    `;\n",
    "    \n",
    "    function ChatView(props) {\n",
    "        \n",
    "        const [nextMessage, setNextMessage] = React.useState('');\n",
    "        const [isLoading, setIsLoading] = React.useState(false);\n",
    "        const [chatHistory, setChatHistory] = React.useState([]); // chatHistory is an array of message objects like [{ user, text }, ...]\n",
    "                       \n",
    "        async function handleClick() {     \n",
    "            setChatHistory(prev => ([\n",
    "                ...prev,\n",
    "                { user: 'You', text: nextMessage },\n",
    "            ]));\n",
    "            setIsLoading(true);\n",
    "            const [chatReceiveValue, chatReceiveBuffers] = await invokeCommand(\"chat_send\", nextMessage, []);\n",
    "            setChatHistory(prev => ([\n",
    "                ...prev,\n",
    "                { user: 'AI', text: chatReceiveValue.text },\n",
    "            ]));\n",
    "            setIsLoading(false);\n",
    "        }\n",
    "        \n",
    "        return (\n",
    "            <>\n",
    "                <style>{CSS}</style>\n",
    "                <div className=\"chat\">\n",
    "                    <p>Chat view</p>\n",
    "                    <div>\n",
    "                        {chatHistory.map(message => (\n",
    "                            <p key={`${message.user}-${message.text}`}>\n",
    "                                <b>{message.user}</b>:\n",
    "                                <span>{message.text}</span>\n",
    "                            </p>\n",
    "                        ))}\n",
    "                    </div>\n",
    "                    <input type=\"text\" value={nextMessage} onChange={e => setNextMessage(e.target.value)} disabled={isLoading} />\n",
    "                    <button onClick={handleClick}>Send message</button>\n",
    "                </div>\n",
    "            </>\n",
    "        );\n",
    "    }\n",
    "\n",
    "    const pluginViewTypes = [\n",
    "        new PluginViewType('chat', ChatView, []),\n",
    "    ];\n",
    "    return { pluginViewTypes };\n",
    "}\n",
    "export default { createPlugins };\n",
    "\"\"\")\n",
    "\n",
    "\n",
    "def handle_chat_message(message, buffers):\n",
    "    return { \"text\": message.upper() }, []\n",
    "\n",
    "\n",
    "class ChatPlugin(VitesscePlugin):\n",
    "    plugin_esm = PLUGIN_ESM\n",
    "    commands = {\n",
    "        \"chat_send\": handle_chat_message,\n",
    "    }"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 41,
   "metadata": {},
   "outputs": [],
   "source": [
    "vc = VitessceConfig(schema_version=\"1.0.15\", name='Spraggins Multi-Modal', description='PAS + IMS + AF From https://portal.hubmapconsortium.org/browse/collection/6a6efd0c1a2681dc7d2faab8e4ab0bca')\n",
    "dataset = vc.add_dataset(name='Spraggins').add_object(\n",
    "    MultiImageWrapper(\n",
    "        image_wrappers=[\n",
    "            OmeTiffWrapper(img_url='https://assets.hubmapconsortium.org/f4188a148e4c759092d19369d310883b/ometiff-pyramids/processedMicroscopy/VAN0006-LK-2-85-PAS_images/VAN0006-LK-2-85-PAS_registered.ome.tif?token=', name='PAS'),\n",
    "            OmeTiffWrapper(img_url='https://assets.hubmapconsortium.org/2130d5f91ce61d7157a42c0497b06de8/ometiff-pyramids/processedMicroscopy/VAN0006-LK-2-85-AF_preIMS_images/VAN0006-LK-2-85-AF_preIMS_registered.ome.tif?token=', name='AF'),\n",
    "            OmeTiffWrapper(img_url='https://assets.hubmapconsortium.org/be503a021ed910c0918842e318e6efa2/ometiff-pyramids/ometiffs/VAN0006-LK-2-85-IMS_PosMode_multilayer.ome.tif?token=', name='IMS Pos Mode'),\n",
    "            OmeTiffWrapper(img_url='https://assets.hubmapconsortium.org/ca886a630b2038997a4cfbbf4abfd283/ometiff-pyramids/ometiffs/VAN0006-LK-2-85-IMS_NegMode_multilayer.ome.tif?token=', name='IMS Neg Mode')\n",
    "        ],\n",
    "        use_physical_size_scaling=True,\n",
    " )\n",
    ")\n",
    "spatial = vc.add_view(cm.SPATIAL, dataset=dataset)\n",
    "status = vc.add_view(\"chat\", dataset=dataset)\n",
    "lc = vc.add_view(cm.LAYER_CONTROLLER, dataset=dataset).set_props(disableChannelsIfRgbDetected=True)\n",
    "vc.layout(spatial | (lc / status));"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 2. Create the Vitessce widget"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 42,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "52bbdb1e3f91423b8dd934e3a4ff796e",
       "version_major": 2,
       "version_minor": 1
      },
      "text/plain": [
       "VitessceWidget(config={'version': '1.0.15', 'name': 'Spraggins Multi-Modal', 'description': 'PAS + IMS + AF Fr…"
      ]
     },
     "execution_count": 42,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "vw = vc.widget(plugins=[ChatPlugin()])\n",
    "vw"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "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.9.0"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}