Chore(UI): Improve relation traverse functionality in knowledge graph#27883
Chore(UI): Improve relation traverse functionality in knowledge graph#27883aniketkatkar97 wants to merge 2 commits intomainfrom
Conversation
github-actions
Bot
added
safe to test
![gitar-bot[bot]](https://avatars.githubusercontent.com/in/827041?s=60&v=4){kind=small}
| for (let i = 0; i < type.length; i++) { | ||
| // codePointAt instead of charCodeAt to handle multi-byte Unicode (emoji, CJK) | ||
| hash = (hash * 31 + (type.codePointAt(i) ?? 0)) >>> 0; | ||
| } |
There was a problem hiding this comment.
💡 Bug: codePointAt in index-based loop mishandles surrogate pairs
The comment on line 77 says codePointAt is used to handle multi-byte Unicode (emoji, CJK), but the loop still iterates with a simple i++ over type.length (which counts UTF-16 code units, not code points). For characters outside the BMP (e.g. emojis like 🔥 which occupy 2 code units), codePointAt(i) correctly returns the full code point on the high surrogate index, but on the next iteration (i+1) it processes the low surrogate separately, yielding a different hash than intended.
CJK characters are in the BMP so they work fine with either approach — the real impact is limited to emoji-containing type strings, which are likely rare. Still, the comment is misleading about what it fixes.
Use for...of to iterate by code point, or skip the low surrogate by advancing i when the code point is > 0xFFFF.
Suggested fix:
let hash = 0;
for (const ch of type) {
hash = (hash * 31 + (ch.codePointAt(0) ?? 0)) >>> 0;
}
Was this helpful? React with 👍 / 👎 | Reply gitar fix to apply this suggestion
| top: edgeTooltip.y + 12, | ||
| }}> | ||
| <div className="kg-edge-tooltip__direction"> | ||
| {`${edgeTooltip.sourceLabel} → ${edgeTooltip.targetLabel}`} |
There was a problem hiding this comment.
💡 Quality: Hardcoded strings in edge tooltip instead of i18n
The edge tooltip in KnowledgeGraph.tsx line 747 uses a template literal with a hardcoded → arrow character to display the direction. Per project conventions, user-visible strings should use the useTranslation hook. The → character is fine as a symbol, but the overall pattern of constructing display strings inline (rather than through t()) may not align with the project's i18n requirements if localization of the direction label format is needed.
Was this helpful? React with 👍 / 👎 | Reply gitar fix to apply this suggestion
| z-index: 1200; | ||
| pointer-events: none; | ||
| background: @white; | ||
| border: 1px solid rgba(0, 0, 0, 0.12); |
There was a problem hiding this comment.
💡 Quality: Hardcoded colors in tooltip styles violate theming guidelines
The new .kg-edge-tooltip styles in KnowledgeGraph.style.less use hardcoded rgba(0, 0, 0, ...) values for text colors, borders, and shadows (lines 128, 137, 145, 131). Per the project's frontend architecture guidelines, semantic CSS custom properties (--color-*, --shadow-*) should be used instead of hardcoded color values to ensure consistency with the theme system.
Was this helpful? React with 👍 / 👎 | Reply gitar fix to apply this suggestion
Code Review 👍 Approved with suggestions 0 resolved / 3 findingsEnhances Knowledge Graph edge interactions with hover-based tooltips and navigation functionality. Consider using i18n for tooltip labels, standardizing colors to follow theme guidelines, and ensuring proper iteration for surrogate pairs in the hash calculation. 💡 Bug: codePointAt in index-based loop mishandles surrogate pairs📄 openmetadata-ui/src/main/resources/ui/src/utils/KnowledgeGraph.utils.ts:76-79 The comment on line 77 says CJK characters are in the BMP so they work fine with either approach — the real impact is limited to emoji-containing type strings, which are likely rare. Still, the comment is misleading about what it fixes. Use Suggested fix💡 Quality: Hardcoded strings in edge tooltip instead of i18n📄 openmetadata-ui/src/main/resources/ui/src/components/KnowledgeGraph/KnowledgeGraph.tsx:747 The edge tooltip in KnowledgeGraph.tsx line 747 uses a template literal with a hardcoded 💡 Quality: Hardcoded colors in tooltip styles violate theming guidelines📄 openmetadata-ui/src/main/resources/ui/src/components/KnowledgeGraph/KnowledgeGraph.style.less:128 📄 openmetadata-ui/src/main/resources/ui/src/components/KnowledgeGraph/KnowledgeGraph.style.less:131 📄 openmetadata-ui/src/main/resources/ui/src/components/KnowledgeGraph/KnowledgeGraph.style.less:137 📄 openmetadata-ui/src/main/resources/ui/src/components/KnowledgeGraph/KnowledgeGraph.style.less:145 The new 🤖 Prompt for agentsOptionsDisplay: compact → Showing less information. Comment with these commands to change:
Was this helpful? React with 👍 / 👎 | Gitar |
There was a problem hiding this comment.
Pull request overview
This PR enhances the Knowledge Graph UI interactions by adding edge hover tooltips (showing relationship context) and improving edge click behavior to traverse between connected nodes, alongside a couple of robustness tweaks (UUID suffix matching and Unicode-safe-ish hashing).
Changes:
- Added edge hover/leave/click event handling in G6 to support edge tooltips, cursor changes, and endpoint highlighting.
- Rendered a fixed-position edge tooltip UI and introduced supporting types/styles.
- Expanded unit tests for the new edge interaction handlers.
Reviewed changes
Copilot reviewed 5 out of 6 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| openmetadata-ui/src/main/resources/ui/src/utils/KnowledgeGraph.utils.ts | Registers new edge event handlers, manages tooltip state, and tweaks hashing for Unicode. |
| openmetadata-ui/src/main/resources/ui/src/utils/KnowledgeGraph.utils.test.ts | Adds coverage for edge hover/leave/click behaviors and updates handler count expectations. |
| openmetadata-ui/src/main/resources/ui/src/components/KnowledgeGraph/KnowledgeGraph.tsx | Adds tooltip state, renders tooltip UI, and improves focus node ID matching. |
| openmetadata-ui/src/main/resources/ui/src/components/KnowledgeGraph/KnowledgeGraph.style.less | Adds styling for the new edge tooltip. |
| openmetadata-ui/src/main/resources/ui/src/components/KnowledgeGraph/KnowledgeGraph.interface.ts | Extends interaction context and introduces EdgeTooltipState. |
| openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-schema.svg | Updates the schema icon SVG asset. |
| for (let i = 0; i < type.length; i++) { | ||
| // codePointAt instead of charCodeAt to handle multi-byte Unicode (emoji, CJK) | ||
| hash = (hash * 31 + (type.codePointAt(i) ?? 0)) >>> 0; |
| const labels: string[] = Array.isArray(rawLabels) | ||
| ? (rawLabels as string[]) | ||
| : [String(edge.data?.['label'] ?? '')]; |
| : tgtId; | ||
|
|
||
| void graph.focusElement(farId, { | ||
| duration: ZOOM_DURATION_MS, | ||
| easing: ZOOM_EASING, | ||
| }); | ||
| selectedNodeIdRef.current = farId; |
| top: edgeTooltip.y + 12, | ||
| }}> | ||
| <div className="kg-edge-tooltip__direction"> | ||
| {`${edgeTooltip.sourceLabel} → ${edgeTooltip.targetLabel}`} |
| {edgeTooltip.labels.map((label) => ( | ||
| <div className="kg-edge-tooltip__label" key={label}> |
Jest test CoverageUI tests summary
|
|
🟡 Playwright Results — all passed (14 flaky)✅ 3984 passed · ❌ 0 failed · 🟡 14 flaky · ⏭️ 86 skipped
🟡 14 flaky test(s) (passed on retry)
How to debug locally# Download playwright-test-results-<shard> artifact and unzip
npx playwright show-trace path/to/trace.zip # view trace |
This pull request adds interactive edge tooltips and enhanced edge interaction handling to the Knowledge Graph component. Users can now hover over edges to see contextual information about relationships, and click edges to navigate between connected nodes. The changes include updates to the component logic, event handling, styles, and tests.
Edge interaction and tooltip enhancements:
EdgeTooltipStatetype and extended theGraphInteractionCtxto support edge tooltips and canvas references, enabling the display of contextual tooltips on edge hover. (KnowledgeGraph.interface.tsopenmetadata-ui/src/main/resources/ui/src/components/KnowledgeGraph/KnowledgeGraph.interface.tsR64-R75)KnowledgeGraph.tsxto manage tooltip state and render a styled tooltip with relationship labels and direction when hovering over an edge. (KnowledgeGraph.tsx[1] [2]KnowledgeGraph.utils.tsto register new event handlers foredge:pointerover,edge:pointerleave, andedge:click, supporting tooltip display, edge/node highlighting, and navigation between connected nodes. (KnowledgeGraph.utils.ts[1] [2]KnowledgeGraph.utils.tsopenmetadata-ui/src/main/resources/ui/src/utils/KnowledgeGraph.utils.tsR904-R1032)Styling and accessibility:
KnowledgeGraph.style.lessopenmetadata-ui/src/main/resources/ui/src/components/KnowledgeGraph/KnowledgeGraph.style.lessR123-R149)Testing:
KnowledgeGraph.utils.test.tsto cover edge hover, leave, and click events, verifying tooltip state, highlighting, and navigation behaviors. (KnowledgeGraph.utils.test.ts[1] [2] [3]Other improvements:
KnowledgeGraph.tsxopenmetadata-ui/src/main/resources/ui/src/components/KnowledgeGraph/KnowledgeGraph.tsxR397)KnowledgeGraph.utils.tsopenmetadata-ui/src/main/resources/ui/src/utils/KnowledgeGraph.utils.tsR77)