# Floating Viewer — Workflow Sidebar & Run Implementation
> **Purpose**: The Floating Viewer (MFV) includes a lightweight sidebar panel that allows
> modifying widgets of selected nodes on the canvas, **plus a Run button**,
> without duplicating or competing with ComfyUI's native "Workflow Overview" panel.
---
## 1. Design Principles — "Delegate, Don't Duplicate"
| Rule | Detail |
|-------|--------|
| **Read-only data access** | Reads `app.graph`, `app.canvas.selected_nodes` — no parallel model invented. |
| **Write via native widget** | Writes via `widget.value = x ; widget.callback?.(x)` — ComfyUI engine handles propagation. |
| **Execution via endpoint** | Run calls `POST /prompt` with payload from `app.graphToPrompt()` — queue is not reimplemented. |
| **No own persistence** | No store, no cache — each opening reads live graph state. |
---
## 2. Module Architecture
```
ui/features/viewer/
├── FloatingViewer.js ← existing (modified _buildToolbar)
├── floatingViewerManager.js ← existing (added selection bindings)
│
├── workflowSidebar/ ← NEW submodule
│ ├── WorkflowSidebar.js ← Main component (DOM panel)
│ ├── NodeWidgetRenderer.js ← Renders node widgets
│ ├── widgetAdapters.js ← Type → HTML input adapters
│ └── sidebarRunButton.js ← Run button (queue prompt)
```
### 2.1 Dependencies
```
FloatingViewer
└─► WorkflowSidebar (created in _buildToolbar, injected into MFV DOM)
├─► NodeWidgetRenderer (instantiated 1× per displayed node)
│ └─► widgetAdapters (pure functions, no state)
└─► sidebarRunButton (autonomous button, calls ComfyUI API)
```
None of these files import from `comfyui-frontend` directly.
Everything goes through the existing bridge: `ui/app/comfyApiBridge.js`.
---
## 3. Module by Module
---
### 3.1 `WorkflowSidebar.js` — Sidebar Panel
**Role**: Sliding container (slide-in) that opens on the right side of the Floating Viewer.
```
┌─────────────────────────────────────────────────────┐
│ Majoor Floating Viewer [⚙] [▶ Run] [✕] │ ← header + toolbar
├────────────────────┬────────────────────────────────┤
│ │ Workflow Sidebar │
│ Viewer Content │ ┌────────────────────────────┐ │
│ (image/video) │ │ KSampler [📍] │ │
│ │ │ seed [156680208700286] │ │
│ │ │ steps [20] │ │
│ │ │ cfg [8.0] │ │
│ │ │ sampler [euler ▾] │ │
│ │ │ scheduler [normal ▾] │ │
│ │ │ denoise [1.00] │ │
│ │ ├────────────────────────────┤ │
│ │ │ CLIP Text Encode [📍] │ │
│ │ │ text [beautiful sce...] │ │
│ │ └────────────────────────────┘ │
└────────────────────┴────────────────────────────────┘
```
#### Public API
```js
class WorkflowSidebar {
constructor({ hostEl, onClose })
show() // slide-in, reads current selection
hide() // slide-out
toggle()
refresh() // re-reads app.canvas.selected_nodes and re-renders
get isVisible()
destroy()
}
```
#### How to read selected nodes
The pattern already exists in `NodeStreamController.js`:
```js
import { getComfyApp } from "../../../app/comfyApiBridge.js";
function getSelectedNodes() {
const app = getComfyApp();
const selected = app?.canvas?.selected_nodes
?? app?.canvas?.selectedNodes
?? null;
if (!selected) return [];
if (Array.isArray(selected)) return selected.filter(Boolean);
if (selected instanceof Map) return Array.from(selected.values());
if (typeof selected === "object") return Object.values(selected);
return [];
}
```
#### How to listen to selection changes
The pattern exists in `LiveStreamTracker.js`:
```js
const canvas = app.canvas;
const origSelected = canvas.onNodeSelected;
const origSelChange = canvas.onSelectionChange;
canvas.onNodeSelected = function (node) {
origSelected?.call(this, node);
sidebar.refresh(); // ← our hook
};
canvas.onSelectionChange = function (selectedNodes) {
origSelChange?.call(this, selectedNodes);
sidebar.refresh(); // ← our hook
};
```
> **Important**: These hooks must be properly attached/detached when opening/closing
> the sidebar to avoid leaks. We use the same chained pattern as `LiveStreamTracker`.
---
### 3.2 `NodeWidgetRenderer.js` — Node Rendering
**Role**: For a given `LGraphNode`, iterates over `node.widgets` and generates
a corresponding HTML form.
#### Information available on a ComfyUI widget
```js
node.widgets.forEach(widget => {
widget.name // "seed", "steps", "cfg", "sampler_name" …
widget.type // "number", "combo", "text", "toggle", "IMAGEUPLOAD" …
widget.value // current value
widget.options // { min, max, step, values: [...] } (for combo/number)
widget.callback // function(value) — to call after write
});
```
#### Generated DOM structure
```html
```
#### Locating a node on the canvas
```js
function locateNode(node) {
const app = getComfyApp();
const canvas = app?.canvas;
if (!canvas || !node) return;
// Center view on node
canvas.centerOnNode?.(node);
// Fallback LiteGraph
if (!canvas.centerOnNode && canvas.ds) {
canvas.ds.offset[0] = -node.pos[0] - node.size[0] / 2 + canvas.canvas.width / 2;
canvas.ds.offset[1] = -node.pos[1] - node.size[1] / 2 + canvas.canvas.height / 2;
canvas.setDirty(true, true);
}
}
```
---
### 3.3 `widgetAdapters.js` — Widget → HTML Input Conversion
File of pure functions, no state. Each adapter returns an `HTMLElement`.
| `widget.type` | HTML Input | Notes |
|---------------|-----------|-------|
| `"number"` | `` | Uses `widget.options.{min,max,step}` |
| `"combo"` | `