Add styling for Save Series button, series dropdown, and Snapshat header

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

Author: 5 people

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;
@@ -153,7 +154,7 @@ const BarGraphComparison = (props) => {
   // 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]);
 
@@ -172,6 +173,8 @@ const BarGraphComparison = (props) => {
     },
     select: {
       minWidth: 80,
+      fontSize: '.75rem',
+      fontWeight: '200',
       border: '1px solid grey',
       borderRadius: 4,
       color: 'grey',
@@ -196,6 +199,12 @@ const BarGraphComparison = (props) => {
     setOpen(true);
   };
 
+  const toStorage = {
+    currentTab,
+    title: tabs[currentTab]['title'],
+    data,
+  };
+
   //this function creates a dropdown selection for each series of snapshots saved
   // const filterSeries = (comparisonArray) => {
   //   return comparisonArray.map((sessionName, idx) => {
@@ -218,12 +227,11 @@ const BarGraphComparison = (props) => {
         </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
@@ -250,8 +258,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
@@ -296,7 +312,7 @@ const BarGraphComparison = (props) => {
                 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}
@@ -350,7 +366,7 @@ const BarGraphComparison = (props) => {
                 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}

src/app/components/PerformanceVisx.tsx

@@ -5,7 +5,6 @@ import FormControlLabel from '@material-ui/core/FormControlLabel';
 import Switch from '@material-ui/core/Switch';
 import BarGraph from './BarGraph';
 import BarGraphComparison from './BarGraphComparison';
-import { save } from '../actions/actions';
 import { useStoreContext } from '../store';
 import {
   MemoryRouter as Router,
@@ -146,12 +145,6 @@ const PerformanceVisx = (props: BarStackProps) => {
   // filter and structure incoming data for VISX
   const data = getPerfMetrics(snapshots, getSnapshotIds(hierarchy));
 
-  const toStorage = {
-    currentTab,
-    title: tabs[currentTab]['title'],
-    data,
-  };
-
   // Extract individual data from chrome.locals.storage and visualize
   // Need to setup dropdown menu .  Fill dropdown with tabsID (sessions)
   // When you select dropdown, change view with ReactRouter
@@ -216,9 +209,7 @@ const PerformanceVisx = (props: BarStackProps) => {
         label="Comparison View"
       />
 
-      <button onClick={() => dispatch(save(toStorage))}>Save Series</button>
-
-      <div style={{ display: 'flex', 'justify-content': 'center' }}>
+      <div style={{ display: 'flex', justifyContent: 'center' }}>
         {/* {detailsView === 'frequencyCards' ? (
             <RenderingFrequency data={data.componentData} />
           ) : (

src/app/styles/components/_buttons.scss

@@ -1,4 +1,26 @@
 @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+.save-series-button {
+  padding: 3px;
+  outline: transparent;
+  color: white;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-style: solid;
+  border-color: transparent;
+  border-radius: 3px;
+  cursor: pointer;
+  line-height: 1.5em;
+  font: 300 14px 'Roboto', sans-serif;
+  font-size: $button-text-size;
+  width: 120px;
+  background: $red-color-gradient;
+  height: 30px;
+}
+.save-series-button:hover {
+  box-shadow: $box-shadow-red;
+}
+
 .empty-button {
   padding: 3px;
   outline: transparent;
@@ -217,3 +239,17 @@
 .MuiSelect-icon {
   color: lightgrey !important;
 }
+.series-options-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 0 1rem;
+}
+
+.snapshotId-header {
+  font-size: 1rem;
+}
+.dropdown-and-save-series-container {
+  display: flex;
+  align-items: center;
+}