@@ -80,11 +95,11 @@ const DatabaseManager: Component = () => {
- setPath(e.currentTarget.value)} placeholder="/path/to/db" />
+ setPath(e.currentTarget.value)} placeholder="~/.nexus/my-db" />
-
diff --git a/nexus-explorer/src/frontend/src/components/editor/NqlEditor.css b/nexus-explorer/src/frontend/src/components/editor/NqlEditor.css
index 0c9948ef..944548ab 100644
--- a/nexus-explorer/src/frontend/src/components/editor/NqlEditor.css
+++ b/nexus-explorer/src/frontend/src/components/editor/NqlEditor.css
@@ -41,3 +41,105 @@
font-size: 13px;
white-space: pre-wrap;
}
+
+.sample-queries {
+ padding: 12px 16px;
+ border-bottom: 1px solid var(--border);
+}
+
+.sample-queries h3 {
+ margin: 0 0 8px 0;
+ font-size: 13px;
+ color: var(--text-secondary);
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+}
+
+.sample-grid {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 6px;
+}
+
+.sample-btn {
+ padding: 4px 10px;
+ font-size: 12px;
+ background: var(--bg-secondary);
+ border: 1px solid var(--border);
+ border-radius: 4px;
+ color: var(--text-primary);
+ cursor: pointer;
+ transition: all 0.15s ease;
+}
+
+.sample-btn:hover {
+ background: var(--accent);
+ border-color: var(--accent);
+ color: white;
+}
+
+.result-header {
+ padding: 8px 12px;
+ border-bottom: 1px solid var(--border);
+}
+
+.result-header .success {
+ color: #22c55e;
+ font-weight: 500;
+}
+
+.result-header .error {
+ color: #ef4444;
+ font-weight: 500;
+}
+
+.sample-queries {
+ padding: 12px 16px;
+ border-bottom: 1px solid var(--border);
+}
+
+.sample-queries h3 {
+ margin: 0 0 8px 0;
+ font-size: 13px;
+ color: var(--text-secondary);
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+}
+
+.sample-grid {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 6px;
+}
+
+.sample-btn {
+ padding: 4px 10px;
+ font-size: 12px;
+ background: var(--bg-secondary);
+ border: 1px solid var(--border);
+ border-radius: 4px;
+ color: var(--text-primary);
+ cursor: pointer;
+ transition: all 0.15s ease;
+}
+
+.sample-btn:hover {
+ background: var(--accent);
+ border-color: var(--accent);
+ color: white;
+}
+
+.result-header {
+ padding: 8px 12px;
+ border-bottom: 1px solid var(--border);
+}
+
+.result-header .success {
+ color: #22c55e;
+ font-weight: 500;
+}
+
+.result-header .error {
+ color: #ef4444;
+ font-weight: 500;
+}
diff --git a/nexus-explorer/src/frontend/src/components/editor/NqlEditor.tsx b/nexus-explorer/src/frontend/src/components/editor/NqlEditor.tsx
index c6ab798f..efe01fb6 100644
--- a/nexus-explorer/src/frontend/src/components/editor/NqlEditor.tsx
+++ b/nexus-explorer/src/frontend/src/components/editor/NqlEditor.tsx
@@ -1,4 +1,4 @@
-import { Component, createSignal, onMount, Show } from "solid-js";
+import { Component, createSignal, onMount, Show, For } from "solid-js";
import { EditorView, basicSetup } from "codemirror";
import { EditorState } from "@codemirror/state";
import { nqlExecute } from "../../lib/api";
@@ -6,6 +6,26 @@ import { activeDb } from "../../stores/app";
import type { NqlResult } from "../../types";
import "./NqlEditor.css";
+interface SampleQuery {
+ label: string;
+ tooltip: string;
+ query: string;
+ db?: string;
+}
+
+const sampleQueries: SampleQuery[] = [
+ { label: "All Nodes", tooltip: "Show all nodes and edges", query: "MATCH (n) RETURN n" },
+ { label: "Find People", tooltip: "Find all Person nodes", query: "MATCH (n:Person) RETURN n" },
+ { label: "Find Symptoms", tooltip: "Find all Symptom nodes", query: "MATCH (n:Symptom) RETURN n" },
+ { label: "Fatigue Triggers", tooltip: "Find edges connected to Fatigue", query: "MATCH (n:Fatigue)-[r]->(m) RETURN n, r, m" },
+ { label: "Count Nodes", tooltip: "Count total nodes", query: "COUNT nodes" },
+ { label: "Count Edges", tooltip: "Count total edges", query: "COUNT edges" },
+ { label: "Project Tasks", tooltip: "Find all Task nodes", query: "MATCH (n:Task) RETURN n" },
+ { label: "Task Dependencies", tooltip: "Find which tasks block others", query: "MATCH (n)-[r:BLOCKS]->(m) RETURN n, r, m" },
+ { label: "Team Members", tooltip: "Find all people", query: "MATCH (n:Person) RETURN n" },
+ { label: "Tools Used", tooltip: "Find all tools", query: "MATCH (n:Tool) RETURN n" },
+];
+
const NqlEditor: Component = () => {
let editorRef: HTMLDivElement | undefined;
const [query, setQuery] = createSignal("");
@@ -17,7 +37,7 @@ const NqlEditor: Component = () => {
if (!editorRef) return;
editor = new EditorView({
state: EditorState.create({
- doc: "",
+ doc: "// Select a sample query below or write your own\n// Supported: MATCH, GET, FIND, COUNT\n",
extensions: [
basicSetup,
EditorView.theme({
@@ -49,19 +69,52 @@ const NqlEditor: Component = () => {
}
};
+ const loadSample = (sample: SampleQuery) => {
+ if (editor) {
+ editor.dispatch({
+ changes: { from: 0, to: editor.state.doc.length, insert: sample.query },
+ });
+ }
+ setQuery(sample.query);
+ setResult(null);
+ };
+
return (
+
+
+
Sample Queries
+
+
+ {(sample) => (
+
+ )}
+
+
+
+
{(r) => (
-
{JSON.stringify(r(), null, 2)}
+
+
{JSON.stringify(r().data, null, 2)}
diff --git a/nexus-explorer/src/frontend/src/components/graph/GraphView.css b/nexus-explorer/src/frontend/src/components/graph/GraphView.css
index 01f2d85d..73234a5d 100644
--- a/nexus-explorer/src/frontend/src/components/graph/GraphView.css
+++ b/nexus-explorer/src/frontend/src/components/graph/GraphView.css
@@ -1,5 +1,115 @@
.graph-container {
+ flex: 1;
+ min-height: 0;
+ position: relative;
+ background: var(--bg-primary);
+ overflow: hidden;
+}
+
+.graph-svg {
width: 100%;
height: 100%;
- background: var(--bg-primary);
+ display: block;
+}
+
+.node-info-panel {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ background: #1e293b;
+ border: 1px solid #475569;
+ border-radius: 8px;
+ padding: 12px 16px;
+ color: #f1f5f9;
+ z-index: 100;
+ min-width: 200px;
+}
+
+.node-info-panel h4 {
+ margin: 0 0 8px 0;
+ color: #3b82f6;
+}
+
+.node-info-panel p {
+ margin: 4px 0;
+ font-size: 13px;
+ color: #94a3b8;
+}
+
+.node-info-panel button {
+ margin-top: 8px;
+ padding: 4px 12px;
+ font-size: 12px;
+}
+
+.zoom-controls {
+ position: absolute;
+ bottom: 10px;
+ right: 10px;
+ display: flex;
+ gap: 4px;
+ z-index: 100;
+}
+
+.zoom-controls button {
+ width: 32px;
+ height: 32px;
+ padding: 0;
+ font-size: 16px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: #1e293b;
+ border: 1px solid #475569;
+}
+
+.node-info-panel {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ background: #1e293b;
+ border: 1px solid #475569;
+ border-radius: 8px;
+ padding: 12px 16px;
+ color: #f1f5f9;
+ z-index: 100;
+ min-width: 200px;
+}
+
+.node-info-panel h4 {
+ margin: 0 0 8px 0;
+ color: #3b82f6;
+}
+
+.node-info-panel p {
+ margin: 4px 0;
+ font-size: 13px;
+ color: #94a3b8;
+}
+
+.node-info-panel button {
+ margin-top: 8px;
+ padding: 4px 12px;
+ font-size: 12px;
+}
+
+.zoom-controls {
+ position: absolute;
+ bottom: 10px;
+ right: 10px;
+ display: flex;
+ gap: 4px;
+ z-index: 100;
+}
+
+.zoom-controls button {
+ width: 32px;
+ height: 32px;
+ padding: 0;
+ font-size: 16px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: #1e293b;
+ border: 1px solid #475569;
}
diff --git a/nexus-explorer/src/frontend/src/components/graph/GraphView.tsx b/nexus-explorer/src/frontend/src/components/graph/GraphView.tsx
index d5ac2fe8..1d7c1cec 100644
--- a/nexus-explorer/src/frontend/src/components/graph/GraphView.tsx
+++ b/nexus-explorer/src/frontend/src/components/graph/GraphView.tsx
@@ -1,51 +1,226 @@
-import { Component, onMount, onCleanup, createEffect } from "solid-js";
-import ForceGraph from "force-graph";
-import type { ForceGraphInstance } from "force-graph";
+import { Component, createEffect, createSignal, onMount, onCleanup } from "solid-js";
import { nodes, edges, activeDb } from "../../stores/app";
+import type { NodeDto, EdgeDto } from "../../types";
import "./GraphView.css";
+interface GraphNode {
+ id: number;
+ label: string;
+ x: number;
+ y: number;
+ color: string;
+ selected?: boolean;
+}
+
+const colors = [
+ "#3b82f6", "#ef4444", "#22c55e", "#f59e0b", "#8b5cf6",
+ "#ec4899", "#06b6d4", "#f97316", "#14b8a6", "#6366f1"
+];
+
const GraphView: Component = () => {
- let containerRef: HTMLDivElement | undefined;
- let graph: ForceGraphInstance | undefined;
-
- onMount(() => {
- if (!containerRef) return;
- graph = ForceGraph(containerRef)
- .backgroundColor("#0f172a")
- .nodeLabel("label")
- .nodeAutoColorBy("label")
- .nodeRelSize(6)
- .linkLabel("label")
- .linkWidth(1.5)
- .linkDirectionalParticles(1)
- .linkDirectionalParticleWidth(2)
- .onEngineStop(() => {
- graph?.zoomToFit(400, 40);
+ const [graphNodes, setGraphNodes] = createSignal
([]);
+ const [graphEdges, setGraphEdges] = createSignal([]);
+ const [selectedNode, setSelectedNode] = createSignal(null);
+ const [transform, setTransform] = createSignal({ x: 0, y: 0, k: 1 });
+ const [dragging, setDragging] = createSignal(null);
+ const [panning, setPanning] = createSignal(false);
+ const [panStart, setPanStart] = createSignal({ x: 0, y: 0 });
+ let svgRef: SVGSVGElement | undefined;
+
+ createEffect(() => {
+ if (!activeDb()) {
+ setGraphNodes([]);
+ setGraphEdges([]);
+ return;
+ }
+
+ const n = nodes();
+ const e = edges();
+ if (n.length === 0) {
+ setGraphNodes([]);
+ setGraphEdges([]);
+ return;
+ }
+
+ const nodeMap = new Map();
+ const width = 800;
+ const height = 600;
+ const cx = width / 2;
+ const cy = height / 2;
+
+ n.forEach((node: NodeDto, i: number) => {
+ const angle = (2 * Math.PI * i) / n.length;
+ const r = Math.min(width, height) * 0.3;
+ nodeMap.set(node.id, {
+ id: node.id,
+ label: node.label,
+ x: cx + r * Math.cos(angle),
+ y: cy + r * Math.sin(angle),
+ color: colors[i % colors.length],
});
- });
+ });
+
+ // Force simulation
+ for (let iter = 0; iter < 100; iter++) {
+ const arr = Array.from(nodeMap.values());
+ for (let i = 0; i < arr.length; i++) {
+ for (let j = i + 1; j < arr.length; j++) {
+ const dx = arr[j].x - arr[i].x;
+ const dy = arr[j].y - arr[i].y;
+ const dist = Math.sqrt(dx * dx + dy * dy) || 1;
+ const force = 5000 / (dist * dist);
+ arr[i].x -= (dx / dist) * force;
+ arr[i].y -= (dy / dist) * force;
+ arr[j].x += (dx / dist) * force;
+ arr[j].y += (dy / dist) * force;
+ }
+ }
+ e.forEach((edge: EdgeDto) => {
+ const s = nodeMap.get(edge.from);
+ const t = nodeMap.get(edge.to);
+ if (s && t) {
+ const dx = t.x - s.x;
+ const dy = t.y - s.y;
+ const dist = Math.sqrt(dx * dx + dy * dy) || 1;
+ const force = (dist - 100) * 0.01;
+ s.x += (dx / dist) * force;
+ s.y += (dy / dist) * force;
+ t.x -= (dx / dist) * force;
+ t.y -= (dy / dist) * force;
+ }
+ });
+ arr.forEach(node => {
+ node.x += (cx - node.x) * 0.01;
+ node.y += (cy - node.y) * 0.01;
+ });
+ }
- onCleanup(() => {
- graph = undefined;
+ setGraphNodes(Array.from(nodeMap.values()));
+ setGraphEdges(e);
+ setSelectedNode(null);
+ setTransform({ x: 0, y: 0, k: 1 });
});
- createEffect(() => {
- if (!graph || !activeDb()) return;
+ const handleWheel = (e: WheelEvent) => {
+ e.preventDefault();
+ const t = transform();
+ const delta = e.deltaY > 0 ? 0.9 : 1.1;
+ const newK = Math.max(0.1, Math.min(5, t.k * delta));
+ setTransform({ ...t, k: newK });
+ };
- const graphNodes = nodes().map(n => ({
- id: n.id,
- label: n.label,
- }));
+ const handleMouseDown = (e: MouseEvent) => {
+ if (e.target === svgRef || (e.target as Element).tagName === 'rect') {
+ setPanning(true);
+ setPanStart({ x: e.clientX - transform().x, y: e.clientY - transform().y });
+ }
+ };
- const graphEdges = edges().map(e => ({
- source: e.from,
- target: e.to,
- label: e.label,
- }));
+ const handleMouseMove = (e: MouseEvent) => {
+ const dragNode = dragging();
+ if (dragNode) {
+ const t = transform();
+ const svg = svgRef!;
+ const rect = svg.getBoundingClientRect();
+ const x = (e.clientX - rect.left - t.x) / t.k;
+ const y = (e.clientY - rect.top - t.y) / t.k;
+ setGraphNodes(prev => prev.map(n => n.id === dragNode.id ? { ...n, x, y } : n));
+ } else if (panning()) {
+ const ps = panStart();
+ setTransform(prev => ({ ...prev, x: e.clientX - ps.x, y: e.clientY - ps.y }));
+ }
+ };
- graph.graphData({ nodes: graphNodes, links: graphEdges });
- });
+ const handleMouseUp = () => {
+ setDragging(null);
+ setPanning(false);
+ };
+
+ const handleNodeMouseDown = (node: GraphNode, e: MouseEvent) => {
+ e.stopPropagation();
+ setSelectedNode(node);
+ setDragging(node);
+ };
+
+ return (
+
+
+
+ {/* Node info panel */}
+ {selectedNode() && (
+
+
{selectedNode()!.label}
+
ID: {selectedNode()!.id}
+
Connections: {graphEdges().filter(e => e.from === selectedNode()!.id || e.to === selectedNode()!.id).length}
+
+
+ )}
- return
;
+ {/* Zoom controls */}
+
+
+
+
+
+
+ {/* Welcome section */}
+
+
Welcome to SensibleDB
+
+ Explore your data through connections. Ask questions, find patterns, and generate insights — no database expertise required.
+
+
+
+ {/* Quick stats */}
+ {hasData && (
+
+
+ {currentNodes}
+ Items
+
+
+ {currentEdges}
+ Connections
+
+
+ {databases().length}
+ Databases
+
+
+ )}
+
+ {/* Demo databases */}
+
+
Try a Demo Database
+
+ Explore pre-loaded examples to see how SensibleDB works. Click a card to start exploring.
+
+
+
+ {(demo) => (
+
+
+
{demo.description}
+
+
+ Try asking:
+
+ {(q) => (
+
+ )}
+
+
+
+
+
+
+ {/* Getting started tips */}
+
+
Getting Started
+
+
+
🔗
+
Explore the Graph
+
See how your data connects. Click items to see details, drag to rearrange, scroll to zoom.
+
+
+
💬
+
Ask Questions
+
Use the Chat view to ask about your data in plain English. No query language needed.
+
+
+
📊
+
Generate Reports
+
Create summaries of your data for any time period. Export and share with your team.
+
+
+
+
+
+
+ {/* Metric cards */}
+
+
+ {nodeCount}
+ Total Items
+
+
+ {edgeCount}
+ Connections
+
+
+ {nodeTypes.size}
+ Item Types
+
+
+ {edgeTypes.size}
+ Relationship Types
+
+
+
+ {/* Key findings */}
+
+
Key Findings
+
+ {mostConnected.length > 0 && (
+
+
🔗
+
+ {getNodeLabel(mostConnected[0][0])} is the most connected item with {mostConnected[0][1]} connections
+
+
+ )}
+
+
📊
+
+ Your data contains {nodeTypes.size} different types: {Array.from(nodeTypes).join(", ")}
+
+
+
+
🔀
+
+ {edgeTypes.size} types of relationships connect your items: {Array.from(edgeTypes).join(", ")}
+
+
+
+
+
+ {/* Most connected */}
+ {mostConnected.length > 0 && (
+
+
Most Connected Items
+
+ {mostConnected.map(([id, count]) => (
+
+ {getNodeLabel(id)}
+ {count} connections
+
+ ))}
+
+
+ )}
+
+ {/* Item type breakdown */}
+
+
Item Breakdown by Type
+
+ {Array.from(nodeTypes).map(type => {
+ const count = nodes().filter(n => n.label.startsWith(type)).length;
+ const pct = nodeCount > 0 ? Math.round((count / nodeCount) * 100) : 0;
+ return (
+
+
{type}
+
+
{count} ({pct}%)
+
+ );
+ })}
+
+
+