deephaven.ui

Now that you're more familiar with the table API and visualizing data, it's time to consider how to present your work. The deephaven.ui package provides a rich set of tools for building interactive user experiences that show off the tables, plots, and other widgets your queries created.

What is deephaven.ui?

deephaven.ui is a react-like framework for building user experiences in Python. No front-end development, JavaScript, or CSS experience is required to hit the ground running. Key features include:

• Components: Create user interfaces from components defined entirely with Python.
• Live dataframe integration: Components are live dataframe aware and can use Deephaven tables as a data source.
• Reactive UI updates: UI components automatically update when the underlying data changes.
• Declarative UI framework: Describe the UI as a function of the data and let the framework handle the rest.
• Composability: Combine and re-use components to build complex interfaces.
• Wide range of components: From simple text fields to complex tables and plots, the library has a wide range of components to build your app.

Components

At the core of deephaven.ui are components, which are reusable building blocks for your user interface. Take, for instance, a simple heading:

This component isn't very exciting. What about a component that handles events, such as a button click?

The example above is more useful than the first, but a real user experience doesn't print raw data to a console. With deephaven.ui, you can decorate functions with @ui.component to define components with custom behavior. The following example is a simple component that builds off the button example.

Simple enough. But once again, the example above isn't all that useful for any real-world scenarios. deephaven.ui also offers the use_state hook, which allows you to manage state within components. For instance, you can track how many times a button has been clicked. Each component has its own state, as shown by clicking on c1 and c2 separately:

Buttons and text boxes are only two of the many components available in deephaven.ui. The following code shows off a few more components including a picker, slider, and combo box:

For a full list of available components, see the Components overview.

Table-backed components

Things get a lot more interesting when you source components from Deephaven tables. Components tick in lock-step with the underlying data if it's streaming.

Components can be passed tables as input to display data. Take the picker example above. What if you want to choose from the available values in a column of a table?

You can take this a step further and utilize the selected value to produce a filtered table and generate a Deephaven Plotly Express heatmap showing the joint density of sepal length and sepal width for the selected species.

What if you want to utilize state from a component? The following example utilizes state from the component to show the joint density of sepal length and sepal width for the selected species:

Dashboards

Dashboards are collections of components arranged in a grid layout. These grids are arranged into rows and columns, allowing you to create simple and complex layouts depending on your application's needs. They are a great way to present data and visualizations in a single view.

The following example creates a simple 2x2 dashboards with components that don't have much use. This shows how the grid layout of a dashboard is created programmatically.

Dashboard layouts can be customized to fit your needs. A simple 2x2 grid won't suffice for many applications. What if you need more rows, where each row has a different layout? The following example shows a more complex dashboard layout:

Obviously, dashboards are much more interesting when they contain components with real data, plots, widgets, and information.

Dashboards combine multiple components into a single user experience. Dashboards are built with rows and columns of previously created components. Below is a full example creating a dashboard that displays a picker for Iris species, a heatmap, and some other custom components:

This crash course page only scratches the surface of what you can do with deephaven.ui. For the full deephaven.ui documentation with detailed information on everything possible, see deephaven.ui.