Troubleshooting Link Fiber

Author: DennisLpz

src/app/components/BarGraph.tsx

@@ -12,6 +12,7 @@ import { schemeSet3 } from 'd3-scale-chromatic';
 import snapshots from './snapshots';
 import { onHover, onHoverExit } from '../actions/actions';
 import { useStoreContext } from '../store';
+import { save } from '../actions/actions';
 
 /* TYPESCRIPT */
 interface data {
@@ -102,8 +103,35 @@ const BarGraph = (props) => {
   const yMax = height - margin.top - 150;
   snapshotIdScale.rangeRound([0, xMax]);
   renderingScale.range([yMax, 0]);
+
+   const toStorage = {
+    currentTab,
+    title: tabs[currentTab]['title'],
+    data,
+   };
+  
+  const animateButton = function (e) {
+    e.preventDefault;
+    e.target.classList.add('animate');
+    e.target.innerHTML = 'Saved!';
+    setTimeout(function () {
+      e.target.innerHTML = 'Save Series';
+      e.target.classList.remove('animate');
+    }, 1000);
+  };
+  const classname = document.getElementsByClassName('save-series-button');
+  for (let i = 0; i < classname.length; i++) {
+    classname[i].addEventListener('click', animateButton, false);
+  }
   return (
     <div>
+      <button
+          className='save-series-button'
+      onClick={(e) => {
+        dispatch(save(toStorage))
+      }}>
+          Save Series
+      </button>
       <svg ref={containerRef} width={width} height={height}>
         {}
         <rect
@@ -177,6 +205,8 @@ const BarGraph = (props) => {
               )
             }
           </BarStack>
+
+
         </Group>
         <AxisLeft
           top={margin.top}

src/app/components/BarGraphComparison.tsx

@@ -19,7 +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';
+// import { save } from '../actions/actions';
 /* TYPESCRIPT */
 interface data {
   snapshotId?: string;
@@ -178,13 +178,7 @@ const BarGraphComparison = (props) => {
     setXpoints();
   };
 
-  const toStorage = {
-    currentTab,
-    title: tabs[currentTab]['title'],
-    data,
-  };
-
-  //manually assignin X -axis points with current Tab keys.
+  //manually assignin X -axis points with tab ID.
   function setXpointsComparison() {
     comparison[series].data.barStack.forEach((elem) => {
       elem.currentTab = 'comparison';
@@ -231,13 +225,6 @@ const BarGraphComparison = (props) => {
               )}
             </Select>
           </FormControl>
-
-          <button
-            className='save-series-button'
-            onClick={() => dispatch(save(toStorage))}
-          >
-            Save Series
-          </button>
         </div>
       </div>
 

src/app/containers/MainContainer.tsx

@@ -13,6 +13,7 @@ import {
 } from '../actions/actions';
 import { useStoreContext } from '../store';
 import MPID from '../user_id/user_id';
+import { useState } from 'react';
 
 const mixpanel = require('mixpanel').init('12fa2800ccbf44a5c36c37bc9776e4c0', {
   debug: false,
@@ -22,6 +23,7 @@ const mixpanel = require('mixpanel').init('12fa2800ccbf44a5c36c37bc9776e4c0', {
 function MainContainer(): any {
   const [store, dispatch] = useStoreContext();
   const { tabs, currentTab, port: currentPort } = store;
+  ///const [sideBarView , setSideBar] = useState();
   // add event listeners to background script
   useEffect(() => {
     // only open port once
@@ -114,12 +116,12 @@ function MainContainer(): any {
 
   if (!tabs[currentTab]) {
     return (
-      <div className="error-container">
-        <img src="../assets/logo-no-version.png" height="50px" />
+      <div className='error-container'>
+        <img src='../assets/logo-no-version.png' height='50px' />
         <a
-          href="https://reactime.io/"
-          target="_blank"
-          rel="noopener noreferrer"
+          href='https://reactime.io/'
+          target='_blank'
+          rel='noopener noreferrer'
         >
           No React application found. Please visit reactime.io to more info.
         </a>
@@ -175,10 +177,31 @@ function MainContainer(): any {
   };
   const snapshotDisplay = statelessCleaning(snapshotView);
   const hierarchyDisplay = statelessCleaning(hierarchy);
+  const bodyGrid = document.getElementsByClassName('body-container');
+  let sidebarView = false;
+  const hideJumpSidebar = (e) => {
+    console.log('jump side bar func worked!', e);
+    if (!sidebarView) {
+      e.preventDefault();
+      for (let i = 0; i < bodyGrid.length; i += 1) {
+        bodyGrid[i].classList.add('expand');
+      }
+      sidebarView = true;
+      console.log('if condition worked!');
+    } else {
+      e.preventDefault();
+      for (let i = 0; i < bodyGrid.length; i += 1) {
+        bodyGrid[i].classList.remove('expand');
+      }
+      sidebarView = false;
+      console.log('else condition worked!');
+    }
+  };
+
   return (
-    <div className="main-container">
+    <div className='main-container'>
       <HeadContainer />
-      <div className="body-container">
+      <div id='body-grid' className='body-container'>
         <ActionContainer />
         {snapshots.length ? (
           <StateContainer
@@ -190,6 +213,9 @@ function MainContainer(): any {
         ) : null}
         <TravelContainer snapshotsLength={snapshots.length} />
         <ButtonsContainer />
+        {/* <button className='show-sidebar' onClick={(e) => hideJumpSidebar(e)}>
+          See Jump Functionality
+        </button> */}
       </div>
     </div>
   );

src/app/styles/components/_buttons.scss

@@ -16,9 +16,13 @@
   width: 120px;
   background: $red-color-gradient;
   height: 30px;
-}
-.save-series-button:hover {
-  box-shadow: $box-shadow-red;
+  position: absolute;
+  right: 2.5rem;
+
+   &.animate {
+    background: rgb(41, 164, 41);
+  }
+
 }
 
 .empty-button {

src/app/styles/layout/_bodyContainer.scss

@@ -1,24 +1,30 @@
 .body-container {
-	height: 94%;
-	overflow: hidden;
-	display: grid;
-	grid-template-columns: 1fr 2fr;
-	grid-template-rows: 8fr 1fr;
-	grid-template-areas:
-		'actions states'
-		'travel travel'
-		'buttons buttons';
+  height: 94%;
+  overflow: hidden;
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+  grid-template-rows: 8fr 1fr;
+  grid-template-areas:
+    'states states'
+    'travel travel'
+    'buttons buttons';
+  &.expand {
+    grid-template-areas:
+      'actions states'
+      'travel travel'
+      'buttons buttons';
+  }
 }
 
 /* if extension width is less than 500px, stack the body containers */
 @media (max-width: 500px) {
-	.body-container {
-		grid-template-rows: 3fr 5fr 1fr;
-		grid-template-columns: auto;
-		grid-template-areas:
-			'actions'
-			'states'
-			'travel'
-			'buttons';
-	}
+  .body-container {
+    grid-template-rows: 3fr 5fr 1fr;
+    grid-template-columns: auto;
+    grid-template-areas:
+      'actions'
+      'states'
+      'travel'
+      'buttons';
+  }
 }