Merge branch 'dev' into feature/garrett

Author: garrettlchow

src/app/components/StateRoute/AxMap/Ax.tsx

@@ -77,7 +77,7 @@ export default function AxTree(props) {
 
   const [orientation, setOrientation] = useState('horizontal');
   const [linkType, setLinkType] = useState('diagonal');
-  const [stepPercent, setStepPercent] = useState(0.5);
+  const [stepPercent, setStepPercent] = useState(0.0);
 
   const innerWidth: number = totalWidth - margin.left - margin.right;
   const innerHeight: number = totalHeight - margin.top - margin.bottom - 60;

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

@@ -58,8 +58,8 @@ export default function ComponentMap({
   currentSnapshot, // from 'tabs[currentTab].stateSnapshot object in 'MainContainer'
 }: LinkTypesProps): JSX.Element {
   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(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 [linkType, setLinkType] = useState('step'); // We create a local state "linkType" and set it to a string 'step'.
+  const [stepPercent, setStepPercent] = useState(0.0); // We create a local state "stepPercent" and set it to a number '0.0'. This will be used to scale the Map component's link: Step to 0%
   const [selectedNode, setSelectedNode] = useState('root'); // We create a local state "selectedNode" and set it to a string 'root'.
   const dispatch = useDispatch();
 
@@ -82,7 +82,6 @@ export default function ComponentMap({
     The default view sets the root nodes location either in the left middle *or top middle of the browser window relative to the size of the browser.
   */
 
-
   origin = { x: 0, y: 0 };
   if (orientation === 'vertical') {
     sizeWidth = innerWidth;
@@ -92,7 +91,7 @@ export default function ComponentMap({
     sizeWidth = innerHeight;
     sizeHeight = innerWidth;
   }
-//}
+  //}
   const {
     tooltipData, // value/data that tooltip may need to render
     tooltipLeft, // number used for tooltip positioning

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

@@ -71,8 +71,8 @@ export default function LinkControls({
         onChange={(e) => setLinkType(e.target.value)}
         style={dropDownStyle}
       >
-        <option value='diagonal'>Diagonal</option>
         <option value='step'>Step</option>
+        <option value='diagonal'>Diagonal</option>
         <option value='line'>Line</option>
       </select>
       <label> Select:</label> {/* Controls for the select selections. */}

src/extension/background.js

@@ -348,14 +348,18 @@ chrome.runtime.onConnect.addListener(async (port) => {
         portsArr.splice(i, 1);
         setTimeout(async () => {
           try {
-            const response = await chrome.runtime.sendMessage({
-              action: 'attemptReconnect',
-            });
-            if (response && response.success) {
+            const newPort = chrome.runtime.connect({ name: 'reconnected' }); // Attempt to reconnect
+            if (newPort) {
+              portsArr.push(newPort); // Add the new port to the array
+              newPort.onMessage.addListener((msg) => {
+                console.log('Message received on reconnected port:', msg);
+              });
               console.log('Port successfully reconnected');
+            } else {
+              console.warn('Failed to reconnect port');
             }
           } catch (error) {
-            console.warn('Port reconnection failed:', error);
+            console.warn('Port reconnection attempt failed:', error);
           }
         }, 1000);
         break;

src/extension/contentScript.ts

@@ -2,6 +2,21 @@
 // in Web Metrics tab of Reactime app.
 import { onTTFB, onLCP, onFID, onFCP, onCLS, onINP } from 'web-vitals';
 
+function establishConnection() {
+  const port = chrome.runtime.connect({ name: 'content-script' }); // Reconnect
+  port.onMessage.addListener((msg) => {
+    console.log('Received message from background:', msg);
+  });
+
+  port.onDisconnect.addListener(() => {
+    console.warn('Port disconnected, attempting to reconnect...');
+    setTimeout(establishConnection, 1000); // Retry after 1 second
+  });
+}
+
+// Initially establish connection
+establishConnection();
+
 // Reactime application starts off with this file, and will send
 // first message to background.js for initial tabs object set up.
 // A "tabs object" holds the information of the current tab,