Added keys to component node hover-over

Co-authored-by: Jasmine Noor <jasnoo@users.noreply.github.com>
Co-authored-by: Minzo Kim <minzo-kim@users.noreply.github.com>
Co-authored-by: Jackie Yuan <yuanjackie1@users.noreply.github.com>

Author: 4 people

src/app/components/StateRoute/ComponentMap/ComponentMap.tsx

@@ -100,7 +100,7 @@ export default function ComponentMap({
     ...defaultStyles,
     minWidth: 60,
     maxWidth: 300,
-    backgroundColor: 'rgba(0,0,0,0.9)',
+    backgroundColor: 'rgb(15,15,15)',
     color: 'white',
     fontSize: '14px',
     lineHeight: '18px',
@@ -123,11 +123,6 @@ export default function ComponentMap({
     return `${renderTime} ms `;
   };
 
-  const formatState = (state) => {
-    if (state === 'stateless') return ['stateless'];
-    return ['stateful'];
-  };
-
   // places all nodes into a flat array
   const nodeList = [];
 
@@ -355,21 +350,19 @@ export default function ComponentMap({
           }}
         >
           <div>
-            <div style={{}}>
-              {' '}
-              <strong>{tooltipData.name}</strong>{' '}
+            <div>
+              <strong>{tooltipData.name}</strong>
             </div>
-            <div> Render time: {formatRenderTime(tooltipData.componentData.actualDuration)} </div>
-            <div className='stateTip'>
-              State: {formatState(tooltipData.state)}
+            <div className='tooltipKey'>
+              key: {tooltipData.componentData.key !== null ? tooltipData.componentData.key : 'null'}
             </div>
-            <div style={React.scrollStyle}>
-              
+            <div> Render time: {formatRenderTime(tooltipData.componentData.actualDuration)} </div>
+            
+            <div>
               <ToolTipDataDisplay
                 containerName='Props' 
                 dataObj={tooltipData.componentData.props}
               />
-
               <ToolTipDataDisplay
                 containerName='State'
                 dataObj={tooltipData.componentData.hooksIndex

src/app/styles/layout/_stateContainer.scss

@@ -225,18 +225,8 @@
   pointer-events:all !important;
 }
 
-.stateTip{
-  margin-top: 3px;
-  line-height: 1;
-  height: 100%;
-  overflow-y: hidden;
-  max-height: 400px;
-}
-
-.stateTip p {
-  line-height:1;
-  margin-top: 3px;
-  margin-bottom: 0px;
+.tooltipKey {
+  margin-bottom: -1px;
 }
 
 .historyToolTip{
@@ -253,7 +243,6 @@
   margin-bottom: 4px;
   padding: 2px;
   max-height: 30vh;
-  // border: 5px solid rgba(0, 0, 0, 0.9);
 }
 
 .tooltipData-JSONTree {
@@ -266,7 +255,6 @@
   overflow-y: auto;
   max-height: 30vh;
   scrollbar-color:#919499 #51565e;
-
 }
 
 .tooltipData-JSONTree::-webkit-scrollbar-thumb {
@@ -277,5 +265,3 @@
 .tooltipData-JSONTree::-webkit-scrollbar-track{
   background:#51565e;
 }
-
-

src/backend/controllers/createTree.ts

@@ -53,6 +53,7 @@ export default function createTree(currentFiberNode: Fiber): Tree {
       memoizedState,
       memoizedProps,
       elementType,
+      key,
       tag,
       actualDuration,
       actualStartTime,
@@ -104,6 +105,7 @@ export default function createTree(currentFiberNode: Fiber): Tree {
       actualStartTime,
       selfBaseDuration,
       treeBaseDuration,
+      key,
       props: {},
       context: {},
       state: null,

src/backend/types/backendTypes.ts

@@ -44,6 +44,7 @@ export interface MsgData {
  * @type ComponentData -
  * @member actualDuration - The time taken to render the current Fiber node and its descendants during the previous render cycle. This value is used to optimize the rendering of components and to provide performance metrics to developers.
  * @member actualStartTime - The time at which the rendering of the current Fiber node started during the previous render cycle.
+ * @member key - The key a user assigned to the component or null if they didn't assign one
  * @member context - {in experiment} - An object contains all context information of the current component
  * @member index - {class component only} - The index of the bound setState method stored in `componentActionsRecord`
  * @member hooksState - {functional component only} - An object contains all states of the current functional component
@@ -58,6 +59,8 @@ export interface ComponentData {
   actualDuration?: number;
   /** The time at which the rendering of the current Fiber node started during the previous render cycle. */
   actualStartTime?: number;
+  /**The key a user assigned to the component or null if they didn't assign one */
+  key: string | null;
   /** {in experiment} - An object contains all context information of the current component */
   context: {};
   /** {class component only} - The index of the bound setState method stored in `componentActionsRecord`  */
@@ -154,6 +157,7 @@ export const LegacyHiddenComponent = 24;
  * @member actualStartTime - The time at which the rendering of the current Fiber node started during the previous render cycle.
  * @member child - Pointer to the first child.
  * @member elementType  - The type of the current Fiber node's element (e.g. the component function or class, or the DOM element type). For class/functional component, elmementType stores the function definition.
+ * @member key - The key a user assigned to the component or null if they didn't assign one
  * @member memoizedProps - The current props of the component associated with the current Fiber node.
  * @member memoizedState - The current state of the component associated with the current Fiber node.
  * @member selfBaseDuration - The base duration of the current Fiber node's render phase (excluding the time taken to render its children). This field is only set when the enableProfilerTimer flag is enabled.
@@ -191,10 +195,15 @@ export type Fiber = {
    */
   elementType: any;
 
-  /** The current props of the component associated with the current Fiber node. */
+  /**
+   * Unique key string assigned by the user when making component on null if they didn't assign one
+   */
+  key: string | null;
+
+  /** The current state for a functional component associated with the current Fiber node. */
   memoizedState: any;
 
-  /** The current state of the component associated with the current Fiber node. */
+  /** The current props of the component associated with the current Fiber node. */
   memoizedProps: any;
 
   /**