fix!: Emit originally passed data as select events instead of mutated…

… ones. (#2151)
h2oai · Jan 15, 2024 · fe2dd0e · fe2dd0e
1 parent 6e5d9dc
commit fe2dd0e
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 21 deletions.
diff --git a/py/examples/plot_events_disabled.py b/py/examples/plot_events_disabled.py
@@ -1,4 +1,4 @@
-# Plot / Events/ Disabled
+# Plot / Events / Disabled
 # Customize for which marks on a #plot card you do not wish to handle #events .
 # ---
 from h2o_wave import main, app, Q, ui, data
@@ -9,24 +9,24 @@ async def serve(q: Q):
     if not q.client.initialized:
         q.client.initialized = True
         q.page['example'] = ui.plot_card(
-                box='1 1 4 5',
-                title='Interval, range',
-                data=data('year value', 8, rows=[
-                    ('1991', 3),
-                    ('1992', 4),
-                    ('1993', 3.5),
-                    ('1994', 5),
-                    ('1995', 4.9),
-                    ('1996', 6),
-                    ('1997', 7),
-                    ('1998', 9),
-                    ('1999', 13),
-                ]),
-                plot=ui.plot([
-                    ui.mark(type='line', x_scale='time', x='=year', y='=value', y_min=0, interactive=False), 
-                    ui.mark(type='point', x='=year', y='=value', size=8, fill_color='red')
-                ]),
-                events=['select_marks'],
+            box='1 1 4 5',
+            title='Plot events - disabled',
+            data=data('year value', 8, rows=[
+                ('1991', 3),
+                ('1992', 4),
+                ('1993', 3.5),
+                ('1994', 5),
+                ('1995', 4.9),
+                ('1996', 6),
+                ('1997', 7),
+                ('1998', 9),
+                ('1999', 13),
+            ]),
+            plot=ui.plot([
+                ui.mark(type='line', x_scale='time', x='=year', y='=value', y_min=0, interactive=False),
+                ui.mark(type='point', x='=year', y='=value', size=8, fill_color='red')
+            ]),
+            events=['select_marks'],
         )
         q.page['details'] = ui.markdown_card(
             box='1 6 4 2',

diff --git a/ui/src/plot.tsx b/ui/src/plot.tsx
@@ -1126,8 +1126,11 @@ export const
                   chart.interaction('element-single-selected')
                   chart.on('element:statechange', (ev: any) => {
                     const e = ev.gEvent.originalEvent
-                    if (e.stateStatus && e.state === 'selected') {
-                      if (model.name && e.element.geometry.customOption.interactive) wave.emit(model.name, event, [e.element?.data])
+                    if (e.stateStatus && e.state === 'selected' && model.name && e.element.geometry.customOption.interactive) {
+                      const ret = Array.isArray(e.element?.data)
+                        ? e.element.data.map(({ idx }: any) => ({ idx, ...originalDataRef.current[idx] }))
+                        : [{ idx: e.element.data.idx, ...originalDataRef.current[e.element.data.idx] }]
+                      wave.emit(model.name, event, ret)
                     }
                   })
                 }