Ready-Made Views

Use section and crossplot props, navigation handles, saved ranges and PNG export.

--outkrop-point: #3e8d70;

display={{ x: 'Porosity', y: 'Permeability', pointSize: 8 }}

Choose a source-backed seismic section or an in-memory crossplot. Both supply axes, navigation, hover readouts and theming. Set a height on every view.

Display a Section

Keep source stable. Local paths come from open; HTTP paths come from your service.

import { useRef } from 'react'
import type { DataSource } from '@bs/outkrop-core'
import { SectionView, type SectionViewHandle } from '@bs/outkrop-react'

export function Section({ source, path }: { source: DataSource; path: string }) {
  const view = useRef<SectionViewHandle>(null)
  return (
    <>
      <button onClick={() => view.current?.reset()}>Reset</button>
      <button onClick={() => view.current?.zoomIn()}>Zoom in</button>
      <SectionView
        ref={view}
        source={source}
        path={path}
        style={{ height: 480 }}
        display={{ wiggle: false, smooth: true, clipMode: 'auto' }}
        onError={(error) => console.error('Section:', error)}
      />
    </>
  )
}

initialWindow sets the opening range; use the handle’s setWindow for later changes. onWindowChange returns null at the full extent. Windows use 1-based traces and ms. onInfo receives metadata; onError receives failures.

Plot Table Columns

import { CrossplotView } from '@bs/outkrop-react'
import type { Table } from '@bs/outkrop-core'

const table: Table = {
  rows: 4,
  columns: [
    { name: 'Porosity', numeric: true, values: new Float64Array([0.08, 0.12, 0.2, 0.25]) },
    { name: 'Permeability', numeric: true, values: new Float64Array([3, 14, 55, 120]) },
  ],
}

export function CorePlot() {
  return (
    <CrossplotView
      table={table}
      display={{ x: 'Porosity', y: 'Permeability', color: 'Porosity', colorscale: 'Viridis' }}
      style={{ height: 480 }}
    />
  )
}

Choose existing names for x and y; optional color and size fields select other columns. Rows without finite coordinates are skipped. Keep table arrays stable until the data changes.

For local files, use source.points. Report the sampled row count.

Navigate, Annotate and Export

Export includes plotted canvases and canvas overlays, not HTML toolbars. Catch export errors; revoke object URLs after download. See themes for styling and custom surfaces for well tracks.