Updating README.md with edits (aws#25)

* Updating README.md with edits

Add new photos

* Add images folder

* Add files via upload

* Update README.md

* Update README.md

* Delete test.md

* Updated README.md with new Getting Started

Moved Docker instructions higher up and combined with "Getting Started" section

* Fixed duplicate text

* Update README.md

Author: joywa

Diff for: README.md

@@ -3,21 +3,99 @@ The Graph Explorer project provides a React-based web application that enables u
 
 To get started, you can deploy Graph Explorer on a local machine using [Docker Desktop](https://www.docker.com/products/docker-desktop/), or in the cloud using a container service such as [Amazon ECS](https://aws.amazon.com/ecs/). The Graph Explorer image is hosted on [Amazon ECR](https://aws.amazon.com/ecr/), and can also be pulled from [DockerHub](https://hub.docker.com/). 
 
-Upon build, the Graph Explorer will be run at port 5173 and the proxy-server at port 8182. The proxy-server will be created automatically, but will only be necessary if you are connecting to Neptune. Gremlin-Server and BlazeGraph can be connected to directly. 
-
-![A sample image of property graph created by Graph Explorer](./images/LPG IMDb.png)
-![A sample image of RDF graph created by Graph Explorer](./images/RDFAirports.png)
-
-#### Supported Graph Types
-- Labelled Property Graph (PG) using Gremlin
-- Resource Description Framework (RDF) using SPARQL
+![A sample image of property graph created by Graph Explorer](./images/LPGIMDb.png)
+![A sample image of RDF graph created by Graph Explorer](./images/RDFEPL.png)
+
+## Getting Started
+
+This project contains the code needed to create a Docker image of the Graph Explorer. The image will create the Graph Explorer application to communicate through port `5173` and a proxy server through port `8182`. The proxy server will be created automatically, but will only be necessary if you are connecting to Neptune. Gremlin-Server and BlazeGraph can be connected to directly. Additionally, the image will create a self-signed certificate that can be optionally used when PROXY_SERVER_HTTPS_CONNECTION or GRAPH_EXP_HTTPS_CONNECTION are set to true (default behavior). 
+
+There are many ways to deploy the Graph Explorer application. The following instructions detail how to deploy graph-explorer onto an Amazon EC2 instance and use it as a proxy server with SSH tunneling to connect to Amazon Neptune. Note that this README is not an official recommendation on network setups as there are many ways to connect to Amazon Neptune from outside of the VPC, such as setting up a load balancer or VPC peering.
+
+### Prerequisites:
+
+* Provision an Amazon EC2 instance that will be used to host the application and connect to Neptune as a proxy server. For more details, see instructions here: https://github.com/aws/graph-notebook/tree/main/additional-databases/neptune
+* Ensure the Amazon EC2 instance can send and receive on ports `22` (SSH), `8182` (Neptune), and `5173` (graph-explorer).
+* Open an SSH client and connect to the EC2 instance.
+* Download and install the necessary command line tools such as `git`  and `docker`.
+
+### Steps to install Graph Explorer:
+
+1. To download the source project, run `git clone https://github.com/aws/graph-explorer/`  
+2. To build the image, run `docker build --build-arg host=$(hostname -i) -t graph-explorer .` from the root directory.
+3. To run the image in a container, run `docker run -dit -p 5173:5173 -p 8182:8182 --name {insert_container_name} graph-explorer`. Optional, can be run as long as the image is there.
+4. Since the application is set to use HTTPS by default and contains a self-signed certificate, you will need to add the Graph Explorer certificates to the trusted certificates directory and manually trust them. (**STEP TO BE REWRITTEN IN DETAIL**).
+5. Now, open a browser and type in the public URL of your EC2 instance on port `5173` (e.g., `https://ec2-1-2-3-4.us-east-1.compute.amazonaws.com:5173`). You will receive a warning as the SSL certificate used is self-signed. Click to proceed anyway.
+6. You should now see the Connections UI. See below description on Connections UI to configure your first connection to Amazon Neptune.
+
+## Features
+
+#### _Connections UI:_
+You can create and manage connections to graph databases using this feature. Connections is accessible as the first screen after deploying the application, when you click `Open Connections` on the top-right. Click `+` on the top-right to add a new connection. You can also edit and delete connections. 
+
+* __Add a new connection:__
+   *  __Name:__ Enter a name for your connection (e.g., `MyNeptuneCluster`). 
+   *  __Graph Type:__ Choose a graph data model that corresponds to your graph database. 
+   *  __Public Endpoint:__ Provide the publicly accessible endpoint URL for a graph database, e.g., Gremlin Server. If connecting to Amazon Neptune, then provide a proxy endpoint URL that is accessible from outside the VPC, e.g., EC2.
+   * __Public or proxy endpoint:__ Provide the publicly accessible endpoint URL for a graph database, e.g., Gremlin Server. If connecting to Amazon Neptune, then provide a proxy endpoint URL that is accessible from outside the VPC, e.g., EC2. 
+      * **Note:** For connecting to Amazon Neptune, ensure that both the proxy endpoint and the graph connection URL begin with `https://` and end with `:8182`. Ensure that you don't end the URLs with `/`.
+   * __Using proxy server:__ Check this box if using a proxy endpoint.
+   * __Graph connection URL:__ Provide the endpoint for the graph database
+   * __AWS IAM Auth Enabled:__ Check this box if connecting to Amazon Neptune using IAM Auth and SigV4 signed requests
+   * __AWS Region:__ Specify the AWS region where the Neptune cluster is hosted (e.g., us-east-1)
+
+* __Available Connections:__ Once a connection is created, this section will appear as a left-hand pane. When you create more than one connection to a graph database, you can only connect to and visualize from one graph database endpoint at a time. To select the active database, toggle the “Active” switch.
+
+ * __Connection Details:__ Once a connection is created, this section will appear as a right-hand information pane for a selected connection. It shows details such as the connection name, graph data model type, endpoint and a summary of the graph data, such as the count of nodes, edges, and a list of node types.
+ * __Last Synchronization:__ When a connection is created, Graph Explorer will perform a scan of the graph to provide summary data. To re-synchronize after data has changed on your graph, select a connection, and then click the “refresh” button next to “Last Synchronization” text.
+ * __Data Explorer UI:__ Under a listed node type, you can click on the ‘>’ arrow to get to the “Data Explorer” view. This allows you to see a sample list of nodes under this type and choose one or more nodes to “Send to Explorer” for getting started quickly if you are new to the data.
+#### _Graph Explorer UI:_
+You can search, browse, expand, customize views of your graph data using Graph Explorer, which is the main UI of this application. Once you create a connection, you can click “Open Graph Explorer” on the top-right to navigate here. There are several key features on this UI:
+* __Top Bar UI:__
+    * __Search bar:__ If a user wants to start without using the Data Explorer, they can go directly to the search bar and use the search to visualize a starting node in the graph.
+    * __Toggles:__ You can toggle to show/hide the Graph View and/or Table View for screen real-estate management.
+    * __Open Connections:__ This takes the user back to Connections UI.
+* __Graph View UI:__ The graph visualization canvas that you can interact with. Double-click to expand the first-order neighbors of a node. 
+    * __Layout drop-down & reset:__ You can display graph data using standard graph layouts in the Graph View. You can use the circular arrow to reset the physics of a layout.
+     * __Screenshot:__ Download a picture of the current window in Graph View.
+     * __Zoom In/Out & Clear:__ To help users quickly zoom in/out or clear the whole canvas in the Graph View.
+     * __Legend (i):__ This displays an informational list of icons, colors, and display names available.
+* __Right-hand Pane UI:__ There are 5-6 functions in the collapsible right-hand pane of Graph Explorer: 
+     * __Details View__ shows details about a selected node/edge such as properties etc. 
+     * __Entities Filter__ is used to control the display of nodes and edges that are already expanded in the Graph View; click to hide or show nodes/edges.
+     * __Expand__ is used when expanding will result in 10+ neighbors and control the meaningful expansion. You will need to select a number as the limit to expand to. You can also add text filters for expansion.
+     * __Node Styling__ of node display options (e.g., color, icon, the property to use for the displayed name). 
+     * __Edge Styling__ of edge display options (e.g., color, icon, the property to use for the displayed name). 
+     * __Namespaces (RDF only):__ This RDF-specific configuration feature allows you to shorten the display of Resource URIs within the app based on auto-generated prefixes, commonly-used prefix libraries, or custom prefixes set by the user. Order of priority is set to Custom > Common > Auto-generated.
+* __Table View UI:__ This collapsible view shows a row-column display of the data in the Graph View. You can use filters in the Table to show/hide elements in the Graph View, and you can export the table view into a CSV or JSON file. The following columns are available for filtering on property graphs (RDF graphs in parentheses):
+     * Node ID (Resource URI)
+     * Node Type (Class)
+     * Edge Type (Predicate)
+     * Source ID (Source URI)
+     * Source Type (Source Class)
+     * Target ID (Target URI)     
+     * Target Type (Target Class)
+     * Display Name - Set in the Node/Edge Styling panes
+     * Display Description - Set in the Node/Edge Styling panes
+     * Total Neighbors - Enter an integer to be used as the >= limit
+
+* __Additional Table View UI Features__
+     * Visibility - manually show or hide nodes or edges
+     * All Nodes / All Edges (or All Resources / All Predicates) dropdown - allows you to display a list of either nodes or edges and control display/filter on them
+     * Download - You can download the current Table View as a CSV or JSON file with additional customization options
+     * Default columns - You can set which columns you want to display
+     * Paging of rows
 
 ## Development
 
 ### Requirements
 - pnpm >=7.9.3
 - node >=16.15.1
 
+### Supported Graph Types
+- Labelled Property Graph (PG) using Gremlin
+- Resource Description Framework (RDF) using SPARQL 
+
 ### Run in development mode
 - `pnpm i`
 - `pnpm start`
@@ -39,13 +117,6 @@ You can find a template for the following environment variables at `/packages/gr
 - `GRAPH_EXP_HTTPS_CONNECTION`: Uses the self-signed cert to serve the Graph Explorer over https if true. By default `true` (`boolean`).
 - `PROXY_SERVER_HTTPS_CONNECTION`: Uses the self-signed cert to serve the proxy-server over https if true. By default `true` (`boolean`).
 
-### Docker Instructions
-
-The docker image contains the code needed to create a runnable instance of the Explorer inside of a container. The image will create the Graph Explorer communicating through port 5173 and the proxy-server through port 8182. Additionally, it will create a self-signed cert that can be optionally used when `PROXY_SERVER_HTTPS_CONNECTION` or `GRAPH_EXP_HTTPS_CONNECTION` are set to true (default behavior).
-
-- To build the image, `docker build --build-arg host=$(hostname -i) -t graph-explorer .` from the root directory. Required.
-- To run the image in a container, run `docker run -dit -p 5173:5173 -p 8182:8182 --name {container_name} graph-explorer`. Optional, can be run as long as the image is there.
-
 ## Connection
 
 ### Connecting to Neptune