fpl-napari.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "c4c7d6f4-c4ec-4f5e-8088-b20016f2d168",
   "metadata": {},
   "source": [
    "## Prototype for `napari` in a web-browser using `fastplotlib` as the front-end"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 21,
   "id": "3c1bf8f4-4f96-4fce-a8ff-6d4b20186aa0",
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "import fastplotlib as fpl\n",
    "import napari\n",
    "import numpy as np\n",
    "import imageio.v3 as iio\n",
    "from ipywidgets import IntSlider, VBox\n",
    "from functools import partial"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "f2911f2f-5c30-4b28-84dc-fcf3724e04fb",
   "metadata": {},
   "source": [
    "### Create a 2D image in `napari` and view in `fastplotlib`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 14,
   "id": "4f26aea9-0dc9-4641-84f8-5222d004196a",
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "data = iio.imread('imageio:camera.png')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 15,
   "id": "b40145d7-b2dc-47bc-b297-ea594e6dcea3",
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "napari_img = napari.layers.Image(data=data)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 16,
   "id": "bf44479f-7838-4748-b23f-b3256775143b",
   "metadata": {
    "tags": []
   },
   "outputs": [
    {
     "data": {
      "text/plain": [
       "[0, 255]"
      ]
     },
     "execution_count": 16,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "napari_img.contrast_limits"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "f1590a5e-c20e-4377-8c3a-fe66cac44a83",
   "metadata": {},
   "source": [
    "#### Simple `napari` 2D image_wrapper using `fastplotlib`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 17,
   "id": "aff73246-15e1-499d-a8c3-03ce7dc1199c",
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "def image_wrapper(image: napari.layers.Image) -> fpl.graphics.ImageGraphic:\n",
    "    \"\"\"Return fastplotlib ImageGraphic based on napari Image layer.\n",
    "    \n",
    "    Parameters\n",
    "    ==========\n",
    "    image: napari.layers.Image\n",
    "        napari Image layer to wrap\n",
    "    \n",
    "    Returns\n",
    "    =======\n",
    "    fpl.graphics.ImageGraphic\n",
    "    \"\"\"\n",
    "    image_graphic = fpl.graphics.ImageGraphic(data=image.data, \n",
    "                        name=image.name, \n",
    "                        metadata=image.metadata,\n",
    "                        cmap=image.colormap.name,\n",
    "                        vmin=image.contrast_limits[0],\n",
    "                        vmax=image.contrast_limits[1]\n",
    "                       )\n",
    "    \n",
    "    # event handler to update contrast limits\n",
    "    def update_vmin_vmax(ev):\n",
    "        image_graphic.cmap.vmin, image_graphic.cmap.vmax = ev.source.contrast_limits\n",
    "    \n",
    "    # link napari contrast limits to update fpl plot\n",
    "    image.events.contrast_limits.connect(update_vmin_vmax)\n",
    "    \n",
    "    return image_graphic"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 18,
   "id": "eba5fc02-286d-424b-ad04-f97c6705f0e9",
   "metadata": {
    "tags": []
   },
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "cc8354cb9a324fd58216afbb67d0911f",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "RFBOutputContext()"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "ab0dac99d03346708072a27ba35a50e5",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "VBox(children=(JupyterWgpuCanvas(), HBox(children=(Button(icon='expand-arrows-alt', layout=Layout(width='auto'…"
      ]
     },
     "execution_count": 18,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "# create fastplotlib plot instance\n",
    "plot = fpl.Plot()\n",
    "\n",
    "# wrap napari image\n",
    "fpl_img = image_wrapper(image=napari_img)\n",
    "\n",
    "# add wrapped image to plot \n",
    "plot.add_graphic(fpl_img)\n",
    "\n",
    "# view plot \n",
    "plot.show()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 19,
   "id": "b5696cc5-c1ef-411e-8122-af415da53a3e",
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "# flip image\n",
    "plot.camera.world.scale_y *= -1"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "a9944023-159e-4297-92cc-468615c68f00",
   "metadata": {},
   "source": [
    "#### Update contrast limits of `napari` image"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 20,
   "id": "c05752c3-8cdd-4c77-b38c-c52fbad57238",
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "napari_img.contrast_limits = (10, 200)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "134490b0-ecca-4f58-aa96-06aaa47b48f8",
   "metadata": {},
   "source": [
    "### Create `fastplotlib` viewer that wraps `napari` viewer"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 27,
   "id": "c46b0478-47ea-4a7f-b486-ebb0572319bd",
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "class FplViewer(napari.components.ViewerModel):\n",
    "    # napari uses pydantic, so must declare subclass specific attributes here\n",
    "    plot: fpl.Plot = None\n",
    "    sliders: list = None\n",
    "    def __init__(\n",
    "                self,\n",
    "                *args,\n",
    "                **kwargs):\n",
    "        \"\"\"\n",
    "        Fastplotlib view wrapper to act as napari front-end viewer. Wraps the \n",
    "        napari ViewerModel class. \n",
    "        \"\"\"\n",
    "        super().__init__(**kwargs)\n",
    "        \n",
    "        self.plot = fpl.Plot()\n",
    "        self.sliders = list()\n",
    "        \n",
    "        # connect inserting/removing layers to update fpl viewer\n",
    "        self._connect_layer_events()\n",
    "    \n",
    "    def _add_graphic(self, ev):\n",
    "        \"\"\"\n",
    "        On creation of a new napari layer, will parse the layer type and \n",
    "        add corresponding fastplotlib graphic instance. \n",
    "        \"\"\"\n",
    "        layer_insert_ix = ev.index\n",
    "        if type(self.layers[layer_insert_ix]).__name__ == \"Image\":\n",
    "            print(\"adding image\")\n",
    "            layer = self.layers[layer_insert_ix]\n",
    "            # note: data being added is based on the current 2D slice being viewed\n",
    "            self.plot.add_image(\n",
    "                data=layer._slice.image.view,\n",
    "                name=layer.name, \n",
    "                metadata=layer.metadata,\n",
    "                cmap=layer.colormap.name,\n",
    "                vmin=layer.contrast_limits[0],\n",
    "                vmax=layer.contrast_limits[1],\n",
    "            )\n",
    "        else: # for now only have image implemented\n",
    "            raise NotImplementedError\n",
    "    \n",
    "    def _remove_graphic(self, ev):\n",
    "        \"\"\"\n",
    "        If napari layer removed, will remove corresponding graphic from fpl plot. \n",
    "        \"\"\"\n",
    "        layer_remove_ix = ev.index\n",
    "        graphic = self.plot.graphics[layer_remove_ix]\n",
    "        self.plot.remove_graphic(graphic)\n",
    "        \n",
    "    def _update_sliders(self):\n",
    "        \"\"\"\n",
    "        Generate sliders for all dims not being displayed. \n",
    "        \"\"\"\n",
    "        self.sliders = list()\n",
    "        \n",
    "        dims_not_displayed = list(range(self.dims.ndim))[:-2]\n",
    "        \n",
    "        for dim in dims_not_displayed[::-1]:\n",
    "            slider = IntSlider(value=int(self.dims.point[dim]),\n",
    "                              min=self.dims.range[dim].start,\n",
    "                              max=self.dims.range[dim].stop,\n",
    "                              step=self.dims.range[dim].step)\n",
    "            \n",
    "            # update data based on dim slider values\n",
    "            slider.observe(partial(self._update_point, dim), \"value\")\n",
    "            self.sliders.append(slider)\n",
    "        \n",
    "    def _update_point(self, dim, change):\n",
    "        \"\"\"\n",
    "        Event handler for changes in dim sliders. \n",
    "        \"\"\"\n",
    "        new_val = change[\"new\"]\n",
    "        self.dims.set_point(dim, new_val)\n",
    "        for layer in self.layers:\n",
    "            self.plot[layer.name].data = layer._slice.image.view\n",
    "        \n",
    "    \n",
    "    def _connect_layer_events(self):\n",
    "        \"\"\"\n",
    "        Connect napari layer events to fpl functions. \n",
    "        Must pass position='last' so that napari dims object will get updated\n",
    "        first so data slice is correct. \n",
    "        \"\"\"\n",
    "        # insert layer, add graphic and update sliders\n",
    "        self.layers.events.inserted.connect(self._add_graphic, position=\"last\")\n",
    "        self.layers.events.inserted.connect(self._update_sliders, position=\"last\")\n",
    "        # remove layer, remove graphic and update sliders\n",
    "        self.layers.events.removed.connect(self._remove_graphic)\n",
    "        self.layers.events.removed.connect(self._update_sliders)\n",
    "    \n",
    "    def show(self):\n",
    "        \"\"\"\n",
    "        Return VBox of plot instance and sliders. \n",
    "        \"\"\"\n",
    "        return VBox([self.plot.show(),\n",
    "                     *self.sliders]\n",
    "                   )"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 28,
   "id": "65ba1bd9-340c-4bbf-b726-7c802713869e",
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "data = np.random.rand(12, 16, 18, 22, 24)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 29,
   "id": "2a1df60d-2643-4348-9622-32b36a881d90",
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "img = napari.layers.Image(data=data)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 30,
   "id": "83e8bb08-fec9-4085-b88d-af1c18264bfe",
   "metadata": {
    "tags": []
   },
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "d5c7b5ea74dc4329a804843ec7517dc7",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "RFBOutputContext()"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "fpl_view = FplViewer()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 31,
   "id": "76ac1b06-6917-40a1-b69e-801daa41b4dc",
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "adding image\n"
     ]
    },
    {
     "name": "stderr",
     "output_type": "stream",
     "text": [
      "/home/clewis7/repos/fastplotlib/fastplotlib/graphics/_features/_base.py:34: UserWarning: converting float64 array to float32\n",
      "  warn(f\"converting {array.dtype} array to float32\")\n"
     ]
    },
    {
     "data": {
      "text/plain": [
       "<Image layer 'data' at 0x7fd50c33e090>"
      ]
     },
     "execution_count": 31,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "fpl_view.add_image(data)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 32,
   "id": "9c88527c-a57b-4861-b7d9-f92dcdb5e369",
   "metadata": {
    "tags": []
   },
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "a56721f7c3834573a2ef70373bc77ab6",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "VBox(children=(VBox(children=(JupyterWgpuCanvas(), HBox(children=(Button(icon='expand-arrows-alt', layout=Layo…"
      ]
     },
     "execution_count": 32,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "fpl_view.show()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "5f114d8a-1952-4df2-884e-dae382be8587",
   "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.11.3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}