Filtering on unnested data doesn't get quoted properly

[mgd722]

I have data like:

(id INT, type VARCHAR, tags VARCHAR[])
(1, 'Edit', ['Roads', 'Lakes'])
(2, 'Tool', ['Buildings', 'Dimension Lines'])

I want to make an event type chart and an unnested tags chart that crossfilter each other. The tag chart renders as expected with this code:

const tagPlot = vg.plot(
  vg.barX(vg.from('events', { filterBy: $filter, unnest: 'tags' }), {
    x: vg.count(),
    y: 'tags',
    fill: '#1f77b4',
    sort: { y: '-x', limit: 15 },
  }),
  vg.toggleY({ as: $filter }),
  vg.width(tagChartContainer.clientWidth || 500),
  vg.height(300),
  vg.marginLeft(120),
);

but when I hover/click a bar to filter the chart I get an error:

Error: Parser Error: syntax error at or near "Lines"
LINE 2: ... "events" AS "source" WHERE ("tags" IN (Dimension Lines)) GROUP BY "type"
                                                             ^

It seems that the unnested tag isn't getting quoted in the where clause.

Codepen example

The unnesting doesn't seem to work at all in my example-- I would expect each tag to have its own bar in the chart?

[mgd722]

Looking at it more, I don't think charting unnested data is working at all. Maybe I have misunderstood how it is supposed to work.

[jheer]

Flagging @derekperkins, who added the list/tag support to Mosaic, as he might have additional insight.

[derekperkins]

I didn't test it in vgplot, but it was functional for me in a menu component.

[derekperkins]

Looks like I did have to add explicit support in the Menu component, so similar treatment will probably have to happen inside vgplot

mosaic/packages/vgplot/inputs/src/Menu.js

Lines 166 to 188 in 09334ee

	publish(value) {
	const { selection, field, listMatch } = this;
	if (isSelection(selection)) {
	if (value === '') value = undefined; // 'All' option
	const clause = listMatch
	? clauseList(field, value, { source: this, listMatch })
	: clausePoint(field, value, { source: this });
	selection.update(clause);
	} else if (isParam(selection)) {
	selection.update(value);
	}
	}
	query(filter = []) {
	const { from, column, listMatch } = this;
	if (!from) return null;
	return Query
	.from(from)
	.select({ value: listMatch ? unnest(column) : column })
	.distinct()
	.where(filter)
	.orderby(column)
	}

[mgd722]

Thanks @derekperkins. I'm working (struggling) to better understand the codebase to see if I'll be able to submit a PR with a fix.

To make sure I'm in the ballpark, if unnesting works as intended, we would expect this chart from my Codepen to list each tag individually (i.e. one bar for Buildings, one bar for Lakes, etc.):

If so, does the syntax in my example look correct?

[derekperkins]

Yes, your syntax looks correct and the outcome you're describing is what I'd expect to see. I don't have spare time to dive in myself right now, but I can look at your PR. My assumption is that there is are clausePoint references somewhere in vgplot that need to know when a list node is coming, and the code change should be very similar to the snippet above.