---
sidebar_position: 6
sidebar_label: Viewport Grid Service
---

# Viewport Grid Service

## Overview

This is a new UI service, that handles the grid layout of the viewer.

## Events

There are seven events that get publish in `ViewportGridService `:

| Event                         | Description                                       |
| ----------------------------- | --------------------------------------------------|
| ACTIVE_VIEWPORT_ID_CHANGED | Fires the Id of the active viewport is changed |
| LAYOUT_CHANGED                | Fires the layout is changed                       |
| GRID_STATE_CHANGED            | Fires when the entire grid state is changed       |
| VIEWPORTS_READY            | Fires when the viewports are ready in the grid      |

## Interface

For a more detailed look on the options and return values each of these methods
is expected to support, [check out it's interface in `@ohif/core`][interface]

| API Member                                                            | Description                                         |
| --------------------------------------------------------------------- | --------------------------------------------------- |
| `setActiveViewportId(viewportId)`                                       | Sets the active viewport Id in the app           |
| `getState()`                                                          | Gets the states of the viewport (see below)         |
| `setDisplaySetsForViewport({ viewportId, displaySetInstanceUID })` | Sets displaySet for viewport based on displaySet Id |
| `setLayout({numCols, numRows, keepExtraViewports})`                   | Sets rows and columns. When the total number of viewports decreases, optionally keep the extra/offscreen viewports. |
| `reset()`                                                             | Resets the default states                           |
| `getNumViewportPanes()`                                               | Gets the number of visible viewport panes           |
| `getLayoutOptionsFromState(gridState)`                                | Utility method that produces a `ViewportLayoutOptions` based on the passed in state|
| `getActiveViewportId()`                                | Returns the viewport Id of the active viewport in the grid|
| `getActiveViewportOptionByKey(key)`                             | Gets the specified viewport option field (key) for the active viewport |

## Implementations

| Implementation         | Consumer                   |
| ---------------------- | -------------------------- |
| [ViewportGridProvider] | Baked into Dialog Provider |

`*` - Denotes maintained by OHIF

## State

```js
const DEFAULT_STATE = {
  // starting from null, hanging
  // protocol will defined number of rows and cols
  numRows: null,
  numCols: null,
  viewports: [
    /*
     * {
     *    displaySetInstanceUID: string,
     * }
     */
  ],
  activeViewportId: null,
};
```
