Added react-d3-tree

package.json

@@ -63,6 +63,7 @@
     "react": "^17.0.1",
     "react-ace": "^9.3.0",
     "react-codemirror2": "^7.2.1",
+    "react-d3-tree": "^2.0.1",
     "react-dom": "^17.0.1",
     "react-router-dom": "^5.2.0",
     "react-tabs": "^3.2.0",

server/schema.js

@@ -117,7 +117,7 @@ async function run() {
   const client = new MongoClient(url, {useUnifiedTopology: true});
   const regex = /\/(\w+)\?/g
   const databaseName = url.match(regex)
-  console.log('DATABASSSSUUUUUU', url)
+  // console.log('DATABASSSSUUUUUU', url)
   const databaseString = databaseName.join('').slice(1, databaseName.join('').length - 1)
   // console.log('DATABASSSSUUUUUU2222222', databaseString)
 

src/Components/MongoSchemaIDE.js

@@ -14,7 +14,7 @@ const _ = require('lodash');
 const MongoSchemaIDE = ({schemaData, selectedSchemaData, graphQLSchema}) => {
   const [data, setData] = useState([]);
   const [graphData, setGraphData] = useState({});
-  console.log('SELECTED SCHEMAS WOAAAAA', graphQLSchema);
+  // console.log('SELECTED SCHEMAS WOAAAAA', graphQLSchema);
   // console.log("UPDATED ROOTQUERY OBJ+++", graphQLSchema)
   // iterates over the graphQLSchema and removes the double quotes
   const eliminateQuotes = (obj) => {
@@ -28,7 +28,7 @@ const MongoSchemaIDE = ({schemaData, selectedSchemaData, graphQLSchema}) => {
 
   const newLinePillar = (str) => {
     if (str === undefined) return;
-    console.log(str);
+    // console.log(str);
     let newStr = '';
     let array = str.split('');
     for (let i = 0; i < array.length; i+=1) {

src/Components/Tree.js

@@ -0,0 +1,115 @@
+import React from 'react';
+import Tree from 'react-d3-tree';
+import '../public/custom-tree.css';
+// This is a simplified example of an org chart with a depth of 2.
+// Note how deeper levels are defined recursively via the `children` property.
+const orgChart = {
+  name: 'CEO',
+  children: [
+    {
+      name: 'Manager',
+      attributes: {
+        department: 'Production',
+      },
+      children: [
+        {
+          name: 'Foreman',
+          attributes: {
+            department: 'Fabrication',
+          },
+          children: [
+            {
+              name: "kill me"
+            },
+            {
+              name: 'love me'
+            }
+          ],
+        },
+        {
+          name: 'Foreman',
+          attributes: {
+            department: 'Assembly',
+          },
+          children: [
+            {
+              name: 'Worker',
+            },
+          ],
+        },
+      ],
+    },
+  ],
+};
+
+
+// users:
+// email: {type: "string", required: true}
+// forum: {type: "Array", required: true}
+// password: {type: "string", required: true}
+// username: {type: "string", required: true}
+// __v: {type: "number", required: true}
+// _id: {primaryKey: true, type: "Object
+
+// mongodb+srv://judy:coderepforum@coderep-forum-idfny.mongodb.net/Forum?retryWrites=true&w=majority
+
+export default function OrgChartTree({selectedSchemaData}) {
+  let schemaChart = {};
+  if (selectedSchemaData[0]) {
+    schemaChart = {
+      name: 'Database Schema',
+      children: [],
+    }
+    let i = 0;
+    let childArr = [];
+    for (let key in selectedSchemaData[0]) {
+      console.log(selectedSchemaData[0][key])
+        for (let prop in selectedSchemaData[0][key]) {
+          childArr.push({name: prop})
+        }
+        console.log(childArr);
+        schemaChart.children[i] = {
+          name: key,
+          children: childArr,
+        };
+        childArr = [];
+        i++
+    }
+  }
+
+  // iterate over the selectedSchemaData
+  // console.log(Object.keys(selectedSchemaData))
+  function getName(obj) {
+    let name = '';
+    for (let key in obj) {
+      name += obj[key];
+    }
+    return name;
+  }
+
+  let array = [];
+
+  for (let key in selectedSchemaData) {
+    console.log('LALLALALALALLA', selectedSchemaData[key])
+  }
+  const straightPathFunc = (linkDatum, orientation) => {
+    const { source, target } = linkDatum;
+    return orientation === 'vertical'
+      ? `M${source.x},${source.y}L${target.x},${target.y}`
+      : `M${source.y},${source.x}L${target.y},${target.x}`;
+  };
+
+  return (
+    // `<Tree />` will fill width/height of its container; in this case `#treeWrapper`.
+    <div id="treeWrapper" style={{ width: '100%', height: '75vh', backgroundColor: 'white', marginTop: '5.5%'}}>
+      <Tree
+      data={schemaChart}
+      rootNodeClassName="node__root"
+      branchNodeClassName="node__branch"
+      leafNodeClassName="node__leaf"
+      // style={{color: "white"}}
+      pathFunc={straightPathFunc}
+      />
+    </div>
+  );
+}