`<mosaica-hierarchy>`¶

A tree for browsing a layer's artifacts and filtering by them.

Use the hierarchy when viewers should be able to reach a layer's artifacts at any level, wherever the camera is. It opens on the top-level artifacts and does not change as the map moves. Expanding a row loads its children a page at a time.

The hierarchy offers each layer that depends on no other layer and whose artifacts form a hierarchy, filter layers among them. When there are several, a select switches between them.

Each row shows how many of the artifact's items the viewer may see. While filters are set, it also shows how many of those items match. A parent the viewer may not see is left out, so its children appear at the top level.

A row's buttons highlight or filter the map by its artifact. Its Fit button only fires mosaica-artifactfit, so you handle the event by passing its id to the map's fitTo. The explorer does this for a hierarchy you put in one of its slots. fitTo finds only the artifacts the map currently draws, so Fit does nothing for a row whose artifact is not drawn at this zoom.

The panel makes no requests while it is hidden, so it costs nothing in a closed drawer.

import '@mosaicajs/components/hierarchy';

Attributes¶

Attribute	Property	Type	Default	Description
`layer`	`layer`	`string`	`''`	The layer to browse. Unset or unknown, the first layer the bundle offers.
`limit`	`limit`	`number`	`50`	Rows per page, from 1 up to the server's `maxBrowseRows`.
`viewer-url`	`viewerUrl`	`string`	`''`	The base URL of the Mosaica viewer server, for the store the element builds: a full URL such as `https://maps.example.org`, or a path such as `/mosaica`. Unset, the page's own origin. Read only by the map, the explorer and `<mosaica-store>`. Changing it builds a new store.
`token`	`token`	`string`	`''`	A viewer token for the store the element builds. Without `token` or `authorise`, only an open server (`serve.open`) answers. Read only by the map, the explorer and `<mosaica-store>`. Changing it builds a new store.
`artifacts-per-tile`	`artifactsPerTile`	`number \| null`	`null`	The most artifacts one level of a layer shows per map tile, for the store the element builds. Unset, 50, or the server's `selection.max_artifacts_per_tile` if lower. A value above that maximum is refused. Read only by the map, the explorer and `<mosaica-store>`. Changing it builds a new store.

Properties¶

Set as JavaScript properties; they have no attribute.

Property	Type	Default	Description
`store`	`Store \| null`	`null`	The store to use, ahead of one from context or one the element would build. The element never disposes it.
`authorise`	`TokenSupplier \| null`	`null`	A function that returns a viewer token, used instead of `token` and called again before the token expires. A different function builds a new store, so keep it stable across renders. Set it together with `viewer-url`: a store built from `viewer-url` alone first sends a request with no token, and is replaced when `authorise` arrives.
`activeStore`	`Store \| null`	read-only	The store this element is using, or `null` if it has none.
`source`	`StoreSource`	read-only	Where `activeStore` came from.

Methods¶

Method	Returns	Description
`dispose()`	`void`	Dispose of the store this element built. Removing the element from the page does not, so call this when you are done with the element. A store you passed in is left to you.

Events¶

Each bubbles and is composed. Events gives each detail.

Event	Fired when
`mosaica-clausechange`	A row's name, highlight or filter button added or removed a `member_of` clause.
`mosaica-artifactfit`	A row's Fit button was pressed.

Parts¶

Styled from outside the element with ::part().

Part	Description
`title`	The heading.
`state`	The state line, with `data-state`.
`refusal`	The words "View refused" or "Layer unavailable", with `data-code`.
`reason`	The server's reason for a refusal, under "View refused".
`layer`	The layer select, shown if there are several layers.
`search`	The search box.
`tree`	The tree of rows.
`row`	One row, with `data-id`, and `data-clause` (`filter`, `highlight` or both, separated by a space) while its artifact is filtered or highlighted.
`expander`	A row's expand button. On a row with no children it has `data-leaf` and is hidden, keeping the names aligned.
`name`	A row's name, with `data-unnamed` if it has none. Pressing it highlights the artifact.
`counts`	A row's counts.
`count-matched`	The `<mosaica-count>` of a row's items that match the filters, while a filter is set.
`count-masked`	The `<mosaica-count>` of a row's items the viewer may see.
`actions`	A row's buttons.
`highlight`	A row's highlight button, with `aria-pressed`.
`filter`	A row's filter button, with `aria-pressed`.
`fit`	A row's Fit button, on a layer that draws.
`dismiss`	A × that removes a row's filter or highlight, one for each, with `data-verb`.
`also`	The row's other parents, or "Children unavailable" with `data-code` if its children were refused.
`children`	An expanded row's children.
`more`	The More button, which loads the next page.

CSS custom properties¶

The theme tokens apply to this element.

<mosaica-hierarchy>¶