Passing in Vega spec and hiding sidebar in SanddanceReact

[and-pulc]

Hi all,

I'm trying out SandDanceReact for a project I'm working on, and am running into some difficulty figuring out how to use the component. Is it possible to pass in a Vega spec to the component, or am I limited to the predefined charts? If so, in what prop do I pass it in? I know that one of the examples did this, but it's unclear if the SandDanceReact component exposes vega-deck.gl.

Also, what props can modify or disable the default legend/sidebar?

Thanks for open sourcing this btw, it's a really cool project.

[danmarshall]

Hi @flowsipher,
On our examples page look for the links under the vega-deck.gl heading for demos on how to use that subsystem exclusively without any SandDance functionality. Then, go ahead and view-source on that page. When viewing the html source, you can click the links to the js files,

Yes, we expose the raw vega-deck.gl component statically in SandDance.VegaDeckGl.
For example, in https://sanddance.js.org/tests/umd/js/vega-deck.gl.test.js we render a Vega spec like this:

    SandDance.use(vega, deck, deck, luma);
    var spec = { }; /// Vega spec goes here
    var view = new SandDance.VegaDeckGl.ViewGl(vega.parse(spec), { getView: function () { return "2d"; } })
        .renderer('deck.gl')
        .initialize(document.querySelector('#vis'))
        .run();

Here you see that our renderer uses the Vega View API.

Our renderer does not (yet) handle all types of Vega entities, currently we only render rects, lines, and text.

You can hide the legend/sidebar with CSS. try:

.sanddance-panel {
    display: none;
}

Thanks for the feedback!

[danmarshall]

Oh, just re-read your original question, and I see you are asking in context of SandDanceReact. Currently the vega-deck.gl isn't exposed on that wrapper. I think you could do that on your own by writing a small React wrapper, and doing the code from the comment above in your componentDidMount().

[and-pulc]

Appreciate the quick reply, I got it working fairly quickly. Happy to share the wrapper for it when I finish up in the next few weeks.

As a follow up, I'm wondering how I can access the Deck.Gl View and pass in custom options to it. I'd like to pass in a custom controller. Would that be in the view property of Insight, or do I need to pass a custom deck instance to the Sanddance.use function?

[danmarshall]

In your case I think a custom deck instance would do it. That's what I needed to do to have common state between my controller and deck, since deck creates Controllers by their class. See https://github.com/microsoft/SandDance/blob/master/packages/sanddance/src/vega-deck.gl/deck.gl-classes/deckgl.ts#L64 - its a lot of wrappers.

[marcjansen89]

Our renderer does not (yet) handle all types of Vega entities, currently we only render rects, lines, and text.

Any idea when you will support full Vega entitties?

[danmarshall]

@MarcHKV can you let us know which entities you need?

I don't personally have the bandwidth to fully implement all the entities, but if others are willing to contribute I can help facilitate. Our vega-deck.gl code is currently embedded within the sanddance package. If the community is interested in using it standalone, I can extract it and make it a separate package.

[danmarshall]

Closing this issue for now, please re-open it as necessary.