fix: Set default width for components

[marek-mihok]

The width of the following components was affected when used with ui.inline:

• ui.dropdown
• ui.date_picker
• ui.plot
• ui.vega
• ui.table
• ui.slider
• ui.range slider
• ui.toggle

Screen.Recording.2023-05-25.at.14.02.11.mov

By default each of these elements either stretches to the width of its parent or the width can be explicitly specified through the width prop. The problem is when the parent has no defined width, in our case when placed inside ui.inline.

This PR sets the default width for each of these components in case parent width is not defined.

Screen.Recording.2023-05-25.at.14.03.02.mov

I also include the example used in recordings:

from .synth import FakeCategoricalSeries
from h2o_wave import main, app, Q, ui, pack, data
import random

html = '''
<ol>
    <li>Spam</li>
    <li>Ham</li>
    <li>Eggs</li>
</ol>
'''
spec = '''
{
  "description": "A simple bar plot with embedded data.",
  "mark": "bar",
  "encoding": {
    "x": {"field": "a", "type": "ordinal"},
    "y": {"field": "b", "type": "quantitative"}
  }
}
'''
f = FakeCategoricalSeries()
n = 20


# Generate random datum between 1 and 100
def rnd():
    return random.randint(1, 100)


@app('/demo')
async def serve(q: Q):
    q.page['example'] = ui.form_card(box='1 1 5 -1', items=[
        # ROW
        ui.inline(items=[
            ui.date_picker(name='date_picker', label='DP'),
            ui.dropdown(name='dropdown1', label='DPDWN', choices=[
                ui.choice(name=x, label=x) for x in ['Egg', 'Bacon', 'Spam']
            ]),
            ui.dropdown(name='dropdown2', label='DPDWN', values=[], choices=[
                ui.choice(name=x, label=x) for x in ['Egg', 'Bacon', 'Spam']
            ]),
        ],
        ),
        ui.inline(items=[
            ui.dropdown(name='dropdown3', label='DPDWN2', popup='always', values=[], choices=[
                ui.choice(name=x, label=x) for x in ['Egg', 'Bacon', 'Spam']
            ]),
            ui.dropdown(name='dropdown4', label='DPDWN3', popup='always', values=[], choices=[
                ui.choice(name=x, label=x) for x in ['Egg', 'Bacon', 'Spam']
            ]),
        ]),
        ui.inline(items=[
            ui.toggle(name='toggle', label='Toggle'),
            ui.slider(name='slider', label='Slider'),
            ui.range_slider(name='range_slider', label='Range slider', max=100),
        ]
        ),
        ui.inline(items=[
            ui.table(name='table', columns=[
                ui.table_column(name='col1', label='Column 1'),
                ui.table_column(name='col2', label='Column 2'),
                ui.table_column(name='col3', label='Column 3'),
            ], rows=[
                ui.table_row(name='row1', cells=['Text A', 'Text B', 'A']),
                ui.table_row(name='row2', cells=['Text C', 'Text D', 'B']),
                ui.table_row(name='row3', cells=['Text E', 'Text F', 'C']),
            ]),
        ]
        ),
        ui.inline(items=[
            ui.visualization(
                plot=ui.plot([ui.mark(type='interval', x='=product', y='=price', y_min=0)]),
                data=data(fields='product price', rows=[(c, x) for c, x, _ in [f.next() for _ in range(n)]], pack=True),
            ),
            ui.vega_visualization(
                specification=spec,
                data=data(fields=["a", "b"], rows=[
                    ["A", rnd()], ["B", rnd()], ["C", rnd()],
                    ["D", rnd()], ["E", rnd()], ["F", rnd()],
                    ["G", rnd()], ["H", rnd()], ["I", rnd()]
                ], pack=True),
            ),
        ]),
        # COLUMN
        ui.inline(items=[
            ui.date_picker(name='date_picker', label='DP'),
            ui.dropdown(name='dropdown1', label='DPDWN', choices=[
                ui.choice(name=x, label=x) for x in ['Egg', 'Bacon', 'Spam']
            ]),
            ui.dropdown(name='dropdown2', label='DPDWN', values=[], choices=[
                ui.choice(name=x, label=x) for x in ['Egg', 'Bacon', 'Spam']
            ]),
        ], direction='column',
        ),
        ui.inline(items=[
            ui.toggle(name='toggle', label='Toggle'),
            ui.slider(name='slider', label='Slider'),
            ui.range_slider(name='range_slider', label='Range slider', max=100),
            ui.range_slider(name='range_slider', label='Range slider', max=1000),
            ui.range_slider(name='range_slider', label='Range slider', max=10000),
        ], direction='column',
        ),
        ui.inline(items=[
            ui.table(name='table', columns=[
                ui.table_column(name='col1', label='Column 1'),
                ui.table_column(name='col2', label='Column 2'),
            ], rows=[
                ui.table_row(name='row1', cells=['Text A', 'Text B']),
                ui.table_row(name='row2', cells=['Text C', 'Text D']),
                ui.table_row(name='row3', cells=['Text E', 'Text F']),
            ]),
        ], direction='column',
        ),
        ui.inline(items=[
            ui.visualization(
                plot=ui.plot([ui.mark(type='interval', x='=product', y='=price', y_min=0)]),
                data=data(fields='product price', rows=[(c, x) for c, x, _ in [f.next() for _ in range(n)]], pack=True),
            ),
            ui.vega_visualization(
                specification=spec,
                data=data(fields=["a", "b"], rows=[
                    ["A", rnd()], ["B", rnd()], ["C", rnd()],
                    ["D", rnd()], ["E", rnd()], ["F", rnd()],
                    ["G", rnd()], ["H", rnd()], ["I", rnd()]
                ], pack=True),
            ),
        ], direction='column',
        ),
    ])
    await q.page.save()

Closes #1974

[mturoci]

Thanks @marek-mihok.

Can the overall pattern be improved? Instead of setting the default width and overriding it with minWidth: 100%, it would be better to only set the fixed default width when needed (inside ui.inline) and expand to the full width otherwise (not within ui.inline). Applies to all plots and table.

The current solution does it the other way around - applies default fixed width first and then sets min width to 100% to see if it helps.

[mturoci]

Thanks @marek-mihok. Needs some improvements and is good to go.