Skip to content

Content Types ​

View content items are the maps, charts, tables, stat-cards, forms, and info-panels that make up a view's layout. They are defined under views[].content: in folia.yaml.

Content items are per-tab: they exist only within their view. When the user switches tabs, the content changes. This is distinct from workspace panels (layers, terminal, catalog) which persist across tabs.

Decided in ADR-0015 D4.

map - Interactive Map ​

The primary spatial content type. Renders an interactive map with data layers. Supports nested components: for canvas overlays and per-layer interactions:.

Fields ​

FieldTypeRequiredDescription
mapobjectMAYMap state: engine, style, center, zoom, pitch, bearing, bounds
layerslistMAYLayer subset for this map. Overrides view-level layers:.
styleobjectMAYPer-layer style overrides keyed by layer path
interactionsobjectMAYPer-layer interaction config (see Interactions)
componentslistMAYMap canvas components (see Components)
labelstringMAYLabel shown in grid layouts to identify this map

When a map content item omits layers:, it MUST inherit the view-level layers: list.

Map State Object ​

FieldTypeRequiredDescription
engineenumMAYMap renderer: maplibre (default), mapbox, deckgl, leaflet
stylestringMAYBasemap style name or URL
center[lng, lat]MAYInitial map center
zoomnumberMAYInitial zoom level
pitchnumberMAYCamera tilt in degrees (0-85)
bearingnumberMAYCamera rotation in degrees
bounds[w, s, e, n]MAYBounding box. Alternative to center/zoom.

Example ​

yaml
- type: map
  position: [0, 0, 2, 2]
  map:
    engine: maplibre
    style: terrain
    center: [-111.6, 40.6]
    zoom: 12
    pitch: 45
    bearing: -30
  layers: [terrain/slope, boundaries/counties]
  style:
    terrain/slope: { opacity: 0.7, palette: avalanche }
  interactions:
    terrain/slope:
      click: sample
      hover: value-tooltip
    boundaries/counties:
      click: popup
      hover: highlight
  components:
    - type: legend
      anchor: bottom-right
    - type: scale-bar
      anchor: bottom-left

chart - Data Visualization ​

Renders charts from layer data or analysis results.

Fields ​

FieldTypeRequiredDescription
chartTypeenumMUSTbar, line, scatter, histogram, pie, area
titlestringMAYChart title
datastringMUSTLayer path providing the data
xAxisobjectMUST (except pie){ field, label } - field name and axis label
yAxisobjectMUST (except pie, histogram){ field, label } - field name and axis label
colorstring or objectMAYFixed color string, or { field, map } for categorical coloring

Supported Chart Types ​

TypeUse CaseRequired Fields
barCategory comparisonxAxis.field, yAxis.field
lineTime series, trendsxAxis.field, yAxis.field
scatterCorrelationxAxis.field, yAxis.field
histogramDistributionxAxis.field (binned automatically)
pieProportionsfield, valueField
areaCumulative trendsxAxis.field, yAxis.field

Example ​

yaml
- type: chart
  position: [2, 0, 2, 1]
  chartType: bar
  title: Avalanches by Terrain Class
  data: analysis/terrain_avy_join
  xAxis:
    field: terrain_class
    label: ATES Classification
  yAxis:
    field: avalanche_count
    label: Number of Avalanches
  color:
    field: terrain_class
    map:
      simple: "#4caf50"
      challenging: "#ff9800"
      complex: "#f44336"

table - Data Table ​

Sortable, filterable data grid from vector data or analysis results.

Fields ​

FieldTypeRequiredDescription
datastringMUSTLayer path to render
columnslistMAYColumn definitions. Each item: { field, label, format, width }. Defaults to all fields.
sortBystringMAYDefault sort column field name
sortOrderenumMAYasc or desc. Defaults to asc.
pageSizenumberMAYRows per page. Defaults to 25.
filterablebooleanMAYEnable column filter UI. Defaults to false.

Column Definition ​

FieldTypeRequiredDescription
fieldstringMUSTAttribute field name from the data source
labelstringMAYDisplay label. Defaults to field name.
formatstringMAYFormat type: number, percent, area_ha, area_km2, degrees, currency_usd
widthnumberMAYColumn width in pixels

Example ​

yaml
- type: table
  position: [0, 2, 4, 1]
  title: SNOTEL Stations
  data: sources/snotel_stations
  columns:
    - { field: name, label: Station, width: 200 }
    - { field: elevation, label: "Elev (ft)", format: number }
    - { field: snow_depth, label: "Depth (in)", format: number }
    - { field: air_temp, label: "Temp (F)", format: number }
  sortBy: snow_depth
  sortOrder: desc
  pageSize: 15
  filterable: true

stat-card - Single Metric ​

Displays a single prominent value with label and optional trend indicator.

Fields ​

FieldTypeRequiredDescription
titlestringMUSTMetric label
valuestringMUSTLayer path providing the metric
fieldstringMUSTField name within the layer to display
formatenumMAYarea_ha, area_km2, percent, number, degrees, currency_usd
precisionnumberMAYDecimal places
iconstringMAYIcon name (e.g., mountain, tree, trending-up)
trendobjectMAYTrend indicator with value, field, format, and positiveIs

Trend Object ​

FieldTypeRequiredDescription
valuestringMUSTLayer path providing the trend metric
fieldstringMUSTField name for the trend value
formatenumMAYFormat type for the trend value
positiveIsenumMUSTgood or bad. Controls color: green for good, red for bad.

Example ​

yaml
- type: stat-card
  position: [2, 0, 1, 1]
  title: Forest Loss
  value: analysis/forest_loss_total
  field: total_ha
  format: area_ha
  precision: 0
  icon: tree
  trend:
    value: analysis/forest_loss_yoy_change
    field: yoy_percent
    format: percent
    positiveIs: bad

A stat-card can also appear as a component anchored to a map canvas. See Components.

form - User Input ​

Bidirectional Content

Every other content type is read-only: it consumes data and renders it. The form content type is bidirectional - it renders input controls AND provides parameter values.

Forms change what data is (re-execute compute to produce new results). This is different from controls components, which change how data looks (client-side rendering adjustments).

Decided in ADR-0005.

Form Field Types ​

TypeRenders asValue typeAdditional config
selectDropdownstringsource (layer to populate from), sourceField
multi-selectMulti-selectstring[]source, sourceField
sliderRange slidernumbermin, max, step, default
numberNumber inputnumbermin, max, default
textText inputstringdefault, placeholder
dateDate pickerdatedefault, min, max
toggleToggle switchbooleandefault

Form vs Controls ​

controls componentform content
Defined incomponents: on a map content itemcontent: in a view layout
Binds toparams in the view:param in a compute: block
ScopeVisual parameters (opacity, filters, thresholds)Computation inputs (function arguments)
Data flowParam changes re-render existing dataParam changes re-execute compute, produce new data

Example ​

yaml
- type: form
  position: [0, 0, 1, 1]
  title: Pricing Parameters
  fields:
    - name: instance_type
      type: select
      label: Instance Type
      source: cloud_pricing/ec2
      sourceField: instance_type

    - name: hours
      type: slider
      label: Hours / Month
      min: 0
      max: 730
      step: 1
      default: 730

    - name: count
      type: number
      label: Instance Count
      default: 1
      min: 1
      max: 100

    - name: include_reserved
      type: toggle
      label: Include Reserved Pricing
      default: false

Reactivity ​

When any form field changes, the computed layer's compute.query MUST re-execute with the new parameter values. All content items referencing that layer MUST update with the new results. The dependency graph determines which downstream layers also recompute.

info-panel - Aggregated Selection Results ​

Displays query results from map clicks or row selections, aggregated across all queryable layers. Fields are auto-derived from the layer's type and output schema; optionally overridden by the layer's style.info: block.

Decided in ADR-0015 D1.

Fields ​

FieldTypeRequiredDescription
triggerenumMUSTmap-click or row-select

Field Resolution Order ​

When a user clicks a point on the map, the platform MUST query every visible layer that supports sampling/querying (determined by type:, not manual declaration). Fields are resolved in this order:

  1. Compute output schema - if the layer has compute:, the op definition declares output fields
  2. Band metadata - if raster source, bands from source metadata
  3. Attribute table - if vector source, all fields
  4. style.info.fields override - restricts or customizes the auto-derived fields

Results SHOULD be grouped by style.info.section if specified on the layer.

Example ​

yaml
- type: info-panel
  position: [2, 0, 1, 2]
  trigger: map-click

Licensed under CC-BY-4.0