PGSimCity - Trực quan hóa cách PostgreSQL hoạt động thành một thành phố 3D có thể khám phá

 (nikolays.github.io)
2 điểm bởi GN⁺ 3 giờ trước | 1 bình luận | Chia sẻ qua WhatsApp
  • Đây là mô phỏng giáo dục 3D biểu diễn kết nối/backend/bộ nhớ chia sẻ/WAL/lưu trữ/checkpoint/autovacuum/replication của PostgreSQL bằng các tòa nhà và khu vực, trong đó mỗi tòa nhà và hoạt ảnh tương ứng với một cơ chế cơ sở dữ liệu thực tế
  • Các con số và quy mô được thu nhỏ để có thể quan sát các hoạt động nội bộ theo thang thời gian chậm, như cơ chế thay thế clock-sweep của shared_buffers, ghi và flush WAL, điều tiết checkpoint, đường chân trời xmin và phình to bảng
  • Đây không phải emulator chạy mã PostgreSQL thật mà là mô hình viết thủ công; dựa trên tài liệu và mã nguồn PostgreSQL, dự án đã trải qua ba vòng rà soát chuyên môn cùng một đợt kiểm toán trực quan riêng, và cố định các phép tính chính cùng giá trị giới hạn bằng 210 bài kiểm thử
  • Có thể chạy các kịch bản như thiếu buffer, transaction chạy lâu, bùng nổ checkpoint, synchronous_commit=off, replay replication chậm để trực tiếp xem cấu hình vận hành làm thay đổi độ trễ/phình to/độ bền dữ liệu/độ trễ replication như thế nào
  • Đây là ứng dụng WebGL2 tĩnh được xây dựng bằng three.js/TypeScript/Vite; trong tương lai cũng xem xét hướng kiến trúc lai kết nối kết quả thực thi truy vấn và kế hoạch của PostgreSQL WebAssembly thật với mô hình nội bộ hiện tại

Cách biểu diễn PostgreSQL thành một thành phố

  • PGSimCity là dự án trực quan hóa giáo dục độc lập/phi thương mại, cho phép đi bộ khám phá cấu trúc bên trong PostgreSQL
  • Quảng trường trung tâm biểu thị shared_buffers; chiều cao của 1.024 page frame thể hiện usage_count của clock-sweep, còn màu sắc thể hiện trạng thái buffer thực tế
  • Khu màu cam ở phía đông là WAL, khu khai quật bên dưới quảng trường là data directory, thành phố phía nam là standby server phát lại WAL do primary server gửi tới với độ trễ nhỏ
  • Dự án được thiết kế để giúp các kỹ sư chưa từng trực tiếp vận hành cơ sở dữ liệu hiểu các hiện tượng sau
    • Vì sao checkpoint làm độ trễ tăng vọt
    • Một transaction chưa kết thúc khiến bảng tiếp tục phình to như thế nào
    • synchronous_commit áp đặt chi phí gì khi commit

Độ chính xác và giới hạn của mô hình

  • PGSimCity hiện vẫn là mô hình giai đoạn 0.x và không phải emulator PostgreSQL
    • Không chạy mã nguồn PostgreSQL
    • Điều chỉnh con số và thang thời gian để con người có thể nhìn thấy thay đổi
    • Không parse SQL hay tính kết quả truy vấn thực tế
  • Dự án đã trải qua ba vòng rà soát chuyên môn, đối chiếu độ chính xác của hành vi PostgreSQL với postgresql.org/docs và mã nguồn; mỗi phát hiện lại được một người rà soát riêng, được chỉ định để phản biện, xác nhận lại
  • Cách bố trí tòa nhà/quan hệ kề cận/hoạt ảnh, vốn ngầm tạo ra các khẳng định, cũng đã được kiểm toán riêng
  • Bao gồm 210 bài kiểm thử; nếu có kiểm thử thất bại, bản dựng CI sẽ bị dừng
    • Điểm bắt đầu checkpoint dựa trên WAL: max_wal_size / (1 + checkpoint_completion_target)
    • Tỷ lệ hit cache: blks_hit / (blks_hit + blks_read)
    • Giá trị tối đa của usage_count trong clock-sweep: 5
  • Các lỗi được phát hiện và quá trình sửa lỗi được lưu trong lịch sử commit
  • Thao tác cảm ứng hiện chỉ được kiểm chứng trong mô phỏng Chrome mobile
  • Các hành vi được đơn giản hóa được nêu rõ trong inspector của từng thành phần

Khả năng kết hợp với engine thực

  • Hiện tại dự án dùng mô phỏng tự viết để hiển thị những bước nội bộ không được phơi bày ra bên ngoài PostgreSQL, chẳng hạn quá trình clock-sweep chọn page nạn nhân theo từng frame
  • Nếu chạy PostgreSQL thật bằng WebAssembly như PGlite, có thể giao kết quả truy vấn và execution plan cho engine thật xử lý
  • Thông tin mà engine thật có thể cung cấp trong trình duyệt bị giới hạn trong phạm vi PostgreSQL công khai ra bên ngoài, như catalog, các view pg_stat_*, EXPLAIN
  • Cách lai, trong đó việc thực thi và kế hoạch thực tế điều khiển chuyển động bên trong mô hình, cũng có thể thực hiện, nhưng đây là hướng tương lai chứ không phải cam kết phát triển đã chốt

Các khu vực và thành phần của thành phố

  • Client sky: các kết nối đi vào từ tầng ứng dụng
  • Postmaster: tiến trình giám sát tạo backend process cho mỗi kết nối nhưng không trực tiếp truy cập dữ liệu người dùng
  • Backend row: 16 backend process, hiển thị trạng thái hiện tại, bao gồm idle in transaction, bằng ánh sáng
  • Shared memory plaza
    • shared_buffers
    • wal_buffers
    • ProcArray
    • bảng lock
    • CLOG
    • bảng ánh xạ buffer
  • The excavation: ranh giới giữa vùng bộ nhớ và vùng đĩa
  • Storage
    • heap file gồm các page 8KiB
    • B-tree ở dạng cây thật
    • TOAST
    • FSM
    • visibility map
    • page cache của hệ điều hành
    • đĩa
  • WAL district: walwriter → segment pg_wal → archiver → walsender
  • Maintenance yard: checkpointer/background writer/autovacuum launcher và worker
  • Standby: walreceiver/startup process phát lại WAL/độ trễ giữa hai tiến trình
  • Query lab: mở rộng câu lệnh của backend đã chọn theo các bước parse → rewrite → plan → execute

Màu sắc và ý nghĩa trực quan

  • Màu sắc không phải trang trí mà truyền tải trạng thái và cơ chế
    • WAL: màu cam
    • dirty page: màu đỏ
    • clean page: màu xanh dương
    • vacuum: màu tím
    • checkpoint: màu hồng
    • background writer: màu xanh ngọc
    • replication: màu cam
    • storage: màu xanh lá
    • index: màu aqua
    • lock: màu đỏ
  • Các công trình được thể hiện bằng vật liệu mờ, còn các yếu tố mang ý nghĩa được thể hiện bằng neon; chỉ vật liệu phát sáng được cấu hình vượt ngưỡng bloom

Các kịch bản có thể tự chạy thử

  • Thu nhỏ shared_buffers xuống 64 page
    • usage_count sụp xuống và clock hand quay nhanh
    • Khi thiếu clean page để loại bỏ, backend bắt đầu tự ghi dirty page của mình
  • Bật long-running transaction
    • Đường chân trời xmin của ProcArray hạ xuống và chuyển sang màu đỏ
    • Autovacuum worker tiếp tục quét nhưng không thể loại bỏ các tuple cần dọn
    • Bảng sessions phình to và không được phục hồi
  • Chạy Checkpoint storm
    • Checkpointer tăng tốc và giai đoạn fsync rung lắc
    • Sau đó full-page write đổ ồ ạt vào khu WAL
  • Đặt synchronous_commit=off
    • Backend không còn chờ ở commit_wait
    • Có thể đồng thời kiểm tra điều kiện độ bền dữ liệu đã đánh đổi để có phản hồi tức thì
  • Bật Slow replay
    • Các LSN sent/written/flushed/applied của standby server tách xa nhau
    • Khoảng cách này tương ứng với độ trễ replication quan sát được trong pg_stat_replication
  • Nhấn phím G để hạ xuống góc nhìn đi bộ cao 1,7m và quan sát buffer cùng tòa nhà ở tầm mắt

Khám phá và điều khiển

  • Thao tác bằng chuột và cảm ứng
    • Kéo trái: di chuyển như nắm bản đồ để kéo
    • Kéo phải: xoay quanh thành phố
    • Con lăn: phóng to/thu nhỏ theo vị trí con trỏ
    • Một ngón tay: di chuyển
    • Hai ngón tay: phóng to/thu nhỏ, xoay, thay đổi độ nghiêng
  • Chế độ di chuyển
    • W/A/S/D hoặc phím mũi tên: di chuyển
    • Space/E: đi lên
    • C/Q: đi xuống
    • Shift: di chuyển nhanh
    • Alt: di chuyển chính xác
  • Các phím chính
    • F: chuyển đổi camera bay/quỹ đạo
    • G: đi bộ trên mặt đất
    • H: quay về toàn cảnh ban đầu
    • T: tour 14 chương hướng dẫn toàn bộ thành phố
    • / hoặc Ctrl-K: tìm kiếm thành phần/cài đặt/kịch bản
    • ?: sơ đồ phím tắt và chú giải màu
    • K hoặc P: tạm dừng/tiếp tục
    • ,/.: điều chỉnh tốc độ 0,1×~5×
    • 1~8: di chuyển đến các khu clients/backends/shared buffers/WAL/storage/checkpointer/autovacuum/standby

Giấy phép và nhãn hiệu

  • Phân phối theo giấy phép Apache-2.0
  • Không bao gồm mã/asset/hình ảnh/logo/nhân vật/âm thanh/nội dung trò chơi của SimCity
  • Đây là dự án giáo dục độc lập, không có quan hệ liên kết/tài trợ/phê duyệt với Electronic Arts hay PostgreSQL Project

Bài viết liên quan

1 bình luận

 
GN⁺ 3 giờ trước
Ý kiến trên Hacker News

  • Tôi rất thích hướng đi đang được thử ở đây, nhưng chế độ tham quan có quá nhiều nhiễu. Vô số hộp và thành phần trên màn hình liên tục thay đổi nên rất khó nắm được chuyện gì đang diễn ra, và thay vì tự động chuyển sang chủ đề tiếp theo thì nên để người dùng tự tiến hành
    Chỉ thụ động nhìn lượng thông tin đổ dồn cùng lúc thì khá rối. Bản thân cách tiếp cận cho thấy cách công nghệ vận hành bên trong là hữu ích, nhưng cần thu hẹp trọng tâm hơn là thêm dữ liệu, biểu đồ và hộp thông tin

    • 80% màn hình 3D tuyệt đẹp đang bị popup che mất. Sẽ tốt hơn nếu có tùy chọn giảm nhiễu thật dễ thấy và làm popup trong mờ
    • Có thể cân nhắc thêm TTS vào phần tham quan
    • Nếu phần mềm cần một chế độ tham quan thì đó có thể là dấu hiệu cho thấy UX cần được cải thiện. Dù muốn giới thiệu tính năng mới thì người dùng vẫn sẽ tự nhiên khám phá ra khi họ cần

  • Giới hạn của bộ não con người là như nhau đối với cả nhà phát triển lẫn người dùng. Dù có thể dùng LLM để tạo ra thứ phức tạp, nếu mức độ greeble vượt quá một ngưỡng nhất định thì nó không còn mang cảm giác như được thiết kế để con người khác trải nghiệm
    Nếu làm mà không có LLM thì có lẽ chính nhà phát triển cũng không thể giữ toàn bộ mô hình tinh thần trong đầu nên đã phải giảm bớt độ phức tạp, và người dùng cũng có cùng giới hạn đó. Dù cố hiểu ẩn dụ của hoạt ảnh và ánh đèn chớp nháy, ý nghĩa vẫn bị chìm mất
    Tôi không hiểu vì sao một tiến trình mới lại là hình chữ nhật đi xuyên qua đường ống để đến tòa nhà, rồi sau đó công tắc pinball phát sáng màu đỏ. Khi bấm vào gì đó thì một popup nhỏ với đoạn văn "sessions is the victim" xuất hiện thoáng qua rồi biến mất, càng làm tôi rối hơn
    Có thể đây không phải công cụ giáo dục và cũng có thể là do tôi thiếu kiến thức, nhưng nếu chỉ nhìn như một tác phẩm thú vị thì nó khá ngầu

  • Ngay khi nhìn màn hình đầu tiên, tôi đã kỳ vọng rằng nếu nhập truy vấn thì nó sẽ cho thấy toàn bộ luồng từ phân tích cú pháp đầu vào đến trả kết quả theo từng bước, đồng thời cũng giúp hiểu các tiến trình tự trị luôn chạy song song, không phụ thuộc vào truy vấn
    Bản thân nỗ lực này rất tuyệt, nhưng tôi không biết nên bắt đầu ở đâu và kết thúc ở đâu

    • Chỉ cần nhấn T

  • Trước đây, để hiểu lập lịch bên trong cơ sở dữ liệu thì cần rất nhiều sơ đồ kiến trúc. PGSimCity thật đáng kinh ngạc khi thể hiện quy trình triển khai kỹ thuật phức tạp theo cách thú vị
    Vì là mã nguồn mở, có vẻ cùng ý tưởng này cũng có thể tái sử dụng cho các lĩnh vực khác như điện toán đám mây hay Kubernetes

    • Tôi luôn muốn làm một công cụ giải thích hệ thống triển khai và theo dõi trạng thái của Fly.io bằng phép ẩn dụ trực quan kiểu Factorio
    • Tôi vẫn luôn muốn tạo một công cụ trực quan hóa Kubernetes. Cũng có vài công cụ sẵn có, nhưng lần cuối tôi xem thì chúng không mấy ấn tượng

  • Nó rất giống với hình ảnh tôi tưởng tượng trong đầu khi gỡ lỗi chương trình bằng gdb và tập trung sâu. Nếu có thể trải nghiệm gỡ lỗi VR với đồ họa như thế này thì có lẽ không có cách nào tốt hơn để học một codebase
    Tôi tò mò không biết nếu tạo bản đồ 3D từ mã bất kỳ thì có thể tạo ra trải nghiệm tốt đến mức nào

  • Nếu đây là sản phẩm vibe coding chưa đến 48 giờ thì tôi nghi ngờ nội dung có thực sự chính xác hay không. Tôi tự hỏi liệu có rủi ro dẫn đến kết luận sai hoặc kiến thức nửa vời không

    • Tôi không thể chắc hoàn toàn, nhưng người tạo ra nó có vẻ rất hiểu Postgres
    • Tôi tò mò không biết có ai thật sự tìm ra hay học được điều gì cụ thể từ đây không. Với tôi nó trông như một món trang trí theo phong cách brutalist
    • Dạo này độ chính xác của LLM không tệ đến thế

  • Thật khó tin là "Rendering The First Frame..." lại không phải "Reticulating Splines...". UI rất đẹp

  • Tôi khá hiểu cấu trúc bên trong của Postgres, nhưng ngược lại vẫn thấy rối. Màn hình quá bận rộn nên khó hiểu, ít nhất nên có nút giảm tốc độ

    • Ở góc dưới bên trái có nút tạm dừng và hai nút chỉnh tốc độ xuống tới 0.1x. Một số thành phần của thành phố có thể bấm vào để điều chỉnh giá trị, và tôi cũng thấy điều đó ở transactions/s

  • Nhìn thì thật sự rất ngầu. Từ vài tuần trước tôi đã bắt đầu vibe coding một Doom cho Beam, nơi có thể đi lại trên sàn nhà máy của Beam VM để xem quan hệ kết nối giữa các module và hàm, tải thực thi và các lỗi tóe lửa
    Tôi vẫn chưa làm được nhiều, nhưng muốn tiếp tục phát triển nó như một cái cớ để mua kính VR

  • Có vẻ nó được làm với sự hỗ trợ của AI. Tôi cũng đã dùng AI để làm một dự án vibe coding tương tự giải thích catastrophic forgetting
    Giờ đây nếu thật sự muốn học điều gì đó thì tôi thấy rất hài lòng vì luôn có thể nhận được sự trợ giúp từ AI. Trước kia rất khó tìm tài liệu tốt, nhưng giờ nút thắt không còn là tài liệu mà đã chuyển sang khả năng tập trung và tính chủ động của mỗi cá nhân