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

Code before:
            chart.render(true)
          })
        }
      }

    React.useEffect(() => {
      init()
      return () => themeWatchRef.current?.dispose()
      // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [])
    React.useEffect(() => {
      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)
      currentChart.current.changeData(data)
    }, [currentChart, currentPlot, model])

    const
      { width = 'auto', height = 'auto', name } = model,
      style: React.CSSProperties = (width === 'auto' && height === 'auto')
        ? {
          flexGrow: 1,
          width: 400
        }
        : { width: formItemWidth(width), height }
    return <div data-test={name} style={style} className={css.plot} ref={container} />
  }

/** Create a card displaying a plot. */
interface State {
  /** The title for this card. */
  title: S
  /** Data for this card. */
  data: Rec
  /** The plot to be displayed in this card. */
  plot: Plot
  /** The events to capture on this card. One of 'select_marks'. */
  events?: S[]
  /** The interactions to be allowed for this card. One of 'drag_move' | 'scale_zoom' | 'brush'. Note: `brush` does not raise `select_marks` event. */
  interactions?: S[]
}

export const
  View = bond(({ name, state, changed }: Model<State>) => {
    const
      render = () => {
        const { title = 'Untitled', plot, data, events, interactions } = state
        return (

Review comment (suggestion):
IIUC this is overridden by `minwidth = 100%` in the `checkDimensionsPostInit` function. I think there might be a better solution as the current one causes flicker:


https://github.com/h2oai/wave/assets/64769322/12dd27d3-cc51-4ff7-bf75-744682a063dc

Applies for vega card as well.


Code after:
      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)
      currentChart.current.changeData(data)
    }, [currentChart, currentPlot, model])

    const
      { width = 'auto', height = 'auto', name } = model,
      style: React.CSSProperties = (width === 'auto' && height === 'auto')
        ? { flexGrow: 1 }
        : { width: formItemWidth(width), height }
    return <div data-test={name} style={style} className={css.plot} ref={container} />
  }

/** Create a card displaying a plot. */
interface State {
  /** The title for this card. */
  title: S
  /** Data for this card. */
  data: Rec
  /** The plot to be displayed in this card. */
  plot: Plot
  /** The events to capture on this card. One of 'select_marks'. */
  events?: S[]
  /** The interactions to be allowed for this card. One of 'drag_move' | 'scale_zoom' | 'brush'. Note: `brush` does not raise `select_marks` event. */
  interactions?: S[]
}

export const
  View = bond(({ name, state, changed }: Model<State>) => {
    const
      render = () => {
        const { title = 'Untitled', plot, data, events, interactions } = state
        return (
          <div className={css.card}>
            <div className='wave-s12 wave-w6'>{title}</div>
            <div className={css.body}>
              <XVisualization model={{ name, plot, data, events, interactions }} />
            </div>
          </div>
        )
      }
    return { render, changed }
  })

cards.register('plot', View)