# Build an Interactive Filtered Tree View Build a frontend component that accepts an n-ary tree and a text filter. If a node's value contains the filter text, remove that node and its entire subtree from the rendered result. Render the remaining hierarchy with correct indentation, and update the view whenever the input changes. ### Constraints & Assumptions - The tree may contain tens of thousands of nodes and may be deeply skewed. - Child order is meaningful and must be preserved. - Matching is case-sensitive unless product requirements say otherwise. - The source tree is immutable application data; filtering must not mutate it. - An empty filter shows the complete tree. - The UI must be keyboard accessible and understandable without indentation alone. ### Clarifying Questions to Ask - Should a matching parent hide all descendants even when a descendant does not match? - Must partially matching ancestor paths remain visible, or is this strictly subtree removal? - How frequently does the source tree change relative to the filter input? - Is virtualization required for the expected data size? - Should filtering happen immediately, after a debounce, or only on submit? ### Hints - Keep the filtering rule in a pure function separate from rendering. - Use stable node identities for framework keys; array positions are not stable identities. - Consider how recursion depth and rendering cost behave for pathological input. ### What a Strong Answer Covers - A precise data contract and a pure, testable filter transformation. - Correct subtree removal, preserved child order, and immutable state handling. - Semantic nested-list or tree markup, keyboard behavior, focus stability, and accessible labels. - Controlled input state, cancellation or debounce policy, and avoidance of stale derived state. - Memoization based on real bottlenecks, iterative traversal for deep trees, and virtualization for very large visible results. - Unit tests for root removal, nested matches, empty filters, duplicate labels, rapid input changes, and deep trees. ### Follow-up Questions 1. How would you preserve expansion and focus state when filtering changes the visible nodes? 2. When would memoization make this component slower rather than faster? 3. How would you virtualize a hierarchy while maintaining indentation and accessibility? 4. How would you make matching case-insensitive and locale-aware without changing the tree algorithm?