FilterTree

ic.FilterTree combines a search bar with a tree view, letting users filter nodes in real time by typing tag-based queries. It extends ic.TreeBase (shared tree infrastructure, selection, incremental node operations) and composes the same ic.tree.Node data model as ic.Tree. The search bar supports 8 filter operators via tag prefixes, so users can do things like find only leaf nodes (@.ts), exclude patterns (~test), or search by ancestor path (/utils).

Building the tree

FilterTree uses the same ic.tree.Node hierarchy as ic.Tree. See the Tree documentation for how to build and modify nodes with ic.tree.Node, .add(), and the incremental methods (addNode, removeNode, updateNode).

Filtering

The search bar accepts tags separated by commas or Enter. Each tag can optionally start with an operator prefix that controls how it matches. When AutoExpand is on, ancestor folders of matching nodes open automatically so results are immediately visible. CaseSensitive controls whether filtering respects letter case.

Filter operators

Operators are typed as tag prefixes. Each prefix has a distinct icon in the search bar so you can tell at a glance what kind of filter is active. Multiple tags combine with AND logic, except | which uses OR.

Size, connector lines, and height

Size scales the font and row height: sm, md (default), and lg. ShowLine toggles tree connector lines between parent and child nodes. Height sets the scrollable area of the tree panel (not including the search bar).

Selection

Selectable enables checkboxes for multi-selection, MaxSelectedItems caps how many nodes can be selected, and Disabled greys out the entire component. Selection works the same way as in ic.Tree: the Selection property on the MATLAB side returns resolved ic.tree.Node handles.

Events

FilterTree fires ValueChanged when the selection changes and SearchChanged when filter tags are added or removed. SelectionChanged is a convenience event that carries resolved ic.tree.Node handles. Type a filter and select some nodes below to see all three events.

Expand, collapse, and clear

expandAll() and collapseAll() control folder state programmatically. clearSearch() removes all filter tags and resets the view to the full tree. clearSelection() deselects all nodes.

Custom styling

Every component exposes a .css property for instance-level CSS overrides from MATLAB. This example applies a blue theme with styled search tags.

ft = ic.FilterTree("Items", [src, tests, config]);

% Panels with blue accent
ft.css.style(".ic-ft__search", ...
    "background", "#f8fafc", ...
    "border_color", "#93c5fd", ...
    "border_radius", "6px 6px 0 0");

ft.css.style(".ic-ft__tree", ...
    "background", "#f8fafc", ...
    "border_color", "#93c5fd", ...
    "border_top", "2px solid #3b82f6", ...
    "border_radius", "0 0 6px 6px");

% Blue search tags
ft.css.style(".ic-tag", ...
    "background", "#dbeafe", ...
    "color", "#1e40af", ...
    "border_color", "#93c5fd");

% Monospace labels, blue icons
ft.css.style(".ic-tn__label", ...
    "font_family", "monospace", ...
    "letter_spacing", "0.02em");
ft.css.style(".ic-tn__icon", ...
    "color", "#3b82f6");
ft.css.style(".ic-tn__folder", ...
    "color", "#3b82f6");

% Blue guide lines
ft.css.style(".ic-tn__guide--pipe::before", ...
    "background", "#bfdbfe");
ft.css.style(".ic-tn__guide--branch::before", ...
    "background", "#bfdbfe");
ft.css.style(".ic-tn__guide--branch::after", ...
    "background", "#bfdbfe");

% Hover highlight
ft.css.style(".ic-tn__row:hover", ...
    "background", "#eff6ff");

% Blue filter match highlight
ft.css.style(".ic-tn__highlight", ...
    "background", "rgba(59, 130, 246, 0.2)", ...
    "color", "#1e40af");

% Selected: blue tint
ft.css.style(".ic-tn__content--selected", ...
    "background", "#dbeafe", ...
    "border_radius", "3px");
ft.css.style(".ic-tn__content--selected .ic-tn__label", ...
    "color", "#1e40af", ...
    "font_weight", "600");