Fixed Comparison Bargraph X axis Bug and Hovering Bug

Co-authored-by: kev-ngo <[email protected]>
Co-authored-by: CourageWolf <[email protected]>
Co-authored-by: C-STYR <[email protected]>
Co-authored-by: demircaner <[email protected]>

Author: 5 people

src/app/components/BarGraph.tsx

@@ -74,7 +74,6 @@ const BarGraph = (props) => {
     detectBounds: true,
     scroll: true,
   });
-
   const keys = Object.keys(data.componentData);
 
   // data accessor (used to generate scales) and formatter (add units for on hover box)
@@ -122,7 +121,7 @@ const BarGraph = (props) => {
           yScale={renderingScale}
           width={xMax}
           height={yMax}
-          stroke="black"
+          stroke='black'
           strokeOpacity={0.1}
           xOffset={snapshotIdScale.bandwidth() / 2}
         />
@@ -208,16 +207,16 @@ const BarGraph = (props) => {
         />
         <Text
           x={-xMax / 2}
-          y="15"
-          transform="rotate(-90)"
+          y='15'
+          transform='rotate(-90)'
           fontSize={12}
-          fill="#FFFFFF"
+          fill='#FFFFFF'
         >
-         Rendering Time (ms)
+          Rendering Time (ms)
         </Text>
-        <br/>
-        <Text x={(xMax / 2) + 15} y={yMax + 70} fontSize={12} fill="#FFFFFF">
-         Snapshot ID
+        <br />
+        <Text x={xMax / 2 + 15} y={yMax + 70} fontSize={12} fill='#FFFFFF'>
+          Snapshot ID
         </Text>
       </svg>
       {/* FOR HOVER OVER DISPLAY */}

src/app/components/BarGraphComparison.tsx

@@ -102,14 +102,14 @@ const BarGraphComparison = (props) => {
   const getSnapshotId = (d: snapshot) => d.snapshotId;
   const formatSnapshotId = (id) => `Snapshot ID: ${id}`;
   const formatRenderTime = (time) => `${time} ms `;
-
+  const getTabID = (storedSeries) => storedSeries.currentTab;
   // create visualization SCALES with cleaned data
+  //const xAxisPoints = [...titleFilter(comparison).map(getTabID), currentTab];
   //the domain array elements will place the bars along the x-axis
+  const xAxisPoints = ['currentTab', 'comparison']; //[1.0.,2.0]
+  //{ currentTab : 1 },  {currentTab : 2 }
   const snapshotIdScale = scaleBand<string>({
-    domain: [
-      `Current Tab Series`,
-      `Series ${!comparison[series] ? null : series + 1}`,
-    ],
+    domain: xAxisPoints,
     padding: 0.2,
   });
   // calculateMax
@@ -165,14 +165,17 @@ const BarGraphComparison = (props) => {
 
   const handleChange = (event) => {
     setSeries(event.target.value);
+    setXpoints();
   };
 
   const handleClose = () => {
     setOpen(false);
+    setXpoints();
   };
 
   const handleOpen = () => {
     setOpen(true);
+    setXpoints();
   };
 
   const toStorage = {
@@ -181,20 +184,29 @@ const BarGraphComparison = (props) => {
     data,
   };
 
+  //manually assignin X -axis points with tab ID.
+  function setXpoints() {
+    comparison[series].data.barStack.forEach((elem) => {
+      elem.currentTab = 'comparison';
+    });
+    //comparison[series].data.barStack.currentTab = currentTab;
+    return comparison[series].data.barStack;
+  }
+
   return (
     <div>
-      <div className="series-options-container">
-        <div className="snapshotId-header">
+      <div className='series-options-container'>
+        <div className='snapshotId-header'>
           {' '}
           Snapshot ID: {currentIndex + 1}{' '}
         </div>
 
-        <div className="dropdown-and-save-series-container">
-          <FormControl variant="outlined" className={classes.formControl}>
+        <div className='dropdown-and-save-series-container'>
+          <FormControl variant='outlined' className={classes.formControl}>
             <Select
               style={{ color: 'white' }}
-              labelId="simple-select-outlined-label"
-              id="simple-select-outlined"
+              labelId='simple-select-outlined-label'
+              id='simple-select-outlined'
               className={classes.select}
               open={open}
               onClose={handleClose}
@@ -215,7 +227,7 @@ const BarGraphComparison = (props) => {
           </FormControl>
 
           <button
-            className="save-series-button"
+            className='save-series-button'
             onClick={() => dispatch(save(toStorage))}
           >
             Save Series
@@ -240,7 +252,7 @@ const BarGraphComparison = (props) => {
           yScale={renderingScale}
           width={xMax}
           height={yMax}
-          stroke="black"
+          stroke='black'
           strokeOpacity={0.1}
           xOffset={snapshotIdScale.bandwidth() / 2}
         />
@@ -257,11 +269,10 @@ const BarGraphComparison = (props) => {
             {(barStacks) =>
               barStacks.map((barStack, idx) => {
                 const bar = barStack.bars[currentIndex];
-
                 return (
                   <rect
                     key={`bar-stack-${idx}-NewView`}
-                    x={bar.x + 30}
+                    x={bar.x}
                     y={bar.y}
                     height={bar.height === 0 ? null : bar.height}
                     width={bar.width}
@@ -295,9 +306,9 @@ const BarGraphComparison = (props) => {
           </BarStack>
           <BarStack
             // Comparison Barstack
-            data={!comparison[series] ? [] : comparison[series].data.barStack}
+            data={!comparison[series] ? [] : setXpoints()}
             keys={keys}
-            x={getSnapshotId}
+            x={getTabID}
             xScale={snapshotIdScale}
             yScale={renderingScale}
             color={colorScale}
@@ -308,11 +319,10 @@ const BarGraphComparison = (props) => {
                   return <h1>No Comparison</h1>;
                 }
                 const bar = barStack.bars[currentIndex];
-
                 return (
                   <rect
                     key={`bar-stack-${idx}-${bar.index}`}
-                    x={225}
+                    x={bar.x}
                     y={bar.y}
                     height={bar.height === 0 ? null : bar.height}
                     width={bar.width}
@@ -374,14 +384,14 @@ const BarGraphComparison = (props) => {
         />
         <Text
           x={-xMax / 2}
-          y="15"
-          transform="rotate(-90)"
+          y='15'
+          transform='rotate(-90)'
           fontSize={12}
-          fill="#FFFFFF"
+          fill='#FFFFFF'
         >
           Rendering Time (ms)
         </Text>
-        <Text x={xMax / 2} y={yMax + 65} fontSize={12} fill="#FFFFFF">
+        <Text x={xMax / 2} y={yMax + 65} fontSize={12} fill='#FFFFFF'>
           Series ID
         </Text>
       </svg>

src/app/components/PerformanceVisx.tsx

@@ -89,7 +89,7 @@ const allStorage = () => {
   return values;
 };
 
-// Get snapshot Ids for the regular bar graph view.
+// Gets snapshot Ids for the regular bar graph view.
 const getSnapshotIds = (obj, snapshotIds = []): string[] => {
   snapshotIds.push(`${obj.name}.${obj.branch}`);
   if (obj.children) {
@@ -149,43 +149,43 @@ const PerformanceVisx = (props: BarStackProps) => {
     if (hierarchy) {
       return <RenderingFrequency data={data.componentData} />;
     }
-    return <div className="noState">{NO_STATE_MSG}</div>;
+    return <div className='noState'>{NO_STATE_MSG}</div>;
   };
 
   return (
     <Router>
-      <div className="performance-nav-bar-container">
+      <div className='performance-nav-bar-container'>
         <NavLink
-          className="router-link-performance"
+          className='router-link-performance'
           // className="router-link"
-          activeClassName="is-active"
+          activeClassName='is-active'
           exact
-          to="/"
+          to='/'
         >
           Snapshots View
         </NavLink>
         <NavLink
-          className="router-link-performance"
+          className='router-link-performance'
           // className="router-link"
-          activeClassName="is-active"
-          to="/comparison"
+          activeClassName='is-active'
+          to='/comparison'
         >
           Comparison View
         </NavLink>
         <NavLink
-          className="router-link-performance"
+          className='router-link-performance'
           // className="router-link"
-          activeClassName="is-active"
-          to="/componentdetails"
+          activeClassName='is-active'
+          to='/componentdetails'
         >
           Component Details
         </NavLink>
       </div>
 
       <Switch>
-        <Route path="/comparison" render={renderComparisonBargraph} />
-        <Route path="/componentdetails" render={renderComponentDetailsView} />
-        <Route path="/" render={renderBargraph} />
+        <Route path='/comparison' render={renderComparisonBargraph} />
+        <Route path='/componentdetails' render={renderComponentDetailsView} />
+        <Route path='/' render={renderBargraph} />
       </Switch>
     </Router>
   );