+
+
diff --git a/packages/docs/src/content/docs/features/connections.mdx b/packages/docs/src/content/docs/features/connections.mdx
index cd9f8e9a3..737e1cf25 100644
--- a/packages/docs/src/content/docs/features/connections.mdx
+++ b/packages/docs/src/content/docs/features/connections.mdx
@@ -5,7 +5,7 @@ description: Manage database connections and configure connection settings.
You can create and manage connections to graph databases using this feature. Connections is accessible as the first screen after deploying the application or by clicking `Connections` in the navigation bar. Click `+` on the top-right to add a new connection. You can also edit and delete connections.
-For guides on connecting to specific databases, see [Connecting to databases](../guides#connecting-to-databases).
+For guides on connecting to specific databases, see [Connecting to databases](../../guides/#connecting-to-databases).
## Add a New Connection
@@ -35,4 +35,4 @@ When a connection is created, Graph Explorer will perform a scan of the graph to
### Data Table
-Under a listed node type, you can click on the ">" arrow to get to the [Data Table](./data-table/) 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. You can also navigate directly to the Data Table view using the "Data Table" link in the navigation bar.
+Under a listed node type, you can click on the ">" arrow to get to the [Data Table](../data-table/) 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. You can also navigate directly to the Data Table view using the "Data Table" link in the navigation bar.
diff --git a/packages/docs/src/content/docs/features/data-table.mdx b/packages/docs/src/content/docs/features/data-table.mdx
index 5c91e3059..5d7c0dc5c 100644
--- a/packages/docs/src/content/docs/features/data-table.mdx
+++ b/packages/docs/src/content/docs/features/data-table.mdx
@@ -3,10 +3,10 @@ title: "Data Table"
description: Browse nodes and edges in a paginated table view.
---
-You can use the Data Table view to view the data for the selected node type. You can open the Data Table view by clicking "Data Table" in the navigation bar or by clicking the node type row in the [connection details](./connections/#connection-details) pane.
+You can use the Data Table view to view the data for the selected node type. You can open the Data Table view by clicking "Data Table" in the navigation bar or by clicking the node type row in the [connection details](../connections/#connection-details) pane.
- Select a node type from the dropdown to view its data
- View tabular data for the selected node type
- Set the node type display name and description attributes
- Export the current table data to a CSV or JSON file
-- Send a specific node to the [Graph View](./graph-view/)
+- Send a specific node to the [Graph View](../graph-view/)
diff --git a/packages/docs/src/content/docs/features/index.mdx b/packages/docs/src/content/docs/features/index.mdx
index 9f1ad63ae..f597a35a9 100644
--- a/packages/docs/src/content/docs/features/index.mdx
+++ b/packages/docs/src/content/docs/features/index.mdx
@@ -3,42 +3,84 @@ title: "Features"
description: Key capabilities and detailed guides for each part of Graph Explorer.
---
+import { Card, CardGrid, LinkCard } from "@astrojs/starlight/components";
+
Graph Explorer provides a visual interface for exploring and analyzing graph data without writing queries.
## Feature Highlights
-### Multiple Query Languages
-
-Graph Explorer supports property graphs via [Gremlin](https://tinkerpop.apache.org/gremlin.html) and [openCypher](https://opencypher.org), as well as RDF graphs via [SPARQL](https://www.w3.org/TR/sparql11-overview/). Connect to [Amazon Neptune](https://aws.amazon.com/neptune/), [Apache TinkerPop Gremlin Server](https://tinkerpop.apache.org/), [JanusGraph](https://janusgraph.org/), or any database that supports these protocols over HTTP.
-
-### No Centralized Database
-
-All user data — connections, preferences, layout settings, and query history — is stored client-side in the browser using IndexedDB. The proxy server handles SigV4 request signing and request routing but does not store any user data. There is no external database to set up or manage.
-
-### Interactive Graph Exploration
-
-Double-click any node to expand its first-order neighbors directly on the canvas. Use the Expand sidebar panel for more control: filter by neighbor type, narrow by attribute value, or limit the number of results returned. As the graph grows, use the Entities Filter to show or hide specific node and edge types without removing them from the graph.
-
-### Query Editor
-
-Execute raw Gremlin, openCypher, or SPARQL queries directly from the Search panel's Query tab. Results are displayed inline and can be added to the graph individually or all at once.
-
-### Customizable Styles
-
-Personalize how each node and edge type appears on the canvas. Change colors, shapes, borders, icons, and which property is displayed as the label. You can also rename how type names are displayed throughout the application — for example, show the `airport` label as "Airport" or a `route` edge as "Flies To" — without modifying the underlying data.
-
-### Save & Load Graph
-
-Export the current graph as a JSON file to save your work, share it with a colleague, or reload it later. Anyone with the same database connection can import the file and pick up exactly where you left off.
+
+
+ Supports property graphs via
+ [Gremlin](https://tinkerpop.apache.org/gremlin.html) and
+ [openCypher](https://opencypher.org), as well as RDF graphs via
+ [SPARQL](https://www.w3.org/TR/sparql11-overview/). Connect to [Amazon
+ Neptune](https://aws.amazon.com/neptune/), [Apache TinkerPop Gremlin
+ Server](https://tinkerpop.apache.org/),
+ [JanusGraph](https://janusgraph.org/), or any database that supports these
+ protocols over HTTP.
+
+
+ All user data — connections, preferences, layout settings, and query history
+ — is stored client-side in the browser using IndexedDB. The proxy server
+ handles SigV4 request signing and request routing but does not store any
+ user data. There is no external database to set up or manage.
+
+
+ Double-click any node to expand its first-order neighbors directly on the
+ canvas. Use the Expand sidebar panel for more control: filter by neighbor
+ type, narrow by attribute value, or limit the number of results returned. As
+ the graph grows, use the Entities Filter to show or hide specific node and
+ edge types without removing them from the graph.
+
+
+ Execute raw Gremlin, openCypher, or SPARQL queries directly from the Search
+ panel's Query tab. Results are displayed inline and can be added to the
+ graph individually or all at once.
+
+
+ Personalize how each node and edge type appears on the canvas. Change
+ colors, shapes, borders, icons, and which property is displayed as the
+ label. You can also rename how type names are displayed throughout the
+ application without modifying the underlying data.
+
+
+ Export the current graph as a JSON file to save your work, share it with a
+ colleague, or reload it later. Anyone with the same database connection can
+ import the file and pick up exactly where you left off.
+
+
## Feature Details
For detailed documentation on each part of the application:
-- [Connections](./connections/) — Create and manage connections to graph databases.
-- [Graph View](./graph-view/) — Search, browse, expand, and customize views of your graph data.
-- [Data Table](./data-table/) — View tabular data for specific node types.
-- [Schema View](./schema-view/) — Visualize the schema of your graph database.
-- [Settings](./settings/) — Configure application-wide preferences.
+
+
+
+
+
+
+
If you are interested in where Graph Explorer is headed in the future, check out our [roadmap](https://github.com/aws/graph-explorer/blob/main/ROADMAP.md) and [participate in the discussions](https://github.com/aws/graph-explorer/discussions).
diff --git a/packages/docs/src/content/docs/getting-started/index.mdx b/packages/docs/src/content/docs/getting-started/index.mdx
index 407f7fda3..98a2cc863 100644
--- a/packages/docs/src/content/docs/getting-started/index.mdx
+++ b/packages/docs/src/content/docs/getting-started/index.mdx
@@ -3,6 +3,8 @@ title: "Getting Started"
description: A hands-on tutorial using the air routes sample dataset.
---
+import { Steps, LinkCard, CardGrid } from "@astrojs/starlight/components";
+
A hands-on tutorial that walks you through Graph Explorer using the air routes sample dataset. By the end, you will have searched for airports, explored connections between them, filtered the graph, styled nodes, and viewed data in a table.
## Prerequisites
@@ -13,6 +15,8 @@ A hands-on tutorial that walks you through Graph Explorer using the air routes s
The fastest way to try Graph Explorer is with the [Air Routes sample](https://github.com/aws/graph-explorer/tree/main/samples/air_routes). It launches Graph Explorer and a Gremlin Server pre-loaded with sample data using Docker Compose — no database setup or AWS account required.
+
+
1. Clone the repository
```
git clone https://github.com/aws/graph-explorer.git
@@ -24,6 +28,8 @@ The fastest way to try Graph Explorer is with the [Air Routes sample](https://gi
```
3. Open your browser and navigate to [http://localhost:8080/explorer](http://localhost:8080/explorer)
+
+
Graph Explorer opens to the **Graph** page with a default connection already configured and connected to the Gremlin Server with the air routes data. The canvas is empty because no nodes have been added yet.
## Tour the UI
@@ -41,19 +47,23 @@ On the right side of the graph view, you will see a vertical strip of sidebar ic
## Search for a Node
+
+
1. Click the **Search** icon (magnifying glass) in the right sidebar to open the Search panel.
2. In the **Node Label** dropdown, select **airport**.
3. In the **Property** dropdown, select **code**.
4. In the search text field, type `AUS`.
5. Click the result for Austin to expand it, then click the **⊕** button to add it to the graph canvas.
+
+
The node appears on the canvas. Click it to select it — the **Details** panel opens automatically in the right sidebar, showing its properties like city, country, and coordinates. You can zoom with the scroll wheel and pan by clicking and dragging the background.
## Expand Neighbors
With the Austin airport node on the canvas, let's discover what it connects to.
-1. **Double-click** the AUS node on the canvas.
+**Double-click** the AUS node on the canvas.
Graph Explorer fetches up to 10 neighbors and adds them to the graph. The number on top of a node shows how many unexpanded neighbors remain. Double-click again to fetch the next batch.
@@ -67,26 +77,36 @@ types to fetch.
As you expand nodes, the graph can get crowded. The Filters panel lets you focus on specific types.
+
+
1. Click the **Filters** icon in the right sidebar to open the Entities Filter panel.
2. You will see two tabs: **Node Labels** and **Edge Labels**. Each tab lists the types currently in the graph with checkboxes.
3. Try unchecking a node label to hide those nodes from the canvas. Check it again to bring them back.
+
+
This does not remove nodes from the graph — it only controls visibility. You can use this to temporarily focus on a subset of the data.
## Table View
You can view the nodes and edges currently on the canvas in a table format without leaving the Graph page.
+
+
1. Click the grid icon in the navigation bar to toggle the Table View open.
2. Use the dropdown to switch between **All Nodes** and **All Edges**.
3. You can sort, filter, and export the table data to CSV or JSON.
+
+
This table only shows what is on the canvas — it is a different view of the same data you have been exploring.
## Style Nodes
You can customize how each node type looks on the canvas.
+
+
1. Click the **Node Label Styling** icon in the right sidebar.
2. Find the **airport** type in the list.
3. Click **Customize** to open the style dialog.
@@ -95,25 +115,54 @@ You can customize how each node type looks on the canvas.
6. Change the **Node Color** to a color of your choice using the color picker.
7. Click **Done** to apply.
+
+
All airport nodes on the canvas update with the new labels and color. You can also change the shape, border, and icon.
## Switch to the Data Table
The Data Table page lets you browse all nodes in the database without adding them to the graph first.
+
+
1. Click **Data Table** in the navigation bar.
2. The **Node Label** dropdown at the top left is pre-selected to **airport**. Use it to switch to other types like **country** or **continent**.
3. Browse the paginated table of all airports in the dataset.
4. To send a specific airport to the graph view, click the **Send to Explorer** button on its row.
-## Next Steps
+
-Now that you have explored the basics, here are some directions to go next:
+## Next Steps
-- [Features](../features) — Explore all capabilities in depth
-- [Connecting to databases](../guides#connecting-to-databases) — Connect to Neptune, Gremlin Server, or BlazeGraph
-- [Deployment guides](../guides#deployment) — Deploy with Docker, EC2, ECS Fargate, or SageMaker
-- [Configuration](../references/configuration/) — Environment variables for application settings and default connections
-- [Development](../references/development/) — Build from source for local development
-- [Troubleshooting](../guides/troubleshooting/) — Common issues and workarounds
-- [Samples](https://github.com/aws/graph-explorer/tree/main/samples) — More Docker Compose examples for different configurations
+
+
+
+
+
+
+
+
diff --git a/packages/docs/src/content/docs/guides/connecting-to-gremlin-server.mdx b/packages/docs/src/content/docs/guides/connecting-to-gremlin-server.mdx
index 901388cab..a592cba48 100644
--- a/packages/docs/src/content/docs/guides/connecting-to-gremlin-server.mdx
+++ b/packages/docs/src/content/docs/guides/connecting-to-gremlin-server.mdx
@@ -5,7 +5,7 @@ description: Configure Graph Explorer to connect to Apache TinkerPop Gremlin Ser
If you are using the default Gremlin Server docker image, you can get the server running with the following commands:
-```
+```bash
docker pull tinkerpop/gremlin-server:latest
docker run -p 8182:8182 \
tinkerpop/gremlin-server:latest \
@@ -27,7 +27,7 @@ Graph Explorer only supports HTTP(S) connections. When connecting to Gremlin-Ser
:::tip
The Gremlin Server configuration can be usually found at:
-```
+```text
/conf/gremlin-server.yaml
```
diff --git a/packages/docs/src/content/docs/guides/connecting-to-neptune.mdx b/packages/docs/src/content/docs/guides/connecting-to-neptune.mdx
index 712231a94..026b60364 100644
--- a/packages/docs/src/content/docs/guides/connecting-to-neptune.mdx
+++ b/packages/docs/src/content/docs/guides/connecting-to-neptune.mdx
@@ -3,6 +3,8 @@ title: "Connecting to Amazon Neptune"
description: Configure Graph Explorer to connect to Amazon Neptune.
---
+import { LinkCard, CardGrid } from "@astrojs/starlight/components";
+
Graph Explorer connects to Amazon Neptune through its proxy server, which forwards requests to the database and handles SigV4 signing when IAM authentication is enabled.
## Connection Settings
@@ -35,6 +37,8 @@ Neptune [public endpoints](https://docs.aws.amazon.com/neptune/latest/userguide/
For Neptune instances without public endpoints, Graph Explorer must be deployed within the same VPC or connected via VPC peering. See the deployment guides:
-- [Deploy to Amazon EC2](./deploy-to-ec2/)
-- [Deploy to ECS Fargate](./deploy-to-ecs-fargate/)
-- [Deploy to SageMaker](./deploy-to-sagemaker/)
+
+
+
+
+
diff --git a/packages/docs/src/content/docs/guides/deploy-to-ec2.mdx b/packages/docs/src/content/docs/guides/deploy-to-ec2.mdx
index 3f8585355..ae65de311 100644
--- a/packages/docs/src/content/docs/guides/deploy-to-ec2.mdx
+++ b/packages/docs/src/content/docs/guides/deploy-to-ec2.mdx
@@ -3,6 +3,8 @@ title: "Deploy on Amazon EC2"
description: Deploy Graph Explorer on an Amazon EC2 instance.
---
+import { Steps } from "@astrojs/starlight/components";
+
Deploy Graph Explorer onto an Amazon EC2 instance and use it as a proxy server with SSH tunneling to connect to Amazon Neptune.
:::note
@@ -18,22 +20,29 @@ This documentation is not an official recommendation on network setups as there
## Steps
+
+
1. Open an SSH client and connect to the EC2 instance
+
2. Authenticate with the [Amazon ECR Public Registry](https://docs.aws.amazon.com/AmazonECR/latest/public/public-registries.html#public-registry-auth)
+
```
aws ecr-public get-login-password --region us-east-1 | docker login --username AWS --password-stdin public.ecr.aws
```
+
3. Pull the Docker image
+
```
docker pull public.ecr.aws/neptune/graph-explorer
```
-:::tip
-If you receive an error relating to the docker service not running, run
-`service docker start`.
-:::
+ :::tip
+ If you receive an error relating to the docker service not running, run
+ `service docker start`.
+ :::
4. Run the container substituting the `{hostname-or-ip-address}` with the hostname or IP address of the EC2 instance
+
```
docker run -p 80:80 -p 443:443 \
--restart unless-stopped \
@@ -41,15 +50,18 @@ If you receive an error relating to the docker service not running, run
public.ecr.aws/neptune/graph-explorer
```
-:::tip
-The `--restart unless-stopped` flag ensures the container automatically restarts after a host reboot or if the container crashes. See Docker's [restart policy documentation](https://docs.docker.com/engine/containers/start-containers-automatically/) for other options.
-:::
+ :::tip
+ The `--restart unless-stopped` flag ensures the container automatically restarts after a host reboot or if the container crashes. See Docker's [restart policy documentation](https://docs.docker.com/engine/containers/start-containers-automatically/) for other options.
+ :::
5. Navigate to the public URL of your EC2 instance accessing the `/explorer` endpoint. You will receive a warning as the SSL certificate used is self-signed. The URL will look like this:
-```
-https://ec2-1-2-3-4.us-east-1.compute.amazonaws.com/explorer
-```
+ ```
+ https://ec2-1-2-3-4.us-east-1.compute.amazonaws.com/explorer
+ ```
+
+6. 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. See [HTTPS Connections](../troubleshooting/#https-connections) section.
-6. 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. See [HTTPS Connections](./troubleshooting/#https-connections) section.
7. After completing the trusted certification step and refreshing the browser, you should now see the Connections UI.
+
+
diff --git a/packages/docs/src/content/docs/guides/deploy-to-ecs-fargate.mdx b/packages/docs/src/content/docs/guides/deploy-to-ecs-fargate.mdx
index 9b6fa04ed..63f821ff7 100644
--- a/packages/docs/src/content/docs/guides/deploy-to-ecs-fargate.mdx
+++ b/packages/docs/src/content/docs/guides/deploy-to-ecs-fargate.mdx
@@ -160,7 +160,7 @@ After the request is processed, the console will return you to your certificate
```
5. In the JSON template, update the following fields:
- `taskRoleArn` and `executionRoleArn`: The ARN of the IAM role created in step "Create a new IAM role and permission policies".
- - `environment` variables section (see [Configuration](../references/configuration/#default-connection) for more details):
+ - `environment` variables section (see [Configuration](../../references/configuration/#default-connection) for more details):
- `AWS_REGION`: The AWS region in which your Neptune cluster is located.
- `GRAPH_TYPE`: The query language for your initial connection.
- `IAM`: Set this to `true` to use SigV4 signed requests, if your Neptune cluster has IAM db authentication enabled.
diff --git a/packages/docs/src/content/docs/guides/deploy-to-sagemaker.mdx b/packages/docs/src/content/docs/guides/deploy-to-sagemaker.mdx
index 91728d8db..fce74917f 100644
--- a/packages/docs/src/content/docs/guides/deploy-to-sagemaker.mdx
+++ b/packages/docs/src/content/docs/guides/deploy-to-sagemaker.mdx
@@ -3,7 +3,7 @@ title: "Deploy on Amazon SageMaker"
description: Deploy Graph Explorer on an Amazon SageMaker notebook instance.
---
-import { Code } from "@astrojs/starlight/components";
+import { Code, Tabs, TabItem } from "@astrojs/starlight/components";
import installScript from "./_assets/install-graph-explorer-lc.sh?raw";
import neptuneDbPolicy from "./_assets/graph-explorer-neptune-db-policy.json?raw";
import neptuneAnalyticsPolicy from "./_assets/graph-explorer-neptune-analytics-policy.json?raw";
@@ -16,7 +16,7 @@ After you have created the lifecycle configuration and IAM role, you can attach
When the notebook has been started and is in "Ready" state, you can access Graph Explorer by adding the `/proxy/9250/explorer/` extension to the base notebook URL. The Graph Explorer link should look something like:
-```
+```text
https://graph-explorer-notebook-name.notebook.us-west-2.sagemaker.aws/proxy/9250/explorer/
```
@@ -26,17 +26,22 @@ https://graph-explorer-notebook-name.notebook.us-west-2.sagemaker.aws/proxy/9250
## IAM Policies
-
-
-
+
+
+
+
+
+
+
+
## Minimum Database Permissions
@@ -54,34 +59,35 @@ If you are using the standard notebook setup, these policies will apply to both
If a user attempts to execute a mutation query inside of Graph Explorer, they will be presented with an error that informs them they are not authorized for that request.
-**Neptune DB**
-
-```json
-{
- "Effect": "Allow",
- "Action": [
- "neptune-db:CancelQuery",
- "neptune-db:ReadDataViaQuery",
- "neptune-db:GetGraphSummary"
- ],
- "Resource": [
- "arn:[AWS_PARTITION]:neptune-db:[AWS_REGION]:[AWS_ACCOUNT_ID]:[NEPTUNE_CLUSTER_RESOURCE_ID]/*"
- ]
-}
-```
-
-**Neptune Analytics**
-
-```json
-{
- "Effect": "Allow",
- "Action": [
- "neptune-graph:CancelQuery",
- "neptune-graph:GetGraphSummary",
- "neptune-graph:ReadDataViaQuery"
- ],
- "Resource": [
- "arn:[AWS_PARTITION]:neptune-graph:[AWS_REGION]:[AWS_ACCOUNT_ID]:graph/[NEPTUNE_GRAPH_RESOURCE_ID]"
- ]
-}
-```
+
+
+ ```json
+ {
+ "Effect": "Allow",
+ "Action": [
+ "neptune-db:CancelQuery",
+ "neptune-db:ReadDataViaQuery",
+ "neptune-db:GetGraphSummary"
+ ],
+ "Resource": [
+ "arn:[AWS_PARTITION]:neptune-db:[AWS_REGION]:[AWS_ACCOUNT_ID]:[NEPTUNE_CLUSTER_RESOURCE_ID]/*"
+ ]
+ }
+ ```
+
+
+ ```json
+ {
+ "Effect": "Allow",
+ "Action": [
+ "neptune-graph:CancelQuery",
+ "neptune-graph:GetGraphSummary",
+ "neptune-graph:ReadDataViaQuery"
+ ],
+ "Resource": [
+ "arn:[AWS_PARTITION]:neptune-graph:[AWS_REGION]:[AWS_ACCOUNT_ID]:graph/[NEPTUNE_GRAPH_RESOURCE_ID]"
+ ]
+ }
+ ```
+
+
diff --git a/packages/docs/src/content/docs/guides/deploy-with-docker.mdx b/packages/docs/src/content/docs/guides/deploy-with-docker.mdx
index 35cf2e7aa..626052a87 100644
--- a/packages/docs/src/content/docs/guides/deploy-with-docker.mdx
+++ b/packages/docs/src/content/docs/guides/deploy-with-docker.mdx
@@ -3,6 +3,8 @@ title: "Deploy with Docker"
description: Deploy Graph Explorer locally using the official Docker image.
---
+import { Steps } from "@astrojs/starlight/components";
+
Deploy Graph Explorer locally using the official Docker image from Amazon's ECR Public Registry.
You can find the latest version of the image on
@@ -19,6 +21,8 @@ Make sure to use the version of the image that does not include `sagemaker` in t
## Steps
+
+
1. Authenticate with the [Amazon ECR Public Registry](https://docs.aws.amazon.com/AmazonECR/latest/public/public-registries.html#public-registry-auth)
```
@@ -49,5 +53,8 @@ Make sure to use the version of the image that does not include `sagemaker` in t
https://localhost/explorer
```
-5. You will receive a warning as the SSL certificate used is self-signed. 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. See the [HTTPS Connections](./troubleshooting/#https-connections) section.
-6. After completing the trusted certification step and refreshing the browser, you should now see the Connections UI. See [Connections](../features/connections/) for details on configuring your first connection.
+5. You will receive a warning as the SSL certificate used is self-signed. 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. See the [HTTPS Connections](../troubleshooting/#https-connections) section.
+
+6. After completing the trusted certification step and refreshing the browser, you should now see the Connections UI. See [Connections](../../features/connections/) for details on configuring your first connection.
+
+
diff --git a/packages/docs/src/content/docs/guides/index.mdx b/packages/docs/src/content/docs/guides/index.mdx
index a19166099..a35e25d63 100644
--- a/packages/docs/src/content/docs/guides/index.mdx
+++ b/packages/docs/src/content/docs/guides/index.mdx
@@ -3,21 +3,55 @@ title: "Guides"
description: Connect to databases, deploy to AWS, and troubleshoot common issues.
---
+import { LinkCard } from "@astrojs/starlight/components";
+
Guides for connecting to graph databases, deploying Graph Explorer, and troubleshooting common issues.
## Connecting to Databases
-- [Connecting to Amazon Neptune](./connecting-to-neptune/)
-- [Connecting to Gremlin-Server](./connecting-to-gremlin-server/)
-- [Connecting to BlazeGraph](./connecting-to-blazegraph/)
+
+
+
## Deployment
-- [Deploy with Docker](./deploy-with-docker/)
-- [Deploy on Amazon EC2](./deploy-to-ec2/)
-- [Deploy on Amazon ECS with Fargate](./deploy-to-ecs-fargate/)
-- [Deploy on Amazon SageMaker](./deploy-to-sagemaker/)
+
+
+
+
-## Troubleshooting
+## Miscellaneous
-- [Troubleshooting](./troubleshooting/)
+
diff --git a/packages/docs/src/content/docs/guides/troubleshooting.mdx b/packages/docs/src/content/docs/guides/troubleshooting.mdx
index 3be31e729..21f8e91ef 100644
--- a/packages/docs/src/content/docs/guides/troubleshooting.mdx
+++ b/packages/docs/src/content/docs/guides/troubleshooting.mdx
@@ -3,17 +3,12 @@ title: "Troubleshooting"
description: Common issues and workarounds for Graph Explorer.
---
-import { Code } from '@astrojs/starlight/components';
-import neptuneDbPolicy from './_assets/graph-explorer-neptune-db-policy.json?raw';
-import neptuneAnalyticsPolicy from './_assets/graph-explorer-neptune-analytics-policy.json?raw';
+import { Code, Tabs, TabItem, Steps } from "@astrojs/starlight/components";
+import neptuneDbPolicy from "./_assets/graph-explorer-neptune-db-policy.json?raw";
+import neptuneAnalyticsPolicy from "./_assets/graph-explorer-neptune-analytics-policy.json?raw";
This page contains workarounds for common issues and information on how to diagnose other issues.
-- [Docker Container Issues](#docker-container-issues)
-- [Schema Sync Fails](#schema-sync-fails)
-- [Save & Load Configuration](#save--load-configuration)
-- [Gathering SageMaker Logs](#gathering-sagemaker-logs)
-
## Docker Container Issues
1. If the container does not start, or immediately stops, use `docker logs graph-explorer` to check the container console logs for any related error messages that might provide guidance on why graph-explorer did not start.
@@ -25,7 +20,7 @@ If the default ports of 80 and 443 are already in use, you can use the `-p` flag
For example, if you want to use port 8080 and 4431, you can use the following command:
-```
+```bash
docker run -p 8080:80 -p 4431:443 \
--name graph-explorer \
--env HOST=localhost \
@@ -39,16 +34,16 @@ Which will result in the following URLs:
### HTTP Only
-If you do not want to use SSL and HTTPS, you can disable it by setting the following [environment variables](../references/configuration/#application-configuration):
+If you do not want to use SSL and HTTPS, you can disable it by setting the following [environment variables](../../references/configuration/#application-configuration):
-```
+```text
PROXY_SERVER_HTTPS_CONNECTION=false
GRAPH_EXP_HTTPS_CONNECTION=false
```
These can be passed when creating the Docker container like so:
-```
+```bash
docker run -p 80:80 \
--name graph-explorer \
--env PROXY_SERVER_HTTPS_CONNECTION=false \
@@ -60,7 +55,7 @@ docker run -p 80:80 \
If either Graph Explorer or the proxy server are served over an HTTPS connection (which is the default), your browser will show a security warning due to the self-signed certificate.
-See [Trusting the self-signed certificate](../references/security/#trusting-the-self-signed-certificate) for step-by-step instructions, or [Removing the "Not Secure" warning on Chrome](../references/security/#removing-the-not-secure-warning-on-chrome) for Chrome-specific instructions.
+See [Trusting the self-signed certificate](../../references/security/#trusting-the-self-signed-certificate) for step-by-step instructions, or [Removing the "Not Secure" warning on Chrome](../../references/security/#removing-the-not-secure-warning-on-chrome) for Chrome-specific instructions.
## Schema Sync Fails
@@ -74,13 +69,17 @@ Modern browsers enforce a security policy called [Same-Origin Policy](https://de
To resolve this issue:
+
+
1. Check your connection settings
2. Ensure the proxy server URL matches the domain portion of your current browser URL
3. Update the connection if necessary
+
+
For example:
-```
+```text
# if the current browser page URL is
https://graph-explorer.mydomain.com/explorer/#/connections
@@ -126,7 +125,7 @@ The paths listed here could always change in the future. If they do change, we w
Inside of Graph Explorer there is an option to save all the configuration data that Graph Explorer uses. This data is local to the user's browser and does not exist on the server.
-To save the configuration data:
+
1. Launch Graph Explorer
2. Navigate to the connections screen
@@ -135,13 +134,15 @@ To save the configuration data:
5. Press the "Save Configuration" button
6. Choose where to save the configuration file
+
+
This configuration can be restored using the "Load Configuration" button in the same settings page.
## Gathering SageMaker Logs
The Graph Explorer proxy server outputs log statements to standard out. By default, these logs will be forwarded to CloudWatch if the Notebook has the proper permissions.
-To gather these logs:
+
1. Open the AWS Console
2. Navigate to the Neptune page
@@ -155,12 +156,27 @@ To gather these logs:
1. Open the log stream
2. In the "Actions" menu, choose "Download search results (CSV)"
+
+
### Graph Explorer Log Stream Does Not Exist
New Neptune Notebooks automatically apply the correct IAM permissions to write to CloudWatch. If your Notebook does not automatically create a graph-explorer.log in the CloudWatch Log Streams, then it is possible that the Neptune Notebook was created before those IAM permissions were added. You'll need to add those permissions manually.
Below are examples of which IAM permissions you need for Graph Explorer.
-
-
-
+
+
+
+
+
+
+
+
diff --git a/packages/docs/src/content/docs/index.mdx b/packages/docs/src/content/docs/index.mdx
index 30e3c8bdd..09cf0ae2c 100644
--- a/packages/docs/src/content/docs/index.mdx
+++ b/packages/docs/src/content/docs/index.mdx
@@ -1,9 +1,10 @@
---
-title: Welcome to Graph Explorer
-description: Explore and visualize graph databases with Graph Explorer.
+title: Docs
+description: Graph Explorer makes your graph database visual and interactive.
template: splash
hero:
- tagline: A React-based web application for visualizing graph databases powered by Amazon Neptune, openCypher, Gremlin, and SPARQL.
+ title: Every Connection Tells a Story
+ tagline: Graph Explorer makes your graph database visual and interactive. Search, expand, filter, and style — all from your browser.
actions:
- text: Get Started
link: ./getting-started/
@@ -14,3 +15,31 @@ hero:
icon: external
variant: minimal
---
+
+import { Card, CardGrid, LinkButton } from "@astrojs/starlight/components";
+
+## Features
+
+
+
+ Double-click nodes to expand neighbors, filter by type, and build up a
+ visual understanding of your data. [Learn more →](./features/graph-view/)
+
+
+ Execute raw Gremlin, openCypher, or SPARQL queries and add results directly
+ to the graph canvas. [Learn more →](./features/graph-view/#search-panel)
+
+
+ Visualize your graph's schema as an interactive diagram showing node types,
+ edge types, and their relationships. [Learn more →](./features/schema-view/)
+
+
+ Change colors, shapes, icons, and labels for each node and edge type to make
+ the graph meaningful at a glance. [Learn more
+ →](./features/graph-view/#node-styling-panel)
+
+
+
+
+ Explore all features
+
diff --git a/packages/docs/src/content/docs/references/configuration.mdx b/packages/docs/src/content/docs/references/configuration.mdx
index 142b51d75..1f8586618 100644
--- a/packages/docs/src/content/docs/references/configuration.mdx
+++ b/packages/docs/src/content/docs/references/configuration.mdx
@@ -3,99 +3,79 @@ title: "Configuration"
description: Environment variables for application settings and default connections.
---
+import { Badge, Tabs, TabItem } from "@astrojs/starlight/components";
+
All environment variables for configuring Graph Explorer, organized by concern.
## Application Configuration
-These variables control server behavior, networking, and security.
-
-### `GRAPH_EXP_ENV_ROOT_FOLDER`
+These variables control server behavior, networking, and security. None of these variables are required. Defaults are listed below.
-Base path used to serve the `graph-explorer` front end application.
+#### `GRAPH_EXP_ENV_ROOT_FOLDER`
-Example: `/explorer`
+
-- Optional
-- Default: `/`
-- Type: `string`
+Base path used to serve the `graph-explorer` front end application. Example: `/explorer`
-### `HOST`
+#### `HOST`
-The public hostname of the server. This is used to generate the self-signed SSL certificate at container startup.
+
-Example: `localhost`
+The public hostname of the server. Used to generate the self-signed SSL certificate at container startup. Required when using [HTTPS connections](../security/#https-connections) without providing your own certificate files.
-- Required when using HTTPS connections
-- Default is `localhost`
-- Type: `string`
+#### `GRAPH_EXP_HTTPS_CONNECTION`
-### `GRAPH_EXP_HTTPS_CONNECTION`
+
-Uses the self-signed certificate to serve Graph Explorer over https if true. Only used in Docker via the entrypoint script.
+Uses the self-signed certificate to serve Graph Explorer over HTTPS if true. Only used in Docker via the entrypoint script.
-- Optional
-- Default `true` in Docker, not set otherwise
-- Type: `boolean`
+#### `PROXY_SERVER_HTTPS_PORT`
-### `PROXY_SERVER_HTTPS_PORT`
+
The port to use for the HTTPS server.
-- Optional
-- Default `443`
-- Type: `number`
+#### `PROXY_SERVER_HTTP_PORT`
-### `PROXY_SERVER_HTTP_PORT`
+
The port to use for the HTTP server.
-- Optional
-- Default `80`
-- Type: `number`
+#### `PROXY_SERVER_HTTPS_CONNECTION`
-### `PROXY_SERVER_HTTPS_CONNECTION`
+
-Uses the self-signed certificate to serve the proxy-server over https if true.
+Uses the self-signed certificate to serve the proxy-server over HTTPS if true. Defaults to `false` in code, `true` in Docker via the entrypoint script.
-- Optional
-- Default `false` in code, `true` in Docker via the entrypoint script
-- Type: `boolean`
+#### `PROXY_SERVER_CORS_ORIGIN`
-### `PROXY_SERVER_CORS_ORIGIN`
+
Restricts which origins are allowed to make cross-origin requests to the proxy server. When set, only requests from these exact origins will receive CORS headers. When not set, cross-origin requests are blocked. Each origin must include the scheme and must not have a trailing slash or path.
Example: `https://my-app.example.com` or `https://app-a.example.com,https://app-b.example.com`
-- Optional
-- Default: cross-origin requests blocked
-- Type: `string` (comma-separated for multiple origins)
+#### `LOG_STYLE`
-### `LOG_STYLE`
+
+
-Controls the log output format.
+Controls the log output format. `cloudwatch` omits timestamps and hostname/pid (provided by CloudWatch). `default` uses the standard log format.
-- Optional
-- Default: `default`
-- Type: `"cloudwatch" | "default"`
-- `cloudwatch` omits timestamps and hostname/pid (these are provided by CloudWatch)
-- `default` uses the standard log format
+#### `CONFIGURATION_FOLDER_PATH`
-### `CONFIGURATION_FOLDER_PATH`
+
+
Override path for the folder containing `.env` and `defaultConnection.json`. When set, replaces the default path entirely.
-- Optional
-- Default: `` (`packages/graph-explorer`)
-- Type: `string`
-
## Default Connection
To provide a default connection such that initial loads of Graph Explorer always result with the same starting connection, modify the `docker run ...` command to either take in a JSON configuration or runtime environment variables. If you provide both a JSON configuration and environmental variables, the JSON will be prioritized.
-### Environment Variables
+### Connection Variables
-These are the valid environment variables used for the default connection, their defaults, and their descriptions.
+These are the valid variables used for the default connection:
- Required:
- `PUBLIC_OR_PROXY_ENDPOINT` - `None`
@@ -114,53 +94,58 @@ These are the valid environment variables used for the default connection, their
- `AWS_REGION` - `None`
- `SERVICE_TYPE` - `neptune-db`, Set this as `neptune-db` for Neptune database or `neptune-graph` for Neptune Analytics.
-### JSON Configuration Approach
-
-First, create a `config.json` file containing values for the connection attributes:
-
-```json
-{
- "PUBLIC_OR_PROXY_ENDPOINT": "https://public-endpoint",
- "GRAPH_CONNECTION_URL": "https://{your-cluster-id}.us-west-2.neptune.amazonaws.com:8182",
- "USING_PROXY_SERVER": true,
- "IAM": true,
- "SERVICE_TYPE": "neptune-db",
- "AWS_REGION": "us-west-2",
- "GRAPH_TYPE": "gremlin",
- "GRAPH_EXP_HTTPS_CONNECTION": true,
- "PROXY_SERVER_HTTPS_CONNECTION": true,
- "GRAPH_EXP_FETCH_REQUEST_TIMEOUT": 240000,
- "GRAPH_EXP_NODE_EXPANSION_LIMIT": 500
-}
-```
-
-`GRAPH_TYPE` accepts `"gremlin"`, `"sparql"`, or `"openCypher"`. `GRAPH_EXP_FETCH_REQUEST_TIMEOUT` is measured in milliseconds (e.g., 240000 is 4 minutes).
-
-Pass the `config.json` file path to the `docker run` command.
-
-```bash
-docker run -p 80:80 -p 443:443 \
- --env HOST={hostname-or-ip-address} \
- -v /path/to/config.json:/graph-explorer/config.json \
- public.ecr.aws/neptune/graph-explorer
-```
-
-### Environment Variable Approach
-
-Provide the desired connection variables directly to the `docker run` command, as follows:
-
-```bash
-docker run -p 80:80 -p 443:443 \
- --env HOST={hostname-or-ip-address} \
- --env PUBLIC_OR_PROXY_ENDPOINT=https://public-endpoint \
- --env GRAPH_TYPE=gremlin \
- --env USING_PROXY_SERVER=true \
- --env IAM=false \
- --env GRAPH_CONNECTION_URL=https://{your-cluster-id}.us-west-2.neptune.amazonaws.com:8182 \
- --env AWS_REGION=us-west-2 \
- --env SERVICE_TYPE=neptune-db \
- --env PROXY_SERVER_HTTPS_CONNECTION=true \
- --env GRAPH_EXP_FETCH_REQUEST_TIMEOUT=240000 \
- --env GRAPH_EXP_NODE_EXPANSION_LIMIT=500 \
- public.ecr.aws/neptune/graph-explorer
-```
+### Configuration Approaches
+
+
+
+ Create a `config.json` file containing values for the connection attributes:
+
+ ```json
+ {
+ "PUBLIC_OR_PROXY_ENDPOINT": "https://public-endpoint",
+ "GRAPH_CONNECTION_URL": "https://{your-cluster-id}.us-west-2.neptune.amazonaws.com:8182",
+ "USING_PROXY_SERVER": true,
+ "IAM": true,
+ "SERVICE_TYPE": "neptune-db",
+ "AWS_REGION": "us-west-2",
+ "GRAPH_TYPE": "gremlin",
+ "GRAPH_EXP_HTTPS_CONNECTION": true,
+ "PROXY_SERVER_HTTPS_CONNECTION": true,
+ "GRAPH_EXP_FETCH_REQUEST_TIMEOUT": 240000,
+ "GRAPH_EXP_NODE_EXPANSION_LIMIT": 500
+ }
+ ```
+
+ `GRAPH_TYPE` accepts `"gremlin"`, `"sparql"`, or `"openCypher"`. `GRAPH_EXP_FETCH_REQUEST_TIMEOUT` is measured in milliseconds (e.g., 240000 is 4 minutes).
+
+ Pass the `config.json` file path to the `docker run` command.
+
+ ```bash
+ docker run -p 80:80 -p 443:443 \
+ --env HOST={hostname-or-ip-address} \
+ -v /path/to/config.json:/graph-explorer/config.json \
+ public.ecr.aws/neptune/graph-explorer
+ ```
+
+
+
+ Provide the desired connection variables directly to the `docker run` command:
+
+ ```bash
+ docker run -p 80:80 -p 443:443 \
+ --env HOST={hostname-or-ip-address} \
+ --env PUBLIC_OR_PROXY_ENDPOINT=https://public-endpoint \
+ --env GRAPH_TYPE=gremlin \
+ --env USING_PROXY_SERVER=true \
+ --env IAM=false \
+ --env GRAPH_CONNECTION_URL=https://{your-cluster-id}.us-west-2.neptune.amazonaws.com:8182 \
+ --env AWS_REGION=us-west-2 \
+ --env SERVICE_TYPE=neptune-db \
+ --env PROXY_SERVER_HTTPS_CONNECTION=true \
+ --env GRAPH_EXP_FETCH_REQUEST_TIMEOUT=240000 \
+ --env GRAPH_EXP_NODE_EXPANSION_LIMIT=500 \
+ public.ecr.aws/neptune/graph-explorer
+ ```
+
+
+
diff --git a/packages/docs/src/content/docs/references/development.mdx b/packages/docs/src/content/docs/references/development.mdx
index a5ede3f27..6ec522762 100644
--- a/packages/docs/src/content/docs/references/development.mdx
+++ b/packages/docs/src/content/docs/references/development.mdx
@@ -3,7 +3,7 @@ title: "Development"
description: Build from source and contribute to Graph Explorer.
---
-Build instructions and development setup for contributing to Graph Explorer. For system design and key libraries, see [Architecture](./architecture/).
+Build instructions and development setup for contributing to Graph Explorer. For system design and key libraries, see [Architecture](../architecture/).
## Requirements
@@ -46,7 +46,7 @@ pnpm dev
Launch your web browser of choice and navigate to
-```
+```text
http://localhost:5173
```
@@ -134,7 +134,7 @@ PROXY_SERVER_HTTP_PORT=8082
## Environment variables
-See the [Configuration Reference](./configuration/) for all available environment variables including application settings and default connection options.
+See the [Configuration Reference](../configuration/) for all available environment variables including application settings and default connection options.
## Development-only environment variables
@@ -159,7 +159,7 @@ Example: `5174`
## Using self-signed certificates on Chrome
-See [Removing the "Not Secure" warning on Chrome](./security/#removing-the-not-secure-warning-on-chrome) in the security reference.
+See [Removing the "Not Secure" warning on Chrome](../security/#removing-the-not-secure-warning-on-chrome) in the security reference.
## Troubleshooting
diff --git a/packages/docs/src/content/docs/references/index.mdx b/packages/docs/src/content/docs/references/index.mdx
index 8fb845a85..42c27ad0b 100644
--- a/packages/docs/src/content/docs/references/index.mdx
+++ b/packages/docs/src/content/docs/references/index.mdx
@@ -3,10 +3,44 @@ title: "References"
description: Security, logging, health checks, and configuration details.
---
+import { LinkCard, CardGrid } from "@astrojs/starlight/components";
+
Technical reference documentation for Graph Explorer covering configuration, security, and operational details.
-- [Configuration](./configuration/) - Environment variables for application settings and default connections
-- [Minimum Requirements](./minimum-requirements/) - Recommended database and query language versions
-- [Security](./security/) - HTTPS connections, certificates, and permissions
-- [Health Check](./health-check/) - Proxy server health and readiness endpoint
-- [Logging](./logging/) - Log levels, output, and proxy server logging modules
+
+
+
+
+
+
+
+
+
diff --git a/packages/docs/src/content/docs/references/minimum-requirements.mdx b/packages/docs/src/content/docs/references/minimum-requirements.mdx
index 69422d049..01240edee 100644
--- a/packages/docs/src/content/docs/references/minimum-requirements.mdx
+++ b/packages/docs/src/content/docs/references/minimum-requirements.mdx
@@ -1,6 +1,6 @@
---
title: "Minimum Requirements"
-description: Hardware and software requirements for running Graph Explorer.
+description: Recommended database and query language versions.
---
Graph Explorer does not block any particular versions of graph databases, but the queries used may or may not succeed based on the version of the query engine.
diff --git a/packages/docs/src/content/docs/references/security.mdx b/packages/docs/src/content/docs/references/security.mdx
index 955a295ca..ed969444c 100644
--- a/packages/docs/src/content/docs/references/security.mdx
+++ b/packages/docs/src/content/docs/references/security.mdx
@@ -3,9 +3,11 @@ title: "Security"
description: HTTPS, CORS, authentication, and security best practices.
---
+import { FileTree, Steps } from "@astrojs/starlight/components";
+
You can use Graph Explorer to connect to a publicly accessible graph database endpoint, or connect to a proxy endpoint that redirects to a private graph database endpoint.
-Graph Explorer supports the HTTPS protocol by default and provides a self-signed certificate as part of the Docker image. You can choose to use HTTP instead by changing the [environment variable default settings](./configuration/#application-configuration).
+Graph Explorer supports the HTTPS protocol by default and provides a self-signed certificate as part of the Docker image. You can choose to use HTTP instead by changing the [environment variable default settings](../configuration/#application-configuration).
## HTTPS Connections
@@ -15,16 +17,18 @@ Graph Explorer serves over HTTPS by default using a self-signed certificate. The
The proxy server reads certificates from the following location inside the container:
-```
-/graph-explorer/packages/graph-explorer-proxy-server/cert-info/
-├── rootCA.key # Root CA private key
-├── rootCA.crt # Root CA certificate
-├── server.key # Server private key
-├── server.csr # Server certificate signing request
-├── server.crt # Server certificate
-├── csr.conf # CSR configuration template
-└── cert.conf # Certificate extensions configuration
-```
+
+
+- graph-explorer/packages/graph-explorer-proxy-server/cert-info/
+ - rootCA.key Root CA private key
+ - rootCA.crt Root CA certificate
+ - server.key Server private key
+ - server.csr Server certificate signing request
+ - server.crt Server certificate
+ - csr.conf CSR configuration template
+ - cert.conf Certificate extensions configuration
+
+
If HTTPS is enabled and any of these files are missing, the server will exit with an error listing the missing files.
@@ -54,15 +58,21 @@ To serve over HTTP instead, set `PROXY_SERVER_HTTPS_CONNECTION=false` in your en
When using the default self-signed certificate, your browser will show a security warning. You can bypass this by trusting the certificate:
+
+
1. Download the certificate directly from the browser. For example, if using Google Chrome, click the "Not Secure" section on the left of the URL bar and select "Certificate is not valid" to show the certificate. Then click Details tab and click Export at the bottom.
2. Once you have the certificate, you will need to trust it on your machine. For MacOS, you can open the Keychain Access app. Select System under System Keychains. Then go to File > Import Items... and import the certificate you downloaded in the previous step.
3. Once imported, select the certificate and right-click to select "Get Info". Expand the Trust section, and change the value of "When using this certificate" to "Always Trust".
4. You should now refresh the browser and see that you can proceed to open the application. For Chrome, the application will remain "Not Secure" due to the fact that this is a self-signed certificate. If you have trouble accessing Graph Explorer after completing the previous step and reloading the browser, consider running a docker restart command and refreshing the browser again.
+
+
### Removing the "Not Secure" warning on Chrome
For browsers like Safari and Firefox, trusting the certificate from the browser (steps above) is enough to bypass the "Not Secure" warning. However, Chrome treats self-signed certificates differently. To remove the warning on Chrome, you need to trust the **root CA certificate** rather than the server certificate. See the [Chrome Root Store FAQ](https://chromium.googlesource.com/chromium/src/+/main/net/data/ssl/chrome_root_store/faq/#how-does-the-chrome-certificate-verifier-integrate-with-platform-trust-stores-for-local-trust-decisions) for details on how Chrome integrates with platform trust stores.
+
+
1. Copy the root certificate from the running container to your local machine:
```
docker cp graph-explorer:/graph-explorer/packages/graph-explorer-proxy-server/cert-info/rootCA.crt ./rootCA.crt
@@ -72,6 +82,8 @@ For browsers like Safari and Firefox, trusting the certificate from the browser
3. Once imported, select the certificate and right-click to select "Get Info". Expand the Trust section, and change the value of "When using this certificate" to "Always Trust".
4. Refresh the browser. The "Not Secure" warning should be gone.
+
+
## CORS
By default, the proxy server does not allow cross-origin requests. Since the proxy server serves both the API and the UI from the same origin, CORS is not needed in standard deployments. In development mode, the Vite dev server proxies API requests to the Express server to maintain same-origin behavior.
@@ -98,7 +110,7 @@ CORS headers only affect browser-initiated requests — direct API calls from sc
Graph Explorer does not provide any mechanisms for controlling user permissions. If you are using Graph Explorer with AWS, Neptune permissions can be controlled through IAM roles.
-For information about what permissions Graph Explorer requires check out the documentation on [SageMaker configuration](../guides/deploy-to-sagemaker/#minimum-database-permissions).
+For information about what permissions Graph Explorer requires check out the documentation on [SageMaker configuration](../../guides/deploy-to-sagemaker/#minimum-database-permissions).
:::caution
By default, a Neptune Notebook will have full read & write access to Neptune data.
diff --git a/packages/docs/src/styles/custom.css b/packages/docs/src/styles/custom.css
new file mode 100644
index 000000000..bafe35bf6
--- /dev/null
+++ b/packages/docs/src/styles/custom.css
@@ -0,0 +1,357 @@
+/* Dark mode — slate grays, violet accent */
+:root {
+ --sl-font: "Inter", sans-serif;
+ --sl-color-accent-low: oklch(28.3% 0.141 291.089);
+ --sl-color-accent: oklch(70.2% 0.183 293.541);
+ --sl-color-accent-high: oklch(81.1% 0.111 293.571);
+ --sl-color-accent-hover: oklch(81.1% 0.111 293.571);
+ --sl-color-white: oklch(98.4% 0.003 247.858);
+ --sl-color-gray-1: oklch(96.8% 0.007 247.896);
+ --sl-color-gray-2: oklch(86.9% 0.022 252.894);
+ --sl-color-gray-3: oklch(70.4% 0.04 256.788);
+ --sl-color-gray-4: oklch(55.4% 0.046 257.417);
+ --sl-color-gray-5: oklch(37.2% 0.044 257.287);
+ --sl-color-gray-6: oklch(27.9% 0.041 260.031);
+ --sl-color-gray-7: oklch(20.8% 0.042 265.755);
+ --sl-color-black: oklch(12.9% 0.042 264.695);
+ --sl-color-bg-nav: var(--sl-color-bg);
+ --sl-color-bg-sidebar: var(--sl-color-bg);
+ --sl-line-height: 1.6;
+
+ --sl-color-orange-high: oklch(47% 0.157 37.304);
+ --sl-color-orange: oklch(75% 0.183 55.934);
+ --sl-color-orange-low: oklch(95.4% 0.038 75.164);
+ --sl-color-green-high: oklch(44.8% 0.119 151.328);
+ --sl-color-green: oklch(72.3% 0.219 149.579);
+ --sl-color-green-low: oklch(96.2% 0.044 156.743);
+ --sl-color-blue-high: oklch(42.4% 0.199 265.638);
+ --sl-color-blue: oklch(70.7% 0.165 254.624);
+ --sl-color-blue-low: oklch(93.2% 0.032 255.585);
+ --sl-color-purple-high: oklch(43.8% 0.218 303.724);
+ --sl-color-purple: oklch(71.4% 0.203 305.504);
+ --sl-color-purple-low: oklch(94.6% 0.033 307.174);
+ --sl-color-red-high: oklch(45.5% 0.188 13.697);
+ --sl-color-red: oklch(64.5% 0.246 16.439);
+ --sl-color-red-low: oklch(94.1% 0.03 12.58);
+
+ --ge-gradient: linear-gradient(
+ 135deg,
+ oklch(58.5% 0.233 277.117),
+ oklch(60.6% 0.25 292.717)
+ );
+}
+
+/* Light mode — slate grays, violet accent */
+:root[data-theme="light"] {
+ --sl-color-accent-low: oklch(94.3% 0.029 294.588);
+ --sl-color-accent: oklch(54.1% 0.281 293.009);
+ --sl-color-accent-high: oklch(43.2% 0.232 292.759);
+ --sl-color-accent-hover: oklch(60.6% 0.25 292.717);
+ --sl-color-white: oklch(12.9% 0.042 264.695);
+ --sl-color-gray-1: oklch(20.8% 0.042 265.755);
+ --sl-color-gray-2: oklch(27.9% 0.041 260.031);
+ --sl-color-gray-3: oklch(44.6% 0.043 257.281);
+ --sl-color-gray-4: oklch(55.4% 0.046 257.417);
+ --sl-color-gray-5: oklch(86.9% 0.022 252.894);
+ --sl-color-gray-6: oklch(96.8% 0.007 247.896);
+ --sl-color-gray-7: oklch(98.4% 0.003 247.858);
+ --sl-color-black: oklch(98.4% 0.003 247.858);
+ --sl-color-bg: oklch(96.8% 0.007 247.896);
+ --sl-color-bg-nav: var(--sl-color-bg);
+ --sl-color-bg-sidebar: var(--sl-color-bg);
+
+ --sl-color-orange-high: oklch(95.4% 0.038 75.164);
+ --sl-color-orange: oklch(64.6% 0.222 41.116);
+ --sl-color-orange-low: oklch(47% 0.157 37.304);
+ --sl-color-green-high: oklch(96.2% 0.044 156.743);
+ --sl-color-green: oklch(62.7% 0.194 149.214);
+ --sl-color-green-low: oklch(44.8% 0.119 151.328);
+ --sl-color-blue-high: oklch(93.2% 0.032 255.585);
+ --sl-color-blue: oklch(54.6% 0.245 262.881);
+ --sl-color-blue-low: oklch(42.4% 0.199 265.638);
+ --sl-color-purple-high: oklch(94.6% 0.033 307.174);
+ --sl-color-purple: oklch(55.8% 0.288 302.321);
+ --sl-color-purple-low: oklch(43.8% 0.218 303.724);
+ --sl-color-red-high: oklch(94.1% 0.03 12.58);
+ --sl-color-red: oklch(58.6% 0.253 17.585);
+ --sl-color-red-low: oklch(45.5% 0.188 13.697);
+
+ --ge-gradient: linear-gradient(
+ 135deg,
+ oklch(51.1% 0.262 276.966),
+ oklch(54.1% 0.281 293.009)
+ );
+}
+
+::view-transition-group(*) {
+ animation-duration: 50ms;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ text-wrap: balance;
+}
+
+p {
+ text-wrap: pretty;
+}
+
+/* Dark mode background noise texture */
+:root:not([data-theme="light"]) body {
+ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.015'/%3E%3C/svg%3E");
+ background-repeat: repeat;
+ background-size: 256px;
+}
+
+/* Cards with gradient hover border */
+.card-grid {
+ gap: 1rem;
+}
+
+.card {
+ border: 1px solid oklch(from var(--sl-color-gray-1) l c h / 0.05);
+ background-color: var(--sl-color-gray-7);
+ border-radius: 0.75rem;
+ padding: 1.5rem;
+ position: relative;
+ overflow: hidden;
+ outline: 2px solid transparent;
+ outline-offset: -2px;
+ transition:
+ outline-color 0.3s ease,
+ box-shadow 0.3s ease;
+}
+
+.card:hover {
+ outline-color: oklch(60.6% 0.25 292.717 / 0.4);
+ box-shadow: 0 0 20px oklch(60.6% 0.25 292.717 / 0.08);
+}
+
+:root[data-theme="light"] .card:hover {
+ outline-color: oklch(54.1% 0.281 293.009 / 0.3);
+ box-shadow: 0 4px 20px oklch(54.1% 0.281 293.009 / 0.08);
+}
+
+.card .icon {
+ border: none;
+ background-color: transparent;
+ color: var(--sl-color-accent-high);
+ padding: 0;
+}
+
+.card .title {
+ font-weight: 600;
+ flex-direction: column;
+ align-items: flex-start;
+}
+
+.card .body {
+ color: var(--sl-color-gray-2);
+}
+
+/* Nav bar */
+header.header {
+ background: oklch(12.9% 0.042 264.695 / 0.8);
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+ border-bottom: 1px solid oklch(27.9% 0.041 260.031 / 0.5);
+}
+
+:root[data-theme="light"] header.header {
+ background: oklch(96.8% 0.007 247.896 / 0.8);
+ border-bottom: 1px solid oklch(86.9% 0.022 252.894 / 0.5);
+}
+
+/* Site title with gradient on hover */
+.site-title {
+ font-weight: 800;
+ color: var(--sl-color-white);
+ transition: color 0.2s ease;
+}
+
+.site-title:hover {
+ color: var(--sl-color-accent);
+}
+
+header .social-icons a {
+ color: var(--sl-color-gray-2);
+}
+
+header .social-icons a:hover {
+ color: var(--sl-color-accent);
+}
+
+/* Pagination prev/next links */
+.pagination-links a {
+ --sl-shadow-md: var(--sl-shadow-sm);
+ border: 1px solid var(--sl-color-gray-5);
+ background: var(--sl-color-gray-7);
+ border-radius: 0.75rem;
+ transition:
+ border-color 0.2s ease,
+ box-shadow 0.2s ease;
+}
+
+.pagination-links a:hover {
+ border-color: var(--sl-color-accent);
+ box-shadow: 0 0 12px oklch(60.6% 0.25 292.717 / 0.06);
+}
+
+:root[data-theme="light"] .pagination-links a:hover {
+ border-color: var(--sl-color-accent);
+ box-shadow: 0 2px 12px oklch(54.1% 0.281 293.009 / 0.06);
+}
+
+/* Link cards */
+.sl-link-card {
+ border: 1px solid var(--sl-color-gray-5);
+ background: var(--sl-color-gray-7);
+ border-radius: 0.75rem;
+ transition:
+ border-color 0.2s ease,
+ box-shadow 0.2s ease;
+}
+
+.sl-link-card:hover {
+ border-color: var(--sl-color-accent);
+ box-shadow: 0 0 12px oklch(60.6% 0.25 292.717 / 0.06);
+}
+
+:root[data-theme="light"] .sl-link-card:hover {
+ border-color: var(--sl-color-accent);
+ box-shadow: 0 2px 12px oklch(54.1% 0.281 293.009 / 0.06);
+}
+
+/* Subtle sidebar active item */
+.sidebar-content a[aria-current="page"],
+.sidebar-content a[aria-current="page"]:hover,
+.sidebar-content a[aria-current="page"]:focus {
+ background-color: transparent;
+ color: var(--sl-color-accent);
+ font-weight: 600;
+}
+
+/* Primary button with gradient */
+.sl-link-button.primary {
+ background: var(--ge-gradient);
+ border-color: transparent;
+ color: oklch(98.4% 0.003 247.858);
+ font-weight: 500;
+ transition:
+ box-shadow 0.2s ease,
+ filter 0.2s ease;
+ box-shadow: 0 2px 8px oklch(58.5% 0.233 277.117 / 0.15);
+}
+
+.sl-link-button.primary:hover {
+ box-shadow: 0 2px 12px oklch(58.5% 0.233 277.117 / 0.25);
+ filter: brightness(1.15);
+ background: var(--ge-gradient);
+ border-color: transparent;
+ color: oklch(98.4% 0.003 247.858);
+}
+
+/* Secondary button */
+.sl-link-button.secondary {
+ transition:
+ border-color 0.2s ease,
+ color 0.2s ease;
+}
+
+.sl-link-button.secondary:hover {
+ border-color: var(--sl-color-accent);
+ color: var(--sl-color-accent);
+}
+
+/* Minimal button (e.g. "View on GitHub") */
+.sl-link-button.minimal {
+ transition: color 0.2s ease;
+}
+
+.sl-link-button.minimal:hover {
+ color: var(--sl-color-accent);
+}
+
+/* Gradient divider for sections on splash page */
+[data-page-type="splash"] h2 {
+ position: relative;
+ padding-bottom: 0.75rem;
+}
+
+[data-page-type="splash"] h2::after {
+ content: "";
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 3rem;
+ height: 2px;
+ background: var(--ge-gradient);
+ border-radius: 1px;
+}
+
+/* Subtle asides — dark mode */
+.starlight-aside--note {
+ background-color: var(--sl-color-gray-6);
+ --sl-color-asides-text-accent: var(--sl-color-blue-low);
+}
+.starlight-aside--tip {
+ background-color: var(--sl-color-gray-6);
+ --sl-color-asides-text-accent: var(--sl-color-purple-low);
+}
+.starlight-aside--caution {
+ background-color: var(--sl-color-gray-6);
+ --sl-color-asides-text-accent: var(--sl-color-orange-low);
+}
+.starlight-aside--danger {
+ background-color: var(--sl-color-gray-6);
+ --sl-color-asides-text-accent: var(--sl-color-red-low);
+}
+
+/* Subtle asides — light mode */
+:root[data-theme="light"] .starlight-aside--note {
+ background-color: oklch(from var(--sl-color-blue-low) l c h / 15%);
+ --sl-color-asides-text-accent: var(--sl-color-blue-low);
+}
+:root[data-theme="light"] .starlight-aside--tip {
+ background-color: oklch(from var(--sl-color-purple-low) l c h / 15%);
+ --sl-color-asides-text-accent: var(--sl-color-purple-low);
+}
+:root[data-theme="light"] .starlight-aside--caution {
+ background-color: oklch(from var(--sl-color-orange-low) l c h / 15%);
+ --sl-color-asides-text-accent: var(--sl-color-orange-low);
+}
+:root[data-theme="light"] .starlight-aside--danger {
+ background-color: oklch(from var(--sl-color-red-low) l c h / 15%);
+ --sl-color-asides-text-accent: var(--sl-color-red-low);
+}
+
+/* Subtle badges */
+:root {
+ --sl-badge-default-bg: oklch(from var(--sl-color-accent-high) l c h / 15%);
+ --sl-badge-default-border: var(--sl-color-accent-high);
+ --sl-badge-default-text: var(--sl-color-accent-high);
+
+ --sl-badge-note-bg: oklch(from var(--sl-color-blue-low) l c h / 15%);
+ --sl-badge-note-border: var(--sl-color-blue-low);
+ --sl-badge-note-text: var(--sl-color-blue-low);
+
+ --sl-badge-danger-bg: oklch(from var(--sl-color-red-low) l c h / 15%);
+ --sl-badge-danger-border: var(--sl-color-red-low);
+ --sl-badge-danger-text: var(--sl-color-red-low);
+
+ --sl-badge-success-bg: oklch(from var(--sl-color-green-low) l c h / 15%);
+ --sl-badge-success-border: var(--sl-color-green-low);
+ --sl-badge-success-text: var(--sl-color-green-low);
+
+ --sl-badge-caution-bg: oklch(from var(--sl-color-orange-low) l c h / 15%);
+ --sl-badge-caution-border: var(--sl-color-orange-low);
+ --sl-badge-caution-text: var(--sl-color-orange-low);
+
+ --sl-badge-tip-bg: oklch(from var(--sl-color-purple-low) l c h / 15%);
+ --sl-badge-tip-border: var(--sl-color-purple-low);
+ --sl-badge-tip-text: var(--sl-color-purple-low);
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5edf16f45..dc0cf5a3c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -63,12 +63,19 @@ importers:
'@astrojs/starlight':
specifier: 0.38.3
version: 0.38.3(astro@6.2.2(@types/node@25.6.0)(jiti@2.6.1)(lightningcss@1.32.0)(rollup@4.60.3)(terser@5.42.0)(tsx@4.21.0)(yaml@2.8.3))
+ '@fontsource/inter':
+ specifier: ^5.2.8
+ version: 5.2.8
astro:
specifier: 6.2.2
version: 6.2.2(@types/node@25.6.0)(jiti@2.6.1)(lightningcss@1.32.0)(rollup@4.60.3)(terser@5.42.0)(tsx@4.21.0)(yaml@2.8.3)
sharp:
specifier: 0.34.5
version: 0.34.5
+ devDependencies:
+ astro-vtbot:
+ specifier: ^2.1.12
+ version: 2.1.12
packages/graph-explorer:
dependencies:
@@ -1478,6 +1485,9 @@ packages:
'@floating-ui/utils@0.2.10':
resolution: {integrity: sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==}
+ '@fontsource/inter@5.2.8':
+ resolution: {integrity: sha512-P6r5WnJoKiNVV+zvW2xM13gNdFhAEpQ9dQJHt3naLvfg+LkF2ldgSLiF4T41lf1SQCM9QmkqPTn4TH568IRagg==}
+
'@hookform/resolvers@5.2.2':
resolution: {integrity: sha512-A/IxlMLShx3KjV/HeTcTfaMxdwy690+L/ZADoeaTltLx+CVuzkeVIPuybK3jrRfw7YZnmdKsVVHAlEPIAEUNlA==}
peerDependencies:
@@ -3774,6 +3784,21 @@ packages:
'@vitest/utils@4.1.5':
resolution: {integrity: sha512-76wdkrmfXfqGjueGgnb45ITPyUi1ycZ4IHgC2bhPDUfWHklY/q3MdLOAB+TF1e6xfl8NxNY0ZYaPCFNWSsw3Ug==}
+ '@vtbag/cam-shaft@1.0.6':
+ resolution: {integrity: sha512-Xy1bmJJLXuCqxmY2agwPfhGNv1XZViqh54H0VGK4mouGsItFsh8Mz/wWAP6mZwAOEuu9bEOJ1mJ+oNoaczZ1zw==}
+
+ '@vtbag/element-crossing@1.1.0':
+ resolution: {integrity: sha512-1YL609KPwhHUKRrVNfoogQCVJPfFrE5DubOLcCJZLHVCjWZ2ZAPcaq1wR2OP6nXD0Ok9JLX41YsEtYBYzw6CxQ==}
+
+ '@vtbag/inspection-chamber@1.0.24':
+ resolution: {integrity: sha512-L6CrMbzJ0gdG/P5WnGyVgRxHVeLhlQgXh3mp+OI4JdJjFiwIhh9+sG/FXM2DneBs5HQvaWUq4qf6NiSlgVbyvQ==}
+
+ '@vtbag/turn-signal@1.3.1':
+ resolution: {integrity: sha512-6rWkG+ik3U+KQGI94yNOrOh5QedB9zmP/8H51X5WQwrJz8m2MAU5YwGRRcweO/dJ6wW/Bn7OsgC1vRURnwrvCg==}
+
+ '@vtbag/utensil-drawer@1.2.16':
+ resolution: {integrity: sha512-RSahZXk4NAFTF3zDYQH1x4qv8gFLcWus7qD//D0b58zoZIeqa2uKePLMy4lSHagYdkwBlKXKlfcDSrqUvWmxnw==}
+
accepts@2.0.0:
resolution: {integrity: sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng==}
engines: {node: '>= 0.6'}
@@ -3854,6 +3879,9 @@ packages:
peerDependencies:
astro: ^4.0.0-beta || ^5.0.0-beta || ^3.3.0 || ^6.0.0-beta
+ astro-vtbot@2.1.12:
+ resolution: {integrity: sha512-6RlA0rdVPLT24FAyxsHAI71quTrLWuMXOADhcx8uEMTfuIVRhg4GajzmZmOiX6/nHA9p1gaIBuaTF3jVE1XWSA==}
+
astro@6.2.2:
resolution: {integrity: sha512-zkne2lZU+iTZPBK8F4gbMfrw5f11bT4VXiBxcdFHcPvYyH+Hox7V1sZu97RDpvwmHi+wQ0efKv89KY5744a0jQ==}
engines: {node: '>=22.12.0', npm: '>=9.6.5', pnpm: '>=7.1.0'}
@@ -8256,6 +8284,8 @@ snapshots:
'@floating-ui/utils@0.2.10': {}
+ '@fontsource/inter@5.2.8': {}
+
'@hookform/resolvers@5.2.2(react-hook-form@7.73.1(react@19.2.5))':
dependencies:
'@standard-schema/utils': 0.3.0
@@ -10486,6 +10516,16 @@ snapshots:
convert-source-map: 2.0.0
tinyrainbow: 3.1.0
+ '@vtbag/cam-shaft@1.0.6': {}
+
+ '@vtbag/element-crossing@1.1.0': {}
+
+ '@vtbag/inspection-chamber@1.0.24': {}
+
+ '@vtbag/turn-signal@1.3.1': {}
+
+ '@vtbag/utensil-drawer@1.2.16': {}
+
accepts@2.0.0:
dependencies:
mime-types: 3.0.2
@@ -10554,6 +10594,14 @@ snapshots:
astro: 6.2.2(@types/node@25.6.0)(jiti@2.6.1)(lightningcss@1.32.0)(rollup@4.60.3)(terser@5.42.0)(tsx@4.21.0)(yaml@2.8.3)
rehype-expressive-code: 0.41.7
+ astro-vtbot@2.1.12:
+ dependencies:
+ '@vtbag/cam-shaft': 1.0.6
+ '@vtbag/element-crossing': 1.1.0
+ '@vtbag/inspection-chamber': 1.0.24
+ '@vtbag/turn-signal': 1.3.1
+ '@vtbag/utensil-drawer': 1.2.16
+
astro@6.2.2(@types/node@25.6.0)(jiti@2.6.1)(lightningcss@1.32.0)(rollup@4.60.3)(terser@5.42.0)(tsx@4.21.0)(yaml@2.8.3):
dependencies:
'@astrojs/compiler': 4.0.0