🚀 Gen 5 of the leading AI app deployment platform launches October 6. Click for the livestream.

Wrapping UpSetJS for Plotly Dash

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
};

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: