Merge pull request #3 from oslabs-beta/staging

open-source-labs · Jan 19, 2021 · 0f97009 · 0f97009
2 parents 2c1d0dc + c698086
commit 0f97009
Show file tree

Hide file tree

Showing 12 changed files with 1,171 additions and 512 deletions.
diff --git a/src/app/actions/actions.ts b/src/app/actions/actions.ts
@@ -1,22 +1,27 @@
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 import * as types from '../constants/actionTypes';
 
-export const toggleMode = mode => ({
+export const save = (tabsObj) => ({
+  type: types.SAVE,
+  payload: tabsObj,
+});
+
+export const toggleMode = (mode) => ({
   type: types.TOGGLE_MODE,
   payload: mode,
 });
 
-export const addNewSnapshots = tabsObj => ({
+export const addNewSnapshots = (tabsObj) => ({
   type: types.NEW_SNAPSHOTS,
   payload: tabsObj,
 });
 
-export const initialConnect = tabsObj => ({
+export const initialConnect = (tabsObj) => ({
   type: types.INITIAL_CONNECT,
   payload: tabsObj,
 });
 
-export const setPort = port => ({
+export const setPort = (port) => ({
   type: types.SET_PORT,
   payload: port,
 });
@@ -25,12 +30,12 @@ export const emptySnapshots = () => ({
   type: types.EMPTY,
 });
 
-export const changeView = index => ({
+export const changeView = (index) => ({
   type: types.CHANGE_VIEW,
   payload: index,
 });
 
-export const changeSlider = index => ({
+export const changeSlider = (index) => ({
   type: types.CHANGE_SLIDER,
   payload: index,
 });
@@ -54,22 +59,22 @@ export const pause = () => ({
   type: types.PAUSE,
 });
 
-export const startPlaying = intervalId => ({
+export const startPlaying = (intervalId) => ({
   type: types.PLAY,
   payload: intervalId,
 });
 
-export const importSnapshots = newSnaps => ({
+export const importSnapshots = (newSnaps) => ({
   type: types.IMPORT,
   payload: newSnaps,
 });
 
-export const setTab = tab => ({
+export const setTab = (tab) => ({
   type: types.SET_TAB,
   payload: tab,
 });
 
-export const deleteTab = tab => ({
+export const deleteTab = (tab) => ({
   type: types.DELETE_TAB,
   payload: tab,
 });
@@ -79,12 +84,12 @@ export const resetSlider = () => ({
 });
 
 export const onHover = (rtid) => ({
-  type: types.ON_HOVER, 
+  type: types.ON_HOVER,
   //the payload should be something to relate the component we're hovering and highlight that component on the DOM
-  payload: rtid
-})
+  payload: rtid,
+});
 
 export const onHoverExit = (rtid) => ({
   type: types.ON_HOVER_EXIT,
-  payload: rtid
-})
+  payload: rtid,
+});
diff --git a/src/app/components/BarGraph.tsx b/src/app/components/BarGraph.tsx
@@ -11,14 +11,19 @@ import { Text } from '@visx/text';
 import { schemeSet3 } from 'd3-scale-chromatic';
 import snapshots from './snapshots';
 import { onHover, onHoverExit } from '../actions/actions';
-import { useStoreContext } from '../store'
+import { useStoreContext } from '../store';
 
 /* TYPESCRIPT */
 interface data {
   snapshotId?: string;
 }
 
-interface margin { top: number; right: number; bottom: number; left: number };
+interface margin {
+  top: number;
+  right: number;
+  bottom: number;
+  left: number;
+}
 
 interface snapshot {
   snapshotId?: string;
@@ -50,14 +55,19 @@ const tooltipStyles = {
   color: 'white',
   fontSize: '14px',
   lineHeight: '18px',
-  fontFamily: 'Roboto'
+  fontFamily: 'Roboto',
 };
 
 const BarGraph = (props) => {
   const [{ tabs, currentTab }, dispatch] = useStoreContext();
   const { width, height, data } = props;
   const {
-    tooltipOpen, tooltipLeft, tooltipTop, tooltipData, hideTooltip, showTooltip,
+    tooltipOpen,
+    tooltipLeft,
+    tooltipTop,
+    tooltipData,
+    hideTooltip,
+    showTooltip,
   } = useTooltip<TooltipData>();
   let tooltipTimeout: number;
   const { containerRef, TooltipInPortal } = useTooltipInPortal();
@@ -91,7 +101,7 @@ const BarGraph = (props) => {
   snapshotIdScale.rangeRound([0, xMax]);
   renderingScale.range([yMax, 0]);
   return (
-    <div> 
+    <div>
       <svg ref={containerRef} width={width} height={height}>
         {}
         <rect
@@ -122,9 +132,9 @@ const BarGraph = (props) => {
             yScale={renderingScale}
             color={colorScale}
           >
-            {barStacks =>
-              barStacks.map(barStack =>
-                barStack.bars.map(((bar, idx) => {
+            {(barStacks) =>
+              barStacks.map((barStack) =>
+                barStack.bars.map((bar, idx) => {
                   // hides new components if components don't exist in previous snapshots
                   if (Number.isNaN(bar.bar[1]) || bar.height < 0) {
                     bar.height = 0;
@@ -140,14 +150,16 @@ const BarGraph = (props) => {
                       /* TIP TOOL EVENT HANDLERS */
                       // Hides tool tip once cursor moves off the current rect
                       onMouseLeave={() => {
-                        dispatch(onHoverExit(data.componentData[bar.key].rtid),
-                        tooltipTimeout = window.setTimeout(() => {
-                          hideTooltip()
-                        }, 300))
+                        dispatch(
+                          onHoverExit(data.componentData[bar.key].rtid),
+                          (tooltipTimeout = window.setTimeout(() => {
+                            hideTooltip();
+                          }, 300))
+                        );
                       }}
                       // Cursor position in window updates position of the tool tip
-                      onMouseMove={event => {
-                        dispatch(onHover(data.componentData[bar.key].rtid))
+                      onMouseMove={(event) => {
+                        dispatch(onHover(data.componentData[bar.key].rtid));
                         if (tooltipTimeout) clearTimeout(tooltipTimeout);
                         const top = event.clientY - margin.top - bar.height;
                         const left = bar.x + bar.width / 2;
@@ -158,8 +170,10 @@ const BarGraph = (props) => {
                         });
                       }}
                     />
-                    )})))
-                  }
+                  );
+                })
+              )
+            }
           </BarStack>
         </Group>
         <AxisLeft
@@ -189,8 +203,20 @@ const BarGraph = (props) => {
             textAnchor: 'middle',
           })}
         />
-        <Text x={-xMax / 2} y="15" transform="rotate(-90)" fontSize={12} fill="#FFFFFF"> Rendering Time (ms) </Text>
-        <Text x={xMax / 2} y={yMax + 65} fontSize={12} fill="#FFFFFF"> Snapshot Id </Text>
+        <Text
+          x={-xMax / 2}
+          y="15"
+          transform="rotate(-90)"
+          fontSize={12}
+          fill="#FFFFFF"
+        >
+          {' '}
+          Rendering Time (ms){' '}
+        </Text>
+        <Text x={xMax / 2} y={yMax + 65} fontSize={12} fill="#FFFFFF">
+          {' '}
+          Snapshot Id{' '}
+        </Text>
       </svg>
       {/* FOR HOVER OVER DISPLAY */}
       {tooltipOpen && tooltipData && (
@@ -201,23 +227,21 @@ const BarGraph = (props) => {
           style={tooltipStyles}
         >
           <div style={{ color: colorScale(tooltipData.key) }}>
-          {' '}
-          <strong>{tooltipData.key}</strong>
-          {' '}
-          </div>
-          <div>{data.componentData[tooltipData.key].stateType}</div>
-          <div>
-            {' '}
-            {formatRenderTime(tooltipData.bar.data[tooltipData.key])}
             {' '}
+            <strong>{tooltipData.key}</strong>{' '}
           </div>
+          <div>{data.componentData[tooltipData.key].stateType}</div>
+          <div> {formatRenderTime(tooltipData.bar.data[tooltipData.key])} </div>
           <div>
             {' '}
-            <small>{formatSnapshotId(getSnapshotId(tooltipData.bar.data))}</small>
+            <small>
+              {formatSnapshotId(getSnapshotId(tooltipData.bar.data))}
+            </small>
           </div>
         </TooltipInPortal>
       )}
     </div>
-)};
+  );
+};
 
-export default BarGraph;
+export default BarGraph;