Merge pull request #36 from aquinojardim/extension

Debugged Diff and Sync Performance data

Author: crperezt

src/app/components/Action.jsx

@@ -23,14 +23,11 @@ const Action = props => {
     } else {
       seconds = '00';
     }
-    miliseconds = JSON.stringify(miliseconds);
+    miliseconds = Number.parseFloat(miliseconds).toFixed(2)
     const arrayMiliseconds = miliseconds.split('.');
     if (arrayMiliseconds[0].length < 2) {
       arrayMiliseconds[0] = '0'.concat(arrayMiliseconds[0]);
     }
-    if (arrayMiliseconds[1].length > 3) {
-      arrayMiliseconds[1] = arrayMiliseconds[1].slice(0, 2);
-    }
     if (index == 0) {
       return `${seconds}:${arrayMiliseconds[0]}.${arrayMiliseconds[1]}`;
     }

src/app/components/Diff.jsx

@@ -22,20 +22,46 @@ function Diff({ snapshot, show }) {
     previous = snapshots[sliderIndex - 1];
     // console.log('previous with sliderIndex - 1: ', previous)
   }
-  // Nate:: diff function returns a comparaison of two objects, one has an updated change
-  const delta = diff(previous, snapshot); // initilly an array with one object, on state change becomes an object
-  // console.log('delta: ', delta);
-  // returns html in string
-  const html = formatters.html.format(delta, previous);
-  // console.log('html   -->', html)
-  if (show){
-    // console.log('showing unchanged values', formatters.html.showUnchanged() );
-    formatters.html.showUnchanged();
-  } else {
-    // console.log('hiding unchanged values', formatters.html.hideUnchanged() );
-    formatters.html.hideUnchanged();
+
+  // gabi :: cleanning preview from stateless data
+  const statelessCleanning = obj => {
+    const newObj = { ...obj };
+    if (newObj.name === 'nameless') {
+      delete newObj.name;
+    }
+    if (newObj.componentData) {
+      delete newObj.componentData;
+    }
+    if (newObj.state === 'stateless') {
+      delete newObj.state;
+    }
+    if (newObj.stateSnaphot) {
+      newObj.stateSnaphot = statelessCleanning(obj.stateSnaphot);
+    }
+    if (newObj.children) {
+      newObj.children = [];
+      if (obj.children.length > 0) {
+        obj.children.forEach(element => {
+          if (element.state !== 'stateless' || element.children.length > 0) {
+            const clean = statelessCleanning(element);
+            newObj.children.push(clean);
+          }
+        });
+      }
+    }
+    return newObj;
   };
-  
+  // gabi :: just display stateful data
+  const previousDisplay = statelessCleanning(previous);
+  // Nate:: diff function returns a comparison of two objects, one has an updated change
+  // gabi :: just display stateful data
+  const delta = diff(previousDisplay, snapshot);
+  // returns html in string
+  // gabi :: just display stateful data
+  const html = formatters.html.format(delta, previousDisplay);
+  if (show) formatters.html.showUnchanged();
+  else formatters.html.hideUnchanged();
+
   if (previous === undefined || delta === undefined) {
     return <div className='noState'> No state change detected. Trigger an event to change state </div>;
   }

src/app/components/StateRoute.jsx

@@ -39,13 +39,13 @@ const StateRoute = ({ snapshot, hierarchy, snapshots, viewIndex }) => {
     <Router>
       <div className="navbar">
         <NavLink className="router-link" activeClassName="is-active" exact to="/">
-        State
+        Tree
         </NavLink>
         <NavLink className="router-link" activeClassName="is-active" to="/chart">
         History
         </NavLink>
         <NavLink className="router-link" activeClassName="is-active" to="/performance">
-        Rendering
+        Performance
         </NavLink>
       </div>
       <Switch>

src/app/styles/components/_actionComponent.scss

@@ -14,7 +14,7 @@
 }
 
 .action-component-text{
-  margin-bottom: 10px;
+  margin-bottom: 8px;
 }
 
 .action-component.selected {

src/app/styles/components/_buttons.scss

@@ -21,6 +21,7 @@
 .time-button {
   outline: none;
   height: 20px;
+  margin-bottom: 8px;
   width: 70px;
   border: none;
   border-radius: 3px;
@@ -31,6 +32,7 @@
 
 .jump-button {
   @extend %button-shared;
+  margin-bottom: 8px;
   width: 50px;
   opacity: 0;
   transform: rotateX(90deg);

src/app/styles/components/d3graph.css

@@ -96,7 +96,7 @@ div.tooltip {
 .perfContainer {
   display: block;
   margin: 0 -14px;
-  background-color: hsl(152,80%,80%);
+  background-color: hsl(221,16%,20%);
   /* border: 2px solid red; */
 }