Changed how duplicate components are named

Author: MarkTeets

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

@@ -348,7 +348,7 @@ export default function ComponentMap({
               <strong>{tooltipData.name}</strong>
             </div>
             <div className='tooltipKey'>
-              key: {tooltipData.componentData.key !== null ? tooltipData.componentData.key : 'null'}
+              Key: {tooltipData.componentData.key !== null ? tooltipData.componentData.key : 'null'}
             </div>
             <div> Render time: {formatRenderTime(tooltipData.componentData.actualDuration)} </div>
 

src/backend/__tests__/masterTree.test.tsx

@@ -243,11 +243,11 @@ describe('master tree tests', () => {
         // Construct result tree (root => FiberTree => childTree1 => childTree2 & siblingTree1)
         (mockChildTree.componentData as ComponentData).props = props;
         const childTree1 = deepCopy(mockChildTree);
-        childTree1.name = 'IncrementClass';
+        childTree1.name = 'IncrementClass1';
         (childTree1.componentData as ComponentData).props.name = 'child1';
         (childTree1.componentData as ComponentData).index = 0;
         const childTree2 = deepCopy(mockChildTree);
-        childTree2.name = 'IncrementClass1';
+        childTree2.name = 'IncrementClass2';
         (childTree2.componentData as ComponentData).props.name = 'child2';
         (childTree2.componentData as ComponentData).index = 1;
         (mockSiblingTree.componentData as ComponentData).props = props;
@@ -340,13 +340,13 @@ describe('master tree tests', () => {
         (mockChildTree.componentData as ComponentData).state = classState;
         mockChildTree.state = classState;
         const childTree1 = deepCopy(mockChildTree);
-        childTree1.name = 'IncrementClass';
+        childTree1.name = 'IncrementClass1';
         (childTree1.componentData as ComponentData).index = 0;
         const childTree2 = deepCopy(mockChildTree);
-        childTree2.name = 'IncrementClass1';
+        childTree2.name = 'IncrementClass2';
         (childTree2.componentData as ComponentData).index = 1;
         const childTree3 = deepCopy(mockChildTree);
-        childTree3.name = 'IncrementClass2';
+        childTree3.name = 'IncrementClass3';
         (childTree3.componentData as ComponentData).index = 2;
         mockFiberTree.children[0].children = [childTree1];
         childTree1.children.push(childTree2, childTree3);
@@ -404,10 +404,10 @@ describe('master tree tests', () => {
         mockSiblingTree.state = functionalState;
         (mockSiblingTree.componentData as ComponentData).hooksState = functionalState;
         const siblingTree1 = deepCopy(mockSiblingTree);
-        siblingTree1.name = 'IncrementFunc';
+        siblingTree1.name = 'IncrementFunc1';
         (siblingTree1.componentData as ComponentData).hooksIndex = [0];
         const siblingTree2 = deepCopy(mockSiblingTree);
-        siblingTree2.name = 'IncrementFunc1';
+        siblingTree2.name = 'IncrementFunc2';
         (siblingTree2.componentData as ComponentData).hooksIndex = [1];
         const siblingTree3 = deepCopy(mockSiblingTree);
         siblingTree3.name = 'IncrementFuncMultiStates';
@@ -526,8 +526,8 @@ describe('master tree tests', () => {
         expect(child.children).toHaveLength(2);
         expect(child.children[0]).toBe(nextChild1);
         expect(child.children[1]).toBe(nextChild2);
-        expect(nextChild1.name).toBe('child1');
-        expect(nextChild2.name).toBe('child2');
+        expect(nextChild1.name).toBe('child2');
+        expect(nextChild2.name).toBe('child3');
       });
 
       xit('should be able to add multiple children and sibilings', () => {});

src/backend/models/tree.ts

@@ -3,6 +3,7 @@ import { ComponentData } from '../types/backendTypes';
 
 /** ComponentNames is used to store a mapping between a component's unique identifier and its name. This mapping is used to reconstruct the component instances during deserialization.*/
 let componentNames = {};
+let rootTree;
 
 // Making a deep clone of state becuase we want to make a copy
 /**
@@ -20,6 +21,25 @@ export function serializeState(state) {
   }
 }
 
+/**
+ * Tree.name's come from the name of the component, but these names should be unique. When a second component
+ * is used in a single tree, this function is called in checkForDuplicates to the change the Tree.name of the 
+ * first component to have a "1" at the end. 
+ * 
+ * @param tree A tree class instance
+ * @param name The name being checked
+ */
+function changeFirstInstanceName(tree: Tree, name: string): void {
+  for (const child of tree.children) {
+    if (child.name === name) {
+      child.name += 1;
+      return;
+    } else {
+      changeFirstInstanceName(child, name)
+    }
+  }
+}
+
 /**
  * This is the current snapshot that is being sent to the snapshots array.
  * Creates a Tree
@@ -71,40 +91,32 @@ class Tree {
   // Returns a unique name ready to be used for when new components gets added to the tree
   /**
    * @function checkForDuplicates - Generates a unique name for a component that is being added to the component tree
-   * @param name
-   * @returns
+   * @param name Component name
+   * @returns Unique name for Tree.name
    */
   checkForDuplicates(name: string): string {
+    if (this.name === 'root') {
+      componentNames = {};
+      rootTree = this;
+    }
+  
     /**
-     * The condition for check empty name does not seem to ever be reached
-     * Commented and did not remove for potential future use
+     * If a duplicate name is found, adds a number to the end of the name so it'll show up uniquely 
+     * in the component map. For example, if only one "Box" component is found, it's name will be "Box".
+     * However, after a second "Box" component is found, the first box will be renamed "Box1" and the 
+     * second box will be named "Box2". When the third box is found it'll be named "Box3", and so on.
      */
-    // check for empty name
-    // if (name === '' && typeof this.rtid === 'string') {
-    //   name = this.rtid.replace('fromLinkFiber', '');
-    // }
-    // if parent node is root, initialize the componentNames object
-    if (this.name === 'root') componentNames = {};
-
-    //Original code, left for group review
-    // Numerize the component name if found duplicate
-    // Ex: A board has 3 rows => Row, Row1, Row2
-    // Ex: Each row has 3 boxes => Box, Box1, Box2, ..., Box8
-    componentNames[name] = componentNames[name] + 1 || 0;
-    name += componentNames[name] ? componentNames[name] : '';
-    
-    /**
-     * Mark's notes: I know we start at 0 for arrays but I found it weird
-     *  that you'd see a component 'Box' and then the second one would be labeled 
-     * 'Box1'. So I changed the second one to be 'Box2'. What I'd like to do is iterate
-     *  over the the componentNames array and if any component name is > 1, find the first 
-     *  one and make that one 'Box1', but one thing at a time 
-     */
-    // componentNames[name] = componentNames[name] + 1 || 1;
-    // if (componentNames[name] > 1) name += componentNames[name]
+    componentNames[name] = componentNames[name] + 1 || 1;
+
+    if (componentNames[name] === 2) {
+      changeFirstInstanceName(rootTree, name);
+    }
+
+    if (componentNames[name] > 1) name += componentNames[name];
 
     return name;
   }
+
   /**
    *
    * @param state - string if root, serialized state otherwise