Merge pull request #49 from invanalabs/develop

final revisions for alpha release

README.md

@@ -2,9 +2,9 @@
 
 Open source, extendable data visualiser for Apache TinkerPop's Gremlin supported graph databases.
 
-This project is at Alpha Release currently, and expected 
+**This project is at Alpha Release currently, and expected 
 to go into Beta in few weeks depending on the feed back
-from the Community. You can access live version of the demo hosted on [heroku](https://graph-explorer.herokuapp.com/) 
+from the Community.** You can access live version of the demo hosted on [heroku](https://graph-explorer.herokuapp.com/) 
 
 **Note:** You still need gremlin server running on your local or remote.
 
@@ -21,10 +21,7 @@ Get the UI graph-explorer server live in minutes.
 
 #### Use Image from Docker Hub
 
-```shell script
-# for stable release
-docker run -p 8888:8888 -d --name graph-explorer invanalabs/graph-explorer:alpha
-
+```shell script.
 # for latest release
 docker run -p 8888:8888 -d --name graph-explorer invanalabs/graph-explorer
 
@@ -38,7 +35,14 @@ docker build . -t invana-graph-explorer
 docker run -p 8888:8888 -d invana-graph-explorer
 ```
 
-![screenshot](./screenshot.png)
+## Screenshots
+![1](./docs/screenshots/1.png)
+![2](./docs/screenshots/2.png)
+![3](./docs/screenshots/3.png)
+![4](./docs/screenshots/4.png)
+![5](./docs/screenshots/5.png)
+![6](./docs/screenshots/6.png)
+![7](docs/screenshots/7.png)
 
 
 ## License

src/config.js

@@ -39,3 +39,4 @@ export const linkCurvature = .85;
 
 export const managementVertexLabel = "InvanaManagement";
 export const historyLocalStorageKey = "GRAPH_EXPLORER_HISTORY";
+export const DEMO_URL = "https://www.youtube.com/watch?v=7jdgUOZUtlQ";

src/core/components/about.js

@@ -13,8 +13,8 @@ export default class AboutComponent extends React.Component {
  size={this.props.size} onClose={this.props.onClose}>
 
 
- <h3 style={{"margin-bottom": "0", "fontWeight": "20px"}}>Graph Explorer <small>({VERSION})</small></h3>
- <p style={{"margin-top": "0"}}>
+ <h3 style={{"marginBottom": "0", "fontWeight": "20px"}}>Graph Explorer <small>({VERSION})</small></h3>
+ <p style={{"marginTop": "0"}}>
  {ABOUT_TEXT} <br/>
  </p>
  <p>

src/core/components/learn-queries.js

@@ -2,35 +2,38 @@ export const q1CreateData = "// Adding data of type `Person`\n\n" +
  "person = g.addV('Person')\n" +
  ".property('name', 'Ravi Raja')\n" +
  ".iterate();\n\n" +
- "// Adding data of type `Project`\n\n" +
- "project = g.addV('Project')\n" +
+ "// Adding data of type `GitHubProject`\n\n" +
+ "project = g.addV('GitHubProject')\n" +
  ".property('name', 'Graph Explorer')\n" +
- ".iterate();";
-
-export const q2allData = "// Display the two nodes \n" +
- "g.V().limit(2).toList()";
+ ".iterate();\n" +
+ "\n" +
+  "// show the results back\n" +
+ "nodes = g.V().limit(2).toList();";
 
 
-export const q3 = "// this will update existing property and adds a new property.\n\n" +
+export const q3 = "// this will update existing property `name` and adds a new properties" +
+ "`full_name` and `profile_pic`.\n\n" +
  "g\n" +
  ".V()\n" +
  ".hasLabel('Person')\n" +
  ".has('name', 'Ravi Raja')\n" +
  ".property('name', 'rrmerugu')\n" +
  ".property('full_name', 'Ravi Raja Merugu')\n" +
  ".property('profile_pic', 'https://avatars1.githubusercontent.com/u/4606947')\n" +
- ".iterate()\n"
+ ".iterate()\n;" +
+ "\n" +
+ "nodes = g.V().limit(2).toList();\n"
 
 
-export const q4 = "// this will add a relation ship between Person and Project data.\n\n" +
+export const q4 = "// this will add a relation ship between Person and GitHubProject data.\n\n" +
  "g\n" +
  ".V()\n" +
  ".hasLabel('Person')\n" +
  ".has('name','rrmerugu')\n" +
  ".as('person')\n" +
  "\n" +
  ".V()\n" +
- ".hasLabel('Project')\n" +
+ ".hasLabel('GitHubProject')\n" +
  ".has('name','Graph Explorer')\n" +
  "\n" +
  ".addE('authored')\n" +

src/core/components/learn.js

@@ -3,7 +3,7 @@ import FlyOutUI from "../ui/flyout";
 import {faExternalLinkSquareAlt} from "@fortawesome/free-solid-svg-icons";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import "./learn.scss";
-import {q1CreateData, q2allData, q3, q4, q5} from "./learn-queries";
+import {q1CreateData, q3, q4, q5} from "./learn-queries";
 
 export default class LearnFlyOut extends React.Component {
 
@@ -21,32 +21,22 @@ export default class LearnFlyOut extends React.Component {
  <ul className={"vertical list"}>
  <li>
  <a onClick={() => this.props.addQueryToConsole(q1CreateData)}>
- 1. Add a `Person` and `Organisation` nodes</a>
- </li>
- <li>
- <a onClick={() => this.props.addQueryToConsole(q2allData)}>
- 2. View the nodes</a>
+ 1. Add a `Person` and `GitHubProject` nodes</a>
  </li>
  <li>
  <a onClick={() => this.props.addQueryToConsole(q3)}>
- 3. Update `Person` properties</a>
+ 2. Update properties of the Node</a>
  </li>
  <li>
  <a onClick={() => this.props.addQueryToConsole(q4)}>
- 4. Add a relations between both the nodes.</a>
- </li>
- <li>
- <a onClick={() => this.props.addQueryToConsole(q5)}>
- 5. View all the connections between the nodes.
- </a>
- </li>
- <li>
- <a onClick={() => this.props.onClose()}>
- 6. Close this and explore data
- </a>
+ 3. Add a relation between both the nodes.</a>
  </li>
 
+
  </ul>
+ <p>Awesome! <u><a onClick={() => this.props.onClose()}> Close this tour </a></u> and start exploring
+ your graph data.
+ </p>
  <h3 style={{"marginTop": "30px"}}>More Resources</h3>
  <ul className={"vertical list fs-14"}>
  <li>

src/core/components/vertex-options.js

@@ -100,8 +100,8 @@ export default class VertexOptions extends GremlinHeadlessComponent {
  placeholder={"borderColor"} spellCheck="false"
  defaultValue={thisNodeOptions.borderColor || selectedNode.meta.shapeOptions.strokeColor}/>
 
- <label className={""}>Background Image (from web)</label>
- <input type="text" name={"bgImageUrl"} placeholder={"bgImage (optional)"}
+ {/*<label className={""}>Background Image (from web)</label>*/}
+ <input type="hidden" name={"bgImageUrl"} placeholder={"bgImage (optional)"}
  spellCheck="false"
  defaultValue={thisNodeOptions.bgImageUrl || selectedNode.meta.bgImageUrl}/>
 

src/core/ui/canvas/graph/selected-data.scss

@@ -1,7 +1,6 @@
 @import "../../../../config";
 
 .SelectedDataHeading {
- font-size: 12px;
  background: #585858;
  color: $defaultTextColor;
  padding: 3px 0;

src/core/ui/flyout/flyout.scss

@@ -5,7 +5,7 @@
  z-index: 10000;
  display: none;
  /*color: #555555;*/
- font-size: 12px;
+ //font-size: 12px;
  line-height: 1.2rem;
  word-wrap: break-word;
  //font-family: Courier;
@@ -28,7 +28,7 @@
  padding: 1px 5px;
  border-radius: 2px;
  margin-right: 0;
- font-size: 12px;
+ //font-size: 12px;
  box-shadow: none;
  }
 

src/index.scss

@@ -8,7 +8,7 @@ body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: $canvasBgColor;
- font-size: 14px;
+ font-size: 12px;
  color: $defaultTextColor;
 }
 

src/views/connect.js

@@ -1,7 +1,7 @@
 import React from "react";
 import Modal from "../core/ui/modal";
 import {setDataToLocalStorage} from "../core/utils";
-import {gremlinServerUrlKey , VERSION, ABOUT_TEXT} from "../config";
+import {gremlinServerUrlKey, VERSION, ABOUT_TEXT, DEMO_URL} from "../config";
 import "./connect.scss";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import {faPlayCircle} from "@fortawesome/free-solid-svg-icons";
@@ -21,6 +21,10 @@ export default class SetupGremlinServerConnection extends React.Component {
  window.location.href = "/";
  }
 
+ openDemo() {
+ window.open(DEMO_URL);
+
+ }
 
  render() {
 
@@ -42,7 +46,8 @@ export default class SetupGremlinServerConnection extends React.Component {
  <br/>
  <button type={"submit"} className={"primary-btn button"}>Connect</button>
 
- <button type={"button"} className={" button secondary-btn ml-10"}>
+ <button onClick={() => this.openDemo()} type={"button"}
+ className={" button secondary-btn ml-10"}>
  <FontAwesomeIcon icon={faPlayCircle}/> watch demo
  </button>
  </form>