Specifying custom data sets does not work with lookup transform.

[marcellp]

Hi,

We have encountered an issue with react-vega when loading two data sets and using them to generate a heatmap, where one data set relies on the other for data.

To reproduce, use the following spec:

{
  "$schema":"https://vega.github.io/schema/vega/v5.json",
  "description":"A heatmap showing average daily temperatures in Seattle for each hour of the day.",
  "width": 500,
  "height": 500,
  "data":[
    {"name":"columnNames", 
    "values": ["Column1", "Column2", "Column3"],
    "transform": [
      {"type": "identifier", "as": "columnIndex"},
      {"type": "formula", "as": "columnIndex", "expr": "datum.columnIndex-1"}]
    },
    {
      "name":"heatmapData",
      "values": [{"rowName": "Row1", "values": [1, 2, 3]}, {"rowName": "Row2", "values": [4, 5, 6]}],
      "transform":[
        {"type":"flatten","fields":["values"], "index": "columnIndex"},
        {"type":"lookup", "from": "columnNames", "key": "columnIndex", "fields": ["columnIndex"], "values": ["data"], "as": ["columnName"]}
      ]
    }
  ],
  "scales":[
    {
      "name":"x",
      "type":"band",
      "domain":{"data":"heatmapData","field":"columnName"},
      "range":"width"
    },
    {
      "name":"y",
      "type":"band",
      "domain":{"data":"heatmapData","field":"rowName"},
      "range":"height"
    },
    {
      "name":"color",
      "type":"linear",
      "range":{"scheme":"Viridis"},
      "domain":{"data":"heatmapData","field":"values"},
      "zero":false,
      "nice":true
    }
  ],
  "axes":[
    {"orient":"bottom","scale":"x","domain":false,"title":"Columns"},
    {"orient":"left","scale":"y","domain":false,"title":"Rows"}
  ],
  "legends":[{"fill":"color","type":"gradient","gradientLength":{"signal":"height"}}],
  "marks":[
    {
      "type":"rect",
      "from":{"data":"heatmapData"},
      "encode":{
        "enter":{
          "x":{"scale":"x","field":"columnName"},
          "y":{"scale":"y","field":"rowName"},
          "width":{"scale":"x","band":1},
          "height":{"scale":"y","band":1}
        },
        "update":{"fill":{"scale":"color","field":"values"}},
        "hover":{"cursor":{"value":"pointer"}}
      }
    }
  ]
}

The heatmap should display as expected.

Now, render the component using react-vega, i.e. with:

                  <Vega
                    spec={spec}
                  />

The component should render correctly.

Now, add some custom data, it can be the same exact data passed in originally in the spec, i.e.:

const data = {
   columnNames: ["Column1", "Column2", "Column3"],
   heatmapData: [{"rowName": "Row1", "values": [1, 2, 3]}, {"rowName": "Row2", "values": [4, 5, 6]}]
}

Render the plot using this custom data set.

                  <Vega
                    spec={spec}
                    data={data}
                  />

The plot renders inccorectly: