Simple scatterplot with Vitessce

Image Analysis
#1

Hi, I’m trying to get started with Vitessce, thinking of using it to view data from OMERO.

Starting at App | Vitessce, with the Try an example config, I wanted to simplify it down to a single scatterplot.
According to Visualization Components | Vitessce, the scatterplot only requires the cells dataset, so I tried this config:

{
  "version": "1.0.0",
  "name": "My example config",
  "datasets": [
    {
      "uid": "D1",
      "name": "Dries",
      "files": [
        {
          "url": "https://s3.amazonaws.com/vitessce-data/0.0.31/master_release/dries/dries.cells.json",
          "type": "cells",
          "fileType": "cells.json"
        }
      ]
    }
  ],
  "coordinationSpace": {},
  "layout": [
    {
      "component": "scatterplot",
      "coordinationScopes": {},
      "x": 6,
      "y": 0,
      "w": 6,
      "h": 6
    }
  ],
  "initStrategy": "auto"
}

This gives me the following console output and error:

waiting on 3: ["cells","expression-matrix","cell-sets"]
c4f5d8e4.8069108b.js:1 cleared cell-sets; waiting on 2: ["cells","expression-matrix"]
c4f5d8e4.8069108b.js:1 cleared expression-matrix; waiting on 1: ["cells"]
main.cbc38740.js:2 TypeError: Cannot read property '0' of undefined
    at c4f5d8e4.8069108b.js:1

Any pointers on how to trouble-shoot this, or what I’m missing?

cc @ilan-gold

Many thanks,
Will.

#2

There are two embeddings in that JSON so I think the view configuration needs to specify one (say “UMAP”):

{
  "version": "1.0.0",
  "name": "My example config",
  "datasets": [
    {
      "uid": "D1",
      "name": "Dries",
      "files": [
        {
          "url": "https://s3.amazonaws.com/vitessce-data/0.0.31/master_release/dries/dries.cells.json",
          "type": "cells",
          "fileType": "cells.json"
        }
      ]
    }
  ],
  "coordinationSpace": {
    "embeddingType": {
      "UMAP": "UMAP"
    }
  },
  "layout": [
    {
      "component": "scatterplot",
      "coordinationScopes": {
        "embeddingType": "UMAP"
      },
      "x": 6,
      "y": 0,
      "w": 6,
      "h": 6
    }
  ],
  "initStrategy": "auto"
}
#3

Here’s something equivalent that might highlight better what is going on:

{
  "version": "1.0.0",
  "name": "My example config",
  "datasets": [
    {
      "uid": "D1",
      "name": "Dries",
      "files": [
        {
          "url": "https://s3.amazonaws.com/vitessce-data/0.0.31/master_release/dries/dries.cells.json",
          "type": "cells",
          "fileType": "cells.json"
        }
      ]
    }
  ],
  "coordinationSpace": {
    "embeddingType": {
      "A": "UMAP"
    }
  },
  "layout": [
    {
      "component": "scatterplot",
      "coordinationScopes": {
        "embeddingType": "A"
      },
      "x": 6,
      "y": 0,
      "w": 6,
      "h": 6
    }
  ],
  "initStrategy": "auto"
}

The coordination scope, “A”, is initialized the value “UMAP” which is actually present in the json file you are fetching:

Screen Shot 2021-03-30 at 6.33.37 PM
Screen Shot 2021-03-30 at 6.33.37 PM1122×524 52.6 KB

It’s sort of the equivalent of pre-setting a channel or something in an image except here it errors out instead of does nothing :woozy_face: probably should fix that

#4

Great, thanks for the explanation. :+1:

#5

Initial proof of concept (loading data from OMERO to display in Vitessce) is at GitHub - will-moore/omero-vitessce: An OMERO.web plugin to display OMERO data in Vitessce.