Merge pull request #7 from oslabs-beta/everyone/filter

Everyone/filter

Author: andytsou19

src/app/components/ComponentMap.tsx

@@ -133,11 +133,12 @@ export default function ComponentMap({
     return `${time} ms `;
   };
 
-  //put all nodes into an array
+  //places all nodes into a flat array
   const nodeList = [];
 
   const collectNodes = (node) => {
     nodeList.splice(0, nodeList.length);
+    console.log("Root node:", node);
     nodeList.push(node);
     for (let i = 0; i < nodeList.length; i++) {
       const cur = nodeList[i];
@@ -345,6 +346,10 @@ export default function ComponentMap({
               State:
               {tooltipData.state}
             </div>
+            <div>
+              Props:
+              {JSON.stringify(tooltipData.componentData.props)}
+            </div>
             <div>
               {' '}
               Render time:

src/app/components/LinkControls.tsx

@@ -33,7 +33,8 @@ type Props = {
 const nodeList = [];
 
 const collectNodes = (node) => {
-  nodeList.splice(0, nodeList.length);
+  console.log("This is the root node", node);
+  nodeList.splice(0, nodeList.length); { /* We used the .splice method here to ensure that nodeList did not accumulate with page refreshes */ }
   nodeList.push(node);
   for (let i = 0; i < nodeList.length; i++) {
     const cur = nodeList[i];
@@ -44,7 +45,6 @@ const collectNodes = (node) => {
     }
   }
   console.log('NODELIST looks like: ', nodeList);
-
 }
 
 export default function LinkControls({
@@ -72,7 +72,7 @@ export default function LinkControls({
       <select
         onClick={e => e.stopPropagation()}
         onChange={e => setLayout(e.target.value)}
-        value={layout}
+        // value={layout}
         style={dropDownStyle}
       >
         <option value="cartesian">Cartesian</option>
@@ -86,7 +86,7 @@ export default function LinkControls({
       <select
         onClick={e => e.stopPropagation()}
         onChange={e => setOrientation(e.target.value)}
-        value={orientation}
+        // value={orientation}/
         disabled={layout === 'polar'}
         style={dropDownStyle}
       >
@@ -101,7 +101,7 @@ export default function LinkControls({
       <select
         onClick={e => e.stopPropagation()}
         onChange={e => setLinkType(e.target.value)}
-        value={linkType}
+        // value={linkType}
         style={dropDownStyle}
       >
         <option value="diagonal">Diagonal</option>
@@ -111,23 +111,17 @@ export default function LinkControls({
 
       {/* Controls for the select selections. */}
       <label>Select:</label>
-      &nbsp;
-      <select
-        onClick={e => e.stopPropagation()}
+      &nbsp; {/*This is a non-breaking space - Prevents an automatic line break at this position */}
+      <input list='nodeOptions' type='text' name="nodeOptions"
         onChange={e => {
-          const val = e.target.value;
-          console.log("You selected: ", val);
           setSelectedNode(e.target.value)
         }}
-        value={selectedNode}
-        style={dropDownStyle}
-      >
-        {console.log("snapShots: ", snapShots)}
-
+      />
+      <datalist id='nodeOptions'>
         {nodeList.map(node => (
           <option value={node.name}>{node.name}</option>
         ))}
-      </select>
+      </datalist>
 
       {/* This is the slider control for the step option */}
       {linkType === 'step' && layout !== 'polar' && (

src/backend/linkFiber.ts

@@ -197,7 +197,7 @@ function traverseHooks(memoizedState: any): HookStates {
 
 /**
  * @method createTree
- * @param currentFiber A Fiber object dajshdgajshdgajshdgasjh
+ * @param currentFiber A Fiber object
  * @param tree A Tree object, default initialized to an instance given 'root' and 'root'
  * @param fromSibling A boolean, default initialized to false
  * @return An instance of a Tree object
@@ -210,6 +210,24 @@ function traverseHooks(memoizedState: any): HookStates {
 let atomsSelectors = {};
 let atomsComponents = {};
 
+function convertFunctionToString(obj: {}) {
+  const newPropData = {};
+  // const newPropData = Array.isArray(obj) === true ? {} : [];
+  for (const key in obj) {
+    if (typeof obj[key] === 'function') {
+      newPropData[key] = 'function';
+      // console.log('we changed the function', newPropData[key]);
+    } else if (typeof obj[key] === 'object') {
+      // console.log('this is going to enter a recursive call', obj[key]);
+      // convertFunctionToString(obj[key]);
+      newPropData[key] = JSON.stringify(obj[key]);
+    } else {
+      newPropData[key] = obj[key];
+    }
+  }
+  // console.log(newPropData);
+  return newPropData;
+}
 // Every time a state change is made in the accompanying app, the extension creates a
 // Tree “snapshot” of the current state, and adds it to the current “cache” of snapshots in the extension
 function createTree(
@@ -236,7 +254,28 @@ function createTree(
     selfBaseDuration,
     treeBaseDuration,
   } = currentFiber;
-
+  //new feature adds props/state into the component
+  if (tag === 5) {
+    try {
+      // console.log('this is the tree', tree);
+
+      if (memoizedProps.children[0]._owner.memoizedProps !== undefined) {
+        const propsData = memoizedProps.children[0]._owner.memoizedProps;
+        const newPropData = convertFunctionToString(propsData);
+        tree.componentData = {
+          ...tree.componentData,
+          props: newPropData
+        };
+      }
+      // console.log('CHECKING THE TREE FOR THE DATA', tree);
+      // console.log('looking for the owner', memoizedProps.children);
+      // console.log('this is working but whats going on', propsData,);
+      // console.log('this should display the stuff we want', memoizedProps.children[0]._owner.memoizedState);
+      // console.log('current fiber', currentFiber);
+    } catch (error) {
+      // console.log('this is the error', error);
+    }
+  }
   // Checks Recoil Atom and Selector Relationships
   if (
     currentFiber.memoizedState
@@ -399,9 +438,11 @@ function createTree(
       let pointer = currentFiber;
       // end of repeat code
 
+
       while (pointer !== null) {
         if (pointer.stateNode !== null) {
           rtid = `fromLinkFiber${rtidCounter++}`;
+          // rtid = rtidCounter++;
           recoilDomNode[currentFiber.elementType.name].push(rtid);
           // check if rtid is already present
           //  remove existing rtid before adding a new one
@@ -419,12 +460,14 @@ function createTree(
         pointer = pointer.child;
       }
     } else {
+
       if (
         currentFiber.child
         && currentFiber.child.stateNode
         && currentFiber.child.stateNode.setAttribute
       ) {
         rtid = `fromLinkFiber${rtidCounter}`;
+        // rtid = rtidCounter;
         // check if rtid is already present
         //  remove existing rtid before adding a new one
         if (currentFiber.child.stateNode.classList.length > 0) {
@@ -438,6 +481,7 @@ function createTree(
         currentFiber.child.stateNode.classList.add(rtid);
       }
       rtidCounter++;
+      console.log('rtidCounter', rtidCounter);
     }
     // checking if tree fromSibling is true
     if (fromSibling) {
@@ -463,13 +507,15 @@ function createTree(
   }
 
   // Recurse on children
+
   if (child && !circularComponentTable.has(child)) {
     // If this node had state we appended to the children array,
     // so attach children to the newly appended child.
     // Otherwise, attach children to this same node.
     circularComponentTable.add(child);
     createTree(child, newNode);
   }
+
   // Recurse on siblings
   if (sibling && !circularComponentTable.has(sibling)) {
     circularComponentTable.add(sibling);
@@ -508,7 +554,7 @@ export default (snap: Snapshot, mode: Mode): (() => void) => {
     document.addEventListener('visibilitychange', onVisibilityChange);
 
     if (reactInstance && reactInstance.version) {
-      console.log('888888888888888888888THIS IS GETTING CALLED LINE 503 888888888888888888888888888888');
+      // console.log('888888888888888888888 THIS IS GETTING CALLED LINE 503 888888888888888888888888888888');
       devTools.onCommitFiberRoot = (function (original) {
         return function (...args) {
           // eslint-disable-next-line prefer-destructuring

src/backend/tree.ts

@@ -7,8 +7,11 @@
 /* eslint-disable no-console */
 /* eslint-disable no-param-reassign */
 
+import { createGenerateClassName } from "@material-ui/styles";
+
 let copyInstances = 0;
 const circularComponentTable = new Set<Tree>();
+let componentNames = {}
 
 // Removes unserializable state data such as functions
 function scrubUnserializableMembers(tree: Tree): Tree {
@@ -26,6 +29,7 @@ function serializeState(state) {
   }
 }
 
+
 /**
  * This is the current snapshot that is being sent to the snapshots array.
  * Creates a Tree
@@ -53,32 +57,71 @@ class Tree {
 
   recoilDomNode: any;
 
+  //Duplicate names: add a unique number ID
+  //Create an object 'componentNames' to store each component name as a key and it's frequency of use as its value
+  //When a new component is made on the tree, check if the new component's name already exists in 'componentNames' (possibly with the .hasOwnProperty method)
+  //If the name already exists, add its value (an integer) to the name
+  //Also, increment the value after
+  //If not, create the new component and also a new key: value pair in 'componentNames' with the component's name as the key and 0 as its value
+  //EXAMPLE OF COMPONENTNAMES OBJECT: {editableInput: 1, Provider: 0, etc}
+
+  //Empty names:
+  //If string, rtid without 'fromLinkFiber"
+  //If object
+  //If null
+
   constructor(state: string | {}, name = 'nameless', componentData: {} = {}, rtid: any = null, recoilDomNode: any = null) {
     this.state = state === 'root' ? 'root' : serializeState(state);
-    this.name = name === "" ? rtid : name;
+    this.name = name;
     this.componentData = componentData ? JSON.parse(JSON.stringify(componentData)) : {};
     this.children = [];
     this.parent = null; // ref to parent so we can add siblings
     this.rtid = rtid;
     this.recoilDomNode = recoilDomNode;
   }
 
+  // Returns a unique name ready to be used
+  checkForDuplicates(name: string) {
+    //check for empty name
+    if (name === "" && typeof this.rtid === 'string') {
+      name = this.rtid.replace('fromLinkFiber', '');
+    }
+    if (this.state === 'root') {
+      componentNames = {};
+    }
+    //check for duplicate
+    else if (componentNames[name] !== undefined) {
+      const count = componentNames[name] + 1;
+      const newName = name + count;
+      componentNames[name] = count;
+      return newName;
+    }
+    componentNames[name] = 0;
+    return name;
+  }
+
   addChild(state: string | {}, name: string, componentData: {}, rtid: any, recoilDomNode: any): Tree {
-    const newChild: Tree = new Tree(state, name, componentData, rtid, recoilDomNode);
+    const uniqueName = this.checkForDuplicates(name);
+    console.log("ChildName:", uniqueName);
+    this.name = uniqueName;
+    const newChild: Tree = new Tree(state, uniqueName, componentData, rtid, recoilDomNode);
     newChild.parent = this;
     this.children.push(newChild);
     return newChild;
   }
 
   addSibling(state: string | {}, name: string, componentData: {}, rtid: any, recoilDomNode: any): Tree {
-    const newSibling: Tree = new Tree(state, name, componentData, rtid, recoilDomNode);
+    const uniqueName = this.checkForDuplicates(name);
+    console.log("SiblingName:", uniqueName);
+    this.name = uniqueName;
+    const newSibling: Tree = new Tree(state, uniqueName, componentData, rtid, recoilDomNode);
     newSibling.parent = this.parent;
     this.parent.children.push(newSibling);
     return newSibling;
   }
 
   /**
-   * @function cleanTreeCopy : Adds a sibing to the current tree
+   * @function cleanTreeCopy : Adds a sibling to the current tree
    */
   cleanTreeCopy(): Tree {
     /**
@@ -91,6 +134,7 @@ class Tree {
     }
     // creates copy of present node
     let copy: Tree = new Tree(this.state, this.name, this.componentData, this.rtid, this.recoilDomNode);
+    console.log('CLEANTREECOPY TEST', copy);
     delete copy.parent;
     circularComponentTable.add(this);
     copy = scrubUnserializableMembers(copy);

src/backend/types/backendTypes.ts

@@ -3,7 +3,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import Tree from '../tree';
 
-
 export interface Snapshot {
   tree: Tree;
   unfilteredTree: null;
@@ -82,7 +81,7 @@ export const ClassComponent = 1;
 export const IndeterminateComponent = 2; // Before we know whether it is function or class
 export const HostRoot = 3; // Root of a host tree. Could be nested inside another node.
 export const HostPortal = 4; // A subtree. Could be an entry point to a different renderer.
-export const HostComponent = 5;
+export const HostComponent = 5; // has stateNode of html elements
 export const HostText = 6;
 export const Fragment = 7;
 export const Mode = 8;
@@ -92,7 +91,7 @@ export const ForwardRef = 11;
 export const Profiler = 12;
 export const SuspenseComponent = 13;
 export const MemoComponent = 14;
-export const SimpleMemoComponent = 15;
+export const SimpleMemoComponent = 15; // A higher order component where if the component renders the same result given the same props, react skips rendering the component and uses last rendered result. Has memoizedProps/memoizedState but no stateNode
 export const LazyComponent = 16;
 export const IncompleteClassComponent = 17;
 export const DehydratedFragment = 18;