fixed Map => Link => Step

Author: EivindDelFierro

src/app/components/StateRoute/ComponentMap/ComponentMap.tsx

@@ -39,7 +39,7 @@ export default function ComponentMap({
   const [layout, setLayout] = useState('cartesian'); // We create a local state "layout" and set it to a string 'cartesian'
   const [orientation, setOrientation] = useState('vertical'); // We create a local state "orientation" and set it to a string 'vertical'. 
   const [linkType, setLinkType] = useState('diagonal'); // We create a local state "linkType" and set it to a string 'diagonal'. 
-  const [stepPercent, setStepPercent] = useState(10); // We create a local state "stepPercent" and set it to a number '10'.
+  const [stepPercent, setStepPercent] = useState(0.5); // We create a local state "stepPercent" and set it to a number '0.5'. This will be used to scale the Map component's link: Step to 50%
   const [selectedNode, setSelectedNode] = useState('root'); // We create a local state "selectedNode" and set it to a string 'root'. 
   const [, dispatch] = useStoreContext(); // we destructure the returned context object from the invocation of the useStoreContext function to get access to our dispatch function
 

src/app/components/StateRoute/ComponentMap/LinkControls.tsx

@@ -38,7 +38,7 @@ const collectNodes = (node: Node): void => {
 export default function LinkControls({
   layout, // from the layout local state (initially 'cartesian') in 'ComponentMap'
   linkType, // from linkType local state (initially 'vertical') in 'ComponentMap'
-  stepPercent, // from stepPercent local state (initially '10') in 'ComponentMap'
+  stepPercent, // from stepPercent local state (initially '0.5') in 'ComponentMap'
   setLayout, // from the layout local state in 'ComponentMap'
   setOrientation, // from the orientation local state in 'ComponentMap'
   setLinkType, // from the linkType local state in 'ComponentMap'
@@ -63,7 +63,8 @@ export default function LinkControls({
       </select>
       &nbsp;&nbsp;
 
-      <label>Orientation:</label> {/* Controls for the Orientation selection, this dropdown will be disabled when the polar layout is selected as it is not needed */}
+      <label>Orientation:</label> {/* Toggle record button to pause state changes on target application */}
+      {/* Controls for the Orientation selection, this dropdown will be disabled when the polar layout is selected as it is not needed */}
       &nbsp;
       <select
         onClick={(e) => e.stopPropagation()}

src/app/components/StateRoute/PerformanceVisx/BarGraphComparison.tsx

@@ -135,15 +135,16 @@ const BarGraphComparison = (props: BarGraphComparisonProps): JSX.Element => {
 
   const StyledFormControl = styled(FormControl)(({ theme }) => ({ // applies the theme style to the FormControl component
     margin: theme.spacing(1),
-    minWidth: 80,
+    minWidth: 160,
     height: 30,
   }));
 
   const StyledSelect = styled(Select)({ // applies the object to customize the style of the 'Select' component
     minWidth: 80,
-    fontSize: '.75rem',
+    fontSize: '1.2rem',
     fontWeight: 200,
     height: 30,
+    border: '1px solid #da262c',
   });
 
   const handleSeriesChange = (event: Event) => {

src/app/containers/MainContainer.tsx

@@ -51,7 +51,7 @@ function MainContainer(): JSX.Element {
     // chrome.runtime allows our application to retrieve our service worker (our eventual bundles/background.bundle.js after running npm run build), details about the manifest, and allows us to listen and respond to events in our application lifecycle.
     const currentPort = chrome.runtime.connect(); // we connect to our service worker
 
-    setInterval(() => { // interval to keep connection to background.js alive
+    const keepAliveMainContainer = setInterval(() => { // interval to keep connection to background.js alive
     currentPort.postMessage({
       action: 'keepAlive' // messages sent to port to keep connection alive
     })
@@ -109,7 +109,7 @@ function MainContainer(): JSX.Element {
     );
 
     currentPort.onDisconnect.addListener(() => { // used to track when the above connection closes unexpectedly. Remember that it should persist throughout the application lifecycle
-      console.log('this port is disconnecting line 53');
+      console.log('this port is disconnecting line 52');
     });
 
     dispatch(setPort(currentPort)); // assign port to state so it could be used by other components

src/extension/background.js

@@ -168,7 +168,7 @@ chrome.runtime.onConnect.addListener((port) => {
         action: 'changeTab',
         payload: { tabId: activeTab.id, title: activeTab.title },
       })
-      setInterval(() => { // interval used to keep connection to MainContainer alive
+    const keepAliveServiceWorker = setInterval(() => { // interval used to keep connection to MainContainer alive
         bg.postMessage({
           action: 'keepAlive' // messages sent to port to keep connection alive
         })

src/extension/contentScript.ts

@@ -19,7 +19,7 @@ window.addEventListener('message', (msg) => {
     // One-time request tells the background script that the tab has reloaded.
     chrome.runtime.sendMessage({ action: 'tabReload' });
     firstMessage = false;
-    setInterval(() => { // interval to keep connection to service worker connection alive
+    const keepAliveContentScript = setInterval(() => { // interval to keep connection to service worker connection alive
       chrome.runtime.sendMessage({
         action: 'keepAlive' // messages sent to port to keep connection alive
       })