Skip to content

Commit 55acaaf

Browse files
wwlibwwlib
committed
updated docs
1 parent b9acc01 commit 55acaaf

19 files changed

+265
-8
lines changed

‎README.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ yarn dist:dir
3131
- Use the New File button to create a new local graph File
3232
- Double-click nodes and relationships to edit them
3333

34-
![graph editor](./docs/img/GraphEditor.png)
34+
![graph editor](./docs/img/graph-editor-animals.png)
3535

3636
-Use the New Neo4j button to create a connection to a live neo4j database
3737
- set the connection url, user, password, etc.
@@ -41,13 +41,13 @@ yarn dist:dir
4141
"type": "neo4j",
4242
"url": "bolt://localhost:7687",
4343
"user": "neo4j",
44-
"password": "neo4j",
44+
"password": "<PASSWORD>",
4545
"initialCypher": "MATCH (n)-[r]-(p) return n,r,p limit 100"
4646
}
4747
```
4848

49-
![new neo4j](./docs/img/GraphEditor_NewNeo4j.png)
49+
![new neo4j](./docs/img/graph-editor-neo4j-new.png)
5050

5151
- Changes in the editor are reflected in the neo4j browser
5252

53-
![live neo4j](./docs/img/GraphEditor_LiveNeo4j.png)
53+
![live neo4j](./docs/img/neo4j-kg-tutorial-neo4j-browser.png)

‎docs/graph-editor-intro.html‎

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
<html>
2+
<head>
3+
<title>graph-editor - Intro</title>
4+
<link rel="stylesheet" href="css/bootstrap.css" type="text/css">
5+
<style>
6+
html {
7+
display: table;
8+
margin: auto;
9+
}
10+
11+
body {
12+
display: table-cell;
13+
vertical-align: middle;
14+
max-width: 800px;
15+
}
16+
</style>
17+
</head>
18+
<body>
19+
20+
<h2 id="grapheditor">graph-editor</h2>
21+
22+
<p><em>Subject</em>: Graph Editor <br />
23+
<em>Language</em>: TypeScript (node), React, Electron, webpack <br />
24+
<em>Repo</em>: [email protected]:wwlib/graph-editor.git <br />
25+
<em>Related</em>: Neo4j Knowledge Graph Example: <a href="https://wwlib.github.io/neo4j-knowledge-graph/">https://wwlib.github.io/neo4j-knowledge-graph/</a></p>
26+
27+
<p><a href="https://wwlib.github.io/graph-editor/">https://wwlib.github.io/graph-editor/</a></p>
28+
29+
<p><a href="https://github.com/wwlib/graph-editor">https://github.com/wwlib/graph-editor</a></p>
30+
31+
<p><a href="https://wwlib.github.io/">https://wwlib.github.io</a></p>
32+
33+
<p>Graph Editor is a tool for viewing and interactively editing Neo4j graphs. It can also be used to create, edit and share simple graph layouts using a json file format.</p>
34+
35+
<p>Note: Graph Editor is uses the Graph Diagram library (<a href="https://wwlib.github.io/graph-diagram/">https://wwlib.github.io/graph-diagram/</a>) which is a TypeScript port of a graph-editing project called Arrows, originally created by Alistair Jones at Neo4j (<a href="www.apcjones.com/arrows/"></a>).</p>
36+
37+
<!--
38+
<h3 id="overview">Overview</h3>
39+
40+
<p>Overview video (YouTube): <a href="https://www.youtube.com/embed/pEps_xaUWVo">https://www.youtube.com/embed/YFRiWiZJPkU</a></p>
41+
-->
42+
43+
<h3 id="gettingstarted">Getting Started</h3>
44+
45+
<h4 id="build">build</h4>
46+
47+
<pre><code>
48+
git clone [email protected]:wwlib/graph-editor.git
49+
cd graph-editor
50+
yarn
51+
yarn dev
52+
</code></pre>
53+
54+
<h4 id="newgraph">New Graph</h4>
55+
56+
<p>When Graph Editor starts it presents a new empty graph. The most common actions include:</p>
57+
58+
<ul>
59+
<li>New node: click the + Node button (top left) or drag a new node by clicking on the perimeter of an existing node and dragging.</li>
60+
61+
<li>Link two nodes: Click on the perimeter of the source node and drag onto the target node</li>
62+
63+
<li>Edit a node/link: double-click on the node/link
64+
65+
66+
<ul>
67+
<li>The node/link type will be displayed on the node/link</li>
68+
69+
<li>For nodes that have a name property, the name will also be displayed on the node</li></ul>
70+
</li>
71+
</ul>
72+
73+
<h4 id="saveagraph">Save a graph</h4>
74+
75+
<ul>
76+
<li>Click the Save button in the file panel (top right)
77+
78+
79+
<ul>
80+
<li>If prompted, enter a file name in the file details dialog</li>
81+
82+
<li>Click the Save button in the file panel (top right)</li></ul>
83+
</li>
84+
</ul>
85+
86+
<h4 id="importagraphjsonfile">Import a graph json file</h4>
87+
88+
<ul>
89+
<li>Click on the Import button in the file panel (top right)
90+
91+
92+
<ul>
93+
<li>Navigate to a valid Graph Editor json file</li>
94+
95+
<li>Click the Save button in the file panel (top right)</li></ul>
96+
</li>
97+
</ul>
98+
99+
<h4 id="exportagraph">Export a graph</h4>
100+
101+
<ul>
102+
<li>(manual, for now). Click on the Graph button in the file panel (top right)
103+
104+
105+
<ul>
106+
<li>Copy the contents of the Export dialog into a new file (using a text editor)</li>
107+
108+
<li>Save the file with a json extension. i.e. my-graph.json</li></ul>
109+
</li>
110+
</ul>
111+
112+
<h4 id="connecttoaneo4jgraph">Connect to a neo4j graph</h4>
113+
114+
<ul>
115+
<li>Click the New Neo4j button in the file panel (top right)
116+
117+
118+
<ul>
119+
<li>Give the file (connection) a name</li>
120+
121+
<li>Fill out the url, user, and password fields.</li>
122+
123+
<li>The initialCypher field is optional and can be blank</li>
124+
125+
<li>Click the Save button in the file panel (top right)</li></ul>
126+
</li>
127+
</ul>
128+
129+
<h4 id="localstaticgraphs">Local, Static Graphs</h4>
130+
131+
<p><img src="./img/graph-editor-animals.png" alt="graph-editor" /></p>
132+
133+
<p><img src="./img/graph-editor-new.png" alt="graph-editor" /></p>
134+
135+
<p><img src="./img/graph-editor-edit-node.png" alt="graph-editor" /></p>
136+
137+
<p><img src="./img/graph-editor-edit-relationship.png" alt="graph-editor" /></p>
138+
139+
<p><img src="./img/graph-editor-save.png" alt="graph-editor" /></p>
140+
141+
<h4 id="connectingtoneo4j">Connecting to Neo4j</h4>
142+
143+
<p><img src="./img/graph-editor-neo4j-new.png" alt="graph-editor" /></p>
144+
145+
<h4 id="neo4jsavedcyphers">Neo4j: Saved Cyphers</h4>
146+
147+
<p><img src="./img/graph-editor-animals-IS_A-neo-saved.png" alt="graph-editor" /></p>
148+
149+
<h4 id="importandexport">Import and Export</h4>
150+
151+
<p><img src="./img/graph-editor-export-graph.png" alt="graph-editor" /></p>
152+
153+
<p><img src="./img/graph-editor-export-cypher.png" alt="graph-editor" /></p>
154+
155+
<p><img src="./img/graph-editor-edit-css.png" alt="graph-editor" /></p>
156+
157+
</body>
158+
</html>

‎docs/graph-editor-intro.md‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
## graph-editor
2+
3+
*Subject*: Graph Editor
4+
*Language*: TypeScript (node), React, Electron, webpack
5+
*Repo*: [email protected]:wwlib/graph-editor.git
6+
*Related*: Neo4j Knowledge Graph Example: [https://wwlib.github.io/neo4j-knowledge-graph/](https://wwlib.github.io/neo4j-knowledge-graph/)
7+
8+
[https://wwlib.github.io/graph-editor/](https://wwlib.github.io/graph-editor/)
9+
10+
[https://github.com/wwlib/graph-editor](https://github.com/wwlib/graph-editor)
11+
12+
[https://wwlib.github.io](https://wwlib.github.io/)
13+
14+
Graph Editor is a tool for viewing and interactively editing Neo4j graphs. It can also be used to create, edit and share simple graph layouts using a json file format.
15+
16+
Note: Graph Editor is uses the Graph Diagram library ([https://wwlib.github.io/graph-diagram/](https://wwlib.github.io/graph-diagram/)) which is a TypeScript port of a graph-editing project called Arrows, originally created by Alistair Jones at Neo4j ([](www.apcjones.com/arrows/)).
17+
18+
<!--
19+
### Overview
20+
21+
Overview video (YouTube): [https://www.youtube.com/embed/YFRiWiZJPkU](https://www.youtube.com/embed/pEps_xaUWVo)
22+
-->
23+
24+
### Getting Started
25+
26+
#### build
27+
28+
```
29+
git clone [email protected]:wwlib/graph-editor.git
30+
cd graph-editor
31+
yarn
32+
yarn dev
33+
```
34+
35+
#### New Graph
36+
37+
When Graph Editor starts it presents a new empty graph. The most common actions include:
38+
- New node: click the + Node button (top left) or drag a new node by clicking on the perimeter of an existing node and dragging.
39+
- Link two nodes: Click on the perimeter of the source node and drag onto the target node
40+
- Edit a node/link: double-click on the node/link
41+
- The node/link type will be displayed on the node/link
42+
- For nodes that have a name property, the name will also be displayed on the node
43+
44+
#### Save a graph
45+
- Click the Save button in the file panel (top right)
46+
- If prompted, enter a file name in the file details dialog
47+
- Click the Save button in the file panel (top right)
48+
49+
#### Import a graph json file
50+
- Click on the Import button in the file panel (top right)
51+
- Navigate to a valid Graph Editor json file
52+
- Click the Save button in the file panel (top right)
53+
54+
#### Export a graph
55+
- (manual, for now). Click on the Graph button in the file panel (top right)
56+
- Copy the contents of the Export dialog into a new file (using a text editor)
57+
- Save the file with a json extension. i.e. my-graph.json
58+
59+
#### Connect to a neo4j graph
60+
61+
- Click the New Neo4j button in the file panel (top right)
62+
- Give the file (connection) a name
63+
- Fill out the url, user, and password fields.
64+
- The initialCypher field is optional and can be blank
65+
- Click the Save button in the file panel (top right)
66+
67+
#### Local, Static Graphs
68+
69+
![graph-editor](./img/graph-editor-animals.png)
70+
71+
![graph-editor](./img/graph-editor-new.png)
72+
73+
![graph-editor](./img/graph-editor-edit-node.png)
74+
75+
![graph-editor](./img/graph-editor-edit-relationship.png)
76+
77+
![graph-editor](./img/graph-editor-save.png)
78+
79+
80+
#### Connecting to Neo4j
81+
82+
![graph-editor](./img/graph-editor-neo4j-new.png)
83+
84+
#### Neo4j: Saved Cyphers
85+
86+
![graph-editor](./img/graph-editor-animals-IS_A-neo-saved.png)
87+
88+
89+
#### Import and Export
90+
91+
![graph-editor](./img/graph-editor-export-graph.png)
92+
93+
![graph-editor](./img/graph-editor-export-cypher.png)
94+
95+
![graph-editor](./img/graph-editor-edit-css.png)

‎docs/img/graph-editor-animals-IS_A-neo-saved.png‎

120 KB
Loading

‎docs/img/graph-editor-animals-IS_A.png‎

129 KB
Loading

‎docs/img/graph-editor-animals.png‎

143 KB
Loading

‎docs/img/graph-editor-edit-css.png‎

94.4 KB
Loading

‎docs/img/graph-editor-edit-node.png‎

55.3 KB
Loading

‎docs/img/graph-editor-edit-relationship.png‎

64.5 KB
Loading

‎docs/img/graph-editor-export-cypher.png‎

132 KB
Loading

0 commit comments

Comments
 (0)