Toggling labels with custom buttons

[yvweivnf]

I am currently working with Vitessce in React. Is there any way to place a custom button inside a scatterplot panel to toggle the labels triggered by a click event where each button toggles the labels of its own panel.

In a JSON snippet, it looks like:

"embeddingCellSetLabelsVisible": {
         "A": true,
         "B": false
 }

I've tried passing down props from the coordination space, however, the issue is that the button appears outside of the panels, and the button toggles the labels on all the plots.

[Aghaei-Dev]

use ant design charts u can do what u want easily

[keller-mark]

Hi @yvweivnf , how are you defining the button? It would be helpful if you are able to share more details. For example, are you using the Vitessce plugin API to define the button or is it defined using a different mechanism?

In general, if you assign each view out of N views to a different embeddingCellSetLabelsVisible coordination scope, and you also have N buttons, then you could map each button to one of the coordination scopes. The tricky part would be positioning the button inside of the panel but you may be able to achieve that with CSS.

[yvweivnf]

@keller-mark
Sure ! This part registers the plugin -

function MyCustomLabelController(props) {
    const {
        embeddingObsSetLabelsVisible,
        setEmbeddingObsSetLabelsVisible,
    } = props;

    function handleClick() {
        props.setEmbeddingObsSetLabelsVisible(!props.embeddingObsSetLabelsVisible)
    }
    return (
        <div>
            <button onClick={handleClick}>Toggle Labels</button>
        </div>
    );
}

function MyCustomLabelControllerSubscriber(props) {
    const {
        coordinationScopes,
        removeGridComponent,
        theme,
        title = 'My plugin view',
    } = props;

    const [{
        embeddingObsSetLabelsVisible,
    }, {
        setEmbeddingObsSetLabelsVisible,
    }] = useCoordination(
        [
            CoordinationType.DATASET,
            CoordinationType.EMBEDDING_OBS_SET_LABELS_VISIBLE,
        ],
        coordinationScopes,
    );

    return (

        <MyCustomLabelController
            embeddingObsSetLabelsVisible={embeddingObsSetLabelsVisible}
            setEmbeddingObsSetLabelsVisible={setEmbeddingObsSetLabelsVisible}
        />

    );
}
registerPluginViewType(
    'myCustomLabelController',
    MyCustomLabelControllerSubscriber,
    [
        CoordinationType.DATASET,
        CoordinationType.EMBEDDING_OBS_SET_LABELS_VISIBLE,
    ],
);

In JSON, I added:

 {
        "component": 'myCustomLabelController',
        "coordinationScopes": {
           "embeddingCellSetLabelsVisible": 'A',
        },
        "x": 5,
        "y": 0,
        "w": 2,
        "h": 1,
     }

This part handles the toggle:

function MyCustomLabelController(props) {
    const {
        embeddingObsSetLabelsVisible,
        setEmbeddingObsSetLabelsVisible,
    } = props;

    function handleClick() {
        props.setEmbeddingObsSetLabelsVisible(!props.embeddingObsSetLabelsVisible)
    }
    return (
        <div>
            <button onClick={handleClick}>Toggle Labels</button>
        </div>
    );
}

I'm also not understanding, could you add clarification or if possible, provide an example of how this would be implemented?
We are also wondering about the feasibility of a responsive layout where we would eventually stack the panels in a mobile version through modifying x, y coordinates from the view configuration, would I be able to achieve this using a similar implementation as the toggle feature?

[yvweivnf]

Update: I managed to figure out how to toggle the labels based on your explanation. Thank you !

[yvweivnf]

Looping back to modifying x & y coordinates from the view configuration to stack panels on a window resize event, would you have any suggestions for this?

[yvweivnf]

Another customization that we hope to add is a percentage behind the labels within the panels ie. Astrolia, 30% / GABAergic neurons, 15%, would this be feasible by achieving this in React?