Repository: h2oai/wave
File: ui/src/plot.tsx (TypeScript)

Code before:
              'g2-tooltip': {
                backgroundColor: cssVar('$card'),
                color: cssVar('$text')
              },
            },
            customContent: (_title, items) => {
              ReactDOM.render(<PlotTooltip items={items} originalItems={originalDataRef.current} dateKeys={dateKeys} />, tooltipContainer)
              return tooltipContainer
            }
          })
          currentChart.current = chart
          chart.data(data)
          // filter out annotation marks
          model.plot.marks.filter(({ x, y }) => x == null && y == null).forEach(({ interactive = true }, idx) =>
            chart.geometries[idx].customInfo({ interactive })
          )
          if (model.events) {
            for (const event of model.events) {
              switch (event) {
                case 'select_marks': {
                  chart.interaction('element-single-selected')
                  chart.on('element:statechange', (ev: any) => {
                    const e = ev.gEvent.originalEvent
                    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.wave_idx, ...originalDataRef.current[e.element.data.wave_idx] }]
                      wave.emit(model.name, event, ret)
                    }
                  })
                }
              }
            }
          }
          chart.render()
          themeWatchRef.current = on(themeB, themesB, () => {
            cat10 = cat10.map(cssVarValue)
            const [geometries, annotations] = makeMarks(marks)
            chart.updateOptions({ geometries, annotations })
            chart.theme(getPlotTheme())
            chart.render(true)
          })
        }
      },
      updateData = React.useCallback(() => {
        const el = container.current
        if (!el || !currentChart.current || !currentPlot.current) return
        const
          raw_data = unpack<any[]>(model.data),
          data = refactorData(raw_data, currentPlot.current.marks)
        originalDataRef.current = unpack<any[]>(model.data)

Review comment (suggestion):
You probably forgot to update `idx` to `wave_idx` when handling events in case you got array of objects.

```suggestion
                        ? e.element.data.map(({ wave_idx }: any) => ({ idx: wave_idx, ...originalDataRef.current[wave_idx] }))
```
Property `idx` does not exist when clicking on line:

<img width="1405" alt="image" src="https://github.com/h2oai/wave/assets/23740173/79dbea9e-7c61-4352-9d76-925bb6c3d314">

Or another solution could be:
```suggestion
                        ?  e.element.data.map((_item: any, idx: I) => ({ idx, ...originalDataRef.current[idx] }))
```


Code after:
            showCrosshairs: true,
            crosshairs: { type: 'xy' },
            domStyles: {
              'g2-tooltip': {
                backgroundColor: cssVar('$card'),
                color: cssVar('$text')
              },
            },
            customContent: (_title, items) => {
              ReactDOM.render(<PlotTooltip items={items} originalItems={originalDataRef.current} dateKeys={dateKeys} />, tooltipContainer)
              return tooltipContainer
            }
          })
          currentChart.current = chart
          chart.data(data)
          // filter out annotation marks
          model.plot.marks.filter(({ x, y }) => x == null && y == null).forEach(({ interactive = true }, idx) =>
            chart.geometries[idx].customInfo({ interactive })
          )
          if (model.events) {
            for (const event of model.events) {
              switch (event) {
                case 'select_marks': {
                  chart.interaction('element-single-selected')
                  chart.on('element:statechange', (ev: any) => {
                    const e = ev.gEvent.originalEvent
                    if (e.stateStatus && e.state === 'selected' && model.name && e.element.geometry.customOption.interactive) {
                      const ret = Array.isArray(e.element?.data)
                        ? e.element.data.map(({ wave_idx }: any) => ({ idx: wave_idx, ...originalDataRef.current[wave_idx] }))
                        : [{ idx: e.element.data.wave_idx, ...originalDataRef.current[e.element.data.wave_idx] }]
                      wave.emit(model.name, event, ret)
                    }
                  })
                }
              }
            }
          }
          chart.render()
          themeWatchRef.current = on(themeB, themesB, () => {
            cat10 = cat10.map(cssVarValue)
            const [geometries, annotations] = makeMarks(marks)
            chart.updateOptions({ geometries, annotations })
            chart.theme(getPlotTheme())
            chart.render(true)
          })
        }
      },
      updateData = React.useCallback(() => {
        const el = container.current
        if (!el || !currentChart.current || !currentPlot.current) return
        const