message: Updated some width issues on bar graph
diff: @@ -55,19 +55,18 @@ const cleanComponentAtomTree = (
  const Visualizer: React.FC<VisualizerProps> = ({componentAtomTree}: any) => {
  // data for bar graph render
  const rawComponentAtomTree = cleanComponentAtomTree(componentAtomTree);
  + console.log(rawComponentAtomTree)
  // create an empty array to store objects for property name and actualDuration
  let dataArray: {}[] = [];
  // function to traverse through the fiber tree
  const namesAndDurations = (node: any) => {
  - // const tagCheck = 0 | 1 | 13;
  - if(node.tag === 0 || node.tag === 1 || node.tag === 13){
  + console.log(node.name, node.actualDuration)
  if (node.name && node.actualDuration) {
  const obj: any = {}
  obj["name"] = node.name;
  obj["actualDuration"] = node.actualDuration;
  dataArray.push(obj)
  }
  - }
  node.children.forEach((child: any) => namesAndDurations(child))
  }
  namesAndDurations(rawComponentAtomTree);
  @@ -76,12 +75,12 @@ const Visualizer: React.FC<VisualizerProps> = ({componentAtomTree}: any) => {
  const svgRef = useRef();
  useEffect(() => {
  - const widthx = document.querySelector('.Visualizer').clientWidth;
  + const width = document.querySelector('.Visualizer').clientWidth;
  // let heightx = document.querySelector('.Visualizer').clientHeight;
  document.getElementById('canvas').innerHTML = '';
  // set the dimensions and margins of the graph
  const margin = {top: 20, right: 20, bottom: 30, left: 80},
  - width = widthx - margin.left - margin.right,
  + // width = widthx - margin.left - margin.right,
  height = 340 - margin.top - margin.bottom;
  // set range for y scale
  const y = d3.scaleBand()
  @@ -104,7 +103,7 @@ const Visualizer: React.FC<VisualizerProps> = ({componentAtomTree}: any) => {
  .attr("transform",
  "translate(" + margin.left + "," + margin.top + ")");
  // Scale the range of the data in the domains
  - x.domain([0, d3.max(data, function(d: any){ return d.actualDuration; }) + 0.2])
  + x.domain([0, d3.max(data, function(d: any){ return d.actualDuration; })])
  // Scale the range of he data across the y-axis
  y.domain(data.map(function(d: any) { return d.name; }));
  // append the rectangles for the bar chart
  @@ -115,7 +114,13 @@ const Visualizer: React.FC<VisualizerProps> = ({componentAtomTree}: any) => {
  .attr("class", "bar")
  .attr("width", function(d: any) {return x(d.actualDuration); } )
  .attr("y", function(d: any) { return y(d.name); })
  - .attr("height", y.bandwidth());
  + .attr("height", y.bandwidth())
  +
  + svg.selectAll(".bar")
  + .data(data)
  + .enter()
  + .append('text')
  + .text((d:any) => d.actualDuration);
  // add the x Axis
  svg.append("g")
  .attr("transform", "translate(0," + height + ")")
  