message: Update to ranked graph duration times
diff: @@ -17,6 +17,7 @@ const RankedGraph: React.FC<RankedGraphProps> = ({cleanedComponentAtomTree, widt
  const namesAndDurations = (node: any) => {
  if (node === undefined) return;
  if (node.name && node.actualDuration) {
  + console.log(node.name, node.actualDuration)
  const obj: any = {}
  if(node.name.length > length){
  length = node.name.length;
  @@ -84,8 +85,9 @@ const RankedGraph: React.FC<RankedGraphProps> = ({cleanedComponentAtomTree, widt
  return d.name + '-' + i;
  }));
  // Scale actualDuration with the y-axis
  - z.domain(data.map((d: any) => {
  - return d.actualDuration.toFixed(2) + 'ms';
  + z.domain(data.map((d: any, i) => {
  + console.log(d);
  + return d.actualDuration.toFixed(2) + 'ms' + '-' + i;
  }))
  // append the rectangles for the bar chart
  svg.selectAll(".bar")
  @@ -116,7 +118,7 @@ const RankedGraph: React.FC<RankedGraphProps> = ({cleanedComponentAtomTree, widt
  backgroundConnection.postMessage(payload)
  })
  .transition()
  - .duration(750)
  + .duration(1300)
  .delay((d: any,i: any) => i * 100)
  .attr("width", function(d: any) {return x(d.actualDuration); } )
  .attr('fill',function(d:any) {
  @@ -134,8 +136,14 @@ const RankedGraph: React.FC<RankedGraphProps> = ({cleanedComponentAtomTree, widt
  return d.split("-")[0];
  });
  yAxis(svg.append("g"));
  - svg.append('g')
  - .call(d3.axisRight(z));
  + // add z axis to display all duration times
  + const zAxis = d3.axisRight(z)
  + .tickFormat(function(d: any) {
  + return d.split("-")[0];
  + });
  + zAxis(svg.append("g"));
  + // svg.append('g')
  + // .call(d3.axisRight(z));
  },[data]);
  return (
  