OPEN JuSu
🔍 Probabilistic Graphical Model Editor
PGM Studio is an interactive JavaScript-based platform designed for building, visualizing, and analyzing probabilistic graphical models (PGMs) such as Bayesian networks and Markov networks.
This tool supports component-based architecture, dual-mode execution (online & desktop), and integrates a high-performance mathematical backend based on a WebAssembly port of the aGrUM C++ library.
🚀 Overview
This software provides a powerful and interactive interface for designing, analyzing, and experimenting with PGMs such as Bayesian networks, Markov networks, and causal models.
✨ Key Features
- 🎛️ Modular interface wit dedicated modes for Modeling, Learning, Inference, and Causality
- 🌐 Online and Desktop support through web deployment or Electron packaging
- 🧱 Component-oriented UI for maintainability and extensibility
- 🎨 Dynamic visual model editing: positions, colors, shapes, user-defined metadata
- 📁 Unified file format: embeds standard BIFXML model and open-format metadata
- ⚡ High-performance reasoning: powered by a transcompiled version of the aGrUM C++ engine
🔍 Core Concepts
- Model-first design: Graphical modeling is central to the application, and all interface features reflect probabilistic semantics
- Backend-native computing: Inference and learning are offloaded to a robust WASM-compiled C++ core
- Fully decoupled front-end: UI and graph manipulation logic are framework-agnostic, using clean interface bindings
💡 Use Cases
This tool is designed to serve a wide variety of users and domains:
- Academia: Teaching probabilistic reasoning, causality, and graphical models with a visual, interactive approach
- Data Science: Model latent variables, explore conditional dependencies, and conduct causal inference
- AI Engineering: Integrate structured reasoning into machine learning pipelines
- Policy Simulation: Use causal models to evaluate interventions and simulate "what-if" scenarios
- Prototyping: Rapid development and testing of probabilistic structures for research or production use
🏗️ Architecture Diagram
+-------------------------------+
| UI Components |
| - Mode Switcher |
| - Graph Editor |
| - Panel: Variables, CPTs |
+-------------------------------+
|
v
+-------------------------------+
| Reactive State Store |
| - Current Graph |
| - Current Mode |
| - Visual Layout |
+-------------------------------+
|
v
+-------------------------------+
| Graph Engine |
| - Edges, Nodes, Interactions |
| - Layout & Grouping |
+-------------------------------+
|
v
+-------------------------------+
| Inference & Learning Core |
| - WebAssembly binding |
| - aGrUM backend |
+-------------------------------+
|
v
+-------------------------------+
| File Format Layer |
| - Load/Save BIFXML+Metadata |
| - Format Validation |
+-------------------------------+
Component Breakdown:
- UI Components: Graph editor, mode switcher, parameter panel, visualization layers
- State Management: Reactive stores for session data, graph structure, current mode
- Graph Engine: Manages structure, layout, and user interactions
- Inference & Learning Engine: Delegates computational tasks to the WebAssembly-wrapped aGrUM library
- File & Format Layer: Parses/exports model definitions and metadata in BIF + extended JSON/YAML
- aGrUM Backend: High-performance C++ core for inference, learning, and structure analysis
📦 Dependencies
(for instance)
Layer | Technologies & Libraries |
---|---|
UI Framework | React / Vue / Svelte (configurable) |
Graph Rendering | D3.js / Cytoscape.js / PixiJS |
State Handling | Redux / Zustand / Pinia |
Computation | aGrUM (compiled to WebAssembly via Emscripten) |
File I/O | js-yaml , bif-parser , JSON schema validators |
Packaging | Electron (for Desktop), Vite/Webpack (for Web) |
📂 Sample File Format
The application uses a single file format combining a standard BIFXML model and open-format metadata (YAML), for portability and extensibility.
network.pgm.yaml
model:
bifxml: |
<BIF VERSION="0.3">
<NETWORK>
<NAME>RainNetwork</NAME>
<VARIABLE TYPE="nature">
<NAME>Rain</NAME>
<OUTCOME>yes</OUTCOME>
<OUTCOME>no</OUTCOME>
</VARIABLE>
<VARIABLE TYPE="nature">
<NAME>Sprinkler</NAME>
<OUTCOME>on</OUTCOME>
<OUTCOME>off</OUTCOME>
</VARIABLE>
<DEFINITION>
<FOR>Sprinkler</FOR>
<GIVEN>Rain</GIVEN>
<TABLE>0.1 0.9 0.5 0.5</TABLE>
</DEFINITION>
</NETWORK>
</BIF>
metadata:
layout:
Rain: { x: 100, y: 100, color: "#3498db", shape: "circle" }
Sprinkler: { x: 300, y: 100, color: "#2ecc71", shape: "square" }
semantic:
tags:
Rain: ["observable"]
Sprinkler: ["action"]
ui:
zoom: 1.0
pan: { x: 0, y: 0 }
user:
createdBy: "Alice Smith"
editedAt: "2025-04-05"
version: "0.9-beta"
🧩 Advantages of This Format:
This layered format allows separation of probabilistic structure and visual/semantic information, ensuring compatibility and extensibility.
- Fully editable and human-readable
- Allows automated layout reproduction
- Backward-compatible with standard BIF parsers (if extracted)
- Compatible with JSON via YAML-to-JSON conversion