Giao diện
Cài đặt và sử dụng — Graph Collection Manager
Tổng quan
Plugin @digiforce-nc/plugin-graph-collection-manager cung cấp giao diện ER diagram trực quan để hiển thị mối quan hệ giữa các collection trong hệ thống. Sử dụng thư viện @antv/x6 để render đồ thị và dagre để tự động sắp xếp layout, plugin giúp admin nhanh chóng nắm bắt cấu trúc dữ liệu phức tạp.
Bước 1: Kích hoạt plugin
Vào Settings → Plugin Manager, tìm plugin-graph-collection-manager và bật lên.
Bước 2: Mở giao diện đồ thị
Sau khi kích hoạt, vào Settings → Data source manager → Graphical interface (hoặc tương đương trong menu). Giao diện ER diagram sẽ hiển thị tất cả collection và mối quan hệ.
Giao diện và thành phần
Thanh công cụ (Toolbar)
| Chức năng | Mô tả |
|---|---|
| Select Collections | Chọn tập hợp collection cụ thể để hiển thị (lọc bớt noise) |
| Create collection | Tạo collection mới trực tiếp từ giao diện đồ thị |
| Fullscreen | Chuyển sang chế độ toàn màn hình |
| Locate Collection | Tìm và di chuyển đến một collection cụ thể trên đồ thị |
| Auto layout | Tự động sắp xếp lại vị trí các node bằng thuật toán dagre |
| Connector type | Chọn loại kết nối hiển thị: Entity (quan hệ), Inherited (kế thừa), hoặc Both |
| Direction | Chọn hướng hiển thị quan hệ: Target, Source, hoặc Both |
| Selection mode | Bật/tắt chế độ chọn nhiều node (giữ Shift + kéo) |
MiniMap
Góc dưới bên phải hiển thị bản đồ thu nhỏ giúp điều hướng nhanh khi đồ thị lớn. MiniMap cập nhật realtime theo vị trí canvas hiện tại.
Entity Node
Mỗi collection hiển thị dưới dạng một node hình chữ nhật:
- Tiêu đề: Tên collection
- Ports: Danh sách fields (mỗi field là một port, dùng để nối relation edge)
- Hover: Highlight node và các edge liên quan
- Click: Mở chi tiết collection
Relation Edge
Quan hệ giữa các collection thể hiện bằng đường nối:
| Loại | Hiển thị |
|---|---|
hasOne / belongsTo | Đường nối thường (1:1) |
hasMany | Đường nối với label (1:N) |
belongsToMany | Hai đường nối qua bảng trung gian (N:M) |
| Kế thừa (Inherit) | Đường nối có mũi tên ▶ |
Cơ chế Layout
Layout ban đầu
Khi mở giao diện lần đầu, plugin sử dụng thuật toán dagre (directed graph layout) để tự động sắp xếp:
Lưu vị trí (Graph Positions)
Vị trí mỗi collection trên canvas được lưu vào bảng graphPositions trên server:
| Trường | Kiểu | Mô tả |
|---|---|---|
collectionName | string (unique) | Tên collection |
x | double | Toạ độ X |
y | double | Toạ độ Y |
Khi kéo-thả node, vị trí mới tự động lưu lên server. Lần mở sau sẽ dùng vị trí đã lưu thay vì tính lại.
Incremental Rendering
Khi collection thay đổi (thêm/sửa/xoá), plugin không render lại toàn bộ mà tính diff:
- Thêm node: Đặt cạnh node cuối cùng, lưu vị trí
- Xoá node: Remove khỏi canvas
- Thêm/xoá port: Cập nhật field trong node
- Thêm/xoá edge: Cập nhật đường nối
Các tính năng nâng cao
Lọc theo loại kết nối
| Giá trị | Hiển thị |
|---|---|
| Both | Tất cả quan hệ (entity + inherited) |
| Entity | Chỉ quan hệ thực thể (hasOne, hasMany, belongsTo, belongsToMany) |
| Inherited | Chỉ quan hệ kế thừa (collection extends) |
Highlight quan hệ
Khi chọn một collection trên toolbar:
- Node được chọn highlight màu xanh
- Các node liên quan (theo hướng Target/Source/Both) cũng được highlight
- Thuật toán đệ quy tìm tất cả node có quan hệ trực tiếp và gián tiếp
Chọn tập collection
Dùng Select Collections để chỉ hiển thị một nhóm collection cụ thể. URL sẽ cập nhật query parameter ?collections=a,b,c để bookmark được.
Lưu ý quan trọng
- Với hệ thống nhiều collection (100+), nên dùng bộ lọc để giảm bớt hiển thị
- Inheritance (kế thừa collection) chỉ hỗ trợ với PostgreSQL
- Plugin sử dụng
@antv/x6v2 với nhiều plugin phụ: Scroller, MiniMap, Selection, Snapline, Export - Vị trí node được lưu trên server (bảng
graphPositions), không phải localStorage - ACL snippet
pm.data-source-manager.graph-collection-managerkiểm soát quyền truy cập