Two independent spotLayer entries in layerControllerBeta with different obsColorEncoding

[NoeCoursi]

Hi Vitessce team,

First, thank's for this amazing framework.

I'm trying to configure a spatialBeta view with two superimposed spot layers in a single view:

• one colored by gene expression (obsColorEncoding: "geneSelection")
• one colored by cell set membership (obsColorEncoding: "cellSetSelection")

My goal is to have both layers visible simultaneously, each with its own independent entry and slider in the layerControllerBeta.
I've tried several approaches and the closest I got is this config (produced by to_dict()):

{'version': '1.0.18',
 'name': 'Test',
 'description': '',
 'datasets': [{'uid': 'A',
   'name': 'Test',
   'files': [{'fileType': 'anndata.zarr',
     'url': 'https://my/base/url/zarr/test.h5ad.zarr',
     'options': {'obsSpots': {'path': 'obsm/spatial'},
      'obsSets': [{'name': 'CNV', 'path': 'obs/STARCH_clone'}],
      'obsFeatureMatrix': {'path': 'X'}},
     'coordinationValues': {'obsType': 'spot',
      'featureType': 'gene',
      'featureValueType': 'expression'}},
    {'fileType': 'image.ome-zarr',
     'url': 'https://my/base/url/zarr/test.ome.zarr',
     'options': {'coordinateTransformations': [{'type': 'scale',
        'scale': [1.0, 30.322, 30.322]}]}}]}],
 'coordinationSpace': {'dataset': {'A': 'A'},
  'obsColorEncoding': {'A': 'cellSetSelection',
   'init_A_obsSpots_0': 'geneSelection'},
  'spotLayer': {'init_A_obsSpots_0': '__dummy__',
   'init_B_obsSpots_0': '__dummy__'},
  'obsType': {'init_A_obsSpots_0': 'spot',
   'init_B_obsSpots_0': 'spot',
   'A': 'spot'},
  'spatialSpotRadius': {'init_A_obsSpots_0': 200, 'init_B_obsSpots_0': 200},
  'metaCoordinationScopes': {'init_A_obsSpots_0': {'spotLayer': ['init_A_obsSpots_0']},
   'init_B_obsSpots_0': {'spotLayer': ['init_B_obsSpots_0']}},
  'metaCoordinationScopesBy': {'init_A_obsSpots_0': {'spotLayer': {'obsType': {'init_A_obsSpots_0': 'init_A_obsSpots_0'},
     'spatialSpotRadius': {'init_A_obsSpots_0': 'init_A_obsSpots_0'},
     'obsColorEncoding': {'init_A_obsSpots_0': 'init_A_obsSpots_0'}}},
   'init_B_obsSpots_0': {'spotLayer': {'obsType': {'init_B_obsSpots_0': 'init_B_obsSpots_0'},
     'spatialSpotRadius': {'init_B_obsSpots_0': 'init_B_obsSpots_0'},
     'obsColorEncoding': {'init_B_obsSpots_0': 'A'}}}},
  'featureType': {'A': 'gene'},
  'featureValueType': {'A': 'expression'}},
 'layout': [{'component': 'spatialBeta',
   'coordinationScopes': {'dataset': 'A',
    'metaCoordinationScopes': ['init_A_obsSpots_0', 'init_B_obsSpots_0'],
    'metaCoordinationScopesBy': ['init_A_obsSpots_0', 'init_B_obsSpots_0'],
    'obsType': 'A',
    'featureType': 'A',
    'featureValueType': 'A',
    'obsColorEncoding': 'A'},
   'x': 0,
   'y': 0,
   'w': 6,
   'h': 12,
   'coordinationScopesBy': {}},
  {'component': 'layerControllerBeta',
   'coordinationScopes': {'dataset': 'A',
    'metaCoordinationScopes': ['init_A_obsSpots_0', 'init_B_obsSpots_0'],
    'metaCoordinationScopesBy': ['init_A_obsSpots_0', 'init_B_obsSpots_0'],
    'obsType': 'A',
    'featureType': 'A',
    'featureValueType': 'A'},
   'x': 6,
   'y': 0,
   'w': 6,
   'h': 3},
  {'component': 'featureList',
   'coordinationScopes': {'dataset': 'A',
    'obsType': 'A',
    'featureType': 'A',
    'featureValueType': 'A'},
   'x': 6,
   'y': 3,
   'w': 6,
   'h': 3},
  {'component': 'obsSets',
   'coordinationScopes': {'dataset': 'A',
    'obsType': 'A',
    'featureType': 'A',
    'featureValueType': 'A',
    'obsColorEncoding': 'A'},
   'x': 6,
   'y': 6,
   'w': 6,
   'h': 6,
   'coordinationScopesBy': {}}],
 'initStrategy': 'auto'}

But in all cases, the layerControllerBeta only shows a single entry for both layers, and switching the color encoding on that entry affects both layers simultaneously — I can't have them visible at the same time.

My question: is it currently possible to have two independent spotLayer entries in layerControllerBeta, each with a fixed obsColorEncoding? If yes, what would the correct config look like?

For context, I noticed that the old spatial + layerController components handle this naturally for different layer types (e.g. spatialPointLayer + spatialSegmentationLayer), but those don't support obsSpots.

Thanks a lot!

[LiudengZhang]

I believe this is supported — obsColorEncoding is a child coordination type of spotLayer, so two independent scopes should each get their own controls in layerControllerBeta.

The approach would be making two separate link_views_by_dict calls with different scope_prefix values (using get_initial_coordination_scope_prefix from vitessce.utils). One sets obsColorEncoding to 'geneSelection', the other to 'cellSetSelection'. That should produce two distinct coordination scopes tracked independently in the UI.

Since both layers render at the same coordinates, you'd probably want to adjust spatialLayerOpacity or spatialSpotRadius differently for each so they're visually distinguishable.

[NoeCoursi]

Thanks for the quick answer!

I believe I'm already doing exactly this — here are my two link_views_by_dict calls with different scope_prefix values:

vc.link_views_by_dict(
    [spatial_view, layer_ctrl],
    {
        "spotLayer": CL([{
            "obsType": "spot",
            "spatialSpotRadius": 200,
            "obsColorEncoding": "geneSelection",
        }])
    },
    scope_prefix=get_initial_coordination_scope_prefix("A", "obsSpots")
)

vc.link_views_by_dict(
    [spatial_view, layer_ctrl],
    {
        "spotLayer": CL([{
            "obsType": "clone",
            "spatialSpotRadius": 200,
            "obsColorEncoding": "cellSetSelection",
        }])
    },
    scope_prefix=get_initial_coordination_scope_prefix("B", "obsSpots")
)

However, in the Jupyter widget (vitessce-python 3.8.2), the layerControllerBeta still shows only one entry for both layers, and I cannot see both simultaneously.

Am I missing something ?

[keller-mark]

I think what may be happening is this

'metaCoordinationScopes': {'init_A_obsSpots_0': {'spotLayer': ['init_A_obsSpots_0']},
   'init_B_obsSpots_0': {'spotLayer': ['init_B_obsSpots_0']}},

we can see here that there are two lists of spotLayers, each containing only one element (corresponding to the first vc.link_views_by_dict call). I think Vitessce will not merge these together in the expected way.

Instead, can may need to use a single link_views_by_dict call which specifies a single spotLayer array containing both layer definitions:

vc.link_views_by_dict(
    [spatial_view, layer_ctrl],
    {
        "spotLayer": CL([
              {
                "obsType": "spot",
                "spatialSpotRadius": 200,
                "obsColorEncoding": "geneSelection",
                "spatialLayerVisible": True,
                "spatialLayerOpacity": 1.0,
              },
              {
                "obsType": "clone",
                "spatialSpotRadius": 200,
                "obsColorEncoding": "cellSetSelection",
                "spatialLayerVisible": True,
                "spatialLayerOpacity": 1.0,
              }
       ])
    } # omit scope_prefix
)

However, there is a second issue that may also prevent the correct behavior - currently obsType: spot is hard-coded in a few places in the JavaScript code https://github.com/vitessce/vitessce/blob/3195e6d968fdff8cea6015b141eb52415b7b2e3f/packages/file-types/zarr/src/anndata-loaders/ObsSpotsAnndataLoader.js#L29 I will need to make a change to fix this vitessce/vitessce#2440

[NoeCoursi]

Thank you very much! The single link_views_by_dict call with both layers in the same CL() array works perfectly. And thanks for the quick fix !

[NoeCoursi]

Following up on my previous question — I now have three independent layers working (one geneSelection, two cellSetSelection with different obsType). The obsSetSelection scopes are correctly set per layer. However, one of the two cellSetSelection layers always displays grey while the other colors correctly.
I noticed there is no obsSetColor scope initialized in the config. Is obsSetColor needed as a child of spotLayer for proper coloring? If so, what is the correct initial value format?
Here is the current config:

{'version': '1.0.18',
 'name': 'Test',
 'description': '',
 'datasets': [{'uid': 'A',
   'name': 'Test',
   'files': [{'fileType': 'anndata.zarr',
     'url': 'https://my/base/url/zarr/test.h5ad.zarr',
     'options': {'obsSpots': {'path': 'obsm/spatial'},
      'obsFeatureMatrix': {'path': 'X'}},
     'coordinationValues': {'obsType': 'spot',
      'featureType': 'gene',
      'featureValueType': 'expression'}},
    {'fileType': 'anndata.zarr',
     'url': 'https://my/base/url/zarr/test.h5ad.zarr',
     'options': {'obsSpots': {'path': 'obsm/spatial'},
      'obsSets': [{'name': 'CNV', 'path': 'obs/STARCH_clone'}]},
     'coordinationValues': {'obsType': 'cnv'}},
    {'fileType': 'anndata.zarr',
     'url': 'https://my/base/url/zarr/test.h5ad.zarr',
     'options': {'obsSpots': {'path': 'obsm/spatial'},
      'obsSets': [{'name': 'CNV2', 'path': 'obs/STARCH_clone2'}]},
     'coordinationValues': {'obsType': 'cnv2'}},
    {'fileType': 'image.ome-zarr',
     'url': 'https://my/base/url/zarr/test.ome.zarr',
     'options': {'coordinateTransformations': [{'type': 'scale',
        'scale': [1.0, 30.322, 30.322]}]}}]}],
 'coordinationSpace': {'dataset': {'A': 'A'},
  'obsColorEncoding': {'A': 'cellSetSelection',
   'B': 'cellSetSelection',
   'C': 'geneSelection'},
  'spotLayer': {'A': '__dummy__', 'B': '__dummy__', 'C': '__dummy__'},
  'obsType': {'A': 'spot',
   'B': 'cnv',
   'C': 'cnv2',
   'D': 'spot',
   'E': 'cnv',
   'F': 'cnv2'},
  'spatialSpotRadius': {'A': 200, 'B': 200, 'C': 200},
  'spatialLayerVisible': {'A': True, 'B': True, 'C': True},
  'spatialLayerOpacity': {'A': 1.0, 'B': 1.0, 'C': 1.0},
  'metaCoordinationScopes': {'A': {'spotLayer': ['A', 'B', 'C']}},
  'metaCoordinationScopesBy': {'A': {'spotLayer': {'obsType': {'A': 'A',
      'B': 'B',
      'C': 'C'},
     'spatialSpotRadius': {'A': 'A', 'B': 'B', 'C': 'C'},
     'obsColorEncoding': {'A': 'C', 'B': 'A', 'C': 'B'},
     'spatialLayerVisible': {'A': 'A', 'B': 'B', 'C': 'C'},
     'spatialLayerOpacity': {'A': 'A', 'B': 'B', 'C': 'C'},
     'obsSetSelection': {'B': 'cnv_sel', 'C': 'cnv2_sel'}}}},
  'featureType': {'A': 'gene'},
  'featureValueType': {'A': 'expression'},
  'obsSetSelection': {'cnv_sel': [['CNV', '0'],
    ['CNV', '1'],
    ['CNV', '2'],
    ['CNV', '3'],
    ['CNV', '4']],
   'cnv2_sel': [['CNV2', '0'],
    ['CNV2', '1'],
    ['CNV2', '2'],
    ['CNV2', '3'],
    ['CNV2', '4'],
    ['CNV2', '5']]}},
 'layout': [{'component': 'spatialBeta',
   'coordinationScopes': {'dataset': 'A',
    'metaCoordinationScopes': ['A'],
    'metaCoordinationScopesBy': ['A'],
    'featureType': 'A',
    'featureValueType': 'A'},
   'x': 0,
   'y': 0,
   'w': 6,
   'h': 12},
  {'component': 'layerControllerBeta',
   'coordinationScopes': {'dataset': 'A',
    'metaCoordinationScopes': ['A'],
    'metaCoordinationScopesBy': ['A'],
    'featureType': 'A',
    'featureValueType': 'A'},
   'x': 6,
   'y': 0,
   'w': 6,
   'h': 3},
  {'component': 'featureList',
   'coordinationScopes': {'dataset': 'A',
    'featureType': 'A',
    'featureValueType': 'A',
    'obsType': 'D'},
   'x': 6,
   'y': 3,
   'w': 6,
   'h': 3},
  {'component': 'obsSets',
   'coordinationScopes': {'dataset': 'A',
    'obsType': 'E',
    'obsSetSelection': 'cnv_sel'},
   'x': 6,
   'y': 6,
   'w': 6,
   'h': 3},
  {'component': 'obsSets',
   'coordinationScopes': {'dataset': 'A',
    'obsType': 'F',
    'obsSetSelection': 'cnv2_sel'},
   'x': 6,
   'y': 9,
   'w': 6,
   'h': 3}],
 'initStrategy': 'auto'}

Thanks!