Add SchemaGraph module and UI improvements (#1492)

* Enable code intelligence, update steeing

* Remove disable logic for zoom in & out

* Don’t hide whole screen when schema sync fetching

* Update small button style

* Update Chip styling to add subtle variants

* Move SelectLayout to components/Graph

* feat: Add SchemaGraph module with graph transformation utilities

- Create useSchemaGraphNodes hook to transform vertex types to graph nodes
- Create useSchemaGraphEdges hook to transform edge connections to graph edges
- Create SchemaGraph component with zoom/layout controls
- Integrate SchemaGraph into SchemaExplorer route
- Reuse existing graph styles for consistent visualization

Tasks 8-9 of schema-explorer spec

* Simplify use of edge connection id

* Add EdgeConnectionId to branded types in steering

* Move schemaExplorerLayout

* Undo export of Arrow

* Cleanup imports and constants

* Remove pointless use of cn()

* Update some UI labels and spacing

* Allow properties to wrap if name or type is too long

* Ensure property counts are formatted

* Remove unused code

* Remove sidebar onClose

* Fix formatting

* Add better typeing in graph data

Author: kmcginnes

.kiro/settings/lsp.json

@@ -0,0 +1,139 @@
+{
+  "languages": {
+    "rust": {
+      "name": "rust-analyzer",
+      "command": "rust-analyzer",
+      "args": [],
+      "file_extensions": ["rs"],
+      "project_patterns": ["Cargo.toml"],
+      "exclude_patterns": ["**/target/**"],
+      "multi_workspace": false,
+      "initialization_options": {
+        "cargo": {
+          "buildScripts": {
+            "enable": true
+          }
+        },
+        "diagnostics": {
+          "enable": true,
+          "enableExperimental": true
+        },
+        "workspace": {
+          "symbol": {
+            "search": {
+              "scope": "workspace"
+            }
+          }
+        }
+      },
+      "request_timeout_secs": 60
+    },
+    "python": {
+      "name": "pyright",
+      "command": "pyright-langserver",
+      "args": ["--stdio"],
+      "file_extensions": ["py"],
+      "project_patterns": [
+        "pyproject.toml",
+        "setup.py",
+        "requirements.txt",
+        "pyrightconfig.json"
+      ],
+      "exclude_patterns": [
+        "**/__pycache__/**",
+        "**/venv/**",
+        "**/.venv/**",
+        "**/.pytest_cache/**"
+      ],
+      "multi_workspace": false,
+      "initialization_options": {},
+      "request_timeout_secs": 60
+    },
+    "ruby": {
+      "name": "solargraph",
+      "command": "solargraph",
+      "args": ["stdio"],
+      "file_extensions": ["rb"],
+      "project_patterns": ["Gemfile", "Rakefile"],
+      "exclude_patterns": ["**/vendor/**", "**/tmp/**"],
+      "multi_workspace": false,
+      "initialization_options": {},
+      "request_timeout_secs": 60
+    },
+    "typescript": {
+      "name": "typescript-language-server",
+      "command": "typescript-language-server",
+      "args": ["--stdio"],
+      "file_extensions": ["ts", "js", "tsx", "jsx"],
+      "project_patterns": ["package.json", "tsconfig.json"],
+      "exclude_patterns": ["**/node_modules/**", "**/dist/**"],
+      "multi_workspace": false,
+      "initialization_options": {
+        "preferences": {
+          "disableSuggestions": false
+        }
+      },
+      "request_timeout_secs": 60
+    },
+    "go": {
+      "name": "gopls",
+      "command": "gopls",
+      "args": [],
+      "file_extensions": ["go"],
+      "project_patterns": ["go.mod", "go.sum"],
+      "exclude_patterns": ["**/vendor/**"],
+      "multi_workspace": false,
+      "initialization_options": {
+        "usePlaceholders": true,
+        "completeUnimported": true
+      },
+      "request_timeout_secs": 60
+    },
+    "java": {
+      "name": "jdtls",
+      "command": "jdtls",
+      "args": [],
+      "file_extensions": ["java"],
+      "project_patterns": [
+        "pom.xml",
+        "build.gradle",
+        "build.gradle.kts",
+        ".project"
+      ],
+      "exclude_patterns": ["**/target/**", "**/build/**", "**/.gradle/**"],
+      "multi_workspace": false,
+      "initialization_options": {
+        "settings": {
+          "java": {
+            "compile": {
+              "nullAnalysis": {
+                "mode": "automatic"
+              }
+            },
+            "configuration": {
+              "annotationProcessing": {
+                "enabled": true
+              }
+            }
+          }
+        }
+      },
+      "request_timeout_secs": 60
+    },
+    "cpp": {
+      "name": "clangd",
+      "command": "clangd",
+      "args": ["--background-index"],
+      "file_extensions": ["cpp", "cc", "cxx", "c", "h", "hpp", "hxx"],
+      "project_patterns": [
+        "CMakeLists.txt",
+        "compile_commands.json",
+        "Makefile"
+      ],
+      "exclude_patterns": ["**/build/**", "**/cmake-build-**/**"],
+      "multi_workspace": false,
+      "initialization_options": {},
+      "request_timeout_secs": 60
+    }
+  }
+}

.kiro/steering/product.md

@@ -29,6 +29,7 @@ database types and query languages.
 - **Tabular View**: Show/hide nodes and edges, export to CSV/JSON
 - **Data Explorer**: List all nodes and properties for a specific node type and
   send to graph view
+- **Schema Explorer**: View node types and their relationships as a graph
 - **Authentication**: AWS IAM authentication via SigV4 signing protocol
 
 ## Architecture

.kiro/steering/structure.md

@@ -71,3 +71,29 @@ inclusion: always
   - Layout preferences
 - **External Data**: Graph data is queried directly from the connected graph
   databases and is not owned or persisted by Graph Explorer
+
+## Branded Types
+
+The project uses branded types from `@/utils` for type safety. These prevent
+accidental mixing of similar types at compile time.
+
+| Type               | Creator Function             | Location                                |
+| ------------------ | ---------------------------- | --------------------------------------- |
+| `VertexId`         | `createVertexId()`           | `@/core/entities/vertex`                |
+| `VertexType`       | `createVertexType()`         | `@/core/entities/vertex`                |
+| `EdgeId`           | `createEdgeId()`             | `@/core/entities/edge`                  |
+| `EdgeType`         | `createEdgeType()`           | `@/core/entities/edge`                  |
+| `EdgeConnectionId` | `createEdgeConnectionId()`   | `@/core/StateProvider/edgeConnectionId` |
+| `ConfigurationId`  | `createNewConfigurationId()` | `@/core/ConfigurationProvider/types`    |
+| `RenderedVertexId` | `toRenderedVertexId()`       | `@/core/StateProvider/renderedEntities` |
+| `RenderedEdgeId`   | `toRenderedEdgeId()`         | `@/core/StateProvider/renderedEntities` |
+
+Always use the appropriate branded type instead of `string` when working with
+these identifiers.
+
+## Database Queries
+
+- Use the `query` template tag from `@/utils` for all query strings (Gremlin,
+  openCypher, SPARQL) to ensure consistent formatting
+- For Gremlin queries, use `escapeString()` from `@/utils` to escape special
+  characters in string literals

AGENTS.md

@@ -10,8 +10,10 @@
   declarations (e.g., `function handleClick() {}` over
   `const handleClick = () => {}`). Arrow functions within function scope are
   fine.
-- Imports are sorted using ESLint, which can be invoked for a single file using
-  `pnpm eslint --fix <path-to-file>`
+- Every commit should have no type errors, lint errors, or failing tests
+- When possible, create failing tests first then implement the logic to make the
+  tests pass
+- Add or update tests for the code you change, even if nobody asked
 
 ### React Rules
 
@@ -20,9 +22,16 @@
 - Avoid prop drilling - use context or state management
 - Follow principle of least privilege for component props
 
+### Tailwind Rules
+
+- Use Tailwind v4 CSS syntax
+- The `tailwind.config.ts` file remains for legacy reasons
+
 ## Project Commands
 
+- This project uses `pnpm` only, never use `npm`
 - All commands should be run from the root of the project repository
+- Assume dev server is always running
 
 ### Development
 
@@ -32,32 +41,28 @@
 
 ### Quality Checks
 
-- `pnpm lint` - Fix linting issues
-- `pnpm check:lint` - Check linting only
-- `pnpm format` - Format code
-- `pnpm check:format` - Check formatting only
-- `pnpm check:types` - Type checking
-- `pnpm checks` - Run all checks
+- `pnpm checks` - Run checks for linting, types, and formatting in parallel
+- `pnpm check:types` - Check for TypeScript type errors
+- `pnpm check:lint` - Check for lint errors
+- `pnpm check:format` - Check for formatting errors
+- `pnpm lint` - Fix any fixable linting errors
+- `pnpm lint <path-to-file>` - Fix any fixable linting errors for a specific
+  file
+- `pnpm format` - Format all files
 
 ### Testing
 
-- `pnpm test` - Run tests
-- `pnpm test:watch` - Watch mode
-- `pnpm coverage` - Test coverage
-- `pnpm vitest --run <path-to-file>` - Run tests for specific file
-
-### Maintenance
-
-- `pnpm clean` - Clean build artifacts
-- `pnpm clean:dep` - Remove node_modules
+- `pnpm test` - Run all tests
+- `pnpm test <path-to-file>` - Run tests for specific file
+- `pnpm coverage` - Check test coverage
 
 ### Git
 
 - `git --no-pager` - Disable pager for git commands
 
 ### Dependency Management
 
-Add dependency to specific package
+Add dependency to specific workspace
 
 ```bash
 pnpm add <package> --filter <workspace-name>
@@ -118,15 +123,15 @@ src/
 ### Frontend (graph-explorer)
 
 - React 19 + TypeScript
+- React Compiler (no manual useMemo/useCallback needed)
 - Vite build tool
 - TailwindCSS + Radix UI components
 - React Router for routing
 - Cytoscape.js for graph visualization
-- React Query for data fetching
+- TanStack Query (formerly called React Query) for data fetching
 - Jotai for state management
-- React Hook Form + Zod validation
 - LocalForage for persistent app state
-- React Compiler (no manual useMemo/useCallback needed)
+- React Hook Form + Zod validation
 
 ### Backend (proxy-server)
 
@@ -155,39 +160,4 @@ src/
 
 ### Testing
 
-- From the package root you can just call `pnpm test`. The commit should pass
-  all tests before you merge.
-- To focus on one step, add the Vitest pattern:
-  `pnpm vitest run -t "<test name>"`.
-- Fix any test or type errors until the whole suite is green.
-- After moving files or changing imports, run
-  `pnpm lint --filter <project_name>` to be sure ESLint and TypeScript rules
-  still pass.
-- Add or update tests for the code you change, even if nobody asked.
-
 See `.kiro/steering/testing.md` for testing patterns and examples.
-
-### Branded Types
-
-The project uses branded types from `@/utils` for type safety. These prevent
-accidental mixing of similar types at compile time.
-
-| Type               | Creator Function             | Location                                |
-| ------------------ | ---------------------------- | --------------------------------------- |
-| `VertexId`         | `createVertexId()`           | `@/core/entities/vertex`                |
-| `VertexType`       | `createVertexType()`         | `@/core/entities/vertex`                |
-| `EdgeId`           | `createEdgeId()`             | `@/core/entities/edge`                  |
-| `EdgeType`         | `createEdgeType()`           | `@/core/entities/edge`                  |
-| `ConfigurationId`  | `createNewConfigurationId()` | `@/core/ConfigurationProvider/types`    |
-| `RenderedVertexId` | `toRenderedVertexId()`       | `@/core/StateProvider/renderedEntities` |
-| `RenderedEdgeId`   | `toRenderedEdgeId()`         | `@/core/StateProvider/renderedEntities` |
-
-Always use the appropriate branded type instead of `string` when working with
-these identifiers.
-
-### Database Queries
-
-- Use the `query` template tag from `@/utils` for all query strings (Gremlin,
-  openCypher, SPARQL) to ensure consistent formatting
-- For Gremlin queries, use `escapeString()` from `@/utils` to escape special
-  characters in string literals

package.json

@@ -13,8 +13,8 @@
   "scripts": {
     "prepare": "husky install",
     "precommit": "lint-staged && pnpm check:types",
-    "lint": "eslint . --fix --concurrency=auto",
-    "check:lint": "eslint . --concurrency=auto",
+    "lint": "eslint --fix --concurrency=auto",
+    "check:lint": "eslint --concurrency=auto",
     "format": "prettier --write .",
     "check:format": "prettier --check .",
     "test": "vitest run",

packages/graph-explorer/src/components/Button/Button.tsx

@@ -19,7 +19,7 @@ export const buttonStyles = cva({
       danger: "",
     },
     size: {
-      small: "h-8 rounded-sm px-2 text-base [&_svg]:size-5",
+      small: "h-8 rounded-md px-2 text-sm [&_svg]:size-4",
       base: "h-10 rounded-md px-4 text-base [&_svg]:size-5",
       large: "h-12 rounded-md px-5 text-lg [&_svg]:size-6",
     },

packages/graph-explorer/src/components/Chip.tsx

@@ -5,10 +5,15 @@ import { cva, type VariantProps } from "cva";
 import { cn } from "@/utils";
 
 const chip = cva({
-  base: "chip inline-flex h-[22px] items-center justify-center gap-1 overflow-hidden rounded-full px-2.5 text-sm font-medium text-ellipsis whitespace-nowrap text-white select-none [&>svg]:size-4",
+  base: "chip inline-flex h-[22px] items-center justify-center gap-1 overflow-hidden rounded-full px-2.5 text-sm leading-none font-medium text-ellipsis whitespace-nowrap text-white select-none [&>svg]:size-4",
   variants: {
     variant: {
+      neutral: "bg-neutral",
+      "neutral-subtle":
+        "bg-neutral-subtle text-neutral-foreground border-neutral-foreground/25 border",
       primary: "bg-primary-main",
+      "primary-subtle":
+        "bg-primary-subtle text-primary-foreground border-primary-foreground/25 border",
       success: "bg-success-main",
       error: "bg-error-main",
       warning: "bg-warning-main",

packages/graph-explorer/src/components/Graph/GraphControlButtons.tsx

@@ -39,29 +39,27 @@ export function ZoomToFitButton() {
 }
 
 export function ZoomInButton() {
-  const { onZoomIn, isZoomInDisabled } = useGraphGlobalActions();
+  const { onZoomIn } = useGraphGlobalActions();
 
   return (
     <IconButton
       tooltipText="Zoom in"
       icon={<ZoomInIcon />}
       variant="text"
       onClick={onZoomIn}
-      disabled={isZoomInDisabled}
     />
   );
 }
 
 export function ZoomOutButton() {
-  const { onZoomOut, isZoomOutDisabled } = useGraphGlobalActions();
+  const { onZoomOut } = useGraphGlobalActions();
 
   return (
     <IconButton
       tooltipText="Zoom out"
       icon={<ZoomOutIcon />}
       variant="text"
       onClick={onZoomOut}
-      disabled={isZoomOutDisabled}
     />
   );
 }