diff --git a/docs/notebooks/widget_modify_config.ipynb b/docs/notebooks/widget_modify_config.ipynb new file mode 100644 index 0000000..be28802 --- /dev/null +++ b/docs/notebooks/widget_modify_config.ipynb @@ -0,0 +1,1171 @@ +{ + "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 ),\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 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 +}