Skip to content

Commit

Permalink
docs: add run process to layouting example
Browse files Browse the repository at this point in the history
  • Loading branch information
bcakmakoglu committed Feb 6, 2024
1 parent 0ae7502 commit 7bd2996
Show file tree
Hide file tree
Showing 6 changed files with 213 additions and 24 deletions.
4 changes: 3 additions & 1 deletion docs/examples/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import { IntersectionApp, IntersectionCSS } from './intersection'
import { SnapToHandleApp, SnappableConnectionLine } from './connection-radius'
import { NodeResizerApp, ResizableNode } from './node-resizer'
import { ToolbarApp, ToolbarNode } from './node-toolbar'
import { LayoutApp, LayoutElements } from './layout'
import { LayoutApp, LayoutElements, LayoutNode, LayoutScript } from './layout'

export const exampleImports = {
basic: {
Expand Down Expand Up @@ -127,6 +127,8 @@ export const exampleImports = {
layout: {
'App.vue': LayoutApp,
'initial-elements.js': LayoutElements,
'ProcessNode.vue': LayoutNode,
'useRunProcess.js': LayoutScript,
'additionalImports': {
dagre: 'https://cdn.skypack.dev/pin/[email protected]/mode=imports,min/optimized/dagre.js',
},
Expand Down
32 changes: 23 additions & 9 deletions docs/examples/layout/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -3,40 +3,48 @@ import dagre from 'dagre'
import { nextTick, ref } from 'vue'
import { Panel, Position, VueFlow, useVueFlow } from '@vue-flow/core'
import { Background } from '@vue-flow/background'
import ProcessNode from './ProcessNode.vue'
import { initialEdges, initialNodes } from './initial-elements.js'
import { useRunProcess } from './useRunProcess'
const nodes = ref(initialNodes)
const edges = ref(initialEdges)
const dagreGraph = ref(new dagre.graphlib.Graph())
dagreGraph.value.setDefaultEdgeLabel(() => ({}))
const { run } = useRunProcess()
const { findNode, fitView } = useVueFlow()
function handleLayout(direction) {
// we create a new graph instance, in case some nodes/edges were removed, otherwise dagre would act as if they were still there
const dagreGraph = new dagre.graphlib.Graph()
dagreGraph.value = new dagre.graphlib.Graph()
dagreGraph.setDefaultEdgeLabel(() => ({}))
dagreGraph.value.setDefaultEdgeLabel(() => ({}))
const isHorizontal = direction === 'LR'
dagreGraph.setGraph({ rankdir: direction })
dagreGraph.value.setGraph({ rankdir: direction })
for (const node of nodes.value) {
// if you need width+height of nodes for your layout, you can use the dimensions property of the internal node (`GraphNode` type)
const graphNode = findNode(node.id)
dagreGraph.setNode(node.id, { width: graphNode.dimensions.width || 150, height: graphNode.dimensions.height || 50 })
dagreGraph.value.setNode(node.id, { width: graphNode.dimensions.width || 150, height: graphNode.dimensions.height || 50 })
}
for (const edge of edges.value) {
dagreGraph.setEdge(edge.source, edge.target)
dagreGraph.value.setEdge(edge.source, edge.target)
}
dagre.layout(dagreGraph)
dagre.layout(dagreGraph.value)
// set nodes with updated positions
nodes.value = nodes.value.map((node) => {
const nodeWithPosition = dagreGraph.node(node.id)
const nodeWithPosition = dagreGraph.value.node(node.id)
return {
...node,
Expand All @@ -55,11 +63,17 @@ function handleLayout(direction) {
<template>
<div class="layoutflow">
<VueFlow :nodes="nodes" :edges="edges" @nodes-initialized="handleLayout('TB')">
<template #node-process="props">
<ProcessNode v-bind="props" />
</template>

<Background />

<Panel style="display: flex; gap: 1rem" position="top-right">
<button @click="handleLayout('TB')">vertical layout</button>
<button @click="handleLayout('LR')">horizontal layout</button>
<button @click="handleLayout('TB')">vertical</button>
<button @click="handleLayout('LR')">horizontal</button>

<button @click="run(nodes, dagreGraph)">Run</button>
</Panel>
</VueFlow>
</div>
Expand Down
81 changes: 81 additions & 0 deletions docs/examples/layout/ProcessNode.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
<script setup>
import { toRef } from 'vue'
import { Handle } from '@vue-flow/core'
const props = defineProps({
data: {
type: Object,
required: true,
},
sourcePosition: {
type: String,
},
targetPosition: {
type: String,
},
})
const bgColor = toRef(() => {
if (props.data.hasError) {
return '#f87171'
}
if (props.data.isFinished) {
return '#10b981'
}
if (props.data.isRunning || props.data.isSkipped) {
// pick me a lighter color please
return '#6b7280'
}
return '#1a192b'
})
</script>

<template>
<div class="process-node" :style="{ backgroundColor: bgColor }">
<Handle type="target" :position="targetPosition" />
<Handle type="source" :position="sourcePosition" />

<div style="display: flex; align-items: center; gap: 8px">
<div v-if="data.isRunning" class="spinner" />
<span v-else-if="data.hasError">&#x274C;</span>
<span v-else-if="data.isSkipped">&#x1F6A7;</span>
<span v-else>&#x1F4E6;</span>
</div>
</div>
</template>

<style scoped>
.process-node {
padding: 10px;
color: white;
border: 1px solid #1a192b;
border-radius: 99px;
font-size: 10px;
width: 15px;
height: 15px;
display: flex;
align-items: center;
justify-content: center;
}
.spinner {
border: 2px solid #f3f3f3;
border-top: 2px solid #3498db;
border-radius: 50%;
width: 8px;
height: 8px;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
2 changes: 2 additions & 0 deletions docs/examples/layout/index.ts
Original file line number Diff line number Diff line change
@@ -1,2 +1,4 @@
export { default as LayoutApp } from './App.vue?raw'
export { default as LayoutElements } from './initial-elements.js?raw'
export { default as LayoutNode } from './ProcessNode.vue?raw'
export { default as LayoutScript } from './useRunProcess.js?raw'
30 changes: 16 additions & 14 deletions docs/examples/layout/initial-elements.js
Original file line number Diff line number Diff line change
@@ -1,61 +1,63 @@
const position = { x: 0, y: 0 }
const type = 'process'

export const initialNodes = [
{
id: '1',
type: 'input',
label: 'Start',
position,
type,
},
{
id: '2',
label: 'Process 1',
position,
type,
},
{
id: '2a',
label: 'Process 2a',
position,
type,
},
{
id: '2b',
type: 'output',
label: 'Process 2b',
position,
type,
},
{
id: '2c',
label: 'Process 2c',
position,
type,
},
{
id: '2d',
label: 'Process 2d',
position,
type,
},
{
id: '3',
label: 'Process 3',
position,
type,
},
{
id: '4',
type: 'input',
label: 'Start',
position,
type,
},
{
id: '5',
label: 'Process 5',
position,
type,
},
{
id: '6',
type: 'output',
label: 'Process 6',
position,
type,
},
{
id: '7',
position,
type,
},
{ id: '7', label: 'Process 7', position },
]

export const initialEdges = [
Expand Down
88 changes: 88 additions & 0 deletions docs/examples/layout/useRunProcess.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
import { ref } from 'vue'
import { useVueFlow } from '@vue-flow/core'

/**
* Composable to simulate running a process tree.
*
* It loops through each node, pretends to run an async process, and updates the node's data indicating whether the process has finished.
* When one node finishes, the next one starts.
*
* When a node has multiple descendants, it will run them in parallel.
*/
export function useRunProcess() {
const { updateNodeData } = useVueFlow()

const running = ref(false)
const executedNodes = new Set()

async function runNode(node, dagreGraph) {
if (executedNodes.has(node.id)) {
return
}

executedNodes.add(node.id)

updateNodeData(node.id, { isRunning: true, isFinished: false, hasError: false })

// Simulate an async process with a random timeout between 1 and 3 seconds
const delay = Math.floor(Math.random() * 2000) + 1000
await new Promise((resolve) => setTimeout(resolve, delay))

const children = dagreGraph.successors(node.id)

// Randomly decide whether the node will throw an error
const willThrowError = Math.random() < 0.15

if (willThrowError) {
updateNodeData(node.id, { isRunning: false, hasError: true })

await skipDescendants(node.id, dagreGraph)
return
}

updateNodeData(node.id, { isRunning: false, isFinished: true })

// Run the process on the children in parallel
await Promise.all(
children.map((id) => {
return runNode({ id }, dagreGraph)
}),
)
}

async function run(nodes, dagreGraph) {
if (running.value) {
return
}

reset(nodes)

running.value = true

// Get all starting nodes (nodes with no predecessors)
const startingNodes = nodes.filter((node) => dagreGraph.predecessors(node.id)?.length === 0)

// Run the process on all starting nodes in parallel
await Promise.all(startingNodes.map((node) => runNode(node, dagreGraph)))

running.value = false
executedNodes.clear()
}

function reset(nodes) {
for (const node of nodes) {
updateNodeData(node.id, { isRunning: false, isFinished: false, hasError: false, isSkipped: false })
}
}

async function skipDescendants(nodeId, dagreGraph) {
const children = dagreGraph.successors(nodeId)

for (const child of children) {
updateNodeData(child, { isRunning: false, isSkipped: true })
await skipDescendants(child, dagreGraph)
}
}

return { run, running }
}

0 comments on commit 7bd2996

Please sign in to comment.