supermemory/apps/web/components
MaheshtheDev b0e5766a65
Some checks failed
Publish Memory Graph / publish (push) Has been cancelled
feat: make graph popover content scrollable and add View full button (#920)
## Summary

Addresses user feedback about the graph view: content in node popovers was hard-truncated at 100 characters with no way to read the full text or navigate to the document.

### Changes

**Scrollable popover content (no more truncation)**
- Removed the `truncate(content, 100)` call -- full content is now rendered in the popover
- Made the content area scrollable with `maxHeight: 100px` and `overflowY: auto`
- Increased version timeline entry truncation from 60 to 120 characters
- Increased version timeline container height from 120px to 160px

**"View document" in shortcuts panel**
- Added an eye icon + "View document" entry to the shortcuts panel (alongside existing arrow navigation)
- Clicking opens the Document Modal for the corresponding document
- Works for both document nodes (opens that document) and memory nodes (opens the parent document)
- Popover is automatically dismissed before the modal opens (prevents z-index overlap)
- Wired `onOpenDocument` callback through the full component chain: `page.tsx` -> `GraphLayoutView` -> `MemoryGraph` wrapper -> `MemoryGraphBase` -> `NodeHoverPopover`

**Shortcuts panel visual cleanup**
- Icon badges (`KeyBadge`) retain dark background and border for a keyboard-key badge look
- All icons (including the new EyeIcon) are uniformly wrapped in `KeyBadge` for consistent styling
- Removed background, border, and border-radius from the shortcuts panel container itself
- Widened shortcuts panel from 100px to 160px so navigation labels are fully visible

**Type safety improvement**
- Changed `MemoryGraphProps.colors` from `GraphThemeColors` to `Partial<GraphThemeColors>` to match actual usage (callers pass partial overrides that get merged with defaults)
- Replaced `as Partial<typeof import(...)>` cast with proper `satisfies Partial<GraphThemeColors>` using a direct type import

### Files changed
- `packages/memory-graph/src/components/node-hover-popover.tsx` -- scrollable content, EyeIcon + "View document" in shortcuts, KeyBadge styling, NavButton icon type broadened to `React.ReactNode`, all icons wrapped in KeyBadge
- `packages/memory-graph/src/components/memory-graph.tsx` -- popover dismissal wrapper (`handleOpenDocument`), prop forwarding
- `packages/memory-graph/src/types.ts` -- `onOpenDocument` prop on `MemoryGraphProps`, `colors` changed to `Partial<GraphThemeColors>`
- `apps/web/components/graph-layout-view.tsx` -- accepts and passes `onOpenDocument`
- `apps/web/components/memory-graph/memory-graph-wrapper.tsx` -- `onOpenDocument` in wrapper props, clean type import
- `apps/web/app/(app)/page.tsx` -- `handleOpenDocumentById` handler, wired to `GraphLayoutView`

## Testing

### Unit Tests (154/154 passed)
- **Command:** `cd packages/memory-graph && bun run test`
- **Result:** 9 test files, 154 tests passed (107 existing + 47 new)
- **New test file:** `packages/memory-graph/src/__tests__/node-hover-popover.test.tsx` covering:
  - Layout constants (`SHORTCUTS_W=160`, `CARD_W=280`, `TOTAL_W` formula)
  - Content area scrollability (`maxHeight:100`, `overflowY:auto`, `flex:1 1 auto`, no truncation)
  - KeyBadge styles (has `backgroundColor: colors.controlBg`, has `border` with `colors.controlBorder`)
  - Shortcuts panel styles (no `backgroundColor`, no `border`, no `borderRadius`)
  - EyeIcon SVG component (`aria-hidden`, viewBox, path, circle, stroke)
  - "View document" button render guard (`onOpenDocument && documentId`)
  - `documentId` derivation (memory vs document node)
  - VersionTimeline truncation limit (120 chars) and container maxHeight (160)
  - `onOpenDocument` prop wiring
  - NavButton icon prop type (`React.ReactNode`), all icons wrapped in KeyBadge
  - `handleOpenDocument` wrapper in MemoryGraph (dismiss calls, ordering, useCallback deps)

### Build
- **Command:** `bun run --filter=@supermemory/memory-graph build`
- **Result:** Build succeeds, 0 errors

### Lint/Format
- **Command:** `bunx biome ci --changed --since=origin/main --no-errors-on-unmatched`
- **Result:** 6 files checked, no fixes applied, 0 errors

### Type Checking
- `packages/memory-graph`: 0 errors
- `apps/web`: 0 new errors introduced

### CI
- "CI - Type Check, Format & Lint" workflow passes
- "Claude Code Review" workflow fails due to repo config (`non-human actor: vorflux` not in `allowed_bots` list) -- not related to code changes

---
**Session Details**
- Session: [View Session](https://supermemory.us1.vorflux.com/agent-sessions/d0c067f1-38c1-40c5-ada9-b2ffb7331d1c)
- Requested by: Mahesh Sanikommu (mahesh@supermemory.com)
- Address comments on this PR. Add `(aside)` to your comment to have me ignore it.
2026-05-11 02:09:36 +00:00
..
add-document fix: Usagemeter not defined error [P0] (#922) 2026-05-10 17:55:50 -07:00
chat chore: improve the codebase with react doctor (#917) 2026-05-09 19:12:01 +00:00
document-cards chore: improve the codebase with react doctor (#917) 2026-05-09 19:12:01 +00:00
document-modal chore: improve the codebase with react doctor (#917) 2026-05-09 19:12:01 +00:00
integrations fix: payment upgrade issue (#918) 2026-05-09 19:52:21 +00:00
mcp-modal chore: improve the codebase with react doctor (#917) 2026-05-09 19:12:01 +00:00
memory-graph feat: make graph popover content scrollable and add View full button (#920) 2026-05-11 02:09:36 +00:00
nova feat(nova): add hermes plugin instructions (#832) 2026-04-06 23:18:38 +00:00
onboarding remove unused old onboarding flow (#904) 2026-05-06 10:05:22 -07:00
settings fix: payment upgrade issue (#918) 2026-05-09 19:52:21 +00:00
text-editor chore: improve the codebase with react doctor (#917) 2026-05-09 19:12:01 +00:00
add-space-modal.tsx chore: improve the codebase with react doctor (#917) 2026-05-09 19:12:01 +00:00
animated-gradient-background.tsx feat: major iteration on the app (#896) 2026-05-02 23:58:58 +00:00
connect-ai-modal.tsx chore: improve the codebase with react doctor (#917) 2026-05-09 19:12:01 +00:00
dashboard-view.tsx chore: improve the codebase with react doctor (#917) 2026-05-09 19:12:01 +00:00
document-icon.tsx chore: improve the codebase with react doctor (#917) 2026-05-09 19:12:01 +00:00
documents-command-palette.tsx chore: improve the codebase with react doctor (#917) 2026-05-09 19:12:01 +00:00
ensure-workspace.tsx feat: enhanced the integration page for more conversion (#899) 2026-05-04 17:41:52 +00:00
error-boundary.tsx error boundaries 2026-02-12 16:41:12 -08:00
feedback-modal.tsx chore: improve the codebase with react doctor (#917) 2026-05-09 19:12:01 +00:00
fullscreen-note-modal.tsx fix: improve settings sidebar overflow (#924) 2026-05-10 17:56:28 -07:00
graph-layout-view.tsx feat: make graph popover content scrollable and add View full button (#920) 2026-05-11 02:09:36 +00:00
header.tsx fix: improve settings sidebar overflow (#924) 2026-05-10 17:56:28 -07:00
highlights-card.tsx feat: nova dashboard improvements with theme (#905) 2026-05-06 22:29:22 +00:00
initial-header.tsx fix: input disable when onboarding org creation (#855) 2026-04-16 16:40:15 +00:00
integration-icons.tsx chore: improve the codebase with react doctor (#917) 2026-05-09 19:12:01 +00:00
integrations-view.tsx feat: autumn migration (#902) 2026-05-08 22:42:55 +00:00
memories-grid.tsx chore: improve the codebase with react doctor (#917) 2026-05-09 19:12:01 +00:00
mobile-banner.tsx chore: remove the new folder and fix imports (#740) 2026-02-16 14:30:29 -07:00
next-app-research-cta.tsx chore: improve the codebase with react doctor (#917) 2026-05-09 19:12:01 +00:00
query-client.tsx chore: remove the new folder and fix imports (#740) 2026-02-16 14:30:29 -07:00
quick-note-card.tsx chore: improve the codebase with react doctor (#917) 2026-05-09 19:12:01 +00:00
remove-connection-dialog.tsx chore: improve the codebase with react doctor (#917) 2026-05-09 19:12:01 +00:00
select-spaces-modal.tsx chore: improve the codebase with react doctor (#917) 2026-05-09 19:12:01 +00:00
share-modal.tsx fix: improve settings sidebar overflow (#924) 2026-05-10 17:56:28 -07:00
space-selector.tsx Fix mobile header layout and space selector dropdown alignment (#921) 2026-05-10 17:56:08 -07:00
spinner.tsx feat: mobile responsive, lint formats, toast, render issue fix (#688) 2026-01-21 03:11:53 +00:00
superloader.tsx chore: improve the codebase with react doctor (#917) 2026-05-09 19:12:01 +00:00
timeline-view.tsx chore: improve the codebase with react doctor (#917) 2026-05-09 19:12:01 +00:00
user-profile-menu.tsx chore: improve the codebase with react doctor (#917) 2026-05-09 19:12:01 +00:00
utils.ts chore: remove the new folder and fix imports (#740) 2026-02-16 14:30:29 -07:00