Repository: h2oai/wave
File: py/examples/tour.py (Python)

Code before:
                            ui.zone('preview')
                        ])
            ]),
        ])
    nav_links = [
        ('docs', 'Wave docs', 'https://wave.h2o.ai/docs/getting-started'),
        ('discussions', 'Discussions', 'https://github.com/h2oai/wave/discussions'),
        ('blog', 'Blog', 'https://wave.h2o.ai/blog'),
        ('cloud', 'H2O AI Cloud', 'https://h2o.ai/platform/ai-cloud/'),
        ('h2o', 'H2O', 'https://www.h2o.ai/'),
    ]
    q.page['header'] = ui.header_card(
        box='header',
        title=app_title,
        subtitle=f'{len(catalog)} Interactive Examples',
        image=f'{q.app.tour_assets}/h2o-logo.svg',
        items=[
            ui.links(inline=True, items=[ui.link(label=item[1], path=item[2], target='_blank') for item in nav_links])
        ])
    q.page['mobile_header'] = ui.header_card(
        box='mobile_header',
        title=app_title,
        subtitle=f'{len(catalog)} Interactive Examples',
        image=f'{q.app.tour_assets}/h2o-logo.svg',
        nav=[
            ui.nav_group('Links', items=[ui.nav_item(name=item[0], label=item[1], path=item[2]) for item in nav_links])
        ])
    q.page['blurb'] = ui.section_card(box='blurb', title='', subtitle='', items=[])
    q.page['mobile_blurb'] = ui.form_card(box='mobile_blurb', items=[])
    q.page['code'] = ui.markup_card(
        box=ui.box('code', height=f'calc(100vh - {header_height + blurb_height}px)'),
        title='',
        content='<div id="monaco-editor" style="position: absolute; top: 45px; bottom: 15px; right: 15px; left: 2px"/>'
    )
    # Put tmp placeholder <div></div> to simulate blank screen.
    q.page['preview'] = ui.frame_card(box='preview', title='Preview', content='<div></div>')
    await q.page.save()


def make_blurb(q: Q):
    example = q.user.active_example
    blurb_card = q.page['blurb']
    blurb_card.title = example.title
    blurb_card.subtitle = example.description
    # HACK: Recreate dropdown every time (by dynamic name) to control value (needed for next / prev btn functionality).
    items = [ui.dropdown(name=q.args['#'] or default_example_name, width='300px', value=example.name, trigger=True,
                         choices=[ui.choice(name=e.name, label=e.title) for e in catalog.values()])]
    buttons = []
    mobile_buttons = []
    if example.previous_example:
        buttons.append(ui.button(name=f'#{example.previous_example.name}', label='Previous'))

Review comment (suggestion):
Naming.
```suggestion
            ui.nav_group('Links', items=[ui.nav_item(name=link[0], label=link[1], path=link[2]) for link in nav_links])
```

Code after:
                            ui.zone('preview')
                        ])
            ]),
        ])
    nav_links = [
        ('docs', 'Wave docs', 'https://wave.h2o.ai/docs/getting-started'),
        ('discussions', 'Discussions', 'https://github.com/h2oai/wave/discussions'),
        ('blog', 'Blog', 'https://wave.h2o.ai/blog'),
        ('cloud', 'H2O AI Cloud', 'https://h2o.ai/platform/ai-cloud/'),
        ('h2o', 'H2O', 'https://www.h2o.ai/'),
    ]
    q.page['header'] = ui.header_card(
        box='header',
        title=app_title,
        subtitle=f'{len(catalog)} Interactive Examples',
        image=f'{q.app.tour_assets}/h2o-logo.svg',
        items=[
            ui.links(inline=True, items=[ui.link(label=link[1], path=link[2], target='_blank') for link in nav_links])
        ])
    q.page['mobile_header'] = ui.header_card(
        box='mobile_header',
        title=app_title,
        subtitle=f'{len(catalog)} Interactive Examples',
        image=f'{q.app.tour_assets}/h2o-logo.svg',
        nav=[
            ui.nav_group('Links', items=[ui.nav_item(name=link[0], label=link[1], path=link[2]) for link in nav_links])
        ])
    q.page['blurb'] = ui.section_card(box='blurb', title='', subtitle='', items=[])
    q.page['mobile_blurb'] = ui.form_card(box='mobile_blurb', items=[])
    q.page['code'] = ui.markup_card(
        box='code',
        title='',
        content='<div id="monaco-editor" style="position: absolute; top: 45px; bottom: 15px; right: 15px; left: 2px"/>'
    )
    # Put tmp placeholder <div></div> to simulate blank screen.
    q.page['preview'] = ui.frame_card(box='preview', title='Preview', content='<div></div>')
    await q.page.save()


def make_blurb(q: Q):
    example = q.user.active_example
    blurb_card = q.page['blurb']
    blurb_card.title = example.title
    blurb_card.subtitle = example.description
    # HACK: Recreate dropdown every time (by dynamic name) to control value (needed for next / prev btn functionality).
    items = [ui.dropdown(name=q.args['#'] or default_example_name, width='300px', value=example.name, trigger=True,
                         choices=[ui.choice(name=e.name, label=e.title) for e in catalog.values()])]
    if example.previous_example:
        items.append(ui.button(name=f'#{example.previous_example.name}', label='Prev'))
    if example.next_example:
        items.append(ui.button(name=f'#{example.next_example.name}', label='Next', primary=True))