components¶

@mosaicajs/react/components is every element of @mosaicajs/components as a React component, such as MosaicaMap for <mosaica-map>. Each component takes the element's properties as props, including objects such as store that React 18 would otherwise set as attributes. Each event the element fires is a handler prop, such as onPick for mosaica-pick. The element's attributes, properties, events, slots and parts are on its page in the Components reference, which each component's type below links to.

A component draws from the store you pass as store, such as one from useMosaicaStore in @mosaicajs/react, or else from an enclosing MosaicaStore or MosaicaExplorer. Those two and MosaicaMap can also make their own store from viewerUrl and token or authorise. You can pass an inline authorise function: the component calls the latest one and does not create a new store when it changes. To show the map to another viewer, change token or viewerUrl, or give the component a new key.

The element classes are exported as types with an Element suffix, such as MapElement, for typing a ref. This entry imports @mosaicajs/components, and with it Lit and deck.gl.

Example¶

import {useMosaicaStore} from '@mosaicajs/react';
import {MosaicaMap, MosaicaItemCard} from '@mosaicajs/react/components';

function Map({token}: {token: string}) {
  const store = useMosaicaStore({viewerUrl: 'http://localhost:8080', token});
  return (
    <>
      <MosaicaMap store={store} onPick={(e) => console.log(e.detail.id)} />
      <MosaicaItemCard store={store} />
    </>
  );
}

Type Aliases¶

MosaicaEvents¶

MosaicaEvents = MosaicaEventMap

The events the elements fire, by name, each a CustomEvent with its detail. The same type as MosaicaEventMap in @mosaicajs/components.

Variables¶

MosaicaArtifactCard¶

const MosaicaArtifactCard: ReactWebComponent\<MosaicaArtifactCard, { onArtifactFit: EventName\<CustomEvent\<{ id: string; }>>; onClauseChange: EventName\<CustomEvent\<{ id: string; layer: string; on: boolean; outside: boolean; verb: ClauseVerb; }>>; onClose: EventName\<CustomEvent\<{ what: "artifact" | "item"; }>>; }>

<mosaica-artifact-card> as a React component. Event props: onArtifactFit (mosaica-artifactfit), onClauseChange (mosaica-clausechange) and onClose (mosaica-close).

MosaicaClusterFilter¶

const MosaicaClusterFilter: ReactWebComponent\<MosaicaClusterFilter, { onClauseChange: EventName\<CustomEvent\<{ id: string; layer: string; on: boolean; outside: boolean; verb: ClauseVerb; }>>; }>

<mosaica-cluster-filter> as a React component. Event prop: onClauseChange (mosaica-clausechange).

MosaicaColourEditor¶

const MosaicaColourEditor: ReactWebComponent\<MosaicaColourEditor, { onClusterColour: EventName\<CustomEvent\<{ changes: object[]; layer: string; }>>; onValueColour: EventName\<CustomEvent\<{ changes: object[]; column: string; }>>; }>

<mosaica-colour-editor> as a React component. Event props: onValueColour (mosaica-valuecolour) and onClusterColour (mosaica-clustercolour).

MosaicaCount¶

const MosaicaCount: ReactWebComponent\<MosaicaCount, { }>

<mosaica-count> as a React component. It has no event props.

MosaicaExplorer¶

const MosaicaExplorer: ReactWebComponent\<MosaicaExplorer, { onArtifactFit: EventName\<CustomEvent\<{ id: string; }>>; onArtifactOpen: EventName\<CustomEvent\<{ detail: Omit\<ArtifactDetail, "maskedCount"> & object; id: string; }>>; onBasemapChange: EventName\<CustomEvent\<{ note: string | null; refusal: string | null; }>>; onBudgetChange: EventName\<CustomEvent\<{ budget: number; }>>; onClauseChange: EventName\<CustomEvent\<{ id: string; layer: string; on: boolean; outside: boolean; verb: ClauseVerb; }>>; onClose: EventName\<CustomEvent\<{ what: "artifact" | "item"; }>>; onClusterBudgetChange: EventName\<CustomEvent\<{ budget: number; }>>; onClusterColour: EventName\<CustomEvent\<{ changes: object[]; layer: string; }>>; onClusterPaletteChange: EventName\<CustomEvent\<{ palette: PaletteName; }>>; onColourChange: EventName\<CustomEvent\<{ colourBy: string | null; }>>; onDisplayChange: EventName\<CustomEvent\<{ density: DensityMode; densityColours: DensityColours | null; densityResolution: number; densityScale: DensityScale; densityStrength: number; pointOpacity: number | null; points: boolean; radius: number | null; }>>; onExpired: EventName\<CustomEvent\<{ refusal: Refusal | null; }>>; onFilterChange: EventName\<CustomEvent\<{ column: string | null; expr?: FilterExpr | null; verb?: ClauseVerb; }>>; onFold: EventName\<CustomEvent\<{ field: string; folded: boolean; }>>; onHover: EventName\<CustomEvent\<{ id: string; x: number; y: number; }>>; onItemOpen: EventName\<CustomEvent\<{ id: string; record: ItemDetail; }>>; onLayerChange: EventName\<CustomEvent\<{ layers: string[]; }>>; onLevelChange: EventName\<CustomEvent\<{ level: number | null; }>>; onMiss: EventName\<CustomEvent\<Record\<string, never>>>; onOpen: EventName\<CustomEvent\<{ fields: Record\<string, unknown>; id: string; }>>; onPaletteChange: EventName\<CustomEvent\<{ palette: CategoryPaletteName; ramp: RampName; reverse: boolean; scale: RampScale; }>>; onPick: EventName\<CustomEvent\<{ id: string; }>>; onSelectChange: EventName\<CustomEvent\<{ matched?: Masked; served?: Count; shape: SelectionShapeDetail | null; status?: "refused" | "loading" | "shown" | "cleared"; verdict?: RegionVerdict | null; visible?: Masked | null; }>>; onSizeChange: EventName\<CustomEvent\<{ max: number; min: number; scale: SizeScale; sizeBy: string | null; }>>; onStateChange: EventName\<CustomEvent\<{ from: PanelState | null; refusal: Refusal | null; to: PanelState; }>>; onValueColour: EventName\<CustomEvent\<{ changes: object[]; column: string; }>>; onViewChange: EventName\<CustomEvent\<{ bbox: [number, number, number, number]; height: number; width: number; zoom: number; }>>; onViewFollow: EventName\<CustomEvent\<{ view: string; x: number; y: number; }>>; onViewSwitch: EventName\<CustomEvent\<{ from: string; sameFrame: boolean; to: string; }>>; }>

<mosaica-explorer> as a React component. The events of the elements inside it bubble out, so it has a handler prop for each of them: onPick for mosaica-pick, and so on for every event in MosaicaEvents except mosaica-chipopen, which it does not fire. The open prop is the function the item card's Open button calls, and openUrl the address it goes to. onOpen is called on every press.

MosaicaFieldCard¶

const MosaicaFieldCard: ReactWebComponent\<MosaicaFieldCard, { onClauseChange: EventName\<CustomEvent\<{ id: string; layer: string; on: boolean; outside: boolean; verb: ClauseVerb; }>>; onClusterColour: EventName\<CustomEvent\<{ changes: object[]; layer: string; }>>; onColourChange: EventName\<CustomEvent\<{ colourBy: string | null; }>>; onFilterChange: EventName\<CustomEvent\<{ column: string | null; expr?: FilterExpr | null; verb?: ClauseVerb; }>>; onFold: EventName\<CustomEvent\<{ field: string; folded: boolean; }>>; onLevelChange: EventName\<CustomEvent\<{ level: number | null; }>>; onValueColour: EventName\<CustomEvent\<{ changes: object[]; column: string; }>>; }>

<mosaica-field-card> as a React component. Event props: onFilterChange (mosaica-filterchange), onClauseChange (mosaica-clausechange), onColourChange (mosaica-colourchange), onLevelChange (mosaica-levelchange), onValueColour (mosaica-valuecolour), onClusterColour (mosaica-clustercolour) and onFold (mosaica-fold).

MosaicaFilter¶

const MosaicaFilter: ReactWebComponent\<MosaicaFilter, { onFilterChange: EventName\<CustomEvent\<{ column: string | null; expr?: FilterExpr | null; verb?: ClauseVerb; }>>; }>

<mosaica-filter> as a React component. Event prop: onFilterChange (mosaica-filterchange).

MosaicaFilterPanel¶

const MosaicaFilterPanel: ReactWebComponent\<MosaicaFilterPanel, { onChipOpen: EventName\<CustomEvent\<{ column: string; verb: ClauseVerb; }>>; onClauseChange: EventName\<CustomEvent\<{ id: string; layer: string; on: boolean; outside: boolean; verb: ClauseVerb; }>>; onClusterColour: EventName\<CustomEvent\<{ changes: object[]; layer: string; }>>; onColourChange: EventName\<CustomEvent\<{ colourBy: string | null; }>>; onFilterChange: EventName\<CustomEvent\<{ column: string | null; expr?: FilterExpr | null; verb?: ClauseVerb; }>>; onFold: EventName\<CustomEvent\<{ field: string; folded: boolean; }>>; onLevelChange: EventName\<CustomEvent\<{ level: number | null; }>>; onValueColour: EventName\<CustomEvent\<{ changes: object[]; column: string; }>>; }>

<mosaica-filter-panel> as a React component. Event props: onFilterChange (mosaica-filterchange), onChipOpen (mosaica-chipopen), and from its cards onClauseChange (mosaica-clausechange), onColourChange (mosaica-colourchange), onLevelChange (mosaica-levelchange), onValueColour (mosaica-valuecolour), onClusterColour (mosaica-clustercolour) and onFold (mosaica-fold).

MosaicaHierarchy¶

const MosaicaHierarchy: ReactWebComponent\<MosaicaHierarchy, { onArtifactFit: EventName\<CustomEvent\<{ id: string; }>>; onClauseChange: EventName\<CustomEvent\<{ id: string; layer: string; on: boolean; outside: boolean; verb: ClauseVerb; }>>; }>

<mosaica-hierarchy> as a React component. Event props: onClauseChange (mosaica-clausechange) and onArtifactFit (mosaica-artifactfit).

MosaicaItemCard¶

const MosaicaItemCard: ReactWebComponent\<MosaicaItemCard, { onClose: EventName\<CustomEvent\<{ what: "artifact" | "item"; }>>; onOpen: EventName\<CustomEvent\<{ fields: Record\<string, unknown>; id: string; }>>; onViewFollow: EventName\<CustomEvent\<{ view: string; x: number; y: number; }>>; }>

<mosaica-item-card> as a React component. Event props: onOpen (mosaica-open), onClose (mosaica-close) and onViewFollow (mosaica-viewfollow). The open prop is the function the Open button calls, and openUrl the address it goes to. onOpen is called on every press.

MosaicaKeyPicker¶

const MosaicaKeyPicker: ReactWebComponent\<MosaicaKeyPicker, { onViewSwitch: EventName\<CustomEvent\<{ from: string; sameFrame: boolean; to: string; }>>; }>

<mosaica-key-picker> as a React component. Event prop: onViewSwitch (mosaica-viewswitch).

MosaicaLayerPicker¶

const MosaicaLayerPicker: ReactWebComponent\<MosaicaLayerPicker, { onLayerChange: EventName\<CustomEvent\<{ layers: string[]; }>>; }>

<mosaica-layer-picker> as a React component. Event prop: onLayerChange (mosaica-layerchange).

MosaicaMap¶

const MosaicaMap: ReactWebComponent\<MosaicaMap, { onArtifactOpen: EventName\<CustomEvent\<{ detail: Omit\<ArtifactDetail, "maskedCount"> & object; id: string; }>>; onBasemapChange: EventName\<CustomEvent\<{ note: string | null; refusal: string | null; }>>; onHover: EventName\<CustomEvent\<{ id: string; x: number; y: number; }>>; onItemOpen: EventName\<CustomEvent\<{ id: string; record: ItemDetail; }>>; onLayerChange: EventName\<CustomEvent\<{ layers: string[]; }>>; onMiss: EventName\<CustomEvent\<Record\<string, never>>>; onPick: EventName\<CustomEvent\<{ id: string; }>>; onSelectChange: EventName\<CustomEvent\<{ matched?: Masked; served?: Count; shape: SelectionShapeDetail | null; status?: "refused" | "loading" | "shown" | "cleared"; verdict?: RegionVerdict | null; visible?: Masked | null; }>>; onViewChange: EventName\<CustomEvent\<{ bbox: [number, number, number, number]; height: number; width: number; zoom: number; }>>; }>

<mosaica-map> as a React component. Event props: onPick (mosaica-pick), onItemOpen (mosaica-itemopen), onMiss (mosaica-miss), onHover (mosaica-hover), onViewChange (mosaica-viewchange), onSelectChange (mosaica-selectchange), onArtifactOpen (mosaica-artifactopen), onLayerChange (mosaica-layerchange) and onBasemapChange (mosaica-basemapchange).

MosaicaSelection¶

const MosaicaSelection: ReactWebComponent\<MosaicaSelection, { onSelectChange: EventName\<CustomEvent\<{ matched?: Masked; served?: Count; shape: SelectionShapeDetail | null; status?: "refused" | "loading" | "shown" | "cleared"; verdict?: RegionVerdict | null; visible?: Masked | null; }>>; }>

<mosaica-selection> as a React component. Event prop: onSelectChange (mosaica-selectchange).

MosaicaStatus¶

const MosaicaStatus: ReactWebComponent\<MosaicaStatus, { onExpired: EventName\<CustomEvent\<{ refusal: Refusal | null; }>>; onStateChange: EventName\<CustomEvent\<{ from: PanelState | null; refusal: Refusal | null; to: PanelState; }>>; }>

<mosaica-status> as a React component. Event props: onStateChange (mosaica-statechange) and onExpired (mosaica-expired).

MosaicaStore¶

const MosaicaStore: ReactWebComponent\<MosaicaStore, { }>

<mosaica-store> as a React component. It has no event props.

MosaicaViewPicker¶

const MosaicaViewPicker: ReactWebComponent\<MosaicaViewPicker, { onViewSwitch: EventName\<CustomEvent\<{ from: string; sameFrame: boolean; to: string; }>>; }>

<mosaica-view-picker> as a React component. Event prop: onViewSwitch (mosaica-viewswitch).