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

Code before:
          overflow: 'visible'
        },
        'text': {
          fill: `${cssVar('$text')} !important`
        }
      }
    }
  })

/** Create a visualization for display inside a form. */
export interface Visualization {
  /** The plot to be rendered in this visualization. */
  plot: Plot
  /** Data for this visualization. */
  data: Rec
  /** The width of the visualization. Defaults to '100%'. */
  width?: S
  /** The hight of the visualization. Defaults to '300px'. */
  height?: S
  /** An identifying name for this component. */
  name?: S
  /** True if the component should be visible. Defaults to True. */
  visible?: B
  /** The events to capture on this visualization. One of 'select_marks'. */
  events?: S[]
  /** The interactions to be allowed for this plot. One of 'drag-move' | 'scale-zoom' | 'brush'. */
  interactions?: S[]
}

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

Review comment (suggestion):
Better to use `snake_case` (consistent with how events are named, e.g. `select_marks`) so that users don't have to think when to use which.

Code after:
          overflow: 'visible'
        },
        'text': {
          fill: `${cssVar('$text')} !important`
        }
      }
    }
  })

/** Create a visualization for display inside a form. */
export interface Visualization {
  /** The plot to be rendered in this visualization. */
  plot: Plot
  /** Data for this visualization. */
  data: Rec
  /** The width of the visualization. Defaults to '100%'. */
  width?: S
  /** The hight of the visualization. Defaults to '300px'. */
  height?: S
  /** An identifying name for this component. */
  name?: S
  /** True if the component should be visible. Defaults to True. */
  visible?: B
  /** The events to capture on this visualization. One of 'select_marks'. */
  events?: S[]
  /** The interactions to be allowed for this plot. One of 'drag_move' | 'scale_zoom' | 'brush'. Note: `brush` does not raise `select_marks` event. */
  interactions?: S[]
}

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