diff --git a/src/streamlit_plotly_events/frontend/build/asset-manifest.json b/src/streamlit_plotly_events/frontend/build/asset-manifest.json index c5be2435..cc573bab 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.0d52cef4.chunk.js", - "main.js.map": "./static/js/main.0d52cef4.chunk.js.map", + "main.js": "./static/js/main.b4df662e.chunk.js", + "main.js.map": "./static/js/main.b4df662e.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.73c82ebc749cad31f76721ccef17783d.js": "./precache-manifest.73c82ebc749cad31f76721ccef17783d.js", + "precache-manifest.9c7844760ffbfd02bfd7cf00c7dc1f22.js": "./precache-manifest.9c7844760ffbfd02bfd7cf00c7dc1f22.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.0d52cef4.chunk.js" + "static/js/main.b4df662e.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 9ad99e09..11ad3e2f 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.73c82ebc749cad31f76721ccef17783d.js b/src/streamlit_plotly_events/frontend/build/precache-manifest.9c7844760ffbfd02bfd7cf00c7dc1f22.js similarity index 75% rename from src/streamlit_plotly_events/frontend/build/precache-manifest.73c82ebc749cad31f76721ccef17783d.js rename to src/streamlit_plotly_events/frontend/build/precache-manifest.9c7844760ffbfd02bfd7cf00c7dc1f22.js index a65462d7..9eb59cee 100644 --- a/src/streamlit_plotly_events/frontend/build/precache-manifest.73c82ebc749cad31f76721ccef17783d.js +++ b/src/streamlit_plotly_events/frontend/build/precache-manifest.9c7844760ffbfd02bfd7cf00c7dc1f22.js @@ -1,6 +1,6 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([ { - "revision": "4943db179b28420e971ab8a145a8b250", + "revision": "e1e87c1e8266a15892e8ee1f57cd1934", "url": "./index.html" }, { @@ -12,8 +12,8 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([ "url": "./static/js/2.9330ddf9.chunk.js.LICENSE.txt" }, { - "revision": "ebe52d416d15b587ff9d", - "url": "./static/js/main.0d52cef4.chunk.js" + "revision": "7f4eec1dbcb1d3e044c4", + "url": "./static/js/main.b4df662e.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 0c1fe6bf..e8f51825 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.73c82ebc749cad31f76721ccef17783d.js" + "./precache-manifest.9c7844760ffbfd02bfd7cf00c7dc1f22.js" ); self.addEventListener('message', (event) => { diff --git a/src/streamlit_plotly_events/frontend/build/static/js/main.0d52cef4.chunk.js b/src/streamlit_plotly_events/frontend/build/static/js/main.b4df662e.chunk.js similarity index 98% rename from src/streamlit_plotly_events/frontend/build/static/js/main.0d52cef4.chunk.js rename to src/streamlit_plotly_events/frontend/build/static/js/main.b4df662e.chunk.js index 77ea97db..4b32427b 100644 --- a/src/streamlit_plotly_events/frontend/build/static/js/main.0d52cef4.chunk.js +++ b/src/streamlit_plotly_events/frontend/build/static/js/main.b4df662e.chunk.js @@ -1,2 +1,2 @@ -(this.webpackJsonpstreamlit_component_template=this.webpackJsonpstreamlit_component_template||[]).push([[0],{19:function(t,e,s){"use strict";s.r(e);var i=s(0),a=s.n(i),o=s(3),n=s.n(o),r=s(1),l=s(5),c=s.n(l);class h extends r.b{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})}constructor(t){super(t),this.state={data:[],layout:{},clickedPoints:{x:0,y:0,z:0},measureMode:!1,measurePoints:[],measureLineWidth:0},this.isProcessing=!1,this.processingTimeout=null,this.render=()=>{var t=JSON.parse(this.props.args.plot_obj);const e=this.props.args.override_height,s=this.props.args.override_width,i=this.props.args.plot_clicked_point,o=this.props.args.clicked_point_size,n=this.props.args.click_event,l=this.props.args.select_event,h=this.props.args.hover_event,d=this.props.args.with_z,u=this.props.args.get_relayout;return r.a.setFrameHeight(e),a.a.createElement(c.a,{data:this.state.data,layout:this.state.layout,onClick:n?this.plotlyEventHandler(d,t,i,o):void 0,onSelected:l?this.plotlyEventHandler(d):void 0,onHover:h?this.plotlyEventHandler(d):void 0,onRelayout:u?this.relayoutEventHandler:void 0,style:{width:s,height:e},className:"stPlotlyChart"})},this.plotlyEventHandler=(t,e,s,i)=>a=>{let o=a.points[0],n=this.state.clickedPoints,r=!1;o.x!==n.x||o.y!==n.y||o.z!==n.z?(console.log("clicked point x diff"),r=!0,this.setState({clickedPoints:{x:o.x,y:o.y,z:o.z}})):r=!1;let l={};if(s&&!0===r){const t=a.points[0];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!==i?i: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;l=this.createMeasureLine(t),t.push(...l.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===r){let e=[];a.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(l.distances[0].toFixed(3)),dy:1===this.state.measurePoints.length?0:parseFloat(l.distances[1].toFixed(3)),dz:1===this.state.measurePoints.length?0:parseFloat(l.distances[2].toFixed(3)),dxyz:1===this.state.measurePoints.length?0:parseFloat(l.distances[3].toFixed(3)),dxy:1===this.state.measurePoints.length?0:parseFloat(l.distances[4].toFixed(3)),dxz:1===this.state.measurePoints.length?0:parseFloat(l.distances[5].toFixed(3)),dyz:1===this.state.measurePoints.length?0:parseFloat(l.distances[6].toFixed(3))})),console.log("Updating clicked point"),this.debouncedStreamlitReturn(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),i=Math.abs(t[1].z-t[0].z),a=Math.sqrt(Math.pow(e,2)+Math.pow(s,2)+Math.pow(i,2)),o=Math.sqrt(e*e+s*s),n=Math.sqrt(e*e+i*i),r=Math.sqrt(s*s+i*i);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(a.toFixed(3),"m
")+"\u0394XY: ".concat(o.toFixed(3),"
")+"\u0394XZ: ".concat(n.toFixed(3),"
")+"\u0394YZ: ".concat(r.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(i.toFixed(3),"m")}],distances:[e,s,i,a,o,n,r]}},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}};this.debouncedStreamlitReturn(JSON.stringify(s))}},this.debouncedStreamlitReturn=void 0,this.customLeadingDebounce=(t,e)=>s=>{this.isProcessing||(this.isProcessing=!0,t(s),this.processingTimeout&&clearTimeout(this.processingTimeout),this.processingTimeout=setTimeout(()=>{this.isProcessing=!1},e))},this.debouncedStreamlitReturn=this.customLeadingDebounce(t=>{r.a.setComponentValue(t)},300)}}var d=Object(r.c)(h);n.a.render(a.a.createElement(a.a.StrictMode,null,a.a.createElement(d,null)),document.getElementById("root"))},6:function(t,e,s){t.exports=s(19)}},[[6,1,2]]]); -//# sourceMappingURL=main.0d52cef4.chunk.js.map \ No newline at end of file +(this.webpackJsonpstreamlit_component_template=this.webpackJsonpstreamlit_component_template||[]).push([[0],{19:function(t,e,s){"use strict";s.r(e);var i=s(0),a=s.n(i),o=s(3),n=s.n(o),r=s(1),l=s(5),c=s.n(l);class h extends r.b{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})}constructor(t){super(t),this.state={data:[],layout:{},clickedPoints:{x:0,y:0,z:0},measureMode:!1,measurePoints:[],measureLineWidth:0},this.isProcessing=!1,this.processingTimeout=null,this.render=()=>{var t=JSON.parse(this.props.args.plot_obj);const e=this.props.args.override_height,s=this.props.args.override_width,i=this.props.args.plot_clicked_point,o=this.props.args.clicked_point_size,n=this.props.args.click_event,l=this.props.args.select_event,h=this.props.args.hover_event,d=this.props.args.with_z,u=this.props.args.get_relayout;return r.a.setFrameHeight(e),a.a.createElement(c.a,{data:this.state.data,layout:this.state.layout,onClick:n?this.plotlyEventHandler(d,t,i,o):void 0,onSelected:l?this.plotlyEventHandler(d):void 0,onHover:h?this.plotlyEventHandler(d):void 0,onRelayout:u?this.relayoutEventHandler:void 0,style:{width:s,height:e},className:"stPlotlyChart"})},this.plotlyEventHandler=(t,e,s,i)=>a=>{let o=a.points[0],n=this.state.clickedPoints,r=!1;o.x!==n.x||o.y!==n.y||o.z!==n.z?(console.log("clicked point x diff"),r=!0,this.setState({clickedPoints:{x:o.x,y:o.y,z:o.z}})):r=!1;let l={};if(s&&!0===r){const t=a.points[0];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!==i?i: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;l=this.createMeasureLine(t),t.push(...l.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===r){let e=[];a.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(l.distances[0].toFixed(3)),dy:1===this.state.measurePoints.length?0:parseFloat(l.distances[1].toFixed(3)),dz:1===this.state.measurePoints.length?0:parseFloat(l.distances[2].toFixed(3)),dxyz:1===this.state.measurePoints.length?0:parseFloat(l.distances[3].toFixed(3)),dxy:1===this.state.measurePoints.length?0:parseFloat(l.distances[4].toFixed(3)),dxz:1===this.state.measurePoints.length?0:parseFloat(l.distances[5].toFixed(3)),dyz:1===this.state.measurePoints.length?0:parseFloat(l.distances[6].toFixed(3))})),console.log("Updating clicked point"),this.debouncedStreamlitReturn(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),i=Math.abs(t[1].z-t[0].z),a=Math.sqrt(Math.pow(e,2)+Math.pow(s,2)+Math.pow(i,2)),o=Math.sqrt(e*e+s*s),n=Math.sqrt(e*e+i*i),r=Math.sqrt(s*s+i*i);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(a.toFixed(3),"m
")+"\u0394XY: ".concat(o.toFixed(3),"
")+"\u0394XZ: ".concat(n.toFixed(3),"
")+"\u0394YZ: ".concat(r.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(i.toFixed(3),"m")}],distances:[e,s,i,a,o,n,r]}},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}};this.debouncedStreamlitReturn(JSON.stringify(s))}},this.debouncedStreamlitReturn=void 0,this.customLeadingDebounce=(t,e)=>s=>{this.isProcessing||(this.isProcessing=!0,t(s),this.processingTimeout&&clearTimeout(this.processingTimeout),this.processingTimeout=setTimeout(()=>{this.isProcessing=!1},e))},this.debouncedStreamlitReturn=this.customLeadingDebounce(t=>{r.a.setComponentValue(t)},100)}}var d=Object(r.c)(h);n.a.render(a.a.createElement(a.a.StrictMode,null,a.a.createElement(d,null)),document.getElementById("root"))},6:function(t,e,s){t.exports=s(19)}},[[6,1,2]]]); +//# sourceMappingURL=main.b4df662e.chunk.js.map \ No newline at end of file diff --git a/src/streamlit_plotly_events/frontend/build/static/js/main.0d52cef4.chunk.js.map b/src/streamlit_plotly_events/frontend/build/static/js/main.b4df662e.chunk.js.map similarity index 99% rename from src/streamlit_plotly_events/frontend/build/static/js/main.0d52cef4.chunk.js.map rename to src/streamlit_plotly_events/frontend/build/static/js/main.b4df662e.chunk.js.map index 707d4836..1e772a0c 100644 --- a/src/streamlit_plotly_events/frontend/build/static/js/main.0d52cef4.chunk.js.map +++ b/src/streamlit_plotly_events/frontend/build/static/js/main.b4df662e.chunk.js.map @@ -1 +1 @@ -{"version":3,"sources":["StreamlitPlotlyEventsComponent.tsx","index.tsx"],"names":["StreamlitPlotlyEventsComponent","StreamlitComponentBase","componentDidMount","plot_obj","JSON","parse","this","props","args","measure_mode","measure_line_width","layout","uirevision","console","log","setState","data","clickedPoints","x","y","z","measureMode","measurePoints","measureLineWidth","deferInitialLayoutReturn","constructor","super","state","isProcessing","processingTimeout","render","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","measurePlot","getPoint","clickPointPlot","mode","marker","color","showlegend","type","name","text","hovertemplate","concat","toFixed","size","length","push","createMeasureLine","lines","updatePlotState","forEach","arrayItem","curveNumber","pointNumber","pointIndex","measurePointsX","map","filter","flat","measurePointsY","measurePointsZ","dx","parseFloat","distances","dy","dz","dxyz","dxy","dxz","dyz","debouncedStreamlitReturn","stringify","Math","abs","sqrt","pow","line","plot_data","eventData","eye","cameraPostion","cameraLayout","customLeadingDebounce","func","wait","value","clearTimeout","setTimeout","setComponentValue","withStreamlitConnection","ReactDOM","StrictMode","document","getElementById"],"mappings":"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","file":"static/js/main.0d52cef4.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\ninterface cameraPostionObject {\n cameraLayout: {\n x: number\n y: number\n z: number\n }\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 private isProcessing: boolean = false;\n private processingTimeout: NodeJS.Timeout | null = null;\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 \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 console.log('Updating clicked point')\n this.debouncedStreamlitReturn(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\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 // this.debouncedStreamlitReturn(JSON.stringify(cameraPostion))\n // }\n this.debouncedStreamlitReturn(JSON.stringify(cameraPostion))\n\n }\n }\n private debouncedStreamlitReturn: (value: string) => void;\n constructor(props: any) {\n super(props);\n this.debouncedStreamlitReturn = this.customLeadingDebounce((value: string) => {\n Streamlit.setComponentValue(value);\n }, 300);\n }\n\n private customLeadingDebounce = (func: (value: string) => void, wait: number) => {\n return (value: string) => {\n if (!this.isProcessing) {\n this.isProcessing = true;\n func(value);\n\n if (this.processingTimeout) {\n clearTimeout(this.processingTimeout);\n }\n\n this.processingTimeout = setTimeout(() => {\n this.isProcessing = false;\n }, wait);\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 +{"version":3,"sources":["StreamlitPlotlyEventsComponent.tsx","index.tsx"],"names":["StreamlitPlotlyEventsComponent","StreamlitComponentBase","componentDidMount","plot_obj","JSON","parse","this","props","args","measure_mode","measure_line_width","layout","uirevision","console","log","setState","data","clickedPoints","x","y","z","measureMode","measurePoints","measureLineWidth","deferInitialLayoutReturn","constructor","super","state","isProcessing","processingTimeout","render","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","measurePlot","getPoint","clickPointPlot","mode","marker","color","showlegend","type","name","text","hovertemplate","concat","toFixed","size","length","push","createMeasureLine","lines","updatePlotState","forEach","arrayItem","curveNumber","pointNumber","pointIndex","measurePointsX","map","filter","flat","measurePointsY","measurePointsZ","dx","parseFloat","distances","dy","dz","dxyz","dxy","dxz","dyz","debouncedStreamlitReturn","stringify","Math","abs","sqrt","pow","line","plot_data","eventData","eye","cameraPostion","cameraLayout","customLeadingDebounce","func","wait","value","clearTimeout","setTimeout","setComponentValue","withStreamlitConnection","ReactDOM","StrictMode","document","getElementById"],"mappings":"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","file":"static/js/main.b4df662e.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\ninterface cameraPostionObject {\n cameraLayout: {\n x: number\n y: number\n z: number\n }\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 private isProcessing: boolean = false;\n private processingTimeout: NodeJS.Timeout | null = null;\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 \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 console.log('Updating clicked point')\n this.debouncedStreamlitReturn(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\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 // this.debouncedStreamlitReturn(JSON.stringify(cameraPostion))\n // }\n this.debouncedStreamlitReturn(JSON.stringify(cameraPostion))\n\n }\n }\n private debouncedStreamlitReturn: (value: string) => void;\n constructor(props: any) {\n super(props);\n this.debouncedStreamlitReturn = this.customLeadingDebounce((value: string) => {\n Streamlit.setComponentValue(value);\n }, 100);\n }\n\n private customLeadingDebounce = (func: (value: string) => void, wait: number) => {\n return (value: string) => {\n if (!this.isProcessing) {\n this.isProcessing = true;\n func(value);\n\n if (this.processingTimeout) {\n clearTimeout(this.processingTimeout);\n }\n\n this.processingTimeout = setTimeout(() => {\n this.isProcessing = false;\n }, wait);\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 d70cf48c..12b70e6e 100644 --- a/src/streamlit_plotly_events/frontend/src/StreamlitPlotlyEventsComponent.tsx +++ b/src/streamlit_plotly_events/frontend/src/StreamlitPlotlyEventsComponent.tsx @@ -393,7 +393,7 @@ class StreamlitPlotlyEventsComponent extends StreamlitComponentBase { super(props); this.debouncedStreamlitReturn = this.customLeadingDebounce((value: string) => { Streamlit.setComponentValue(value); - }, 300); + }, 100); } private customLeadingDebounce = (func: (value: string) => void, wait: number) => {