@brightspace-ui/labs 2.18.0 → 2.19.0

package/src/components/ou-filter/tree-filter.js

@@ -0,0 +1,876 @@
+import '@brightspace-ui/core/components/empty-state/empty-state-simple.js';
+import '@brightspace-ui/core/components/loading-spinner/loading-spinner.js';
+import './tree-selector.js';
+
+import { action, computed, decorate, observable } from 'mobx';
+import { css, html, nothing } from 'lit';
+import { LocalizeLabsElement } from '../localize-labs-element.js';
+import { MobxLitElement } from '@adobe/lit-mobx';
+
+// node array indices
+export const COURSE_OFFERING = 3;
+
+export const includesSearch = (nodeName, searchString) =>
+	nodeName.toLowerCase().includes(searchString.toLowerCase());
+
+export const startsWithSearch = (nodeName, searchString) =>
+	nodeName.toLowerCase().startsWith(searchString.toLowerCase());
+
+/**
+ * An object that represents org unit node
+ * @typedef {Object} OrgUnitNode
+ * @property {number} Id
+ * @property {string} Name
+ * @property {number} Type
+ * @property {number[]} Parents - array of org unit ids
+ * @property {boolean} IsActive - optional, should be populated if accessed via Tree.isActive property
+*/
+
+export class Tree {
+	/**
+	 * Type to use as the .tree property of a d2l-labs-tree-filter. Mutator methods will
+	 * trigger re-rendering as needed. Call as new Tree({}) for a default empty tree.
+	 * NB: this is actually a DAG, not a tree. :)
+	 * @param {OrgUnitNode[]} [nodes=[]] - Array of OrgUnitNode
+	 * @param {Number[]} [leafTypes=[]] - TYPE values that cannot be opened
+	 * @param {Number[]} [invisibleTypes=[]] - TYPE values that should not be rendered
+	 * @param {Number[]} [selectedIds] - ids to mark selected. Ancestors and descendants will be marked accordingly.
+	 * @param {Number[]} [ancestorIds] - same as if passed to setAncestorFilter
+	 * @param {Tree} [oldTree] - tree to copy previous state from (e.g. which nodes are open)
+	 * @param {Boolean} isDynamic - if true, the tree is assumed to be incomplete, and tree-filter will fire events as needed
+	 * to request children
+	 * @param {Map}[extraChildren] - Map from parent node ids to arrays of
+	 * {Items: OrgUnitNode[], PagingInfo: {HasMoreItems: boolean, Bookmark}}; these will be added to the tree before
+	 * any selections are applied and the parents marked as populated. Useful for adding cached lookups to a dynamic tree.
+	 * @param visibilityModifiers - optional kvp where values are functions that map an orgUnitId to a boolean indicating visibility
+	 * @param searchFn - function that filters nodes when a user hit search button. It takes two params nodeName and searchString
+	 */
+	constructor({
+		nodes = [],
+		leafTypes = [],
+		invisibleTypes = [],
+		selectedIds,
+		ancestorIds,
+		oldTree,
+		isDynamic = false,
+		extraChildren,
+		visibilityModifiers = {},
+		searchFn = includesSearch
+	}) {
+		this.leafTypes = leafTypes;
+		this.invisibleTypes = invisibleTypes;
+		this.initialSelectedIds = selectedIds;
+		this._nodes = new Map(nodes.map(x => [x.Id, x]));
+		this._children = new Map();
+		this._ancestors = new Map();
+		this._state = new Map((selectedIds ?? []).map(id => [id, 'explicit']));
+		this._open = oldTree ? new Set(oldTree.open) : new Set();
+		// null for no filter, vs. empty Set() when none match
+		this._visible = null;
+		this._populated = isDynamic ? new Set() : null;
+
+		// for dynamic trees; see addNodes
+		this._loading = new Set();
+		this._hasMore = new Set();
+		this._bookmarks = new Map();
+
+		this._visibilityModifiers = visibilityModifiers;
+		this._searchFn = searchFn;
+
+		// fill in children (parents are provided by the caller, and ancestors will be generated on demand)
+		this._updateChildren(this.ids);
+
+		if (extraChildren) {
+			extraChildren.forEach((data, orgUnitId) => {
+				this.addNodes(orgUnitId, data.Items, data.PagingInfo.HasMoreItems, data.PagingInfo.Bookmark);
+			});
+		}
+
+		if (selectedIds) {
+			this.select(selectedIds);
+		}
+
+		if (ancestorIds) {
+			this.setAncestorFilter(ancestorIds);
+		}
+	}
+
+	get selected() {
+		// if selections are set before any nodes are populated, this getter should still work
+		if (this._nodes.size === 0) {
+			return [...this._state]
+				.filter(([, state]) => state === 'explicit')
+				.map(([id]) => id);
+		}
+
+		// if there are nodes, only return the root of each selected subtree
+		const selected = new Set([
+			...this._getSelected(this.rootId),
+			...(this.initialSelectedIds ?? [])
+				// if id has node then _getSelected correctly counts it
+				.filter(id => !this._nodes.has(id))
+		]);
+
+		return [...selected];
+	}
+	set selected(ids) {
+		this.clearSelection();
+		this.select(ids);
+	}
+
+	get allSelectedCourses() {
+		const selected = [...this._state]
+			.filter(([, state]) => state === 'explicit')
+			.map(([id]) => id);
+		return selected.filter(id => this.getType(id) === 3);
+	}
+
+	get ids() {
+		return [...this._nodes.keys()];
+	}
+
+	get isDynamic() {
+		return !!this._populated;
+	}
+
+	get open() {
+		return [...this._open];
+	}
+
+	get rootId() {
+		if (!this._rootId) {
+			this._rootId = this.ids.find(x => this._isRoot(x));
+		}
+		return this._rootId;
+	}
+
+	/**
+	 * Adds nodes as children of the given parent. New nodes will be selected if the parent is.
+	 * The parents of the new nodes will be set to the given parent plus any previous parents (if the node
+	 * was already in the tree). The new nodes are assumed to match the ancestorFilter, if any;
+	 * future changes to that filter are not supported (i.e. it is assumed the caller will reload data
+	 * and create a new tree in that case). See also note on setAncestorFilter().
+	 * @param {number} parentId The parent of the new nodes. The new nodes supplement any existing children.
+	 * @param newChildren Array of nodes to be added to the tree; name and type will be updated if the id already exists.
+	 * @param hasMore - if true, the node is not considered fully populated
+	 * @param bookmark - Opaque data that will be stored with the parent if hasMore is true (or cleared if hasMore is falsy)
+	 */
+	addNodes(parentId, newChildren, hasMore, bookmark) {
+		this._loading.delete(parentId);
+
+		if (hasMore) {
+			this._hasMore.add(parentId);
+			this._bookmarks.set(parentId, bookmark);
+		} else {
+			this._hasMore.delete(parentId);
+			this._bookmarks.delete(parentId);
+		}
+
+		// add parentId to any existing parents of these nodes (before replacing the nodes and losing this info)
+		newChildren.forEach(x => {
+			const existingParents = this.getParentIds(x.Id);
+			const allParents = new Set([parentId, ...existingParents]);
+			x.Parents = [...allParents];
+		});
+		newChildren.forEach(x => this._nodes.set(x.Id, x));
+
+		// merge the new children in to the parent
+		this._children.set(parentId, new Set([...newChildren.map(x => x.Id), ...this.getChildIds(parentId)]));
+
+		// caller should only provide visible nodes
+		if (this._visible) {
+			newChildren.forEach(x => this._visible.add(x.Id));
+		}
+		if (this.getState(parentId) === 'explicit') {
+			newChildren.forEach(x => this._state.set(x.Id, 'explicit'));
+		} else {
+			const initialSelectedIdSet = new Set(this.initialSelectedIds);
+			if (newChildren.some(x => initialSelectedIdSet.has(x.Id))) {
+				this._updateSelected(parentId);
+			}
+		}
+
+		// Ancestors may need updating: if one or more of newChildren was already present (due to
+		// being added under another parent), then they may also have been opened and have descendants,
+		// which now need a new ancestor.
+		// For simplicity and correctness, we simply reset the ancestors map, which will be
+		// regenerated as needed by getAncestorIds.
+		this._ancestors = new Map();
+
+		if (this._populated) {
+			this._populated.add(parentId);
+		}
+	}
+
+	/**
+	 * Merges the given nodes into the tree.
+	 * @param {[][]} [nodes=[]] - Array of arrays, including all ancestors up to root, in the same format as for the constructor
+	 */
+	addTree(nodes) {
+		nodes.forEach(x => this._nodes.set(x.Id, x));
+
+		// invariant: the tree must always contain all ancestors of all nodes.
+		// This means existing nodes cannot be new children of any node: we only need to update children for parents of new nodes.
+		this._updateChildren(nodes.map(x => x.Id));
+
+		// Set selected state for ancestors and descendants if a new node should be selected because its
+		// parent is.
+		// This could perform poorly if the tree being merged in is large and deep, but in the expected use case
+		// (search with load more), we should only be adding a handful of nodes at a time.
+		nodes.forEach(node => {
+			if (node.Parents.some(parentId => this.getState(parentId) === 'explicit')) {
+				this.setSelected(node.Id, true);
+			}
+		});
+
+		// caller should only provide visible nodes
+		if (this._visible) {
+			nodes.forEach(x => this._visible.add(x.Id));
+		}
+
+		// refresh ancestors
+		this._ancestors = new Map();
+	}
+
+	clearSelection() {
+		this._state.clear();
+		// when we hit Clear button we expect that all selection is cleared
+		// including selection in the dynamic tree with invisible selected nodes
+		this.initialSelectedIds = [];
+	}
+
+	getAncestorIds(id) {
+		if (id === 0) return new Set();
+
+		if (!this._ancestors.has(id)) {
+			const ancestors = new Set([
+				id,
+				...this.getParentIds(id).flatMap(x => [...this.getAncestorIds(x)])
+			]);
+			this._ancestors.set(id, ancestors);
+		}
+
+		return this._ancestors.get(id);
+	}
+
+	getBookmark(id) {
+		return this._bookmarks.get(id);
+	}
+
+	getChildIds(id) {
+		if (!id) id = this.rootId;
+		if (!id) return [];
+		const children = this._children.get(id);
+		return children ? [...children] : [];
+	}
+
+	getChildIdsForDisplay(id, pruning) {
+		const children = this.getChildIds(id).filter(x => this._isVisible(x));
+
+		const isPruning = !this.isDynamic
+			&& (pruning || this._isRoot(id))
+			&& children.length === 1
+			&& this.getType(children[0]) !== COURSE_OFFERING;
+		if (isPruning) return this.getChildIdsForDisplay(children[0], true);
+
+		return children.sort((a, b) => this._nameForSort(a).localeCompare(this._nameForSort(b)));
+	}
+
+	/**
+	 * NB: for the purposes of this function, a node is its own descendant
+	 * @param {Number} id
+	 * @returns {Set<Number>}
+	 */
+	getDescendantIds(id) {
+		const children = this._children.get(id);
+		if (!children || !children.size) {
+			return new Set([id]);
+		}
+
+		const descendants = new Set([...children].flatMap(child => [...this.getDescendantIds(child)]));
+		descendants.add(id);
+		return descendants;
+	}
+
+	getMatchingIds(searchString) {
+		return this.ids
+			.filter(x => this._isVisible(x))
+			.filter(x => !this._isRoot(x) && this._searchFn(this._nameForSort(x), searchString))
+			// reverse order by id so the order is consistent and (most likely) newer items are on top
+			.sort((x, y) => y - x);
+	}
+
+	getName(id) {
+		const node = this._nodes.get(id);
+		return (node && node.Name) || '';
+	}
+
+	getParentIds(id) {
+		const node = this._nodes.get(id);
+		return (node && node.Parents) || [];
+	}
+
+	getState(id) {
+		return this._state.get(id) || 'none';
+	}
+
+	getType(id) {
+		const node = this._nodes.get(id);
+		return (node && node.Type) || 0;
+	}
+
+	/**
+	 * Checks if a node has ancestors in a given list.
+	 * NB: returns true if an id is itself is in the list to check
+	 * @param {Number} id - the node whose ancestors we want to check
+	 * @param {[Number]} listToCheck - an array of node ids which potentially has ancestors in it
+	 * @returns {boolean}
+	 */
+	hasAncestorsInList(id, listToCheck) {
+		const ancestorsSet = this.getAncestorIds(id);
+
+		return listToCheck.some(potentialAncestor => ancestorsSet.has(potentialAncestor));
+	}
+
+	/**
+	 * NB: returns true if an id is itself is in the list to check
+	 * @param {Number} id
+	 * @param {[Number]} listToCheck
+	 * @returns {boolean}
+	 */
+	hasDescendantsInList(id, listToCheck) {
+		const descendants = this.getDescendantIds(id);
+		const listToCheckUnique = [...new Set(listToCheck)];
+		return listToCheckUnique.some(potentialDescendant => descendants.has(potentialDescendant));
+	}
+
+	hasMore(id) {
+		return this._hasMore.has(id);
+	}
+
+	isActive(id) {
+		const node = this._nodes.get(id);
+		return (node && node.IsActive) || false;
+	}
+
+	isLoading(id) {
+		return this._loading.has(id);
+	}
+
+	isOpen(id) {
+		return this._open.has(id);
+	}
+
+	isOpenable(id) {
+		return !this.leafTypes.includes(this.getType(id));
+	}
+
+	/**
+	 * True iff the children of id are known (even if there are zero children).
+	 * @param id
+	 * @returns {boolean}
+	 */
+	isPopulated(id) {
+		return !this._populated || this._populated.has(id);
+	}
+
+	removeVisibilityModifier(key) {
+		this._visibilityModifiers = Object.fromEntries(Object.entries(this._visibilityModifiers).filter(kvp => kvp[0] !== key));
+	}
+
+	select(ids) {
+		ids.forEach(x => this.setSelected(x, true));
+	}
+
+	selectAll() {
+		this.setSelected(this.rootId, true);
+	}
+
+	/**
+	 * Filters the visible tree to nodes which are ancestors of nodes descended from the given ids
+	 * (a node is its own ancestor).
+	 * NB: ignored if the tree is dynamic, so that dynamically loaded partial trees don't get
+	 * hidden due to missing information. It is expected that dynamic trees only include visible
+	 * nodes, and that the tree will be replaced if the ancestor filter should change.
+	 * @param {Number[]} ancestorIds
+	 */
+	setAncestorFilter(ancestorIds) {
+		if (this.isDynamic) return;
+
+		if (!ancestorIds || ancestorIds.length === 0) {
+			this._visible = null;
+			return;
+		}
+
+		this._visible = new Set();
+
+		this.ids.forEach(id => {
+			if (this.hasAncestorsInList(id, ancestorIds)) {
+				this._visible.add(id);
+				this.getAncestorIds(id).forEach(ancestorId => this._visible.add(ancestorId));
+			}
+		});
+	}
+
+	setLoading(id) {
+		this._loading.add(id);
+	}
+
+	setOpen(id, isOpen) {
+		if (isOpen) {
+			this._open.add(id);
+		} else {
+			this._open.delete(id);
+		}
+	}
+
+	setSelected(id, isSelected) {
+		// clicking on a node either fully selects or fully deselects its entire subtree
+		this._setSubtreeSelected(id, isSelected);
+
+		// parents may now be in any state, depending on siblings
+		this.getParentIds(id).forEach(parentId => this._updateSelected(parentId));
+	}
+
+	setVisibilityModifier(key, visibilityModFn) {
+		const modifiersCopy = { ...this._visibilityModifiers };
+		modifiersCopy[key] = visibilityModFn;
+		this._visibilityModifiers = modifiersCopy;
+	}
+
+	_getSelected(id) {
+		const state = this.getState(id);
+
+		if (state === 'explicit') return [id];
+
+		if (state === 'indeterminate' || this._isRoot(id)) {
+			// when this.getChildIds(id) returns null as one of its child id it causes infinite loop
+			const isNotNullOrUndefined = (id) => id !== undefined && id !== null;
+			return this.getChildIds(id).filter(isNotNullOrUndefined).flatMap(childId => this._getSelected(childId));
+		}
+
+		return [];
+	}
+
+	_isRoot(id) {
+		return this.getParentIds(id).includes(0);
+	}
+
+	_isVisible(id) {
+		const visible = (this._visible === null || this._visible.has(id))
+			&& !this.invisibleTypes.includes(this.getType(id));
+
+		return visible && Object.values(this._visibilityModifiers).every(modifier => modifier(id)); // every returns true if the array is empty
+	}
+
+	_nameForSort(id) {
+		return this.getName(id) + id;
+	}
+
+	_setSubtreeSelected(id, isSelected) {
+		if (isSelected) {
+			this._state.set(id, 'explicit');
+		} else {
+			this._state.delete(id);
+		}
+
+		this.getChildIds(id).forEach(childId => this._setSubtreeSelected(childId, isSelected));
+	}
+
+	_updateChildren(ids) {
+		ids.forEach(id => {
+			this.getParentIds(id).forEach(parentId => {
+				if (this._children.has(parentId)) {
+					this._children.get(parentId).add(id);
+				} else {
+					this._children.set(parentId, new Set([id]));
+				}
+			});
+		});
+	}
+
+	_updateSelected(id) {
+		// never select the root (user can clear the selection instead)
+		if (this._isRoot(id)) return;
+
+		// don't select invisible node types
+		if (this.invisibleTypes.includes(this.getType(id))) return;
+
+		// Only consider children of visible types: this node is selected if all potentially visible children are
+		// Note that if this node hasn't been populated, we don't know if all children are selected,
+		// so it is indeterminate at most.
+		const childIds = this.getChildIds(id).filter(x => !this.invisibleTypes.includes(this.getType(x)));
+		const state = (this.isPopulated(id) && !this.hasMore(id) && childIds.every(childId => this.getState(childId) === 'explicit'))
+			? 'explicit'
+			: childIds.every(childId => this.getState(childId) === 'none')
+				? 'none'
+				: 'indeterminate' ;
+
+		if (state === 'none') {
+			this._state.delete(id);
+		} else {
+			this._state.set(id, state);
+		}
+
+		this.getParentIds(id).forEach(x => this._updateSelected(x));
+	}
+}
+
+decorate(Tree, {
+	_nodes: observable,
+	_children: observable,
+	_ancestors: observable,
+	_state: observable,
+	_open: observable,
+	_visible: observable,
+	_populated: observable,
+	_loading: observable,
+	_bookmarks: observable,
+	_hasMore: observable,
+	_visibilityModifiers: observable,
+	initialSelectedIds: observable,
+	selected: computed,
+	allSelectedCourses: computed,
+	addNodes: action,
+	clearSelection: action,
+	selectAll: action,
+	select: action,
+	setAncestorFilter: action,
+	setLoading: action,
+	setOpen: action,
+	setSelected: action
+});
+
+/**
+ * This is an opinionated wrapper around d2l-labs-tree-selector which maintains state
+ * in the above Tree class.
+ * @property {Object} tree - a Tree (defined above)
+ * @property {String} openerText - appears on the dropdown opener if no items are selected
+ * @property {String} openerTextSelected - appears on the dropdown opener if one or more items are selected
+ * @fires d2l-labs-tree-filter-select - selection has changed; selected property of this element is the list of selected ids
+ * @fires d2l-labs-tree-filter-request-children - (dynamic tree only) owner should call tree.addNodes with children of event.detail.id
+ * @fires d2l-labs-tree-filter-search - (dynamic tree only) owner may call this.addSearchResults with nodes and ancestors matching
+ * event.detail.searchString and event.detail.bookmark (arbitrary data previously passed to this.addSearchResults)
+ */
+class TreeFilter extends LocalizeLabsElement(MobxLitElement) {
+
+	static get properties() {
+		return {
+			tree: { type: Object, attribute: false },
+			openerText: { type: String, attribute: 'opener-text' },
+			openerTextSelected: { type: String, attribute: 'opener-text-selected' },
+			searchString: { type: String, attribute: 'search-string', reflect: true },
+			isLoadMoreSearch: { type: Boolean, attribute: 'load-more-search', reflect: true },
+			isSelectAllVisible: { type: Boolean, attribute: 'select-all-ui', reflect: true },
+			disabled: { type: Boolean, attribute: 'disabled' },
+			_isLoadingSearch: { type: Boolean, attribute: false }
+		};
+	}
+
+	static get styles() {
+		return css`
+			:host {
+				display: inline-block;
+			}
+			:host([hidden]) {
+				display: none;
+			}
+
+			d2l-button.d2l-tree-load-more {
+				padding-bottom: 12px;
+			}
+		`;
+	}
+
+	constructor() {
+		super();
+
+		this.openerText = 'MISSING NAME';
+		this.openerTextSelected = 'MISSING NAME';
+		this.searchString = '';
+		this.isLoadMoreSearch = false;
+		this.isSelectAllVisible = false;
+		this.disabled = false;
+
+		this._needResize = false;
+		this._searchBookmark = null;
+	}
+
+	get selected() {
+		return this.tree.selected;
+	}
+
+	/**
+	 * @returns {Promise} - resolves when all tree-selector-nodes, recursively, have finished updating
+	 */
+	get treeUpdateComplete() {
+		return this.updateComplete.then(() => this.shadowRoot?.querySelector('d2l-labs-tree-selector').treeUpdateComplete || false);
+	}
+
+	render() {
+		// if selections are applied when loading from server but the selected ids were truncated out of the results,
+		// the visible selections in the UI (this.tree.selected) could be empty even though selections are applied.
+		// In that case, we should indicate to the user that selections are applied, even if they can't see them.
+		const isSelected = (this.tree.selected.length || (this.tree.initialSelectedIds && this.tree.initialSelectedIds.length));
+		const openerText = isSelected ? this.openerTextSelected : this.openerText;
+
+		return html`<d2l-labs-tree-selector
+				class="vdiff-target"
+				name="${openerText}"
+				?search="${this._isSearch}"
+				?selected="${isSelected}"
+				?select-all-ui="${this.isSelectAllVisible}"
+				?disabled="${this.disabled}"
+				@d2l-labs-tree-selector-search="${this._onSearch}"
+				@d2l-labs-tree-selector-clear="${this._onClear}"
+				@d2l-labs-tree-selector-select-all="${this._onSelectAll}"
+			>
+				${this._renderSearchResults()}
+				${this._renderSearchLoadingControls()}
+				${this._renderChildren(this.tree.rootId)}
+			</d2l-labs-tree-selector>
+		</div>`;
+	}
+
+	async updated() {
+		if (!this._needResize) return;
+
+		await this.resize();
+		this._needResize = false;
+	}
+
+	/**
+	 * Adds the given children to the given parent. See Tree.addNodes().
+	 * @param parent
+	 * @param children
+	 * @param hasMore - Will display a "load more" button in the tree if true
+	 * @param bookmark - Opaque data that will be sent in the request-children event if the user asks to load more results
+	 */
+	addChildren(parent, children, hasMore, bookmark) {
+		this._needResize = true;
+		this.tree.addNodes(parent, children, hasMore, bookmark);
+	}
+
+	/**
+	 * Merges the given nodes into the tree and may display a load more control.
+	 * @param {[][]} [nodes=[]] - Array of arrays, including all ancestors up to root, in the same format as for the constructor
+	 * @param {Boolean}hasMore - Will display a "load more" button in the search if true
+	 * @param {Object}bookmark - Opaque data that will be sent in the search event if the user asks to load more results
+	 */
+	addSearchResults(nodes, hasMore, bookmark) {
+		this._needResize = true;
+		this.tree.addTree(nodes);
+		this.isLoadMoreSearch = hasMore;
+		this._searchBookmark = bookmark;
+		this._isLoadingSearch = false;
+	}
+
+	clearSearchAndSelection(generateEvent = true) {
+		this.shadowRoot.querySelector('d2l-labs-tree-selector').clearSearchAndSelection(generateEvent);
+	}
+
+	async resize() {
+		await this.updateComplete;
+		const treeSelector = this.shadowRoot?.querySelector('d2l-labs-tree-selector');
+		treeSelector && treeSelector.resize();
+	}
+
+	get _isSearch() {
+		return this.searchString.length > 0;
+	}
+
+	_fireSearchEvent(searchString, bookmark) {
+		if (!searchString) return;
+
+		this._isLoadingSearch = true;
+
+		/**
+		 * @event d2l-labs-tree-filter-search
+		 */
+		this.dispatchEvent(new CustomEvent(
+			'd2l-labs-tree-filter-search',
+			{
+				bubbles: true,
+				composed: false,
+				detail: { searchString, bookmark }
+			}
+		));
+	}
+
+	_fireSelectEvent() {
+		/**
+		 * @event d2l-labs-tree-filter-select
+		 */
+		this.dispatchEvent(new CustomEvent(
+			'd2l-labs-tree-filter-select',
+			{ bubbles: true, composed: false }
+		));
+	}
+
+	_onClear(event) {
+		event.stopPropagation();
+		this.tree.clearSelection();
+		this._fireSelectEvent();
+	}
+
+	_onOpen(event) {
+		event.stopPropagation();
+		this._needResize = true;
+		this.tree.setOpen(event.detail.id, event.detail.isOpen);
+	}
+
+	_onParentLoadMore(event) {
+		const id = Number(event.target.getAttribute('data-id'));
+		const bookmark = this.tree.getBookmark(id);
+		this._requestChildren(id, bookmark);
+	}
+
+	_onSearch(event) {
+		event.stopPropagation();
+		this._needResize = true;
+		this.searchString = event.detail.value;
+
+		if (this.tree.isDynamic) {
+			this._fireSearchEvent(this.searchString);
+		}
+	}
+
+	_onSearchLoadMore(event) {
+		event.stopPropagation();
+		this._fireSearchEvent(this.searchString, this._searchBookmark);
+	}
+
+	_onSelect(event) {
+		event.stopPropagation();
+		this.tree.setSelected(event.detail.id, event.detail.isSelected);
+		this._fireSelectEvent();
+	}
+
+	_onSelectAll(event) {
+		event.stopPropagation();
+		this.tree.selectAll();
+		this._fireSelectEvent();
+	}
+
+	_renderChildren(id, parentName, indentLevel = 0) {
+		parentName = parentName || this.localize('components:ouFilter:treeFilter:nodeName:root');
+
+		if (id === undefined || this.tree.getChildIdsForDisplay(id).length === 0) {
+			return html`<d2l-empty-state-simple
+				slot="tree"
+				description="${this.localize('components:ouFilter:treeSelector:noFiltersAvailable')}"
+			>
+			</d2l-empty-state-simple>`;
+		}
+
+		if (!this.tree.isPopulated(id)) {
+			// request children; in the meantime we can render whatever we have
+			this._requestChildren(id);
+		}
+
+		return [
+			...this.tree
+				.getChildIdsForDisplay(id)
+				.map(id => this._renderNode(id, parentName, indentLevel + 1)),
+
+			this._renderParentLoadingControls(id)
+		];
+	}
+
+	_renderNode(id, parentName, indentLevel) {
+		const isOpen = this.tree.isOpen(id);
+		const isOpenable = this.tree.isOpenable(id);
+		const orgUnitName = this.tree.getName(id);
+		const state = this.tree.getState(id);
+		return html`<d2l-labs-tree-selector-node slot="tree"
+					name="${this.localize('components:ouFilter:treeFilter:nodeName', { orgUnitName, id })}"
+					data-id="${id}"
+					?openable="${isOpenable}"
+					?open="${isOpen}"
+					selected-state="${state}"
+					indent-level="${indentLevel}"
+					parent-name="${parentName}"
+					@d2l-labs-tree-selector-node-open="${this._onOpen}"
+					@d2l-labs-tree-selector-node-select="${this._onSelect}"
+				>
+					${isOpen ? this._renderChildren(id, orgUnitName, indentLevel) : ''}
+				</d2l-labs-tree-selector-node>`;
+	}
+
+	_renderParentLoadingControls(id) {
+		if (this.tree.isLoading(id)) {
+			return html`<d2l-loading-spinner slot="tree"></d2l-loading-spinner>`;
+		}
+
+		if (this.tree.hasMore(id)) {
+			return html`<d2l-button slot="tree"
+				class="d2l-tree-load-more"
+				@click="${this._onParentLoadMore}"
+				data-id="${id}"
+				description="${this.localize('components:ouFilter:treeSelector:parentLoadMore:ariaLabel')}"
+			>${this.localize('components:ouFilter:treeSelector:loadMoreLabel')}</d2l-button>`;
+		}
+
+		return nothing;
+	}
+
+	_renderSearchLoadingControls() {
+		if (!this._isSearch) return nothing;
+
+		if (this._isLoadingSearch) {
+			return html`<d2l-loading-spinner slot="search-results"></d2l-loading-spinner>`;
+		}
+
+		if (this.isLoadMoreSearch) {
+			return html`<d2l-button slot="search-results"
+				@click="${this._onSearchLoadMore}"
+				description="${this.localize('components:ouFilter:treeSelector:searchLoadMore:ariaLabel')}"
+			>${this.localize('components:ouFilter:treeSelector:loadMoreLabel')}</d2l-button>`;
+		}
+	}
+
+	_renderSearchResults() {
+		if (!this._isSearch || this._isLoadingSearch) return nothing;
+
+		const searchResults = this.tree
+			.getMatchingIds(this.searchString);
+
+		if (searchResults.length > 0) {
+			return searchResults.map(id => {
+				const orgUnitName = this.tree.getName(id);
+				const state = this.tree.getState(id);
+				return html`<d2l-labs-tree-selector-node slot="search-results"
+					name="${this.localize('components:ouFilter:treeFilter:nodeName', { orgUnitName, id })}"
+					data-id="${id}"
+					selected-state="${state}"
+					@d2l-labs-tree-selector-node-select="${this._onSelect}"
+				>
+				</d2l-labs-tree-selector-node>`;
+			});
+		}
+
+		return html`<d2l-empty-state-simple
+			slot="search-results"
+			description="${this.localize('components:ouFilter:treeSelector:noSearchResults')}"
+		>
+		</d2l-empty-state-simple>`;
+	}
+
+	_requestChildren(id, bookmark) {
+		this.tree.setLoading(id);
+
+		/**
+		 * @event d2l-labs-tree-filter-request-children
+		 */
+		this.dispatchEvent(new CustomEvent(
+			'd2l-labs-tree-filter-request-children',
+			{
+				bubbles: true,
+				composed: false,
+				detail: { id, bookmark }
+			}
+		));
+	}
+}
+
+customElements.define('d2l-labs-tree-filter', TreeFilter);