GMGN GuideInterface walkthrough
Updated interface tour · 12 min read

How to use the GMGN interface

A practical, screen-by-screen guide to every panel, filter and control in the dashboard. Follow the steps in order, or jump to any section from the contents list.

01

Getting started

Three quick actions to orient yourself before exploring individual panels.

  1. Open the dashboardLoad the main page and wait for the panels to finish rendering — status pills turn solid once each section is ready.
  2. Scan the summary stripThe row of summary counters at the top gives you a quick overview of what changed recently.
  3. Pick one row and open itClick any row in the main table to open its detail view; press Esc to return.
💡
Tip: pin the guide to your browser bookmarks bar so you can reopen exactly this section later.
02

Page layout

The dashboard uses three fixed regions so your context never changes while you work.

◧Header

Search, section links and your profile menu stay visible at the top of every screen.

☰Side rail

Switch between dashboards and saved views. Collapse it with the chevron for more table width.

▦Main canvas

The working area: summary counters, the data table, and side panels for the selected item.

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

Reading the tables

The main table is the core of the interface. Here is how to read each part of a row.

#Row index

The leftmost column shows position. It stays frozen when you scroll horizontally.

▤Column header

Tap a header once to sort, twice to reverse, three times to clear sorting.

◑Inline badges

Small coloured badges flag state changes without opening the detail view.

⋯Row menu

The three-dot menu at the end of a row holds copy, open-in-new-tab and list actions.

05

Filters & sorting

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

  1. Open the filter drawerUse the funnel icon beside the table title to reveal all available conditions.
  2. Add conditionsEach condition combines with AND; multiple choices inside one condition combine with OR.
  3. Apply a presetSave the current combination as a preset so one click restores it later.
  4. Sort and pinSort by any column, then pin the most important rows to keep them at the top.
▲
Filters reset when you switch dashboard sections unless they were saved as a preset.
06

Detail view

Selecting a row opens a layered view with three tabs.

①Overview

Key attributes and a compact summary of recent changes.

②Activity

A chronological list of events, newest first, with a compact / expanded toggle.

③Related

Connected items you can open without leaving the current view.

💡
Use the split-view toggle to keep the detail panel open beside the table instead of replacing it.
07

Lists & favorites

Groups let you organise rows you return to often.

  1. Create a listUse “New list” in the side rail and give it a descriptive name.
  2. Add itemsClick the star icon on any row, then choose the destination list.
  3. Reorder & renameDrag rows inside a list to reorder; rename the list from its menu.
  4. Share a viewExport a list as a link so teammates land on the same selection.
08

Notifications

Control what interrupts you and where those updates appear.

🔔In-app

Bell icon in the header; badge count shows unread entries. Click any entry to open its source.

✉Email digest

Switch between instant, hourly and daily digests from the notification settings panel.

🔕Quiet mode

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

✓Mark read

Clear entries individually, or use “Mark all read” to empty the centre at once.

09

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.
Column setDefault / CustomChoose which columns appear and their order.
LanguageMultipleTranslates labels; data labels stay in their original form.
10

Keyboard shortcuts

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

ActionWindows / LinuxmacOS
Open searchCtrl + K⌘ + K
Toggle side railCtrl + B⌘ + B
Refresh current viewRR
Open row detailEnterReturn
Close panelEscEsc
Show shortcuts??
11

FAQ

Common interface questions, answered briefly.

A panel keeps loading — what should I do?
Use the refresh control in the header first. If it persists, clear the site cache for this page and reload once.
Why did my filters disappear?
Filters are temporary unless saved as a preset. Open the funnel drawer, rebuild the conditions, then choose “Save preset”.
Can I view two sections at the same time?
Yes. Open a row in split view to keep the detail panel docked next to the table.
How do I reset the dashboard layout?
Open the profile menu, choose Display settings, then “Restore default layout”. Your saved lists are not affected.
Does dark mode follow my system theme?
Select “System” in the theme setting and the dashboard 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);