styling

Author: FreyaWu

src/app/components/ComponentMap.tsx

@@ -121,11 +121,21 @@ export default function ComponentMap({
   const tooltipStyles = {
     ...defaultStyles,
     minWidth: 60,
+    maxWidth: 300,
     backgroundColor: 'rgba(0,0,0,0.9)',
     color: 'white',
     fontSize: '14px',
     lineHeight: '18px',
     fontFamily: 'Roboto',
+    zIndex: 100,
+  };
+
+  const scrollStyle = {
+    minWidth: '60',
+    maxWidth: '300',
+    maxHeight: '100px',
+    overflowY: 'scroll',
+    overflowWrap: 'break-word',
   };
 
   const formatRenderTime = time => {
@@ -136,6 +146,21 @@ export default function ComponentMap({
   //places all nodes into a flat array
   const nodeList = [];
 
+  const makePropsPretty = data => {
+    const propsFormat = [];
+    for (const key in data) {
+      console.log('this is the key', key);
+      if (typeof data[key] === 'object') {
+        const nestedObj = makePropsPretty(data[key]);
+      }
+      propsFormat.push(<p>
+        {`${JSON.stringify(key)}: ${JSON.stringify(nestedObj || data[key])}`}
+      </p>);
+    }
+    console.log('this is propsFormat', propsFormat);
+    return propsFormat;
+  };
+
   const collectNodes = (node) => {
     nodeList.splice(0, nodeList.length);
     console.log("Root node:", node);
@@ -342,23 +367,26 @@ export default function ComponentMap({
               <strong>{tooltipData.name}</strong>
               {' '}
             </div>
-            <div>
-              State:
-              {tooltipData.state}
-            </div>
-            <div>
-              Props:
-              {JSON.stringify(tooltipData.componentData.props)}
-            </div>
             <div>
               {' '}
               Render time:
               {' '}
               {formatRenderTime(tooltipData.componentData.actualDuration)}
               {' '}
             </div>
+            <div>
+              State:
+              {tooltipData.state}
+            </div>
+            <div style={scrollStyle}>
+              Props:
+              {makePropsPretty(tooltipData.componentData.props)}
+              {/* {JSON.stringify(tooltipData.componentData.props)} */}
+            </div>
           </div>
         </TooltipInPortal>
+
+
       )}
     </div>
   );

src/backend/tree.ts

@@ -90,7 +90,7 @@ class Tree {
       componentNames = {};
     }
     //check for duplicate
-    else if (componentNames[name]) {
+    else if (componentNames[name] !== undefined) {
       const count = componentNames[name] + 1;
       const newName = name + count;
       componentNames[name] = count;
@@ -103,7 +103,6 @@ class Tree {
   addChild(state: string | {}, name: string, componentData: {}, rtid: any, recoilDomNode: any): Tree {
     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);
@@ -113,7 +112,6 @@ class Tree {
   addSibling(state: string | {}, name: string, componentData: {}, rtid: any, recoilDomNode: any): Tree {
     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);