Views¶

Graph Core provides multiple ways to visualize and interact with your data.

Cards View¶

Shows nodes as nested cards with visual hierarchy.

Layout Rules:

• Cards use all available space
• When a card has both notes and children: 50/50 split
• Small cards: children become vertical list
• Large cards: children display as grid

Features:

• Nested card display up to 4 levels deep
• Card width: the grid fits as many columns as it can while keeping each card wide enough to read, and chooses among those the count that makes cards closest to square. A window too narrow for one full-width card still gets a single column.
• Card height: a row is as tall as the card in it that needs the most room, between a floor and a cap. A single height for every card was wrong both ways at once - it wasted most of a card holding one child and still cut the list off a card holding ten. The view scrolls when the cards do not all fit, because a card below the fold is easier to deal with than one cut through the middle. The cap stops one long note from dragging every card in its row down with it.
• A note longer than its card scrolls, and its last line fades rather than stopping flat, so a truncated note is not mistaken for a broken one.
• Note text starts at the same left edge as the title at every card size: both take their horizontal padding from one per-size value, so changing one cannot drift from the other. Ordered-list numbers render inside the note box rather than hanging outside it, because a wide marker (a line such as 260720. ... is an ordered list in Markdown) would otherwise overflow the card's left edge.
• Inline notes editing: click a card's notes to edit them in place. A card with no notes yet shows a muted "Add notes..." placeholder in the same spot, so there is always something to click - without it an empty card offers no target and its notes cannot be started at all. The placeholder is not shown on card-xs, where notes are hidden entirely, or on nodes whose notes are marked sensitive.
• Color inheritance from parent nodes
• Hover tooltips for quick preview
• Progress bars showing child completion percentage
• Due date badges with urgency indicators
• Drag and drop reordering

Card Size Classes¶

Cards automatically receive size classes based on available space:

Smaller cards progressively hide less important information to maintain readability.

Grandchildren Display¶

Cards show up to two levels of descendants:

• Child nodes display as nested cards or list items
• Grandchildren appear as a simple list within each child card
• Grandchildren show type icons, titles, and completion checkboxes
• Click a grandchild to select it; double-click to navigate into it

Best for: Visual overview, dashboard-style browsing

Graph View¶

Force-directed graph visualization using Cytoscape.js.

Each node is drawn as a card, and an edge ends at the visible border of the card it points to. Cytoscape draws edges to a node box that is separate from the card, so the box is resized to the card whenever the card is rendered or changes size: when its note preview appears or disappears, its title wraps differently, or the preview length changes. Arrowheads therefore neither stop short of a card nor disappear beneath one.

Layout Modes¶

Change layouts using the layout selector in the Graph toolbar.

Physics Settings¶

The radial layout uses a physics simulation (cose-bilkent algorithm) with configurable parameters. Access these via the settings panel in Graph view:

Click "Apply" after adjusting sliders to restart the layout with new parameters. Settings are saved per-workspace.

Graph Controls¶

Relax uses a different engine to the radial layout. Radial runs cose-bilkent, which has a true repulsion force. Relax and continuous relax run cola, which has none: its only spacing controls are nodeSpacing, a padding added to each node's bounding box for overlap avoidance, and edgeLength.

Padding alone spreads nodes vertically and almost not at all horizontally. Nodes are far wider than they are tall - a node box is 120-250px wide against a title row of roughly 40px - so the padded boxes overlap vertically long before they overlap horizontally, and only the vertical overlaps are ever resolved. The Node Repulsion setting therefore scales edgeLength as well, which is what moves nodes apart sideways. At the default repulsion the edge length is exactly what the Edge Length slider says; above it, edges lengthen in proportion.

Continuous Relax Mode (Lock Relax):

When locked, the physics simulation runs continuously, keeping nodes dynamically arranged. Useful for exploring large graphs where manual positioning would be tedious.

Auto-Fit Mode (Lock Fit):

When locked, the view automatically adjusts zoom and pan every 300ms to keep all nodes visible. Useful when nodes are being added or moved frequently.

Node Position Persistence¶

Node positions are automatically saved to browser storage:

• Positions persist per-workspace and per-parent context
• Key format: graph-positions-{workspace}-{parentId}
• Invalid positions (corrupted or out of bounds) are filtered automatically
• Positions survive page reloads within the same browser

Display Options¶

Interactions¶

Insert Between Nodes¶

Insert a new node in the middle of an existing relationship:

1. Hold Cmd/Ctrl and click on an edge
2. Enter the new node's title in the modal
3. The new node is inserted between the connected nodes

For parent-child edges:

Before: Parent → Child
After:  Parent → NewNode → Child

For link edges:

Before: NodeA ⟷ NodeB
After:  NodeA ⟷ NewNode ⟷ NodeB

Wrap with Parent¶

Create a new parent for an existing node:

1. Select a node and open its edit modal
2. Click "Wrap with Parent" in the modal footer
3. Enter a title for the new parent
4. The current node becomes a child of the new parent

The new parent is positioned near the child in the graph.

Best for: Seeing relationships, mind mapping, visual organization

Table View¶

The hierarchical table: a spreadsheet-like view with sortable columns that also carries the tree structure, drawn with the prefixes described below. It is the view switcher's "Table" entry and is identified as tree in code and in view settings.

Columns:

• Title
• Type
• Status (completion)
• Due date, Start date, End date
• Importance
• Tags

Features:

• Click headers to sort
• Expand/collapse nodes to walk the hierarchy
• Drag to reorder within a parent
• Inline title editing (double-click)
• Multi-select with Ctrl/Cmd+Click, and bulk selection with checkboxes
• Completion checkboxes for tasks and projects
• Direct cell editing

Tree Prefix Visualization¶

The table displays hierarchy using Unicode box-drawing characters:

├─ Parent 1
│  ├─ Child 1
│  └─ Child 2
└─ Parent 2
   └─ Child 3

Characters used:

• ├─ Junction for non-last children
• └─ Corner for last child
• │ Vertical continuation line

This provides clear visual hierarchy while maintaining the spreadsheet format.

Column Resize¶

Drag column borders to resize. Widths are persisted to browser storage:

• Storage key: graphcore-table-colwidths
• Widths survive page reloads
• Default widths are restored if storage is cleared

Default column widths:

Best for: Browsing hierarchies, organizing projects, data management, bulk operations

Timeline View¶

Displays nodes with dates on a horizontal timeline.

Features:

• Zoom in/out with Ctrl/Cmd+scroll (centered on cursor)
• Drag bars to move dates
• Resize handles for start/end dates. A node with only a due date is drawn from that date to today, so its bar has no end handle: that edge is today, not a date on the node.
• Draggable labels column
• Weekend shading
• Today marker
• Multi-day event support

Date Behavior:

• Uses due_date, start_date, or end_date fields
• The scrollable range covers at least one year back and one year ahead of today, and extends a month beyond the earliest and latest dates in view, so there is always room to scroll past and to drag a bar's start earlier than any existing date
• Nodes without end_date stretch to today
• Project boxes span the range of child tasks
• Events display as date-range bars
• Groups render as vertical bars spanning child rows
• Labels stay in view: when a bar, project box or group starts left of the visible area, its label moves to the visible edge and follows the scroll, until the bar's own end would push it out

Best for: Project planning, scheduling

Tasks View¶

A Kanban board of the task-type nodes of the current container and its descendants.

Filters: a minimum priority in the view's toolbar. Whether completed tasks are shown follows the main toolbar's completed toggle, the same one every other view uses; the board has no switch of its own. The footer counts the tasks shown.

A task added from the Add new bar while the board is open appears in To do at once.

Columns¶

In progress and Blocked are marks of their own, stored on the task and set only by the board; a task carries at most one. They are not derived from the start date, which every task receives at creation.

Moving a card¶

Dragging a card to another column writes what puts it there, and stamps the date of the move:

• Into In progress: sets the mark and sets the start date to today.
• Into Blocked: sets the mark. Dates are left as they are.
• Into Done: marks the task complete and clears any mark. Completing stamps the end date, as it does from anywhere else.
• Into To do: clears the mark and reopens the task. Its dates are left as they are.
• Out of Done: reopens the task into the column it was dropped on.

A move can be undone like any other edit. A task completed from its card's checkbox keeps its mark, so reopening it returns it to the column it was in.

While completed items are hidden, the board has three columns and a card can only be completed from its checkbox, which takes it off the board. Showing completed items adds the Done column as a drop target and lists the completed tasks there.

Within a column, cards are ordered by due date, earliest first and undated last, then by priority. Each card shows a completion checkbox, the title, the due date with overdue and due-soon colours, the priority and the project path, and carries the colour the task inherits from its ancestors.

A card answers the mouse as a card in the other views does: a click selects it, framing it in the accent colour, and a double click navigates into it, which for a task without children opens its detail panel. Space opens the details of the selected card.

People View¶

Contact management for the person-type nodes of the current workspace; the list reloads when you switch workspaces.

Features:

• Organization grouping and filtering
• Contact fields: email, phone, role, organization, website, address
• Sensitive data masking (email, phone)
• Organization linking with autocomplete
• Color assignment (random or inherited from organization)
• Sorting by title or custom fields

Best for: Contact management, team organization

Trash View¶

Browse and manage deleted items.

Features:

• View all trashed nodes
• Restore nodes to their original location
• Permanently delete items
• Empty all trash at once

Access: Via the Trash item in the sidebar navigation.

View-Specific Settings¶

Access via the settings panel:

See Also¶

• Drag and Drop
• Linking Nodes
• Interactions
• Keyboard Shortcuts
• Settings