### Install and Start Web Client UI Development Server

Source: https://github.com/deephaven/deephaven-plugins/blob/main/plugins/example-theme/src/js/README.md

Commands to install dependencies and start the local web-client-ui server from its project root, allowing preview of theme changes during development.

```Bash
npm install
npm run start
```

--------------------------------

### Install and Start Deephaven Plugins Server

Source: https://github.com/deephaven/deephaven-plugins/blob/main/plugins/example-theme/src/js/README.md

Commands to install dependencies and start the Deephaven plugins server from the project root directory. This server proxies plugins during development, avoiding re-installation.

```Bash
npm install
npm start
```

--------------------------------

### Install Deephaven Server and Plugin Wheel

Source: https://github.com/deephaven/deephaven-plugins/blob/main/templates/widget/{{ cookiecutter.python_project_name }}/README.md

This snippet shows how to install the Deephaven server and the built plugin wheel file into the virtual environment, then start the Deephaven server.

```sh
pip install deephaven-server
pip install dist/{{ cookiecutter.python_project_name }}-0.0.1.dev0-py3-none-any.whl
deephaven server
```

--------------------------------

### Set Up Deephaven UI Plugin Development Environment

Source: https://github.com/deephaven/deephaven-plugins/blob/main/plugins/ui/README.md

This snippet outlines the steps to create and activate a Python virtual environment, then install necessary build tools and Deephaven-related dependencies for developing the `deephaven.ui` plugin. It ensures a clean and isolated development setup.

```sh
python -m venv .venv
source .venv/bin/activate
pip install --upgrade pip setuptools
pip install build deephaven-plugin plotly
```

--------------------------------

### Build Deephaven JavaScript Plugin

Source: https://github.com/deephaven/deephaven-plugins/blob/main/plugins/table-example/src/js/README.md

Instructions to install dependencies and build the Deephaven JavaScript Table Example Plugin. The output will be in `dist/index.js`.

```Shell
npm install
npm run build
```

--------------------------------

### Start Deephaven Plugins Docker Container

Source: https://github.com/deephaven/deephaven-plugins/blob/main/README.md

Commands to initiate the Deephaven plugins Docker container. You can use `npm run docker` if Node.js and npm are installed, or `docker compose up --build` as an alternative.

```shell
npm run docker
```

```shell
docker compose up --build
```

--------------------------------

### Perform Initial Full Plugin Installation

Source: https://github.com/deephaven/deephaven-plugins/blob/main/templates/widget/{{ cookiecutter.python_project_name }}/README.md

Command to build and install the entire plugin, including its JavaScript components, for the first time.

```sh
python plugin_builder.py --install --js
```

--------------------------------

### Set up Python virtual environment and install build dependencies

Source: https://github.com/deephaven/deephaven-plugins/blob/main/plugins/json/README.md

Initializes a Python virtual environment, activates it, and installs essential packages like pip, setuptools, build, and deephaven-plugin required for development and building the plugin.

```sh
python3 -m venv .venv
source .venv/bin/activate
pip install --upgrade pip setuptools build deephaven-plugin
```

--------------------------------

### Install Deephaven UI with Pip for New Installations

Source: https://github.com/deephaven/deephaven-plugins/blob/main/plugins/ui/docs/installation.md

Commands to install `deephaven-server` and `deephaven-plugin-ui` using the Python package manager pip, followed by the command to run the Deephaven server for new installations.

```sh
pip install deephaven-server deephaven-plugin-ui
deephaven server
```

--------------------------------

### Build and Install Documentation for a Specific Deephaven Plugin

Source: https://github.com/deephaven/deephaven-plugins/blob/main/README.md

This command builds the documentation for the `ui` plugin and ensures the plugin is installed beforehand. It's essential to install or reinstall the plugin to reflect the latest changes before generating its documentation.

```shell
python tools/plugin_builder.py --docs --install ui
```

--------------------------------

### Verify Deephaven UI Installation

Source: https://github.com/deephaven/deephaven-plugins/blob/main/plugins/ui/docs/installation.md

Python code to verify the `deephaven.ui` installation by importing the `ui` module and creating a simple heading component. Running this in the Deephaven console should display 'Hello World!' in a new panel.

```python
from deephaven import ui

hello_world = ui.heading("Hello World!")
```

--------------------------------

### Set Up Python and JavaScript Development Environment

Source: https://github.com/deephaven/deephaven-plugins/blob/main/templates/widget/{{ cookiecutter.python_project_name }}/README.md

Instructions to set up the Python virtual environment, install Node.js dependencies using `nvm` and `npm`, and install required Python packages including `deephaven-server` and `watchdog` for plugin development.

```sh
cd {{ cookiecutter.python_project_name }}
python -m venv .venv
source .venv/bin/activate
cd src/js
nvm install
npm install
cd ../..
pip install --upgrade -r requirements.txt
pip install deephaven-server watchdog
```

--------------------------------

### Deephaven Object Viewer Plugin Development Setup

Source: https://github.com/deephaven/deephaven-plugins/blob/main/plugins/dashboard-object-viewer/src/js/README.md

This snippet outlines the steps to set up the development environment and build the Deephaven Object Viewer JavaScript plugin. It involves installing necessary dependencies and compiling the source code, with the final output located in `dist/index.js`.

```bash
npm install
npm run build
```

--------------------------------

### Install Deephaven UI with Docker for New Installations

Source: https://github.com/deephaven/deephaven-plugins/blob/main/plugins/ui/docs/installation.md

Instructions to install and run Deephaven with the `deephaven.ui` plugin using Docker for new installations. This snippet provides the appropriate Docker run commands based on your Deephaven version (before or after 0.37.0).

```bash
# For Deephaven < 0.37.0
docker run --name deephaven -p 10000:10000 ghcr.io/deephaven/server-ui:latest

# For Deephaven >= 0.37.0
docker run --name deephaven -p 10000:10000 ghcr.io/deephaven/server:latest
```

--------------------------------

### Build and Install All Deephaven Plugins

Source: https://github.com/deephaven/deephaven-plugins/blob/main/README.md

Running the `plugin_builder.py` script without arguments initiates a build and installation process for all available Deephaven plugins. This is the simplest way to compile and deploy all plugins in the project.

```shell
python tools/plugin_builder.py
```

--------------------------------

### Install Deephaven Server for Local Development

Source: https://github.com/deephaven/deephaven-plugins/blob/main/README.md

This command installs the `deephaven-server` package, which is required to run a local Deephaven server instance. This is a prerequisite for testing plugins in a live environment.

```shell
pip install deephaven-server
```

--------------------------------

### Customize Contextual Help Placement in Python

Source: https://github.com/deephaven/deephaven-plugins/blob/main/plugins/ui/docs/components/contextual_help.md

Illustrates how to customize the positioning of the contextual help popover using the `placement` prop, showing examples for default, 'top start', and 'end' placements.

```python
from deephaven import ui


@ui.component
def ui_contextual_help_placement_examples():
    return [
        ui.contextual_help(
            heading="Need Help",
            content="If you are having issues accessing your account, contact our customer support team for help.",
            variant="info",
        ),
        ui.contextual_help(
            heading="Need Help",
            content="If you are having issues accessing your account, contact our customer support team for help.",
            variant="info",
            placement="top start",
        ),
        ui.contextual_help(
            heading="Need Help",
            content="If you are having issues accessing your account, contact our customer support team for help.",
            variant="info",
            placement="end",
        ),
    ]


my_contextual_help_placement_examples = ui_contextual_help_placement_examples()
```

--------------------------------

### Python Examples for ui.calendar Date Handling

Source: https://github.com/deephaven/deephaven-plugins/blob/main/plugins/ui/DESIGN.md

This section provides practical Python examples demonstrating how to use the `ui.calendar` component with various date types and control patterns. It illustrates setting default values, handling state changes with `on_change`, and configuring minimum/maximum selectable dates. Examples cover `LocalDate`, `Instant`, and `ZonedDateTime` inputs, showcasing both controlled and uncontrolled calendar instances.

```Python
import deephaven.ui as ui
from deephaven.time import to_j_local_date, dh_today, to_j_instant, to_j_zdt

zoned_date_time = to_j_zdt("1995-03-22T11:11:11.23142 America/New_York")
instant = to_j_instant("2022-01-01T00:00:00 ET")
local_date = to_j_local_date(dh_today())

# simple calendar that takes ui.items and is uncontrolled
calendar1 = ui.calendar(
    default_value=local_date
)

# simple calendar that takes list view items directly and is controlled
# the on_change handler is passed an instant
date, set_date = ui.use_state(instant)

calendar2 = ui.calendar(
    value=date,
    on_change=set_date
)

# this creates a calendar in the specified time zone
# the on_change handler is passed a zoned date time
date, set_date = ui.use_state(None)

calendar3 = ui.calendar(
    default_value=zoned_date_time,
    on_change=set_date
)

# this creates a calendar in UTC
# the on_change handler is passed an instant
date, set_date = ui.use_state(None)

calendar4 = ui.calendar(
    default_value=instant,
    on_change=set_date
)

# this creates a calendar
# the on_change handler is passed a local date
date, set_date = ui.use_state(None)

calendar5 = ui.calendar(
    default_value=local_date,
    on_change=set_date
)

# this creates a calendar the on_change handler is passed an instant
date, set_date = ui.use_state(None)

calendar7 = ui.calendar(
    on_change=set_date
)

# this create a calendar, a min and max value
min_value = to_j_local_date("2022-01-01")
max_value = to_j_local_date("2022-12-31")
unavailable_dates = [to_j_local_date("2022-03-15"), to_j_local_date("2022-03-17")]
date, set_date = ui.use_state(to_j_local_date("2022-03-16"))
calendar8 = ui.calendar(
    value=date,
    min_value=min_value,
    max_value=max_value,
    on_change=set_date
)
```

--------------------------------

### Install Dependencies for Building Deephaven UI Plugin Documentation

Source: https://github.com/deephaven/deephaven-plugins/blob/main/plugins/ui/README.md

This snippet installs the necessary Python dependencies for building the `deephaven.ui` plugin's documentation. It first installs requirements from a `sphinx-requirements.txt` file and then installs the locally built plugin wheel, ensuring all documentation tools are available.

```sh
pip install -r ../../sphinx_ext/sphinx-requirements.txt
pip install dist/deephaven_plugin_ui-*.whl
```

--------------------------------

### Build JS Plugins, Reinstall, and Start Server for UI Plugin

Source: https://github.com/deephaven/deephaven-plugins/blob/main/README.md

This command builds the JavaScript components of the `ui` plugin, reinstalls it, and then starts the Deephaven server. It uses shorthand flags (`-j`, `-r`, `-s`) for a more compact command.

```shell
python tools/plugin_builder.py --js -r -s ui
```

--------------------------------

### Install Pre-commit Hooks and Python Development Environment

Source: https://github.com/deephaven/deephaven-plugins/blob/main/README.md

These commands set up a Python virtual environment, activate it, install required packages, and install pre-commit hooks for automated code formatting, type checking, and linting. This ensures consistent code quality across the project.

```shell
python -m venv .venv
source .venv/bin/activate
pip install --upgrade -r requirements.txt
pre-commit install
```

--------------------------------

### Pass Custom Arguments to Deephaven Server

Source: https://github.com/deephaven/deephaven-plugins/blob/main/templates/widget/{{ cookiecutter.python_project_name }}/README.md

Example of using the `--server-arg` flag to pass additional arguments, such as a custom port, to the Deephaven server when starting it, allowing for flexible server configuration.

```sh
python plugin_builder.py --reinstall --js --watch --server --server-arg --port=9999
```

--------------------------------

### Add Deephaven UI to Existing Docker Installation

Source: https://github.com/deephaven/deephaven-plugins/blob/main/plugins/ui/docs/installation.md

Command to install the `deephaven-plugin-ui` into a running Deephaven Docker container named `deephaven`. This is suitable for users with an existing Docker-based Deephaven setup.

```sh
docker exec deephaven pip install deephaven-plugin-ui
```

--------------------------------

### Install All Built Python Plugin Wheels

Source: https://github.com/deephaven/deephaven-plugins/blob/main/README.md

Shorthand command to install all Python plugin wheels built within the specified Deephaven plugins path. This simplifies installation when multiple wheels are present and their exact names are not needed.

```shell
pip install <deephaven-plugins-path>/plugins/_/dist/_.whl
```

--------------------------------

### Install Python Plugin from TestPyPI

Source: https://github.com/deephaven/deephaven-plugins/blob/main/templates/widget/{{ cookiecutter.python_project_name }}/README.md

Use this command to install the Python plugin from the TestPyPI instance after it has been uploaded. It includes the necessary `--index-url` and `--extra-index-url` flags to ensure all dependencies are found.

```sh
pip install --index-url https://test.pypi.org/simple/ --extra-index-url https://pypi.org/simple/ {{ cookiecutter.python_project_name }}
```

--------------------------------

### Basic Deephaven UI Date Picker Initialization

Source: https://github.com/deephaven/deephaven-plugins/blob/main/plugins/ui/docs/components/date_picker.md

Illustrates how to create a simple Date Picker component in Deephaven UI, setting a label, an initial `default_value`, and defining an `on_change` callback to print the selected date. This example demonstrates the fundamental setup for a date picker.

```Python
from deephaven import ui

dp = ui.date_picker(
    label="Date Picker",
    default_value="2024-01-02T10:30:00 UTC",
    on_change=print,
)
```

--------------------------------

### Comprehensive Deephaven UI Setup for Iris Dashboard

Source: https://github.com/deephaven/deephaven-plugins/blob/main/plugins/ui/docs/tutorial.md

This comprehensive code block initializes the Deephaven UI environment, loads the Iris dataset, and sets up various UI components including tables, scatter plots, flex containers, histograms, and markdown, demonstrating the complete setup for the Iris data exploration dashboard.

```Python
from deephaven import ui
import deephaven.plot.express as dx
from deephaven import agg

iris = dx.data.iris()

ui_iris = ui.table(
    iris,
    reverse=True,
    front_columns=["Timestamp", "Species"],
    hidden_columns=["PetalLength", "PetalWidth", "SpeciesID"],
    density="compact",
)

scatter_by_species = dx.scatter(iris, x="SepalLength", y="SepalWidth", by="Species")

sepal_text = ui.text("SepalLength vs. SepalWidth By Species Panel")

sepal_flex = ui.flex(ui_iris, scatter_by_species)

sepal_flex_column = ui.flex(sepal_text, sepal_flex, direction="column")

sepal_length_hist = dx.histogram(iris, x="SepalLength", by="Species")
sepal_width_hist = dx.histogram(iris, x="SepalWidth", by="Species")

sepal_tabs = ui.tabs(
    ui.tab(sepal_flex, title="Sepal Length vs. Sepal Width"),
    ui.tab(sepal_length_hist, title="Sepal Length Histogram"),
    ui.tab(sepal_width_hist, title="Sepal Width Histogram"),
)
sepal_flex_tabs = ui.flex(sepal_text, sepal_tabs, direction="column")

about_markdown = ui.markdown(r"""
### Iris Dashboard

Explore the Iris dataset with **deephaven.ui**

- The data powering this dashboard is simulated Iris data
- Charts are from Deephaven Plotly Express
- Other components are from **deephaven.ui**
  """)
```

--------------------------------

### Install Python Plugin from Production PyPI

Source: https://github.com/deephaven/deephaven-plugins/blob/main/templates/widget/{{ cookiecutter.python_project_name }}/README.md

This command allows you to install the Python plugin directly from the production PyPI repository. This is the standard way to install publicly available Python packages.

```sh
pip install {{ cookiecutter.python_project_name }}
```

--------------------------------

### Set up Deephaven Plotly Express Plugin Build Environment

Source: https://github.com/deephaven/deephaven-plugins/blob/main/plugins/plotly-express/README.md

Commands to create a Python virtual environment, activate it, and install necessary build and plugin dependencies for the Deephaven Plotly Express plugin.

```sh
python -m venv .venv
source .venv/bin/activate
pip install --upgrade pip setuptools
pip install build deephaven-plugin plotly
```

--------------------------------

### Install Dependencies for Sphinx Documentation Generation

Source: https://github.com/deephaven/deephaven-plugins/blob/main/README.md

This command installs the necessary Python packages listed in `sphinx-requirements.txt` for building documentation using Sphinx. These dependencies are crucial for generating comprehensive documentation for Deephaven plugins.

```shell
pip install -r sphinx_ext/sphinx-requirements.txt
```

--------------------------------

### Example: Basic Avatar Creation with Deephaven UI

Source: https://github.com/deephaven/deephaven-plugins/blob/main/plugins/ui/docs/components/avatar.md

This example demonstrates how to create a basic avatar using the `deephaven.ui.avatar` function, specifying a source URL and alt text. It's a fundamental step for displaying user or organization representations.

```python
from deephaven import ui


my_avatar_basic = ui.avatar(
    src="https://github.com/deephaven.png", alt="default avatar"
)
```

--------------------------------

### Define UI Component with Hardcoded List Data

Source: https://github.com/deephaven/deephaven-plugins/blob/main/plugins/ui/docs/describing/render_lists.md

This example demonstrates a basic `deephaven.ui` component that directly renders a hardcoded list of text items. It serves as an initial setup before introducing dynamic data handling, displaying each item in a column-aligned flex container.

```Python
from deephaven import ui


@ui.component
def content_list():
    return ui.flex(
        ui.text("apple: fruit"),
        ui.text("broccoli: vegetable"),
        ui.text("banana: fruit"),
        ui.text("yogurt: dairy"),
        ui.text("carrot: vegetable"),
        direction="column",
    )


my_content_list = content_list()
```

--------------------------------

### Complete Deephaven UI Dashboard Setup with Various Components

Source: https://github.com/deephaven/deephaven-plugins/blob/main/plugins/ui/docs/tutorial.md

This comprehensive Python code provides the full setup for a Deephaven UI dashboard, including data loading from `dx.data.iris()`, creation of tables, scatter plots, histograms, and tabbed interfaces. It demonstrates the integration of multiple UI elements and the final dashboard assembly using `ui.dashboard`.

```Python
from deephaven import ui
import deephaven.plot.express as dx
from deephaven import agg

iris = dx.data.iris()

ui_iris = ui.table(
    iris,
    reverse=True,
    front_columns=["Timestamp", "Species"],
    hidden_columns=["PetalLength", "PetalWidth", "SpeciesID"],
    density="compact",
)

scatter_by_species = dx.scatter(iris, x="SepalLength", y="SepalWidth", by="Species")

sepal_text = ui.text("SepalLength vs. SepalWidth By Species Panel")

sepal_flex = ui.flex(ui_iris, scatter_by_species)

sepal_flex_column = ui.flex(sepal_text, sepal_flex, direction="column")

sepal_length_hist = dx.histogram(iris, x="SepalLength", by="Species")
sepal_width_hist = dx.histogram(iris, x="SepalWidth", by="Species")

sepal_tabs = ui.tabs(
    ui.tab(sepal_flex, title="Sepal Length vs. Sepal Width"),
    ui.tab(sepal_length_hist, title="Sepal Length Histogram"),
    ui.tab(sepal_width_hist, title="Sepal Width Histogram"),
)
sepal_flex_tabs = ui.flex(sepal_text, sepal_tabs, direction="column")

about_markdown = ui.markdown(r"""
```

--------------------------------

### Install Documentation Build Dependencies for Deephaven Plotly Express

Source: https://github.com/deephaven/deephaven-plugins/blob/main/plugins/plotly-express/README.md

Commands to install the necessary Python dependencies for building the Deephaven Plotly Express plugin documentation, including Sphinx requirements and the plugin wheel.

```sh
pip install -r ../../sphinx_ext/sphinx-requirements.txt
pip install dist/deephaven_plugin_plotly_express-*.whl
```

--------------------------------

### Start Deephaven-Core with Specific JS Plugins

Source: https://github.com/deephaven/deephaven-plugins/blob/main/README.md

Command to start the Deephaven-core server, configuring it to load specific JavaScript plugins (e.g., Matplotlib and Plotly) by providing their source paths via START_OPTS environment variables. This integrates the developed JS plugins into the running Deephaven instance.

```shell
START_OPTS="-Ddeephaven.jsPlugins.@deephaven/js-plugin-matplotlib=<deephaven-plugins-path>/plugins/matploltib/src/js -Ddeephaven.jsPlugins.@deephaven/js-plugin-plotly=<deephaven-plugins-path>/plugins/plotly/src/js" ./gradlew server-jetty-app:run
```

--------------------------------

### Set up Python Virtual Environment for Deephaven Plugin Build

Source: https://github.com/deephaven/deephaven-plugins/blob/main/templates/widget/{{ cookiecutter.python_project_name }}/README.md

This snippet shows how to create a Python virtual environment, activate it, and install necessary dependencies from `requirements.txt` for building a Deephaven plugin.

```sh
cd {{ cookiecutter.python_project_name }}
python -m venv .venv
source .venv/bin/activate
pip install --upgrade -r requirements.txt
```

--------------------------------

### Reinstall JS Plugin, Start Server, and Watch for Changes

Source: https://github.com/deephaven/deephaven-plugins/blob/main/README.md

This comprehensive command reinstalls the JavaScript components of the `ui` plugin, starts the Deephaven server, and activates watch mode. It allows for rapid iteration by automatically rebuilding and restarting upon file changes.

```shell
python tools/plugin_builder.py -jrsw ui
```

--------------------------------

### Python Example: Create Ticking Pivot Table with Live Data

Source: https://github.com/deephaven/deephaven-plugins/blob/main/plugins/simple-pivot/README.md

A comprehensive Python example demonstrating the creation of a ticking pivot table from live stock data using `deephaven.plot.express` and `deephaven.experimental.pivot`. This snippet shows how to aggregate 'Price' by 'Sym' and 'Exchange' with a sum aggregation.

```Python
from deephaven.plot import express as dx
from deephaven.experimental.pivot import create_pivot
from deephaven.agg import sum_

_stocks = dx.data.stocks(ticking=True).tail(100)

ticking_pivot = create_pivot(_stocks, ['Sym'], ['Exchange'], 'Price', sum_(), False, 'Sum of Price')
```

--------------------------------

### Set up Python Virtual Environment and Basic Dependencies

Source: https://github.com/deephaven/deephaven-plugins/blob/main/README.md

This snippet demonstrates how to create a Python virtual environment, activate it, and install essential dependencies like `click` and `watchdog` required for the `plugin_builder.py` script. It's a foundational step before using the plugin builder.

```shell
python -m venv .venv
source .venv/bin/activate
pip install --upgrade -r requirements.txt
pip install click watchdog
```

--------------------------------

### Add Deephaven UI to Existing Pip Installation

Source: https://github.com/deephaven/deephaven-plugins/blob/main/plugins/ui/docs/installation.md

Command to install the `deephaven-plugin-ui` plugin into an existing Deephaven server installation managed by pip. This is the simplest method for users with a pip-based Deephaven setup.

```sh
pip install deephaven-plugin-ui
```

--------------------------------

### Build Documentation for a Specific Deephaven Plugin

Source: https://github.com/deephaven/deephaven-plugins/blob/main/README.md

This command uses `plugin_builder.py` to build the documentation specifically for the `ui` plugin. It generates the necessary documentation files, assuming the required Sphinx dependencies are already installed.

```shell
python tools/plugin_builder.py --docs ui
```

--------------------------------

### Reinstall Plugin and Start Deephaven Server

Source: https://github.com/deephaven/deephaven-plugins/blob/main/README.md

This command reinstalls the `plotly-express` plugin and then starts the Deephaven server. The `--reinstall` flag ensures that the latest version of the plugin is used, even if its version number hasn't been bumped.

```shell
python tools/plugin_builder.py --reinstall --server plotly-express
```

--------------------------------

### Build Deephaven Keycloak Plugin with npm

Source: https://github.com/deephaven/deephaven-plugins/blob/main/plugins/auth-keycloak/src/js/README.md

This snippet shows the commands to install dependencies and build the Deephaven Keycloak authentication plugin using npm. The output will be `dist/index.js`.

```bash
npm install
npm run build
```

--------------------------------

### Deephaven UI DatePicker Usage Examples

Source: https://github.com/deephaven/deephaven-plugins/blob/main/plugins/ui/DESIGN.md

Demonstrates various ways to initialize and configure the Deephaven UI DatePicker component using Python. Examples cover uncontrolled and controlled components, different date types for placeholders and values, setting granularity, and defining min/max selectable dates along with unavailable dates.

```Python
import deephaven.ui as ui
from deephaven.time import to_j_local_date, dh_today, to_j_instant, to_j_zdt

zoned_date_time = to_j_zdt("1995-03-22T11:11:11.23142 America/New_York")
instant = to_j_instant("2022-01-01T00:00:00 ET")
local_date = to_j_local_date(dh_today())

# simple date picker that takes ui.items and is uncontrolled
# this creates a date picker with a granularity of days with a default value of today
date_picker1 = ui.date_picker(
    default_value=local_date
)
```

```Python
import deephaven.ui as ui
from deephaven.time import to_j_local_date, dh_today, to_j_instant, to_j_zdt

zoned_date_time = to_j_zdt("1995-03-22T11:11:11.23142 America/New_York")
instant = to_j_instant("2022-01-01T00:00:00 ET")
local_date = to_j_local_date(dh_today())

# simple date picker that takes list view items directly and is controlled
# this creates a date picker with a granularity of seconds in UTC
# the on_change handler is passed an instant
date, set_date = ui.use_state(instant)

date_picker2 = ui.date_picker(
    value=date,
    on_change=set_date
)
```

```Python
import deephaven.ui as ui
from deephaven.time import to_j_local_date, dh_today, to_j_instant, to_j_zdt

zoned_date_time = to_j_zdt("1995-03-22T11:11:11.23142 America/New_York")
instant = to_j_instant("2022-01-01T00:00:00 ET")
local_date = to_j_local_date(dh_today())

# this creates a date picker with a granularity of seconds in the specified time zone
# the on_change handler is passed a zoned date time
date, set_date = ui.use_state(None)

date_picker3 = ui.date_picker(
    placeholder_value=zoned_date_time,
    on_change=set_date
)
```

```Python
import deephaven.ui as ui
from deephaven.time import to_j_local_date, dh_today, to_j_instant, to_j_zdt

zoned_date_time = to_j_zdt("1995-03-22T11:11:11.23142 America/New_York")
instant = to_j_instant("2022-01-01T00:00:00 ET")
local_date = to_j_local_date(dh_today())

# this creates a date picker with a granularity of seconds in UTC
# the on_change handler is passed an instant
date, set_date = ui.use_state(None)

date_picker4 = ui.date_picker(
    placeholder_value=instant,
    on_change=set_date
)
```

```Python
import deephaven.ui as ui
from deephaven.time import to_j_local_date, dh_today, to_j_instant, to_j_zdt

zoned_date_time = to_j_zdt("1995-03-22T11:11:11.23142 America/New_York")
instant = to_j_instant("2022-01-01T00:00:00 ET")
local_date = to_j_local_date(dh_today())

# this creates a date picker with a granularity of days
# the on_change handler is passed a local date
date, set_date = ui.use_state(None)

date_picker5 = ui.date_picker(
    placeholder_value=local_date,
    on_change=set_date
)
```

```Python
import deephaven.ui as ui
from deephaven.time import to_j_local_date, dh_today, to_j_instant, to_j_zdt

zoned_date_time = to_j_zdt("1995-03-22T11:11:11.23142 America/New_York")
instant = to_j_instant("2022-01-01T00:00:00 ET")
local_date = to_j_local_date(dh_today())

# this creates a date picker with a granularity of days, but the on_change handler is still passed an instant
date, set_date = ui.use_state(None)

date_picker6 = ui.date_picker(
    placeholder_value=instant,
    granularity="day",
    on_change=set_date
)
```

```Python
import deephaven.ui as ui
from deephaven.time import to_j_local_date, dh_today, to_j_instant, to_j_zdt

zoned_date_time = to_j_zdt("1995-03-22T11:11:11.23142 America/New_York")
instant = to_j_instant("2022-01-01T00:00:00 ET")
local_date = to_j_local_date(dh_today())

# this creates a date picker with a granularity of seconds and the on_change handler is passed an instant
date, set_date = ui.use_state(None)

date_picker7 = ui.date_picker(
    on_change=set_date
)
```

```Python
import deephaven.ui as ui
from deephaven.time import to_j_local_date, dh_today, to_j_instant, to_j_zdt

zoned_date_time = to_j_zdt("1995-03-22T11:11:11.23142 America/New_York")
instant = to_j_instant("2022-01-01T00:00:00 ET")
local_date = to_j_local_date(dh_today())

# this create a date picker with a granularity of days, a min and max value, and unavailable dates
min_value = to_j_local_date("2022-01-01")
max_value = to_j_local_date("2022-12-31")
unavailable_dates = [to_j_local_date("2022-03-15"), to_j_local_date("2022-03-17")]
date, set_date = ui.use_state(to_j_local_date("2022-03-16"))
date_picker8 = ui.date_picker(
    value=date,
    min_value=min_value,
    max_value=max_value,
    unavailable_values=unavailable_dates,
    on_change=set_date
)
```

--------------------------------

### HTML Example of a Basic Structured Document

Source: https://github.com/deephaven/deephaven-plugins/blob/main/plugins/ui/docs/describing/your_first_component.md

This HTML markup demonstrates how `div`, `h1`, `ol`, and `li` tags are used to create a structured document, serving as a conceptual parallel to `deephaven.ui` components for building user interfaces.

```HTML
<div>
  <h1>My First Component</h1>
  <ol>
    <li>Components: UI Building Blocks</li>
    <li>Defining a Component</li>
    <li>Defining a Component</li>
  </ol>
</div>
```

--------------------------------

### Verify Pre-commit Hook Installation

Source: https://github.com/deephaven/deephaven-plugins/blob/main/README.md

This command runs all configured pre-commit hooks against all files in the repository. It's used to verify that the hooks are correctly installed and functioning as expected, ensuring code quality checks pass.

```shell
pre-commit run --all-files
```

--------------------------------

### Install Specific Python Plugin Wheels into Deephaven-Core

Source: https://github.com/deephaven/deephaven-plugins/blob/main/README.md

Command to install specific Python plugin wheels into the Deephaven-core virtual environment after they have been built. Requires substituting placeholder paths with actual local wheel file locations.

```shell
pip install <deephaven-plugins-path>/plotly/plugins/dist/deephaven_plugin_plotly-0.0.1.dev2-py3-none-any.whl <deephaven-plugins-path>/plugins/matplotlib/dist/deephaven_plugin_matplotlib-0.1.1-py3-none-any.whl
```

--------------------------------

### Build and Preview Documentation from Build Directory

Source: https://github.com/deephaven/deephaven-plugins/blob/main/README.md

This sequence of commands first builds the documentation for specified plugins (`ui`, `plotly-express`) using `plugin_builder.py`, then uses `npm` to serve the preview from the generated `build` directory. This ensures the preview reflects the fully built documentation.

```shell
python tools/plugin_builder.py -d ui plotly-express
BUILT=true npm run docs
```

--------------------------------

### Set up Deephaven Plugin Packaging Development Environment

Source: https://github.com/deephaven/deephaven-plugins/blob/main/plugins/packaging/README.md

This command sequence sets up a Python virtual environment, activates it, upgrades essential packaging tools (pip, setuptools), and installs the `build` package, preparing the environment for Deephaven plugin development and packaging.

```sh
python -m venv .venv
source .venv/bin/activate
pip install --upgrade pip setuptools
pip install build
```

--------------------------------

### Configure Alignment for Deephaven UI Button Groups

Source: https://github.com/deephaven/deephaven-plugins/blob/main/plugins/ui/docs/components/button_group.md

Provides examples of aligning button groups to 'center' and 'end' using the `align` prop, demonstrating how to override the default start alignment within a UI component.

```Python
from deephaven import ui


@ui.component
def ui_button_group_alignment_examples():
    return [
        ui.button_group(
            ui.button("No, thanks", variant="primary", style="outline"),
            ui.button("Remind me later", variant="primary", style="outline"),
            ui.button("Rate Now", variant="accent"),
            align="center",
        ),
        ui.button_group(
            ui.button("No, thanks", variant="primary", style="outline"),
            ui.button("Remind me later", variant="primary", style="outline"),
            ui.button("Rate Now", variant="accent"),
            align="end",
        ),
    ]


my_button_group_alignment_examples = ui_button_group_alignment_examples()
```

--------------------------------

### Listen to Table Updates with use_table_listener in Python

Source: https://github.com/deephaven/deephaven-plugins/blob/main/plugins/ui/docs/hooks/use_table_listener.md

Demonstrates how to use `use_table_listener` to print raw table updates to the console. This example shows the basic setup for monitoring a Deephaven table for changes and is useful for debugging or custom logging.

```python
from deephaven import time_table, ui
from deephaven.table import Table

_source = time_table("PT1s").update("X = i")


@ui.component
def ui_table_monitor(t: Table):
    def listener_function(update, is_replay):
        print(f"Table updated: {update}, is_replay: {is_replay}")

    ui.use_table_listener(t, listener_function, [])
    return t

table_monitor = ui_table_monitor(_source)
```

--------------------------------

### Set up Deephaven Plugin Development Environment

Source: https://github.com/deephaven/deephaven-plugins/blob/main/plugins/utilities/README.md

This command sequence initializes a Python virtual environment, activates it, upgrades essential packaging tools, and installs `build` and `deephaven-plugin` necessary for developing Deephaven plugins. It prepares the environment for subsequent build operations.

```sh
python -m venv .venv
source .venv/bin/activate
pip install --upgrade pip setuptools
pip install build deephaven-plugin
```

--------------------------------

### Install Python 3.8 Dependencies on Linux

Source: https://github.com/deephaven/deephaven-plugins/blob/main/README.md

These commands install necessary Python 3.8 packages and utilities on Debian/Ubuntu-based Linux systems. They are required to ensure `tox` can properly set up and run tests against Python 3.8 environments.

```shell
sudo apt install python3.8 python3.8-distutils libpython3.8
# or just full install although it will include more packages than necessary
sudo apt install python3.8-full
```

--------------------------------

### Run Deephaven UI Docker Container

Source: https://github.com/deephaven/deephaven-plugins/blob/main/plugins/ui/docs/README.md

Instructions to run the Deephaven UI example Docker container. Provides commands for Deephaven versions less than 0.37.0 and greater than or equal to 0.37.0, allowing users to quickly set up the environment.

```bash
# For Deephaven < 0.37.0
docker run --rm --name deephaven-ui -p 10000:10000 --pull=always ghcr.io/deephaven/server-ui:latest

# For Deephaven >= 0.37.0
docker run --rm --name deephaven-ui -p 10000:10000 --pull=always ghcr.io/deephaven/server:latest
```

--------------------------------

### Create a Basic Deephaven UI Toggle Button

Source: https://github.com/deephaven/deephaven-plugins/blob/main/plugins/ui/docs/components/toggle_button.md

Demonstrates how to create a simple toggle button with a text label using `deephaven.ui.toggle_button`. This basic example shows the minimal setup required to display a functional toggle button.

```python
from deephaven import ui

my_toggle_button_basic = ui.toggle_button("Pin")
```

--------------------------------

### Build Deephaven Matplotlib JS Plugin

Source: https://github.com/deephaven/deephaven-plugins/blob/main/plugins/matplotlib/src/js/README.md

Instructions to set up and build the Deephaven matplotlib JavaScript plugin. This involves installing dependencies and compiling the project, with the output located in `dist/index.js`.

```Shell
npm install
npm run build
```

--------------------------------

### Display Numeric Range in Labeled Value in Python

Source: https://github.com/deephaven/deephaven-plugins/blob/main/plugins/ui/docs/components/labeled_value.md

This example shows how to format a numeric range by passing an object with `start` and `end` properties to the `value` prop of `ui.labeled_value`. It also demonstrates applying currency formatting options to the range.

```python
from deephaven import ui


my_number_range = ui.labeled_value(
    label="Price range",
    value={"start": 150, "end": 400},
    format_options={"style": "currency", "currency": "USD", "minimumFractionDigits": 0},
)
```

--------------------------------

### Apply Visual Variants to Contextual Help in Python

Source: https://github.com/deephaven/deephaven-plugins/blob/main/plugins/ui/docs/components/contextual_help.md

Explains how to change the visual appearance of the contextual help component using the `variant` prop, with examples for 'info' and 'help' variants.

```python
from deephaven import ui


@ui.component
def ui_contextual_help_variant_examples():
    return [
        ui.contextual_help(
            heading="Permission required",
            content="Your admin must grant you permission before you can create a segment.",
            variant="info",
        ),
        ui.contextual_help(
            heading="What is a segment?",
            content="Segments identify who your visitors are, what devices and services they use, where they navigated from, and much more.",
            variant="help",
        ),
    ]


my_contextual_help_variant_examples = ui_contextual_help_variant_examples()
```

--------------------------------

### Deephaven UI Picker Component API Reference

Source: https://github.com/deephaven/deephaven-plugins/blob/main/plugins/ui/docs/components/picker.md

API documentation for the `deephaven.ui.picker` component, detailing its available properties for configuration and behavior control, derived from usage examples.

```APIDOC
deephaven.ui.picker:
  Description: A UI component for selecting options from a dropdown menu.
  Props:
    align (str, optional):
      Description: Sets the text alignment of the options in the picker.
      Possible values: 'start', 'end', 'center'.
      Default: 'start'.
    direction (str, optional):
      Description: Specifies the direction the menu will open.
      Possible values: 'top', 'bottom', 'left', 'right'.
      Note: The popover will not open in the set direction if there is not enough room.
      Default: 'bottom'.
    menu_width (str, optional):
      Description: Sets the width of the picker menu.
      Example: 'size-3000'.
    is_open (bool, optional):
      Description: Controls the open state of the picker menu.
      Requires 'on_open_change' for controlled usage.
      Default: False.
    default_open (bool, optional):
      Description: Sets the initial open state of the picker menu when uncontrolled.
      Default: False.
    on_open_change (Callable[[bool], None], optional):
      Description: Callback function invoked when the open state of the menu changes.
      Parameters:
        - new_open_state (bool): The new open state of the menu.
```

--------------------------------

### Basic Deephaven UI Color Picker Example

Source: https://github.com/deephaven/deephaven-plugins/blob/main/plugins/ui/docs/components/color_picker.md

Demonstrates the basic instantiation of a Deephaven UI color picker component with a label and a default hexadecimal color value.

```python
from deephaven import ui

my_color_picker = ui.color_picker(label="Background", default_value="#65C4D7")
```

--------------------------------

### Create Basic Contextual Help Component in Python

Source: https://github.com/deephaven/deephaven-plugins/blob/main/plugins/ui/docs/components/contextual_help.md

Demonstrates the basic usage of the `ui.contextual_help` component, showing how to set required `heading` and `content` props, and an optional `footer` prop using `ui.link`.

```python
from deephaven import ui


my_contextual_help_basic = ui.contextual_help(
    heading="Need Help",
    content="If you are having issues accessing your account, contact our customer support team for help.",
    footer=ui.link("Download support logs"),
    variant="info",
)
```

--------------------------------

### Filter Time Tables with Deephaven UI Date Fields

Source: https://github.com/deephaven/deephaven-plugins/blob/main/plugins/ui/docs/components/date_field.md

Date fields can be effectively used to filter tables that contain time-based columns. This example demonstrates how to create a UI component with start and end date fields to dynamically filter a Deephaven time table.

```python
from deephaven.time import dh_now
from deephaven import time_table, ui


@ui.component
def date_table_filter(table, start_date, end_date, time_col="Timestamp"):
    after_date, set_after_date = ui.use_state(start_date)
    before_date, set_before_date = ui.use_state(end_date)
    return [
        ui.date_field(label="Start Date", value=after_date, on_change=set_after_date),
        ui.date_field(label="End Date", value=before_date, on_change=set_before_date),
        table.where(f"{time_col} >= after_date  && {time_col} < before_date"),
    ]


SECONDS_IN_DAY = 86400
today = dh_now()
_table = time_table("PT1s").update_view(
    ["Timestamp=today.plusSeconds(SECONDS_IN_DAY*i)", "Row=i"]
)
date_filter = date_table_filter(_table, today, today.plusSeconds(SECONDS_IN_DAY * 10))
```

--------------------------------

### Run Deephaven Server with Custom Port, PSK, and Reinstall Plugin

Source: https://github.com/deephaven/deephaven-plugins/blob/main/README.md

This command demonstrates advanced server configuration, reinstalling the `ui` plugin, setting a custom port to 9999, and configuring a Pre-Shared Key (PSK) for authentication. It uses shorthand flags for conciseness.

```shell
python tools/plugin_builder.py -r -sa --port=9999 -sa --jvm-args="-Dauthentication.psk=mypsk" ui
```

--------------------------------

### Create a Basic Heading with Deephaven UI

Source: https://github.com/deephaven/deephaven-plugins/blob/main/plugins/ui/docs/components/heading.md

This example demonstrates how to create a simple heading using the `deephaven.ui.heading` component. By default, it generates an `<h3>` HTML element.

```python
from deephaven import ui

my_heading_basic = ui.heading("Hello world")
```

--------------------------------

### Apply Deephaven JavaScript Plugin to Table

Source: https://github.com/deephaven/deephaven-plugins/blob/main/plugins/table-example/src/js/README.md

Demonstrates how to apply the Deephaven JavaScript Table Example Plugin to an `empty_table` by setting the `PluginName` attribute. This will open the table with the plugin's UI and options.

```Python
from deephaven import empty_table

t = (
    empty_table(5)
    .update("X=i")
    .with_attributes({"PluginName": "@deephaven/js-plugin-table-example"})
)
```

--------------------------------

### Filter Deephaven Tables Using UI Time Fields

Source: https://github.com/deephaven/deephaven-plugins/blob/main/plugins/ui/docs/components/time_field.md

Provides a practical example of integrating `ui.time_field` components to dynamically filter a Deephaven table based on time columns. This snippet showcases how to use `ui.use_state` to manage start and end times from the UI fields and apply them as filters to a table.

```Python
from deephaven.time import dh_now
from deephaven import time_table, ui


@ui.component
def time_table_filter(table, start_time, end_time, time_col="Timestamp"):
    after_time, set_after_time = ui.use_state(start_time)
    before_time, set_before_time = ui.use_state(end_time)
    return [
        ui.time_field(
            label="Start Time",
            value=after_time,
            on_change=set_after_time,
            hour_cycle=24,
        ),
        ui.time_field(
            label="End Time",
            value=before_time,
            on_change=set_before_time,
            hour_cycle=24,
        ),
        table.where(f"{time_col} >= after_time  && {time_col} < before_time"),
    ]


SECONDS_IN_HOUR = 3600
today = dh_now()
_table = time_table("PT1s").update_view(
    ["Timestamp=today.plusSeconds(SECONDS_IN_HOUR*i)", "Row=i"]
)
time_filter = time_table_filter(_table, today, today.plusSeconds(SECONDS_IN_HOUR * 10))
```

--------------------------------

### Create a Basic Deephaven UI Action Button

Source: https://github.com/deephaven/deephaven-plugins/blob/main/plugins/ui/docs/components/action_button.md

Demonstrates how to create a simple action button that prints a message to the console when pressed. This example uses the `deephaven.ui` module to instantiate an action button.

```python
from deephaven import ui

btn = ui.action_button("Press me", on_press=lambda: print("Button clicked"))
```

--------------------------------

### Deephaven UI: Resetting State by Rendering in Different Positions

Source: https://github.com/deephaven/deephaven-plugins/blob/main/plugins/ui/docs/managing-state/preserving-and-resetting-state.md

This example demonstrates how to force state resetting by rendering components in distinct UI positions. When switching players, the previously rendered 'counter' is replaced with 'None', destroying its state, and a new 'counter' is rendered in a different position, starting with a fresh state.

```python
from deephaven import ui


@ui.component
def counter(person):
    score, set_score = ui.use_state(0)

    return [
        ui.heading(f"{person}'s score: {score}"),
        ui.button("Add one", on_press=lambda: set_score(score + 1)),
    ]


@ui.component
def scoreboard():
    is_player1, set_is_player1 = ui.use_boolean(True)
    return [
        counter("John") if is_player1 else None,
        counter("Jill") if not is_player1 else None,
        ui.divider(),
        ui.action_button("Change player", on_press=set_is_player1.toggle),
    ]


scoreboard_example = scoreboard()
```

--------------------------------

### Place Deephaven UI Links Over a Background

Source: https://github.com/deephaven/deephaven-plugins/blob/main/plugins/ui/docs/components/link.md

This example shows how to place a link over a colored background using `ui.view` and the `variant='overBackground'` prop. This enhances the visual prominence of the link against a contrasting backdrop.

```python
from deephaven import ui


my_link_over_background_example = ui.view(
    ui.link(
        "Learn more about pandas here!",
        href="https://en.wikipedia.org/wiki/Giant_panda",
        variant="overBackground",
    ),
    background_color="green-500",
    padding="size-300",
)
```

--------------------------------

### Send Deephaven UI Form Data to an External URL

Source: https://github.com/deephaven/deephaven-plugins/blob/main/plugins/ui/docs/components/form.md

Explains how to configure a Deephaven UI form to send its data to a specified URL using the `action` prop. The example uses `method="get"` and `target="_blank"` to open the response in a new browser tab.

```python
from deephaven import ui


@ui.component
def ui_form_action():
    return ui.form(
        ui.text_field(name="first_name", default_value="Mickey", label="First Name"),
        ui.text_field(name="last_name", default_value="Mouse", label="Last Name"),
        ui.button("Submit", type="submit"),
        action="https://postman-echo.com/get",
        method="get",
        target="_blank",
    )


my_form_action = ui_form_action()
```

--------------------------------

### Set Up Deephaven Matplotlib Plugin Development Environment

Source: https://github.com/deephaven/deephaven-plugins/blob/main/plugins/matplotlib/README.md

Provides commands to set up a Python virtual environment and install necessary dependencies for developing or building the Deephaven Matplotlib plugin, including `pip`, `setuptools`, `build`, `deephaven-plugin`, and `matplotlib`.

```sh
python -m venv .venv
source .venv/bin/activate
pip install --upgrade pip setuptools
pip install build deephaven-plugin matplotlib
```

--------------------------------

### Filtering Deephaven Time Tables with Date Pickers

Source: https://github.com/deephaven/deephaven-plugins/blob/main/plugins/ui/docs/components/date_picker.md

This example illustrates how to use Deephaven UI date pickers to dynamically filter a time-based table. It sets up two date pickers for start and end dates, and applies a `where` clause to the table based on the selected date range, demonstrating interactive data filtering.

```python
from deephaven.time import dh_now
from deephaven import time_table, ui


@ui.component
def date_table_filter(table, start_date, end_date, time_col="Timestamp"):
    after_date, set_after_date = ui.use_state(start_date)
    before_date, set_before_date = ui.use_state(end_date)
    return [
        ui.date_picker(label="Start Date", value=after_date, on_change=set_after_date),
        ui.date_picker(label="End Date", value=before_date, on_change=set_before_date),
        table.where(f"{time_col} >= after_date  && {time_col} < before_date"),
    ]


SECONDS_IN_DAY = 86400
today = dh_now()
_table = time_table("PT1s").update_view(
    ["Timestamp=today.plusSeconds(SECONDS_IN_DAY*i)", "Row=i"]
)
date_filter = date_table_filter(_table, today, today.plusSeconds(SECONDS_IN_DAY * 10))
```

--------------------------------

### Preview Documentation from Source Directory

Source: https://github.com/deephaven/deephaven-plugins/blob/main/README.md

This command uses `npm` to serve a preview of the documentation directly from the source directories. It's a quick way to check documentation changes locally, accessible at `http://localhost:3001`.

```shell
npm run docs
```

--------------------------------

### Filter Deephaven Tables with UI Calendar Dates

Source: https://github.com/deephaven/deephaven-plugins/blob/main/plugins/ui/docs/components/calendar.md

Demonstrates how to use Deephaven UI calendars to filter tables based on time columns. This example creates a custom UI component that takes a table, start date, end date, and a time column name, then filters the table based on the selected calendar dates.

```python
from deephaven.time import dh_now
from deephaven import time_table, ui


@ui.component
def date_table_filter(table, start_date, end_date, time_col="Timestamp"):
    after_date, set_after_date = ui.use_state(start_date)
    before_date, set_before_date = ui.use_state(end_date)
    return [
        ui.flex(
            ui.calendar(
                aria_label="Start Date", value=after_date, on_change=set_after_date
            ),
            ui.calendar(
                aria_label="End Date", value=before_date, on_change=set_before_date
            ),
        ),
        table.where(f"{time_col} >= after_date  && {time_col} < before_date"),
    ]


SECONDS_IN_DAY = 86400
today = dh_now()
_table = time_table("PT1s").update_view(
    ["Timestamp=today.plusSeconds(SECONDS_IN_DAY*i)", "Row=i"]
)
date_filter = date_table_filter(_table, today, today.plusSeconds(SECONDS_IN_DAY * 10))
```

--------------------------------

### Prepare Data for a Deephaven UI Picker from a Partitioned Table

Source: https://github.com/deephaven/deephaven-plugins/blob/main/plugins/ui/DESIGN.md

Demonstrates how to prepare data from a Deephaven table, including creating columns and partitioning it, to be used as a source for a `picker` component that will display options in sections based on the partitions.

```Python
from deephaven import new_table
from deephaven.column import string_col, int_col

color_table = new_table([
    string_col("Sections", ["Interesting Colors", 'Interesting Colors', "Other Colors"]),
    string_col("SectionNames", ["Favorites", 'Favorites', "Other"]),
    int_col("Keys", ["salmon", "lemonchiffon", "black"]),
    string_col("Labels", ["Salmon", "Lemon Chiffon", "Black"]),
    string_col("Descriptions", ["An interesting color", "Another interesting color", "A color"]),
    string_col("Icons", ["Amusementpark", "Teapot", "Sentiment Negative"])
])
partitioned_table = color_table.partition_by("Sections")

color, set_color = ui.use_state("salmon")
```

--------------------------------

### Handle Various Date Types in Deephaven UI Range Calendar

Source: https://github.com/deephaven/deephaven-plugins/blob/main/plugins/ui/docs/components/range_calendar.md

This example demonstrates how to use different Java date types (`ZonedDateTime`, `Instant`, `LocalDate`) with the Deephaven UI range calendar. It shows how to convert Python `datetime` objects to Deephaven's Java date types and pass them as `start` and `end` values to the calendar component.

```python
from deephaven import ui
from deephaven.time import to_j_local_date, to_j_instant, to_j_zdt


@ui.component
def range_calendar_example(start, end):
    dates, set_dates = ui.use_state({"start": start, "end": end})
    return [
        ui.range_calendar(on_change=set_dates, value=dates),
        ui.text(str(dates["start"])),
        ui.text(str(dates["end"])),
    ]


zdt_start = to_j_zdt("1995-03-22T11:11:11.23142 America/New_York")
zdt_end = to_j_zdt("1995-03-25T11:11:11.23142 America/New_York")
instant_start = to_j_instant("2022-01-01T00:00:00 ET")
instant_end = to_j_instant("2022-01-05T00:00:00 ET")
local_start = to_j_local_date("2024-05-06")
local_end = to_j_local_date("2024-05-10")

my_zoned_example = range_calendar_example(zdt_start, zdt_end)
my_instant_example = range_calendar_example(instant_start, instant_end)
my_local_example = range_calendar_example(local_start, local_end)
```

--------------------------------

### Create a Basic Matplotlib Plot in Deephaven

Source: https://github.com/deephaven/deephaven-plugins/blob/main/plugins/matplotlib/README.md

Demonstrates how to create a simple static Matplotlib plot that can be viewed within a Deephaven environment. This serves as a foundational example before introducing dynamic updates.

```python
import matplotlib.pyplot as plt

fig = plt.figure()
ax = fig.subplots()  # Create a figure containing a single axes.
ax.plot([1, 2, 3, 4], [4, 2, 6, 7])  # Plot some data on the axes.
```

--------------------------------

### Aligning Grid Items with align_items in Deephaven UI

Source: https://github.com/deephaven/deephaven-plugins/blob/main/plugins/ui/docs/components/grid.md

Illustrates the `align_items` prop for aligning items along the block axis of a `grid`. It provides options such as `stretch`, `start`, `end`, `center`, `self-start`, `self-end`, `baseline`, `first baseline`, `last baseline`, `safe center`, and `unsafe center`, with a Python example showing dynamic alignment control using a picker.

```python
from deephaven import ui

colors = []
for i in range(100, 901, 100):
    colors.append(f"red-{i}")
    colors.append(f"green-{i}")
    colors.append(f"blue-{i}")


@ui.component
def grid_align():
    align, set_align = ui.use_state("stretch")
    return [
        ui.picker(
            ui.item("stretch"),
            ui.item("start"),
            ui.item("end"),
            ui.item("center"),
            ui.item("self-start"),
            ui.item("self-end"),
            ui.item("baseline"),
            ui.item("first baseline"),
            ui.item("last baseline"),
            ui.item("safe center"),
            ui.item("unsafe center"),
            selected_key=align,
            on_selection_change=set_align,
            label="Pick an option (controlled)",
        ),
        ui.grid(
            [
                ui.view(background_color=color, height="25px", width="25px")
                for color in colors
            ],
            columns="repeat(3, 80px)",
            rows=["repeat(9, 80px)"],
            align_items=align,
        ),
    ]


grid_align_example = grid_align()
```