pyironflow 0.0.1__tar.gz

pyironflow-0.0.1/LICENSE

@@ -0,0 +1,29 @@
+BSD 3-Clause License
+
+Copyright (c) 2018, Max-Planck-Institut für Eisenforschung GmbH - Computational Materials Design (CM) Department
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+* Redistributions of source code must retain the above copyright notice, this
+  list of conditions and the following disclaimer.
+
+* Redistributions in binary form must reproduce the above copyright notice,
+  this list of conditions and the following disclaimer in the documentation
+  and/or other materials provided with the distribution.
+
+* Neither the name of the copyright holder nor the names of its
+  contributors may be used to endorse or promote products derived from
+  this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

pyironflow-0.0.1/MANIFEST.in

@@ -0,0 +1,7 @@
+include LICENSE
+include js/CustomNode.jsx
+include js/text-updater-node.css
+include js/widget.css
+include js/TextUpdaterNode.jsx
+include js/widget-drag-drop.jsx
+include js/widget.jsx

pyironflow-0.0.1/PKG-INFO

@@ -0,0 +1,98 @@
+Metadata-Version: 2.1
+Name: pyironflow
+Version: 0.0.1
+Summary: react xyflow for pyiron
+Author-email: "Max-Planck-Institut für Eisenforschung GmbH - Computational Materials Design (CM) Department" <pyiron@mpie.de>
+License: BSD 3-Clause License
+        
+        Copyright (c) 2018, Max-Planck-Institut für Eisenforschung GmbH - Computational Materials Design (CM) Department
+        All rights reserved.
+        
+        Redistribution and use in source and binary forms, with or without
+        modification, are permitted provided that the following conditions are met:
+        
+        * Redistributions of source code must retain the above copyright notice, this
+          list of conditions and the following disclaimer.
+        
+        * Redistributions in binary form must reproduce the above copyright notice,
+          this list of conditions and the following disclaimer in the documentation
+          and/or other materials provided with the distribution.
+        
+        * Neither the name of the copyright holder nor the names of its
+          contributors may be used to endorse or promote products derived from
+          this software without specific prior written permission.
+        
+        THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+        AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+        IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+        DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+        FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+        DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+        SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+        CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+        OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+        OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+        
+Project-URL: Homepage, https://github.com/pyiron/pyironFlow
+Project-URL: Documentation, https://github.com/pyiron/pyironFlow
+Project-URL: Repository, https://github.com/pyiron/pyironFlow
+Keywords: pyiron
+Classifier: Development Status :: 2 - Pre-Alpha
+Classifier: Topic :: Scientific/Engineering :: Physics
+Classifier: License :: OSI Approved :: BSD License
+Classifier: Intended Audience :: Science/Research
+Classifier: Operating System :: OS Independent
+Classifier: Programming Language :: Python :: 3.10
+Classifier: Programming Language :: Python :: 3.11
+Classifier: Programming Language :: Python :: 3.12
+Requires-Python: <3.13,>=3.9
+Description-Content-Type: text/markdown
+License-File: LICENSE
+Requires-Dist: anywidget
+Requires-Dist: traitlets
+Requires-Dist: ipython
+Requires-Dist: ipywidgets
+Requires-Dist: pyiron_workflow
+Provides-Extra: dev
+Requires-Dist: watchfiles; extra == "dev"
+Requires-Dist: jupyterlab; extra == "dev"
+
+# pyironFlow
+
+# Visual Programming Interface
+The visual programmming interface `pyironflow` or `PyironFlow` is a gui skin based on [ReactFlow](https://reactflow.dev/) that currently works on top of `pyiron_workflow`. Theoretically, one could currently pack `pyiron_base` jobs into nodes for execution. The gui could also be extended to pack the workflow graph (extracted from the gui using `get_workflow()`) into a `pyiron_base` job for execution. An existing code-based workflow graph can be packed into the gui using `PyironFlow([wf])` where wf is the existing graph.
+
+## Example of a multiscale simulation
+
+### Problem definition:
+![Gui1](https://github.com/user-attachments/assets/cce60750-6eb4-4e16-8fca-af192017da25)
+
+### Constructing the workflow:
+![Gui2](https://github.com/user-attachments/assets/3228734b-7ff5-4512-b965-ff8c6d10103a)
+
+### Execution:
+![Gui3](https://github.com/user-attachments/assets/34e43a83-c5bf-44ce-8aea-cd1d30f2b14d)
+
+### Viewing source code:
+![Gui4](https://github.com/user-attachments/assets/04c35f35-e850-4f5d-a511-ae35642e7d3c)
+
+### Visualization of FEM meshes using PyVista:
+![Gui5](https://github.com/user-attachments/assets/653d0bfd-92fe-4188-b8bd-e04a8f8fa8da)
+
+### Atomistic sub-workflow:
+![Gui6](https://github.com/user-attachments/assets/c4a85724-ce4e-4383-8c47-64c181281fe6)
+
+### Continuum sub-workflow:
+![Gui7](https://github.com/user-attachments/assets/42b617d4-303d-405a-b057-eebcc94089f4)
+
+## Planned/desired/in-development features
+
+- Dynamically add nodes from the notebook to the node library (currently being polished by Julius Mittler)
+- Dynamically make macros from the gui using a box selection and add them to the node library (currently in development by Julius Mittler)
+- Automatic positioning of nodes in a nice way on (re-)instantiation (current positioning is passable, but room for improvement exists)
+- Caching based on a hash-based storage. Currently caching does not work at all in the gui since the workflow graph is reinstantiated everytime there's a change in the gui. This could be theoretically fixed by comparing the dictionary of the existing workflow to the new dictionary from the gui. But this would be a painstaking process and easily broken. A better way would be to work with a hash-based storage which would reload outputs when the inputs of a node have not changed. However this would have to be implemented in `pyiron_workflow` and not in the gui side of things.
+- Edit the source code of nodes from within the gui. Maybe something that uses the [FileReader](https://stackoverflow.com/questions/51272255/how-to-use-filereader-in-react) api. Need to look into this further.
+
+See the demo.ipynb jupyter notebook for  brief discussion of the key ideas, the link to pyiron_workflows and a few toy application of the xyflow project.
+
+[![Binder](https://mybinder.org/badge_logo.svg)](https://mybinder.org/v2/gh/pyiron/pyironFlow/HEAD?labpath=pyironflow_demo.ipynb)

pyironflow-0.0.1/README.md

@@ -0,0 +1,39 @@
+# pyironFlow
+
+# Visual Programming Interface
+The visual programmming interface `pyironflow` or `PyironFlow` is a gui skin based on [ReactFlow](https://reactflow.dev/) that currently works on top of `pyiron_workflow`. Theoretically, one could currently pack `pyiron_base` jobs into nodes for execution. The gui could also be extended to pack the workflow graph (extracted from the gui using `get_workflow()`) into a `pyiron_base` job for execution. An existing code-based workflow graph can be packed into the gui using `PyironFlow([wf])` where wf is the existing graph.
+
+## Example of a multiscale simulation
+
+### Problem definition:
+![Gui1](https://github.com/user-attachments/assets/cce60750-6eb4-4e16-8fca-af192017da25)
+
+### Constructing the workflow:
+![Gui2](https://github.com/user-attachments/assets/3228734b-7ff5-4512-b965-ff8c6d10103a)
+
+### Execution:
+![Gui3](https://github.com/user-attachments/assets/34e43a83-c5bf-44ce-8aea-cd1d30f2b14d)
+
+### Viewing source code:
+![Gui4](https://github.com/user-attachments/assets/04c35f35-e850-4f5d-a511-ae35642e7d3c)
+
+### Visualization of FEM meshes using PyVista:
+![Gui5](https://github.com/user-attachments/assets/653d0bfd-92fe-4188-b8bd-e04a8f8fa8da)
+
+### Atomistic sub-workflow:
+![Gui6](https://github.com/user-attachments/assets/c4a85724-ce4e-4383-8c47-64c181281fe6)
+
+### Continuum sub-workflow:
+![Gui7](https://github.com/user-attachments/assets/42b617d4-303d-405a-b057-eebcc94089f4)
+
+## Planned/desired/in-development features
+
+- Dynamically add nodes from the notebook to the node library (currently being polished by Julius Mittler)
+- Dynamically make macros from the gui using a box selection and add them to the node library (currently in development by Julius Mittler)
+- Automatic positioning of nodes in a nice way on (re-)instantiation (current positioning is passable, but room for improvement exists)
+- Caching based on a hash-based storage. Currently caching does not work at all in the gui since the workflow graph is reinstantiated everytime there's a change in the gui. This could be theoretically fixed by comparing the dictionary of the existing workflow to the new dictionary from the gui. But this would be a painstaking process and easily broken. A better way would be to work with a hash-based storage which would reload outputs when the inputs of a node have not changed. However this would have to be implemented in `pyiron_workflow` and not in the gui side of things.
+- Edit the source code of nodes from within the gui. Maybe something that uses the [FileReader](https://stackoverflow.com/questions/51272255/how-to-use-filereader-in-react) api. Need to look into this further.
+
+See the demo.ipynb jupyter notebook for  brief discussion of the key ideas, the link to pyiron_workflows and a few toy application of the xyflow project.
+
+[![Binder](https://mybinder.org/badge_logo.svg)](https://mybinder.org/v2/gh/pyiron/pyironFlow/HEAD?labpath=pyironflow_demo.ipynb)

pyironflow-0.0.1/js/CustomNode.jsx

@@ -0,0 +1,210 @@
+import React, { memo, useEffect, useState } from "react";
+import { Handle, useUpdateNodeInternals, NodeToolbar, useNodesState, } from "@xyflow/react";
+import { useModel } from "@anywidget/react";
+import { UpdateDataContext } from './widget.jsx';  // import the context
+
+/**
+ * Author: Joerg Neugebauer
+ * Copyright: Copyright 2024, Max-Planck-Institut for Sustainable Materials GmbH - Computational Materials Design (CM) Department
+ * Version: 0.2
+ * Maintainer: 
+ * Email: 
+ * Status: development 
+ * Date: Aug 1, 2024
+ */
+
+export default memo(({ data }) => {
+    const updateNodeInternals = useUpdateNodeInternals();
+//    const [nodes, setNodes, onNodesChange] = useNodesState([]);    
+    
+    const num_handles = Math.max(data.source_labels.length, data.target_labels.length);
+    const [handles, setHandles] = useState(Array(num_handles).fill({}));
+    
+    const model = useModel();   
+    const context = React.useContext(UpdateDataContext); 
+
+//    console.log('nodes', nodes)
+
+
+    useEffect(() => {
+        handles.map((_, index) => {
+          updateNodeInternals(`handle-${index}`);
+        });
+    }, [handles]);   
+
+       const runFunction = () => {
+        // run the node
+        console.log('run: ', data.label)
+        model.set("commands", `run: ${data.label} - ${new Date().getTime()}`);
+        model.save_changes();
+    }
+
+    const outputFunction = () => {
+        // direct output of node to output widget
+        console.log('output: ', data.label)
+        model.set("commands", `output: ${data.label}`);
+        model.save_changes();
+    }
+
+    const sourceFunction = () => {
+        // show source code of node
+        console.log('source: ', data.label) 
+        model.set("commands", `source: ${data.label}`);
+        model.save_changes();        
+    } 
+
+    
+    const renderLabel = (label) => {
+        return (
+            <div style={{ fontWeight: "normal", marginBottom: "0.3em", textAlign: "center" }}>
+                {label}
+            </div>
+        );
+    }
+
+    
+    const renderCustomHandle = (position, type, index, label) => {
+      return (
+        <Handle
+          key={`${position}-${index}`}
+          type={type}
+          position={position}
+          id={label}
+          style={{ top: 30 + 16 * index}}
+        />
+      );
+    }
+
+    const renderInputHandle = (data, index, editValue = false) => {   
+        const label = data.target_labels[index]
+        const inp_type = data.target_types[index]
+        const value = data.target_values[index]       
+        const [inputValue, setInputValue] = useState(value); 
+        const context = React.useContext(UpdateDataContext); 
+        // console.log('input type: ', data)
+
+        const inputTypeMap = {
+            'str': 'text',
+            'int': 'text',
+            'float': 'text',
+            'bool': 'checkbox'
+        };
+
+        const convertInput = (value, inp_type) => {
+            switch(inp_type) {
+                case 'int':
+                    // Check if value can be converted to an integer
+                    const intValue = parseInt(value, 10);
+                    return isNaN(intValue) ? value : intValue;
+                case 'float':
+                    // Check if value can be converted to a float
+                    const floatValue = parseFloat(value);
+                    return isNaN(floatValue) ? value : floatValue;
+                case 'bool':
+                    return value; 
+                default:
+                    return value;  // if inp_type === 'str' or anything else unexpected, returns the original string
+            }
+        }                           
+      
+        const currentInputType = inputTypeMap[inp_type] || 'text';
+                
+        if (inp_type === 'NonPrimitive' || inp_type === 'None') {
+            editValue = false;
+        }
+
+        const getBackgroundColor = (value, inp_type) => {            
+            if (value === null) {
+                return 'grey';
+            } else if (value === 'NotData') {
+                return 'red'; // please remember to use a proper CSS color or RGB code
+            } else {
+                return 'white';
+            }
+        }
+        
+        return (
+           <>
+                <div style={{ height: 16, fontSize: '10px', display: 'flex', alignItems: 'center', flexDirection: 'row-reverse', justifyContent: 'flex-end' }}>
+                    <span style={{ marginLeft: '5px' }}>{`${label}`}</span> 
+                    {editValue 
+                    ? <input 
+                        type={currentInputType}
+                        checked={currentInputType === 'checkbox' ? inputValue : undefined}
+                        value={currentInputType !== 'checkbox' ? inputValue : undefined}
+                        className="nodrag"
+                        onChange={e => {
+                            const newValue = currentInputType === 'checkbox' ? e.target.checked : e.target.value;
+                            console.log('onChange', value, e, inputValue, newValue, index, data.label);
+                            // Always update the input value
+                            setInputValue(newValue);
+                            context(data.label, index, newValue); 
+                        }}
+                        onKeyDown={e => {
+                            if(e.keyCode === 13) {
+                                // When Enter key is pressed, convert the input
+                                const convertedValue = convertInput(inputValue, inp_type);
+                                console.log('onKeyDown', value, e, inputValue, convertedValue, index, data.label);
+                                context(data.label, index, convertedValue); 
+                            }
+                        }}
+                        onBlur={() => {
+                            // When the mouse leaves the textbox, convert the input
+                            const convertedValue = convertInput(inputValue, inp_type);
+                            context(data.label, index, convertedValue);
+                        }}
+                        style={{ 
+                            width: '15px', 
+                            height: '10px', 
+                            fontSize: '6px',
+                            backgroundColor: getBackgroundColor(value, inp_type)
+                        }} 
+                    /> 
+                    : '' 
+                    } 
+                </div>
+                {renderCustomHandle('left', 'target', index, label)}
+            </>
+        );
+    }
+
+    const renderOutputHandle = (data, index) => {
+        const label = data.source_labels[index]
+        
+        return (
+           <>
+                <div style={{ height: 16, fontSize: '10px', textAlign: 'right' }}>
+                    {`${label}`}
+                </div>
+                {renderCustomHandle('right', 'source', index, label)}
+            </>
+        );
+    }     
+
+
+  return (
+    <div>
+        
+        {renderLabel(data.label)}
+
+        <div>
+            {handles.map((_, index) => (
+                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+                    {index < data.target_labels.length && 
+                        renderInputHandle(data, index, true)}
+
+                    {index < data.source_labels.length && 
+                        renderOutputHandle(data, index)}
+                </div>
+            ))}
+        </div>
+      <NodeToolbar
+        isVisible={data.forceToolbarVisible || undefined}
+        position={data.toolbarPosition}
+      >
+          <button onClick={runFunction}>Run</button>
+          <button onClick={sourceFunction}>Source</button>
+      </NodeToolbar>        
+    </div>
+  );
+});      

pyironflow-0.0.1/js/TextUpdaterNode.jsx

@@ -0,0 +1,43 @@
+import React, { useCallback } from 'react';
+import { Handle, Position } from '@xyflow/react';
+
+const handleStyle = { right: 0, top: 10 }; //, width: 12, height: 12  };
+
+function TextUpdaterNode({ data, isConnectable }) {
+  const onChange = useCallback((evt) => {
+    console.log(evt.target.value);
+  }, []);
+
+  return (
+    <div className="text-updater-node">
+      <Handle
+        type="target"
+        position={Position.Left}
+        isConnectable={isConnectable}>
+          <div className="handle-text-left">target</div>
+      </Handle>
+      <div>
+        <label htmlFor="text">Text:</label>
+        <input id="text" name="text" onChange={onChange} className="nodrag" />
+      </div>
+      <Handle
+        type="source"
+        position={Position.Right}  
+        id="a"
+        style={handleStyle}
+        isConnectable={isConnectable}>
+          <div className="handle-text-right">source a</div>
+      </Handle>
+          
+      <Handle
+        type="source"
+        position={Position.Right}
+        id="b"
+        isConnectable={isConnectable}>
+          <div className="handle-text-right">source b</div>
+      </Handle>
+    </div>
+  );
+}
+
+export default TextUpdaterNode;

pyironflow-0.0.1/js/text-updater-node.css

@@ -0,0 +1,29 @@
+.text-updater-node {
+  height: 50px;
+  border: 1px solid #eee;
+  padding: 5px;
+  border-radius: 5px;
+  background: white;
+}
+
+.text-updater-node label {
+  display: block;
+  color: #777;
+  font-size: 12px;
+}
+
+.handle-text-left {
+  position: relative;
+  width: 100px;
+  transform: translate(10px, 0%);
+  font-size: 6px;
+  pointer-events: none;
+}
+
+.handle-text-right {
+  position: absolute;
+  right: 10px;  /* this is the constant value for the right-side spacing, set it as per your requirements */
+  width: 30px;  
+  font-size: 6px;
+  pointer-events: none;
+}

pyironflow-0.0.1/js/widget-drag-drop.jsx

@@ -0,0 +1,154 @@
+// does not work (Error: [React Flow]: Seems like you have not used zustand provider as an ancestor.)
+// It is likely a limitation of anywidget (only a single react tree)
+// ipyreact should be able to overcome it
+
+import React, { useCallback, useState } from 'react';
+import { createRender, useModel } from "@anywidget/react";
+import {
+  ReactFlow, 
+  Controls, 
+  MiniMap,
+  Background, 
+  useNodesState,
+  useEdgesState,
+  useReactFlow,
+  applyEdgeChanges,
+  applyNodeChanges,  
+  addEdge,} from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+
+
+import TextUpdaterNode from './TextUpdaterNode.jsx';
+import CustomNode from './CustomNode.jsx';
+
+import './text-updater-node.css';
+
+const rfStyle = {
+  backgroundColor: '#B8CEFF',
+};
+
+
+const nodeTypes = { textUpdater: TextUpdaterNode, customNode: CustomNode };
+
+
+const render = createRender(() => {
+// function render({ model, el }) {
+  const model = useModel();
+  // console.log("model: ", model);
+  const initialNodes = JSON.parse(model.get("nodes")) 
+  const initialEdges = JSON.parse(model.get("edges"))    
+
+  const [nodes, setNodes] = useState(initialNodes);
+  const [edges, setEdges] = useState(initialEdges);
+  const { screenToFlowPosition } = useReactFlow();  
+
+  model.on("change:nodes", () => {
+      const new_nodes = model.get("nodes")
+      // console.log("load nodes: ", new_nodes);
+
+      setNodes(JSON.parse(new_nodes));
+      }); 
+
+  model.on("change:edges", () => {
+      const new_edges = model.get("edges")
+      setEdges(JSON.parse(new_edges));
+      });     
+
+  const onNodesChange = useCallback(
+    (changes) => {
+      setNodes((nds) => {
+        const new_nodes = applyNodeChanges(changes, nds); 
+        model.set("nodes", JSON.stringify(new_nodes));
+        model.save_changes();
+        return new_nodes;
+      });
+    },
+    [setNodes],
+  );
+    
+  const onEdgesChange = useCallback(
+    (changes) => {
+        setEdges((eds) => {
+            const new_edges = applyEdgeChanges(changes, eds);
+            model.set("edges", JSON.stringify(new_edges));
+            model.save_changes();
+            return new_edges;            
+      });
+    },
+    [setEdges],
+  );
+
+  const onConnect = useCallback(
+    (params) => {
+        setEdges((eds) => {
+            const new_edges = addEdge(params, eds);
+            model.set("edges", JSON.stringify(new_edges));
+            model.save_changes();
+            return new_edges;            
+      });
+    },
+    [setEdges],
+  ); 
+
+  const onDragOver = useCallback((event) => {
+    event.preventDefault();
+    event.dataTransfer.dropEffect = 'move';
+  }, []);
+
+  const onDrop = useCallback(
+    (event) => {
+      event.preventDefault();
+
+      console.log(event)  
+      const type = event.dataTransfer.getData('application/reactflow');
+
+      // check if the dropped element is valid
+      if (typeof type === 'undefined' || !type) {
+        return;
+      }
+
+      // project was renamed to screenToFlowPosition
+      // and you don't need to subtract the reactFlowBounds.left/top anymore
+      // details: https://reactflow.dev/whats-new/2023-11-10
+      const position = screenToFlowPosition({
+        x: event.clientX,
+        y: event.clientY,
+      });
+      const newNode = {
+        id: getId(),
+        type,
+        position,
+        data: { label: `${type} node` },
+      };
+
+      setNodes((nds) => nds.concat(newNode));
+    },
+    [screenToFlowPosition],
+  );    
+
+
+  // el.appendChild(
+  return (    
+    <div style={{ position: "relative", height: "400px", width: "100%" }}>
+      <ReactFlow 
+          nodes={nodes} 
+          edges={edges}
+          // onNodesChange={onNodesChange}
+          // onEdgesChange={onEdgesChange}
+          onNodesChange={onNodesChange}
+          onEdgesChange={onEdgesChange}
+          onConnect={onConnect}
+          onDrop={onDrop}
+          onDragOver={onDragOver}
+          nodeTypes={nodeTypes}
+          fitView
+          style={rfStyle}>
+        <Background variant="dots" gap={12} size={1} />
+        <MiniMap />  
+        <Controls />
+      </ReactFlow>
+    </div>
+  );
+});
+
+export default { render };

pyironflow-0.0.1/js/widget.css

@@ -0,0 +1,12 @@
+
+html, body, #root {
+	width: 100%;
+	height: 100%;
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+	font-family: sans-serif;
+  }
+
+
+