(updated) performance component

Author: Theqwertypusher

src/app/components/PerfView.tsx

@@ -32,12 +32,13 @@ interface PerfViewProps {
 
 const PerfView = (props: PerfViewProps) => {
 
-
-  /* // ------------- CIRCLES ----------------------
+  // ------------- CIRCLES ----------------------
   const { viewIndex, width, height, setNoRenderData } = props;
   let { snapshots } = props;
   const adjustedSize = Math.min(width, height);
   const svgRef = useRef(null);
+
+  console.log(snapshots)
 
   let indexToDisplay: number | null = null;
   if (viewIndex < 0) indexToDisplay = snapshots.length - 1;
@@ -231,7 +232,7 @@ const PerfView = (props: PerfViewProps) => {
     handleNoRenderData,
   ]);
 
-  // ------------- CIRCLES ---------------------- */
+  // ------------- CIRCLES ----------------------
 
 
   return (

src/app/components/PerformanceVisx.tsx

@@ -92,7 +92,7 @@ const colorScale = scaleOrdinal<CityName, string>({
 let tooltipTimeout: number;
 
 /* EXPORT COMPONENT */
-export default function Example({
+export default function PerformanceVisx({
   width,
   height,
   events = false,
@@ -111,6 +111,8 @@ export default function Example({
 
   if (width < 10) return null;
   // bounds
+
+//   width, height
   const xMax = width;
   const yMax = height - margin.top - 100;
 

src/app/components/StateRoute.tsx

@@ -15,6 +15,10 @@ import Tree from './Tree';
 import ComponentMap from './ComponentMap';
 import PerfView from './PerfView';
 import AtomsRelationship from './AtomsRelationship.jsx';
+import PerformanceVisx from './PerformanceVisx.jsx';
+import ParentSize from '@visx/responsive/lib/components/ParentSize';
+
+
 
 const History = require('./History').default;
 
@@ -95,6 +99,9 @@ const StateRoute = (props: StateRouteProps) => {
   const renderPerfView = () => {
     if (hierarchy) {
       return (
+
+        // <PerformanceVisx width={600} height={1000} />
+      
         <PerfView
           viewIndex={viewIndex}
           snapshots={snapshots}