From a57f84d5a4b7705a73c85f893084f24a7ab643cc Mon Sep 17 00:00:00 2001
From: Ceyda Cinarel <15624271+cceyda@users.noreply.github.com>
Date: Wed, 29 Jun 2022 04:57:33 +0000
Subject: [PATCH] add option to return custom fields

---
 src/streamlit_plotly_events/__init__.py       |  2 ++
 .../frontend/package.json                     |  3 ++-
 .../src/StreamlitPlotlyEventsComponent.tsx    | 21 ++++++++++++-------
 3 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/streamlit_plotly_events/__init__.py b/src/streamlit_plotly_events/__init__.py
index abd03c49..d21d06cf 100644
--- a/src/streamlit_plotly_events/__init__.py
+++ b/src/streamlit_plotly_events/__init__.py
@@ -51,6 +51,7 @@ def plotly_events(
     hover_event=False,
     override_height=450,
     override_width="100%",
+    return_fields=False,
     key=None,
 ):
     """Create a new instance of "plotly_events".
@@ -102,6 +103,7 @@ def plotly_events(
         click_event=click_event,
         select_event=select_event,
         hover_event=hover_event,
+        return_fields=return_fields,
         default="[]",  # Default return empty JSON list
     )
 
diff --git a/src/streamlit_plotly_events/frontend/package.json b/src/streamlit_plotly_events/frontend/package.json
index 0ef89395..f6580297 100644
--- a/src/streamlit_plotly_events/frontend/package.json
+++ b/src/streamlit_plotly_events/frontend/package.json
@@ -11,12 +11,13 @@
     "@types/react": "^16.9.0",
     "@types/react-dom": "^16.9.0",
     "plotly.js": "^1.58.2",
+    "pretty-format": "^28.1.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-plotly.js": "^2.4.0",
     "react-scripts": "3.4.1",
     "streamlit-component-lib": "^1.2.0",
-    "typescript": "~3.7.2"
+    "typescript": "~3.8.0"
   },
   "devDependencies": {
     "@types/plotly.js": "^1.50.16",
diff --git a/src/streamlit_plotly_events/frontend/src/StreamlitPlotlyEventsComponent.tsx b/src/streamlit_plotly_events/frontend/src/StreamlitPlotlyEventsComponent.tsx
index 41cd66c0..d937b6e6 100644
--- a/src/streamlit_plotly_events/frontend/src/StreamlitPlotlyEventsComponent.tsx
+++ b/src/streamlit_plotly_events/frontend/src/StreamlitPlotlyEventsComponent.tsx
@@ -17,6 +17,7 @@ class StreamlitPlotlyEventsComponent extends StreamlitComponentBase {
     const click_event = this.props.args["click_event"];
     const select_event = this.props.args["select_event"];
     const hover_event = this.props.args["hover_event"];
+    
 
     Streamlit.setFrameHeight(override_height);
     return (
@@ -36,16 +37,22 @@ class StreamlitPlotlyEventsComponent extends StreamlitComponentBase {
 
   /** Click handler for plot. */
   private plotlyEventHandler = (data: any) => {
+    const return_fields = this.props.args["return_fields"];
+    
     // Build array of points to return
     var clickedPoints: Array<any> = [];
     data.points.forEach(function (arrayItem: any) {
-      clickedPoints.push({
-        x: arrayItem.x,
-        y: arrayItem.y,
-        curveNumber: arrayItem.curveNumber,
-        pointNumber: arrayItem.pointNumber,
-        pointIndex: arrayItem.pointIndex
-      })
+      let clickedPoint: any = {};
+      clickedPoint.x = arrayItem.x;
+      clickedPoint.y = arrayItem.y;
+      clickedPoint.pointNumber = arrayItem.pointNumber;
+      clickedPoint.pointIndex = arrayItem.pointIndex;
+      clickedPoint.curveNumber = arrayItem.curveNumber;
+      if (return_fields){
+        clickedPoint.customdata = arrayItem.customdata;
+      }
+
+      clickedPoints.push(clickedPoint);
     });
 
     // Return array as JSON to Streamlit