Merge branch 'reactime7' of https://github.com/caitlinchan23/reactime into reactime7

Author: Nkmai

src/app/components/LinkControls.tsx

@@ -7,7 +7,7 @@ const controlStyles = {
 };
 
 const dropDownStyle = {
-  margin: '0.5em',
+	margin: '0.5em',
   fontSize: '12px',
   borderRadius: '4px', 
   backgroundColor: 'rgb(231, 231, 231)'

src/app/components/PerformanceVisx.tsx

@@ -217,7 +217,7 @@ const PerformanceVisx = (props: BarStackProps) => {
                     key={`bar-stack-${barStack.index}-${bar.index}`}
                     x={bar.x}
                     y={bar.y}
-                    height={bar.height === 0 ? idx + 1 : bar.height}
+                    height={bar.height === 0 ? null : bar.height}
                     width={bar.width}
                     fill={bar.color}
                     /* TIP TOOL EVENT HANDLERS */

src/app/components/SwitchApp.tsx

@@ -18,11 +18,21 @@ const SwitchAppDropdown = () => {
     label: tabs[currentTab].title,
   };
 
+  const customStyles = {
+    menu: (provided, state) => {
+      const outline = state.isSelected ? 'transparent' : 'transparent';
+      const margin = 0;
+
+      return {...provided, outline, margin};
+    }
+  }
+
   return (
     <Select
       className="tab-select-container"
       classNamePrefix="tab-select"
       value={currTab}
+      styles={customStyles}
       onChange={e => {
         dispatch(setTab(parseInt(e.value, 10)));
       }}

src/app/containers/ButtonsContainer.tsx

@@ -55,7 +55,7 @@ function ButtonsContainer() {
   const [{ tabs, currentTab }, dispatch] = useStoreContext();
   const {
     snapshots,
-    mode: { paused, locked, persist },
+    mode: { paused, persist },
   } = tabs[currentTab];
 
   return (
@@ -68,13 +68,6 @@ function ButtonsContainer() {
         {paused? <FontAwesomeIcon icon={faUnlock} /> : <FontAwesomeIcon icon={faLock} />}
 				{paused ? 'Unlock' : 'Lock'}
 			</button>
-			{/* <button
-				className="lock-button"
-				type="button"
-				onClick={() => dispatch(toggleMode('locked'))}
-			>
-				{locked ? 'Unlocked': 'Locked'}
-			</button> */}
 			<button
 				className="persist-button"
 				type="button"

src/app/reducers/mainReducer.js

@@ -185,9 +185,6 @@ export default (state, action) => produce(state, draft => {
         case 'paused':
           actionText = 'setPause';
           break;
-        case 'locked':
-          actionText = 'setLock';
-          break;
         case 'persist':
           actionText = 'setPersist';
           break;

src/app/styles/components/_buttons.scss

@@ -14,11 +14,10 @@
 	font: 300 14px 'Roboto', sans-serif;
 	font-size: $button-text-size;
 	width: 120px;
-	background-color: transparent;
+	background: linear-gradient(145deg, #ff6569, #e65558);
 }
 .empty-button:hover {
 	color: black;
-	background: linear-gradient(145deg, #ff6569, #e65558);
 	box-shadow: inset 5px 5px 10px #d95053, inset -5px -5px 10px #ff6c71;
 }
 
@@ -128,7 +127,6 @@
 .import-button,
 .howToUse-button,
 .export-button,
-.lock-button,
 .pause-button,
 .persist-button {
 	@extend %button-shared;
@@ -139,7 +137,6 @@
 .import-button:hover,
 .howToUse-button:hover,
 .export-button:hover,
-.lock-button:hover,
 .pause-button:hover,
 .persist-button:hover {
 	@extend %button-shared;

src/backend/__tests__/linkFiber.test.tsx

@@ -69,7 +69,6 @@ describe('unit test for linkFiber', () => {
     mode = {
       jumping: false,
       paused: false,
-      locked: false,
     };
     linkFiber = linkFiberStart(snapShot, mode);
 

src/backend/index.ts

@@ -24,7 +24,6 @@ const snapShot: Snapshot = {
 const mode: Mode = {
   jumping: false,
   paused: false,
-  locked: false,
 };
 // console.log("linkFiberStart in index.ts:" + linkFiberStart);
 const linkFiber = linkFiberStart(snapShot, mode);
@@ -54,9 +53,6 @@ window.addEventListener('message', ({ data: { action, payload } }: MsgData) => {
       // try to modify workInProgress tree from here
       // window.history.pushState('', '', getRouteURL(payload));
       break;
-    case 'setLock':
-      mode.locked = payload;
-      break;
     case 'setPause':
       mode.paused = payload;
       break;
@@ -72,7 +68,7 @@ window.addEventListener('message', ({ data: { action, payload } }: MsgData) => {
              }
         }
       } else {
-        let element = document.querySelector(`.${payload}`);
+        let element: HTMLElement = document.querySelector(`.${payload}`);
         // console.log("element: ", element);
         if (element !== null) {
           // console.log("element style: ", element.style)
@@ -83,13 +79,13 @@ window.addEventListener('message', ({ data: { action, payload } }: MsgData) => {
     case 'onHoverExit': 
         if(Array.isArray(payload)){ 
         for (let i=0; i<payload.length;i++){
-          let element = document.querySelector(`.${payload}`);
+          let element: HTMLElement = document.querySelector(`.${payload}`);
           if (element !== null) {
             element.style.backgroundColor = ''; 
           }
         }
       } else {
-        let element = document.querySelector(`.${payload}`);
+        let element: HTMLElement = document.querySelector(`.${payload}`);
         // console.log("element style: ", element.style)
         if (element !== null) {
           element.style.backgroundColor = ''; 

src/backend/linkFiber.ts

@@ -14,7 +14,7 @@ import {
 
   //tree
   Snapshot,
-  //jump, pause, lock
+  //jump, pause
   Mode,
   ComponentData,
   // array of state and component
@@ -75,7 +75,7 @@ function getRecoilState(): any {
 /**
  * @method sendSnapshot
  * @param snap The current snapshot
- * @param mode The current mode (i.e. jumping, time-traveling, locked, or paused)
+ * @param mode The current mode (i.e. jumping, time-traveling, or paused)
  * @return Nothing.
  *
  * Middleware: Gets a copy of the current snap.tree and posts a recordSnap message to the window
@@ -109,11 +109,11 @@ function sendSnapshot(snap: Snapshot, mode: Mode): void {
 /**
  * @function updateSnapShotTree
  * @param snap The current snapshot
- * @param mode The current mode (i.e. jumping, time-traveling, locked, or paused)
+ * @param mode The current mode (i.e. jumping, time-traveling, or paused)
  * Middleware: Updates snap object with latest snapshot, using @sendSnapshot
  */
 
- //updating tree depending on current mode on the panel (pause, locked etc) 
+ //updating tree depending on current mode on the panel (pause, etc) 
 function updateSnapShotTree(snap: Snapshot, mode: Mode): void {
   // this is the currently active root fiber(the mutable root of the tree)
 
@@ -486,7 +486,7 @@ function createTree(
 /**
  * @method linkFiber
  * @param snap The current snapshot
- * @param mode The current mode (i.e. jumping, time-traveling, locked, or paused)
+ * @param mode The current mode (i.e. jumping, time-traveling, or paused)
  * @return a function to be invoked by index.js that initiates snapshot monitoring
  * linkFiber contains core module functionality, exported as an anonymous function.
  */

src/backend/timeJump.ts

@@ -8,7 +8,7 @@ import { Console } from 'console';
  * It exports an anonymous
  * @function timeJump
  * @param origin The latest snapshot, linked to the fiber (changes to origin will change app)
- * @param mode The current mode (i.e. jumping, time-traveling, locked, or paused)
+ * @param mode The current mode (i.e. jumping, time-traveling, or paused)
  * @returns A function that takes a target snapshot and a boolean flag checking for firstCall, then invokes `jump` on that target snapshot
  *
  * The target snapshot portrays some past state we want to travel to.