Mouse interactivity within subplots for plotly.js

[Tolosmoc]

Hi everyone,

I have exactly the same query as the one below but I am using plotly.js in a react project and not Dash Python.

“Is there a way to interactively resize the elements inside subplots by dragging on the splitters separating them? (preferably client side)
In addition it would be nice to be able to reorder the subplots interactively by dragging them with the mouse. (preferably client side)”
Mouse interactivity within subplots (resize - reorder) - Dash Python - Plotly Community Forum

I tried to convert the solution but not being familiar with dash it leads to nothing.
Is this possible in react ? I mean yes react-dragula exists and allows you to make draggable div but does it work for subplot such as : Mouse interactivity within subplots (resize - reorder) - #9 by jinnyzor

[jinnyzor]

Hello @Tolosmoc,

Welcome to the community!

Yes, you should be able to wrangle this to work.

All charts obviously use the plotly functions, you just need to figure out what events are going to trigger the events. Instead of returning the new layout in the callback, you should be able to return the new figure to the plotly chart.

@jinnyzor

function (n, f) {
            newFig = JSON.parse(JSON.stringify(f))
            console.log(f.layout)
            dragEls = $('.dragula')
            
            l = $('.editing .draglayer > g')
            if (!sp) {
                sp = Math.abs(f.layout.yaxis.domain[0] - f.layout.yaxis2.domain[1])
            }
            
            if (dragEls[0]) {
                newLayout = JSON.parse(JSON.stringify(f.layout))
                ht = 0
                try {
                    $('.dragula').each( function () { ht += parseFloat(this.style.height)})
                    ht += sp*(dragEls.length-1)
                } catch {}
                for (y=0; y<dragEls.length; y++) {
                    per = parseFloat(dragEls[y].style.height) / ht
                    
                    if ($(dragEls[y]).text() == 'xy') {
                        ref = ''
                    } else {
                        ref = $(dragEls[y]).text().split('y')[0].split('x')[1]
                    }
                    if (y==0) {
                        newLayout['yaxis'+ref] = f.layout['yaxis'+ref]
                        newLayout['yaxis'+ref].domain = [1-per+(sp/2), 1]
                        oldDom = 1 - per
                    } 
                    else {
                        newLayout['yaxis'+ref] = f.layout['yaxis'+ref]
                        if ((oldDom - per+(sp/2)) < 0) {
                            newLayout['yaxis'+ref].domain = [0, oldDom]
                        } else {
                            newLayout['yaxis'+ref].domain = [oldDom - per+(sp/2), oldDom]
                        }
                        oldDom = oldDom - per
                        
                    }
                }
                newFig.layout = newLayout
                try {
                    setTimeout(function() {
                    drake.destroy()}, 500)
                } catch {}
                $($('.editing').find('div')[0]).empty()
                console.log(newLayout)
            }
            return JSON.parse(JSON.stringify(newFig))
        }

This should be where you would make the same changes. The figure in this example is just the combination of layout, data and frames from the Plotly chart.

[Tolosmoc]

I’m sorry but I don’t get it… How to use this function ?

I have my plot (I mean my data/layout/config parameters) but i render it directly via a tag with ‘react-plotly.js’:

<Plot
    data={[
        {
            x: /* array of integers */,
      		y: /* array of integers */,
      		xaxis: 'x1',
      		yaxis: 'y1',
      		type: 'scatter',
    	},
    	{
      		x: /* array of integers */,
      		y: /* array of integers */,
      		xaxis: 'x2',
      		yaxis: 'y2',
      		type: 'scatter',
    	}
    ]}

    layout={{
        grid: {rows: 2, columns: 1, pattern: 'independent'}
    }}

    config={{
        /* config */
    }}
/>

I therefore suppose that the operation must be made between the creation of the plot and its rendering… or is my way of rendering the plot a problem ?

[jinnyzor]

The Plotly charts all use the JS file, to update a component after rendering, you can use different functions:

Function