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

Code before:
  css = stylesheet({
    card: {
      display: 'flex',
      flexDirection: 'column',
      padding: grid.gap,
    },
    img: {
      flexGrow: 1,
      objectFit: 'contain',
      maxHeight: 'calc(100% - 20px)',
    }
  })

/** Create a card that displays a base64-encoded image. */
interface State {
  /** The card's title. */
  title: S
  /** The image MIME subtype. One of `apng`, `bmp`, `gif`, `x-icon`, `jpeg`, `png`, `webp`. */
  type?: S
  /** Image data, base64-encoded. */
  image?: S
  /** Data for this card. */
  data?: Rec
  /** The path or URL or data URL of the image, e.g. `/foo.png` or `http://example.com/foo.png` or `data:image/png;base64,???`. */
  path?: S
  /** The path or URL or data URL of the high resolution image. It is displayed inside the popup when clicking on the image. This does not replace a `path` property. */
  path_popup?: S
}


/** Create an image. */
export interface Image {
  /** The image title, typically displayed as a tooltip. */
  title: S
  /** The image MIME subtype. One of `apng`, `bmp`, `gif`, `x-icon`, `jpeg`, `png`, `webp`. Required only if `image` is set. */
  type?: S
  /** Image data, base64-encoded. */
  image?: S
  /** The path or URL or data URL of the image, e.g. `/foo.png` or `http://example.com/foo.png` or `data:image/png;base64,???`. */
  path?: S
  /** The width of the image, e.g. '100px'. */
  width?: S
  /** True if the component should be visible. Defaults to True. */
  visible?: B
  /** The path or URL or data URL of the high resolution image. It is displayed inside the popup when clicking on the image. This does not replace a `path` property. */
  path_popup?: S
}

export const
  XImage = ({ model: m }: { model: Image }) => {
    const

Review comment (suggestion):
```suggestion
  /** The path or URL or data URL of the image displayed in the popup after clicking the image. Does not replace the `path` property. */
```

Code after:
  css = stylesheet({
    card: {
      display: 'flex',
      flexDirection: 'column',
      padding: grid.gap,
    },
    img: {
      flexGrow: 1,
      objectFit: 'contain',
      maxHeight: 'calc(100% - 20px)',
    }
  })

/** Create a card that displays a base64-encoded image. */
interface State {
  /** The card's title. */
  title: S
  /** The image MIME subtype. One of `apng`, `bmp`, `gif`, `x-icon`, `jpeg`, `png`, `webp`. */
  type?: S
  /** Image data, base64-encoded. */
  image?: S
  /** Data for this card. */
  data?: Rec
  /** The path or URL or data URL of the image, e.g. `/foo.png` or `http://example.com/foo.png` or `data:image/png;base64,???`. */
  path?: S
  /** The path or URL or data URL of the image displayed in the popup after clicking the image. Does not replace the `path` property. */
  path_popup?: S
}


/** Create an image. */
export interface Image {
  /** The image title, typically displayed as a tooltip. */
  title: S
  /** The image MIME subtype. One of `apng`, `bmp`, `gif`, `x-icon`, `jpeg`, `png`, `webp`. Required only if `image` is set. */
  type?: S
  /** Image data, base64-encoded. */
  image?: S
  /** The path or URL or data URL of the image, e.g. `/foo.png` or `http://example.com/foo.png` or `data:image/png;base64,???`. */
  path?: S
  /** The width of the image, e.g. '100px'. */
  width?: S
  /** True if the component should be visible. Defaults to True. */
  visible?: B
  /** The path or URL or data URL of the image displayed in the popup after clicking the image. Does not replace the `path` property. */
  path_popup?: S
}

export const
  XImage = ({ model: m }: { model: Image }) => {
    const