Wrapping UpSetJS for Plotly Dash

Dash Python
1

I’m trying to wrap UpSetJS for use in Plotly Dash. Starting with the plotly dash boilerplate template (GitHub - plotly/dash-component-boilerplate: Get started creating your own Dash components here.), I was able to get the static version to work, but there should be various highlights when hovering over different elements, but I don’t get any of those to work. I think it might be tied to interactivity, which the docs for UpSetJS say to use React.useState(null) to implement interactivity. But no matter where I try to use React.useState(null) , I get the “Invalid Hook call”. I will attach my code, any help would be appreciated as I am not familiar with JavaScript or React.

Another interesting thing is that the buttons at the bottom work and when I click the “share” button, it opens a new window with the same plot but this time all the hover tool tips and highlighting.

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import ReactDOM from 'react-dom';
import * as d3 from 'd3';
import _ from 'lodash';
import UpSetJS, {extractCombinations} from '@upsetjs/react';


export default class dash_UpSet extends Component {
    constructor(props){
        super(props);
        this.renderPlot = this.renderPlot.bind(this);
        this._renderPlotCalled = false;

    }

    render() {
        
        const {id, setProps, data} = this.props;
        const {sets, combinations} = extractCombinations(data);
        return (
            <UpSetJS sets={sets} combinations={combinations}  width={500} height={500} up={this.renderPlot}/>
        );
    }



    renderPlot(up) {
        const {
            id,
            setProps,
            data,
        } = this.props;
        if (up === this._up && this._renderPlotCalled) {
            return;
        }
        this._up = up;
        this._renderPlotCalled = true;
        const upset = d3.select("." + id)

    }
}

dash_UpSet.defaultProps = {};

dash_UpSet.propTypes = {
    id: PropTypes.string,
    data: PropTypes.arrayOf(
        PropTypes.shape(
            {
                name: PropTypes.string.isRequired,
                sets: PropTypes.arrayOf(PropTypes.string).isRequired
            }
        )
    ),
    setProps: PropTypes.func
};
2

It seems that you are mixing the two React paradigms of class components (what you have now) and functional components (which use hooks). You should choose one or the other :slight_smile: