Skip to content

Feat/interactivedocs #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
HenningScheufler wants to merge 11 commits into
base: main
Choose a base branch
from
Open

Feat/interactivedocs #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
713d8ae
grid stystem
HenningScheufler Nov 26, 2025
13e0f27
WIP: current design
HenningScheufler Nov 27, 2025
085e0bf
update js side to component system
HenningScheufler Nov 28, 2025
3bc308a
udpate dev app and core data structure
HenningScheufler Nov 28, 2025
02afacc
update dev docs
HenningScheufler Nov 28, 2025
fbd981a
works with new api
HenningScheufler Nov 29, 2025
532d9ff
update
HenningScheufler Nov 29, 2025
23ac983
export png jpeg
HenningScheufler Nov 29, 2025
06ffbf5
WIP interactive docs
HenningScheufler Nov 30, 2025
970f4ff
Merge branch 'main' into feat/interactivedocs
HenningScheufler Nov 30, 2025
8580416
Merge branch 'main' into feat/interactivedocs
HenningScheufler Nov 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions docs/assets/js/standalone.css
View file
Open in desktop

Large diffs are not rendered by default.

162 changes: 162 additions & 0 deletions docs/assets/js/standalone.iife.js
View file
Open in desktop

Large diffs are not rendered by default.

340 changes: 340 additions & 0 deletions docs/assets/workflows/workflow-example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,340 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PyNodeWidget - workflow</title>

<!-- PyNodeWidget Styles -->
<link rel="stylesheet" href="../js/standalone.css">

<style>
body {
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
background-color: #fafafa;
}
#viewer-container {
width: 100%;
height: 100vh;
}
.loading {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
font-size: 18px;
color: #666;
}
</style>
</head>
<body>
<div id="viewer-container">
<div class="loading">Loading workflow...</div>
</div>

<script>
// Workflow data embedded inline
const WORKFLOW_DATA = {
"nodes": {
"node-1764446071347": {
"id": "node-1764446071347",
"type": "processor",
"position": {
"x": 545,
"y": 0
},
"data": {},
"measured": {
"width": 365,
"height": 240
},
"selected": false,
"dragging": false
},
"node-1764446071598": {
"id": "node-1764446071598",
"type": "processor",
"position": {
"x": 545,
"y": 360
},
"data": {},
"measured": {
"width": 365,
"height": 240
},
"selected": false,
"dragging": false
},
"node-1764446071733": {
"id": "node-1764446071733",
"type": "processor",
"position": {
"x": 1090,
"y": 540
},
"data": {},
"measured": {
"width": 365,
"height": 240
},
"selected": true,
"dragging": false
},
"node-1764446071879": {
"id": "node-1764446071879",
"type": "processor",
"position": {
"x": 545,
"y": 720
},
"data": {},
"measured": {
"width": 365,
"height": 240
},
"selected": false,
"dragging": false
},
"node-1764446072252": {
"id": "node-1764446072252",
"type": "processor",
"position": {
"x": 0,
"y": 360
},
"data": {},
"measured": {
"width": 365,
"height": 240
},
"selected": false,
"dragging": false
}
},
"edges": [
{
"source": "node-1764446072252",
"sourceHandle": "output",
"target": "node-1764446071879",
"targetHandle": "input",
"id": "xy-edge__node-1764446072252output-node-1764446071879input"
},
{
"source": "node-1764446072252",
"sourceHandle": "output",
"target": "node-1764446071347",
"targetHandle": "input",
"id": "xy-edge__node-1764446072252output-node-1764446071347input"
},
{
"source": "node-1764446071598",
"sourceHandle": "output",
"target": "node-1764446071733",
"targetHandle": "input",
"id": "xy-edge__node-1764446071598output-node-1764446071733input"
},
{
"source": "node-1764446071879",
"sourceHandle": "output",
"target": "node-1764446071733",
"targetHandle": "input",
"id": "xy-edge__node-1764446071879output-node-1764446071733input"
}
],
"viewport": {
"x": 0,
"y": 0,
"zoom": 1
},
"node_templates": [
{
"type": "processor",
"label": "Processor",
"description": "",
"icon": "\u2699\ufe0f",
"category": "general",
"definition": {
"grid": {
"rows": [
"1fr"
],
"columns": [
"auto",
"1fr",
"auto"
],
"gap": "8px",
"cells": [
{
"id": "left-cell",
"coordinates": {
"row": 1,
"col": 1,
"row_span": 1,
"col_span": 1
},
"layout": {
"type": "flex",
"direction": "column",
"align": "stretch",
"justify": "start",
"gap": "8px"
},
"components": [
{
"id": "input",
"type": "labeled-handle",
"handle_type": "input",
"label": "input",
"dataType": null,
"required": false
}
]
},
{
"id": "center-cell",
"coordinates": {
"row": 1,
"col": 2,
"row_span": 1,
"col_span": 1
},
"layout": {
"type": "flex",
"direction": "column",
"align": "start",
"justify": "start",
"gap": "12px"
},
"components": [
{
"id": "value",
"type": "number",
"label": "value",
"value": 50.0,
"min": 0.0,
"max": 100.0
},
{
"id": "name",
"type": "text",
"label": "name",
"value": "Processor",
"placeholder": ""
},
{
"id": "progress",
"type": "progress",
"label": "progress",
"value": 5.0,
"min": 0.0,
"max": 100.0
},
{
"id": "button",
"type": "button",
"label": "button",
"action": "asda",
"value": 0,
"variant": "default",
"size": "default",
"disabled": false
}
]
},
{
"id": "right-cell",
"coordinates": {
"row": 1,
"col": 3,
"row_span": 1,
"col_span": 1
},
"layout": {
"type": "flex",
"direction": "column",
"align": "stretch",
"justify": "start",
"gap": "8px"
},
"components": [
{
"id": "output",
"type": "labeled-handle",
"handle_type": "output",
"label": "output",
"dataType": null,
"required": false
}
]
}
]
},
"style": null
},
"defaultValues": {
"value": 50.0,
"name": "Processor",
"progress": 5.0,
"button": 0
}
}
],
"node_values": {
"node-1764446071347": {
"value": 0,
"name": "Processor",
"progress": 0,
"button": 0
},
"node-1764446071598": {
"value": 0,
"name": "Processor",
"progress": 0,
"button": 0
},
"node-1764446071733": {
"value": 0,
"name": "Processor",
"progress": 0,
"button": 0
},
"node-1764446071879": {
"value": 0,
"name": "Processor",
"progress": 0,
"button": 0
},
"node-1764446072252": {
"value": 0,
"name": "Processor",
"progress": 0,
"button": 0
}
}
};
</script>

<!-- Standalone PyNodeWidget bundle -->
<script src="../js/standalone.iife.js"></script>

<script>
// Render the workflow
window.addEventListener('DOMContentLoaded', function() {
if (window.PyNodeWidget && window.PyNodeWidget.render) {
window.PyNodeWidget.render('viewer-container', WORKFLOW_DATA, {
height: '100vh',
interactive: true
});
} else {
console.error('PyNodeWidget not loaded');
document.getElementById('viewer-container').innerHTML =
'<div class="loading">Error: PyNodeWidget not loaded</div>';
}
});
</script>
</body>
</html>
48 changes: 48 additions & 0 deletions docs/assets/workflows/workflow-url-demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PyNodeWidget - workflow</title>

<!-- PyNodeWidget Styles -->
<link rel="stylesheet" href="../js/standalone.css">

<style>
body {
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
background-color: #fafafa;
}
#viewer-container {
width: 100%;
height: 100vh;
}
</style>
</head>
<body>
<div id="viewer-container"></div>

<!-- Standalone PyNodeWidget bundle -->
<script src="../js/standalone.iife.js"></script>

<script>
// Load workflow from URL
window.addEventListener('DOMContentLoaded', function() {
if (window.PyNodeWidget && window.PyNodeWidget.renderFromUrl) {
window.PyNodeWidget.renderFromUrl('viewer-container', './workflow.json', {
height: '100vh',
interactive: true
}).catch(function(error) {
console.error('Failed to load workflow:', error);
});
} else {
console.error('PyNodeWidget not loaded');
document.getElementById('viewer-container').innerHTML =
'<div style="padding: 20px; color: red;">Error: PyNodeWidget not loaded</div>';
}
});
</script>
</body>
</html>
Loading