adjust component tree

extension/src/components/Tree.tsx

@@ -1,37 +1,41 @@
-import React, { useCallback, useState, useEffect } from "react";
-import Tree from "react-d3-tree";
-import "../css/styles.css";
-import DownloadIcon from "@mui/icons-material/Download";
+import React, { useCallback, useState, useEffect } from 'react';
+import Tree from 'react-d3-tree';
+import '../css/styles.css';
+import DownloadIcon from '@mui/icons-material/Download';
 import IconButton from '@mui/material/IconButton';
 import {
   customStringify,
   sendData,
   saveJSON,
-} from "../functions/treeHelperFuncs";
+} from '../functions/treeHelperFuncs';
 
 interface ComponentTreeProps {
   fiberTree: any; // Replace 'any' with the actual type of fiberTree
 }
 
 // set up a centered tree visualization
 function ComponentTree({ fiberTree }: ComponentTreeProps) {
-  const useCenteredTree = (defaultTranslate: { x: number; y: number } = { x: 0, y: 0 }) => {
+  const useCenteredTree = (
+    defaultTranslate: { x: number; y: number } = { x: 0, y: 0 }
+  ) => {
     const [translate, setTranslate] = useState(defaultTranslate);
-    const [dimensions, setDimensions] = useState<{ width: number; height: number } | undefined>();
-
+    const [dimensions, setDimensions] = useState<
+      { width: number; height: number } | undefined
+    >();
+
     const containerRef = useCallback((containerElem: HTMLDivElement | null) => {
       if (containerElem !== null) {
         const { width, height } = containerElem.getBoundingClientRect();
         setDimensions({ width, height });
         setTranslate({ x: width / 2, y: height / 12 });
       }
     }, []);
-    
+
     return [dimensions, translate, containerRef] as const;
   };
 
   const [dimensions, translate, containerRef] = useCenteredTree();
-  const [recButton, setRecButton] = useState<string>("START PROFILING");
+  const [recButton, setRecButton] = useState<string>('START PROFILING');
   const [idk, setIdk] = useState<any[]>([]);
   //state for navigating between tree and charts
   //const [view, setView] = useState<string>("treeView");
@@ -50,55 +54,61 @@ function ComponentTree({ fiberTree }: ComponentTreeProps) {
     });
   }
 
-   //update recButton according to recStat
-   useEffect(() => {
+  //update recButton according to recStat
+  useEffect(() => {
     if (!recStat) {
-      setRecButton("Start profiling");
+      setRecButton('Start profiling');
       sendMessageToContentScript({
         message: `Hello from popup! ${idk.length}`,
       });
       setChartData([...idk]);
     } else {
-      setRecButton("Stop profiling");
+      setRecButton('Stop profiling');
       sendMessageToContentScript({
         message: `Hello from popup! ${idk.length}`,
       });
     }
   }, [recStat]);
 
   const stringifiedResult = customStringify(fiberTree);
-  
+
   return (
     <>
       {fiberTree ? (
-        <div style={{ width: "100vw", height: "100vh" }}>
-          <IconButton aria-label="delete" onClick={() => saveJSON(fiberTree, "parseTreeData")}>
-        <DownloadIcon />
-      </IconButton>
+        <div style={{ width: '100%', height: '100%' }}>
+          <IconButton
+            aria-label='delete'
+            onClick={() => saveJSON(fiberTree, 'parseTreeData')}
+          >
+            <DownloadIcon />
+          </IconButton>
           <div
-            id="treeWrapper"
+            id='treeWrapper'
             style={{
-              width: "100%",
-              height: "100%",
+              width: '100%',
+              height: '100%',
             }}
             ref={containerRef}
           >
             <Tree
               data={fiberTree}
-              orientation="vertical"
-              rootNodeClassName="node__root"
-              branchNodeClassName="node__branch"
-              leafNodeClassName="node__leaf"
+              orientation='vertical'
+              rootNodeClassName='node__root'
+              branchNodeClassName='node__branch'
+              leafNodeClassName='node__leaf'
               enableLegacyTransitions
               translate={translate}
             />
           </div>
         </div>
       ) : (
-        <p>COMPONENT TREE - if your component tree isn't rendering, make sure you have React DevTools installed and try again!</p>
+        <p>
+          COMPONENT TREE - if your component tree isn't rendering, make sure you
+          have React DevTools installed and try again!
+        </p>
       )}
     </>
   );
 }
 
-export default ComponentTree;
+export default ComponentTree;

extension/src/containers/MetricsTab.tsx

@@ -64,16 +64,14 @@ const MetricsTab = ({ queryEvents }: BasicTabsProps) => {
   }, [recStat]);
 
   return (
-    <Box sx={{ display: 'flex', flexDirection: 'column', width: '100%', marginTop: '1rem' }}>
-      <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+    <Box sx={{ display: 'flex', flexDirection: 'column', width: '100%', height: '100%', marginTop: '1rem' }}>
         <ProfilingToggle onClick={() => setStatus()}>
           {recButton}
         </ProfilingToggle>
         <div className='ct'></div>
         {view === 'treeView' && (
           <ComponentTree fiberTree={idk[idk.length - 1]} />
         )}
-      </div>
     </Box>
   );
 };

package/examples/example-2/package.json

@@ -13,5 +13,8 @@
   "license": "ISC",
   "devDependencies": {
     "npm-run-all": "^4.1.5"
+  },
+  "dependencies": {
+    "react-query-rewind": "^1.0.1"
   }
 }

package/examples/example-2/server/models/postsOne.json

@@ -2,7 +2,7 @@
   "posts": [
     {
       "text": "hi",
-      "liked": true,
+      "liked": false,
       "comments": [
         "new",
         "hello"