gmakstutis/LightRAG
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add theme-aware edge highlighting colors for graph control

Browse source
This commit is contained in:
yangdx 2025-10-05 10:40:25 +08:00
parent dad90d25be
commit 0aef6a16b8
2 changed files with 8 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
lightrag_webui/src/components/graph/GraphControl.tsx
View file

@ -302,6 +302,10 @@ const GraphControl = ({ disableHoverEffect }: { disableHoverEffect?: boolean })
if (!disableHoverEffect) { if (!disableHoverEffect) {
const _focusedNode = focusedNode || selectedNode const _focusedNode = focusedNode || selectedNode
// Choose edge highlight color based on theme
const edgeHighlightColor = isDarkTheme
? Constants.edgeColorHighlightedDarkTheme
: Constants.edgeColorHighlightedLightTheme
if (_focusedNode && graph.hasNode(_focusedNode)) { if (_focusedNode && graph.hasNode(_focusedNode)) {
try { try {
@ -311,7 +315,7 @@ const GraphControl = ({ disableHoverEffect }: { disableHoverEffect?: boolean })
} }
} else { } else {
if (graph.extremities(edge).includes(_focusedNode)) { if (graph.extremities(edge).includes(_focusedNode)) {
newData.color = Constants.edgeColorHighlighted newData.color = edgeHighlightColor
} }
} }
} catch (error) { } catch (error) {
@ -326,7 +330,7 @@ const GraphControl = ({ disableHoverEffect }: { disableHoverEffect?: boolean })
if (edge === _selectedEdge) { if (edge === _selectedEdge) {
newData.color = Constants.edgeColorSelected newData.color = Constants.edgeColorSelected
} else if (edge === _focusedEdge) { } else if (edge === _focusedEdge) {
newData.color = Constants.edgeColorHighlighted newData.color = edgeHighlightColor
} else if (hideUnselectedEdges) { } else if (hideUnselectedEdges) {
newData.hidden = true newData.hidden = true
} }

3
lightrag_webui/src/lib/constants.ts
View file

@ -15,7 +15,8 @@ export const nodeBorderColorSelected = '#F57F17'
export const edgeColorDarkTheme = '#888888' export const edgeColorDarkTheme = '#888888'
export const edgeColorSelected = '#F57F17' export const edgeColorSelected = '#F57F17'
export const edgeColorHighlighted = '#FFFFFF' export const edgeColorHighlightedDarkTheme = '#F57F17'
export const edgeColorHighlightedLightTheme = '#F57F17'
export const searchResultLimit = 50 export const searchResultLimit = 50
export const labelListLimit = 100 export const labelListLimit = 100