feat(ui): entities viewer and detail panel - #564
Conversation
Co-authored-by: Codex <codex@openai.com>
Co-authored-by: Codex <codex@openai.com>
Auto-load a long-entities Gantt under each leaf resource (injected synthetic row in QueryResourceTree), filtered by the same getLongEntitiesThreshold cutoff the timelines use. Remove the entity marks overlay from the resource timelines (and the now-dead "Hide tasks" toggle / hideTasks atom), and stop requesting long_fsms in the timeline bulk/single fetches.
… and state to body
Use the shared three-argument builder API after moving elapsed-time normalization earlier in the stack.
Keep the tooltip and row files compliant with the repository copyright hook.
…olbar while no settings
…have same fsm states as timeline; portal tooltip to new re-usable component
…ss jumping around when zooming/panning
…ity values, revised header
|
the fsm capacity chart tooltip overflow is hidden/cutoff, you may need to go the react component route + a portal: |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Note
Quiet mode is enabled, so only the most important comments were posted inline. Other review comments are grouped below.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
ui/packages/@quent/components/src/fsm-chart/FsmCapacityChart.tsx (1)
141-141: 🎯 Functional Correctness | 🟠 Major | ⚡ Quick winReplace removed series on option updates.
When
seriesshrinks, normal merge retains omitted series. A three-to-one update can leave stale series and tooltip indexes that are absent from the currentseriesarray. AddreplaceMerge={['series']}and a three-to-one update test.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@ui/packages/`@quent/components/src/fsm-chart/FsmCapacityChart.tsx at line 141, Update the chart option configuration near notMerge in FsmCapacityChart to set replaceMerge for the series collection, ensuring removed series are discarded during option updates. Add a test covering a three-to-one series reduction and verify stale series and tooltip indexes are absent afterward.
🟡 Other comments (1)
ui/packages/@quent/utils/src/formatters.ts-262-271 (1)
262-271: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick winKeep chart values within the safe integer range.
Number(n >> 10n) * 1024becomes unsafe immediately aboveNumber.MAX_SAFE_INTEGERand rounds the maximumu64input to2^64. Use a chart unit that remains withinNumber.MAX_SAFE_INTEGER, and apply it consistently to the axis formatter and tooltip. Add tests for the threshold and maximumu64input.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@ui/packages/`@quent/utils/src/formatters.ts around lines 262 - 271, Update bigintToChartNumber to scale large bigint values using a unit that keeps the returned number at or below Number.MAX_SAFE_INTEGER, including the maximum u64 input, rather than multiplying shifted values by 1024. Apply the same chart unit in the axis formatter and tooltip, and add tests covering the safe-range threshold and maximum u64 conversion.Source: Path instructions
🧹 Nitpick comments (1)
ui/packages/@quent/components/src/fsm-chart/FsmCapacityChart.tsx (1)
47-51: 🗄️ Data Integrity & Integration | 🔵 Trivial | ⚡ Quick winUse a collision-free key for resource/stat pairs.
Lines 47-51 use a space-delimited string for
dataMap,rawMap, andlabelMap. If either identifier contains a space or creates an ambiguous combination, distinct pairs merge into one series and later readings overwrite earlier readings. Use nested maps or a typed composite key. If both values are closed enums, verify that contract and add a test.As per path instructions, “Avoid sentinel strings that can collide with real identifiers; use typed variants, opaque IDs, or another collision-free representation.”
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@ui/packages/`@quent/components/src/fsm-chart/FsmCapacityChart.tsx around lines 47 - 51, Replace the space-delimited key construction in the FsmCapacityChart dataMap, rawMap, and labelMap initialization with a collision-free typed composite representation, such as nested maps or a structured key, so distinct usage.resource/name pairs never merge. Preserve the existing array initialization and label behavior, and add coverage if the resource and statistic identifiers are intended to be closed enums.Source: Path instructions
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@ui/packages/`@quent/components/src/fsm-chart/FsmCapacityChart.tsx:
- Around line 101-113: Update the tooltip formatter in FsmCapacityChart to
HTML-escape the dynamic stateName and each p.seriesName before interpolating
them into the returned markup. Use echarts.format.encodeHTML or the existing
equivalent helper while preserving the tooltip layout and byte formatting.
---
Outside diff comments:
In `@ui/packages/`@quent/components/src/fsm-chart/FsmCapacityChart.tsx:
- Line 141: Update the chart option configuration near notMerge in
FsmCapacityChart to set replaceMerge for the series collection, ensuring removed
series are discarded during option updates. Add a test covering a three-to-one
series reduction and verify stale series and tooltip indexes are absent
afterward.
---
Other comments:
In `@ui/packages/`@quent/utils/src/formatters.ts:
- Around line 262-271: Update bigintToChartNumber to scale large bigint values
using a unit that keeps the returned number at or below Number.MAX_SAFE_INTEGER,
including the maximum u64 input, rather than multiplying shifted values by 1024.
Apply the same chart unit in the axis formatter and tooltip, and add tests
covering the safe-range threshold and maximum u64 conversion.
---
Nitpick comments:
In `@ui/packages/`@quent/components/src/fsm-chart/FsmCapacityChart.tsx:
- Around line 47-51: Replace the space-delimited key construction in the
FsmCapacityChart dataMap, rawMap, and labelMap initialization with a
collision-free typed composite representation, such as nested maps or a
structured key, so distinct usage.resource/name pairs never merge. Preserve the
existing array initialization and label behavior, and add coverage if the
resource and statistic identifiers are intended to be closed enums.
🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: QUIET
Plan: Enterprise
Run ID: 8efed289-5a67-4aec-a7fc-eb1add12dbfd
📒 Files selected for processing (3)
ui/packages/@quent/components/src/fsm-chart/FsmCapacityChart.tsxui/packages/@quent/utils/src/formatters.tsui/packages/@quent/utils/src/index.ts
# Description This iteration is to improve usability when handling large numbers of entities. * Adds expand/collapse controls for long entities swimlanes * Adds loader and persistent page size for "show more" functionality. Reduces jumpyness by not hiding/showing the button while loading, and keeps page size when Zooming/Panning so swimlanes jump less. * Update tooltip to truncate after showing a certain number of entities when many are overlapping. Not being able to show all information should be mitigated by the detail panel #564. Future iterations may also add aggregate stats about the entities if too many to show all individually. * More informative "No Entities" message, shows the threshold being used * Adds rough setting for long entities threshold (show less <--> show more) ## Related Issues Fixes: #98 Relates to: #215 ## Testing * Simulate a query with many entities and many threads so there are many concurrent entities in the chart. `cargo run -p quent-simulator -- --num-query-groups 1 --num-queries 1 --num-workers 2 --num-threads 24 --num-tasks 65536 --exporter collector --collector-address http://localhost:7836` * Open query and open any resource with entities that have usage on that resource * Change the entities slider to show more/less entities (changes the long entity threshold in the request) * Entity rows are expandable/collapsible * Resource tree virtualization works as expected (opening every resource will not overwhelp the browser), charts render as they scroll into view. ## Screenshots Demo with an absurd (i think?) amount of entities. Every interaction should be able to handle huge amounts of entities. It can get a little jumpy when there are so many, but the price we pay RN. https://github.com/user-attachments/assets/b245bc12-6774-4467-8f30-afe063321313 Authors: - Joe O'Hallaron (https://github.com/johallar) Approvers: - Pradeep Garigipati (https://github.com/9prady9) URL: #569
…ce of custom pagination
| const activeFilterCount = activeEntityFilterCount(filters, defaults, operatorId); | ||
|
|
||
| return { | ||
| activeFilterCount, |
There was a problem hiding this comment.
nit: I get why this is all one hook, but it's a bulky interface. Consider nesting one level (pagination stuff, filters stuff, query stuff, etc) to keep it a little more readable.
| </div> | ||
| </div> | ||
|
|
||
| {validationErrors.length > 0 && ( |
There was a problem hiding this comment.
Consider using shadcn mechanisms for this, they come with validation stuff: https://ui.shadcn.com/docs/components/base/input#invalid
| }; | ||
| } | ||
|
|
||
| // Find data volume from derived attributes (last bytes-stat with a numeric value) |
There was a problem hiding this comment.
This panel already shows all derived attributes, I think we can remove this specific calculation + section
| minUsageS: '', | ||
| windowStart: '0', | ||
| windowEnd: String(durationS), | ||
| sortDir: 'Desc', |
There was a problem hiding this comment.
nit: re-usable constants better than using these string literals throughout, packaged with the SortableHeader ideally
3 participants
Description
This brings in the Entities table originally mocked out by @johanpel, with numerous UI/UX improvements. In addition, it adds an entities detail tab, which can be accessed either by clicking on a row in the entities table or by clicking on an entity in the timeline section.
Entities table changes:
QueryToolbarto the top of the view, so that current filters can be seen/cleared/etcEntities Detail tab:
Testing
Screenshots
entities-table.mp4
entity-detail-panel.mp4