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

Code before:
        chart.position(tooltipCfg).tooltip(tooltipCfg)
      },
      init = async () => {
        // Map CSS var colors to their hex values.
        cat10 = cat10.map(cssVarValue)
        const el = container.current
        if (!el) return
        // If card does not have specified height, it uses content. Since the wrapper is empty, it takes very little space - set to 300px by default.
        if (el.clientHeight < 30) el.style.height = '300px'
        const
          raw_data = unpack<any[]>(model.data),
          raw_plot = unpack<Plot>(model.plot),
          marks = raw_plot.marks.map(refactorMark),
          plot: Plot = { marks },
          space = spaceTypeOf(raw_data, marks),
          data = refactorData(raw_data, plot.marks),
          { Chart } = await import('@antv/g2'),
          tooltipCfg = Object.keys(data[0]).join('*'),
          chart = plot.marks ? new Chart(makeChart(el, space, plot.marks, model.interactions || [])) : null
        currentPlot.current = plot
        if (chart) {
          marks.forEach(({ type }) => {
            switch (type) {
              case 'interval':
                setChartTooltip(chart.interval(), tooltipCfg)
                break
              case 'line':
                setChartTooltip(chart.line(), tooltipCfg)
                break
              case 'path':
                setChartTooltip(chart.path(), tooltipCfg)
                break
              case 'point':
                setChartTooltip(chart.point(), tooltipCfg)
                break
              case 'area':
                setChartTooltip(chart.area(), tooltipCfg)
                break
              case 'polygon':
                setChartTooltip(chart.polygon(), tooltipCfg)
                break
              case 'schema':
                setChartTooltip(chart.schema(), tooltipCfg)
                break
              case 'edge':
                setChartTooltip(chart.edge(), tooltipCfg)
                break
              case 'heatmap':
                setChartTooltip(chart.heatmap(), tooltipCfg)
                break
            }

Review comment (suggestion):
Wondering if something like this would work:

```suggestion
            setChartTooltip(chart[type](), tooltipCfg)
```

Might need edgecase check for invalid type so that undefined() is not called.

Code after:
export const
  XVisualization = ({ model }: { model: Visualization }) => {
    const
      container = React.useRef<HTMLDivElement>(null),
      currentChart = React.useRef<Chart | null>(null),
      currentPlot = React.useRef<Plot | null>(null),
      checkDimensionsPostInit = (w: F, h: F) => { // Safari fix
        const el = container.current
        if (!el) return
        if (el.clientHeight !== h || el.clientWidth !== w) {
          currentChart.current?.destroy()
          init()
        }
      },
      init = async () => {
        // Map CSS var colors to their hex values.
        cat10 = cat10.map(cssVarValue)
        const el = container.current
        if (!el) return
        // If card does not have specified height, it uses content. Since the wrapper is empty, it takes very little space - set to 300px by default.
        if (el.clientHeight < 30) el.style.height = '300px'
        const
          raw_data = unpack<any[]>(model.data),
          raw_plot = unpack<Plot>(model.plot),
          marks = raw_plot.marks.map(refactorMark),
          plot: Plot = { marks },
          space = spaceTypeOf(raw_data, marks),
          data = refactorData(raw_data, plot.marks),
          { Chart } = await import('@antv/g2'),
          chart = plot.marks ? new Chart(makeChart(el, space, plot.marks, model.interactions || [])) : null
        currentPlot.current = plot
        if (chart) {
          chart.tooltip({
            showCrosshairs: true,
            crosshairs: { type: 'xy' },
            domStyles: {
              'g2-tooltip': {
                backgroundColor: cssVar('$card'),
                color: cssVar('$text')
              },
            },
            customContent: (_title, items) => {
              ReactDOM.render(<PlotTooltip items={items} />, tooltipContainer)
              return tooltipContainer
            }
          })
          currentChart.current = chart
          chart.data(data)
          if (model.events) {
            for (const event of model.events) {
              switch (event) {