Merge pull request #86 from oslabs-beta/staging

Staging

Author: crperezt

.gitmodules

@@ -31,6 +31,7 @@ interface PerfViewProps {
 
 const PerfView = (props:PerfViewProps) => {
   const { snapshots, viewIndex, width, height } = props
+  let adjustedSize = Math.min(width, height);
   const svgRef = useRef(null);
 
   // Figure out which snapshot index to use
@@ -41,19 +42,18 @@ const PerfView = (props:PerfViewProps) => {
   // Set up color scaling function
   const colorScale = d3.scaleLinear()
     .domain([0, 7])
-    .range(['hsl(200,60%,60%)', 'hsl(255,30%,30%)'])
-    // .range(['hsl(152,30%,80%)', 'hsl(228,30%,40%)'])
+    .range(['hsl(200,60%,60%)', 'hsl(255,30%,60%)'])
     .interpolate(d3.interpolateHcl);
 
   // Set up circle-packing layout function
   const packFunc = useCallback((data:object) => {
     return d3.pack()
-    .size([width, height])
+    .size([adjustedSize, adjustedSize])
     // .radius(d => { return d.r; })
     .padding(3)(d3.hierarchy(data)
                     .sum((d:{componentData?:{actualDuration?:number}}) => { return d.componentData.actualDuration || 0; })
                     .sort((a:{value:number}, b:{value:number}) => { return b.value - a.value; }));
-  }, [width, height]);
+  }, [adjustedSize]);
 
   // If indexToDisplay changes, clear old tree nodes
   useEffect(() => {
@@ -79,8 +79,12 @@ const PerfView = (props:PerfViewProps) => {
     let view;
 
     // Set up viewBox dimensions and onClick for parent svg
+ 
+    // console.log("PerfView -> height", height)
+    // console.log("PerfView -> width", width)
+    // console.log("PerfView -> adjustedSize", adjustedSize)
     const svg = d3.select(svgRef.current)
-      .attr('viewBox', `-${width / 2} -${height / 2} ${width} ${height}`)
+      .attr('viewBox', `-${adjustedSize / 2} -${adjustedSize / 2} ${width} ${height}`)
       .on('click', () => zoomToNode(packedRoot));
 
     // Connect circles below root to data

src/app/components/PerfView.tsx

@@ -42,7 +42,7 @@ const StateRoute = (props:StateRouteProps) => {
     if (hierarchy) {
       return (
         <ErrorHandler>
-          <PerfView viewIndex={viewIndex} snapshots={snapshots} width={600} height={600}/>
+          <PerfView viewIndex={viewIndex} snapshots={snapshots} width={600} height={1000}/>
         </ErrorHandler>
       );
     }

src/app/components/StateRoute.tsx

@@ -1,18 +1,11 @@
 import React from 'react';
 import JSONTree from 'react-json-tree';
 
-
 const getItemString = (type, data:{state?:object|string, name:string, children:[]}) => {
-  // check to make sure that we are on the tree node, not anything else
-  if (
-    Object.keys(data).length > 3
-    && typeof data.state === 'object'
-    && typeof data.name === 'string'
-    && Array.isArray(data.children)
-  ) {
+  if (data && data.name) {
     return <span>{data.name}</span>;
   }
-  return null;
+  return <span />;
 };
 
 interface TreeProps {
@@ -22,6 +15,8 @@ interface TreeProps {
 const Tree = (props:TreeProps) => {
   const { snapshot } = props;
 
+  console.log('Tree -> snapshot', snapshot);
+
   return (
     <>
       {snapshot && (
@@ -30,7 +25,9 @@ const Tree = (props:TreeProps) => {
           theme={{ tree: () => ({ className: 'json-tree' }) }}
           shouldExpandNode={() => true}
           getItemString={getItemString}
-          labelRenderer={(raw:any[]) => (typeof raw[0] !== 'number' ? <span>{raw[0]}</span> : null)}
+          labelRenderer={(raw:any[]) => {
+            return (typeof raw[0] !== 'number' ? <span>{raw[0]}</span> : null)
+          }}
         />
       )}
     </>

src/app/components/Tree.tsx

@@ -84,7 +84,14 @@ function MainContainer(): any {
   // if viewIndex is -1, then use the sliderIndex instead
   const snapshotView = viewIndex === -1 ? snapshots[sliderIndex] : snapshots[viewIndex];
   // gabi :: cleannign hierarchy and snapshotView from stateless data
-  const statelessCleanning = (obj:{name?:string; componentData?:object; state?:object|string;stateSnaphot?:object; children?:any[]}) => {
+  const statelessCleanning = (
+    obj:{
+      name?:string;
+      componentData?:object;
+      state?:{hooksState?: any | {componentData?: any}[]} | string;
+      stateSnaphot?:object; 
+      children?:any[];
+    }) => {
     const newObj = { ...obj };
     if (newObj.name === 'nameless') {
       delete newObj.name;
@@ -95,6 +102,14 @@ function MainContainer(): any {
     if (newObj.state === 'stateless') {
       delete newObj.state;
     }
+    if (newObj.state && newObj.state.hooksState) {
+      if (Array.isArray(newObj.state.hooksState)) {
+        newObj.state.hooksState.forEach(s => {
+          delete s.componentData;
+        });
+      }
+    }
+
     if (newObj.stateSnaphot) {
       newObj.stateSnaphot = statelessCleanning(obj.stateSnaphot);
     }

src/app/containers/MainContainer.tsx

@@ -18,7 +18,7 @@ export default (state, action) => produce(state, draft => {
   // eslint-disable-next-line consistent-return
   const findName = (index, obj) => {
     // eslint-disable-next-line eqeqeq
-    if (obj.index == index) {
+    if (obj && obj.index == index) {
       return obj.name;
     }
 

src/app/reducers/mainReducer.js

@@ -54,19 +54,19 @@ div.tooltip {
   max-width: 250px;
   overflow-wrap: break-word;
   padding: 6px;
-  color: #1a2229;
+  color: #320a5c;
   font-size: 12px;
   font-family: "Overpass Mono", monospace;
-  background: #6699C4;
+  background: #9cf4df;
   border-radius: 8px;
   pointer-events: none;
 }
 
  .d3-tip {
   line-height: 1;
   padding: 6px;
-  background: #6699C4;
-  color: #1a2229;
+  background: #9cf4df;
+  color: #320a5c;
   border-radius: 4px;
   font-size: 13px;
   max-width: 400px;
@@ -80,7 +80,7 @@ div.tooltip {
   display: inline;
   font-size: 15px;
   line-height: 1;
-  color: #6699C4;
+  color: #9cf4df;
   content: "\25BC";
   position: absolute;
   text-align: center;
@@ -102,9 +102,9 @@ div.tooltip {
 }
 
 .perf-d3-container {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
+  /* display: flex; */
+  /* flex-direction: column; */
+  /* justify-content: space-between; */
   height: calc(100% - 70px);
   /* border: 2px solid red; */
 }
@@ -115,6 +115,7 @@ div.tooltip {
 
 .perf-chart-labels {
   font: 1.3em sans-serif;
+  font-weight: bold;
   /* font-size: calc(12px + .8vw); */
   /* color: white; */
   /* fill: rgb(231, 231, 231); */

src/app/styles/components/d3graph.css

@@ -17,8 +17,10 @@ export const throttle = (f, t) => {
     if (isOnCooldown && isCallQueued) return;
     if (isOnCooldown) {
       isCallQueued = true;
+      console.log('snapshot update already queued');
       return;
     }
+    console.log('no queue, updating snapshot from trigger func');
     f();
     isOnCooldown = true;
     isCallQueued = false;
@@ -27,11 +29,14 @@ export const throttle = (f, t) => {
       if (isCallQueued) {
         isCallQueued = false;
         isOnCooldown = true; // not needed I think
+        console.log('calling queued call');
+        f();
         setTimeout(runAfterTimeout, t);
         return;
       }
       isOnCooldown = false;
     };
+    console.log('queueing snapshot update');
     setTimeout(runAfterTimeout, t);
   };
   return throttledFunc;

src/backend/helpers.js

@@ -40,7 +40,7 @@ function getRouteURL(node: SnapshotNode): string {
 window.addEventListener('message', ({ data: { action, payload } } : MsgData) => {
   switch (action) {
     case 'jumpToSnap':
-      timeJump(payload); // * This sets state with given payload
+      timeJump(payload, true); // * This sets state with given payload
       // Get the pathname from payload and add new entry to browser history
       // MORE: https://developer.mozilla.org/en-US/docs/Web/API/History/pushState
 

src/backend/index.ts

@@ -78,8 +78,7 @@ export default (snap: Snapshot, mode: Mode): ()=>void => {
       // Carlos: these two are legacy comments, we should look into them later
       // prevents useEffect from crashing on load
       // if (memoizedState.next.queue === null) { // prevents double pushing snapshot updates
-      // console.log('traverse hooks memoizedState', memoizedState);
-      if (memoizedState.memoizedState) {
+      if (memoizedState.memoizedState && memoizedState.queue.lastRenderedReducer && memoizedState.queue.lastRenderedReducer.name === 'basicStateReducer') {
         hooksStates.push({
           component: memoizedState.queue,
           state: memoizedState.memoizedState,
@@ -112,6 +111,10 @@ export default (snap: Snapshot, mode: Mode): ()=>void => {
       treeBaseDuration,
     } = currentFiber;
 
+<<<<<<< HEAD
+    let newState: any = {};
+    let componentData: ComponentData = {};
+=======
     let newState: any;
     let componentData: ComponentData = {};
     /* = {
@@ -122,6 +125,7 @@ export default (snap: Snapshot, mode: Mode): ()=>void => {
       treeBaseDuration: 0,
     };
     */
+>>>>>>> master
     let componentFound = false;
 
     // Check if node is a stateful setState component
@@ -146,11 +150,15 @@ export default (snap: Snapshot, mode: Mode): ()=>void => {
         hooksStates.forEach((state, i) => {
           hooksIndex = componentActionsRecord.saveNew(state.state, state.component);
           if (newState && newState.hooksState) {
-            newState.hooksState.push([{ [hooksNames[i]]: state.state }, hooksIndex]);
+            newState.hooksState.push({ [hooksNames[i]]: state.state, componentData: { index: hooksIndex } });
+            // newState.hooksState.push([{ [hooksNames[i]]: state.state }, hooksIndex]);
           } else if (newState) {
-            newState.hooksState = [{ [hooksNames[i]]: state.state }, hooksIndex];
+            newState.hooksState = [{ [hooksNames[i]]: state.state, componentData: { index: hooksIndex } }];
+            // newState.hooksState = [{ [hooksNames[i]]: state.state }, hooksIndex];
           } else {
-            newState = { hooksState: [{ [hooksNames[i]]: state.state }, hooksIndex] };
+            // newState = { hooksState: [{ [hooksNames[i]]: state.state }, hooksIndex] };
+            newState = { hooksState: [] };
+            newState.hooksState.push({ [hooksNames[i]]: state.state, componentData: { index: hooksIndex } });
           }
           componentFound = true;
         });
@@ -174,7 +182,10 @@ export default (snap: Snapshot, mode: Mode): ()=>void => {
 
     let newNode = null;
     // We want to add this fiber node to the snapshot
+<<<<<<< HEAD
+=======
     // const snapshotState = newState.state || newState.hooksState;
+>>>>>>> master
     if (componentFound || newState === 'stateless') {
       if (fromSibling) {
         newNode = tree.addSibling(newState,
@@ -185,6 +196,7 @@ export default (snap: Snapshot, mode: Mode): ()=>void => {
           elementType ? elementType.name : 'nameless',
           componentData);
       }
+      if (newState !== 'stateless') console.log('state updated:', newState);
     } else {
       newNode = tree;
     }
@@ -217,7 +229,10 @@ export default (snap: Snapshot, mode: Mode): ()=>void => {
 
   function onVisibilityChange(): void {
     doWork = !document.hidden;
+<<<<<<< HEAD
+=======
     // console.log('doWork is:', doWork);
+>>>>>>> master
   }
 
   return () => {
@@ -244,7 +259,12 @@ export default (snap: Snapshot, mode: Mode): ()=>void => {
         return function (...args) {
           // eslint-disable-next-line prefer-destructuring
           fiberRoot = args[1];
-          if (doWork) throttledUpdateSnapshot();
+          console.log('in CFR committed fiber');
+          if (doWork) {
+            console.log('in CFR: updating snapshot');
+            throttledUpdateSnapshot();
+          }
+          console.log('in CFR updated snapshot');
           return original(...args);
         };
       }(devTools.onCommitFiberRoot));