running example with WASM

edublancas commented 1 month ago

I'm trying to run an example similar to the one in the docs but encountered an issue. I'd appreciate any guidance!

When running this:

import * as vg from 'https://cdn.jsdelivr.net/npm/@uwdata/vgplot/+esm'

vg.coordinator().databaseConnector(vg.wasmConnector());

vg.coordinator().exec(vg.loadCSV("penguins", "https://raw.githubusercontent.com/mwaskom/seaborn-data/refs/heads/master/penguins.csv"));

const chart = vg.plot(
    vg.hexbin(vg.from("penguins"), { x: "bill_length_mm", y: "flipper_length_mm" })
);

document.getElementById('chart-container').appendChild(chart);

I get the following error:

Error: Binder Error: Referenced column "bill_length_mm" not found in FROM clause!
Candidate bindings: "source.column0"
LINE 1: DESCRIBE SELECT "bill_length_mm" AS "col0", "flipper_le...

This error happens when trying to query a column that doesn't exist in the table (it seems that loadCSV is creating the table but the column doesn't exist).

If I remove the vg.coordinator().databaseConnector(vg.wasmConnector()); line and run duckdb-server. The example runs fine.

Is there any extra configuration needed to get WASM DuckDB to work?

For your convenience, here's the sample code: mosaic-test.zip

Thanks!

domoritz commented 1 month ago

It worked for me.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="module" defer>
        import * as vg from 'https://cdn.jsdelivr.net/npm/@uwdata/vgplot/+esm'

        vg.coordinator().databaseConnector(vg.wasmConnector());

        vg.coordinator().exec(vg.loadCSV("penguins", "https://raw.githubusercontent.com/mwaskom/seaborn-data/refs/heads/master/penguins.csv"));

        const chart = vg.plot(
            vg.hexbin(vg.from("penguins"), { x: "bill_length_mm", y: "flipper_length_mm" })
        );

        document.getElementById('chart-container').appendChild(chart);
    </script>
</head>
<body>
    <div id="chart-container"></div>
</body>
</html>

edublancas commented 1 month ago

thanks for the feedback. I tried with Chrome, and it works (I had initially tested Firefox)

domoritz commented 1 month ago

Firefox should work as well. We actually mainly develop with Firefox. Can you try with an up to date version again?

jheer commented 1 month ago

Do you see any errors before the binder error? And where are you serving the CSV data from? There are cases of bad interactions between Firefox and some servers (notably GitHub pages) when making HTTP range requests. Unfortunately the issue is not something Mosaic/DuckDB can easily workaround. You might try converting your data to Parquet format if so.

edublancas commented 1 month ago

yeah I saw some binder error and I was serving CSVs from GitHub.

I've been using mosaic via react on firefox without any issues. but I'll see if I find some time to replicate this and share more detailed info

uwdata / mosaic

running example with WASM #528