diff --git a/src/streamlit_plotly_events.egg-info/SOURCES.txt b/src/streamlit_plotly_events.egg-info/SOURCES.txt index 914e16b9..5f91adf0 100644 --- a/src/streamlit_plotly_events.egg-info/SOURCES.txt +++ b/src/streamlit_plotly_events.egg-info/SOURCES.txt @@ -10,12 +10,12 @@ src/streamlit_plotly_events.egg-info/requires.txt src/streamlit_plotly_events.egg-info/top_level.txt src/streamlit_plotly_events/frontend/build/asset-manifest.json src/streamlit_plotly_events/frontend/build/index.html -src/streamlit_plotly_events/frontend/build/precache-manifest.ee925ac68621088b518d13d45367f5fb.js +src/streamlit_plotly_events/frontend/build/precache-manifest.b35d89159f39b2f6b144595f6317bcdd.js src/streamlit_plotly_events/frontend/build/service-worker.js src/streamlit_plotly_events/frontend/build/static/js/2.9330ddf9.chunk.js src/streamlit_plotly_events/frontend/build/static/js/2.9330ddf9.chunk.js.LICENSE.txt src/streamlit_plotly_events/frontend/build/static/js/2.9330ddf9.chunk.js.map -src/streamlit_plotly_events/frontend/build/static/js/main.45b4700a.chunk.js -src/streamlit_plotly_events/frontend/build/static/js/main.45b4700a.chunk.js.map +src/streamlit_plotly_events/frontend/build/static/js/main.47564b5d.chunk.js +src/streamlit_plotly_events/frontend/build/static/js/main.47564b5d.chunk.js.map src/streamlit_plotly_events/frontend/build/static/js/runtime-main.44d30fc2.js src/streamlit_plotly_events/frontend/build/static/js/runtime-main.44d30fc2.js.map \ No newline at end of file diff --git a/src/streamlit_plotly_events/__init__.py b/src/streamlit_plotly_events/__init__.py index 3dfe9a3a..4ced4539 100644 --- a/src/streamlit_plotly_events/__init__.py +++ b/src/streamlit_plotly_events/__init__.py @@ -57,6 +57,7 @@ def plotly_events( clicked_point_size: float = 0.0, measure_mode: bool = False, measure_line_width: float = 4.0, + get_relayout: bool = False, ): """Create a new instance of "plotly_events". @@ -129,6 +130,15 @@ def plotly_events( dxz: (delta xz of measurement points, 0 when only one point is clicked), dyz: (delta yz of measurement points, 0 when only one point is clicked) } + If get_relayout is enabled, additional returns will happen when the chart is moved around + { + cameraLayout: { + x: float (x camera position) + y: float (y camera position) + z: float (z camera position) + } + } + different dictionaries will be returned so you need to handle them """ # kwargs will be exposed to frontend in "args" @@ -146,6 +156,7 @@ def plotly_events( clicked_point_size=clicked_point_size, measure_mode=measure_mode, measure_line_width=measure_line_width, + get_relayout=get_relayout ) # Parse component_value since it's JSON and return to Streamlit diff --git a/src/streamlit_plotly_events/frontend/build/asset-manifest.json b/src/streamlit_plotly_events/frontend/build/asset-manifest.json index 3dd2ed3a..9fe04c68 100644 --- a/src/streamlit_plotly_events/frontend/build/asset-manifest.json +++ b/src/streamlit_plotly_events/frontend/build/asset-manifest.json @@ -1,19 +1,19 @@ { "files": { - "main.js": "./static/js/main.9ae4b44f.chunk.js", - "main.js.map": "./static/js/main.9ae4b44f.chunk.js.map", + "main.js": "./static/js/main.1a76c4f6.chunk.js", + "main.js.map": "./static/js/main.1a76c4f6.chunk.js.map", "runtime-main.js": "./static/js/runtime-main.44d30fc2.js", "runtime-main.js.map": "./static/js/runtime-main.44d30fc2.js.map", "static/js/2.9330ddf9.chunk.js": "./static/js/2.9330ddf9.chunk.js", "static/js/2.9330ddf9.chunk.js.map": "./static/js/2.9330ddf9.chunk.js.map", "index.html": "./index.html", - "precache-manifest.3ad9568572eeefd3802f3ee4a74284a7.js": "./precache-manifest.3ad9568572eeefd3802f3ee4a74284a7.js", + "precache-manifest.ca90bb69d909fe1f7175ebdd0dbb5e85.js": "./precache-manifest.ca90bb69d909fe1f7175ebdd0dbb5e85.js", "service-worker.js": "./service-worker.js", "static/js/2.9330ddf9.chunk.js.LICENSE.txt": "./static/js/2.9330ddf9.chunk.js.LICENSE.txt" }, "entrypoints": [ "static/js/runtime-main.44d30fc2.js", "static/js/2.9330ddf9.chunk.js", - "static/js/main.9ae4b44f.chunk.js" + "static/js/main.1a76c4f6.chunk.js" ] } \ No newline at end of file diff --git a/src/streamlit_plotly_events/frontend/build/index.html b/src/streamlit_plotly_events/frontend/build/index.html index 1723f59b..60242544 100644 --- a/src/streamlit_plotly_events/frontend/build/index.html +++ b/src/streamlit_plotly_events/frontend/build/index.html @@ -1 +1 @@ -Streamlit Component
\ No newline at end of file +Streamlit Component
\ No newline at end of file diff --git a/src/streamlit_plotly_events/frontend/build/precache-manifest.3ad9568572eeefd3802f3ee4a74284a7.js b/src/streamlit_plotly_events/frontend/build/precache-manifest.ca90bb69d909fe1f7175ebdd0dbb5e85.js similarity index 75% rename from src/streamlit_plotly_events/frontend/build/precache-manifest.3ad9568572eeefd3802f3ee4a74284a7.js rename to src/streamlit_plotly_events/frontend/build/precache-manifest.ca90bb69d909fe1f7175ebdd0dbb5e85.js index 0513b76d..8bb709a9 100644 --- a/src/streamlit_plotly_events/frontend/build/precache-manifest.3ad9568572eeefd3802f3ee4a74284a7.js +++ b/src/streamlit_plotly_events/frontend/build/precache-manifest.ca90bb69d909fe1f7175ebdd0dbb5e85.js @@ -1,6 +1,6 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([ { - "revision": "68914c7696f497e57843c252bcef8a43", + "revision": "279b8698cbab6a2d664098fb335835f4", "url": "./index.html" }, { @@ -12,8 +12,8 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([ "url": "./static/js/2.9330ddf9.chunk.js.LICENSE.txt" }, { - "revision": "d2263eb7edcb1fb3e37a", - "url": "./static/js/main.9ae4b44f.chunk.js" + "revision": "4dbd63f22498e5a47816", + "url": "./static/js/main.1a76c4f6.chunk.js" }, { "revision": "7e9d84e346ce158d1e50", diff --git a/src/streamlit_plotly_events/frontend/build/service-worker.js b/src/streamlit_plotly_events/frontend/build/service-worker.js index 41b76bec..b28bfbd4 100644 --- a/src/streamlit_plotly_events/frontend/build/service-worker.js +++ b/src/streamlit_plotly_events/frontend/build/service-worker.js @@ -14,7 +14,7 @@ importScripts("https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js"); importScripts( - "./precache-manifest.3ad9568572eeefd3802f3ee4a74284a7.js" + "./precache-manifest.ca90bb69d909fe1f7175ebdd0dbb5e85.js" ); self.addEventListener('message', (event) => { diff --git a/src/streamlit_plotly_events/frontend/build/static/js/main.1a76c4f6.chunk.js b/src/streamlit_plotly_events/frontend/build/static/js/main.1a76c4f6.chunk.js new file mode 100644 index 00000000..6c5efa62 --- /dev/null +++ b/src/streamlit_plotly_events/frontend/build/static/js/main.1a76c4f6.chunk.js @@ -0,0 +1,2 @@ +(this.webpackJsonpstreamlit_component_template=this.webpackJsonpstreamlit_component_template||[]).push([[0],{19:function(t,e,s){"use strict";s.r(e);var a=s(0),i=s.n(a),o=s(3),r=s.n(o),n=s(1),l=s(5),d=s.n(l);class h extends n.b{constructor(){super(...arguments),this.state={data:[],layout:{},clickedPoints:{x:0,y:0,z:0},measureMode:!1,measurePoints:[],measureLineWidth:0},this.render=()=>{var t=JSON.parse(this.props.args.plot_obj);const e=this.props.args.override_height,s=this.props.args.override_width,a=this.props.args.plot_clicked_point,o=(this.props.args.measure_line_width,this.props.args.clicked_point_size),r=this.props.args.click_event,l=this.props.args.select_event,h=this.props.args.hover_event,c=this.props.args.with_z,u=this.props.args.get_relayout;return n.a.setFrameHeight(e),i.a.createElement(d.a,{data:this.state.data,layout:this.state.layout,onClick:r?this.plotlyEventHandler(c,t,a,o):void 0,onSelected:l?this.plotlyEventHandler(c):void 0,onHover:h?this.plotlyEventHandler(c):void 0,onRelayout:u?this.relayoutEventHandler:void 0,style:{width:s,height:e},className:"stPlotlyChart"})},this.plotlyEventHandler=(t,e,s,a)=>i=>{let o=i.points[0],r=this.state.clickedPoints,l=!1;o.x!==r.x||o.y!==r.y||o.z!==r.z?(console.log("clicked point x diff"),l=!0,this.setState({clickedPoints:{x:o.x,y:o.y,z:o.z}})):l=!1;let d={};if(s&&!0===l){const t=i.points[0];t.curveNumber,t.pointNumber;console.log("current getPoint:",t);let s={x:[t.x],y:[t.y],z:[t.z],mode:"markers",marker:{color:"red"},showlegend:!1,type:void 0!==t.z?"scatter3d":"scatter",name:"Clicked Point",text:["Clicked Point"],hovertemplate:"%{text}
"+"x: ".concat(t.x.toFixed(3),"
")+"y: ".concat(t.y.toFixed(3),"
")+"z: ".concat(t.z.toFixed(3),"")};if(s.marker.size=void 0!==a?a:5,!0===this.state.measureMode){if(this.state.measurePoints.length>=2?(this.state.measurePoints.length=0,this.state.measurePoints.push(s)):this.state.measurePoints.push(s),2===this.state.measurePoints.length){const t=this.state.measurePoints;d=this.createMeasureLine(t),t.push(...d.lines)}console.log("measure points: ",this.state.measurePoints)}!0===this.state.measureMode?e.data.push(...this.state.measurePoints):e.data.push(s),this.updatePlotState(e)}if(!0===l){let e=[];i.points.forEach((function(s){t?e.push({x:s.x,y:s.y,z:s.z,curveNumber:s.curveNumber,pointNumber:s.pointNumber,pointIndex:s.pointIndex}):e.push({x:s.x,y:s.y,curveNumber:s.curveNumber,pointNumber:s.pointNumber,pointIndex:s.pointIndex})})),!0===this.state.measureMode&&(console.log("measurepoint length: ",this.state.measurePoints.length),e.push({measurePointsX:this.state.measurePoints.map(t=>t.x).filter(t=>1===t.length).flat(),measurePointsY:this.state.measurePoints.map(t=>t.y).filter(t=>1===t.length).flat(),measurePointsZ:this.state.measurePoints.map(t=>t.z).filter(t=>1===t.length).flat(),dx:1===this.state.measurePoints.length?0:parseFloat(d.distances[0].toFixed(3)),dy:1===this.state.measurePoints.length?0:parseFloat(d.distances[1].toFixed(3)),dz:1===this.state.measurePoints.length?0:parseFloat(d.distances[2].toFixed(3)),dxyz:1===this.state.measurePoints.length?0:parseFloat(d.distances[3].toFixed(3)),dxy:1===this.state.measurePoints.length?0:parseFloat(d.distances[4].toFixed(3)),dxz:1===this.state.measurePoints.length?0:parseFloat(d.distances[5].toFixed(3)),dyz:1===this.state.measurePoints.length?0:parseFloat(d.distances[6].toFixed(3))})),console.log("Updating clicked point"),n.a.setComponentValue(JSON.stringify(e))}},this.createMeasureLine=t=>{const e=Math.abs(t[1].x-t[0].x),s=Math.abs(t[1].y-t[0].y),a=Math.abs(t[1].z-t[0].z),i=Math.sqrt(Math.pow(e,2)+Math.pow(s,2)+Math.pow(a,2)),o=Math.sqrt(e*e+s*s),r=Math.sqrt(e*e+a*a),n=Math.sqrt(s*s+a*a);return{lines:[{x:[...t[0].x,...t[1].x],y:[...t[0].y,...t[1].y],z:[...t[0].z,...t[1].z],mode:"lines",line:{color:"purple",width:this.state.measureLineWidth},type:"scatter3d",name:"Distance",text:["Point 1","Point 2"],hovertemplate:"%{text}
"+"Measured distance: ".concat(i.toFixed(3),"m
")+"\u0394XY: ".concat(o.toFixed(3),"
")+"\u0394XZ: ".concat(r.toFixed(3),"
")+"\u0394YZ: ".concat(n.toFixed(3),"")},{x:[...t[0].x,...t[1].x],y:[...t[0].y,...t[0].y],z:[...t[0].z,...t[0].z],mode:"lines",line:{color:"red",width:this.state.measureLineWidth},type:"scatter3d",name:"Distance X",text:["Point 1","Point 2"],hovertemplate:"Measured distance X: ".concat(e.toFixed(3),"m")},{x:[...t[1].x,...t[1].x],y:[...t[0].y,...t[1].y],z:[...t[0].z,...t[0].z],mode:"lines",line:{color:"green",width:this.state.measureLineWidth},type:"scatter3d",name:"Distance Y",text:["Point 1","Point 2"],hovertemplate:"Measured distance Y: ".concat(s.toFixed(3),"m")},{x:[...t[1].x,...t[1].x],y:[...t[1].y,...t[1].y],z:[...t[0].z,...t[1].z],mode:"lines",line:{color:"blue",width:4},type:"scatter3d",name:"Distance Z",text:["Point 1","Point 2"],hovertemplate:"Measured distance X: ".concat(a.toFixed(3),"m")}],distances:[e,s,a,i,o,r,n]}},this.updatePlotState=t=>{this.setState({data:t.data})},this.relayoutEventHandler=t=>{if(t&&t["scene.camera"]){const e=t["scene.camera"].eye;console.log("current eye",e);const s={cameraLayout:{x:e.x,y:e.y,z:e.z}};!0===this.state.deferInitialLayoutReturn?(console.log("deferring layout return first time"),this.state.deferInitialLayoutReturn=!1):(console.log("layout return"),n.a.setComponentValue(JSON.stringify(s)))}}}componentDidMount(){let t=JSON.parse(this.props.args.plot_obj),e=this.props.args.measure_mode,s=this.props.args.measure_line_width;t.layout.uirevision="true",console.log("current plot layout: ",t.layout),this.setState({data:t.data,layout:t.layout,clickedPoints:{x:0,y:0,z:0},measureMode:e,measurePoints:[],measureLineWidth:s,deferInitialLayoutReturn:!0})}}var c=Object(n.c)(h);r.a.render(i.a.createElement(i.a.StrictMode,null,i.a.createElement(c,null)),document.getElementById("root"))},6:function(t,e,s){t.exports=s(19)}},[[6,1,2]]]); +//# sourceMappingURL=main.1a76c4f6.chunk.js.map \ No newline at end of file diff --git a/src/streamlit_plotly_events/frontend/build/static/js/main.1a76c4f6.chunk.js.map b/src/streamlit_plotly_events/frontend/build/static/js/main.1a76c4f6.chunk.js.map new file mode 100644 index 00000000..eb81405a --- /dev/null +++ b/src/streamlit_plotly_events/frontend/build/static/js/main.1a76c4f6.chunk.js.map @@ -0,0 +1 @@ +{"version":3,"sources":["StreamlitPlotlyEventsComponent.tsx","index.tsx"],"names":["StreamlitPlotlyEventsComponent","StreamlitComponentBase","constructor","arguments","state","data","layout","clickedPoints","x","y","z","measureMode","measurePoints","measureLineWidth","render","plot_obj","JSON","parse","this","props","args","override_height","override_width","plotClickedPoint","clickedPointSize","click_event","select_event","hover_event","with_z","get_relayout","Streamlit","setFrameHeight","React","createElement","Plot","onClick","plotlyEventHandler","undefined","onSelected","onHover","onRelayout","relayoutEventHandler","style","width","height","className","plot_clicked_point","clicked_point_size","currentClickedPoint","points","previousClickedPointState","needToUpdate","console","log","setState","measurePlot","getPoint","curveNumber","pointNumber","clickPointPlot","mode","marker","color","showlegend","type","name","text","hovertemplate","concat","toFixed","size","length","push","createMeasureLine","lines","updatePlotState","forEach","arrayItem","pointIndex","measurePointsX","map","filter","flat","measurePointsY","measurePointsZ","dx","parseFloat","distances","dy","dz","dxyz","dxy","dxz","dyz","setComponentValue","stringify","Math","abs","sqrt","pow","line","plot_data","eventData","eye","cameraPostion","cameraLayout","deferInitialLayoutReturn","componentDidMount","measure_mode","measure_line_width","uirevision","withStreamlitConnection","ReactDOM","StrictMode","document","getElementById"],"mappings":"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","file":"static/js/main.1a76c4f6.chunk.js","sourcesContent":["import {\n Streamlit,\n StreamlitComponentBase,\n withStreamlitConnection,\n} from \"streamlit-component-lib\";\nimport React, { ReactNode } from \"react\";\nimport Plot from 'react-plotly.js';\n\ninterface MyState {\n data: any[];\n layout: any;\n clickedPoints: { x: number; y: number; z: number };\n measureMode: boolean;\n measurePoints: any[];\n measureLineWidth: number;\n camera?: number[]\n deferInitialLayoutReturn?: boolean\n}\n\nclass StreamlitPlotlyEventsComponent extends StreamlitComponentBase {\n // Create state for points\n state: MyState = {\n data: [],\n layout: {},\n clickedPoints: { x: 0.0, y: 0.0, z: 0.0 },\n measureMode: false,\n measurePoints: [],\n measureLineWidth: 0.0\n };\n\n // init the component state when first starting it\n // make the layout constant across updates\n componentDidMount() {\n let plot_obj = JSON.parse(this.props.args[\"plot_obj\"])\n let measure_mode: boolean = this.props.args['measure_mode']\n let measure_line_width: number = this.props.args['measure_line_width']\n\n plot_obj.layout.uirevision = 'true'\n console.log('current plot layout: ', plot_obj.layout)\n this.setState({\n data: plot_obj.data,\n layout: plot_obj.layout,\n clickedPoints: {\n x: 0,\n y: 0,\n z: 0,\n },\n measureMode: measure_mode,\n measurePoints: [],\n measureLineWidth: measure_line_width,\n deferInitialLayoutReturn: true\n });\n }\n\n public render = (): ReactNode => {\n // Pull Plotly object from args and parse\n var plot_obj = JSON.parse(this.props.args[\"plot_obj\"]);\n const override_height = this.props.args[\"override_height\"];\n const override_width = this.props.args[\"override_width\"];\n const plotClickedPoint: boolean = this.props.args['plot_clicked_point']\n const measureLineWidth: number = this.props.args['measure_line_width']\n /*Get the current point size of the chart we are plotting to draw the extra clicked point\n with respect to the scale of the plotted points\n */\n const clickedPointSize: number = this.props.args['clicked_point_size']\n // Event booleans\n const click_event = this.props.args[\"click_event\"];\n const select_event = this.props.args[\"select_event\"];\n const hover_event = this.props.args[\"hover_event\"];\n const with_z = this.props.args[\"with_z\"];\n const get_relayout = this.props.args['get_relayout']\n\n Streamlit.setFrameHeight(override_height);\n return (\n \n );\n };\n\n /** Click handler for plot. */\n private plotlyEventHandler = (with_z: boolean, plot_obj?: any, plot_clicked_point?: boolean, clicked_point_size?: number) => {\n\n // console.log('pressed on point')\n return (data: any) => {\n const getCircularReplacer = () => {\n const seen = new WeakSet();\n return (key: string, value: any) => {\n if (typeof value === \"object\" && value !== null) {\n if (seen.has(value)) {\n return '[Circular]';\n }\n seen.add(value);\n }\n return value;\n };\n };\n // JSON.parse(data.points[0])\n // console.log('pressed on point', JSON.stringify(data.points[0], getCircularReplacer(), 2))\n // console.log('current plot object', plot_obj)\n let currentClickedPoint = data.points[0]\n let previousClickedPointState = this.state.clickedPoints\n let needToUpdate = false\n if (currentClickedPoint.x !== previousClickedPointState.x ||\n currentClickedPoint.y !== previousClickedPointState.y ||\n currentClickedPoint.z !== previousClickedPointState.z) {\n console.log('clicked point x diff')\n needToUpdate = true\n this.setState({\n clickedPoints: {\n x: currentClickedPoint.x,\n y: currentClickedPoint.y,\n z: currentClickedPoint.z,\n }\n })\n } else {\n needToUpdate = false\n }\n\n // measurePlot is used within the lifetime of this function\n let measurePlot: any = {}\n if (plot_clicked_point && needToUpdate === true) {\n\n const getPoint = data.points[0]\n const traceIndex = getPoint.curveNumber\n const pointIndex = getPoint.pointNumber\n console.log(`current getPoint:`, getPoint)\n // console.log('current point number:', pointIndex)\n // console.log('current trace number', traceIndex)\n // console.log('current colors: ', plot_obj.data[traceIndex].marker.color[pointIndex])\n // console.log('current data for plot', this.state.data)\n\n // console.log('plot_obj', plot_obj)\n // create a point object to add to our current plot to indicate the clicked point\n interface newPoint {\n x: number[];\n y: number[];\n z?: number[];\n mode: string;\n marker: {\n color: string;\n size?: number;\n };\n showlegend: boolean;\n type: string;\n name: string,\n text: string[],\n hovertemplate: string,\n }\n\n let clickPointPlot: newPoint = {\n x: [getPoint.x],\n y: [getPoint.y],\n z: [getPoint.z],\n mode: 'markers',\n marker: {\n color: 'red',\n // size: clicked_point_size === 0.0 && undefined? 5.0: clicked_point_size*1.5,\n },\n showlegend: false,\n type: getPoint.z !== undefined ? 'scatter3d' : 'scatter',\n name: 'Clicked Point',\n text: ['Clicked Point'],\n hovertemplate: '%{text}
'\n + `x: ${getPoint.x.toFixed(3)}
`\n + `y: ${getPoint.y.toFixed(3)}
`\n + `z: ${getPoint.z.toFixed(3)}`\n\n };\n\n if (clicked_point_size !== undefined) {\n clickPointPlot.marker.size = clicked_point_size\n }\n else {\n clickPointPlot.marker.size = 5.0\n }\n\n\n // calculate measure points and plot them on the chart\n if (this.state.measureMode === true) {\n // let measurePoints = this.state.measurePoints\n // measurePoints.push(clickPointPlot)\n if (this.state.measurePoints.length >= 2) {\n this.state.measurePoints.length = 0;\n this.state.measurePoints.push(clickPointPlot)\n }\n else {\n this.state.measurePoints.push(clickPointPlot)\n }\n // calculate measure points when the length is 2 then plot on the chart\n if (this.state.measurePoints.length === 2) {\n const measurePoints = this.state.measurePoints\n\n measurePlot = this.createMeasureLine(measurePoints)\n measurePoints.push(...measurePlot.lines)\n }\n\n console.log('measure points: ', this.state.measurePoints)\n }\n // update the plot \n // append new trace of clicked point here then update plot state\n if (this.state.measureMode === true) {\n plot_obj.data.push(...this.state.measurePoints)\n }\n else {\n plot_obj.data.push(clickPointPlot)\n }\n // console.log('plotting using: ', plot_obj)\n this.updatePlotState(plot_obj)\n }\n\n // Build array of points to return\n if (needToUpdate === true) {\n let clickedPoints: Array = [];\n data.points.forEach(function (arrayItem: any) {\n if (with_z) {\n clickedPoints.push({\n x: arrayItem.x,\n y: arrayItem.y,\n z: arrayItem.z,\n curveNumber: arrayItem.curveNumber,\n pointNumber: arrayItem.pointNumber,\n pointIndex: arrayItem.pointIndex\n });\n } else {\n clickedPoints.push({\n x: arrayItem.x,\n y: arrayItem.y,\n curveNumber: arrayItem.curveNumber,\n pointNumber: arrayItem.pointNumber,\n pointIndex: arrayItem.pointIndex\n });\n }\n });\n\n // Add measure points to return when in measure mode\n if (this.state.measureMode === true) {\n console.log('measurepoint length: ', this.state.measurePoints.length)\n clickedPoints.push({\n // x: this.state.measurePoints.map(pointX => pointX.x)\n measurePointsX: this.state.measurePoints.map(points => points.x).filter(measurePointsX => measurePointsX.length === 1).flat(),\n measurePointsY: this.state.measurePoints.map(points => points.y).filter(measurePointsY => measurePointsY.length === 1).flat(),\n measurePointsZ: this.state.measurePoints.map(points => points.z).filter(measurePointsZ => measurePointsZ.length === 1).flat(),\n dx: this.state.measurePoints.length === 1 ? 0 : parseFloat(measurePlot.distances[0].toFixed(3)),\n dy: this.state.measurePoints.length === 1 ? 0 : parseFloat(measurePlot.distances[1].toFixed(3)),\n dz: this.state.measurePoints.length === 1 ? 0 : parseFloat(measurePlot.distances[2].toFixed(3)),\n dxyz: this.state.measurePoints.length === 1 ? 0 : parseFloat(measurePlot.distances[3].toFixed(3)),\n dxy: this.state.measurePoints.length === 1 ? 0 : parseFloat(measurePlot.distances[4].toFixed(3)),\n dxz: this.state.measurePoints.length === 1 ? 0 : parseFloat(measurePlot.distances[5].toFixed(3)),\n dyz: this.state.measurePoints.length === 1 ? 0 : parseFloat(measurePlot.distances[6].toFixed(3)),\n })\n }\n\n\n // Return array as JSON to Streamlit\n console.log('Updating clicked point')\n Streamlit.setComponentValue(JSON.stringify(clickedPoints));\n }\n\n };\n };\n private createMeasureLine = (measurePoints: any) => {\n const dx = Math.abs(measurePoints[1].x - measurePoints[0].x)\n const dy = Math.abs(measurePoints[1].y - measurePoints[0].y)\n const dz = Math.abs(measurePoints[1].z - measurePoints[0].z)\n const dxyz = Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2) + Math.pow(dz, 2))\n\n const dxy = Math.sqrt(dx * dx + dy * dy);\n const dxz = Math.sqrt(dx * dx + dz * dz);\n const dyz = Math.sqrt(dy * dy + dz * dz);\n\n // xyz measure line\n const linexyz = {\n x: [...measurePoints[0].x, ...measurePoints[1].x],\n y: [...measurePoints[0].y, ...measurePoints[1].y],\n z: [...measurePoints[0].z, ...measurePoints[1].z],\n mode: 'lines',\n line: {\n color: 'purple',\n width: this.state.measureLineWidth,\n },\n type: 'scatter3d',\n name: 'Distance',\n text: [\"Point 1\", \"Point 2\"],\n hovertemplate: \"%{text}
\"\n + `Measured distance: ${dxyz.toFixed(3)}m
`\n + `ΔXY: ${dxy.toFixed(3)}
`\n + `ΔXZ: ${dxz.toFixed(3)}
`\n + `ΔYZ: ${dyz.toFixed(3)}`\n };\n\n // x measure line\n const linex = {\n x: [...measurePoints[0].x, ...measurePoints[1].x],\n y: [...measurePoints[0].y, ...measurePoints[0].y],\n z: [...measurePoints[0].z, ...measurePoints[0].z],\n mode: 'lines',\n line: {\n color: 'red',\n width: this.state.measureLineWidth,\n },\n type: 'scatter3d',\n name: 'Distance X',\n text: [\"Point 1\", \"Point 2\"],\n hovertemplate: `Measured distance X: ${dx.toFixed(3)}m`\n };\n\n // xz measure line\n const liney = {\n x: [...measurePoints[1].x, ...measurePoints[1].x],\n y: [...measurePoints[0].y, ...measurePoints[1].y],\n z: [...measurePoints[0].z, ...measurePoints[0].z],\n mode: 'lines',\n line: {\n color: 'green',\n width: this.state.measureLineWidth,\n },\n type: 'scatter3d',\n name: 'Distance Y',\n text: [\"Point 1\", \"Point 2\"],\n hovertemplate: `Measured distance Y: ${dy.toFixed(3)}m`\n };\n\n // z meassure line\n const linez = {\n x: [...measurePoints[1].x, ...measurePoints[1].x],\n y: [...measurePoints[1].y, ...measurePoints[1].y],\n z: [...measurePoints[0].z, ...measurePoints[1].z],\n mode: 'lines',\n line: {\n color: 'blue',\n width: 4,\n },\n type: 'scatter3d',\n name: 'Distance Z',\n text: [\"Point 1\", \"Point 2\"],\n hovertemplate: `Measured distance X: ${dz.toFixed(3)}m`\n };\n return (\n {\n lines: [linexyz, linex, liney, linez],\n distances: [dx, dy, dz, dxyz, dxy, dxz, dyz]\n }\n )\n }\n private updatePlotState = (plot_data: any): void => {\n this.setState({\n data: plot_data.data,\n // layout: plot_data.layout,\n // config: this.state.config,\n // frames: this.state.frames,\n\n })\n }\n private relayoutEventHandler = (eventData: any): void => {\n interface cameraPostionObject {\n cameraLayout: {\n x: number\n y: number\n z: number\n }\n }\n // console.log('relayout callback')\n if (eventData && eventData['scene.camera']) {\n const eye = eventData['scene.camera'].eye\n console.log('current eye', eye)\n const cameraPostion: cameraPostionObject = {\n cameraLayout: {\n x: eye.x,\n y: eye.y,\n z: eye.z\n }\n\n }\n // defer the initial state return because the return value from\n // the component to streamlit will be override by the layout return value\n // when we click on a point the first time the chart is initialized\n\n // console.log('relayout return')\n if (this.state.deferInitialLayoutReturn === true) {\n console.log('deferring layout return first time')\n this.state.deferInitialLayoutReturn = false\n } else {\n console.log('layout return')\n Streamlit.setComponentValue(JSON.stringify(cameraPostion))\n }\n\n }\n }\n}\n\nexport default withStreamlitConnection(StreamlitPlotlyEventsComponent);","import React from \"react\"\nimport ReactDOM from \"react-dom\"\nimport StreamlitPlotlyEventsComponent from \"./StreamlitPlotlyEventsComponent\"\n\nReactDOM.render(\n \n \n ,\n document.getElementById(\"root\")\n)\n"],"sourceRoot":""} \ No newline at end of file diff --git a/src/streamlit_plotly_events/frontend/build/static/js/main.9ae4b44f.chunk.js b/src/streamlit_plotly_events/frontend/build/static/js/main.9ae4b44f.chunk.js deleted file mode 100644 index 3aa0b3ee..00000000 --- a/src/streamlit_plotly_events/frontend/build/static/js/main.9ae4b44f.chunk.js +++ /dev/null @@ -1,2 +0,0 @@ -(this.webpackJsonpstreamlit_component_template=this.webpackJsonpstreamlit_component_template||[]).push([[0],{19:function(t,e,s){"use strict";s.r(e);var a=s(0),i=s.n(a),o=s(3),r=s.n(o),n=s(1),l=s(5),h=s.n(l);class d extends n.b{constructor(){super(...arguments),this.state={data:[],layout:{},clickedPoints:{x:0,y:0,z:0},measureMode:!1,measurePoints:[],measureLineWidth:0},this.render=()=>{var t=JSON.parse(this.props.args.plot_obj);const e=this.props.args.override_height,s=this.props.args.override_width,a=this.props.args.plot_clicked_point,o=(this.props.args.measure_line_width,this.props.args.clicked_point_size),r=this.props.args.click_event,l=this.props.args.select_event,d=this.props.args.hover_event,c=this.props.args.with_z;return n.a.setFrameHeight(e),i.a.createElement(h.a,{data:this.state.data,layout:this.state.layout,onClick:r?this.plotlyEventHandler(c,t,a,o):void 0,onSelected:l?this.plotlyEventHandler(c):void 0,onHover:d?this.plotlyEventHandler(c):void 0,style:{width:s,height:e},className:"stPlotlyChart"})},this.plotlyEventHandler=(t,e,s,a)=>i=>{let o=i.points[0],r=this.state.clickedPoints,l=!1;o.x!==r.x||o.y!==r.y||o.z!==r.z?(console.log("clicked point x diff"),l=!0,this.setState({clickedPoints:{x:o.x,y:o.y,z:o.z}})):l=!1;let h={};if(s&&!0===l){const t=i.points[0];t.curveNumber,t.pointNumber;console.log("current getPoint:",t);let s={x:[t.x],y:[t.y],z:[t.z],mode:"markers",marker:{color:"red"},showlegend:!1,type:void 0!==t.z?"scatter3d":"scatter",name:"Clicked Point",text:["Clicked Point"],hovertemplate:"%{text}
"+"x: ".concat(t.x.toFixed(3),"
")+"y: ".concat(t.y.toFixed(3),"
")+"z: ".concat(t.z.toFixed(3),"")};if(s.marker.size=void 0!==a?a:5,!0===this.state.measureMode){if(this.state.measurePoints.length>=2?(this.state.measurePoints.length=0,this.state.measurePoints.push(s)):this.state.measurePoints.push(s),2===this.state.measurePoints.length){const t=this.state.measurePoints;h=this.createMeasureLine(t),t.push(...h.lines)}console.log("measure points: ",this.state.measurePoints)}!0===this.state.measureMode?e.data.push(...this.state.measurePoints):e.data.push(s),console.log("plotting using: ",e),this.updatePlotState(e)}if(!0===l){let e=[];i.points.forEach((function(s){t?e.push({x:s.x,y:s.y,z:s.z,curveNumber:s.curveNumber,pointNumber:s.pointNumber,pointIndex:s.pointIndex}):e.push({x:s.x,y:s.y,curveNumber:s.curveNumber,pointNumber:s.pointNumber,pointIndex:s.pointIndex})})),!0===this.state.measureMode&&(console.log("measurepoint length: ",this.state.measurePoints.length),e.push({measurePointsX:this.state.measurePoints.map(t=>t.x).filter(t=>1===t.length).flat(),measurePointsY:this.state.measurePoints.map(t=>t.y).filter(t=>1===t.length).flat(),measurePointsZ:this.state.measurePoints.map(t=>t.z).filter(t=>1===t.length).flat(),dx:1===this.state.measurePoints.length?0:parseFloat(h.distances[0].toFixed(3)),dy:1===this.state.measurePoints.length?0:parseFloat(h.distances[1].toFixed(3)),dz:1===this.state.measurePoints.length?0:parseFloat(h.distances[2].toFixed(3)),dxyz:1===this.state.measurePoints.length?0:parseFloat(h.distances[3].toFixed(3)),dxy:1===this.state.measurePoints.length?0:parseFloat(h.distances[4].toFixed(3)),dxz:1===this.state.measurePoints.length?0:parseFloat(h.distances[5].toFixed(3)),dyz:1===this.state.measurePoints.length?0:parseFloat(h.distances[6].toFixed(3))})),n.a.setComponentValue(JSON.stringify(e))}},this.createMeasureLine=t=>{const e=Math.abs(t[1].x-t[0].x),s=Math.abs(t[1].y-t[0].y),a=Math.abs(t[1].z-t[0].z),i=Math.sqrt(Math.pow(e,2)+Math.pow(s,2)+Math.pow(a,2)),o=Math.sqrt(e*e+s*s),r=Math.sqrt(e*e+a*a),n=Math.sqrt(s*s+a*a);return{lines:[{x:[...t[0].x,...t[1].x],y:[...t[0].y,...t[1].y],z:[...t[0].z,...t[1].z],mode:"lines",line:{color:"purple",width:this.state.measureLineWidth},type:"scatter3d",name:"Distance",text:["Point 1","Point 2"],hovertemplate:"%{text}
"+"Measured distance: ".concat(i.toFixed(3),"m
")+"\u0394XY: ".concat(o.toFixed(3),"
")+"\u0394XZ: ".concat(r.toFixed(3),"
")+"\u0394YZ: ".concat(n.toFixed(3),"")},{x:[...t[0].x,...t[1].x],y:[...t[0].y,...t[0].y],z:[...t[0].z,...t[0].z],mode:"lines",line:{color:"red",width:this.state.measureLineWidth},type:"scatter3d",name:"Distance X",text:["Point 1","Point 2"],hovertemplate:"Measured distance X: ".concat(e.toFixed(3),"m")},{x:[...t[1].x,...t[1].x],y:[...t[0].y,...t[1].y],z:[...t[0].z,...t[0].z],mode:"lines",line:{color:"green",width:this.state.measureLineWidth},type:"scatter3d",name:"Distance Y",text:["Point 1","Point 2"],hovertemplate:"Measured distance Y: ".concat(s.toFixed(3),"m")},{x:[...t[1].x,...t[1].x],y:[...t[1].y,...t[1].y],z:[...t[0].z,...t[1].z],mode:"lines",line:{color:"blue",width:4},type:"scatter3d",name:"Distance Z",text:["Point 1","Point 2"],hovertemplate:"Measured distance X: ".concat(a.toFixed(3),"m")}],distances:[e,s,a,i,o,r,n]}},this.updatePlotState=t=>{this.setState({data:t.data})}}componentDidMount(){let t=JSON.parse(this.props.args.plot_obj),e=this.props.args.measure_mode,s=this.props.args.measure_line_width;t.layout.uirevision="true",console.log("current plot layout: ",t.layout),this.setState({data:t.data,layout:t.layout,clickedPoints:{x:0,y:0,z:0},measureMode:e,measurePoints:[],measureLineWidth:s})}}var c=Object(n.c)(d);r.a.render(i.a.createElement(i.a.StrictMode,null,i.a.createElement(c,null)),document.getElementById("root"))},6:function(t,e,s){t.exports=s(19)}},[[6,1,2]]]); -//# sourceMappingURL=main.9ae4b44f.chunk.js.map \ No newline at end of file diff --git a/src/streamlit_plotly_events/frontend/build/static/js/main.9ae4b44f.chunk.js.map b/src/streamlit_plotly_events/frontend/build/static/js/main.9ae4b44f.chunk.js.map deleted file mode 100644 index a7df84b1..00000000 --- a/src/streamlit_plotly_events/frontend/build/static/js/main.9ae4b44f.chunk.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"sources":["StreamlitPlotlyEventsComponent.tsx","index.tsx"],"names":["StreamlitPlotlyEventsComponent","StreamlitComponentBase","constructor","arguments","state","data","layout","clickedPoints","x","y","z","measureMode","measurePoints","measureLineWidth","render","plot_obj","JSON","parse","this","props","args","override_height","override_width","plotClickedPoint","clickedPointSize","click_event","select_event","hover_event","with_z","Streamlit","setFrameHeight","React","createElement","Plot","onClick","plotlyEventHandler","undefined","onSelected","onHover","style","width","height","className","plot_clicked_point","clicked_point_size","currentClickedPoint","points","previousClickedPointState","needToUpdate","console","log","setState","measurePlot","getPoint","curveNumber","pointNumber","clickPointPlot","mode","marker","color","showlegend","type","name","text","hovertemplate","concat","toFixed","size","length","push","createMeasureLine","lines","updatePlotState","forEach","arrayItem","pointIndex","measurePointsX","map","filter","flat","measurePointsY","measurePointsZ","dx","parseFloat","distances","dy","dz","dxyz","dxy","dxz","dyz","setComponentValue","stringify","Math","abs","sqrt","pow","line","plot_data","componentDidMount","measure_mode","measure_line_width","uirevision","withStreamlitConnection","ReactDOM","StrictMode","document","getElementById"],"mappings":"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","file":"static/js/main.9ae4b44f.chunk.js","sourcesContent":["import {\n Streamlit,\n StreamlitComponentBase,\n withStreamlitConnection,\n} from \"streamlit-component-lib\";\nimport React, { ReactNode } from \"react\";\nimport Plot from 'react-plotly.js';\n\ninterface MyState {\n data: any[];\n layout: any;\n clickedPoints: { x: number; y: number; z: number };\n measureMode: boolean;\n measurePoints: any[];\n measureLineWidth: number;\n}\n\nclass StreamlitPlotlyEventsComponent extends StreamlitComponentBase {\n // Create state for points\n state: MyState = {\n data: [],\n layout: {},\n clickedPoints: { x: 0.0, y: 0.0, z: 0.0 },\n measureMode: false,\n measurePoints: [],\n measureLineWidth: 0.0\n };\n\n // init the component state when first starting it\n // make the layout constant across updates\n componentDidMount() {\n let plot_obj = JSON.parse(this.props.args[\"plot_obj\"])\n let measure_mode: boolean = this.props.args['measure_mode']\n let measure_line_width: number = this.props.args['measure_line_width']\n\n plot_obj.layout.uirevision = 'true'\n console.log('current plot layout: ', plot_obj.layout)\n this.setState({\n data: plot_obj.data,\n layout: plot_obj.layout,\n clickedPoints: {\n x: 0,\n y: 0,\n z: 0,\n },\n measureMode: measure_mode,\n measurePoints: [],\n measureLineWidth: measure_line_width\n });\n }\n\n public render = (): ReactNode => {\n // Pull Plotly object from args and parse\n var plot_obj = JSON.parse(this.props.args[\"plot_obj\"]);\n const override_height = this.props.args[\"override_height\"];\n const override_width = this.props.args[\"override_width\"];\n const plotClickedPoint: boolean = this.props.args['plot_clicked_point']\n const measureLineWidth: number = this.props.args['measure_line_width']\n /*Get the current point size of the chart we are plotting to draw the extra clicked point\n with respect to the scale of the plotted points\n */\n const clickedPointSize: number = this.props.args['clicked_point_size']\n // Event booleans\n const click_event = this.props.args[\"click_event\"];\n const select_event = this.props.args[\"select_event\"];\n const hover_event = this.props.args[\"hover_event\"];\n const with_z = this.props.args[\"with_z\"];\n\n Streamlit.setFrameHeight(override_height);\n return (\n \n );\n };\n\n /** Click handler for plot. */\n private plotlyEventHandler = (with_z: boolean, plot_obj?: any, plot_clicked_point?: boolean, clicked_point_size?: number) => {\n\n // console.log('pressed on point')\n return (data: any) => {\n const getCircularReplacer = () => {\n const seen = new WeakSet();\n return (key: string, value: any) => {\n if (typeof value === \"object\" && value !== null) {\n if (seen.has(value)) {\n return '[Circular]';\n }\n seen.add(value);\n }\n return value;\n };\n };\n // JSON.parse(data.points[0])\n // console.log('pressed on point', JSON.stringify(data.points[0], getCircularReplacer(), 2))\n // console.log('current plot object', plot_obj)\n let currentClickedPoint = data.points[0]\n let previousClickedPointState = this.state.clickedPoints\n let needToUpdate = false\n if (currentClickedPoint.x !== previousClickedPointState.x ||\n currentClickedPoint.y !== previousClickedPointState.y ||\n currentClickedPoint.z !== previousClickedPointState.z) {\n console.log('clicked point x diff')\n needToUpdate = true\n this.setState({\n clickedPoints: {\n x: currentClickedPoint.x,\n y: currentClickedPoint.y,\n z: currentClickedPoint.z,\n }\n })\n } else {\n needToUpdate = false\n }\n\n // measurePlot is used within the lifetime of this function\n let measurePlot: any = {}\n if (plot_clicked_point && needToUpdate === true) {\n\n const getPoint = data.points[0]\n const traceIndex = getPoint.curveNumber\n const pointIndex = getPoint.pointNumber\n console.log(`current getPoint:`, getPoint)\n // console.log('current point number:', pointIndex)\n // console.log('current trace number', traceIndex)\n // console.log('current colors: ', plot_obj.data[traceIndex].marker.color[pointIndex])\n // console.log('current data for plot', this.state.data)\n\n // console.log('plot_obj', plot_obj)\n // create a point object to add to our current plot to indicate the clicked point\n interface newPoint {\n x: number[];\n y: number[];\n z?: number[];\n mode: string;\n marker: {\n color: string;\n size?: number;\n };\n showlegend: boolean;\n type: string;\n name: string,\n text: string[],\n hovertemplate: string,\n }\n\n let clickPointPlot: newPoint = {\n x: [getPoint.x],\n y: [getPoint.y],\n z: [getPoint.z],\n mode: 'markers',\n marker: {\n color: 'red',\n // size: clicked_point_size === 0.0 && undefined? 5.0: clicked_point_size*1.5,\n },\n showlegend: false,\n type: getPoint.z !== undefined ? 'scatter3d' : 'scatter',\n name: 'Clicked Point',\n text: ['Clicked Point'],\n hovertemplate: '%{text}
'\n + `x: ${getPoint.x.toFixed(3)}
`\n + `y: ${getPoint.y.toFixed(3)}
`\n + `z: ${getPoint.z.toFixed(3)}`\n\n };\n\n if (clicked_point_size !== undefined) {\n clickPointPlot.marker.size = clicked_point_size\n }\n else {\n clickPointPlot.marker.size = 5.0\n }\n\n\n // calculate measure points and plot them on the chart\n if (this.state.measureMode === true) {\n // let measurePoints = this.state.measurePoints\n // measurePoints.push(clickPointPlot)\n if (this.state.measurePoints.length >= 2) {\n this.state.measurePoints.length = 0;\n this.state.measurePoints.push(clickPointPlot)\n }\n else {\n this.state.measurePoints.push(clickPointPlot)\n }\n // calculate measure points when the length is 2 then plot on the chart\n if (this.state.measurePoints.length === 2) {\n const measurePoints = this.state.measurePoints\n\n measurePlot = this.createMeasureLine(measurePoints)\n measurePoints.push(...measurePlot.lines)\n }\n\n console.log('measure points: ', this.state.measurePoints)\n }\n // update the plot \n // append new trace of clicked point here then update plot state\n if (this.state.measureMode === true) {\n plot_obj.data.push(...this.state.measurePoints)\n }\n else {\n plot_obj.data.push(clickPointPlot)\n }\n console.log('plotting using: ', plot_obj)\n this.updatePlotState(plot_obj)\n }\n\n // Build array of points to return\n if (needToUpdate === true) {\n let clickedPoints: Array = [];\n data.points.forEach(function (arrayItem: any) {\n if (with_z) {\n clickedPoints.push({\n x: arrayItem.x,\n y: arrayItem.y,\n z: arrayItem.z,\n curveNumber: arrayItem.curveNumber,\n pointNumber: arrayItem.pointNumber,\n pointIndex: arrayItem.pointIndex\n });\n } else {\n clickedPoints.push({\n x: arrayItem.x,\n y: arrayItem.y,\n curveNumber: arrayItem.curveNumber,\n pointNumber: arrayItem.pointNumber,\n pointIndex: arrayItem.pointIndex\n });\n }\n });\n\n // Add measure points to return when in measure mode\n if (this.state.measureMode === true) {\n console.log('measurepoint length: ', this.state.measurePoints.length)\n clickedPoints.push({\n // x: this.state.measurePoints.map(pointX => pointX.x)\n measurePointsX: this.state.measurePoints.map(points => points.x).filter(measurePointsX => measurePointsX.length === 1).flat(),\n measurePointsY: this.state.measurePoints.map(points => points.y).filter(measurePointsY => measurePointsY.length === 1).flat(),\n measurePointsZ: this.state.measurePoints.map(points => points.z).filter(measurePointsZ => measurePointsZ.length === 1).flat(),\n dx: this.state.measurePoints.length === 1 ? 0 : parseFloat(measurePlot.distances[0].toFixed(3)),\n dy: this.state.measurePoints.length === 1 ? 0 : parseFloat(measurePlot.distances[1].toFixed(3)),\n dz: this.state.measurePoints.length === 1 ? 0 : parseFloat(measurePlot.distances[2].toFixed(3)),\n dxyz: this.state.measurePoints.length === 1 ? 0 : parseFloat(measurePlot.distances[3].toFixed(3)),\n dxy: this.state.measurePoints.length === 1 ? 0 : parseFloat(measurePlot.distances[4].toFixed(3)),\n dxz: this.state.measurePoints.length === 1 ? 0 : parseFloat(measurePlot.distances[5].toFixed(3)),\n dyz: this.state.measurePoints.length === 1 ? 0 : parseFloat(measurePlot.distances[6].toFixed(3)),\n })\n }\n\n // Return array as JSON to Streamlit\n Streamlit.setComponentValue(JSON.stringify(clickedPoints));\n }\n\n };\n };\n private createMeasureLine = (measurePoints: any) => {\n const dx = Math.abs(measurePoints[1].x - measurePoints[0].x)\n const dy = Math.abs(measurePoints[1].y - measurePoints[0].y)\n const dz = Math.abs(measurePoints[1].z - measurePoints[0].z)\n const dxyz = Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2) + Math.pow(dz, 2))\n\n const dxy = Math.sqrt(dx * dx + dy * dy);\n const dxz = Math.sqrt(dx * dx + dz * dz);\n const dyz = Math.sqrt(dy * dy + dz * dz);\n\n // xyz measure line\n const linexyz = {\n x: [...measurePoints[0].x, ...measurePoints[1].x],\n y: [...measurePoints[0].y, ...measurePoints[1].y],\n z: [...measurePoints[0].z, ...measurePoints[1].z],\n mode: 'lines',\n line: {\n color: 'purple',\n width: this.state.measureLineWidth,\n },\n type: 'scatter3d',\n name: 'Distance',\n text: [\"Point 1\", \"Point 2\"],\n hovertemplate: \"%{text}
\"\n + `Measured distance: ${dxyz.toFixed(3)}m
`\n + `ΔXY: ${dxy.toFixed(3)}
`\n + `ΔXZ: ${dxz.toFixed(3)}
`\n + `ΔYZ: ${dyz.toFixed(3)}`\n };\n\n // x measure line\n const linex = {\n x: [...measurePoints[0].x, ...measurePoints[1].x],\n y: [...measurePoints[0].y, ...measurePoints[0].y],\n z: [...measurePoints[0].z, ...measurePoints[0].z],\n mode: 'lines',\n line: {\n color: 'red',\n width: this.state.measureLineWidth,\n },\n type: 'scatter3d',\n name: 'Distance X',\n text: [\"Point 1\", \"Point 2\"],\n hovertemplate: `Measured distance X: ${dx.toFixed(3)}m`\n };\n\n // xz measure line\n const liney = {\n x: [...measurePoints[1].x, ...measurePoints[1].x],\n y: [...measurePoints[0].y, ...measurePoints[1].y],\n z: [...measurePoints[0].z, ...measurePoints[0].z],\n mode: 'lines',\n line: {\n color: 'green',\n width: this.state.measureLineWidth,\n },\n type: 'scatter3d',\n name: 'Distance Y',\n text: [\"Point 1\", \"Point 2\"],\n hovertemplate: `Measured distance Y: ${dy.toFixed(3)}m`\n };\n\n // z meassure line\n const linez = {\n x: [...measurePoints[1].x, ...measurePoints[1].x],\n y: [...measurePoints[1].y, ...measurePoints[1].y],\n z: [...measurePoints[0].z, ...measurePoints[1].z],\n mode: 'lines',\n line: {\n color: 'blue',\n width: 4,\n },\n type: 'scatter3d',\n name: 'Distance Z',\n text: [\"Point 1\", \"Point 2\"],\n hovertemplate: `Measured distance X: ${dz.toFixed(3)}m`\n };\n return (\n {\n lines: [linexyz, linex, liney, linez],\n distances: [dx, dy, dz, dxyz, dxy, dxz, dyz]\n }\n )\n }\n private updatePlotState = (plot_data: any): void => {\n this.setState({\n data: plot_data.data,\n // layout: plot_data.layout,\n // config: this.state.config,\n // frames: this.state.frames,\n\n })\n }\n}\n\nexport default withStreamlitConnection(StreamlitPlotlyEventsComponent);","import React from \"react\"\nimport ReactDOM from \"react-dom\"\nimport StreamlitPlotlyEventsComponent from \"./StreamlitPlotlyEventsComponent\"\n\nReactDOM.render(\n \n \n ,\n document.getElementById(\"root\")\n)\n"],"sourceRoot":""} \ No newline at end of file diff --git a/src/streamlit_plotly_events/frontend/src/StreamlitPlotlyEventsComponent.tsx b/src/streamlit_plotly_events/frontend/src/StreamlitPlotlyEventsComponent.tsx index f502650b..d71e5bad 100644 --- a/src/streamlit_plotly_events/frontend/src/StreamlitPlotlyEventsComponent.tsx +++ b/src/streamlit_plotly_events/frontend/src/StreamlitPlotlyEventsComponent.tsx @@ -13,6 +13,8 @@ interface MyState { measureMode: boolean; measurePoints: any[]; measureLineWidth: number; + camera?: number[] + deferInitialLayoutReturn?: boolean } class StreamlitPlotlyEventsComponent extends StreamlitComponentBase { @@ -45,7 +47,8 @@ class StreamlitPlotlyEventsComponent extends StreamlitComponentBase { }, measureMode: measure_mode, measurePoints: [], - measureLineWidth: measure_line_width + measureLineWidth: measure_line_width, + deferInitialLayoutReturn: true }); } @@ -65,6 +68,7 @@ class StreamlitPlotlyEventsComponent extends StreamlitComponentBase { const select_event = this.props.args["select_event"]; const hover_event = this.props.args["hover_event"]; const with_z = this.props.args["with_z"]; + const get_relayout = this.props.args['get_relayout'] Streamlit.setFrameHeight(override_height); return ( @@ -76,6 +80,7 @@ class StreamlitPlotlyEventsComponent extends StreamlitComponentBase { onClick={click_event ? this.plotlyEventHandler(with_z, plot_obj, plotClickedPoint, clickedPointSize) : undefined} onSelected={select_event ? this.plotlyEventHandler(with_z) : undefined} onHover={hover_event ? this.plotlyEventHandler(with_z) : undefined} + onRelayout={get_relayout ? this.relayoutEventHandler : undefined} style={{ width: override_width, height: override_height }} className="stPlotlyChart" /> @@ -209,7 +214,7 @@ class StreamlitPlotlyEventsComponent extends StreamlitComponentBase { else { plot_obj.data.push(clickPointPlot) } - console.log('plotting using: ', plot_obj) + // console.log('plotting using: ', plot_obj) this.updatePlotState(plot_obj) } @@ -255,7 +260,9 @@ class StreamlitPlotlyEventsComponent extends StreamlitComponentBase { }) } + // Return array as JSON to Streamlit + console.log('Updating clicked point') Streamlit.setComponentValue(JSON.stringify(clickedPoints)); } @@ -354,6 +361,41 @@ class StreamlitPlotlyEventsComponent extends StreamlitComponentBase { }) } + private relayoutEventHandler = (eventData: any): void => { + interface cameraPostionObject { + cameraLayout: { + x: number + y: number + z: number + } + } + // console.log('relayout callback') + if (eventData && eventData['scene.camera']) { + const eye = eventData['scene.camera'].eye + console.log('current eye', eye) + const cameraPostion: cameraPostionObject = { + cameraLayout: { + x: eye.x, + y: eye.y, + z: eye.z + } + + } + // defer the initial state return because the return value from + // the component to streamlit will be override by the layout return value + // when we click on a point the first time the chart is initialized + + // console.log('relayout return') + if (this.state.deferInitialLayoutReturn === true) { + console.log('deferring layout return first time') + this.state.deferInitialLayoutReturn = false + } else { + console.log('layout return') + Streamlit.setComponentValue(JSON.stringify(cameraPostion)) + } + + } + } } export default withStreamlitConnection(StreamlitPlotlyEventsComponent); \ No newline at end of file