diff --git a/package-lock.json b/package-lock.json
index c143d79..7ff40e1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3002,6 +3002,11 @@
"integrity": "sha512-7JkwTEE1hlRKETbCFd8HDZeLiQIUcl8rC6JgNjvHCNaxOeNmQ9V4LvQXRUsKIV2CC73qKxljwVhToaA3kLRqTw==",
"dev": true
},
+ "chain-function": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/chain-function/-/chain-function-1.0.1.tgz",
+ "integrity": "sha512-SxltgMwL9uCko5/ZCLiyG2B7R9fY4pDZUw7hJ4MhirdjBLosoDqkWABi3XMucddHdLiFJMb7PD2MZifZriuMTg=="
+ },
"chalk": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
@@ -3107,6 +3112,11 @@
}
}
},
+ "clone": {
+ "version": "2.1.2",
+ "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
+ "integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18="
+ },
"clone-deep": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz",
@@ -3607,6 +3617,91 @@
"integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
"dev": true
},
+ "d3-color": {
+ "version": "1.4.1",
+ "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-1.4.1.tgz",
+ "integrity": "sha512-p2sTHSLCJI2QKunbGb7ocOh7DgTAn8IrLx21QRc/BSnodXM4sv6aLQlnfpvehFMLZEfBc6g9pH9SWQccFYfJ9Q=="
+ },
+ "d3-dispatch": {
+ "version": "1.0.6",
+ "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-1.0.6.tgz",
+ "integrity": "sha512-fVjoElzjhCEy+Hbn8KygnmMS7Or0a9sI2UzGwoB7cCtvI1XpVN9GpoYlnb3xt2YV66oXYb1fLJ8GMvP4hdU1RA=="
+ },
+ "d3-drag": {
+ "version": "1.2.5",
+ "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-1.2.5.tgz",
+ "integrity": "sha512-rD1ohlkKQwMZYkQlYVCrSFxsWPzI97+W+PaEIBNTMxRuxz9RF0Hi5nJWHGVJ3Om9d2fRTe1yOBINJyy/ahV95w==",
+ "requires": {
+ "d3-dispatch": "1",
+ "d3-selection": "1"
+ }
+ },
+ "d3-ease": {
+ "version": "1.0.7",
+ "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-1.0.7.tgz",
+ "integrity": "sha512-lx14ZPYkhNx0s/2HX5sLFUI3mbasHjSSpwO/KaaNACweVwxUruKyWVcb293wMv1RqTPZyZ8kSZ2NogUZNcLOFQ=="
+ },
+ "d3-hierarchy": {
+ "version": "1.1.9",
+ "resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-1.1.9.tgz",
+ "integrity": "sha512-j8tPxlqh1srJHAtxfvOUwKNYJkQuBFdM1+JAUfq6xqH5eAqf93L7oG1NVqDa4CpFZNvnNKtCYEUC8KY9yEn9lQ=="
+ },
+ "d3-interpolate": {
+ "version": "1.4.0",
+ "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-1.4.0.tgz",
+ "integrity": "sha512-V9znK0zc3jOPV4VD2zZn0sDhZU3WAE2bmlxdIwwQPPzPjvyLkd8B3JUVdS1IDUFDkWZ72c9qnv1GK2ZagTZ8EA==",
+ "requires": {
+ "d3-color": "1"
+ }
+ },
+ "d3-path": {
+ "version": "1.0.9",
+ "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz",
+ "integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg=="
+ },
+ "d3-selection": {
+ "version": "1.4.2",
+ "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-1.4.2.tgz",
+ "integrity": "sha512-SJ0BqYihzOjDnnlfyeHT0e30k0K1+5sR3d5fNueCNeuhZTnGw4M4o8mqJchSwgKMXCNFo+e2VTChiSJ0vYtXkg=="
+ },
+ "d3-shape": {
+ "version": "1.3.7",
+ "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.7.tgz",
+ "integrity": "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==",
+ "requires": {
+ "d3-path": "1"
+ }
+ },
+ "d3-timer": {
+ "version": "1.0.10",
+ "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-1.0.10.tgz",
+ "integrity": "sha512-B1JDm0XDaQC+uvo4DT79H0XmBskgS3l6Ve+1SBCfxgmtIb1AVrPIoqd+nPSv+loMX8szQ0sVUhGngL7D5QPiXw=="
+ },
+ "d3-transition": {
+ "version": "1.3.2",
+ "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-1.3.2.tgz",
+ "integrity": "sha512-sc0gRU4PFqZ47lPVHloMn9tlPcv8jxgOQg+0zjhfZXMQuvppjG6YuwdMBE0TuqCZjeJkLecku/l9R0JPcRhaDA==",
+ "requires": {
+ "d3-color": "1",
+ "d3-dispatch": "1",
+ "d3-ease": "1",
+ "d3-interpolate": "1",
+ "d3-selection": "^1.1.0",
+ "d3-timer": "1"
+ }
+ },
+ "d3-zoom": {
+ "version": "1.8.3",
+ "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-1.8.3.tgz",
+ "integrity": "sha512-VoLXTK4wvy1a0JpH2Il+F2CiOhVu7VRXWF5M/LroMIh3/zBAC3WAt7QoIvPibOavVo20hN6/37vwAsdBejLyKQ==",
+ "requires": {
+ "d3-dispatch": "1",
+ "d3-drag": "1",
+ "d3-interpolate": "1",
+ "d3-selection": "1",
+ "d3-transition": "1"
+ }
+ },
"date-fns": {
"version": "2.16.1",
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.16.1.tgz",
@@ -3834,6 +3929,11 @@
"resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
"integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak="
},
+ "dequal": {
+ "version": "2.0.2",
+ "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.2.tgz",
+ "integrity": "sha512-q9K8BlJVxK7hQYqa6XISGmBZbtQQWVXSrRrWreHC94rMt1QL/Impruc+7p2CYSYuVIUr+YCt6hjrs1kkdJRTug=="
+ },
"destroy": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
@@ -3941,6 +4041,14 @@
"utila": "~0.4"
}
},
+ "dom-helpers": {
+ "version": "3.4.0",
+ "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.4.0.tgz",
+ "integrity": "sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==",
+ "requires": {
+ "@babel/runtime": "^7.1.2"
+ }
+ },
"dom-serializer": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.2.0.tgz",
@@ -8051,6 +8159,28 @@
"resolved": "https://registry.npmjs.org/react-codemirror2/-/react-codemirror2-7.2.1.tgz",
"integrity": "sha512-t7YFmz1AXdlImgHXA9Ja0T6AWuopilub24jRaQdPVbzUJVNKIYuy3uCFZYa7CE5S3UW6SrSa5nAqVQvtzRF9gw=="
},
+ "react-d3-tree": {
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/react-d3-tree/-/react-d3-tree-2.0.1.tgz",
+ "integrity": "sha512-Hm9Ic1WEtn8OPy951TVuYuOafVEdxsQYqraDh7aOH8KTdtWBCVckfO8HZglR6LH0LsFH8TaDXiEx/GRKQmU7hg==",
+ "requires": {
+ "clone": "^2.1.1",
+ "d3-hierarchy": "^1.1.9",
+ "d3-selection": "^1.4.2",
+ "d3-shape": "^1.3.7",
+ "d3-zoom": "^1.8.3",
+ "dequal": "^2.0.2",
+ "react-transition-group": "^1.1.3",
+ "uuid": "^8.3.1"
+ },
+ "dependencies": {
+ "uuid": {
+ "version": "8.3.2",
+ "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+ "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
+ }
+ }
+ },
"react-dom": {
"version": "17.0.1",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.1.tgz",
@@ -8121,6 +8251,18 @@
"prop-types": "^15.5.0"
}
},
+ "react-transition-group": {
+ "version": "1.2.1",
+ "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-1.2.1.tgz",
+ "integrity": "sha512-CWaL3laCmgAFdxdKbhhps+c0HRGF4c+hdM4H23+FI1QBNUyx/AMeIJGWorehPNSaKnQNOAxL7PQmqMu78CDj3Q==",
+ "requires": {
+ "chain-function": "^1.0.0",
+ "dom-helpers": "^3.2.0",
+ "loose-envify": "^1.3.1",
+ "prop-types": "^15.5.6",
+ "warning": "^3.0.0"
+ }
+ },
"read-config-file": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/read-config-file/-/read-config-file-6.0.0.tgz",
@@ -10035,6 +10177,14 @@
"rxjs": "^6.6.3"
}
},
+ "warning": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
+ "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
+ "requires": {
+ "loose-envify": "^1.0.0"
+ }
+ },
"watchpack": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.1.0.tgz",
diff --git a/package.json b/package.json
index c58b53b..69e0aa0 100644
--- a/package.json
+++ b/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",
diff --git a/server/schema.js b/server/schema.js
index 4ac0b5a..47cd847 100644
--- a/server/schema.js
+++ b/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)
diff --git a/src/Components/MongoSchemaIDE.js b/src/Components/MongoSchemaIDE.js
index c84fcd9..604042f 100644
--- a/src/Components/MongoSchemaIDE.js
+++ b/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) {
diff --git a/src/Components/Tree.js b/src/Components/Tree.js
new file mode 100644
index 0000000..feba6fe
--- /dev/null
+++ b/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 (
+ // `` will fill width/height of its container; in this case `#treeWrapper`.
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/containers/Container.js b/src/containers/Container.js
index 3030740..d4acf97 100644
--- a/src/containers/Container.js
+++ b/src/containers/Container.js
@@ -4,6 +4,7 @@ import MongoDBURI from '../Components/MongoDBURI';
import MongoSchemaIDE from '../Components/MongoSchemaIDE';
import DropDownMenu from "../Components/DropDownMenu";
import PlaygroundButton from '../Components/PlaygroundButton';
+import Tree from '../Components/Tree';
const Container = () => {
const [schemaData, setSchemaData] = useState({});
@@ -26,7 +27,7 @@ const Container = () => {
})
.then(res => res.json())
.then((data) => {
- console.log('data string from fetch', data)
+ // console.log('data string from fetch', data)
setSchemaData(JSON.parse(data));
})
.catch(err => console.log(err))
@@ -44,8 +45,8 @@ const Container = () => {
if (clicked.includes(clickedSchema)) {
// console.log('includes pass')
setClicked(clicked.filter(tool => {
- console.log('filter pass')
- console.log('tool is ===', tool)
+ // console.log('filter pass')
+ // console.log('tool is ===', tool)
return tool !== clickedSchema
}));
} else {
@@ -56,8 +57,8 @@ const Container = () => {
// sendSchema function builds the selectedSchemas object with the schemas that are selected in the DropDownMenu
// sends the selectedSchemas to the backend for migration
const sendSchemas = (e) => {
- console.log('clicked array',clicked);
- console.log('WOAAAAAAAAAAA', schemaData)
+ // console.log('clicked array',clicked);
+ // console.log('WOAAAAAAAAAAA', schemaData)
//sending obj data to backend
let selectedSchemas = {};
for(let i = 0; i < clicked.length; i+=1) {
@@ -75,7 +76,7 @@ const Container = () => {
})
.then(res => res.json())
.then(data => {
- console.log('DATA!!!!', data);
+ // console.log('DATA!!!!', data);
setGraphQLSchema(data);
})
.catch((error) => {
@@ -92,6 +93,7 @@ const Container = () => {
+
diff --git a/src/public/custom-tree.css b/src/public/custom-tree.css
new file mode 100644
index 0000000..9eccc4d
--- /dev/null
+++ b/src/public/custom-tree.css
@@ -0,0 +1,15 @@
+.node__root > circle {
+ fill: red;
+}
+
+.node__branch > circle {
+ fill: yellow;
+ stroke: #2d3748;
+
+}
+
+.node__leaf > circle {
+ fill: green;
+
+ /* Let's also make the radius of leaf nodes larger */
+}