questions about the tutorials (spatial single cell)

[d5423197]

I followed the code from (https://github.com/vitessce/vitessce-python-tutorial/blob/main/tutorials/spatial_single_cell/02_configure_visualization.ipynb)

but the H&E image failed to display.

I'm interested in learning more about how vitessce-python works under the hood — especially how it constructs the config and interacts with the frontend. Are there any resources or guidelines you’d recommend for getting started with understanding the internals?

@keller-mark

[keller-mark]

Hi @d5423197 ,
The VitessceConfig class internally represents the configuration very similar to the JSON representation documented here https://vitessce.io/docs/view-config-json/ . To view the resulting JSON, you can run vc.to_dict(base_url="") . While the widget is running, the configuration property of the widget will automatically update. You can view the current state by checking vw.config in a subsequent jupyter cell.

The widget is implemented using https://anywidget.dev/ to wrap the Vitessce React component https://vitessce.io/docs/js-react-vitessce/ which is available from the vitessce JavaScript package on NPM.

To learn more about the vitessce JavaScript internals, you can check the other documentation on https://vitessce.io/docs/ or the LLM-generated wiki at https://deepwiki.com/vitessce/vitessce

[d5423197]

@keller-mark Thanks for your reply. Could you also help me debug the problem I described above. If I remove the config for spatial_image_layer_value and spatial_segmentation_layer_value. The H&E image will show up correctly. I think there are some problems in spatial_image_layer_value. BTW, I am using version: 3.4.2.

spatial_views = [
    spatial_colored_by_cluster,
    spatial_colored_by_expression,
    layer_controller,
]
all_views = [
    *spatial_views,
    spot_set_manager,
    gene_list,
    heatmap
]
# vc.link_views(
#     all_views,
#     [ct.OBS_TYPE],
#     ["spot"]
# )

spatial_segmentation_layer_value = {
    "radius": 65,
    "stroked": True,
    "visible": True,
    "opacity": 1
}
spatial_image_layer_value = [{
    "type": "raster",
    "index": 0,
    "colormap": None,
    "transparentColor": None,
    "opacity": 1,
    "domainType": "Min/Max",
    "channels": [
        {
          "selection": { "c": 0, "t": 0, "z": 0 },
          "color": [255, 0, 0],
          "visible": True,
          "slider": [0, 255]
        },
        {
          "selection": { "c": 1, "t": 0, "z": 0 },
          "color": [0, 255, 0],
          "visible": True,
          "slider": [0, 255]
        },
        {
          "selection": { "c": 2, "t": 0, "z": 0 },
          "color": [0, 0, 255],
          "visible": True,
          "slider": [0, 255]
        }
    ]
}]
vc.link_views(
    spatial_views,
    [ct.SPATIAL_IMAGE_LAYER, ct.SPATIAL_SEGMENTATION_LAYER],
    # [spatial_image_layer_value, spatial_segmentation_layer_value]
)
# vc.link_views(
#     spatial_views,
#     [ct.SPATIAL_IMAGE_LAYER],
#     [spatial_image_layer_value]
# )
# vc.link_views(
#     spatial_views,
#     [ct.SPATIAL_ZOOM, ct.SPATIAL_TARGET_X, ct.SPATIAL_TARGET_Y],
#     [-2.6, 1000, 1000]
# )
# vc.link_views(
#     [spatial_colored_by_cluster, heatmap, spot_set_manager],
#     [ct.OBS_COLOR_ENCODING],
#     ["cellSetSelection"]
# )
# vc.link_views(
#     [spatial_colored_by_expression, gene_list],
#     [ct.OBS_COLOR_ENCODING, ct.FEATURE_SELECTION],
#     ["cellSetSelection", ["CR2"]]
# )