<mosaica-filter-panel>

A panel of field cards for filtering and highlighting the map by any field.

Use the filter panel as the place where viewers narrow the map down, as <mosaica-explorer> does in its sidebar. Each filter or highlight in force shows as a chip above the cards, and pressing a chip opens its field's card.

The row at the top says what the cards' solid bars count. That is the items in view that the filters match, or the highlighted items while there is a highlight. The pale bars count everything the filters match, so that viewers can compare what is in view with the whole.

The panel shows a card for each field in pinned, for each field that holds a filter or highlight, and for the field the map is coloured by. Viewers add other fields with Add field. Taking a card off clears that field's filters and highlights.

Set chips-only on one panel and controls-only on another when you want the chips apart from the cards.

import '@mosaicajs/components/filter-panel';

Attributes

Attribute	Property	Type	Default	Description
chips-only	chipsOnly	boolean	false	Shows only the chips, and nothing while no filter or highlight is in force.
controls-only	controlsOnly	boolean	false	Shows the cards and Add field without the subject row and the chips.
pinned	pinned	string	''	The columns whose cards always show, even when they hold no filter, separated by spaces or commas. Write a layer as cluster:<layer>. Unset, a card shows only once its field is filtered or the viewer adds it.
compact	compact	boolean	false	Keeps one card open at a time, and shortens the subject row's figures.
cluster-level	clusterLevel	number | null	null	The level that cards for layers with levels count at. null is the coarsest level.
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
show(field: string)	void	Show field's card, open it, and scroll to and focus it. Call it after mosaica-chipopen to show the chip's card.
focus(options?: FocusOptions)	void	Moves focus to the first card's search box or plot, else Add field.
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-filterchange	A column's chip was removed, Clear all was pressed, the highlight was cleared from the subject row, or a card was taken off in Add field. Removing a member_of chip fires nothing. Each card fires its own as well.
mosaica-chipopen	A column's chip was pressed while chips-only is set, so you can show its card.

Parts

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

Part	Description
state	The state line, with data-state.
refusal	The words "View refused", with data-code, in the refused state.
reason	The server's reason for a refusal, under "View refused".
subject	The subject row.
subject-key	The colour of the subject's bars.
subject-name	In view, or Highlighted while a highlight is set.
subject-count	The number in view, or highlighted.
clear-highlight	The × beside Highlighted, which clears the highlight.
all	All matching and its number.
all-count	The number matching.
chips	The line of chips, while any filter or highlight is in force.
chip	One chip, with data-verb (filter or highlight) and data-column or data-artifact.
edit	A column chip's text, a button that opens its card.
clear	The Clear all button.
card	One <mosaica-field-card>, with data-field.
add	The Add field button, with aria-expanded.
add-note	How many fields are not listed.
add-list	The list of fields to add, while it is open.
add-search	The search box over that list.
add-option	One field in that list, with data-column or data-layer, aria-checked while its card is shown, and aria-disabled if it is pinned and cannot be taken off.
field-card-<part>	A part of a card.
filter-<part>	A part of a card's <mosaica-filter> search box.
cluster-filter-<part>	A part of a card's <mosaica-cluster-filter> search box.

CSS custom properties

The theme tokens apply to this element.