Skip to content

Commit b6889af

Browse files
GnaneshKunalGnaneshKunal
authored
Merge pull request #1754 from RedisInsight/fe/bugfix-RI-3726_profile_explain-RI-4101-multiple-box-arrow
[RI-4101] Profile/Explain Plugin - Add edge split port when multiple targets, add arrow for target ends
2 parents 28b3692 + 6803bb4 commit b6889af

File tree

3 files changed

+113
-29
lines changed

3 files changed

+113
-29
lines changed

‎redisinsight/ui/src/packages/ri-explain/src/Explain.tsx‎

Lines changed: 106 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,13 @@ import {
99
EuiIcon,
1010
} from '@elastic/eui'
1111

12+
import {
13+
EDGE_COLOR_BODY_DARK,
14+
EDGE_COLOR_BODY_LIGHT,
15+
NODE_COLOR_BODY_DARK,
16+
NODE_COLOR_BODY_LIGHT,
17+
} from './constants'
18+
1219
import {
1320
CoreType,
1421
ModuleType,
@@ -31,6 +38,14 @@ function getEdgeSize(c: number) {
3138
return Math.floor(Math.log(c || 1) + 1)
3239
}
3340

41+
function getNodeColor(isDarkTheme: boolean) {
42+
return isDarkTheme ? NODE_COLOR_BODY_DARK : NODE_COLOR_BODY_LIGHT
43+
}
44+
45+
function getEdgeColor(isDarkTheme: boolean) {
46+
return isDarkTheme ? EDGE_COLOR_BODY_DARK : EDGE_COLOR_BODY_LIGHT
47+
}
48+
3449
export default function Explain(props: IExplain): JSX.Element {
3550
const command = props.command.split(' ')[0].toLowerCase()
3651

@@ -126,7 +141,6 @@ function ExplainDraw({data, type, module, profilingTime}: {data: any, type: Core
126141

127142
const [done, setDone] = useState(false)
128143
const [collapse, setCollapse] = useState(true)
129-
const [infoWidth, setInfoWidth] = useState(document.body.offsetWidth)
130144
const [isFullScreen, setIsFullScreen] = useState(false)
131145
const [core, setCore] = useState<Graph>()
132146

@@ -152,7 +166,6 @@ function ExplainDraw({data, type, module, profilingTime}: {data: any, type: Core
152166
core?.resize(width, (b?.height || 585) + 100)
153167
}
154168
}
155-
setInfoWidth(width)
156169
}
157170

158171
window.addEventListener('resize', resize)
@@ -185,16 +198,41 @@ function ExplainDraw({data, type, module, profilingTime}: {data: any, type: Core
185198
ancestors.pairs.forEach(p => {
186199
// Highlight ancestor and their ancestor
187200
document.querySelector(`#node-${p[0]}`)?.setAttribute("style", "outline: 1px solid #85A2FE !important;")
188-
189201
// Get edge size of parent ancestor to apply the right edge stroke
190-
const strokeSize = getEdgeSize(parseInt((document.querySelector(`#node-${p[1]}`) as HTMLElement)?.dataset?.size || '')) + 1
191-
document.querySelector(`[data-cell-id='${p[0]}-${p[1]}']`)?.childNodes.forEach(k =>
192-
(k as HTMLElement)
193-
.setAttribute(
194-
"style",
195-
`stroke: #85A2FE; stroke-linecap: butt; stroke-width: ${strokeSize}px`
196-
)
197-
)
202+
const edge = graph.getCellById(`${p[0]}-${p[1]}`)
203+
const edgeColor = '#85A2FE'
204+
edge.setAttrs({
205+
line: {
206+
stroke: edgeColor,
207+
strokeWidth: (edge.getAttrs() as any)?.line?.strokeWidth,
208+
targetMarker: {
209+
name: 'block',
210+
stroke: edgeColor,
211+
fill: edgeColor,
212+
},
213+
},
214+
})
215+
})
216+
})
217+
218+
graph.on("node:mouseleave", x => {
219+
const {id} = x.node.getData()
220+
const ancestors = GetAncestors(data, id, {found: false, pairs: []})
221+
ancestors.pairs.forEach(p => {
222+
document.querySelector(`#node-${p[0]}`)?.setAttribute("style", "")
223+
const edge = graph.getCellById(`${p[0]}-${p[1]}`)
224+
const edgeColor = getEdgeColor(isDarkTheme)
225+
edge.setAttrs({
226+
line: {
227+
stroke: edgeColor,
228+
strokeWidth: (edge.getAttrs() as any)?.line?.strokeWidth,
229+
targetMarker: {
230+
name: 'block',
231+
fill: edgeColor,
232+
stroke: edgeColor,
233+
}
234+
},
235+
})
198236
})
199237
})
200238

@@ -237,15 +275,6 @@ function ExplainDraw({data, type, module, profilingTime}: {data: any, type: Core
237275

238276
ele?.addEventListener('mousedown', mouseDownHandler)
239277

240-
graph.on("node:mouseleave", x => {
241-
const {id} = x.node.getData()
242-
const ancestors = GetAncestors(data, id, {found: false, pairs: []})
243-
ancestors.pairs.forEach(p => {
244-
document.querySelector(`#node-${p[0]}`)?.setAttribute("style", "")
245-
document.querySelector(`[data-cell-id='${p[0]}-${p[1]}']`)?.childNodes.forEach(k => (k as HTMLElement).setAttribute("style", ""))
246-
})
247-
})
248-
249278
resize()
250279

251280
const result = Hierarchy.compactBox(data, {
@@ -297,6 +326,20 @@ function ExplainDraw({data, type, module, profilingTime}: {data: any, type: Core
297326
}
298327

299328

329+
const portId = data.id + '-source'
330+
let targetPort = {}
331+
const targetItem: any = []
332+
if (info.parentId) {
333+
targetItem.push({id: `${info.id}-${info.parentId}-target`, group: `${info.parentId}-target`})
334+
targetPort[info.parentId+'-target'] = {
335+
position: { name: 'bottom' },
336+
attrs: {
337+
circle: {
338+
r: 0
339+
}
340+
}
341+
}
342+
}
300343
model.nodes?.push({
301344
id: data.id,
302345
x: (data.x || 0) + document.body.clientWidth / 2,
@@ -305,20 +348,45 @@ function ExplainDraw({data, type, module, profilingTime}: {data: any, type: Core
305348
data: info,
306349
attrs: {
307350
body: {
308-
fill: isDarkTheme ? '#5F95FF' : '#8992B3',
351+
fill: getNodeColor(isDarkTheme),
309352
stroke: 'transparent',
310353
},
311354
},
355+
ports: {
356+
groups: {
357+
[portId]: {
358+
position: { name: 'top' },
359+
attrs: {
360+
circle: {
361+
r: 0
362+
}
363+
}
364+
},
365+
...targetPort,
366+
},
367+
items: [
368+
...data.children.map(c => ({
369+
id: `${data.id}-${c.id}`, group: portId
370+
})),
371+
...targetItem,
372+
],
373+
},
312374
})
313375
}
314376
if (data.children) {
315377
data.children.forEach((item: any) => {
316378
const itemRecords = parseInt(item.data.counter || 0)
317-
379+
const edgeColor = getEdgeColor(isDarkTheme)
318380
model.edges?.push({
319381
id: `${data.id}-${item.id}`,
320-
source: data.id,
321-
target: item.id,
382+
source: {
383+
cell: data.id,
384+
port: `${data.id}-${item.id}`,
385+
},
386+
target: {
387+
cell: item.id,
388+
port: `${data.id}-${item.id}`
389+
},
322390
router: {
323391
name: 'manhattan',
324392
args: {
@@ -336,9 +404,13 @@ function ExplainDraw({data, type, module, profilingTime}: {data: any, type: Core
336404
},
337405
attrs: {
338406
line: {
339-
stroke: isDarkTheme ? '#6B6B6B' : '#8992B3',
407+
stroke: edgeColor,
340408
strokeWidth: getEdgeSize(itemRecords),
341-
targetMarker: null,
409+
targetMarker: {
410+
name: 'block',
411+
fill: edgeColor,
412+
stroke: edgeColor,
413+
},
342414
},
343415
},
344416
})
@@ -364,7 +436,14 @@ function ExplainDraw({data, type, module, profilingTime}: {data: any, type: Core
364436
return (
365437
<div>
366438
{ collapse && <div style={{ paddingTop: '50px' }}></div> }
367-
<div id="container-parent" style={{ height: isFullScreen ? (window.outerHeight - 170) + 'px' : collapse ? '500px' : '585px', width: '100%', overflow: 'auto' }}>
439+
<div
440+
id="container-parent"
441+
style={{
442+
height: isFullScreen ? (window.outerHeight - 170) + 'px' : collapse ? '500px' : '585px',
443+
width: '100%',
444+
overflow: 'auto',
445+
}}
446+
>
368447
<div style={{ margin: 0, width: '100vw' }} ref={container} id="container" />
369448
{ !collapse && (
370449
<div className="ZoomMenu">

‎redisinsight/ui/src/packages/ri-explain/src/Node.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -85,9 +85,8 @@ export function ProfileNode(props: INodeProps) {
8585
}
8686

8787
const infoData = data ? data : type
88-
8988
return (
90-
<div className="ProfileContainer" id={`node-${id}`} data-size={counter || size || recordsProduced}>
89+
<div className="ProfileContainer" id={`node-${id}`}>
9190
<div className="Main">
9291
<div className="InfoData">
9392
<EuiToolTip delay='long' content={infoData}><span>{infoData}</span></EuiToolTip>

‎redisinsight/ui/src/packages/ri-explain/src/constants.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export const NODE_COLOR_BODY_DARK = '#5F95FF'
2+
export const NODE_COLOR_BODY_LIGHT = '#8992B3'
3+
4+
export const EDGE_COLOR_BODY_DARK = '#6B6B6B'
5+
export const EDGE_COLOR_BODY_LIGHT = '#8992B3'
6+

0 commit comments

Comments
 (0)