I have a widget in Retool which consists of the following code and data. The tldr is that it plots a scatter grid of 9 x 12 points and all I want to return is the information about clicked points and selected points (from lasso/box lasso). For some reason when I include onClick and onSelected, it removes the colour shading/highlighting of the points that you normally get with lasso. Is there a way for me to still get the selected points or clicked point information? Even better, is there an even better way to get the info of the selected highlighted points from plotly. I want to be able to access them via {{ plotlywidget.model.selectedPoints }} in Retool. The functionality already works, except the user can’t see what is currentyl highlighted - when I remove onSelected and onClicked below, the lassod points highlight again but I can’t access this point information (e.g. text).
<style>
body {
margin: 0;
}
</style>
<script src="https://cdn.tryretool.com/js/react.production.min.js" crossorigin></script>
<script src="https://cdn.tryretool.com/js/react-dom.production.min.js" crossorigin></script>
<script src=" https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="https://unpkg.com/react-plotly.js@latest/dist/create-plotly-component.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://unpkg.com/@material-ui/core/umd/material-ui.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>
<div id="react" />
<script type="text/babel">
const Plot = createPlotlyComponent.default(Plotly);
const getWellInfo = (p) => ({ x: p.x, y: p.y, well: p.text})
console.log(Plot);
const MyCustomComponent = ({ triggerQuery, model, modelUpdate }) => (
<Plot
data={[
{
x: model.plotData.x,
y: model.plotData.y,
text: model.plotData.well,
hoverinfo: 'text',
mode: 'markers',
type: 'scatter',
marker: {color: 'blue', size: 20, opacity: 0.7},
}
]}
onClick={(v) => {
modelUpdate({ clickedPoint: v.points.map(p => p.text )})
}}
onSelected={(v) => {
modelUpdate({ selectedPoints: v.points.map(getWellInfo) })
}}
layout={ {title: 'Well Selector',
xaxis: {showgrid: false,
zeroline: false,
showline: false,
side: 'top',
fixedrange: true,
tickvals:[1,2,3,4,5,6,7,8,9,10,11,12],
ticktext: [1,2,3,4,5,6,7,8,9,10,11,12]},
yaxis: {showgrid: false,
zeroline: false,
showline: false,
fixedrange: true,
tickvals:[1,2,3,4,5,6,7,8],
ticktext: ['H','G','F','E','D','C','B','A']} } }
style={ {width: "100%", height: "100%"} }
/>
);
const ConnectedComponent = Retool.connectReactComponent(MyCustomComponent);
ReactDOM.render(<ConnectedComponent />, document.getElementById("react"));
</script>
data.json
{'plotData': {'x': [1,
1,
1,
1,
1,
1,
1,
1,
2,
2,
2,
2,
2,
2,
2,
2,
3,
3,
3,
3,
3,
3,
3,
3,
4,
4,
4,
4,
4,
4,
4,
4,
5,
5,
5,
5,
5,
5,
5,
5,
6,
6,
6,
6,
6,
6,
6,
6,
7,
7,
7,
7,
7,
7,
7,
7,
8,
8,
8,
8,
8,
8,
8,
8,
9,
9,
9,
9,
9,
9,
9,
9,
10,
10,
10,
10,
10,
10,
10,
10,
11,
11,
11,
11,
11,
11,
11,
11,
12,
12,
12,
12,
12,
12,
12,
12],
'y': [1,
2,
3,
4,
5,
6,
7,
8,
1,
2,
3,
4,
5,
6,
7,
8,
1,
2,
3,
4,
5,
6,
7,
8,
1,
2,
3,
4,
5,
6,
7,
8,
1,
2,
3,
4,
5,
6,
7,
8,
1,
2,
3,
4,
5,
6,
7,
8,
1,
2,
3,
4,
5,
6,
7,
8,
1,
2,
3,
4,
5,
6,
7,
8,
1,
2,
3,
4,
5,
6,
7,
8,
1,
2,
3,
4,
5,
6,
7,
8,
1,
2,
3,
4,
5,
6,
7,
8,
1,
2,
3,
4,
5,
6,
7,
8],
'well': ['H1',
'G1',
'F1',
'E1',
'D1',
'C1',
'B1',
'A1',
'H2',
'G2',
'F2',
'E2',
'D2',
'C2',
'B2',
'A2',
'H3',
'G3',
'F3',
'E3',
'D3',
'C3',
'B3',
'A3',
'H4',
'G4',
'F4',
'E4',
'D4',
'C4',
'B4',
'A4',
'H5',
'G5',
'F5',
'E5',
'D5',
'C5',
'B5',
'A5',
'H6',
'G6',
'F6',
'E6',
'D6',
'C6',
'B6',
'A6',
'H7',
'G7',
'F7',
'E7',
'D7',
'C7',
'B7',
'A7',
'H8',
'G8',
'F8',
'E8',
'D8',
'C8',
'B8',
'A8',
'H9',
'G9',
'F9',
'E9',
'D9',
'C9',
'B9',
'A9',
'H10',
'G10',
'F10',
'E10',
'D10',
'C10',
'B10',
'A10',
'H11',
'G11',
'F11',
'E11',
'D11',
'C11',
'B11',
'A11',
'H12',
'G12',
'F12',
'E12',
'D12',
'C12',
'B12',
'A12']}}