Zoom, pan and highlights

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:

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:

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:

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), and restyle them with the tooltip class names (Theming).

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.