can now see all root components in display tab

Author: carlyjackson

app/src/components/StateManagement/DisplayTab/DataTable.tsx

@@ -31,7 +31,19 @@ const StyledTableRow = styled(TableRow)(({ theme }) => ({
 }));
 
 export default function DataTable(props) {
-  const { currComponentState, setCurrComponentState, parentProps, setParentProps, clickedComp } = props;
+  const { currComponentState, setCurrComponentState, parentProps, setParentProps, clickedComp, data } = props;
+  const [state, dispatch] = useContext(StateContext);
+
+  //determine if the current component is a root component 
+  let isRoot = false;
+
+  //iterate through the data array and see if clickedComp is in state.rootComponents
+  for (let i = 0; i < data.length; i++) {
+    if (data[i]['name'] === clickedComp) {
+      //check to see if clickedComp is in rootComponents
+      if (state.rootComponents.includes(data[i]['id'])) isRoot = true;
+    }
+  }
 
   return (
     <>
@@ -43,8 +55,8 @@ export default function DataTable(props) {
         >
 
           {/* this table will contain passed down stateProps data from parent component */}
-          {/* we are checking if the clicked component is App-- if it is App, it doesn't have any parents so don't need this table*/}
-        {(clickedComp !== 'App' && 
+          {/* we are checking if the clicked component is a root component-- if it is, it doesn't have any parents so don't need this table*/}
+        {(!isRoot && 
           <>
           <TableHead>
             <TableRow>

app/src/components/StateManagement/DisplayTab/DisplayContainer.tsx

@@ -1,4 +1,4 @@
-import React, {useState, useContext} from 'react';
+import React, {useState, useContext, useEffect} from 'react';
 import Tree from './Tree';
 import Divider from '@mui/material/Divider';
 import Grid from '@mui/material/Grid';
@@ -12,22 +12,42 @@ function DisplayContainer({data, props}) { // "data" is referring to components
   const [currComponentState, setCurrComponentState] = useState([]);
   const [parentProps, setParentProps] = useState([]);
   const [state, dispatch] = useContext(StateContext);
+ 
+  let root = ''; 
 
-  
-  // check projectType. If it's 'Classic React', title should read 'App'. Otherwise it's Next.js or Gatsby which uses 'index'
-  let root; 
-  if (state.projectType === "Classic React") {
+  // check the canvasFocus
+    // if canvasFocus is a root component, use that root component as "root"
+    if (state.rootComponents.includes(state.canvasFocus.componentId)) {
+      //find the name of the canvasFocus component in data 
+        //set root equal to that name 
+        // iterate through data (which is an array of objects)
+        for (let i = 0; i < data.length; i++) {
+            // find object with id that is equal to state.canvasFocus.componentId 
+            // then set root equal to the name of that component 
+          if (data[i]["id"] === state.canvasFocus.componentId) root = data[i]["name"];
+        }
+    } else if (state.projectType === "Classic React") {
+    // else default to the main root component (aka app or index depending on react vs next/gatsby)
     root = 'App';
-  } else {
+   } else {
     root = 'index';
-  } 
+   } 
+
   const [clickedComp, setClickedComp] = useState(root);
 
   return (
     <div style={{display: 'flex'}}>
-      {<Tree data = {data} currComponentState={currComponentState} setCurrComponentState ={setCurrComponentState} parentProps={parentProps} setParentProps={setParentProps} setClickedComp={setClickedComp}  />}
+      {<Tree data = {data} currComponentState={currComponentState} setCurrComponentState ={setCurrComponentState} parentProps={parentProps} setParentProps={setParentProps} setClickedComp={setClickedComp}/>}
       <Divider orientation="vertical" variant="middle" flexItem />
         <Grid item>
+        <Typography
+            style={{ color: 'black' }}
+            variant="subtitle2"
+            gutterBottom={true}
+            align="center"
+          >
+            Click on a component in the graph to see its state!
+          </Typography>
           <Typography
             style={{ color: 'black' }}
             variant="h6"
@@ -36,7 +56,7 @@ function DisplayContainer({data, props}) { // "data" is referring to components
           >
             Total State for {clickedComp}
           </Typography>
-           <DataTable currComponentState={currComponentState} setCurrComponentState ={setCurrComponentState} parentProps={parentProps} setParentProps={setParentProps} props={props} clickedComp={clickedComp}  /> 
+           <DataTable currComponentState={currComponentState} setCurrComponentState ={setCurrComponentState} parentProps={parentProps} setParentProps={setParentProps} props={props} clickedComp={clickedComp} data = {data} /> 
         </Grid>
     </div>
   );

app/src/components/StateManagement/DisplayTab/Tree.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, useContext } from 'react';
+import React, { useRef, useEffect, useContext, useState } from 'react';
 import { select, hierarchy, tree, linkHorizontal} from 'd3';
 import cloneDeep from 'lodash/cloneDeep';
 import useResizeObserver from './useResizeObserver';
@@ -10,7 +10,7 @@ function usePrevious(value) {
   return ref.current;
 }
 
-function Tree({ data, currComponentState, setCurrComponentState, parentProps, setParentProps, setClickedComp }) { 
+function Tree({ data, currComponentState, setCurrComponentState, parentProps, setParentProps, setClickedComp}) { 
   const [state, dispatch] = useContext(StateContext);
   const svgRef = useRef();
   const wrapperRef = useRef();
@@ -41,7 +41,6 @@ function Tree({ data, currComponentState, setCurrComponentState, parentProps, se
   // create a deep clone of data to avoid mutating the actual children array in removing separators
   const dataDeepClone = cloneDeep(data);
 
-  // LEGACYPD to look at when trying to figure out how to convert tab to work for NextJS
   if(state.projectType === 'Next.js') {
     dataDeepClone.forEach(element => {
       element.children = sanitize(element.children).filter(element => !Array.isArray(element));
@@ -57,7 +56,7 @@ function Tree({ data, currComponentState, setCurrComponentState, parentProps, se
 
   // remove separators and update components to current versions
   dataDeepClone.forEach(component => removeHTMLElements(component.children));
-  
+
   // will be called initially and on every data change
   useEffect(() => {
     const svg = select(svgRef.current);
@@ -66,7 +65,31 @@ function Tree({ data, currComponentState, setCurrComponentState, parentProps, se
     // (dimensions are null for the first render)
     const { width, height } = dimensions || wrapperRef.current.getBoundingClientRect();
     // transform hierarchical data
-    const root = hierarchy(dataDeepClone[0]); 
+
+    let root;
+    let rootName; 
+
+    if (state.rootComponents.includes(state.canvasFocus.componentId)) {
+      // find out if canvasFocus is a root component 
+      // if yes, set root to be that canvasFocus component 
+        // find that component inside dataDeepClone
+        for (let i = 0; i < dataDeepClone.length; i++) {
+          if (dataDeepClone[i]['id'] === state.canvasFocus.componentId) {
+            // reassign root to be dataDeepClone at that element  
+
+            root = hierarchy(dataDeepClone[i]);
+            rootName = dataDeepClone[i]["name"];
+            
+          }
+        }
+    } else {
+    // if no, set root to be dataDeepClone[0]
+    root = hierarchy(dataDeepClone[0]); 
+    rootName = dataDeepClone[0]["name"];
+    }
+
+    setClickedComp(rootName);
+
     const treeLayout = tree().size([height, width - 125]);
     // Returns a new link generator with horizontal display.
     // To visualize links in a tree diagram rooted on the left edge of the display
@@ -76,7 +99,7 @@ function Tree({ data, currComponentState, setCurrComponentState, parentProps, se
 
     // insert our data into the tree layout
     treeLayout(root);
-    
+
     svg
       .selectAll('.node')
       .data(root.descendants())
@@ -99,7 +122,7 @@ function Tree({ data, currComponentState, setCurrComponentState, parentProps, se
         let passedInProps;
         let componentStateProps;
 
-        // iterate through data array to find stateProps for parent and clicked element
+        // iterate through data array to find stateProps and passedInProps
         for(let i = 0; i < data.length; i++) {
           if(data[i]["name"] === nameOfClicked) {
             componentStateProps = data[i]["stateProps"];

app/src/components/right/ComponentPanel.tsx

@@ -64,6 +64,13 @@ const ComponentPanel = ({isThemeLight}): JSX.Element => {
   const checkIfRoot = (inputName: String): boolean => {
     let rootDupe = false; 
     // checks to see if inputted comp name is equal to root component name. Want to prevent that
+    
+    //carly console logs 
+    const rootComponents = state.rootComponents; 
+    const allComponents = state.components; 
+    console.log({rootComponents});
+    console.log({allComponents});
+
      if (inputName.toLowerCase() === 'index'|| inputName.toLowerCase() === 'app') {
       rootDupe = true;
     }