vitessce-python
vitessce-python copied to clipboard
vitessce
Ensure widget works in Jupyter running in VSCode
Version: 1.84.1 (user setup)
Commit: 2b35e1e6d88f1ce073683991d1eff5284a32690f
Date: 2023-11-06T12:35:59.022Z
Electron: 25.9.2
ElectronBuildId: 24603566
Chromium: 114.0.5735.289
Node.js: 18.15.0
V8: 11.4.183.29-electron.0
OS: Windows_NT x64 10.0.22621
Jypyter extension v2023.10.1003070148
I’m having issues when trying to render a vitessce widget in VSCode Jupyter notebook (connected via jupyter-ssh to a remote server). The notebook is being rendered on the remote server and the data also exists on the remote server itself. It works ok if I try to load a dataset via some public url but fails when I try to load dataset that’s local to the remote server (data is in same dir as the jupyter notebook).
Screenshot:
I have also attached the config output (vw.config) below.
I tried rendering via vc.widget(proxy=True) as well as vc.display(proxy=True, host_name=”http://localhost:8888/”) but get same results.
Any help is much appreciated.
Thank you!
{'version': '1.0.16',
'name': 'Test',
'description': 'Test',
'datasets': [{'uid': 'A',
'name': 'Test',
'files': [{'fileType': 'image.raster.json',
'options': {'schemaVersion': '0.0.2',
'usePhysicalSizeScaling': True,
'renderLayers': ['PAS'],
'images': [{'name': 'PAS',
'url': 'proxy/8007/A/0/0b70c8ab-2f90-47e1-adda-3776b410084e.ome.tif',
'type': 'ome-tiff',
'metadata': {'isBitmask': False,
'omeTiffOffsetsUrl': 'proxy/8007/A/0/437a0042-aa85-4792-b59a-de7998edddd6.offsets.json'}}]},
'url': 'vscode-webview://0lbo7mbqug74eiaevau3ll0q0ueug8pu9b29i2shoktoer3mbe2dhttps://vscode-remote%2Bssh-002dremote-002bross-002ecns-002eiu-002eedu.vscode-resource.vscode-cdn.net/u/yashjain/.vscode-server/extensions/ms-toolsai.jupyter-2023.11.1003402403-linux-x64/temp/scripts/23355b76d2931ac8c048f849063850a7685ba3f1a2ddd237cedf737b9db89c4d/jupyter/undefined'},
{'fileType': 'obsSegmentations.raster.json',
'options': {'schemaVersion': '0.0.2',
'usePhysicalSizeScaling': True,
'renderLayers': ['PAS'],
'images': [{'name': 'PAS',
'url': 'proxy/8007/A/0/0b70c8ab-2f90-47e1-adda-3776b410084e.ome.tif',
'type': 'ome-tiff',
'metadata': {'isBitmask': False,
'omeTiffOffsetsUrl': 'proxy/8007/A/0/437a0042-aa85-4792-b59a-de7998edddd6.offsets.json'}}]},
'url': 'vscode-webview://0lbo7mbqug74eiaevau3ll0q0ueug8pu9b29i2shoktoer3mbe2dhttps://vscode-remote%2Bssh-002dremote-002bross-002ecns-002eiu-002eedu.vscode-resource.vscode-cdn.net/u/yashjain/.vscode-server/extensions/ms-toolsai.jupyter-2023.11.1003402403-linux-x64/temp/scripts/23355b76d2931ac8c048f849063850a7685ba3f1a2ddd237cedf737b9db89c4d/jupyter/undefined',
'coordinationValues': {'obsType': 'cell'}}]}],
'coordinationSpace': {'dataset': {'A': 'A'},
'obsType': {'A': 'cell'},
'featureType': {'A': 'gene'},
'featureValueType': {'A': 'expression'},
'obsLabelsType': {'A': None},
'spatialZoom': {'A': None},
'spatialRotation': {'A': 0},
'spatialTargetX': {'A': None},
'spatialTargetY': {'A': None},
'spatialTargetZ': {'A': None, 'B': None},
'spatialRotationX': {'A': 0},
'spatialRotationY': {'A': 0},
'spatialRotationZ': {'A': 0},
'spatialRotationOrbit': {'A': 0},
'spatialOrbitAxis': {'A': 'Y'},
'spatialAxisFixed': {'A': False},
'spatialImageLayer': {'A': None},
'spatialSegmentationLayer': {'A': None},
'spatialNeighborhoodLayer': {'A': None},
'spatialPointLayer': {'A': None},
'obsFilter': {'A': None},
'obsHighlight': {'A': None},
'obsSetSelection': {'A': None},
'obsSetHighlight': {'A': None},
'obsSetColor': {'A': None},
'obsColorEncoding': {'A': 'cellSetSelection'},
'featureHighlight': {'A': None},
'featureSelection': {'A': None},
'tooltipsVisible': {'A': True},
'featureValueColormap': {'A': 'plasma'},
'featureValueColormapRange': {'A': [0, 1]},
'additionalObsSets': {'A': None},
'moleculeHighlight': {'A': None}},
'layout': [{'component': 'spatial',
'x': 0,
'y': 0,
'w': 6,
'h': 12,
'coordinationScopes': {'dataset': 'A',
'obsType': 'A',
'featureType': 'A',
'featureValueType': 'A',
'obsLabelsType': 'A',
'spatialZoom': 'A',
'spatialRotation': 'A',
'spatialTargetX': 'A',
'spatialTargetY': 'A',
'spatialTargetZ': 'A',
'spatialRotationX': 'A',
'spatialRotationY': 'A',
'spatialRotationZ': 'A',
'spatialRotationOrbit': 'A',
'spatialOrbitAxis': 'A',
'spatialAxisFixed': 'A',
'spatialImageLayer': 'A',
'spatialSegmentationLayer': 'A',
'spatialNeighborhoodLayer': 'A',
'spatialPointLayer': 'A',
'obsFilter': 'A',
'obsHighlight': 'A',
'obsSetSelection': 'A',
'obsSetHighlight': 'A',
'obsSetColor': 'A',
'obsColorEncoding': 'A',
'featureHighlight': 'A',
'featureSelection': 'A',
'tooltipsVisible': 'A',
'featureValueColormap': 'A',
'featureValueColormapRange': 'A',
'additionalObsSets': 'A',
'moleculeHighlight': 'A'},
'uid': 'A'},
{'component': 'status',
'x': 6,
'y': 6,
'w': 6,
'h': 6,
'coordinationScopes': {'dataset': 'A',
'obsHighlight': 'A',
'obsSetHighlight': 'A',
'featureHighlight': 'A',
'moleculeHighlight': 'A'},
'uid': 'B'},
{'component': 'layerController',
'props': {'disableChannelsIfRgbDetected': True},
'x': 6,
'y': 0,
'w': 6,
'h': 6,
'coordinationScopes': {'dataset': 'A',
'obsType': 'A',
'featureType': 'A',
'featureValueType': 'A',
'spatialZoom': 'A',
'spatialTargetX': 'A',
'spatialTargetY': 'A',
'spatialTargetZ': 'A',
'spatialRotationX': 'A',
'spatialRotationY': 'A',
'spatialRotationZ': 'A',
'spatialRotationOrbit': 'A',
'spatialOrbitAxis': 'A',
'spatialImageLayer': 'A',
'spatialSegmentationLayer': 'A',
'spatialNeighborhoodLayer': 'A',
'spatialPointLayer': 'A'},
'uid': 'C'}],
'initStrategy': 'auto',
'uid': 'A'}
Hi Yash, Are you able to access the Jupyter notebook from a web browser (in other words, is it a VSCode-specific issue)?
Hi @keller-mark , looks like this is not vscode specific. I just downloaded the notebook and the data to my local system (Windows) and get the same issue. Maybe the issue is with my code? I'm fairly new to using Vitessce. I have reproduced my python code below as a minimal example:
img_path = "step_2_ome_tiff/Region_D26511_mask.ome.tif"
csv_path = "step_2_ome_tiff/cell_sets.csv"
region_id = "id1"
options = None
vc = VitessceConfig(schema_version="1.0.15", name='Histogram Test', description='Test code')
dataset = vc.add_dataset(name='Cell segmentations').add_object(
OmeTiffWrapper(img_path=img_path, is_bitmask=True,
name=f"Region {region_id} Visualization")
)#.add_object(CsvWrapper(csv_path=csv_path, data_type=DataType.OBS_SETS.value, options=options))
spatial = vc.add_view(cm.SPATIAL, dataset=dataset)
status = vc.add_view(cm.STATUS, dataset=dataset)
lc = vc.add_view(cm.LAYER_CONTROLLER, dataset=dataset).set_props(disableChannelsIfRgbDetected=True)
vc.layout(spatial | (lc / status));
vw = vc.widget(proxy=True)
vw
Hi @keller-mark , I did a bit more debugging and to make sure its not my code that's an issue, I tried recreating the code notebook (in VSCode Jupyter notebook on a remote server) at https://github.com/vitessce/vitessce-python/blob/main/docs/notebooks/widget_imaging_segmentation.ipynb
I found that when I used the original code, it worked fine. But, when I downloaded the two files and changed img_url to img_path, then it stopped loading the image files (and I get the error I showed in the previous image). The only changes I made are in the following two lines (modified code below):
image_wrappers=[
OmeTiffWrapper(img_path='exemplar-001.pyramid.ome.tif', name='Image'),
OmeTiffWrapper(img_path='cellMask.pyramid.ome.tif', name='Mask', is_bitmask=True),
]
I downloaded the two ome-tif files in the same directory as the Jupyter notebook.
Coul you try accessing the notebook via a plain web browser (not VSCode)? (I am not confident that the widget works with VSCode at all with local files as we have not tested this, which was the reason for making this github issue initially)
An additional debugging step would be to print the working directory to make sure it looks as expected
!pwd
It works when I access the notebook via web browser and use vc.display(proxy=True, host_name="http://localhost:8089"). For some reason, vc.widget(proxy=True) doesn't work.
While the image was able to load, I still got this JSON Source Error in the status view (screenshot below). Not sure why that is.
Are there any plans to look into making this work directly within VSCode (loading via urls works but local paths don't work)? It would make development/debugging a lot faster/easier.
I am running into the same issue. Just wanted to clarify the solution, if we want to use VS Code on a remote server, the only way that it will work is if files are served through URL and if you access the notebook through a web browser rather than natively in VS Code? Thanks!
