Trying to reproduce flights-10m.js example using MDX

[jaanli]

This library is amazing and we are starting to use it across @onefact. Thank you!! While we could get an Observable example working (https://observablehq.com/@onefact/mosaic-cross-filter-flights-10m), @raghavbansal2005 and I have been struggling to get it working on the frontend using the following steps:

1. Add an mdx file with the following contents: https://github.com/uwdata/mosaic/blob/main/docs/public/specs/esm/flights-10m.js, for example to pages/flights-10m.mdx as in this repo: https://github.com/onefact/nextra/blob/main/docs/pages/flights-10m.mdx and run pnpm install to install dependencies:

import * as vg from "@uwdata/vgplot";

await vg.coordinator().exec(
  `CREATE TEMP TABLE IF NOT EXISTS flights10m AS SELECT GREATEST(-60, LEAST(ARR_DELAY, 180))::DOUBLE AS delay, DISTANCE AS distance, DEP_TIME AS time FROM 'https://uwdata.github.io/mosaic-datasets/data/flights-10m.parquet'`
);

const $brush = vg.Selection.crossfilter();

export default vg.vconcat(
  vg.plot(
    vg.rectY(
      vg.from("flights10m", { filterBy: $brush }),
      { x: vg.bin("delay"), y: vg.count(), fill: "steelblue", inset: 0.5 }
    ),
    vg.intervalX({ as: $brush }),
    vg.xDomain(vg.Fixed),
    vg.marginLeft(75),
    vg.width(600),
    vg.height(200)
  ),
  vg.plot(
    vg.rectY(
      vg.from("flights10m", { filterBy: $brush }),
      { x: vg.bin("time"), y: vg.count(), fill: "steelblue", inset: 0.5 }
    ),
    vg.intervalX({ as: $brush }),
    vg.xDomain(vg.Fixed),
    vg.marginLeft(75),
    vg.width(600),
    vg.height(200)
  ),
  vg.plot(
    vg.rectY(
      vg.from("flights10m", { filterBy: $brush }),
      { x: vg.bin("distance"), y: vg.count(), fill: "steelblue", inset: 0.5 }
    ),
    vg.intervalX({ as: $brush }),
    vg.xDomain(vg.Fixed),
    vg.marginLeft(75),
    vg.width(600),
    vg.height(200)
  )
);

2. Run pnpm dev
3. View the error:

- error pages/flights-10m.mdx (15:12) @ $brush
- error Error [ReferenceError]: $brush is not defined
    at eval (webpack-internal:///./pages/flights-10m.mdx:38:15) {
  digest: undefined
}
  13 | import * as vg from "@uwdata/vgplot";
  14 | const MDXLayout = vg.vconcat(vg.plot(vg.rectY(vg.from("flights10m", {
> 15 |   filterBy: $brush
     |            ^
  16 | }), {
  17 |   x: vg.bin("delay"),
  18 |   y: vg.count(),

Most likely this issue is due to my being a novice at all of these frameworks and libraries! (e.g. Dominik had to explain how to run a JavaScript server instead of an index.html file like I was trying to do 🤦 ) Thank you!!

[ItsRoy69]

I can work on this issue, it will be great if I am being assigned to work on this issue.

[domoritz]

Feel free to work on the issue. We don't need to assign you.

[jaanli]

Thank you @ItsRoy69 ! @raghavbansal2005 and I are trying to figure this out -- here is a more minimal example of using this library I'm able to make:

onefact/new.onefact.org@d1250f5 (added "@uwdata/vgplot": "^0.3.3" to the requirements, and used this javascript in a React component, then imported it in an mdx file).

Steps:

1. git clone https://github.com/onefact/new.onefact.org.git
2. cd new.onefact.org
3. git checkout mosaic
4. pnpm install
5. pnpm dev

Result:

ModuleBuildError: Module build failed (from ./node_modules/.pnpm/next@13.4.8_@babel+core@7.12.9_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/build/webpack/loaders/next-swc-loader.js):
Error:
x Expected '}', got ':'
,-[/Users/me/projects/new.onefact.org/components/visualization/index.js:4:1]
4 | return (
5 | <script>
6 | vg.plot(
7 | vg.gridY({ strokeDasharray: [0.75,2], strokeOpacity: 1 }),

This is using the SWC rust-based compiler (https://swc.rs/) to compile the javascript into an ESM module.

Any ideas on how we might debug? Thanks so much!!

[jaanli]

Looks like this may be an issue with top-level await statements in Next.js :( -- vercel/next.js#43382 (comment)

Added an example here with Mosaic: onefact/new.onefact.org@1519adc

[domoritz]

It sounds like this is an issue with next and not mosaic. I'm closing this issue then to keep our issue tracker focused.