Binding Navio to other reactive widgets

NavioWidget follows the Reactive Widget contract: it is an HTML element whose .value holds the selected rows, and which emits an input event whenever you change it. That is all Inputs.bind needs.

1. Two Navios, bound

Filter either one — the other follows. Between two Navios the binding copies the filter chain rather than .value: the rows are the output, the chain is how they were chosen, and only the chain reproduces the whole drill-down. Bind on .value and B would show one flat level where A has three.

Navio A

Navio B (bound to A)

Shared .value

(no filters yet)

2. Translating another widget's facets into filters

This is the real @john-guerra/faceted-search, loaded from its Observable notebook export. Its .value is the surviving rows, with the facets on value.filters. Rows alone would bind straight into Navio now — but they arrive as one anonymous set. Translating the facets instead gives Navio the levels it is for: labelled, individually closable, and drillable further.

Both facet kinds map across. A checkbox facet becomes value filters on one level — tick Adelie and Navio gains a level with species == Adelie, exactly as clicking that value would. A range facet becomes a valueRange filter, e.g. beak in [38, 46]. That is a different thing from Navio's own brush, which selects a band of positions in the current ordering — a value range means the same thing however the level is sorted, which is what makes it portable between widgets.

@john-guerra/faceted-search (value = rows)

Navio C (bound to the facets)

What each side holds