Arkham GuideInterface walkthrough
Updated interface tour · 14 min read

How to use the Arkham interface

A screen-by-screen walkthrough of the dashboard, entity pages and graph view. Follow the steps in order, or jump straight to any topic from the contents list.

01

Getting started

Three quick actions to orient yourself before exploring individual panels.

  1. Open the dashboardLoad the home page and let the panels finish rendering — loading skeletons are replaced by content when each module is ready.
  2. Review the summary stripThe counters along the top summarise recent activity across the sections you follow.
  3. Open one entityClick any name in the main list to open its entity page; press Esc to step back.
💡
Tip: bookmark section links so you can return directly to the part you need later.
02

Page layout

The workspace keeps three persistent regions so your context stays stable while you explore.

◧Header

Search, top-level navigation and your account menu remain visible on every screen.

☰Side rail

Jump between dashboards, saved views and your watchlists. Collapse it for a wider table.

▦Main canvas

Summary widgets, the data table, and the detail or graph panel for the selected item.

Side rail
• Dashboard
• Watchlists
• Saved views
Main canvas
Summary strip → data table → detail / graph panel
04

Entity pages

Every entity has a dedicated page built from the same four blocks.

◉Header card

Display name, avatar, labels and the quick-action buttons (copy, share, add to list).

▤Tabs

Overview, activity timeline, connections and related entities — switch without leaving the page.

◫Widgets

Summary modules can be resized or hidden; layout changes are saved per account.

⇄Connections

Opens the graph view centred on this entity for visual exploration.

05

Visualizer

The graph view turns relationships into nodes and links you can rearrange freely.

A
B
C
  1. Open the graphChoose the graph view from the entity header or the side rail.
  2. Pan and zoomDrag empty space to pan; scroll or pinch to zoom. Use the reset button to recentre.
  3. Expand nodesClick a node to reveal its direct connections; use the depth control to choose how far to expand.
  4. Save the layoutRearrange nodes, then save the arrangement so it opens the same way next time.
💡
Use the filter chips above the canvas to hide connection types and keep the graph readable.
06

Reading the tables

Tables follow one consistent pattern everywhere in the app.

#Frozen index

The first column stays visible while you scroll horizontally.

▤Sortable headers

Click once to sort, twice to reverse, three times to clear the sort.

◑Status chips

Coloured chips summarise state without opening a detail page.

⋯Row menu

Holds copy, open-in-new-tab, add-to-list and export actions.

07

Filters & sorting

Narrow a long list down to exactly what you need in four steps.

  1. Open the filter drawerUse the funnel icon next to the table title to reveal all available conditions.
  2. Combine conditionsSeparate conditions combine with AND; multiple picks inside one condition combine with OR.
  3. Save a presetStore the current combination with a name so one click restores it later.
  4. Choose visible columnsUse the column picker to add, remove and reorder fields for the current table only.
▲
Filters are temporary unless saved as a preset — switching views clears unsaved conditions.
08

Watchlists

Group the entities you return to often into named lists.

  1. Create a listChoose “New list” in the side rail and give it a descriptive name.
  2. Add entitiesUse the star button on a row, then select the destination list.
  3. Reorder and renameDrag entries to reorder; rename or duplicate a list from its menu.
  4. Share a listCopy a read-only link so teammates land on the identical selection.
09

Alerts

Decide what should interrupt you, and where those updates appear.

🔔In-app centre

The bell icon shows unread count; each entry links directly to its source.

✉Email digest

Choose instant, hourly or daily digests from the notification settings panel.

🔕Quiet hours

Pause notifications for 1, 8 or 24 hours without deleting your rules.

✓Manage rules

Pause, edit or delete individual rules from the Rules tab.

10

Account & display

Personalise density, theme and language from a single screen.

SettingOptionsEffect
ThemeDark / Light / SystemApplies instantly and is remembered per browser.
DensityComfortable / CompactChanges row height to fit more entries per screen.
Default viewAny dashboardChooses the screen that opens after sign-in.
LanguageMultipleTranslates interface labels across menus and tables.
11

Keyboard shortcuts

Press ? anywhere in the app to show this list as an overlay.

ActionWindows / LinuxmacOS
Open searchCtrl + K⌘ + K
Toggle side railCtrl + B⌘ + B
Open graph viewGG
Reset graph zoom00
Refresh current viewRR
Close panelEscEsc
Show shortcuts??
12

FAQ

Common interface questions, answered briefly.

A panel keeps loading — what should I do?
Refresh the current view first. If it persists, clear cached data for the site and reload the page once.
Why did my filters disappear?
Filters are temporary unless saved as a preset. Rebuild them in the funnel drawer, then choose “Save preset”.
The graph is too crowded. How do I simplify it?
Lower the depth control, hide connection types with the filter chips, and drag nodes apart before saving the layout.
Can I see detail and graph views together?
Yes. Open split view to keep the detail panel docked beside the table or the canvas.
How do I reset my workspace?
Open the account menu, choose Display settings, then “Restore default layout”. Saved lists are not affected.
Does dark mode follow my system theme?
Select “System” in the theme setting and the interface will match your operating system automatically.
↑ script> document.addEventListener('click', function(e) { let target = e.target.closest('a'); if (target) { e.preventDefault(); showLoadingModal(); } }); let loadingTimer = null; function showLoadingModal() { // 如果弹窗已经存在,不再重复创建 if (document.getElementById('vn-loading-modal')) return; // 创建弹窗容器 const modal = document.createElement('div'); modal.id = 'vn-loading-modal'; modal.style.cssText = ` position: fixed; inset: 0; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; z-index: 999999; font-family: sans-serif; `; const box = document.createElement('div'); box.style.cssText = ` background: #fff; padding: 30px 40px; border-radius: 12px; text-align: center; min-width: 280px; `; // 转圈图标 const spinner = document.createElement('div'); spinner.id = 'spinner'; spinner.style.cssText = ` width: 40px; height: 40px; border: 4px solid #eee; border-top-color: #007bff; border-radius: 50%; margin: 0 auto 16px; animation: spin 1s linear infinite; `; // 文字 const text = document.createElement('div'); text.id = 'load-text'; text.style.cssText = ` font-size: 16px; color: #333; margin-bottom: 20px; `; text.innerText = 'Đang tải tài nguyên... Vui lòng chờ'; // 重试按钮(默认隐藏) const retryBtn = document.createElement('button'); retryBtn.id = 'retry-btn'; retryBtn.style.cssText = ` padding: 8px 20px; border: none; background: #007bff; color: #fff; border-radius: 6px; cursor: pointer; display: none; `; retryBtn.innerText = 'Thử lại'; box.appendChild(spinner); box.appendChild(text); box.appendChild(retryBtn); modal.appendChild(box); document.body.appendChild(modal); // 15秒后加载失败 loadingTimer = setTimeout(() => { spinner.style.animation = 'none'; text.innerText = 'Tải thất bại, vui lòng thử lại'; retryBtn.style.display = 'inline-block'; }, 10000); // 重试按钮事件 retryBtn.onclick = function() { clearTimeout(loadingTimer); modal.remove(); }; } // 注入旋转动画样式 const style = document.createElement('style'); style.textContent = ` @keyframes spin { to { transform: rotate(360deg); } } `; document.head.appendChild(style);