docs/notebooks/widget_modify_config.ipynb

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "colab": {
     "base_uri": "https://localhost:8080/"
    },
    "id": "zLOtLwy1cb39",
    "outputId": "dc04a9c7-6a79-466a-97ac-5f6d68299bcb",
    "tags": []
   },
   "outputs": [],
   "source": [
    "!pip install \"vitessce[all]\""
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "dI4N5oh0cYc1",
    "nbsphinx": "hidden"
   },
   "source": [
    "# Vitessce Widget Tutorial"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "id": "KnWYWhnMcYc2"
   },
   "outputs": [],
   "source": [
    "from vitessce import (\n",
    "    VitessceConfig,\n",
    "    Component as cm,\n",
    "    CoordinationType as ct,\n",
    "    OmeTiffWrapper,\n",
    "    MultiImageWrapper,\n",
    "    CoordinationLevel as CL,\n",
    "    ObsSegmentationsOmeTiffWrapper,\n",
    "    ImageOmeTiffWrapper,\n",
    "    get_initial_coordination_scope_prefix,\n",
    ")\n",
    "import random"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "id": "qqiLSqvqcYc3"
   },
   "outputs": [],
   "source": [
    "vc = VitessceConfig(schema_version=\"1.0.16\")\n",
    "dataset = vc.add_dataset(name='Spraggins').add_object(\n",
    "    ImageOmeTiffWrapper(\n",
    "        img_url=\"https://storage.googleapis.com/vitessce-demo-data/kpmp-f2f-march-2023/S-1905-017737/S-1905-017737_PAS_2of2_bf.ome.tif\",\n",
    "        offsets_url=\"https://storage.googleapis.com/vitessce-demo-data/kpmp-f2f-march-2023/S-1905-017737/S-1905-017737_PAS_2of2_bf.offsets.json\"\n",
    "    )\n",
    ").add_object(\n",
    "    ObsSegmentationsOmeTiffWrapper(\n",
    "        img_url=\"https://storage.googleapis.com/vitessce-demo-data/kpmp-f2f-march-2023/S-1905-017737/S-1905-017737_PAS_2of2.ome.tif\",\n",
    "        offsets_url=\"https://storage.googleapis.com/vitessce-demo-data/kpmp-f2f-march-2023/S-1905-017737/S-1905-017737_PAS_2of2.offsets.json\",\n",
    "        obs_types_from_channel_names=True\n",
    "    )\n",
    ")\n",
    "\n",
    "spatial = vc.add_view(\"spatialBeta\", dataset=dataset)\n",
    "lc = vc.add_view(\"layerControllerBeta\", dataset=dataset)\n",
    "\n",
    "vc.link_views_by_dict([spatial, lc], {\n",
    "    \"imageLayer\": CL([\n",
    "        {\n",
    "          \"photometricInterpretation\": \"RGB\"\n",
    "        }\n",
    "    ]),\n",
    "}, meta=True, scope_prefix=get_initial_coordination_scope_prefix(\"A\", \"image\"))\n",
    "\n",
    "vc.layout(spatial | lc);"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "colab": {
     "base_uri": "https://localhost:8080/",
     "height": 617,
     "referenced_widgets": [
      "a6e72904c7cd4521bb486f69ac9cb6c7",
      "800201ad9e7942fbbb6b0a195ef6ec6a"
     ]
    },
    "id": "wRXsCajecYc3",
    "outputId": "726b6ad0-5f3f-4b31-922f-a96336e688f2"
   },
   "outputs": [],
   "source": [
    "vw = vc.widget(remount_on_uid_change=False)\n",
    "vw"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "colab": {
     "base_uri": "https://localhost:8080/"
    },
    "id": "H43CtKancu6-",
    "outputId": "00d1a53e-75fe-4fe8-c5a7-33c175fddbc4"
   },
   "outputs": [],
   "source": [
    "# Inspect the current configuration value.\n",
    "# This is a dict in the JSON-based format https://vitessce.io/docs/view-config-json/\n",
    "vw.config"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "id": "kU1rj0EPcYc3"
   },
   "outputs": [],
   "source": [
    "# Programatically set a different zoom level and toggle the visibility/color of different segmentation layers:\n",
    "vw.config = {\n",
    "    **vw.config,\n",
    "    # Need to provide a fresh \"uid\" value.\n",
    "    # This will tell Vitessce that the contents should be diff-ed against the previous config.\n",
    "    \"uid\": f\"new_config_{random.random()}\",\n",
    "    \"coordinationSpace\": {\n",
    "      # Information about the coordination space can be found at https://vitessce.io/docs/coordination-types/\n",
    "      **vw.config[\"coordinationSpace\"],\n",
    "      \"spatialZoom\": {\n",
    "          **vw.config[\"coordinationSpace\"][\"spatialZoom\"],\n",
    "          \"A\": -8\n",
    "      },\n",
    "      \"spatialChannelVisible\": {\n",
    "          **vw.config[\"coordinationSpace\"][\"spatialChannelVisible\"],\n",
    "          \"init_A_obsSegmentations_0\": True,\n",
    "          \"init_A_obsSegmentations_1\": False,\n",
    "          \"init_A_obsSegmentations_2\": False,\n",
    "          \"init_A_obsSegmentations_3\": False\n",
    "      },\n",
    "      \"spatialChannelColor\": {\n",
    "          **vw.config[\"coordinationSpace\"][\"spatialChannelColor\"],\n",
    "          \"init_A_obsSegmentations_0\": [255, 0, 0],\n",
    "      }\n",
    "  }\n",
    "}"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "id": "0M7PelaPdyBY"
   },
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "colab": {
   "provenance": []
  },
  "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.10.14"
  },
  "widgets": {
   "application/vnd.jupyter.widget-state+json": {
    "800201ad9e7942fbbb6b0a195ef6ec6a": {
     "model_module": "@jupyter-widgets/base",
     "model_module_version": "1.2.0",
     "model_name": "LayoutModel",
     "state": {
      "_model_module": "@jupyter-widgets/base",
      "_model_module_version": "1.2.0",
      "_model_name": "LayoutModel",
      "_view_count": null,
      "_view_module": "@jupyter-widgets/base",
      "_view_module_version": "1.2.0",
      "_view_name": "LayoutView",
      "align_content": null,
      "align_items": null,
      "align_self": null,
      "border": null,
      "bottom": null,
      "display": null,
      "flex": null,
      "flex_flow": null,
      "grid_area": null,
      "grid_auto_columns": null,
      "grid_auto_flow": null,
      "grid_auto_rows": null,
      "grid_column": null,
      "grid_gap": null,
      "grid_row": null,
      "grid_template_areas": null,
      "grid_template_columns": null,
      "grid_template_rows": null,
      "height": null,
      "justify_content": null,
      "justify_items": null,
      "left": null,
      "margin": null,
      "max_height": null,
      "max_width": null,
      "min_height": null,
      "min_width": null,
      "object_fit": null,
      "object_position": null,
      "order": null,
      "overflow": null,
      "overflow_x": null,
      "overflow_y": null,
      "padding": null,
      "right": null,
      "top": null,
      "visibility": null,
      "width": null
     }
    },
    "a6e72904c7cd4521bb486f69ac9cb6c7": {
     "model_module": "anywidget",
     "model_module_version": "~0.9.*",
     "model_name": "AnyModel",
     "state": {
      "_anywidget_id": "vitessce.widget.VitessceWidget",
      "_dom_classes": [],
      "_esm": "\nimport { importWithMap } from 'https://unpkg.com/dynamic-importmap@0.1.0';\nconst importMap = {\n  imports: {\n    \"react\": \"https://esm.sh/react@18.2.0?dev\",\n    \"react-dom\": \"https://esm.sh/react-dom@18.2.0?dev\",\n    \"react-dom/client\": \"https://esm.sh/react-dom@18.2.0/client?dev\",\n  },\n};\n\nconst React = await importWithMap(\"react\", importMap);\nconst { createRoot } = await importWithMap(\"react-dom/client\", importMap);\n\nconst e = React.createElement;\n\nconst prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;\n\n// The jupyter server may be running through a proxy,\n// which means that the client needs to prepend the part of the URL before /proxy/8000 such as\n// https://hub.gke2.mybinder.org/user/vitessce-vitessce-python-swi31vcv/proxy/8000/A/0/cells\nfunction prependBaseUrl(config, proxy, hasHostName) {\n  if(!proxy || hasHostName) {\n    return config;\n  }\n  const { origin } = new URL(window.location.href);\n  let baseUrl;\n  const jupyterLabConfigEl = document.getElementById('jupyter-config-data');\n\n  if (jupyterLabConfigEl) {\n    // This is jupyter lab\n    baseUrl = JSON.parse(jupyterLabConfigEl.textContent || '').baseUrl;\n  } else {\n    // This is jupyter notebook\n    baseUrl = document.getElementsByTagName('body')[0].getAttribute('data-base-url');\n  }\n  return {\n    ...config,\n    datasets: config.datasets.map(d => ({\n      ...d,\n      files: d.files.map(f => ({\n        ...f,\n        url: `${origin}${baseUrl}${f.url}`,\n      })),\n    })),\n  };\n}\n\nasync function render(view) {\n    const cssUid = view.model.get('uid');\n    const jsDevMode = view.model.get('js_dev_mode');\n    const jsPackageVersion = view.model.get('js_package_version');\n    const customJsUrl = view.model.get('custom_js_url');\n    const pluginEsmArr = view.model.get('plugin_esm');\n    const remountOnUidChange = view.model.get('remount_on_uid_change');\n    const storeUrls = view.model.get('store_urls');\n    const invokeTimeout = view.model.get('invoke_timeout');\n\n    const pkgName = (jsDevMode ? \"@vitessce/dev\" : \"vitessce\");\n\n    importMap.imports[\"vitessce\"] = (customJsUrl.length > 0\n        ? customJsUrl\n        : `https://unpkg.com/${pkgName}@${jsPackageVersion}`\n    );\n\n    const {\n        Vitessce,\n        PluginFileType,\n        PluginViewType,\n        PluginCoordinationType,\n        PluginJointFileType,\n        z,\n        useCoordination,\n        useGridItemSize,\n        // TODO: names and function signatures are subject to change for the following functions\n        // Reference: https://github.com/keller-mark/use-coordination/issues/37#issuecomment-1946226827\n        useComplexCoordination,\n        useMultiCoordinationScopesNonNull,\n        useMultiCoordinationScopesSecondaryNonNull,\n        useComplexCoordinationSecondary,\n        useCoordinationScopes,\n        useCoordinationScopesBy,\n    } = await importWithMap(\"vitessce\", importMap);\n\n    let pluginViewTypes = [];\n    let pluginCoordinationTypes = [];\n    let pluginFileTypes = [];\n    let pluginJointFileTypes = [];\n\n    const stores = Object.fromEntries(\n        storeUrls.map(storeUrl => ([\n            storeUrl,\n            {\n                async get(key) {\n                    const [data, buffers] = await view.experimental.invoke(\"_zarr_get\", [storeUrl, key], {\n                        signal: AbortSignal.timeout(invokeTimeout),\n                    });\n                    if (!data.success) return undefined;\n\n                    if (key.includes(\"spatialdata_attrs\") && key.endsWith(\"0\") && !ArrayBuffer.isView(buffers[0].buffer)) {\n                        // For some reason, the Zarrita.js UnicodeStringArray does not seem to work with\n                        // ArrayBuffers (throws a TypeError), so here we convert to Uint8Array if needed.\n                        // This error is occurring specifically for the arr.getChunk call within the AnnDataSource._loadString function.\n                        // TODO: figure out a more long-term solution.\n                        return new Uint8Array(buffers[0].buffer);\n                    }\n\n                    return buffers[0].buffer;\n                },\n            }\n        ])),\n    );\n\n    function invokePluginCommand(commandName, commandParams, commandBuffers) {\n        return view.experimental.invoke(\"_plugin_command\", [commandName, commandParams], {\n            signal: AbortSignal.timeout(invokeTimeout),\n            ...(commandBuffers ? { buffers: commandBuffers } : {}),\n        });\n    }\n\n    for (const pluginEsm of pluginEsmArr) {\n        try {\n            const pluginEsmUrl = URL.createObjectURL(new Blob([pluginEsm], { type: \"text/javascript\" }));\n            const pluginModule = (await import(pluginEsmUrl)).default;\n            URL.revokeObjectURL(pluginEsmUrl);\n\n            const pluginsObj = await pluginModule.createPlugins({\n                React,\n                PluginFileType,\n                PluginViewType,\n                PluginCoordinationType,\n                PluginJointFileType,\n                z,\n                invokeCommand: invokePluginCommand,\n                useCoordination,\n                useGridItemSize,\n                useComplexCoordination,\n                useMultiCoordinationScopesNonNull,\n                useMultiCoordinationScopesSecondaryNonNull,\n                useComplexCoordinationSecondary,\n                useCoordinationScopes,\n                useCoordinationScopesBy,\n            });\n            if(Array.isArray(pluginsObj.pluginViewTypes)) {\n                pluginViewTypes = [...pluginViewTypes, ...pluginsObj.pluginViewTypes];\n            }\n            if(Array.isArray(pluginsObj.pluginCoordinationTypes)) {\n                pluginCoordinationTypes = [...pluginCoordinationTypes, ...pluginsObj.pluginCoordinationTypes];\n            }\n            if(Array.isArray(pluginsObj.pluginFileTypes)) {\n                pluginFileTypes = [...pluginFileTypes, ...pluginsObj.pluginFileTypes];\n            }\n            if(Array.isArray(pluginsObj.pluginJointFileTypes)) {\n                pluginJointFileTypes = [...pluginJointFileTypes, ...pluginsObj.pluginJointFileTypes];\n            }\n        } catch(e) {\n            console.error(e);\n        }\n    }\n\n    function VitessceWidget(props) {\n        const { model } = props;\n\n        const [config, setConfig] = React.useState(prependBaseUrl(model.get('config'), model.get('proxy'), model.get('has_host_name')));\n        const [validateConfig, setValidateConfig] = React.useState(true);\n        const height = model.get('height');\n        const theme = model.get('theme') === 'auto' ? (prefersDark ? 'dark' : 'light') : model.get('theme');\n\n        const divRef = React.useRef();\n\n        React.useEffect(() => {\n            if(!divRef.current) {\n                return () => {};\n            }\n\n            function handleMouseEnter() {\n                const jpn = divRef.current.closest('.jp-Notebook');\n                if(jpn) {\n                    jpn.style.overflow = \"hidden\";\n                }\n            }\n            function handleMouseLeave(event) {\n                if(event.relatedTarget === null || (event.relatedTarget && event.relatedTarget.closest('.jp-Notebook')?.length)) return;\n                const jpn = divRef.current.closest('.jp-Notebook');\n                if(jpn) {\n                    jpn.style.overflow = \"auto\";\n                }\n            }\n            divRef.current.addEventListener(\"mouseenter\", handleMouseEnter);\n            divRef.current.addEventListener(\"mouseleave\", handleMouseLeave);\n\n            return () => {\n                if(divRef.current) {\n                    divRef.current.removeEventListener(\"mouseenter\", handleMouseEnter);\n                    divRef.current.removeEventListener(\"mouseleave\", handleMouseLeave);\n                }\n            };\n        }, [divRef]);\n\n        // Config changed on JS side (from within <Vitessce/>),\n        // send updated config to Python side.\n        const onConfigChange = React.useCallback((config) => {\n            model.set('config', config);\n            setValidateConfig(false);\n            model.save_changes();\n        }, [model]);\n\n        // Config changed on Python side,\n        // pass to <Vitessce/> component to it is updated on JS side.\n        React.useEffect(() => {\n            model.on('change:config', () => {\n                const newConfig = prependBaseUrl(model.get('config'), model.get('proxy'), model.get('has_host_name'));\n\n                // Force a re-render and re-validation by setting a new config.uid value.\n                // TODO: make this conditional on a parameter from Python.\n                //newConfig.uid = `random-${Math.random()}`;\n                //console.log('newConfig', newConfig);\n                setConfig(newConfig);\n            });\n        }, []);\n\n        const vitessceProps = {\n            height, theme, config, onConfigChange, validateConfig,\n            pluginViewTypes, pluginCoordinationTypes, pluginFileTypes, pluginJointFileTypes,\n            remountOnUidChange, stores,\n        };\n\n        return e('div', { ref: divRef, style: { height: height + 'px' } },\n            e(React.Suspense, { fallback: e('div', {}, 'Loading...') },\n                e(React.StrictMode, {},\n                    e(Vitessce, vitessceProps)\n                ),\n            ),\n        );\n    }\n\n    const root = createRoot(view.el);\n    root.render(e(VitessceWidget, { model: view.model }));\n\n    return () => {\n        // Re-enable scrolling.\n        const jpn = view.el.closest('.jp-Notebook');\n        if(jpn) {\n            jpn.style.overflow = \"auto\";\n        }\n\n        // Clean up React and DOM state.\n        root.unmount();\n        if(view._isFromDisplay) {\n            view.el.remove();\n        }\n    };\n}\nexport default { render };\n",
      "_model_module": "anywidget",
      "_model_module_version": "~0.9.*",
      "_model_name": "AnyModel",
      "_view_count": null,
      "_view_module": "anywidget",
      "_view_module_version": "~0.9.*",
      "_view_name": "AnyView",
      "config": {
       "coordinationSpace": {
        "additionalObsSets": {
         "A": null
        },
        "dataset": {
         "A": "A",
         "init_A_image_0": "init_A_image_0",
         "init_A_obsSegmentations_0": "init_A_obsSegmentations_0"
        },
        "featureHighlight": {
         "A": null
        },
        "featureSelection": {
         "A": null
        },
        "featureType": {
         "A": "gene"
        },
        "featureValueColormap": {
         "A": "plasma"
        },
        "featureValueColormapRange": {
         "A": [
          0,
          1
         ]
        },
        "featureValueType": {
         "A": "expression"
        },
        "fileUid": {
         "A": null,
         "init_A_image_0": null,
         "init_A_obsSegmentations_0": null
        },
        "imageChannel": {
         "A": null,
         "init_A_image_0": "__dummy__",
         "init_A_image_1": "__dummy__",
         "init_A_image_2": "__dummy__"
        },
        "imageLayer": {
         "A": null,
         "init_A_image_0": "__dummy__"
        },
        "legendVisible": {
         "A": true
        },
        "metaCoordinationScopes": {
         "init_A_image_0": {
          "imageLayer": [
           "init_A_image_0"
          ],
          "spatialImageLayer": "init_A_image_0",
          "spatialTargetT": "init_A_image_0",
          "spatialTargetZ": "init_A_image_0"
         },
         "init_A_obsSegmentations_0": {
          "segmentationLayer": [
           "init_A_obsSegmentations_0"
          ],
          "spatialSegmentationLayer": "init_A_obsSegmentations_0",
          "spatialTargetT": "init_A_obsSegmentations_0",
          "spatialTargetZ": "init_A_obsSegmentations_0"
         }
        },
        "metaCoordinationScopesBy": {
         "init_A_image_0": {
          "imageChannel": {
           "spatialChannelColor": {
            "init_A_image_0": "init_A_image_0",
            "init_A_image_1": "init_A_image_1",
            "init_A_image_2": "init_A_image_2"
           },
           "spatialChannelOpacity": {
            "init_A_image_0": "init_A_image_0",
            "init_A_image_1": "init_A_image_1",
            "init_A_image_2": "init_A_image_2"
           },
           "spatialChannelVisible": {
            "init_A_image_0": "init_A_image_0",
            "init_A_image_1": "init_A_image_1",
            "init_A_image_2": "init_A_image_2"
           },
           "spatialChannelWindow": {
            "init_A_image_0": "init_A_image_0",
            "init_A_image_1": "init_A_image_1",
            "init_A_image_2": "init_A_image_2"
           },
           "spatialTargetC": {
            "init_A_image_0": "init_A_image_0",
            "init_A_image_1": "init_A_image_1",
            "init_A_image_2": "init_A_image_2"
           }
          },
          "imageLayer": {
           "fileUid": {
            "init_A_image_0": "init_A_image_0"
           },
           "imageChannel": {
            "init_A_image_0": [
             "init_A_image_0",
             "init_A_image_1",
             "init_A_image_2"
            ]
           },
           "photometricInterpretation": {
            "init_A_image_0": "init_A_image_0"
           },
           "spatialLayerOpacity": {
            "init_A_image_0": "init_A_image_0"
           },
           "spatialLayerVisible": {
            "init_A_image_0": "init_A_image_0"
           },
           "spatialTargetResolution": {
            "init_A_image_0": "init_A_image_0"
           },
           "volumetricRenderingAlgorithm": {
            "init_A_image_0": "init_A_image_0"
           }
          }
         },
         "init_A_obsSegmentations_0": {
          "segmentationChannel": {
           "obsColorEncoding": {
            "init_A_obsSegmentations_0": "init_A_obsSegmentations_0",
            "init_A_obsSegmentations_1": "init_A_obsSegmentations_1",
            "init_A_obsSegmentations_2": "init_A_obsSegmentations_2",
            "init_A_obsSegmentations_3": "init_A_obsSegmentations_3",
            "init_A_obsSegmentations_4": "init_A_obsSegmentations_4"
           },
           "obsHighlight": {
            "init_A_obsSegmentations_0": "init_A_obsSegmentations_0",
            "init_A_obsSegmentations_1": "init_A_obsSegmentations_1",
            "init_A_obsSegmentations_2": "init_A_obsSegmentations_2",
            "init_A_obsSegmentations_3": "init_A_obsSegmentations_3",
            "init_A_obsSegmentations_4": "init_A_obsSegmentations_4"
           },
           "obsType": {
            "init_A_obsSegmentations_0": "init_A_obsSegmentations_0",
            "init_A_obsSegmentations_1": "init_A_obsSegmentations_1",
            "init_A_obsSegmentations_2": "init_A_obsSegmentations_2",
            "init_A_obsSegmentations_3": "init_A_obsSegmentations_3",
            "init_A_obsSegmentations_4": "init_A_obsSegmentations_4"
           },
           "spatialChannelColor": {
            "init_A_obsSegmentations_0": "init_A_obsSegmentations_0",
            "init_A_obsSegmentations_1": "init_A_obsSegmentations_1",
            "init_A_obsSegmentations_2": "init_A_obsSegmentations_2",
            "init_A_obsSegmentations_3": "init_A_obsSegmentations_3",
            "init_A_obsSegmentations_4": "init_A_obsSegmentations_4"
           },
           "spatialChannelOpacity": {
            "init_A_obsSegmentations_0": "init_A_obsSegmentations_0",
            "init_A_obsSegmentations_1": "init_A_obsSegmentations_1",
            "init_A_obsSegmentations_2": "init_A_obsSegmentations_2",
            "init_A_obsSegmentations_3": "init_A_obsSegmentations_3",
            "init_A_obsSegmentations_4": "init_A_obsSegmentations_4"
           },
           "spatialChannelVisible": {
            "init_A_obsSegmentations_0": "init_A_obsSegmentations_0",
            "init_A_obsSegmentations_1": "init_A_obsSegmentations_1",
            "init_A_obsSegmentations_2": "init_A_obsSegmentations_2",
            "init_A_obsSegmentations_3": "init_A_obsSegmentations_3",
            "init_A_obsSegmentations_4": "init_A_obsSegmentations_4"
           },
           "spatialChannelWindow": {
            "init_A_obsSegmentations_0": "init_A_obsSegmentations_0",
            "init_A_obsSegmentations_1": "init_A_obsSegmentations_1",
            "init_A_obsSegmentations_2": "init_A_obsSegmentations_2",
            "init_A_obsSegmentations_3": "init_A_obsSegmentations_3",
            "init_A_obsSegmentations_4": "init_A_obsSegmentations_4"
           },
           "spatialSegmentationFilled": {
            "init_A_obsSegmentations_0": "init_A_obsSegmentations_0",
            "init_A_obsSegmentations_1": "init_A_obsSegmentations_1",
            "init_A_obsSegmentations_2": "init_A_obsSegmentations_2",
            "init_A_obsSegmentations_3": "init_A_obsSegmentations_3",
            "init_A_obsSegmentations_4": "init_A_obsSegmentations_4"
           },
           "spatialSegmentationStrokeWidth": {
            "init_A_obsSegmentations_0": "init_A_obsSegmentations_0",
            "init_A_obsSegmentations_1": "init_A_obsSegmentations_1",
            "init_A_obsSegmentations_2": "init_A_obsSegmentations_2",
            "init_A_obsSegmentations_3": "init_A_obsSegmentations_3",
            "init_A_obsSegmentations_4": "init_A_obsSegmentations_4"
           },
           "spatialTargetC": {
            "init_A_obsSegmentations_0": "init_A_obsSegmentations_0",
            "init_A_obsSegmentations_1": "init_A_obsSegmentations_1",
            "init_A_obsSegmentations_2": "init_A_obsSegmentations_2",
            "init_A_obsSegmentations_3": "init_A_obsSegmentations_3",
            "init_A_obsSegmentations_4": "init_A_obsSegmentations_4"
           }
          },
          "segmentationLayer": {
           "fileUid": {
            "init_A_obsSegmentations_0": "init_A_obsSegmentations_0"
           },
           "segmentationChannel": {
            "init_A_obsSegmentations_0": [
             "init_A_obsSegmentations_0",
             "init_A_obsSegmentations_1",
             "init_A_obsSegmentations_2",
             "init_A_obsSegmentations_3",
             "init_A_obsSegmentations_4"
            ]
           },
           "spatialLayerOpacity": {
            "init_A_obsSegmentations_0": "init_A_obsSegmentations_0"
           },
           "spatialLayerVisible": {
            "init_A_obsSegmentations_0": "init_A_obsSegmentations_0"
           }
          }
         }
        },
        "moleculeHighlight": {
         "A": null
        },
        "obsColorEncoding": {
         "A": "cellSetSelection",
         "init_A_obsSegmentations_0": "spatialChannelColor",
         "init_A_obsSegmentations_1": "spatialChannelColor",
         "init_A_obsSegmentations_2": "spatialChannelColor",
         "init_A_obsSegmentations_3": "spatialChannelColor",
         "init_A_obsSegmentations_4": "spatialChannelColor"
        },
        "obsFilter": {
         "A": null
        },
        "obsHighlight": {
         "A": null,
         "init_A_obsSegmentations_0": null,
         "init_A_obsSegmentations_1": null,
         "init_A_obsSegmentations_2": null,
         "init_A_obsSegmentations_3": null,
         "init_A_obsSegmentations_4": null
        },
        "obsLabelsType": {
         "A": null
        },
        "obsSetColor": {
         "A": null
        },
        "obsSetHighlight": {
         "A": null
        },
        "obsSetSelection": {
         "A": null
        },
        "obsType": {
         "A": "cell",
         "init_A_obsSegmentations_0": "Channel 0",
         "init_A_obsSegmentations_1": "Channel 1",
         "init_A_obsSegmentations_2": "Channel 2",
         "init_A_obsSegmentations_3": "Channel 3",
         "init_A_obsSegmentations_4": "Channel 4"
        },
        "photometricInterpretation": {
         "A": null,
         "init_A_image_0": "RGB"
        },
        "pixelHighlight": {
         "A": null
        },
        "pointLayer": {
         "A": null
        },
        "segmentationChannel": {
         "A": null,
         "init_A_obsSegmentations_0": "__dummy__",
         "init_A_obsSegmentations_1": "__dummy__",
         "init_A_obsSegmentations_2": "__dummy__",
         "init_A_obsSegmentations_3": "__dummy__",
         "init_A_obsSegmentations_4": "__dummy__"
        },
        "segmentationLayer": {
         "A": null,
         "init_A_obsSegmentations_0": "__dummy__"
        },
        "spatialAxisFixed": {
         "A": false
        },
        "spatialChannelColor": {
         "A": [
          255,
          255,
          255
         ],
         "init_A_image_0": [
          255,
          255,
          255
         ],
         "init_A_image_1": [
          255,
          255,
          255
         ],
         "init_A_image_2": [
          255,
          255,
          255
         ],
         "init_A_obsSegmentations_0": [
          255,
          0,
          0
         ],
         "init_A_obsSegmentations_1": [
          0,
          255,
          0
         ],
         "init_A_obsSegmentations_2": [
          255,
          0,
          255
         ],
         "init_A_obsSegmentations_3": [
          255,
          255,
          0
         ],
         "init_A_obsSegmentations_4": [
          0,
          0,
          0
         ]
        },
        "spatialChannelLabelSize": {
         "A": 14
        },
        "spatialChannelLabelsOrientation": {
         "A": "vertical"
        },
        "spatialChannelLabelsVisible": {
         "A": true
        },
        "spatialChannelOpacity": {
         "A": 1,
         "init_A_image_0": 1,
         "init_A_image_1": 1,
         "init_A_image_2": 1,
         "init_A_obsSegmentations_0": 1,
         "init_A_obsSegmentations_1": 1,
         "init_A_obsSegmentations_2": 1,
         "init_A_obsSegmentations_3": 1,
         "init_A_obsSegmentations_4": 1
        },
        "spatialChannelVisible": {
         "A": true,
         "init_A_image_0": true,
         "init_A_image_1": true,
         "init_A_image_2": true,
         "init_A_obsSegmentations_0": true,
         "init_A_obsSegmentations_1": false,
         "init_A_obsSegmentations_2": false,
         "init_A_obsSegmentations_3": false,
         "init_A_obsSegmentations_4": true
        },
        "spatialChannelWindow": {
         "A": null,
         "init_A_image_0": null,
         "init_A_image_1": null,
         "init_A_image_2": null,
         "init_A_obsSegmentations_0": null,
         "init_A_obsSegmentations_1": null,
         "init_A_obsSegmentations_2": null,
         "init_A_obsSegmentations_3": null,
         "init_A_obsSegmentations_4": null
        },
        "spatialImageLayer": {
         "init_A_image_0": [
          {
           "channels": [
            {
             "color": [
              255,
              0,
              0
             ],
             "selection": {
              "c": 0,
              "t": 0,
              "z": 0
             },
             "slider": [
              0,
              255
             ],
             "visible": true
            },
            {
             "color": [
              0,
              255,
              0
             ],
             "selection": {
              "c": 1,
              "t": 0,
              "z": 0
             },
             "slider": [
              0,
              255
             ],
             "visible": true
            },
            {
             "color": [
              0,
              0,
              255
             ],
             "selection": {
              "c": 2,
              "t": 0,
              "z": 0
             },
             "slider": [
              0,
              255
             ],
             "visible": true
            }
           ],
           "colormap": null,
           "domainType": "Min/Max",
           "index": 0,
           "modelMatrix": [
            1,
            0,
            0,
            0,
            0,
            1,
            0,
            0,
            0,
            0,
            1,
            0,
            0,
            0,
            0,
            1
           ],
           "opacity": 1,
           "renderingMode": "Additive",
           "transparentColor": null,
           "type": "raster",
           "use3d": false,
           "visible": true
          }
         ]
        },
        "spatialLayerColor": {
         "A": null
        },
        "spatialLayerColormap": {
         "A": null
        },
        "spatialLayerModelMatrix": {
         "A": null
        },
        "spatialLayerOpacity": {
         "A": 1,
         "init_A_image_0": 1,
         "init_A_obsSegmentations_0": 1
        },
        "spatialLayerTransparentColor": {
         "A": null
        },
        "spatialLayerVisible": {
         "A": true,
         "init_A_image_0": true,
         "init_A_obsSegmentations_0": true
        },
        "spatialNeighborhoodLayer": {
         "A": null
        },
        "spatialOrbitAxis": {
         "A": "Y"
        },
        "spatialPointLayer": {
         "A": null
        },
        "spatialRenderingMode": {
         "A": "2D"
        },
        "spatialRotation": {
         "A": 0
        },
        "spatialRotationOrbit": {
         "A": 0
        },
        "spatialRotationX": {
         "A": 0
        },
        "spatialRotationY": {
         "A": 0
        },
        "spatialRotationZ": {
         "A": 0
        },
        "spatialSegmentationFilled": {
         "A": true,
         "init_A_obsSegmentations_0": true,
         "init_A_obsSegmentations_1": true,
         "init_A_obsSegmentations_2": true,
         "init_A_obsSegmentations_3": true,
         "init_A_obsSegmentations_4": true
        },
        "spatialSegmentationLayer": {
         "init_A_obsSegmentations_0": [
          {
           "channels": [
            {
             "color": [
              0,
              0,
              255
             ],
             "selection": {
              "c": 0,
              "t": 0,
              "z": 0
             },
             "slider": [
              1,
              1
             ],
             "visible": true
            },
            {
             "color": [
              0,
              255,
              0
             ],
             "selection": {
              "c": 1,
              "t": 0,
              "z": 0
             },
             "slider": [
              1,
              41
             ],
             "visible": true
            },
            {
             "color": [
              255,
              0,
              255
             ],
             "selection": {
              "c": 2,
              "t": 0,
              "z": 0
             },
             "slider": [
              1,
              19
             ],
             "visible": true
            },
            {
             "color": [
              255,
              255,
              0
             ],
             "selection": {
              "c": 3,
              "t": 0,
              "z": 0
             },
             "slider": [
              5,
              3318
             ],
             "visible": true
            }
           ],
           "colormap": null,
           "domainType": "Min/Max",
           "index": 0,
           "modelMatrix": [
            1,
            0,
            0,
            0,
            0,
            1,
            0,
            0,
            0,
            0,
            1,
            0,
            0,
            0,
            0,
            1
           ],
           "opacity": 1,
           "renderingMode": "Additive",
           "transparentColor": null,
           "type": "bitmask",
           "use3d": false,
           "visible": true
          }
         ]
        },
        "spatialSegmentationStrokeWidth": {
         "A": 1,
         "init_A_obsSegmentations_0": 1,
         "init_A_obsSegmentations_1": 1,
         "init_A_obsSegmentations_2": 1,
         "init_A_obsSegmentations_3": 1,
         "init_A_obsSegmentations_4": 1
        },
        "spatialSliceX": {
         "A": null
        },
        "spatialSliceY": {
         "A": null
        },
        "spatialSliceZ": {
         "A": null
        },
        "spatialSpotFilled": {
         "A": true
        },
        "spatialSpotRadius": {
         "A": 25
        },
        "spatialSpotStrokeWidth": {
         "A": 1
        },
        "spatialTargetC": {
         "A": null,
         "init_A_image_0": 0,
         "init_A_image_1": 1,
         "init_A_image_2": 2,
         "init_A_obsSegmentations_0": 0,
         "init_A_obsSegmentations_1": 1,
         "init_A_obsSegmentations_2": 2,
         "init_A_obsSegmentations_3": 3,
         "init_A_obsSegmentations_4": 4
        },
        "spatialTargetResolution": {
         "A": 0,
         "init_A_image_0": null
        },
        "spatialTargetT": {
         "A": null,
         "init_A_image_0": 0,
         "init_A_obsSegmentations_0": 0
        },
        "spatialTargetX": {
         "A": 22069.348625952447
        },
        "spatialTargetY": {
         "A": -26851.066191111484
        },
        "spatialTargetZ": {
         "A": null,
         "B": null,
         "init_A_image_0": 0,
         "init_A_obsSegmentations_0": 0
        },
        "spatialZoom": {
         "A": -4.912917349031568
        },
        "spotLayer": {
         "A": null
        },
        "tooltipCrosshairsVisible": {
         "A": true
        },
        "tooltipsVisible": {
         "A": true
        },
        "volumetricRenderingAlgorithm": {
         "A": "additive",
         "init_A_image_0": "maximumIntensityProjection"
        }
       },
       "datasets": [
        {
         "files": [
          {
           "fileType": "image.ome-tiff",
           "options": {
            "offsetsUrl": "https://storage.googleapis.com/vitessce-demo-data/kpmp-f2f-march-2023/S-1905-017737/S-1905-017737_PAS_2of2_bf.offsets.json"
           },
           "url": "https://storage.googleapis.com/vitessce-demo-data/kpmp-f2f-march-2023/S-1905-017737/S-1905-017737_PAS_2of2_bf.ome.tif"
          },
          {
           "fileType": "obsSegmentations.ome-tiff",
           "options": {
            "obsTypesFromChannelNames": true,
            "offsetsUrl": "https://storage.googleapis.com/vitessce-demo-data/kpmp-f2f-march-2023/S-1905-017737/S-1905-017737_PAS_2of2.offsets.json"
           },
           "url": "https://storage.googleapis.com/vitessce-demo-data/kpmp-f2f-march-2023/S-1905-017737/S-1905-017737_PAS_2of2.ome.tif"
          }
         ],
         "name": "Spraggins",
         "uid": "A"
        }
       ],
       "description": "",
       "initStrategy": "auto",
       "layout": [
        {
         "component": "spatialBeta",
         "coordinationScopes": {
          "additionalObsSets": "A",
          "dataset": "A",
          "featureHighlight": "A",
          "featureSelection": "A",
          "featureType": "A",
          "featureValueColormap": "A",
          "featureValueColormapRange": "A",
          "featureValueType": "A",
          "fileUid": "A",
          "imageChannel": "A",
          "imageLayer": "A",
          "legendVisible": "A",
          "metaCoordinationScopes": [
           "init_A_image_0",
           "init_A_obsSegmentations_0",
           "init_A_image_0"
          ],
          "metaCoordinationScopesBy": [
           "init_A_image_0",
           "init_A_obsSegmentations_0",
           "init_A_image_0"
          ],
          "moleculeHighlight": "A",
          "obsColorEncoding": "A",
          "obsFilter": "A",
          "obsHighlight": "A",
          "obsLabelsType": "A",
          "obsSetColor": "A",
          "obsSetHighlight": "A",
          "obsSetSelection": "A",
          "obsType": "A",
          "pixelHighlight": "A",
          "pointLayer": "A",
          "segmentationChannel": "A",
          "segmentationLayer": "A",
          "spatialAxisFixed": "A",
          "spatialChannelColor": "A",
          "spatialChannelLabelSize": "A",
          "spatialChannelLabelsOrientation": "A",
          "spatialChannelLabelsVisible": "A",
          "spatialChannelOpacity": "A",
          "spatialChannelVisible": "A",
          "spatialChannelWindow": "A",
          "spatialLayerColor": "A",
          "spatialLayerColormap": "A",
          "spatialLayerModelMatrix": "A",
          "spatialLayerOpacity": "A",
          "spatialLayerTransparentColor": "A",
          "spatialLayerVisible": "A",
          "spatialNeighborhoodLayer": "A",
          "spatialOrbitAxis": "A",
          "spatialPointLayer": "A",
          "spatialRenderingMode": "A",
          "spatialRotation": "A",
          "spatialRotationOrbit": "A",
          "spatialRotationX": "A",
          "spatialRotationY": "A",
          "spatialRotationZ": "A",
          "spatialSegmentationFilled": "A",
          "spatialSegmentationStrokeWidth": "A",
          "spatialSliceX": "A",
          "spatialSliceY": "A",
          "spatialSliceZ": "A",
          "spatialSpotFilled": "A",
          "spatialSpotRadius": "A",
          "spatialSpotStrokeWidth": "A",
          "spatialTargetC": "A",
          "spatialTargetResolution": "A",
          "spatialTargetT": "A",
          "spatialTargetX": "A",
          "spatialTargetY": "A",
          "spatialTargetZ": "A",
          "spatialZoom": "A",
          "spotLayer": "A",
          "tooltipCrosshairsVisible": "A",
          "tooltipsVisible": "A",
          "volumetricRenderingAlgorithm": "A"
         },
         "h": 12,
         "uid": "A",
         "w": 6,
         "x": 0,
         "y": 0
        },
        {
         "component": "layerControllerBeta",
         "coordinationScopes": {
          "dataset": "A",
          "featureSelection": "A",
          "featureType": "A",
          "featureValueColormap": "A",
          "featureValueColormapRange": "A",
          "featureValueType": "A",
          "fileUid": "A",
          "imageChannel": "A",
          "imageLayer": "A",
          "legendVisible": "A",
          "metaCoordinationScopes": [
           "init_A_image_0",
           "init_A_obsSegmentations_0",
           "init_A_image_0"
          ],
          "metaCoordinationScopesBy": [
           "init_A_image_0",
           "init_A_obsSegmentations_0",
           "init_A_image_0"
          ],
          "obsColorEncoding": "A",
          "obsType": "A",
          "photometricInterpretation": "A",
          "pointLayer": "A",
          "segmentationChannel": "A",
          "segmentationLayer": "A",
          "spatialChannelColor": "A",
          "spatialChannelLabelSize": "A",
          "spatialChannelLabelsOrientation": "A",
          "spatialChannelLabelsVisible": "A",
          "spatialChannelOpacity": "A",
          "spatialChannelVisible": "A",
          "spatialChannelWindow": "A",
          "spatialLayerColor": "A",
          "spatialLayerColormap": "A",
          "spatialLayerModelMatrix": "A",
          "spatialLayerOpacity": "A",
          "spatialLayerTransparentColor": "A",
          "spatialLayerVisible": "A",
          "spatialNeighborhoodLayer": "A",
          "spatialOrbitAxis": "A",
          "spatialPointLayer": "A",
          "spatialRenderingMode": "A",
          "spatialRotationOrbit": "A",
          "spatialRotationX": "A",
          "spatialRotationY": "A",
          "spatialRotationZ": "A",
          "spatialSegmentationFilled": "A",
          "spatialSegmentationStrokeWidth": "A",
          "spatialSliceX": "A",
          "spatialSliceY": "A",
          "spatialSliceZ": "A",
          "spatialSpotFilled": "A",
          "spatialSpotRadius": "A",
          "spatialSpotStrokeWidth": "A",
          "spatialTargetC": "A",
          "spatialTargetResolution": "A",
          "spatialTargetT": "A",
          "spatialTargetX": "A",
          "spatialTargetY": "A",
          "spatialTargetZ": "A",
          "spatialZoom": "A",
          "spotLayer": "A",
          "tooltipCrosshairsVisible": "A",
          "tooltipsVisible": "A",
          "volumetricRenderingAlgorithm": "A"
         },
         "h": 12,
         "uid": "B",
         "w": 6,
         "x": 6,
         "y": 0
        }
       ],
       "name": "",
       "uid": "new_config_0.9674035035199323",
       "version": "1.0.17"
      },
      "custom_js_url": "",
      "has_host_name": false,
      "height": 600,
      "invoke_timeout": 30000,
      "js_dev_mode": false,
      "js_package_version": "3.5.4",
      "layout": "IPY_MODEL_800201ad9e7942fbbb6b0a195ef6ec6a",
      "plugin_esm": [],
      "proxy": false,
      "remount_on_uid_change": false,
      "store_urls": [],
      "theme": "auto",
      "uid": "68fc"
     }
    }
   }
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}