Merge pull request #19 from oslabs-beta/dev45

Dev45

Author: rxlina

package.json

@@ -40,6 +40,7 @@
     "Abaas Khorrami",
     "Ali Rahman",
     "Andy Wong",
+    "Andy Tsou",
     "Bryan Lee",
     "Becca Viner",
     "Caitlin Chan",
@@ -51,6 +52,7 @@
     "Dennis Lopez",
     "Edwin Menendez",
     "Ergi Shehu",
+    "Freya Wu",
     "Gabriela Jardim Aquino",
     "Gregory Panciera",
     "Haejin Jo",
@@ -61,6 +63,7 @@
     "Kevin Fey",
     "Kevin Ngo",
     "Kim Mai Nguyen",
+    "Lina Shin",
     "Nathanael Wa Mwenze",
     "Prasanna Malla",
     "Rajeeb Banstola",
@@ -70,6 +73,7 @@
     "Ryan Dang",
     "Sierra Swaby",
     "Tania Lind",
+    "Viet Nguyen",
     "Yujin Kang"
   ],
   "license": "ISC",

src/README.md

@@ -70,6 +70,8 @@ The general flow of data is described in the following steps:
 ![GENERAL DATA FLOW](../assets/dataflow.jpg)
 
 1. When the background bundle is loaded by the browser, it executes a script injection into the dom. (see section on *backend*). This script uses a technique called [throttle](https://medium.com/@bitupon.211/debounce-and-throttle-160affa5457b) to send state data from the app to the content script every specified milliseconds (in our case, this interval is 70ms).
+<!--  CHECK LINE 496 IN LINKFIBER.TS -->
+
 
 2. The content script always listens for messages being passed from the extension's target application. Upon receiving data from the target app, the content script will immediately forward this data to the background script which then updates an object called `tabsObj`. Each time `tabsObj` is updated, its latest version will be passed to Reactime, where it is processed for displaying to the user by the *app* folder scripts.
 

src/app/__tests__/ActionContainer.test.tsx

@@ -68,6 +68,11 @@ const state = {
           }],
         }],
       },
+      currLocation: {
+        index: 0,
+        name: 1,
+        branch: 0,
+      },
       sliderIndex: 0,
       viewIndex: -1,
     },
@@ -86,7 +91,7 @@ let wrapper;
 //conditional rendering in ActionContainer that shows/hides time-travel functionality
 
 beforeEach(() => {
-  wrapper = shallow(<ActionContainer actionView={true}/>);
+  wrapper = shallow(<ActionContainer actionView={true} />);
   useStoreContext.mockClear();
   dispatch.mockClear();
 });

src/app/actions/actions.ts

@@ -5,7 +5,7 @@ export const save = (tabsObj) => ({
   type: types.SAVE,
   payload: tabsObj,
 });
-export const deleteSeries = () =>({
+export const deleteSeries = () => ({
   type: types.DELETE_SERIES,
 })
 export const toggleMode = (mode) => ({
@@ -95,3 +95,8 @@ export const onHoverExit = (rtid) => ({
   type: types.ON_HOVER_EXIT,
   payload: rtid,
 });
+
+export const setCurrentLocation = (tabsObj) => ({
+  type: types.SET_CURRENT_LOCATION,
+  payload: tabsObj,
+})

src/app/components/Action.tsx

@@ -22,6 +22,7 @@ interface ActionProps {
   componentData: { actualDuration: number } | undefined;
   state?: Record<string, unknown>;
   viewIndex: number;
+  isCurrIndex: boolean;
   handleOnkeyDown: (e: any, i: number) => any;
   logChangedState: (index: number) => any;
 }
@@ -53,6 +54,7 @@ const Action = (props: ActionProps): JSX.Element => {
     componentName,
     componentData,
     viewIndex,
+    isCurrIndex,
     handleOnkeyDown,
     logChangedState,
   } = props;
@@ -98,43 +100,55 @@ const Action = (props: ActionProps): JSX.Element => {
   return (
     <div
       // Invoking keyboard functionality; functionality is in ActionContainer;
-      onKeyDown={(e) => handleOnkeyDown(e, viewIndex)}
+      onKeyDown={e => handleOnkeyDown(e, viewIndex)}
       className={
         selected || last ? 'action-component selected' : 'action-component'
       }
       onClick={() => {
         dispatch(changeView(index));
       }}
-      role='presentation'
+      role="presentation"
       style={index > sliderIndex ? { color: '#5f6369' } : {}}
       tabIndex={index}
     >
       <ReactHover options={optionsCursorTrueWithMargin}>
-        <Trigger type='trigger'>
-          <div className='action-component-trigger' style={index > sliderIndex ? { color: '#5f6369' } : {}}> 
-            <div className='action-component-text'>
+        <Trigger type="trigger">
+          <div className="action-component-trigger" style={index > sliderIndex ? { color: '#5f6369' } : {}}>
+            <div className="action-component-text">
               {`${displayName}:  ${componentName !== 'nameless' ? componentName : ''} `}
               {/* {`displayName: ${displayName}`} */}
             </div>
-            <button className='time-button' type='button'>
+            <button className="time-button" type="button">
               {displayTime}
             </button>
-            <button
-              className='jump-button'
-              onClick={(e: any): void => {
-                e.stopPropagation();
-                dispatch(changeSlider(index));
-                dispatch(changeView(index));
-              }}
-              tabIndex={index}
-              type='button'
-            >
-              Jump
-            </button>
+            {
+              isCurrIndex ? (
+                <button
+                  className="current-location"
+                  type="button"
+                >
+                  Current
+                </button>
+              )
+                : (
+                  <button
+                    className="jump-button"
+                    onClick={(e: any): void => {
+                      e.stopPropagation();
+                      dispatch(changeSlider(index));
+                      dispatch(changeView(index));
+                    }}
+                    tabIndex={index}
+                    type="button"
+                  >
+                    Jump
+                  </button>
+                )
+            }
           </div>
         </Trigger>
-        <Hover type='hover'>
-          <div style={{ padding: '0.5rem 1rem' }} id='hover-box'>
+        <Hover type="hover">
+          <div style={{ padding: '0.5rem 1rem' }} id="hover-box">
             <p>{logChangedState(index)}</p>
           </div>
         </Hover>

src/app/components/BarGraph.tsx

@@ -9,9 +9,8 @@ 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 { onHover, onHoverExit } from '../actions/actions';
+import { onHover, onHoverExit, save } from '../actions/actions';
 import { useStoreContext } from '../store';
-import { save } from '../actions/actions';
 
 /* TYPESCRIPT */
 interface data {
@@ -45,7 +44,9 @@ interface TooltipData {
 }
 
 /* DEFAULTS */
-const margin = { top: 30, right: 30, bottom: 0, left: 50 };
+const margin = {
+  top: 30, right: 30, bottom: 0, left: 50,
+};
 const axisColor = '#62d6fb';
 const background = '#242529';
 const tooltipStyles = {
@@ -58,7 +59,7 @@ const tooltipStyles = {
   fontFamily: 'Roboto',
 };
 
-const BarGraph = (props) => {
+const BarGraph = props => {
   const [{ tabs, currentTab }, dispatch] = useStoreContext();
   const { width, height, data } = props;
   const {
@@ -78,8 +79,8 @@ const BarGraph = (props) => {
 
   // data accessor (used to generate scales) and formatter (add units for on hover box)
   const getSnapshotId = (d: snapshot) => d.snapshotId;
-  const formatSnapshotId = (id) => `Snapshot ID: ${id}`;
-  const formatRenderTime = (time) => `${time} ms `;
+  const formatSnapshotId = id => `Snapshot ID: ${id}`;
+  const formatRenderTime = time => `${time} ms `;
 
   // create visualization SCALES with cleaned data
   const snapshotIdScale = scaleBand<string>({
@@ -105,7 +106,7 @@ const BarGraph = (props) => {
 
   const toStorage = {
     currentTab,
-    title: tabs[currentTab]['title'],
+    title: tabs[currentTab].title,
     data,
   };
 
@@ -119,14 +120,14 @@ const BarGraph = (props) => {
       } else {
         saveButtons[i].innerHTML = 'Save Series';
         saveButtons[i].classList.remove('animate');
-      };
-    };
+      }
+    }
   });
   return (
-    <div className='bargraph-position'>
+    <div className="bargraph-position">
       <button
-        className='save-series-button'
-        onClick={(e) => {
+        className="save-series-button"
+        onClick={e => {
           dispatch(save(toStorage));
         }}
       >
@@ -149,7 +150,7 @@ const BarGraph = (props) => {
           yScale={renderingScale}
           width={xMax}
           height={yMax}
-          stroke='black'
+          stroke="black"
           strokeOpacity={0.1}
           xOffset={snapshotIdScale.bandwidth() / 2}
         />
@@ -162,48 +163,44 @@ const BarGraph = (props) => {
             yScale={renderingScale}
             color={colorScale}
           >
-            {(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;
-                  }
-                  return (
-                    <rect
-                      key={`bar-stack-${barStack.id}-${bar.id}`}
-                      x={bar.x}
-                      y={bar.y}
-                      height={bar.height === 0 ? null : bar.height}
-                      width={bar.width}
-                      fill={bar.color}
+            {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;
+              }
+              return (
+                <rect
+                  key={`bar-stack-${barStack.id}-${bar.id}`}
+                  x={bar.x}
+                  y={bar.y}
+                  height={bar.height === 0 ? null : bar.height}
+                  width={bar.width}
+                  fill={bar.color}
                       /* 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))
-                        );
-                      }}
+                  onMouseLeave={() => {
+                    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));
-                        if (tooltipTimeout) clearTimeout(tooltipTimeout);
-                        const top = event.clientY - margin.top - bar.height;
-                        const left = bar.x + bar.width / 2;
-                        showTooltip({
-                          tooltipData: bar,
-                          tooltipTop: top,
-                          tooltipLeft: left,
-                        });
-                      }}
-                    />
-                  );
-                })
-              )
-            }
+                  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;
+                    showTooltip({
+                      tooltipData: bar,
+                      tooltipTop: top,
+                      tooltipLeft: left,
+                    });
+                  }}
+                />
+              );
+            }))}
           </BarStack>
         </Group>
         <AxisLeft
@@ -235,15 +232,15 @@ 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)
         </Text>
         <br />
-        <Text x={xMax / 2 + 15} y={yMax + 70} fontSize={12} fill='#FFFFFF'>
+        <Text x={xMax / 2 + 15} y={yMax + 70} fontSize={12} fill="#FFFFFF">
           Snapshot ID
         </Text>
       </svg>
@@ -257,10 +254,15 @@ const BarGraph = (props) => {
         >
           <div style={{ color: colorScale(tooltipData.key) }}>
             {' '}
-            <strong>{tooltipData.key}</strong>{' '}
+            <strong>{tooltipData.key}</strong>
+            {' '}
           </div>
           <div>{data.componentData[tooltipData.key].stateType}</div>
-          <div> {formatRenderTime(tooltipData.bar.data[tooltipData.key])} </div>
+          <div>
+            {' '}
+            {formatRenderTime(tooltipData.bar.data[tooltipData.key])}
+            {' '}
+          </div>
           <div>
             {' '}
             <small>

src/app/components/BarGraphComparisonTEST.tsx

@@ -332,8 +332,7 @@ const BarGraphComparison = props => {
               // height/width/etc. are calculated by visx.
               // to set X and Y scale, it  will used the passed in function and
               // will run it on the array thats outputted by data
-              // console.log("barStack.bars:",barStack.bars)
-              const bar = barStack.bars[currentIndex];
+              const bar = barStack.bars[currentIndex]
               if (Number.isNaN(bar.bar[1]) || bar.height < 0) {
                 bar.height = 0;
               }