feat: Multiple dashboards

[mattrunyon]

Fixes #1683

Test with the dh.ui plugin from deephaven/deephaven-plugins#176

Example dashboard code

from deephaven import ui, time_table
from deephaven.ui import use_memo, use_state
from deephaven.plot.figure import Figure

def use_wave_input():
    """
    Demonstrating a custom hook.
    Creates an input panel that controls the amplitude, frequency, and phase for a wave
    """
    amplitude, set_amplitude = use_state(1.0)
    frequency, set_frequency = use_state(1.0)
    phase, set_phase = use_state(1.0)

    input_panel = ui.flex(
        ui.slider(
            label="Amplitude",
            default_value=amplitude,
            min_value=-100.0,
            max_value=100.0,
            on_change=set_amplitude,
            step=0.1,
        ),
        ui.slider(
            label="Frequency",
            default_value=frequency,
            min_value=-100.0,
            max_value=100.0,
            on_change=set_frequency,
            step=0.1,
        ),
        ui.slider(
            label="Phase",
            default_value=phase,
            min_value=-100.0,
            max_value=100.0,
            on_change=set_phase,
            step=0.1,
        ),
        direction="column",
    )

    return amplitude, frequency, phase, input_panel

@ui.component
def multiwave():
    amplitude, frequency, phase, wave_input = use_wave_input()

    tt = use_memo(lambda: time_table("PT1s").update("x=i"), [])
    t = use_memo(
        lambda: tt.update(
            [
                f"y_sin={amplitude}*Math.sin({frequency}*x+{phase})",
                f"y_cos={amplitude}*Math.cos({frequency}*x+{phase})",
                f"y_tan={amplitude}*Math.tan({frequency}*x+{phase})",
            ]
        ),
        [amplitude, frequency, phase],
    )
    p_sin = use_memo(
        lambda: Figure().plot_xy(series_name="Sine", t=t, x="x", y="y_sin").show(), [t]
    )
    p_cos = use_memo(
        lambda: Figure().plot_xy(series_name="Cosine", t=t, x="x", y="y_cos").show(),
        [t],
    )
    p_tan = use_memo(
        lambda: Figure().plot_xy(series_name="Tangent", t=t, x="x", y="y_tan").show(),
        [t],
    )

    return [
        ui.column(
            ui.row(
                ui.stack(
                    ui.panel(wave_input, title="Wave Input"),
                    ui.panel(t, title="Wave Table"),
                    activeItemIndex=0
                ),
                height=25
            ),
            ui.row(
                ui.stack(ui.panel(p_sin, title="Sine"), width=50),
                ui.stack(ui.panel(p_cos, title="Cosine"), width=30),
                ui.stack(ui.panel(p_tan, title="Tangent"))
            )
        )
    ]

mw = ui.dashboard(multiwave())

[mofojed]

How will this work from Enterprise? We need to be able to pass in the hydration function and pull the query from the metadata for Enterprise.

[mattrunyon]

I don't think this hydration specifically will affect Enterprise. This is just moving the hydration function from AppMainContainer to AppDashboards since AppMainContainer doesn't need to know anything about this once the dashboards component is split out

Enterprise has its own hydration which would be part of the Dashboard already

As far as Enterprise changes go, it will need to add dashboardPluginData and also listen to the event for creating a dashboard like DHC does. There might be something w/ the plugin and plugin data that we need to modify to work w/ enterprise PQs since right now the plugin is responsible for fetching its widget

[mattrunyon]

I've thought about extending WidgetPlugin in some manner so that it doesn't have to mount a panel. Right now it's kind of hacky IMO because the dashboard widget from dh.ui is loaded as part of a dashboard plugin. Instead it could be a widget plugin that mounts, but doesn't render a panel.

Or we need some sort of context/hook that lets the plugin get its own fetch function or create one with just the widget name and type. In DHE the hook could wrap any other info like PQ data into the fetch function it provides

[mofojed]

A plugin that mounts but doesn't have a panel sounds kinda neat. Need to give it more thought.

[mattrunyon]

I've fixed the console focus issue. The problem was if the console was focused when a dashboard was opened, it didn't resize monaco when it became visible again. In enterprise we're doing some extra stuff that calls updateDimensions on the console from the parent container when the tab is focused. I added a resize observer instead which fires when the display changes so it doesn't need the parent container to tell it to resize

[codecov]

Codecov Report

Attention: 65 lines in your changes are missing coverage. Please review.

Comparison is base (e1b4562) 46.05% compared to head (7c4cfb4) 45.99%.

Files	Patch %	Lines
packages/code-studio/src/main/AppMainContainer.tsx	27.27%	40 Missing ⚠️
packages/dashboard/src/LazyDashboard.tsx	0.00%	14 Missing ⚠️
packages/dashboard/src/DashboardEvents.ts	0.00%	5 Missing ⚠️
packages/code-studio/src/main/AppDashboards.tsx	84.21%	2 Missing and 1 partial ⚠️
packages/dashboard/src/redux/selectors.ts	0.00%	2 Missing ⚠️
packages/console/src/ConsoleInput.tsx	80.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1714      +/-   ##
==========================================
- Coverage   46.05%   45.99%   -0.06%     
==========================================
  Files         623      626       +3     
  Lines       37514    37576      +62     
  Branches     9433     9450      +17     
==========================================
+ Hits        17276    17284       +8     
- Misses      20184    20237      +53     
- Partials       54       55       +1     

Flag	Coverage Δ
unit	45.99% <35.64%> (-0.06%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[mofojed]

A plugin that mounts but doesn't have a panel sounds kinda neat. Need to give it more thought.