Viewer Grid

Grid view

The GridView component displays images in an MxN grid. Each cell is an independent OpenSeaDragon viewer with its own Fabric.js overlay.

import { GridView } from 'osdlabel/components';

<GridView
  columns={uiState.gridColumns}
  rows={uiState.gridRows}
  maxColumns={4}
  maxRows={4}
  images={images}
/>;

Grid dimensions

Resize the grid using keyboard shortcuts or the GridControls component (which provides a visual “Table Selector” UI):

• = / + — Add a column (up to maxColumns)
• - — Remove a column (minimum 1)

import { GridControls } from 'osdlabel/components';

<GridControls maxColumns={4} maxRows={4} />;

Programmatic control:

const { actions } = useAnnotator();
actions.setGridDimensions(2, 2); // 2x2 grid

Active cell

Only one cell can be in annotation mode at a time. Click a cell to activate it, or use number keys 1-9 to select cells by position.

const { actions, uiState } = useAnnotator();

// Get the active cell index
const activeCell = uiState.activeCellIndex;

// Set the active cell programmatically
actions.setActiveCell(0);

The active cell is highlighted visually and receives all drawing/selection input. Other cells display annotations in read-only mode (navigation only).

Filmstrip

The Filmstrip component shows thumbnails of all available images and allows drag-to-assign interaction:

import { Filmstrip } from 'osdlabel/components';

<Filmstrip images={images} position="left" />;

The position prop accepts 'left', 'right', or 'bottom'.

Click an image in the filmstrip to assign it to the currently active grid cell. Images already assigned to cells are highlighted with a blue border.

Assigning images to cells

const { actions } = useAnnotator();

// Assign an image to cell 0
actions.assignImageToCell(0, createImageId('my-image'));

Each cell can display one image at a time. Multiple cells can show the same image, but annotations are shared (stored by image ID, not by cell).

Using the all-in-one Annotator

The Annotator component bundles the grid, filmstrip, toolbar, and status bar into a single layout:

import { Annotator } from 'osdlabel/components';

<Annotator
  images={images}
  contexts={contexts}
  filmstripPosition="left"
  maxGridSize={{ columns: 4, rows: 4 }}
  showGridControls
  showFilmstrip
  showViewControls
  showFps
/>;

• Set showFilmstrip={false} to hide the filmstrip sidebar.
• Set showGridControls={true} to show the grid dimension selector in the toolbar.