Merge pull request #148 from oslabs-beta/dev

Beta v1.0.0

README.md

@@ -1,4 +1,4 @@
-<p align="center" ><img src="public/assets/pictures/ProtographQLBanner.png" width="650px"></p>
+<p align="center" ><img src="public/assets/pictures/ProtographQLBanner.png" width="800px"></p>
 
 # ProtoGraphQL
 
@@ -24,13 +24,25 @@ Upcoming releases include adding visual indicators for table relationships in th
 
 1.	When the application loads, click on **Add Table** and populate the table form with a name and new fields. Optionally, you may also use the last three inputs in the form to create relationships to other tables. When you are done, click **Save**.
 
+<p align="center"><kbd><img src="public/assets/pictures/add-table demo.mov.gif" width="800px"></kbd><p>
+
 2.	Navigate to the **Schema**, **Code**, and **Visualize** tabs to toggle views:
     * **Schema** - view, edit, or delete tables you've added
+
+    <p align="center"><kbd><img src="public/assets/pictures/Schema_Screenshot.png" width="800px"></kbd></p>
+
     * **Code** - view generated GraphQL and SQL code before export
+
+    <p align="center"><kbd><img src="public/assets/pictures/Code_Screenshot.png" width="800px"></kbd></p>
+
     * **Visualize** - view the GraphQL schema intuitively as a simple tree
+
+   <p align="center" ><kbd><img src="public/assets/pictures/tree visializer demo.gif" width="800px"></kbd></p>
 
 3.	Export the code by clicking the **Export** icon. 
 
+   <p align="center" ><kbd><img src="public/assets/pictures/Export_Screenshot.png" width="800px"></kbd></p>
+
 4. Enter your Postgres database URI and then select the directory you want to save your executable GraphQL server.
 
 ## How to Run GraphQL Server:

package.json

@@ -7,71 +7,113 @@
     "start": "electron .",
     "build": "webpack -p",
     "dev": "webpack-dev-server --mode=development",
-    "test": "test",
-    "package": "electron-forge make",
-    "package-linux": "electron-packager . --linux --asar",
-    "package-mac": "electron-packager . --darwin --asar",
-    "package-win": "electron-packager . --platform win32 --arch x64 --asar"
+    "pack": "build --dir",
+    "dist": "build",
+    "package-all": "build && electron-builder build -mwl",
+    "test": "test"
+  },
+  "build": {
+    "productName": "ProtoGraphQL",
+    "appId": "org.oslabs.Protographql.todo",
+    "asar": false,
+    "files": [
+      "public/",
+      "index.html",
+      "main.js",
+      "apollo-server/",
+      "package.json"
+    ],
+    "dmg": {
+      "contents": [
+        {
+          "x": 130,
+          "y": 220
+        },
+        {
+          "x": 410,
+          "y": 220,
+          "type": "link",
+          "path": "/Applications"
+        }
+      ]
+    },
+    "win": {
+      "target": [
+        "nsis",
+        "msi"
+      ]
+    },
+    "linux": {
+      "target": [
+        "deb",
+        "rpm",
+        "snap",
+        "AppImage"
+      ],
+      "category": "Development"
+    },
+    "directories": {
+      "buildResources": "public/assets/pictures/icon",
+      "output": "release"
+    },
+    "publish": {
+      "provider": "github",
+      "owner": "oslabs-beta",
+      "repo": "protographql",
+      "private": false
+    }
   },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/protographql/protographql.git"
   },
-  "author": "",
+  "author": {
+    "name": "ProtoGraphQL",
+    "email": "[email protected]",
+    "url": "https://protographql.todo.org"
+  },
+  "contributors": [
+    {
+      "name": "Alena Budzko",
+      "email": "#TODO",
+      "url": "#TODO"
+    },
+    {
+      "name": "Bryan Fong",
+      "email": "",
+      "url": ""
+    },
+    {
+      "name": "Rodolfo Guzman",
+      "email": "",
+      "url": ""
+    },
+    {
+      "name": "Jarred Jack-Harewood",
+      "email": "",
+      "url": ""
+    },
+    {
+      "name": "Geoffrey Lin",
+      "email": "",
+      "url": ""
+    }
+  ],
   "license": "ISC",
   "bugs": {
     "url": "https://github.com/protographql/protographql/issues"
   },
   "homepage": "https://github.com/protographql/protographql#readme",
-  "config": {
-    "forge": {
-      "electronPackagerConfig": {
-        "asar": true,
-        "executableName": "protographql",
-        "icon": "public/pictures/icon/icon",
-        "overwrite": true,
-        "prune": true,
-        "arch": "x64"
-      },
-      "make_targets": {
-        "darwin": [
-          "dmg"
-        ],
-        "linux": [
-          "deb"
-        ]
-      },
-      "makers": [
-        {
-          "name": "@electron-forge/maker-deb",
-          "config": {
-            "options": {
-              "homepage": "https://github.com/protographql/protographql#readme"
-            }
-          }
-        },
-        {
-          "name": "@electron-forge/maker-dmg",
-          "config": {
-            "format": "ULFO"
-          }
-        }
-      ]
-    }
-  },
   "devDependencies": {
     "@babel/core": "^7.4.5",
     "@babel/preset-env": "^7.4.5",
     "@babel/preset-react": "^7.0.0",
-    "@electron-forge/maker-deb": "^6.0.0-beta.39",
-    "@electron-forge/maker-squirrel": "^6.0.0-beta.39",
     "@material-ui/core": "^4.0.2",
     "awesome-typescript-loader": "^5.2.1",
     "babel-loader": "^8.0.6",
     "css-loader": "^2.1.1",
     "d3": "^5.9.2",
     "electron": "^5.0.5",
-    "electron-packager": "^14.0.0",
     "enzyme": "^3.9.0",
     "eslint": "^5.16.0",
     "eslint-plugin-react": "^7.13.0",
@@ -87,12 +129,12 @@
     "webpack-dev-server": "^3.5.1"
   },
   "dependencies": {
-    "archiver": "^3.0.0",
     "@material-ui/icons": "^4.0.1",
     "@types/react": "^16.8.19",
     "@types/react-dom": "^16.8.4",
+    "archiver": "^3.0.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-draggable": "^3.3.0"
   }
-}
+}

public/index.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="UTF-8" />
+  <title>ProtoGraphQL</title>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
+  <!-- Fonts to support Material Design -->
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" />
+  <!-- Icons to support Material Design -->
+  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
+  <!-- Roboto font -->
+  <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
+  <!-- icons library -->
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css"
+    integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
+  <link rel="stylesheet" href="styles.css">
+</head>
+
+<body>
+  <div id="root"></div>
+  <script src="bundle.js"></script>
+</body>
+
+</html>

src/components/sideBar/visualizerSidebar.jsx

@@ -3,6 +3,7 @@ import styled from 'styled-components';
 import { Store } from '../../state/store';
 import { queryTypeCreator } from '../../utils/buildVisualizerJson'
 import VizType from './vizType';
+import deepClone from '../../utils/deepClone'
 
 /*-------------------- Styled Components --------------------*/
 
@@ -36,7 +37,7 @@ const ColorLegend = styled.div`
   font-size: 18px;
   font-weight: 500;
   background-color: white;
-  z-index: 9999;
+  z-index: 2;
 `
 
 const ColorContainer = styled.div`
@@ -90,10 +91,10 @@ function VisualizerSideBar() {
   } = useContext(Store);
 
 
-  const queryTypes = queryTypeCreator(tables)
+  const queryTypes = queryTypeCreator(deepClone(tables))
   const vizTypes = []
   for (let i in queryTypes) {
-    vizTypes.push(<VizType table={queryTypes[i]} key={queryTypes[i] + 'queryType'}></VizType>)
+    vizTypes.push(<VizType table={queryTypes[i]} key={i + 'queryType'}></VizType>)
   }
 
   return (