ronantakizawa/codereview-bench huggingface dataset:
Repository: h2oai/wave
File: ui/src/meta.tsx (TypeScript)

Code before:
import React from 'react';
import { cards } from './layout';
import { bond, Card, on, S, U, telesync } from './telesync';

/**
 * Represents page-global state.
 *
 * This card is invisible.
 * It is used to control attributes of the active page.
*/
interface State {
  /** The title of the page. */
  title?: S
  /** Refresh rate in seconds. A value of 0 turns off live-updates. Values != 0 are currently ignored (reserved for future use). */
  refresh?: U
  /** Notification text that appears in the right top corner. */
  notification?: S
}

const
  View = bond(({ state, changed }: Card<State>) => {
    const
      init = () => {
        const { title, refresh } = state
        if (title) window.document.title = title
        if (typeof refresh === 'number') telesync.refreshRateB(refresh)
        if (state.notification) showNotification(state.notification)
      },
      showNotification = async (notificationText: string) => {
        // TODO: Decide on fallback when user's browser does not support Notification API.
        if (!('Notification' in window)) return
        else if (Notification.permission === 'granted') new Notification(notificationText)
        else if (Notification.permission !== 'denied') {
          if (await Notification.requestPermission() === 'granted') new Notification(notificationText)
        }
      },
      render = () => (<></>)
    on(changed, init)
    return { init, render }
  })


Review comment (suggestion):
```suggestion
  /** Display a desktop notification to the user. */
```

Removed `right top corner` because the position is OS-specific.

Code after:
import React from 'react';
import { cards } from './layout';
import { bond, Card, on, S, U, telesync } from './telesync';

/**
 * Represents page-global state.
 *
 * This card is invisible.
 * It is used to control attributes of the active page.
*/
interface State {
  /** The title of the page. */
  title?: S
  /** Refresh rate in seconds. A value of 0 turns off live-updates. Values != 0 are currently ignored (reserved for future use). */
  refresh?: U
  /** Display a desktop notification to the user. */
  notification?: S
}

const
  View = bond(({ state, changed }: Card<State>) => {
    const
      init = () => {
        const { title, refresh, notification } = state
        if (title) window.document.title = title
        if (typeof refresh === 'number') telesync.refreshRateB(refresh)
        if (notification) showNotification(notification)
      },
      showNotification = async (notificationText: string) => {
        // TODO: Decide on fallback when user's browser does not support Notification API.
        if (!('Notification' in window)) return
        else if (Notification.permission === 'granted') new Notification(notificationText)
        else if (Notification.permission !== 'denied') {
          if (await Notification.requestPermission() === 'granted') new Notification(notificationText)
        }
      },
      render = () => (<></>)
    on(changed, init)
    return { init, render }
  })
Repository: h2oai/wave
File: py/examples/meta_notification.py (Python)

Code before:
# Meta / Notification
# Show notification.
# ---
from telesync import site, ui

page = site['/demo']

page['meta'] = ui.meta_card(box='')

page['example'] = ui.markdown_card(
    box='1 1 2 2',
    title='Notification',
    content='Allow browser notifcations in order to see them.',
)
page['meta'].notification = 'Processing complete!'

page.save()


Review comment (suggestion):
```suggestion
    content='This page should display a desktop notification in a few seconds. Wait for it...',
```

Code after:
# Meta / Notification
# Display a desktop notification.
# ---
import time

from telesync import site, ui

page = site['/demo']

page['meta'] = ui.meta_card(box='')

page['example'] = ui.markdown_card(
    box='1 1 2 2',
    title='Desktop Notifications',
    content='This page should display a desktop notification in a few seconds. Wait for it...',
)
page.save()

time.sleep(5)
page['meta'].notification = 'And now for something completely different!'

page.save()
Repository: h2oai/wave
File: py/examples/meta_notification.py (Python)

Code before:
# Meta / Notification
# Show notification.
# ---
from telesync import site, ui

page = site['/demo']

page['meta'] = ui.meta_card(box='')

page['example'] = ui.markdown_card(
    box='1 1 2 2',
    title='Notification',
    content='Allow browser notifcations in order to see them.',
)
page['meta'].notification = 'Processing complete!'

page.save()


Review comment (suggestion):
```suggestion
    title='Desktop Notifications',
```

Code after:
# Meta / Notification
# Display a desktop notification.
# ---
import time

from telesync import site, ui

page = site['/demo']

page['meta'] = ui.meta_card(box='')

page['example'] = ui.markdown_card(
    box='1 1 2 2',
    title='Desktop Notifications',
    content='This page should display a desktop notification in a few seconds. Wait for it...',
)
page.save()

time.sleep(5)
page['meta'].notification = 'And now for something completely different!'

page.save()
Repository: h2oai/wave
File: py/examples/meta_notification.py (Python)

Code before:
# Meta / Notification
# Show notification.
# ---
from telesync import site, ui

page = site['/demo']

page['meta'] = ui.meta_card(box='')

page['example'] = ui.markdown_card(
    box='1 1 2 2',
    title='Notification',
    content='Allow browser notifcations in order to see them.',
)
page['meta'].notification = 'Processing complete!'

page.save()


Review comment (suggestion):

```suggestion
page.save()

time.sleep(5)
page['meta'].notification = 'And now for something completely different!'
```

Code after:
# Meta / Notification
# Display a desktop notification.
# ---
import time

from telesync import site, ui

page = site['/demo']

page['meta'] = ui.meta_card(box='')

page['example'] = ui.markdown_card(
    box='1 1 2 2',
    title='Desktop Notifications',
    content='This page should display a desktop notification in a few seconds. Wait for it...',
)
page.save()

time.sleep(5)
page['meta'].notification = 'And now for something completely different!'

page.save()
Repository: h2oai/wave
File: py/examples/meta_notification.py (Python)

Code before:
# Meta / Notification
# Show notification.
# ---
from telesync import site, ui

page = site['/demo']

page['meta'] = ui.meta_card(box='')

page['example'] = ui.markdown_card(
    box='1 1 2 2',
    title='Notification',
    content='Allow browser notifcations in order to see them.',
)
page['meta'].notification = 'Processing complete!'

page.save()


Review comment (suggestion):
```suggestion
# Display a desktop notification.
```

Code after:
# Meta / Notification
# Display a desktop notification.
# ---
import time

from telesync import site, ui

page = site['/demo']

page['meta'] = ui.meta_card(box='')

page['example'] = ui.markdown_card(
    box='1 1 2 2',
    title='Desktop Notifications',
    content='This page should display a desktop notification in a few seconds. Wait for it...',
)
page.save()

time.sleep(5)
page['meta'].notification = 'And now for something completely different!'

page.save()
Repository: h2oai/wave
File: ui/src/breadcrumbs.tsx (TypeScript)

Code before:
import { Breadcrumb } from '@fluentui/react';
import React from 'react';
import { cards } from './layout';
import { bond, Card, S, qd } from './qd';

/** Create a breadcrumb item. */
interface BreadcrumbItem {
  /** The name of this item. Prefix the name with a '#' to trigger hash-change navigation. */
  name: S
  /** The label to display. */
  label: S
}
/** Create a card containing navigation breadcrumbs. */
interface State {
  /** Items to render. */
  items: BreadcrumbItem[]
}

export const
  View = bond(({ state, changed }: Card<State>) => {
    const
      items = state.items.map(({ name, label }) => ({
        key: name,
        text: label,
        onClick: () => {
          if (name.startsWith('#')) {
            window.location.hash = name.substr(1)
            return
          }
          qd.args[name] = true
          qd.sync()
        }
      }
      )),
      render = () => <Breadcrumb items={items} />

    return { render, changed }
  })

Review comment (suggestion):
Via the Fluent website:
> Breadcrumbs should be used as a navigational aid in your app or site. They indicate the current page’s location within a hierarchy and help the user understand where they are in relation to the rest of that hierarchy. They also afford one-click access to higher levels of that hierarchy. Breadcrumbs are typically placed, in horizontal form, under the masthead or navigation of an experience, above the primary content area.

Code after:
import { Breadcrumb } from '@fluentui/react';
import React from 'react';
import { cards } from './layout';
import { bond, Card, S, qd } from './qd';

/** Create a breadcrumb for a `h2o_q.types.BreadcrumbsCard()`. */
interface Breadcrumb {
  /** The name of this item. Prefix the name with a '#' to trigger hash-change navigation. */
  name: S
  /** The label to display. */
  label: S
}
/**
 * Create a card containing breadcrumbs.
 * Breadcrumbs should be used as a navigational aid in your app or site.
 * They indicate the current page’s location within a hierarchy and help
 * the user understand where they are in relation to the rest of that hierarchy.
 * They also afford one-click access to higher levels of that hierarchy. 
 * Breadcrumbs are typically placed, in horizontal form, under the masthead 
 * or navigation of an experience, above the primary content area.
 */
interface State {
  /** A list of `h2o_q.types.Breadcrumb` instances to display. See `h2o_q.ui.breadcrumb()` */
  items: Breadcrumb[]
}

export const
  View = bond(({ state, changed }: Card<State>) => {
    const
      items = state.items.map(({ name, label }) => ({
        key: name,
        text: label,
        onClick: () => {
          if (name.startsWith('#')) {
            window.location.hash = name.substr(1)
            return
          }
          qd.args[name] = true
Repository: h2oai/wave
File: ui/src/breadcrumbs.tsx (TypeScript)

Code before:
import { Breadcrumb } from '@fluentui/react';
import React from 'react';
import { cards } from './layout';
import { bond, Card, S, qd } from './qd';

/** Create a breadcrumb item. */
interface BreadcrumbItem {
  /** The name of this item. Prefix the name with a '#' to trigger hash-change navigation. */
  name: S
  /** The label to display. */
  label: S
}
/** Create a card containing navigation breadcrumbs. */
interface State {
  /** Items to render. */
  items: BreadcrumbItem[]
}

export const
  View = bond(({ state, changed }: Card<State>) => {
    const
      items = state.items.map(({ name, label }) => ({
        key: name,
        text: label,
        onClick: () => {
          if (name.startsWith('#')) {
            window.location.hash = name.substr(1)
            return
          }
          qd.args[name] = true
          qd.sync()
        }
      }
      )),
      render = () => <Breadcrumb items={items} />

    return { render, changed }
  })

Review comment (suggestion):
```suggestion
/** Create a card containing breadcrumbs. 
 * Breadcrumbs should be used as a ... 
 */
```

Code after:
import { Breadcrumb } from '@fluentui/react';
import React from 'react';
import { cards } from './layout';
import { bond, Card, S, qd } from './qd';

/** Create a breadcrumb for a `h2o_q.types.BreadcrumbsCard()`. */
interface Breadcrumb {
  /** The name of this item. Prefix the name with a '#' to trigger hash-change navigation. */
  name: S
  /** The label to display. */
  label: S
}
/**
 * Create a card containing breadcrumbs.
 * Breadcrumbs should be used as a navigational aid in your app or site.
 * They indicate the current page’s location within a hierarchy and help
 * the user understand where they are in relation to the rest of that hierarchy.
 * They also afford one-click access to higher levels of that hierarchy. 
 * Breadcrumbs are typically placed, in horizontal form, under the masthead 
 * or navigation of an experience, above the primary content area.
 */
interface State {
  /** A list of `h2o_q.types.Breadcrumb` instances to display. See `h2o_q.ui.breadcrumb()` */
  items: Breadcrumb[]
}

export const
  View = bond(({ state, changed }: Card<State>) => {
    const
      items = state.items.map(({ name, label }) => ({
        key: name,
        text: label,
        onClick: () => {
          if (name.startsWith('#')) {
            window.location.hash = name.substr(1)
            return
          }
          qd.args[name] = true
Repository: h2oai/wave
File: ui/src/breadcrumbs.tsx (TypeScript)

Code before:
import { Breadcrumb } from '@fluentui/react';
import React from 'react';
import { cards } from './layout';
import { bond, Card, S, qd } from './qd';

/** Create a breadcrumb item. */
interface BreadcrumbItem {
  /** The name of this item. Prefix the name with a '#' to trigger hash-change navigation. */
  name: S
  /** The label to display. */
  label: S
}
/**
 * Create a card containing breadcrumbs.
 * Breadcrumbs should be used as a navigational aid in your app or site.
 * They indicate the current page’s location within a hierarchy and help
 * the user understand where they are in relation to the rest of that hierarchy.
 * They also afford one-click access to higher levels of that hierarchy. 
 * Breadcrumbs are typically placed, in horizontal form, under the masthead 
 * or navigation of an experience, above the primary content area.
 */
interface State {
  /** Items to render. */
  items: BreadcrumbItem[]
}

export const
  View = bond(({ state, changed }: Card<State>) => {
    const
      items = state.items.map(({ name, label }) => ({
        key: name,

Review comment (suggestion):
```suggestion
/** Create a breadcrumb for a `h2o_q.types.BreadcrumbsCard()`. */
```

Code after:
import { Breadcrumb } from '@fluentui/react';
import React from 'react';
import { cards } from './layout';
import { bond, Card, S, qd } from './qd';

/** Create a breadcrumb for a `h2o_q.types.BreadcrumbsCard()`. */
interface Breadcrumb {
  /** The name of this item. Prefix the name with a '#' to trigger hash-change navigation. */
  name: S
  /** The label to display. */
  label: S
}
/**
 * Create a card containing breadcrumbs.
 * Breadcrumbs should be used as a navigational aid in your app or site.
 * They indicate the current page’s location within a hierarchy and help
 * the user understand where they are in relation to the rest of that hierarchy.
 * They also afford one-click access to higher levels of that hierarchy. 
 * Breadcrumbs are typically placed, in horizontal form, under the masthead 
 * or navigation of an experience, above the primary content area.
 */
interface State {
  /** A list of `h2o_q.types.Breadcrumb` instances to display. See `h2o_q.ui.breadcrumb()` */
  items: Breadcrumb[]
}

export const
  View = bond(({ state, changed }: Card<State>) => {
    const
      items = state.items.map(({ name, label }) => ({
        key: name,
Repository: h2oai/wave
File: ui/src/breadcrumbs.tsx (TypeScript)

Code before:
import { Breadcrumb } from '@fluentui/react';
import React from 'react';
import { cards } from './layout';
import { bond, Card, S, qd } from './qd';

/** Create a breadcrumb item. */
interface BreadcrumbItem {
  /** The name of this item. Prefix the name with a '#' to trigger hash-change navigation. */
  name: S
  /** The label to display. */
  label: S
}
/**
 * Create a card containing breadcrumbs.
 * Breadcrumbs should be used as a navigational aid in your app or site.
 * They indicate the current page’s location within a hierarchy and help
 * the user understand where they are in relation to the rest of that hierarchy.
 * They also afford one-click access to higher levels of that hierarchy. 
 * Breadcrumbs are typically placed, in horizontal form, under the masthead 
 * or navigation of an experience, above the primary content area.
 */
interface State {
  /** Items to render. */
  items: BreadcrumbItem[]
}

export const
  View = bond(({ state, changed }: Card<State>) => {
    const
      items = state.items.map(({ name, label }) => ({
        key: name,
        text: label,

Review comment (suggestion):
```suggestion
interface Breadcrumb {
```

I slept on this for a while. 

Since the container is a `BreadcrumbsCard` (note plural), it follows that it contains multiple `Breadcrumb` instances.

This change makes the naming consistent with -
- `buttons` (plural) and `button` (child)
- `nav`(singular) and `nav_item` (child)

Improves readability at call sites as well:
```py
page['breadcrumbs'] = ui.breadcrumbs_card(
    box='1 1 4 -1',
    items=[
        ui.breadcrumb(name='#menu1', label='Menu 1'),
        ui.breadcrumb(name='#menu2', label='Menu 2'),
        ui.breadcrumb(name='#menu3', label='Menu 3'),
    ],
)
```

Code after:
import { Breadcrumb } from '@fluentui/react';
import React from 'react';
import { cards } from './layout';
import { bond, Card, S, qd } from './qd';

/** Create a breadcrumb for a `h2o_q.types.BreadcrumbsCard()`. */
interface Breadcrumb {
  /** The name of this item. Prefix the name with a '#' to trigger hash-change navigation. */
  name: S
  /** The label to display. */
  label: S
}
/**
 * Create a card containing breadcrumbs.
 * Breadcrumbs should be used as a navigational aid in your app or site.
 * They indicate the current page’s location within a hierarchy and help
 * the user understand where they are in relation to the rest of that hierarchy.
 * They also afford one-click access to higher levels of that hierarchy. 
 * Breadcrumbs are typically placed, in horizontal form, under the masthead 
 * or navigation of an experience, above the primary content area.
 */
interface State {
  /** A list of `h2o_q.types.Breadcrumb` instances to display. See `h2o_q.ui.breadcrumb()` */
  items: Breadcrumb[]
}

export const
  View = bond(({ state, changed }: Card<State>) => {
    const
      items = state.items.map(({ name, label }) => ({
        key: name,
        text: label,
Repository: h2oai/wave
File: ui/src/picker.tsx (TypeScript)

Code before:
import * as Fluent from '@fluentui/react';
import React from 'react';
import { bond, S, U, B, qd } from './qd';

/**
 * A single option for picker.
 */
interface PickerOption {
  /** An identifying name for this item. */
  name: S
  /** Text to be displayed. */
  label?: S
}

/**
 * Create a picker.
 * Use this for multi-select scenarios in which a user chooses one or more items from a dynamic dropdown
 * that is updated to match user's typing.
*/
export interface Picker {
  /** An identifying name for this component. */
  name: S
  /** The choices to be presented. */
  items: PickerOption[]
  /** Text to be displayed above the component. */
  label?: S
  /** The names of the selected choices. */
  values?: S[]
  /** Max number of picked suggestions. */
  item_limit?: U
  /** Controls whether the picker should be disabled or not. */
  disabled?: B
  /** An optional tooltip message displayed when a user clicks the help icon to the right of the component. */

Review comment (suggestion):
We can reuse the `Choice` interface for this, since it's common across other components like checklist, choice group and dropdown. 

Code after:
import * as Fluent from '@fluentui/react';
import React from 'react';
import { bond, S, U, B, qd } from './qd';
import { Choice } from './choice_group';

/**
 * Create a picker.
 * Pickers are used to select one or more choices, such as tags or files, from a list. 
 * Use a picker to allow the user to quickly search for or manage a few tags or files.
*/
export interface Picker {
  /** An identifying name for this component. */
  name: S
  /** The choices to be presented. */
  choices: Choice[]
  /** Text to be displayed above the component. */
  label?: S
  /** The names of the selected choices. */
  values?: S[]
  /** Maximum number of selectable choices. Defaults to no limit. */
  max_choices?: U
  /** Controls whether the picker should be disabled or not. */
  disabled?: B
  /** An optional tooltip message displayed when a user clicks the help icon to the right of the component. */
  tooltip?: S
}

const pickerSuggestionsProps: Fluent.IBasePickerSuggestionsProps = {
  suggestionsHeaderText: 'Suggestions',
  noResultsFoundText: 'No results found',
};

export const XPicker = bond(({ model: m }: { model: Picker }) => {
Repository: h2oai/wave
File: py/examples/picker.py (Python)

Code before:
# Form / Picker
# Use pickers to allow users to pick multiple values.
# ---
from h2o_q import Q, listen, ui


async def main(q: Q):
    if q.args.show_inputs:
        q.page['example'].items = [
            ui.text(f'selected={q.args.picker}'),
            ui.button(name='show_form', label='Back', primary=True),
        ]
    else:
        q.page['example'] = ui.form_card(box='1 1 4 10', items=[
          ui.picker(name='picker', label='Picker showcase', items=[
            ui.picker_option(name='h2o'),
            ui.picker_option(name='artificial'),
            ui.picker_option(name='inteligence'),
            ui.picker_option(name='wins'),
          ]),
          ui.button(name='show_inputs', label='Submit', primary=True),
        ])
    await q.page.save()


if __name__ == '__main__':
    listen('/demo', main)


Review comment (suggestion):
Use `ui.choice()` with both `name` and `label`, so that we don't encourage the practice of using names for labels.

Code after:
# Form / Picker
# Use pickers to allow users to select one or more choices, such as tags or files, from a list.
# ---
from h2o_q import Q, listen, ui


async def main(q: Q):
    if q.args.show_inputs:
        q.page['example'].items = [
            ui.text(f'selected={q.args.picker}'),
            ui.button(name='show_form', label='Back', primary=True),
        ]
    else:
        q.page['example'] = ui.form_card(box='1 1 4 10', items=[
          ui.picker(name='picker', label='Picker showcase', choices=[
            ui.choice(name='spam', label='Spam'),
            ui.choice(name='eggs', label= 'Eggs'),
            ui.choice(name='ham', label= 'Ham'),
            ui.choice(name='cheese', label='Cheese'),
            ui.choice(name='beans', label='Beans'),
            ui.choice(name='toast', label='Toast'),
          ]),
          ui.button(name='show_inputs', label='Submit', primary=True),
        ])
    await q.page.save()


if __name__ == '__main__':
    listen('/demo', main)