Use of local files in interactive mode in VSCode

[jwoLondon]

We can reference data sources in three ways:

1. Inline directly encoded with dataFromColumns etc
2. Referencing a local file with dataFromUrl, e.g. dataFromUrl "myFile.csv"
3. Referencing an (usually remote) http/https file with dataFromUrl, e.g. dataFromUrl "https://vega.github.io/vega-lite/data/movies.json"

All three work in static visualization mode (elm {v})

However, in VS Code, when showing blocks in interactive mode (elm {v interactive}), option 2 is now failing. Presumably because of security, cross origin restrictions. But I note that it works without problems in Atom. Not sure what settings in VS Code (presumably the default) is preventing this from working.

[jwoLondon]

Have isolated the problem as one specific to VSCode and have amended original issue to reflect this.

[jwoLondon]

It is not clear to me whether this can be overcome with a user setting in VSCode or it relates to the VSCode instance of the mume/litvis plugin.

To explore the problem create text file data.csv:

x,y
10,55
20,35
30,80

Then create a litvis document in the same folder containing the following code block:

```elm {v interactive}
myChart : Spec
myChart =
    let
        data =
            dataFromUrl "data.csv" []

        enc =
            encoding
                << position X [ pName "x", pQuant ]
                << position Y [ pName "y", pQuant ]
    in
    toVegaLite [ data, enc [], circle [] ]
```

The chart is displayed in Atom but not VSCode. Removing the interactive setting in the header allows it to be displayed in both, but obviously prevents any interaction functionality.

[kachkaev]

Hi Jo! Thanks for producing a helpful example. I guess the problem is upstream, so opened shd101wyy/vscode-markdown-preview-enhanced#414

[gabysbrain]

I did some digging with the generated HTML. The issue seems to be with cross-site scripting. When you don't have an interactive visualization then the markdown preview seems to execute vega-lite on the server (VS code) side, generate a complete svg and embed the static svg inside the HTML preview. With the interactive mode the HTML view is rendered with the vega-lite JSON spec embedded in the HTML preview and then calls vega-lite from within the web browser window.

Thus the rendering of the visualization is done on the client side and subject to browser security things like denying cross-origin data access. You can see the error by opening the generated html file in a web browser. My impression from this issue is that VS code won't allow this to be turned off but I could be wrong.

[gabysbrain]

further investigation with the generated HTML is that the markdown preview plugin creates an html page in the temp directory on my computer (/tmp in linux). Another issue is that the file URL is not updated so if you specify a relative path to the local file vegalite won't be able to find it since it's looking relative to the temp directory and not the project directory.