Merge branch 'staging' of https://github.com/oslabs-beta/reactime into commas

Author: C-STYR

src/app/components/BarGraph.tsx

@@ -142,7 +142,6 @@ 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.id}-${bar.id}`}

src/app/components/BarGraphComparison.tsx

@@ -19,6 +19,7 @@ import FormHelperText from '@material-ui/core/FormHelperText';
 import snapshots from './snapshots';
 import { onHover, onHoverExit } from '../actions/actions';
 import { useStoreContext } from '../store';
+import { save } from '../actions/actions';
 /* TYPESCRIPT */
 interface data {
   snapshotId?: string;
@@ -71,31 +72,18 @@ const tooltipStyles = {
 const BarGraphComparison = (props) => {
   const [{ tabs, currentTab }, dispatch] = useStoreContext();
   const { width, height, data, comparison } = props;
-
   const [series, setSeries] = React.useState(0);
   const [open, setOpen] = React.useState(false);
   const [maxRender, setMaxRender] = React.useState(data.maxTotalRender);
 
-  // console.log('comparison >>>', comparison);
-  // console.log('tabs[currentTab] >>>', tabs[currentTab]);
-  // console.log('props in comparison graph >>>', props);
-  // console.log('data >>>>>', data);
-  // change scale of graph based on clicking of forward and backwards buttons effect
-  // useEffect(() => {
-  //   console.log('setSeries is changing everytime currentIndex changes');
-  //   //change the state with setChangeSeries
-  //   setSeries(tabs[currentTab].sliderIndex);
-  // }, [tabs[currentTab].sliderIndex]);
-
-  // console.log('tabs in Bargraphs comparison >>', tabs);
   function titleFilter(comparisonArray) {
     return comparisonArray.filter(
       (elem) => elem.title === tabs[currentTab].title
     );
   }
-  // console.log('tabs in BGComp >>>', tabs);
+
   const currentIndex = tabs[currentTab].sliderIndex;
-  // console.log('sliderIndx outside of bargraph >>>', currentIndex);
+
   const {
     tooltipOpen,
     tooltipLeft,
@@ -116,16 +104,15 @@ const BarGraphComparison = (props) => {
   const formatRenderTime = (time) => `${time} ms `;
 
   // create visualization SCALES with cleaned data
+  //the domain array elements will place the bars along the x-axis
   const snapshotIdScale = scaleBand<string>({
-    // domain: getSnapshotId(data.barStack[currentIndex]),
-    // domain: [currentTab, comparison[series].currentTab],
     domain: [
       `Current Tab Series`,
       `Series ${!comparison[series] ? null : series + 1}`,
     ],
     padding: 0.2,
   });
-
+  // calculateMax
   const calculateMaxTotalRender = (series) => {
     const currentSeriesBarStacks = !comparison[series]
       ? []
@@ -150,28 +137,23 @@ const BarGraphComparison = (props) => {
     range: schemeSet3,
   });
 
-  // console.log('rendering scale invocation', renderingScale);
   // setting max dimensions and scale ranges
   const xMax = width - margin.left - margin.right;
-  const yMax = height - margin.top - 150;
+  const yMax = height - margin.top - 200;
   snapshotIdScale.rangeRound([0, xMax]);
   renderingScale.range([yMax, 0]);
 
-  // const filterSeries = (comparisonArray) => {
-  //   return comparisonArray.map((sessionName, idx) => {
-  //     return <MenuItem>{sessionName}</MenuItem>;
-  //   });
-  // };
   // Dropdown to select series.
   const useStyles = makeStyles((theme) => ({
     formControl: {
       margin: theme.spacing(1),
       minWidth: 80,
-      // padding: '0.5rem',
       height: 30,
     },
     select: {
       minWidth: 80,
+      fontSize: '.75rem',
+      fontWeight: '200',
       border: '1px solid grey',
       borderRadius: 4,
       color: 'grey',
@@ -183,9 +165,6 @@ const BarGraphComparison = (props) => {
 
   const handleChange = (event) => {
     setSeries(event.target.value);
-    // console.log('handleCh renderTime', renderTime);
-    // // setMaxRender(renderTime);
-    // console.log('maxRender', maxRender);
   };
 
   const handleClose = () => {
@@ -196,34 +175,20 @@ const BarGraphComparison = (props) => {
     setOpen(true);
   };
 
-  //this function creates a dropdown selection for each series of snapshots saved
-  // const filterSeries = (comparisonArray) => {
-  //   return comparisonArray.map((sessionName, idx) => {
-  //     return <MenuItem>{sessionName}</MenuItem>;
-  //   });
-  // };
+  const toStorage = {
+    currentTab,
+    title: tabs[currentTab]['title'],
+    data,
+  };
 
   return (
     <div>
-      {/* <h1>{`Current Snapshot: ${currentIndex + 1}`}</h1> */}
-      {/* <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 className="snapshotId-header">
+          {' '}
+          Snapshot ID: {currentIndex + 1}{' '}
         </div>
+
         <div className="dropdown-and-save-series-container">
           <FormControl variant="outlined" className={classes.formControl}>
             <Select
@@ -235,8 +200,6 @@ const BarGraphComparison = (props) => {
               onClose={handleClose}
               onOpen={handleOpen}
               value={series}
-              //data={data.barStack}
-              // value={titleFilter(comparison)}
               onChange={handleChange}
             >
               {!comparison[series] ? (
@@ -250,8 +213,16 @@ const BarGraphComparison = (props) => {
               )}
             </Select>
           </FormControl>
+
+          <button
+            className="save-series-button"
+            onClick={() => dispatch(save(toStorage))}
+          >
+            Save Series
+          </button>
         </div>
       </div>
+
       <svg ref={containerRef} width={width} height={height}>
         {}
         <rect
@@ -276,27 +247,21 @@ const BarGraphComparison = (props) => {
         <Group top={margin.top} left={margin.left}>
           <BarStack
             // OG Barstack
-            // data={!comparison ? [] : comparison}
             data={data.barStack}
             keys={keys}
-            // x={getSnapshotId}
             x={getSnapshotId}
             xScale={snapshotIdScale}
             yScale={renderingScale}
             color={colorScale}
           >
             {(barStacks) =>
               barStacks.map((barStack, idx) => {
-                console.log('maxTotalRender 1st Barstack', data.maxTotalRender);
                 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
                     key={`bar-stack-${idx}-NewView`}
-                    x={bar.x + 50}
+                    x={bar.x + 30}
                     y={bar.y}
                     height={bar.height === 0 ? null : bar.height}
                     width={bar.width}
@@ -331,10 +296,8 @@ const BarGraphComparison = (props) => {
           <BarStack
             // Comparison Barstack
             data={!comparison[series] ? [] : comparison[series].data.barStack}
-            // data={data.barStack}
             keys={keys}
             x={getSnapshotId}
-            // x={getSeriesId}
             xScale={snapshotIdScale}
             yScale={renderingScale}
             color={colorScale}
@@ -344,13 +307,12 @@ const BarGraphComparison = (props) => {
                 if (!barStack.bars[currentIndex]) {
                   return <h1>No Comparison</h1>;
                 }
-                // 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={275}
+                    x={225}
                     y={bar.y}
                     height={bar.height === 0 ? null : bar.height}
                     width={bar.width}
@@ -417,12 +379,10 @@ const BarGraphComparison = (props) => {
           fontSize={12}
           fill="#FFFFFF"
         >
-          {' '}
-          Rendering Time (ms){' '}
+          Rendering Time (ms)
         </Text>
         <Text x={xMax / 2} y={yMax + 65} fontSize={12} fill="#FFFFFF">
-          {' '}
-          Series ID{' '}
+          Series ID
         </Text>
       </svg>
       {/* FOR HOVER OVER DISPLAY */}

src/app/components/ComponentMap.tsx

@@ -18,15 +18,15 @@ import { onHover, onHoverExit } from '../actions/actions';
 import { useStoreContext } from '../store';
 
 const root = hierarchy({
-  name: 'root',
+  name: "root",
   children: [
-    { name: 'child #1' },
+    { name: "child #1" },
     {
-      name: 'child #2',
+      name: "child #2",
       children: [
-        { name: 'grandchild #1' },
-        { name: 'grandchild #2' },
-        { name: 'grandchild #3' },
+        { name: "grandchild #1" },
+        { name: "grandchild #2" },
+        { name: "grandchild #3" },
       ],
     },
   ],
@@ -61,9 +61,9 @@ export default function ComponentMap({
   const data: {} = snapshots[lastNode];
 
   // importing custom hooks for the selection tabs.
-  const [layout, setLayout] = useState('cartesian');
-  const [orientation, setOrientation] = useState('horizontal');
-  const [linkType, setLinkType] = useState('diagonal');
+  const [layout, setLayout] = useState("cartesian");
+  const [orientation, setOrientation] = useState("horizontal");
+  const [linkType, setLinkType] = useState("diagonal");
   const [stepPercent, setStepPercent] = useState(10);
 
   // Declared this variable and assigned it to the useForceUpdate function that forces a state to change causing that component to re-render and display on the map
@@ -79,7 +79,7 @@ export default function ComponentMap({
 
   // This sets the starting position for the root node on the maps display. the polar layout sets the root node to the relative center of the display box based on the size of the browser window.
   // the else conditional statements determines the root nodes location either in the left middle or top middle of the browser window relative to the size of the browser.
-  if (layout === 'polar') {
+  if (layout === "polar") {
     origin = {
       x: innerWidth / 2,
       y: innerHeight / 2,
@@ -88,7 +88,7 @@ export default function ComponentMap({
     sizeHeight = Math.min(innerWidth, innerHeight) / 2;
   } else {
     origin = { x: 0, y: 0 };
-    if (orientation === 'vertical') {
+    if (orientation === "vertical") {
       sizeWidth = innerWidth;
       sizeHeight = innerHeight;
     } else {
@@ -176,11 +176,11 @@ export default function ComponentMap({
 
                   let top: number;
                   let left: number;
-                  if (layout === 'polar') {
+                  if (layout === "polar") {
                     const [radialX, radialY] = pointRadial(node.x, node.y);
                     top = radialY;
                     left = radialX;
-                  } else if (orientation === 'vertical') {
+                  } else if (orientation === "vertical") {
                     top = node.y;
                     left = node.x;
                   } else {
@@ -198,7 +198,6 @@ export default function ComponentMap({
                     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,
@@ -226,10 +225,10 @@ export default function ComponentMap({
                           width={width}
                           y={-height / 2}
                           x={-width / 2}
-                          fill={node.children ? '#161521' : '#62d6fb'}
-                          stroke={node.children ? '#62d6fb' : '#161521'}
+                          fill={node.children ? "#161521" : "#62d6fb"}
+                          stroke={node.children ? "#62d6fb" : "#161521"}
                           strokeWidth={1}
-                          strokeDasharray={node.children ? '0' : '2,2'}
+                          strokeDasharray={node.children ? "0" : "2,2"}
                           strokeOpacity="1"
                           rx={node.children ? 4 : 10}
                           onClick={() => {
@@ -240,6 +239,8 @@ export default function ComponentMap({
                           //test feature
                           onMouseOver={handleMouseOver}
                           onMouseOut={hideTooltip}
+                          onMouseEnter={() => dispatch(onHover(node.data.rtid))}
+                          onMouseLeave={() => dispatch(onHoverExit(node.data.rtid))}
                         />
                       )}
                       {/* Display text inside of each component node */}
@@ -248,13 +249,13 @@ export default function ComponentMap({
                         fontSize={10}
                         fontFamily="Roboto"
                         textAnchor="middle"
-                        style={{ pointerEvents: 'none' }}
+                        style={{ pointerEvents: "none" }}
                         fill={
                           node.depth === 0
-                            ? '#161521'
+                            ? "#161521"
                             : node.children
-                            ? 'white'
-                            : '#161521'
+                            ? "white"
+                            : "#161521"
                         }
                       >
                         {node.data.name}