Merge pull request #8 from oslabs-beta/staging

kev-ngo · web-flow · commit 52ee002fc70c · 2021-01-19T19:18:42.000-08:00
diff --git a/src/app/components/BarGraph.tsx b/src/app/components/BarGraph.tsx
@@ -70,7 +70,10 @@ const BarGraph = (props) => {
     showTooltip,
   } = useTooltip<TooltipData>();
   let tooltipTimeout: number;
-  const { containerRef, TooltipInPortal } = useTooltipInPortal();
+  const { containerRef, TooltipInPortal } = useTooltipInPortal({
+    detectBounds: true,
+    scroll: true,
+  });
 
   const keys = Object.keys(data.componentData);
 
@@ -139,9 +142,10 @@ const BarGraph = (props) => {
                   if (Number.isNaN(bar.bar[1]) || bar.height < 0) {
                     bar.height = 0;
                   }
+                  console.log('bar in BarGraph.tsx', bar);
                   return (
                     <rect
-                      key={`bar-stack-${barStack.index}-${bar.index}`}
+                      key={`bar-stack-${barStack.id}-${bar.id}`}
                       x={bar.x}
                       y={bar.y}
                       height={bar.height === 0 ? null : bar.height}
diff --git a/src/app/components/BarGraphComparison.tsx b/src/app/components/BarGraphComparison.tsx
@@ -8,6 +8,7 @@ import { AxisBottom, AxisLeft } from '@visx/axis';
 import { scaleBand, scaleLinear, scaleOrdinal } from '@visx/scale';
 import { useTooltip, useTooltipInPortal, defaultStyles } from '@visx/tooltip';
 import { Text } from '@visx/text';
+
 import { schemeSet3 } from 'd3-scale-chromatic';
 import { makeStyles } from '@material-ui/core/styles';
 import Select from '@material-ui/core/Select';
@@ -18,7 +19,6 @@ import FormHelperText from '@material-ui/core/FormHelperText';
 import snapshots from './snapshots';
 import { onHover, onHoverExit } from '../actions/actions';
 import { useStoreContext } from '../store';
-
 /* TYPESCRIPT */
 interface data {
   snapshotId?: string;
@@ -112,7 +112,6 @@ const BarGraphComparison = (props) => {
 
   // data accessor (used to generate scales) and formatter (add units for on hover box)
   const getSnapshotId = (d: snapshot) => d.snapshotId;
-  // const getSeriesId = (d: series) => d.currentTab;
   const formatSnapshotId = (id) => `Snapshot ID: ${id}`;
   const formatRenderTime = (time) => `${time} ms `;
 
@@ -121,8 +120,8 @@ const BarGraphComparison = (props) => {
     // domain: getSnapshotId(data.barStack[currentIndex]),
     // domain: [currentTab, comparison[series].currentTab],
     domain: [
-      `Series ${!currentTab ? null : currentTab} (Current Tab)`,
-      `Series ${!comparison[series] ? null : comparison[series].currentTab}`,
+      `Current Tab Series`,
+      `Series ${!comparison[series] ? null : series + 1}`,
     ],
     padding: 0.2,
   });
@@ -131,16 +130,14 @@ const BarGraphComparison = (props) => {
     const currentSeriesBarStacks = !comparison[series]
       ? []
       : comparison[series].data.barStack;
-    console.log(
-      'currentSeriesBarStacks index in Max func',
-      currentSeriesBarStacks[series]
-    );
-    let renderTimes = Object.values(currentSeriesBarStacks[series]);
-    renderTimes = renderTimes.slice(1);
-    // console.log('RendERrrrTimes', renderTimes);
-    const renderTotal = renderTimes.reduce((a, b) => a + b);
-    // console.log('renderTotal', renderTotal);
-    return renderTotal;
+    if (currentSeriesBarStacks.length === 0) return 0;
+    let currentMax = -Infinity;
+    for (let i = 0; i < currentSeriesBarStacks.length; i += 1) {
+      const renderTimes = Object.values(currentSeriesBarStacks[i]).slice(1);
+      const renderTotal = renderTimes.reduce((acc, curr) => acc + curr);
+      if (renderTotal > currentMax) currentMax = renderTotal;
+    }
+    return currentMax;
   };
 
   const renderingScale = scaleLinear<number>({
@@ -169,21 +166,26 @@ const BarGraphComparison = (props) => {
   const useStyles = makeStyles((theme) => ({
     formControl: {
       margin: theme.spacing(1),
-      minWidth: 150,
+      minWidth: 80,
+      // padding: '0.5rem',
+      height: 30,
+    },
+    select: {
+      minWidth: 80,
       border: '1px solid grey',
       borderRadius: 4,
-      borderColor: 'grey',
+      color: 'grey',
+      height: 30,
     },
   }));
 
   const classes = useStyles();
 
   const handleChange = (event) => {
     setSeries(event.target.value);
-    const renderTime = calculateMaxTotalRender(series);
-    console.log('handleCh renderTime', renderTime);
-    // setMaxRender(renderTime);
-    console.log('maxRender', maxRender);
+    // console.log('handleCh renderTime', renderTime);
+    // // setMaxRender(renderTime);
+    // console.log('maxRender', maxRender);
   };
 
   const handleClose = () => {
@@ -204,31 +206,52 @@ const BarGraphComparison = (props) => {
   return (
     <div>
       {/* <h1>{`Current Snapshot: ${currentIndex + 1}`}</h1> */}
-      <FormHelperText style={{ color: 'white' }}> Select Series</FormHelperText>
-      <FormControl variant="outlined" className={classes.formControl}>
-        <Select
-          style={{ color: 'white' }}
-          labelId="simple-select-outlined-label"
-          id="simple-select-outlined"
-          open={open}
-          onClose={handleClose}
-          onOpen={handleOpen}
-          value={series}
-          //data={data.barStack}
-          // value={titleFilter(comparison)}
-          onChange={handleChange}
-        >
-          {!comparison
-            ? null
-            : titleFilter(comparison).map((tabElem, index) => {
-                return (
-                  <MenuItem value={index}>
-                    {`Series ${tabElem.currentTab}`}
-                  </MenuItem>
-                );
-              })}
-        </Select>
-      </FormControl>
+      {/* <div class="dropdown dropdown-dark">
+        <select name="two" class="dropdown-select">
+          {!comparison[series] ? (
+            <option value={series}>No series available</option>
+          ) : (
+            titleFilter(comparison).map((tabElem, index) => {
+              return <option value={index}>{`Series ${index + 1}`}</option>;
+            })
+          )}
+        </select>
+      </div> */}
+      <div className="series-options-container">
+        <div className="snapshotId-container">
+          <h1 className="snashotId-header">
+            {' '}
+            Snapshot ID: {currentIndex + 1}{' '}
+          </h1>
+        </div>
+        <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"
+              className={classes.select}
+              open={open}
+              onClose={handleClose}
+              onOpen={handleOpen}
+              value={series}
+              //data={data.barStack}
+              // value={titleFilter(comparison)}
+              onChange={handleChange}
+            >
+              {!comparison[series] ? (
+                <MenuItem>No series available</MenuItem>
+              ) : (
+                titleFilter(comparison).map((tabElem, index) => {
+                  return (
+                    <MenuItem value={index}>{`Series ${index + 1}`}</MenuItem>
+                  );
+                })
+              )}
+            </Select>
+          </FormControl>
+        </div>
+      </div>
       <svg ref={containerRef} width={width} height={height}>
         {}
         <rect
@@ -268,6 +291,7 @@ const BarGraphComparison = (props) => {
                 const bar = barStack.bars[currentIndex];
                 // console.log('Y SCALEEE', barStacks);
                 // console.log('data.barStack >>>', data.barStack);
+                console.log('OG bar.x', bar.x);
 
                 return (
                   <rect
@@ -322,10 +346,11 @@ const BarGraphComparison = (props) => {
                 }
                 // console.log('barStacks in Comparison', barStacks);
                 const bar = barStack.bars[currentIndex];
+                console.log('Comparison bar.x', bar.x);
                 return (
                   <rect
                     key={`bar-stack-${idx}-${bar.index}`}
-                    x={300}
+                    x={275}
                     y={bar.y}
                     height={bar.height === 0 ? null : bar.height}
                     width={bar.width}
diff --git a/src/app/components/ComponentMap.tsx b/src/app/components/ComponentMap.tsx
@@ -8,8 +8,13 @@ import useForceUpdate from './useForceUpdate';
 import LinkControls from './LinkControls';
 import getLinkComponent from './getLinkComponent';
 import { localPoint } from '@visx/event';
-import { useTooltip, useTooltipInPortal, TooltipWithBounds } from '@visx/tooltip';
-import { onHover, onHoverExit } from '../actions/actions'; 
+import {
+  useTooltip,
+  useTooltipInPortal,
+  TooltipWithBounds,
+  defaultStyles,
+} from '@visx/tooltip';
+import { onHover, onHoverExit } from '../actions/actions';
 import { useStoreContext } from '../store';
 
 const root = hierarchy({
@@ -32,7 +37,6 @@ interface TreeNode {
   children?: TreeNode[];
 }
 
-
 type HierarchyNode = HierarchyPointNode<TreeNode>;
 
 const defaultMargin = { top: 30, left: 30, right: 55, bottom: 70 };
@@ -93,8 +97,7 @@ export default function ComponentMap({
     }
   }
 
-
-  //Tooltip stuff: 
+  //Tooltip stuff:
   const {
     tooltipData,
     tooltipLeft,
@@ -104,20 +107,25 @@ export default function ComponentMap({
     hideTooltip,
   } = useTooltip();
 
-  const { containerRef, TooltipInPortal } = useTooltipInPortal();
+  const { containerRef, TooltipInPortal } = useTooltipInPortal({
+    detectBounds: true,
+    scroll: true,
+  });
 
-  //mousing controls
-  const handleMouseOver = (event) => {
-    console.log("mouse entered");
-    const coords = localPoint(event.target.ownerSVGElement, event);
-    console.log("I'm coords", coords);
-    showTooltip({
-      tooltipLeft: coords.x,
-      tooltipTop: coords.y,
-      tooltipData: "test"
-    });
-  }
+  const tooltipStyles = {
+    ...defaultStyles,
+    minWidth: 60,
+    backgroundColor: 'rgba(0,0,0,0.9)',
+    color: 'white',
+    fontSize: '14px',
+    lineHeight: '18px',
+    fontFamily: 'Roboto',
+  };
 
+  const formatRenderTime = (time) => {
+    time = time.toFixed(3);
+    return `${time} ms `;
+  };
 
   // controls for the map
   const LinkComponent = getLinkComponent({ layout, linkType, orientation });
@@ -180,6 +188,24 @@ export default function ComponentMap({
                     left = node.y;
                   }
 
+                  //mousing controls
+                  const handleMouseOver = (event) => {
+                    () => dispatch(onHover(node.data.rtid));
+                    const coords = localPoint(
+                      event.target.ownerSVGElement,
+                      event
+                    );
+                    const tooltipObj = Object.assign({}, node.data);
+                    if (typeof tooltipObj.state === 'object')
+                      tooltipObj.state = 'stateful';
+                    console.log('tooltipObj', tooltipObj);
+                    showTooltip({
+                      tooltipLeft: coords.x,
+                      tooltipTop: coords.y,
+                      tooltipData: tooltipObj,
+                    });
+                  };
+
                   return (
                     <Group top={top} left={left} key={key}>
                       {node.depth === 0 && (
@@ -241,16 +267,26 @@ export default function ComponentMap({
           </Tree>
         </Group>
       </svg>
-     tooltipOpen && tooltipData && (
+      {tooltipOpen && tooltipData && (
         <TooltipInPortal
           // set this to random so it correctly updates with parent bounds
           key={Math.random()}
           top={tooltipTop}
           left={tooltipLeft}
+          style={tooltipStyles}
         >
-          Tooltip Data: <strong>{tooltipData}</strong>
+          <div style={{}}>
+            {' '}
+            <strong>{tooltipData.name}</strong>{' '}
+          </div>
+          <div>State: {tooltipData.state}</div>
+          <div>
+            {' '}
+            Render time:{' '}
+            {formatRenderTime(tooltipData.componentData.actualDuration)}{' '}
+          </div>
         </TooltipInPortal>
-     )
+      )}
     </div>
   );
 }
diff --git a/src/app/components/PerformanceVisx.tsx b/src/app/components/PerformanceVisx.tsx
@@ -76,6 +76,18 @@ const traverse = (snapshot, data, currTotalRender = 0) => {
   return data;
 };
 
+const allStorage = () => {
+  const values = [];
+  const keys = Object.keys(localStorage);
+  let i = keys.length;
+
+  while (i--) {
+    const series = localStorage.getItem(keys[i]);
+    values.push(JSON.parse(series));
+  }
+  return values;
+};
+
 const getSnapshotIds = (obj, snapshotIds = []): string[] => {
   snapshotIds.push(`${obj.name}.${obj.branch}`);
   if (obj.children) {
@@ -116,18 +128,6 @@ const PerformanceVisx = (props: BarStackProps) => {
   const [comparisonView, setComparisonView] = useState('barStack');
   const [comparisonData, setComparisonData] = useState();
 
-  const allStorage = () => {
-    const values = [];
-    const keys = Object.keys(localStorage);
-    let i = keys.length;
-
-    while (i--) {
-      const series = localStorage.getItem(keys[i]);
-      values.push(JSON.parse(series));
-    }
-    return values;
-  };
-
   const toggleComponentDetailsView = () => {
     detailsView === 'frequencyCards'
       ? setDetailsView('barStack')
diff --git a/src/app/styles/components/_buttons.scss b/src/app/styles/components/_buttons.scss
