Skip to content

Commit c859797

Browse files
danshalev7shahar-biron
danshalev7
authored and
shahar-biron
committed
Revise readme-browser.md for improved clarity
Updated the readme to enhance clarity and formatting, including section titles and feature descriptions.
1 parent 348ea75 commit c859797

File tree

1 file changed

+91
-113
lines changed

1 file changed

+91
-113
lines changed

‎browser/readme-browser.md‎

Lines changed: 91 additions & 113 deletions
Original file line numberDiff line numberDiff line change
@@ -5,148 +5,126 @@ nav_order: 9
55
permalink: /browser/
66
---
77

8-
# FalkorDB Browser
9-
FalkorDB Browser is a web UI for exploring, querying, and managing FalkorDB graphs.
10-
It allows a developer to interact with graphs loaded to FalkorDB, explore how specific queries behave and review the current data model.
11-
FalkorDB Browser is integrated within the main falkordb docker, and through the Cloud service as well.
8+
# FalkorDB Graph Visualization Tool (Browser)
9+
FalkorDB's Browser provides a web UI for exploring, querying, and managing FalkorDB graphs. It allows developers to interact with graphs loaded to FalkorDB, explore how specific queries behave, and review the current data model. FalkorDB Browser integrates within the main FalkorDB Docker container and through the Cloud service.
1210

13-
<img width="1419" height="825" alt="falkordb-browser-eye-candy" src="https://github.com/user-attachments/assets/74375cd1-c704-40a9-9339-f1f885135a75" />
11+
![FalkorDB Browser GIF_01-26(1)](https://github.com/user-attachments/assets/af4f4d1c-111a-46a4-8442-8c08c037014f)
12+
13+
---
1414

15-
## Main features
15+
## Main Features
1616

1717
### Graph exploration (Graph page)
18-
- **Interactive graph canvas**
19-
- Visualize query results containing nodes/edges as an interactive graph.
20-
- Pan/zoom and interact with nodes and relationships.
21-
- Toggle visibility by **labels** and **relationship types**.
22-
- **Element search (in-canvas search)**
23-
- Search nodes/edges by:
24-
- node properties (string prefix match),
25-
- ids,
26-
- relationship type,
27-
- labels.
28-
- Jump/zoom to the match and select it.
29-
- **Data / inspection panel**
30-
- Selecting an element opens a side panel for inspecting its properties.
31-
- Supports editing workflows (see “Data manipulation”).
32-
- **Entity Creation Tools**
33-
- You can add a node and/or an edge to the current graph from the canvas view.
18+
| Feature | Description |
19+
| --------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
20+
| Interactive graph canvas | Visualizes query results containing nodes and edges as an interactive graph. Supports pan, zoom, and interaction with nodes and relationships. Toggles visibility by labels and relationship types. |
21+
| Element search (in-canvas search) | Search nodes and edges by node properties (string prefix match), IDs, relationship type, and labels. Jump to, zoom to, and select the match. |
22+
| Data and inspection panel | Selecting an element opens a side panel for inspecting its properties. This panel supports editing workflows (see "Data manipulation"). |
23+
| Entity Creation Tools | Add a node, an edge, or both to the current graph from the canvas view. |
3424

3525
### Querying
36-
- **Cypher query editor (Monaco)**
37-
- Editor-style experience for writing Cypher.
38-
- Keyboard shortcuts include:
39-
- Run: `Enter` (and `Cmd/Ctrl + Enter` in the query-history editor)
40-
- Insert newline: `Shift + Enter`
41-
- Includes Cypher keyword/function completion (based on the Browser’s built-in lists).
42-
- **Results views**
43-
- **Graph view** for node/edge results.
44-
- **Table view** for tabular results.
45-
- **Query metadata**
46-
- Metadata tab shows:
47-
- query metadata text,
48-
- explain plan (rendered as a nested tree),
49-
- profile output (rendered as a nested tree).
26+
| Feature | Description |
27+
| ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
28+
| Cypher query editor (Monaco) | The editor-style experience for writing Cypher includes keyboard shortcuts: Run (Enter and Cmd/Ctrl + Enter in the query-history editor) and Insert newline (Shift + Enter). The editor includes Cypher keyword and function completion based on the Browser's built-in lists. |
29+
| Results views | Graph view for node and edge results. Table view for tabular results. |
30+
| Query metadata | The Metadata tab shows query metadata text, explain plan (rendered as a nested tree), and profile output (rendered as a nested tree). |
5031

5132
### Query history
52-
- **Persistent query history** stored in browser `localStorage`.
53-
- **History browser dialog**
54-
- Search and filter previous queries.
55-
- Filter by graph name.
56-
- Delete single queries, multi-select delete, or “delete all”.
57-
- **Per-query metadata**
58-
- Review metadata / explain / profile for past queries.
33+
| Feature | Description |
34+
| ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------- |
35+
| Persistent query history | Stores in browser localStorage. |
36+
| History browser dialog | Allows you to search and filter previous queries, filter by graph name, and delete single queries, multi-select delete, or delete all queries. |
37+
| Per-query metadata | Review metadata, explain, and profile for past queries. |
5938
<img width="1419" height="825" alt="query-history-eye-candy" src="https://github.com/user-attachments/assets/be000961-f456-4b04-adf0-96f754b7447a" />
6039

6140

6241
### Data manipulation (nodes/relationships)
63-
- **Create node / create relationship** flows from the Graph UI.
64-
- **Delete elements** (node or relationship) from the Graph UI.
65-
- **Label editing** supported via API routes (the UI provides label management components).
42+
| Feature | Description |
43+
| ---------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
44+
| Create and delete operations | Create node and create relationship flows from the Graph UI. Delete elements (node or relationship) from the Graph UI. |
45+
| Edit labels | Edit labels through API routes (the UI provides label management components). |
6646

6747
### Graph management
68-
- **Create graphs** from the UI.
69-
- **Delete graphs** (supports deleting multiple selected graphs).
70-
- **Duplicate graphs**
71-
- Create a copy of an existing graph (including data).
72-
- **Export graphs**
73-
- Download a `.dump` file via the Browser (`/api/graph/:graph/export`).
74-
- **Upload data**
75-
- “Upload Data” dialog supports drag-and-drop file selection (Dropzone UI).
48+
| Feature | Description |
49+
| ---------------- | -------------------------------------------------------------------------------------------------------- |
50+
| Create graphs | Create graphs from the UI. |
51+
| Delete graphs | Delete graphs (supports deleting multiple selected graphs). |
52+
| Duplicate graphs | Create a copy of an existing graph (including data). |
53+
| Export graphs | Download a .dump file via the Browser (/api/graph/:graph/export). |
54+
| Upload data | Upload data through the "Upload Data" dialog, which supports drag-and-drop file selection (Dropzone UI). |
7655

7756
### Graph Info panel
78-
- **Memory Usage tracking** Exposes current memory utilization of the graph in MB.
79-
- **Node Label tracking** View all node labels in the graph, control style visualization for labels. Click on a node label to trigger a query to visualize nodes from this label.
80-
- **Edge Type tracking** View all edge types in the graph. Click on an edge type to trigger a graph query showing only nodes connected through this edge type.
81-
- **Property Keys tracking** View all property keys in the graph. Click on a key to issue a query that shows nodes and edges where the property exists (not NULL).
57+
| Feature | Description |
58+
| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
59+
| Memory Usage tracking | Exposes current memory utilization of the graph in MB. |
60+
| Node Label tracking | Displays all node labels in the graph and controls style visualization for labels. Click on a node label to trigger a query that visualizes nodes from this label. |
61+
| Edge Type tracking | Displays all edge types in the graph. Click on an edge type to trigger a graph query showing only nodes connected through this edge type. |
62+
| Property Keys tracking | Displays all property keys in the graph. Click on a key to issue a query that shows nodes and edges where the property exists (not NULL). |
63+
<img width="1419" height="825" alt="falkordb-browser-eye-candy" src="https://github.com/user-attachments/assets/74375cd1-c704-40a9-9339-f1f885135a75" />
8264

65+
---
8366

84-
### API documentation
85-
- **Built-in Swagger UI** at `/docs`.
86-
- Loads the Browser’s OpenAPI spec from `/api/swagger`.
87-
- “Try it out” enabled.
88-
- Adds an `X-JWT-Only: true` header when calling endpoints from Swagger UI.
67+
### API Documentation
68+
| Feature | Description |
69+
| ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
70+
| Built-in Swagger UI | Available at /docs. Loads the Browser's OpenAPI spec from /api/swagger. "Try it out" enabled. Adds an X-JWT-Only: true header when calling endpoints from Swagger UI. |
8971

9072
<img width="1419" height="825" alt="browser-api-doc-eye-candy" src="https://github.com/user-attachments/assets/35b0ca72-83f7-4f16-927c-413bf5f65593" />
9173

9274

9375
### Authentication & access control
94-
- Uses **NextAuth** (credentials-backed) for authentication.
95-
- UI capabilities are role-aware:
96-
- **Read-Only** users cannot create graphs.
97-
- **Admin** users can access database configuration and user-management sections in settings.
76+
| Feature | Description |
77+
| -------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
78+
| Authentication | Uses NextAuth (credentials-backed) for authentication. |
79+
| Role-aware UI capabilities | Read-Only users cannot create graphs. Admin users can access database configuration and user-management sections in settings. |
9880

9981
### Settings
100-
The `/settings` area includes multiple sections:
101-
- **Browser settings**
102-
- Query execution defaults and limits:
103-
- timeout
104-
- result limit
105-
- run default query on-load
106-
- User experience:
107-
- content persistence (auto-save/restore)
108-
- display-text priority (controls which node property is shown as the node caption)
109-
- Graph info refresh interval.
110-
- Tutorial replay.
111-
- **DB configurations** (Admin)
112-
- View and update server configuration values.
113-
- Some runtime configurations are intentionally read-only.
114-
- **Users** (Admin)
115-
- List users and adjust roles.
116-
- Add and delete users.
117-
- **Personal Access Tokens**
118-
- Generate tokens (with optional expiration).
119-
- Tokens are shown once at creation (copy-to-clipboard UX).
120-
- Revoke existing tokens.
121-
82+
| Section | Description |
83+
| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
84+
| Browser settings | Query execution defaults and limits: timeout, result limit, run default query on load. User experience: content persistence (auto-save and restore), display-text priority (controls which node property appears as the node caption). Graph info refresh interval. Tutorial replay. |
85+
| DB configurations (Admin) | View and update server configuration values. Some runtime configurations remain read-only. |
86+
| Users (Admin) | List users and adjust roles. Add and delete users. |
87+
| Personal Access Tokens | Generate tokens (with optional expiration). Tokens appear once at creation (copy-to-clipboard UX). Revoke existing tokens. |
88+
<!--
12289
### Optional “Chat” (English → Cypher)
12390
If enabled, the Browser includes a **Chat panel** that streams responses from a text-to-cypher service.
12491
- The UI sends messages to `/api/chat` and processes server-sent events.
12592
- Chat configuration lives in Settings (model + secret key).
12693
- The chat backend URL is controlled by `CHAT_URL`.
94+
-->
95+
96+
---
12797

128-
## Common workflows
129-
### 1) Run a query and visualize results
130-
1. Go to **Graphs** and select a graph.
131-
2. Write a Cypher query in the editor.
132-
3. Run it.
133-
4. Inspect results in:
134-
- **Graph** tab (interactive canvas), or
135-
- **Table** tab (rows/columns).
136-
5. Use **Labels/Relationships toggles** to focus the canvas.
137-
138-
### 2) Inspect and edit an element
139-
1. Click a node/edge in the canvas.
140-
2. Use the **Data panel** to inspect properties.
141-
3. Use create/delete actions as needed.
142-
143-
### 3) Use query history
144-
1. Open **Query History**.
145-
2. Filter by graph, search, and select a previous query.
146-
3. Review **Metadata / Explain / Profile**.
147-
148-
### 4) Export a graph
149-
1. Open graph management.
150-
2. Select a graph.
151-
3. Click **Export Data** to download a `.dump`.
98+
## Common Workflows
99+
### Running and visualizing queries
100+
| Step | Action |
101+
| ---- | -------------------------------------------------------------------------------------- |
102+
| 1 | Go to Graphs and select a graph. |
103+
| 2 | Write a Cypher query in the editor and run it. |
104+
| 3 | Inspect results in the Graph tab (interactive canvas) or Table tab (rows and columns). |
105+
| 4 | Use Labels and Relationships toggles to focus the canvas. |
106+
107+
[NEED GIF HERE]
108+
109+
### Inspecting and editing elements
110+
| Step | Action |
111+
| ---- | -------------------------------------------------------------------------------------- |
112+
| 1 | Click a node or edge in the canvas. |
113+
| 2 | Use the Data panel to inspect properties and apply create or delete actions as needed. |
114+
115+
### Working with query history
116+
| Step | Action |
117+
| ---- | ---------------------------------------------------------------------- |
118+
| 1 | Open Query History and filter by graph or search for a previous query. |
119+
| 2 | Select a query and review Metadata, Explain, or Profile. |
120+
121+
[NEED GIF HERE]
122+
123+
### Exporting graph data
124+
| Step | Action |
125+
| ---- | ------------------------------------------- |
126+
| 1 | Open graph management and select a graph. |
127+
| 2 | Click Export Data to download a `.dump` file. |
128+
129+
[NEED GIF HERE]
152130

0 commit comments

Comments
 (0)