ronantakizawa/codereview-bench huggingface dataset:
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):
```suggestion
# Use pickers to allow users to select one or more choices, such as tags or files, from a list.
```

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()
Repository: h2oai/wave
File: py/examples/range_slider.py (Python)

Code before:
# Form / Range Slider
# Use a range slider to allow users to set a value within a specific range from both extremes.
# ---
from h2o_q import Q, listen, ui


async def main(q: Q):
    if q.args.show_inputs:
        q.page['example'].items = [
            ui.text(f'range_slider={q.args.range_slider}'),
            ui.text(f'range_slider_step={q.args.range_slider_step}'),
            ui.text(f'range_slider_disabled={q.args.range_slider_disabled}'),
            ui.button(name='show_form', label='Back', primary=True),
        ]
    else:
        q.page['example'] = ui.form_card(box='1 1 4 10', items=[
            ui.range_slider(name='range_slider', label='Default slider'),
            ui.range_slider(name='range_slider_step', label='Step slider', min=0, max=1000, step=100, min_value=0, max_value=100),
            ui.range_slider(name='range_slider_disabled', label='Disabled slider', min=0, max=100, step=10, min_value=0, 
              max_value=70, disabled=True),
            ui.button(name='show_inputs', label='Submit', primary=True),
        ])
    await q.page.save()


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

Review comment (suggestion):
```suggestion
# Use a range slider to allow users to select a value range (from, to).
```

Code after:
# Form / Range Slider
# Use a range slider to allow users to select a value range (from, to).
# ---
from h2o_q import Q, listen, ui


async def main(q: Q):
    if q.args.show_inputs:
        q.page['example'].items = [
            ui.text(f'range_slider={q.args.range_slider}'),
            ui.text(f'range_slider_step={q.args.range_slider_step}'),
            ui.text(f'range_slider_disabled={q.args.range_slider_disabled}'),
            ui.button(name='show_form', label='Back', primary=True),
        ]
    else:
        q.page['example'] = ui.form_card(box='1 1 4 10', items=[
            ui.range_slider(name='range_slider', label='Default slider'),
            ui.range_slider(name='range_slider_step', label='Step slider', min=0, max=1000, step=100, min_value=0, max_value=100),
            ui.range_slider(name='range_slider_disabled', label='Disabled slider', min=0, max=100, step=10, min_value=0, 
              max_value=70, disabled=True),
            ui.button(name='show_inputs', label='Submit', primary=True),
        ])
    await q.page.save()


if __name__ == '__main__':
    listen('/demo', main)
Repository: h2oai/wave
File: ui/src/stepper.tsx (TypeScript)

Code before:
import * as Fluent from '@fluentui/react';
import React from 'react';
import { bond, S, B, U, Card } from './qd';
import { cards } from './layout';
import { stylesheet } from 'typestyle';
import { getTheme, rem } from './theme';

/**
 * A single stage of a process.
 */
interface Step {
  /** Text displayed below icon. */
  label: S
  /** Icon to be displayed. */
  icon?: S
  /** Indicates whether the step has already been completed. */
  done?: B
}

/**
  Displays progress through numbered steps.
*/
interface State {
  /** An identifying name for this component. */
  name: S
  /** Particular stages user is supposed to go through. */
  items: Step[]
}

const
  { colors } = getTheme(),
  css = stylesheet({
    stepNumber: {
      background: colors.text,
      color: colors.card,
      alignItems: 'center',
      borderRadius: '50%',
      display: 'inline-flex',
      justifyContent: 'center',
      fontSize: rem(0.8),
      height: 24,

Review comment (suggestion):
```suggestion
  /** Indicates whether this step has already been completed. */
```

Code after:
import * as Fluent from '@fluentui/react';
import React from 'react';
import { bond, S, B, U } from './qd';
import { stylesheet } from 'typestyle';
import { getTheme, rem } from './theme';

/**
 * Create a step for a stepper.
 */
interface Step {
  /** Text displayed below icon. */
  label: S
  /** Icon to be displayed. */
  icon?: S
  /** Indicates whether this step has already been completed. */
  done?: B
}

/**
  Create a component that displays a sequence of steps in a process.
  The steps keep users informed about where they are in the process and how much is left to complete.
*/
export interface Stepper {
  /** An identifying name for this component. */
  name: S
  /** The sequence of steps to be displayed. */
  items: Step[]
  /** An optional tooltip message displayed when a user clicks the help icon to the right of the component. */
  tooltip?: S
}

const
  { colors } = getTheme(),
  css = stylesheet({
    stepNumber: {
      background: colors.text,
      color: colors.card,
      alignItems: 'center',
      borderRadius: '50%',
      display: 'inline-flex',
      justifyContent: 'center',
Repository: h2oai/wave
File: ui/src/stepper.tsx (TypeScript)

Code before:
import * as Fluent from '@fluentui/react';
import React from 'react';
import { bond, S, B, U, Card } from './qd';
import { cards } from './layout';
import { stylesheet } from 'typestyle';
import { getTheme, rem } from './theme';

/**
 * A single stage of a process.
 */
interface Step {
  /** Text displayed below icon. */
  label: S
  /** Icon to be displayed. */
  icon?: S
  /** Indicates whether the step has already been completed. */
  done?: B
}

/**
  Displays progress through numbered steps.
*/
interface State {
  /** An identifying name for this component. */
  name: S
  /** Particular stages user is supposed to go through. */
  items: Step[]
}

const
  { colors } = getTheme(),
  css = stylesheet({
    stepNumber: {
      background: colors.text,
      color: colors.card,
      alignItems: 'center',
      borderRadius: '50%',
      display: 'inline-flex',
      justifyContent: 'center',
      fontSize: rem(0.8),
      height: 24,
      minWidth: 24,
      width: 24,
    },
    disabled: {
      opacity: 0.5
    }
  }),
  iconStyles: Fluent.IIconStyles = { root: { fontSize: 24 } }

export const

Review comment (suggestion):
```suggestion
  /** The sequence of steps to be displayed. */
```

Code after:
import * as Fluent from '@fluentui/react';
import React from 'react';
import { bond, S, B, U } from './qd';
import { stylesheet } from 'typestyle';
import { getTheme, rem } from './theme';

/**
 * Create a step for a stepper.
 */
interface Step {
  /** Text displayed below icon. */
  label: S
  /** Icon to be displayed. */
  icon?: S
  /** Indicates whether this step has already been completed. */
  done?: B
}

/**
  Create a component that displays a sequence of steps in a process.
  The steps keep users informed about where they are in the process and how much is left to complete.
*/
export interface Stepper {
  /** An identifying name for this component. */
  name: S
  /** The sequence of steps to be displayed. */
  items: Step[]
  /** An optional tooltip message displayed when a user clicks the help icon to the right of the component. */
  tooltip?: S
}

const
  { colors } = getTheme(),
  css = stylesheet({
    stepNumber: {
      background: colors.text,
      color: colors.card,
      alignItems: 'center',
      borderRadius: '50%',
      display: 'inline-flex',
      justifyContent: 'center',
      fontSize: rem(0.8),
      height: 24,
      minWidth: 24,
      width: 24,
    },
    disabled: {
      opacity: 0.5
    }
  }),
  iconStyles: Fluent.IIconStyles = { root: { fontSize: 24 } }
Repository: h2oai/wave
File: ui/src/stepper.tsx (TypeScript)

Code before:
import * as Fluent from '@fluentui/react';
import React from 'react';
import { bond, S, B, U, Card } from './qd';
import { cards } from './layout';
import { stylesheet } from 'typestyle';
import { getTheme, rem } from './theme';

/**
 * A single stage of a process.
 */
interface Step {
  /** Text displayed below icon. */
  label: S
  /** Icon to be displayed. */
  icon?: S
  /** Indicates whether the step has already been completed. */
  done?: B
}

/**
  Displays progress through numbered steps.
*/
interface State {
  /** An identifying name for this component. */
  name: S
  /** Particular stages user is supposed to go through. */
  items: Step[]
}

const
  { colors } = getTheme(),
  css = stylesheet({
    stepNumber: {
      background: colors.text,
      color: colors.card,
      alignItems: 'center',
      borderRadius: '50%',
      display: 'inline-flex',
      justifyContent: 'center',
      fontSize: rem(0.8),
      height: 24,
      minWidth: 24,
      width: 24,
    },
    disabled: {
      opacity: 0.5

Review comment (suggestion):
```suggestion
  Create a component that displays a sequence of steps in a process. The steps keep users informed about where they are in the process and how much is left to complete.
```

Code after:
import * as Fluent from '@fluentui/react';
import React from 'react';
import { bond, S, B, U } from './qd';
import { stylesheet } from 'typestyle';
import { getTheme, rem } from './theme';

/**
 * Create a step for a stepper.
 */
interface Step {
  /** Text displayed below icon. */
  label: S
  /** Icon to be displayed. */
  icon?: S
  /** Indicates whether this step has already been completed. */
  done?: B
}

/**
  Create a component that displays a sequence of steps in a process.
  The steps keep users informed about where they are in the process and how much is left to complete.
*/
export interface Stepper {
  /** An identifying name for this component. */
  name: S
  /** The sequence of steps to be displayed. */
  items: Step[]
  /** An optional tooltip message displayed when a user clicks the help icon to the right of the component. */
  tooltip?: S
}

const
  { colors } = getTheme(),
  css = stylesheet({
    stepNumber: {
      background: colors.text,
      color: colors.card,
      alignItems: 'center',
      borderRadius: '50%',
      display: 'inline-flex',
      justifyContent: 'center',
      fontSize: rem(0.8),
      height: 24,
      minWidth: 24,
      width: 24,
    },
Repository: h2oai/wave
File: ui/src/stepper.tsx (TypeScript)

Code before:
import * as Fluent from '@fluentui/react';
import React from 'react';
import { bond, S, B, U, Card } from './qd';
import { cards } from './layout';
import { stylesheet } from 'typestyle';
import { getTheme, rem } from './theme';

/**
 * A single stage of a process.
 */
interface Step {
  /** Text displayed below icon. */
  label: S
  /** Icon to be displayed. */
  icon?: S
  /** Indicates whether the step has already been completed. */
  done?: B
}

/**
  Displays progress through numbered steps.
*/
interface State {
  /** An identifying name for this component. */
  name: S
  /** Particular stages user is supposed to go through. */
  items: Step[]
}

const
  { colors } = getTheme(),
  css = stylesheet({
    stepNumber: {
      background: colors.text,

Review comment (suggestion):
```suggestion
 * Create a step for a stepper.
```

Code after:
import * as Fluent from '@fluentui/react';
import React from 'react';
import { bond, S, B, U } from './qd';
import { stylesheet } from 'typestyle';
import { getTheme, rem } from './theme';

/**
 * Create a step for a stepper.
 */
interface Step {
  /** Text displayed below icon. */
  label: S
  /** Icon to be displayed. */
  icon?: S
  /** Indicates whether this step has already been completed. */
  done?: B
}

/**
  Create a component that displays a sequence of steps in a process.
  The steps keep users informed about where they are in the process and how much is left to complete.
*/
export interface Stepper {
  /** An identifying name for this component. */
  name: S
  /** The sequence of steps to be displayed. */
  items: Step[]
  /** An optional tooltip message displayed when a user clicks the help icon to the right of the component. */
  tooltip?: S
}

const
  { colors } = getTheme(),
  css = stylesheet({
Repository: h2oai/wave
File: ui/src/app.tsx (TypeScript)

Code before:
  theme = getTheme(),
  css = stylesheet({
    app: {
      position: 'absolute',
      left: 0, top: 0, right: 0, bottom: 0,
      backgroundColor: theme.colors.page,
      color: theme.colors.text,
      display: 'flex',
      justifyContent: 'center',
      overflow: 'auto'
    },
    centerFullHeight: {
      height: pc(100),
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: theme.colors.page,
      color: theme.colors.text,
    },
    overlay: {
      position: 'fixed',
      left: 0, top: 0, right: 0, bottom: 0,
      opacity: 0,
      zIndex: -1,
      transition: 'opacity 1s',
      transitionDelay: '2s',
    },
    overlayActive: {
      opacity: 0.8,
      zIndex: 1,
    },
  })


const
  App = bond(() => {
    const
      contentB = box<{ page?: Page, error?: S }>({}),
      blockUIB = qd.waitingForResponseB,
      onSocket = (e: SockEvent) => {
        switch (e.t) {
          case SockEventType.Data:
            contentB({ page: e.page })
            break
          case SockEventType.Message:
            if (e.type === SockMessageType.Err) contentB({ error: e.message })
            break
        }
      },
      onHashChanged = () => {
        const h = window.location.hash

Review comment (suggestion):
nit: more concise way to write this:
```suggestion
      transition: 'opacity 1s 2s'
```

Code after:
  theme = getTheme(),
  css = stylesheet({
    app: {
      position: 'absolute',
      left: 0, top: 0, right: 0, bottom: 0,
      backgroundColor: theme.colors.page,
      color: theme.colors.text,
      display: 'flex',
      justifyContent: 'center',
      overflow: 'auto'
    },
    centerFullHeight: {
      height: pc(100),
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: theme.colors.page,
      color: theme.colors.text,
    },
    overlay: {
      position: 'fixed',
      left: 0, top: 0, right: 0, bottom: 0,
      opacity: 0,
      zIndex: -1,
      transition: 'opacity 1s 2s',
    },
    overlayActive: {
      opacity: 0.8,
      zIndex: 1,
    },
  })


const
  App = bond(() => {
    const
      contentB = box<{ page?: Page, error?: S }>({}),
      blockUIB = qd.waitingForResponseB,
      onSocket = (e: SockEvent) => {
        switch (e.t) {
          case SockEventType.Data:
            contentB({ page: e.page })
            break
          case SockEventType.Message:
            if (e.type === SockMessageType.Err) contentB({ error: e.message })
            break
          case SockEventType.Reset:
            window.location.reload()
            break
        }
      },
Repository: h2oai/wave
File: ui/src/app.tsx (TypeScript)

Code before:
        if (h && h.length > 1) {
          qd.args['#'] = h.substr(1)
        }
        qd.sync()
      },
      init = () => {
        connect('/_s', onSocket)
        window.addEventListener('hashchange', onHashChanged)
      },
      render = () => {
        const
          { page, error } = contentB(),
          overlayClass = blockUIB() ? clas(css.overlay, css.overlayActive) : css.overlay
        // TODO prettier error section
        if (error) {
          const errorMessage = error === 'not_found'
            ? (<Spinner label='Waiting for content...' size={SpinnerSize.large} />)
            : error
          return <div className={clas(css.centerFullHeight, css.app)}>{errorMessage}</div>
        }
        if (!page) return <Spinner className={css.centerFullHeight} size={SpinnerSize.large} label='Loading ...' />

        return (
          <div className={css.app}>
            <GridLayout key={page.key} page={page} />
            <div className={overlayClass}>
              <Spinner className={css.centerFullHeight} label='Waiting for server response...' size={SpinnerSize.large} />
            </div>
          </div>
        )
      },
      dispose = () => {
        window.removeEventListener('hashchange', onHashChanged)
      }

    return { init, render, dispose, contentB, blockUIB }
  })

export default App


Review comment (suggestion):
nit: No need for separate variable as it is used in only one place
```suggestion
            <div className={blockUIB() ? clas(css.overlay, css.overlayActive) : css.overlay}>
```

Code after:
      onHashChanged = () => {
        const h = window.location.hash
        if (h && h.length > 1) {
          qd.args['#'] = h.substr(1)
        }
        qd.sync()
      },
      init = () => {
        connect('/_s', onSocket)
        window.addEventListener('hashchange', onHashChanged)
      },
      render = () => {
        const { page, error } = contentB()
        // TODO prettier error section
        if (error) {
          const errorMessage = error === 'not_found'
            ? (<Spinner label='Waiting for content...' size={SpinnerSize.large} />)
            : error
          return <div className={clas(css.centerFullHeight, css.app)}>{errorMessage}</div>
        }
        if (!page) return <Spinner className={css.centerFullHeight} size={SpinnerSize.large} label='Loading ...' />

        return (
          <div className={css.app}>
            <GridLayout key={page.key} page={page} />
            <div className={blockUIB() ? clas(css.overlay, css.overlayActive) : css.overlay}>
              <Spinner className={css.centerFullHeight} label='Waiting for server response...' size={SpinnerSize.large} />
            </div>
          </div>
        )
      },
      dispose = () => {
        window.removeEventListener('hashchange', onHashChanged)
      }

    return { init, render, dispose, contentB, blockUIB }
  })

export default App
Repository: h2oai/wave
File: cmd/wave/main.go (Go)

Code before:
	stringFlagWithDefault(&conf.OIDCEndSessionURL, "oidc-end-session-url", "", "OIDC end session URL")

	flag.Parse()

	if version {
		fmt.Printf("Wave Development Server\nVersion %s Build %s (%s/%s)\nCopyright (c) H2O.ai, Inc.\n", Version, BuildDate, runtime.GOOS, runtime.GOARCH)
		return
	}

	conf.WebDir, _ = filepath.Abs(conf.WebDir)
	conf.DataDir, _ = filepath.Abs(conf.DataDir)

	conf.Version = Version
	conf.BuildDate = BuildDate

	wave.Run(conf)
}

func stringFlagWithDefault(p *string, name string, defaultValue string, usage string) {
	flag.StringVar(p, name, lookupStringEnv(envVarName(name), defaultValue), usage)
}

func boolFlagWithDefault(p *bool, name string, defaultValue bool, usage string) {
	envVal, err := lookupBoolEnv(envVarName(name), defaultValue)
	if err != nil {
		panic(err)
	}
	flag.BoolVar(p, name, envVal, usage)
}

func envVarName(n string) string {
	envVar := strings.ToUpper(strings.ReplaceAll(n, "-", "_"))
	return fmt.Sprintf("%s_%s", envVarNamePrefix, envVar)
}

func lookupStringEnv(name string, defaultValue string) string {
	val, found := os.LookupEnv(name)
	if !found {
		return defaultValue
	}
	return val
}

func lookupBoolEnv(name string, defaultValue bool) (bool, error) {
	rawVal, found := os.LookupEnv(name)
	if !found {
		return defaultValue, nil
	}
	val, err := strconv.ParseBool(rawVal)
	if err != nil {
		return false, fmt.Errorf("failed parsing %s: %v", name, err)

Review comment (suggestion):
Just for reference, `flag` is using this enum to decide what to do with an error: https://golang.org/pkg/flag/#ErrorHandling

Code after:
		oidcProviderURL   = "oidc-provider-url"
		oidcRedirectURL   = "oidc-redirect-url"
		oidcEndSessionURL = "oidc-end-session-url"
	)

	conf.OIDCClientID = os.Getenv(envVarName(oidcClientID))
	flag.StringVar(&conf.OIDCClientID, oidcClientID, conf.OIDCClientID, "OIDC client ID")

	conf.OIDCClientSecret = os.Getenv(envVarName(oidcClientSecret))
	flag.StringVar(&conf.OIDCClientSecret, oidcClientSecret, conf.OIDCClientSecret, "OIDC client secret")

	conf.OIDCProviderURL = os.Getenv(envVarName(oidcProviderURL))
	flag.StringVar(&conf.OIDCProviderURL, oidcProviderURL, conf.OIDCProviderURL, "OIDC provider URL")

	conf.OIDCRedirectURL = os.Getenv(envVarName(oidcRedirectURL))
	flag.StringVar(&conf.OIDCRedirectURL, oidcRedirectURL, conf.OIDCRedirectURL, "OIDC redirect URL")

	conf.OIDCEndSessionURL = os.Getenv(envVarName(oidcEndSessionURL))
	flag.StringVar(&conf.OIDCEndSessionURL, oidcEndSessionURL, conf.OIDCEndSessionURL, "OIDC end session URL")

	flag.Parse()

	if version {
		fmt.Printf("Wave Development Server\nVersion %s Build %s (%s/%s)\nCopyright (c) H2O.ai, Inc.\n", Version, BuildDate, runtime.GOOS, runtime.GOARCH)
		return
	}

	conf.WebDir, _ = filepath.Abs(conf.WebDir)
	conf.DataDir, _ = filepath.Abs(conf.DataDir)

	conf.Version = Version
	conf.BuildDate = BuildDate

	wave.Run(conf)
}

func envVarName(n string) string {
	envVar := strings.ToUpper(strings.ReplaceAll(n, "-", "_"))
	return fmt.Sprintf("%s_%s", envVarNamePrefix, envVar)
}