Skip to content

Add Property Filter To Entities Visualizer#8786

Open
yusufkinatas wants to merge 2 commits into
yk/update-entities-visualizer-finalfrom
yk/follow-up-entities-visualizer-property-filter
Open

Add Property Filter To Entities Visualizer#8786
yusufkinatas wants to merge 2 commits into
yk/update-entities-visualizer-finalfrom
yk/follow-up-entities-visualizer-property-filter

Conversation

@yusufkinatas
Copy link
Copy Markdown
Collaborator

@yusufkinatas yusufkinatas commented May 29, 2026

🌟 What is the purpose of this PR?

Follow-up for #8783 based on the task
Adds per-property value filtering to the Entities Visualizer. Previously the ribbon only supported filtering by web, type, and archived status; you could narrow the table by which entities were shown but not by the values of their properties.

This lets a user filter the table on the properties they can see — e.g. Age > 13, Name contains "Acme", Active is true, or Email has any value — by adding property-filter "pills" to the existing filter ribbon. Each pill picks a property, an operator appropriate to the property's value kind, and (where relevant) a value; the resulting clauses are ANDed with the existing web / type / archived filters and pushed down into the graph query.

🔗 Related links

🚫 Blocked by

  • ...

🔍 What does this change?

Filter model & query building

  • Extends EntitiesFilterState with a propertyFilters array (data/types.ts).
  • Adds data/property-filters/types.ts defining PropertyFilter, the PropertyFilterOperator set, the FilterValueKind (number / string / boolean), and the FilterableProperty shape (filterable, or disabled-with-reason).
  • buildPropertyFilterClause (data/property-filters/build-property-filter-clause.ts) translates a single filter into a graph Filter clause as a pure, unit-testable function. It owns parameter typing (numbers coerced to JS numbers so comparisons are numeric, strings kept untrimmed for case-sensitive matching) and the exists / not exists composition. An incomplete or invalid filter yields null and contributes no clause, so an unfinished pill is inert rather than matching nothing. buildEntitiesFilter now folds these clauses into the query.
  • deriveFilterableProperties (data/property-filters/derive-filterable-properties.ts) derives the pickable properties from the same closed-entity-type / definitions data that builds the visible columns ("filter on the columns you see"). Properties that can't be filtered in v1 (lists, nested objects, multiple data types, unsupported kinds) are either omitted or surfaced disabled with a reason. The filterable interpretation wins when a base URL appears in multiple shapes across types.
  • get-operators-for-kind.ts catalogs the operators available per value kind, their dropdown labels, pill connectors, and whether they require a value, with a sensible default operator per kind.

UI

  • AddFiltersMenu gains a "Property…" entry that opens an in-menu PropertyFilterPicker (searchable list of filterable properties, disabled rows with explanatory tooltips).
  • PropertyFilterPill renders each property filter in the ribbon with a kind icon, operator/value editor popover (operator changes apply immediately; value input is debounced before hitting shared state to avoid refetching on every keystroke), an active/incomplete visual state, and removal.
  • FilterRibbon wires up add/change/remove handlers, auto-opens the editor for a just-added pill, wraps to multiple lines, and includes property filters in the "filters are default" / clear-all logic.
  • incompletePillSx added for the muted placeholder look of pills that don't yet contribute a clause.

Data-type pool robustness (supporting change)

  • EntitiesTableData now bundles the dataTypeDefinitions pool alongside the rows it was generated from, unioned across paginated pages. This guarantees a row's value can always resolve its data type and fixes formatValue throwing when a refetch narrowed the result set (e.g. a property filter matching nothing) before rows were regenerated. EntitiesTable no longer takes definitions directly and reads the pool from the table data.
  • getReferencedDataTypeIds (format-value.ts) is exposed so the table can cheaply check that every data type a value depends on is present before rendering, falling back to a "Not Found" cell instead of crashing the grid.

Pre-Merge Checklist 🚀

🚢 Has this modified a publishable library?

This PR:

  • does not modify any publishable blocks or libraries, or modifications do not need publishing

📜 Does this require a change to the docs?

The changes in this PR:

  • are internal and do not require a docs change

🕸️ Does this require a change to the Turbo Graph?

The changes in this PR:

  • do not affect the execution graph

⚠️ Known issues

  • v1 only supports filtering number, string, and boolean properties. List, nested, and multiple-data-type properties are listed in the picker but disabled with an explanatory tooltip.
  • String matching (equals / contains / startsWith / endsWith) is case-sensitive.

🐾 Next steps

  • Broaden support to currently-unfilterable kinds (lists, nested properties, multiple data types).
  • Consider case-insensitive string matching as an option.

🛡 What tests cover this?

  • none

❓ How to test this?

  1. Checkout the branch / view the deployment.
  2. Open the Entities Visualizer for a set of entities with properties of varying kinds.
  3. In the filter ribbon, click the add-filter control and choose Property….
  4. Search for and select a property; confirm the operator list matches its value kind and a pill appears with its editor open.
  5. Choose an operator and enter a value (where required); confirm the table refetches and narrows accordingly, and that an incomplete pill is shown muted and applies no filter.
  6. Add multiple property filters and confirm they are ANDed together; remove them and confirm "Clear filters" resets everything.
  7. Confirm a filter matching nothing shows an empty table without crashing the grid.

📹 Demo

Screenshare.-.2026-05-29.2_10_00.PM.mp4

@vercel
Copy link
Copy Markdown

vercel Bot commented May 29, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
hash Ready Ready Preview, Comment May 29, 2026 12:30pm
2 Skipped Deployments
Project Deployment Actions Updated (UTC)
hashdotdesign-tokens Ignored Ignored Preview May 29, 2026 12:30pm
petrinaut Skipped Skipped May 29, 2026 12:30pm

@github-actions github-actions Bot added area/apps > hash* Affects HASH (a `hash-*` app) type/eng > frontend Owned by the @frontend team area/apps labels May 29, 2026
@yusufkinatas yusufkinatas changed the title Implement entities visualizer property filter Add property filter to entities visualizer May 29, 2026
@yusufkinatas yusufkinatas changed the title Add property filter to entities visualizer Add Property Filter To Entities Visualizer May 29, 2026
@vercel vercel Bot temporarily deployed to Preview – petrinaut May 29, 2026 12:21 Inactive
@yusufkinatas yusufkinatas marked this pull request as ready for review May 29, 2026 12:40
@yusufkinatas yusufkinatas requested a review from CiaranMn May 29, 2026 12:40
@augmentcode
Copy link
Copy Markdown

augmentcode Bot commented May 29, 2026

🤖 Augment PR Summary

Summary: This PR adds per-property value filtering to the Entities Visualizer so users can narrow the table by property values (e.g. numeric comparisons, string matching, boolean/existence checks).

Changes:

  • Extends EntitiesFilterState with a propertyFilters array and incorporates those clauses into buildEntitiesFilter.
  • Adds a property-filter model (PropertyFilter, operators, value kinds) plus operator catalogs/defaults.
  • Introduces buildPropertyFilterClause to translate a single pill into a Graph API Filter clause, treating incomplete/invalid filters as inert.
  • Adds deriveFilterableProperties to compute which visible-column properties are filterable (and why others are disabled).
  • Updates the filter ribbon UI: an “Add filter” menu entry for “Property…”, a searchable picker, and editable/removable filter “pills”.
  • Makes table rendering more robust by bundling/unioning dataTypeDefinitions into EntitiesTableData across pages.
  • Exposes getReferencedDataTypeIds and adds a defensive check to avoid formatValue crashes when a referenced data type is missing.

Technical Notes: Property filter clauses are ANDed with existing web/type/archived filters, and operator/value input is debounced to reduce refetch churn while typing.

🤖 Was this summary useful? React with 👍 or 👎

Copy link
Copy Markdown

@augmentcode augmentcode Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Review completed. No suggestions at this time.

Comment augment review to trigger a new review at any time.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area/apps > hash* Affects HASH (a `hash-*` app) area/apps type/eng > frontend Owned by the @frontend team

Development

Successfully merging this pull request may close these issues.

1 participant