Merge pull request #34 from oslabs-beta/rui/component-tree-page

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"