Skip to main content

ArrowSchemaPanel

from v9.4

ArrowSchemaPanel renders an Apache Arrow schema as a table with one row per field. It is deck.gl-independent and works with structural Arrow schema-like objects.

Usage​

import {tableFromArrays} from 'apache-arrow';
import {ArrowSchemaPanel, PanelBox, PanelManager} from '@deck.gl-community/panels';

const table = tableFromArrays({
  city: ['Oakland', 'San Jose', 'Fremont'],
  trips: [1840, 1320, 980]
});

const panel = new ArrowSchemaPanel({
  id: 'arrow-schema',
  title: 'Arrow Schema',
  schema: table.schema
});

const panelManager = new PanelManager({
  parentElement: document.getElementById('app') as HTMLElement
});

panelManager.setProps({
  components: [new PanelBox({id: 'arrow-schema-box', panel})]
});

Props​

type ArrowSchemaPanelProps = {
  id: string;
  title: string;
  schema?: ArrowSchemaLike | null;
  className?: string;
  theme?: 'inherit' | 'light' | 'dark' | 'invert';
};

Metadata​

Arrow schema and field metadata are shown as key/value entries. When a metadata value is a string containing JSON, ArrowSchemaPanel parses it and renders the parsed value as formatted JSON.

Field child metadata is also shown. This surfaces luma.gl annotations that are stored on fixed-size-list child fields, including luma.gl:matrix-shape, luma.gl:matrix-order, luma.gl:matrix-layout, and prepared temporal metadata keys such as luma.gl:temporal-kind and luma.gl:temporal-unit.

Remarks​

  • Accepts Apache Arrow JS schema-like objects, including Arrow JS v17 and newer.
  • Renders field name, type, nullable state, field metadata, and child metadata.
  • Shows schema-level metadata above the field table when metadata is present.
  • Highlights known luma.gl:* metadata keys for matrix and temporal Arrow columns.