# Zoom, pan and highlights

> Control zoom and pan, build zoom buttons that stay in sync with the mouse, and highlight intervals or items of the profile from your own UI.

## Zoom and pan

With `zoom` and `pan` on (as in `INTERACTIVE_RENDER_CONFIG`), the mouse wheel zooms and dragging pans each panel. Turn them off where they would get in the way, for example on a page that scrolls:

```ts
renderConfig: { ...applyRenderLocale(INTERACTIVE_RENDER_CONFIG, 'en'), zoom: false, pan: false }
```

The live previews on this site do exactly that, so the wheel scrolls the page.

## Your own zoom buttons

`zoomBy`, `resetZoom` and `getZoomScale` drive the same zoom behavior as the mouse, so a toolbar and the wheel stay in sync. `onZoom` reports the scale after every change, from either source:

```ts
const renderer = new WellRenderer(svgs, {
  renderConfig: { ...INTERACTIVE_RENDER_CONFIG, zoom: true, pan: true },
  onZoom: scale => (scaleLabel.textContent = `${Math.round(scale * 100)} %`),
});

zoomInButton.onclick = () => renderer.zoomBy(1.25);
zoomOutButton.onclick = () => renderer.zoomBy(1 / 1.25);
fitButton.onclick = () => renderer.resetZoom(); // back to renderConfig.zoomLevel (1 = fit)
```

A scale of `1` is the initial fit. `renderConfig.minZoomScale` and `maxZoomScale` (default 0 and 150) bound the wheel, drag, `zoomBy` and `resetZoom` alike. `zoomBy` does nothing when both zoom and pan are off.

## Highlights

Highlights draw an outline and an optional label over parts of the profile, for example the row a user hovers in a table, or the interval a validation message points at. Pass them to `draw`:

```ts
renderer.draw(well, {
  highlights: {
    well_screen: [{ from: 36, to: 54, label: 'Screen 1' }],
    lithology: [{ from: 8, to: 30 }],
    fractures: [{ depth: 67, label: 'Water entry' }],
  },
});
```

Each key targets one component (`lithology`, `caves`, `fractures`, `bore_hole`, `surface_case`, `hole_fill`, `well_case`, `well_screen`, `reduction`, and `cement_pad` with a single item). An item gives the interval (`from`, `to`) or point (`depth`) to mark, an optional `diameter`, and an optional `label`. Draw again without `highlights` to clear them.

## Tooltips

Hovering a layer shows a tooltip with its data. Limit or turn them off with `renderConfig.tooltips` ([Layers and labels](/render/guides/layers-and-labels#tooltips)), and restyle them with the `tooltip` class names ([Theming](/render/guides/theming#class-names)).

## Stable updates while editing

When the user edits the well, `draw` animates from the old drawing to the new one. D3 matches old and new items by key; give each array item a stable `key` (the `RenderableWell` type allows it) so an inserted layer does not make every layer below it animate. Keys are runtime only: remove them before serializing the file, since the format does not define them.