GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-14 06:05:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fix flamegraph.

Browse Source 
// Alternative fix, useRef or createRef with reference to DOM chart. Weird way to handle it, looks like it's relying on immutability. Ideally any componentLibrary will use useRef for opposite data transfer.
This commit is contained in:
Himanshu Dixit 2021-01-17 20:48:28 +05:30
parent 6bd8bf7d9f
commit ff47f0978f
1 changed files with 38 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
frontend/src/components/traces/TraceGraph.tsx
View File

@ -28,72 +28,69 @@ const _TraceGraph = (props: TraceGraphProps) => {
const params = useParams<{ id?: string; }>(); const params = useParams<{ id?: string; }>();
const [clickedSpanTags,setClickedSpanTags]=useState([]) const [clickedSpanTags,setClickedSpanTags]=useState([])
const [resetZoom,setResetZoom]=useState(false)
useEffect( () => { useEffect( () => {
//sets span width based on value - which is mapped to duration
props.fetchTraceItem(params.id); props.fetchTraceItem(params.id);
}, []); }, []);
useEffect( () => { useEffect( () => {
if (props.traceItem[0].events.length>0) if (props.traceItem || resetZoom)
{ {
const tree = spanToTreeUtil(props.traceItem[0].events); const tree = spanToTreeUtil(props.traceItem[0].events);
d3.select("#chart").datum(tree).call(chart); // This is causing element to change ref. Can use both useRef or this approach.
} d3.select("#chart").datum(tree).call(chart)
},[props.traceItem]); setResetZoom(false)
}
},[props.traceItem,resetZoom]);
// if this monitoring of props.traceItem.data is removed then zoom on click doesn't work // if this monitoring of props.traceItem.data is removed then zoom on click doesn't work
// Doesn't work if only do initial check, works if monitor an element - as it may get updated in sometime // Doesn't work if only do initial check, works if monitor an element - as it may get updated in sometime
const tip = d3Tip.default().attr('class', 'd3-tip').html(function(d:any) { return d.data.name+'<br>duration: '+d.data.value}); const tip = d3Tip.default().attr('class', 'd3-tip').html(function(d:any) { return d.data.name+'<br>duration: '+d.data.value});
const onClick = (z:any) => { const onClick = (z:any) => {
setClickedSpanTags(z.data.tags); setClickedSpanTags(z.data.tags);
console.log(`Clicked on ${z.data.name}, id: "${z.id}"`); console.log(`Clicked on ${z.data.name}, id: "${z.id}"`);
} }
const chart = flamegraph() const chart = flamegraph()
.width(640) .width(640)
.cellHeight(18) .cellHeight(18)
.transitionDuration(500) .transitionDuration(500)
.minFrameSize(5) .minFrameSize(5)
.sort(true) .sort(true)
.inverted(true) .inverted(true)
.tooltip(tip) .tooltip(tip)
.elided(false) .elided(false)
.onClick(onClick) .onClick(onClick)
// .title("Trace Flame graph") // .title("Trace Flame graph")
.differential(false) .differential(false)
.selfValue(true); //sets span width based on value - which is mapped to duration .selfValue(true); //sets span width based on value - which is mapped to duration
const resetZoom = () => {
chart.resetZoom();
}
return ( return (
<Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}> <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>
<Col md={8} sm={24} > <Col md={8} sm={24} >
<TraceGraphColumn /> <TraceGraphColumn />
</Col> </Col>
<Col md={16} sm={24} > <Col md={16} sm={24} >
{/* <Card style={{ width: 640 }}> */} {/* <Card style={{ width: 640 }}> */}
<Space direction="vertical" size='middle' > <Space direction="vertical" size='middle' >
<Card bodyStyle={{padding: 80, }} style={{ height: 320, }}> <Card bodyStyle={{padding: 80, }} style={{ height: 320, }}>
<div>Trace Graph component ID is {params.id} </div> <div>Trace Graph component ID is {params.id} </div>
<Button type="primary" onClick={resetZoom}>Reset Zoom</Button> <Button type="primary" onClick={setResetZoom.bind(this,true)}>Reset Zoom</Button>
<div id="chart" style={{ fontSize: 12 }}></div> <div id="chart" style={{ fontSize: 12 }}></div>
</Card> </Card>
<SelectedSpanDetails clickedSpanTags={clickedSpanTags}/> <SelectedSpanDetails clickedSpanTags={clickedSpanTags}/>
</Space> </Space>
</Col> </Col>
</Row> </Row>
); );
} }