message: Fix flamegraph.
  // 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.
diff: @@ -28,32 +28,33 @@ const _TraceGraph = (props: TraceGraphProps) => {
  const params = useParams<{ id?: string; }>();
  const [clickedSpanTags,setClickedSpanTags]=useState([])
  + const [resetZoom,setResetZoom]=useState(false)
  useEffect( () => {
  + //sets span width based on value - which is mapped to duration
  props.fetchTraceItem(params.id);
  }, []);
  useEffect( () => {
  - if (props.traceItem[0].events.length>0)
  + if (props.traceItem || resetZoom)
  {
  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)
  + setResetZoom(false)
  }
  - },[props.traceItem]);
  +
  + },[props.traceItem,resetZoom]);
  // 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
  -
  -
  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) => {
  -
  setClickedSpanTags(z.data.tags);
  console.log(`Clicked on ${z.data.name}, id: "${z.id}"`);
  }
  -
  const chart = flamegraph()
  .width(640)
  .cellHeight(18)
  @@ -68,10 +69,6 @@ const _TraceGraph = (props: TraceGraphProps) => {
  .differential(false)
  .selfValue(true); //sets span width based on value - which is mapped to duration
  - const resetZoom = () => {
  - chart.resetZoom();
  - }
  -
  return (
  <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>
  @@ -84,7 +81,7 @@ const _TraceGraph = (props: TraceGraphProps) => {
  <Card bodyStyle={{padding: 80, }} style={{ height: 320, }}>
  <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>
  </Card>
  