vgplot Mark TipOptions format - possibly incorrect parsing.

[venkat-oss]

I have a mosaic vgplot yaml specification that looks like this:

plot:
- mark: lineY
  data: { from: tabular_data }
  x: TimeMinutes
  y: Value
  stroke: MetricName
  tip: {format: {x: true, y: true, stroke: true, z: false }}
width: 900
height: 580

Expected behavior of the plot tip with format option: MetricName system.cpu.load_average.1m {color}

Observed behavior of the plot tip with format option: stroke system.cpu.load_average.1m {color}

Image for reference:

Is this expected or am I providing an incorrect chart specification? Thank you for the great work on this!!

[domoritz]

I can repro this with a small plain example

import { coordinator, wasmConnector } from '@uwdata/mosaic-core';
import { loadParquet } from '@uwdata/mosaic-sql';
import * as vg from '@uwdata/vgplot';

async function init() {
  const wasm = await wasmConnector({ log: false });
  coordinator().databaseConnector(wasm);

  await vg.coordinator().exec([
    loadParquet("aapl", `${window.location}stocks.parquet`, {where: "Symbol = 'AAPL'"})
  ]);

  document.getElementById("plot").replaceChildren(
    vg.plot(
      vg.lineY(
        vg.from("aapl"),
        {x: "Date", y: "Close", stroke: "Symbol", tip: {x: true, y: true, stroke: true}}
      ),
      vg.width(680),
      vg.height(200)
    )
  )
}

init();

Doesn't seem to be an issue with plain plot (https://observablehq.com/d/624cb8a94175eea2).

[jheer]

vgplot marks rename some fields when creating database queries. The workaround is to provide your desired names using the label methods (such as vg.colorLabel("Symbol")). For an example of this in action, see the WNBA Shot Chart example.

[jheer]

A potential fix for this could be to automatically set the scale labels (if not explicitly defined) when we marshal a Plot spec within vgplot.

[venkat-oss]

I was able to partially work around this issue by explicitly specifying the mark channel. Looks like that gets passed to Plot transparently.

plot:
- mark: lineY
  data: { from: tabular_data }
  x: TimeMinutes
  y: Value
  stroke: MetricName
  channels:
     MetricName: MetricName
  tip: {format: {x: true, y: true, stroke: false, z: false }}
width: 900
height: 580

This spec has the expected behavior, but without the color encoding. 😄

Thank you @jheer for the proper workaround. 🚀 @domoritz Thank you for the quick reproducer. Thank you @jheer and @domoritz again for Mosaic.

[domoritz]

vg.plot(
  vg.lineY(
    vg.from("aapl"),
    {x: "Date", y: "Close", stroke: 'Symbol', tip: true}
  ),
  vg.colorLabel("Symbol"),
  vg.width(680),
  vg.height(200)
)

works as expected