@live-change/flow-frontend 0.9.225 → 0.9.227

package/front/src/demo/SourceNode.vue

@@ -0,0 +1,49 @@
+<template>
+  <DemoNodeCard :node="node" title="Source" icon="pi-database" @delete="deleteNode">
+    <div class="demo-node-section">Sample record</div>
+    <div class="flex items-center p-1">
+      <Textarea v-model="recordJson" class="w-full text-sm mx-2" rows="6" autoResize />
+      <DemoPort :x="1" :node="node" portId="out" />
+    </div>
+    <div v-if="jsonError" class="text-red-600 text-xs px-3 pb-1">{{ jsonError }}</div>
+  </DemoNodeCard>
+</template>
+
+<script setup>
+
+  import DemoNodeCard from "./DemoNodeCard.vue"
+  import DemoPort from "./DemoPort.vue"
+  import { useFlow } from "../components/index.js"
+
+  import { computed, defineProps, ref, toRefs } from "vue"
+
+  const props = defineProps({
+    node: {
+      type: Object,
+      required: true
+    }
+  })
+
+  const { node } = toRefs(props)
+  const flow = useFlow()
+  const jsonError = ref('')
+
+  const recordJson = computed({
+    get() {
+      return JSON.stringify(node.value.record ?? {}, null, 2)
+    },
+    set(value) {
+      try {
+        node.value.record = JSON.parse(value)
+        jsonError.value = ''
+      } catch (err) {
+        jsonError.value = 'Invalid JSON'
+      }
+    }
+  })
+
+  function deleteNode() {
+    flow.deleteNode(node.value)
+  }
+
+</script>

package/front/src/demo/calculation/AddNode.vue

@@ -0,0 +1,35 @@
+<template>
+  <DemoNodeCard :node="node" title="Add" icon="pi-plus" @delete="deleteNode"
+                :data-testid="`node-${node.logicType}`">
+    <div class="demo-node-section">Sum</div>
+    <div class="flex items-center p-1">
+      <DemoPort :x="-1" :node="node" portId="in" />
+      <div class="flex-1 mx-2 text-sm">N inputs</div>
+      <DemoPort :x="1" :node="node" portId="out" />
+    </div>
+  </DemoNodeCard>
+</template>
+
+<script setup>
+
+  import DemoNodeCard from "../DemoNodeCard.vue"
+  import DemoPort from "../DemoPort.vue"
+  import { useFlow } from "../../components/index.js"
+
+  import { defineProps, toRefs } from "vue"
+
+  const props = defineProps({
+    node: {
+      type: Object,
+      required: true
+    }
+  })
+
+  const { node } = toRefs(props)
+  const flow = useFlow()
+
+  function deleteNode() {
+    flow.deleteNode(node.value)
+  }
+
+</script>

package/front/src/demo/calculation/ConstantNode.vue

@@ -0,0 +1,61 @@
+<template>
+  <DemoNodeCard :node="node" title="Constant" icon="pi-hashtag" @delete="deleteNode"
+                :data-testid="`node-${node.logicType}`">
+    <div class="demo-node-section">Value</div>
+    <div class="flex items-center p-1">
+      <div class="flex-1 mx-2">
+        <InputNumber v-if="editable" v-model="editable.value" class="w-full" :max-fraction-digits="6"
+                     data-testid="constant-value" />
+      </div>
+      <DemoPort :x="1" :node="node" portId="out" />
+    </div>
+  </DemoNodeCard>
+</template>
+
+<script setup>
+
+  import DemoNodeCard from "../DemoNodeCard.vue"
+  import DemoPort from "../DemoPort.vue"
+  import { useFlow } from "../../components/index.js"
+  import { synchronized } from '@live-change/vue3-components'
+  import { useApi } from '@live-change/vue3-ssr'
+  import InputNumber from 'primevue/inputnumber'
+
+  import { computed, defineProps, toRefs } from "vue"
+
+  const props = defineProps({
+    node: {
+      type: Object,
+      required: true
+    },
+    constant: {
+      type: Object,
+      default: null
+    },
+    calculationId: {
+      type: String,
+      default: null
+    }
+  })
+
+  const { node } = toRefs(props)
+  const flow = useFlow()
+  const api = useApi()
+
+  const source = computed(() => props.constant)
+  const sync = synchronized({
+    source,
+    update: (params) => api.command(['calculation', 'updateConstant'], params),
+    identifiers: computed(() => ({
+      constant: node.value.logic,
+      calculation: props.calculationId || props.constant?.calculation
+    })),
+    recursive: true
+  })
+  const { value: editable } = sync
+
+  function deleteNode() {
+    flow.deleteNode(node.value)
+  }
+
+</script>

package/front/src/demo/calculation/FlowCalculationDemo.vue

@@ -0,0 +1,300 @@
+<template>
+  <div class="w-full h-screen flex flex-col">
+    <NavBar />
+    <div class="bg-surface-0 dark:bg-surface-900 py-2 px-4 shadow flex items-center gap-2 z-10 flex-wrap">
+      <Button label="Add constant" icon="pi pi-plus" size="small" data-testid="add-constant"
+              :disabled="!graphId" @click="addOp('Constant')" />
+      <Button label="Add add" icon="pi pi-plus" size="small" severity="secondary" data-testid="add-add"
+              :disabled="!graphId" @click="addOp('Add')" />
+      <Button label="Add multiply" icon="pi pi-plus" size="small" severity="secondary"
+              data-testid="add-multiply" :disabled="!graphId" @click="addOp('Multiply')" />
+      <Button label="Add power" icon="pi pi-plus" size="small" severity="secondary" data-testid="add-power"
+              :disabled="!graphId" @click="addOp('Power')" />
+      <Button label="Run" icon="pi pi-play" size="small" severity="success" data-testid="run-calculation"
+              :disabled="!calculationId" @click="run" />
+      <span v-if="runError" class="text-red-600 text-sm ml-2">{{ runError }}</span>
+      <span v-if="calculationId" data-testid="calculation-id" :data-id="calculationId" class="hidden">
+        {{ calculationId }}
+      </span>
+    </div>
+    <div class="flex flex-1 min-h-0">
+      <Flow class="flex-1 grow">
+        <template #default>
+          <component
+            v-for="node of nodes"
+            :key="node.id"
+            :is="nodeComponent(node)"
+            :node="node"
+            :constant="constantById(node.logic)"
+            :power="powerById(node.logic)"
+            :calculation-id="calculationId"
+            class="absolute"
+            :style="{ left: (node.position?.x || 0) + 'px', top: (node.position?.y || 0) + 'px' }"
+          />
+        </template>
+        <template #foreground-edges>
+          <DemoEdge v-for="edge of canvasEdges" :key="edge.id" :edge="edge" />
+        </template>
+        <template #free-edge="{ freeEdge }">
+          <DemoEdge v-if="freeEdge" :edge="freeEdge" />
+        </template>
+      </Flow>
+      <aside class="w-80 bg-surface-100 dark:bg-surface-800 border-l border-gray-200 overflow-auto p-3">
+        <div class="font-semibold mb-2">Last run</div>
+        <pre class="text-xs m-0 whitespace-pre-wrap" data-testid="run-results">{{ lastRunText }}</pre>
+      </aside>
+    </div>
+  </div>
+</template>
+
+<script setup>
+
+  import Flow from '../../components/Flow.vue'
+  import { useFlow } from '../../components/index.js'
+  import NavBar from '../../NavBar.vue'
+  import DemoEdge from '../DemoEdge.vue'
+  import ConstantNode from './ConstantNode.vue'
+  import AddNode from './AddNode.vue'
+  import MultiplyNode from './MultiplyNode.vue'
+  import PowerNode from './PowerNode.vue'
+
+  import { computed, ref, watch } from 'vue'
+  import { useRoute, useRouter } from 'vue-router'
+  import { usePath, live, useApi, useClient } from '@live-change/vue3-ssr'
+  import { synchronizedList } from '@live-change/vue3-components'
+
+  const nodeComponentByType = {
+    calculation_Constant: ConstantNode,
+    calculation_Add: AddNode,
+    calculation_Multiply: MultiplyNode,
+    calculation_Power: PowerNode
+  }
+
+  const deleteActionByType = {
+    calculation_Constant: { name: 'deleteConstant', key: 'constant' },
+    calculation_Add: { name: 'deleteAdd', key: 'add' },
+    calculation_Multiply: { name: 'deleteMultiply', key: 'multiply' },
+    calculation_Power: { name: 'deletePower', key: 'power' }
+  }
+
+  const path = usePath()
+  const api = useApi()
+  const client = useClient()
+  const route = useRoute()
+  const router = useRouter()
+
+  const creating = ref(false)
+  const lastRun = ref(null)
+  const runError = ref('')
+  const nextNodeSlot = ref(0)
+
+  const calculations = await live(computed(() => client.value?.session
+    ? path.calculation.sessionOwnedCalculations({ session: client.value.session })
+    : null))
+
+  const calculationId = computed(() => route.params.calculation || calculations.value?.[0]?.id || null)
+
+  watch(calculationId, () => {
+    nextNodeSlot.value = 0
+  })
+
+  watch([calculations, () => client.value?.session, () => route.params.calculation], async () => {
+    if(typeof window == 'undefined') return
+    if(route.params.calculation) return
+    const session = client.value?.session
+    if(!session) return
+    const list = calculations.value || []
+    if(list.length) {
+      await router.replace({ name: 'calculationDetail', params: { calculation: list[0].id } })
+      return
+    }
+    if(creating.value) return
+    creating.value = true
+    try {
+      const id = await api.command(['calculation', 'createCalculation'], { session })
+      await router.replace({ name: 'calculationDetail', params: { calculation: id } })
+    } finally {
+      creating.value = false
+    }
+  }, { immediate: true })
+
+  const graph = await live(computed(() => calculationId.value
+    ? path.flow.graph({
+      ownerType: 'calculation_Calculation',
+      owner: calculationId.value
+    })
+    : null))
+
+  const graphId = computed(() => graph.value?.id || null)
+
+  function rowObjectId(row) {
+    return row?.to || row?.id
+  }
+
+  const nodeRows = await live(computed(() => graphId.value
+    ? path.flow.graphOwnedNodes({
+      graphType: 'flow_Graph',
+      graph: graphId.value
+    })
+    : null))
+
+  const edgeRows = await live(computed(() => graphId.value
+    ? path.flow.graphOwnedEdges({
+      graphType: 'flow_Graph',
+      graph: graphId.value
+    })
+    : null))
+
+  const constants = await live(computed(() => calculationId.value
+    ? path.calculation.calculationOwnedConstants({ calculation: calculationId.value })
+    : null))
+
+  const powers = await live(computed(() => calculationId.value
+    ? path.calculation.calculationOwnedPowers({ calculation: calculationId.value })
+    : null))
+
+  const nodeSource = computed(() => (nodeRows.value || []).map(row => ({
+    ...row,
+    id: rowObjectId(row)
+  })))
+  const syncNodes = synchronizedList({
+    source: nodeSource,
+    update: (params) => api.command(['flow', 'updateNode'], params),
+    objectIdentifiers: (object) => ({
+      graphType: object.graphType,
+      graph: object.graph,
+      logicType: object.logicType,
+      logic: object.logic
+    }),
+    recursive: true
+  })
+
+  const nodes = syncNodes.value
+
+  const canvasEdges = computed(() => (edgeRows.value || []).map(edge => ({
+    id: rowObjectId(edge),
+    src: { node: edge.source, port: edge.sourcePort },
+    dest: { node: edge.destination, port: edge.destinationPort },
+    connection: edge.connection
+  })))
+
+  function nodeById(nodeId) {
+    return nodes.value.find(node => node.id == nodeId)
+  }
+
+  function isConnectable(fromNode, fromPort, toNode, toPort) {
+    const fromId = typeof fromNode == 'string' ? fromNode : fromNode?.id
+    const toId = typeof toNode == 'string' ? toNode : toNode?.id
+    if(fromId && toId && fromId === toId) return false
+    if(!fromPort || !toPort) return true
+    return fromPort !== toPort
+      && (fromPort === 'in' || fromPort === 'out')
+      && (toPort === 'in' || toPort === 'out')
+  }
+
+  async function connect(newEdge) {
+    if(newEdge.src.port !== 'out' && newEdge.dest.port === 'out') {
+      const tmp = newEdge.src
+      newEdge.src = newEdge.dest
+      newEdge.dest = tmp
+    }
+    const srcNode = nodeById(newEdge.src.node)
+    const destNode = nodeById(newEdge.dest.node)
+    if(!srcNode || !destNode || !graphId.value) return
+    const wireId = await api.command(['calculation', 'createWire'], {
+      sourceType: srcNode.logicType,
+      source: srcNode.logic,
+      destinationType: destNode.logicType,
+      destination: destNode.logic,
+      sourcePort: newEdge.src.port,
+      destinationPort: newEdge.dest.port
+    })
+    await api.command(['flow', 'createEdge'], {
+      graphType: 'flow_Graph',
+      graph: graphId.value,
+      sourceType: 'flow_Node',
+      source: newEdge.src.node,
+      destinationType: 'flow_Node',
+      destination: newEdge.dest.node,
+      connectionType: 'calculation_Wire',
+      connection: wireId,
+      sourcePort: newEdge.src.port,
+      destinationPort: newEdge.dest.port
+    })
+  }
+
+  async function deleteLogicNode(node) {
+    const spec = deleteActionByType[node.logicType]
+    if(!spec) return
+    await api.command(['calculation', spec.name], { [spec.key]: node.logic })
+  }
+
+  async function deleteWireEdge(edge) {
+    if(!edge.connection) return
+    await api.command(['calculation', 'deleteWire'], { wire: edge.connection })
+  }
+
+    const flow = useFlow({
+    nodes,
+    edges: canvasEdges,
+    width: 1600,
+    height: 900,
+    edgeConnectDistance: 48,
+    isConnectable,
+    connect,
+    deleteNode: deleteLogicNode,
+    deleteEdge: deleteWireEdge
+  })
+
+  function nodeComponent(node) {
+    return nodeComponentByType[node.logicType]
+  }
+
+  function constantById(id) {
+    const row = (constants.value || []).find(row => rowObjectId(row) == id || row.id == id)
+    if(!row) return null
+    return { ...row, id: rowObjectId(row) }
+  }
+
+  function powerById(id) {
+    const row = (powers.value || []).find(row => rowObjectId(row) == id || row.id == id)
+    if(!row) return null
+    return { ...row, id: rowObjectId(row) }
+  }
+
+  async function addOp(kind) {
+    if(!calculationId.value || !graphId.value) return
+    const createName = 'create' + kind
+    const logicType = 'calculation_' + kind
+    const logic = await api.command(['calculation', createName], {
+      calculation: calculationId.value
+    })
+    const slot = nextNodeSlot.value
+    nextNodeSlot.value = slot + 1
+    await api.command(['flow', 'setNode'], {
+      graphType: 'flow_Graph',
+      graph: graphId.value,
+      logicType,
+      logic,
+      position: {
+        x: 80 + (slot % 4) * 360,
+        y: 80 + Math.floor(slot / 4) * 260
+      }
+    })
+  }
+
+  async function run() {
+    if(!calculationId.value) return
+    const result = await api.command(['calculation', 'runCalculation'], {
+      calculation: calculationId.value
+    })
+    lastRun.value = result
+    runError.value = result?.error || ''
+  }
+
+  const lastRunText = computed(() => {
+    if(!lastRun.value) return 'Press Run to execute the calculation graph.'
+    return JSON.stringify(lastRun.value, null, 2)
+  })
+
+</script>

package/front/src/demo/calculation/MultiplyNode.vue

@@ -0,0 +1,35 @@
+<template>
+  <DemoNodeCard :node="node" title="Multiply" icon="pi-times" @delete="deleteNode"
+                :data-testid="`node-${node.logicType}`">
+    <div class="demo-node-section">Product</div>
+    <div class="flex items-center p-1">
+      <DemoPort :x="-1" :node="node" portId="in" />
+      <div class="flex-1 mx-2 text-sm">N inputs</div>
+      <DemoPort :x="1" :node="node" portId="out" />
+    </div>
+  </DemoNodeCard>
+</template>
+
+<script setup>
+
+  import DemoNodeCard from "../DemoNodeCard.vue"
+  import DemoPort from "../DemoPort.vue"
+  import { useFlow } from "../../components/index.js"
+
+  import { defineProps, toRefs } from "vue"
+
+  const props = defineProps({
+    node: {
+      type: Object,
+      required: true
+    }
+  })
+
+  const { node } = toRefs(props)
+  const flow = useFlow()
+
+  function deleteNode() {
+    flow.deleteNode(node.value)
+  }
+
+</script>

package/front/src/demo/calculation/PowerNode.vue

@@ -0,0 +1,62 @@
+<template>
+  <DemoNodeCard :node="node" title="Power" icon="pi-sort-amount-up" @delete="deleteNode"
+                :data-testid="`node-${node.logicType}`">
+    <div class="demo-node-section">Exponent</div>
+    <div class="flex items-center p-1">
+      <DemoPort :x="-1" :node="node" portId="in" />
+      <div class="flex-1 mx-2">
+        <InputNumber v-if="editable" v-model="editable.exponent" class="w-full" :max-fraction-digits="6"
+                     data-testid="power-exponent" />
+      </div>
+      <DemoPort :x="1" :node="node" portId="out" />
+    </div>
+  </DemoNodeCard>
+</template>
+
+<script setup>
+
+  import DemoNodeCard from "../DemoNodeCard.vue"
+  import DemoPort from "../DemoPort.vue"
+  import { useFlow } from "../../components/index.js"
+  import { synchronized } from '@live-change/vue3-components'
+  import { useApi } from '@live-change/vue3-ssr'
+  import InputNumber from 'primevue/inputnumber'
+
+  import { computed, defineProps, toRefs } from "vue"
+
+  const props = defineProps({
+    node: {
+      type: Object,
+      required: true
+    },
+    power: {
+      type: Object,
+      default: null
+    },
+    calculationId: {
+      type: String,
+      default: null
+    }
+  })
+
+  const { node } = toRefs(props)
+  const flow = useFlow()
+  const api = useApi()
+
+  const source = computed(() => props.power)
+  const sync = synchronized({
+    source,
+    update: (params) => api.command(['calculation', 'updatePower'], params),
+    identifiers: computed(() => ({
+      power: node.value.logic,
+      calculation: props.calculationId || props.power?.calculation
+    })),
+    recursive: true
+  })
+  const { value: editable } = sync
+
+  function deleteNode() {
+    flow.deleteNode(node.value)
+  }
+
+</script>

package/front/src/demo/flowTestId.js

@@ -0,0 +1,3 @@
+export function flowTestId(value) {
+  return String(value ?? '').replace(/[^A-Za-z0-9._-]+/g, '_')
+}

package/front/src/demo/runDemoGraph.js

@@ -0,0 +1,76 @@
+function portKind(portId) {
+  if (typeof portId != 'string') return null
+  if (portId === 'in' || portId.endsWith('/in')) return 'in'
+  if (portId === 'out' || portId.endsWith('/out')) return 'out'
+  return null
+}
+
+function normalizeLink(edge) {
+  const srcKind = portKind(edge.src?.port)
+  const destKind = portKind(edge.dest?.port)
+  if (srcKind === 'out' && destKind === 'in') {
+    return { from: edge.src.node, to: edge.dest.node }
+  }
+  if (srcKind === 'in' && destKind === 'out') {
+    return { from: edge.dest.node, to: edge.src.node }
+  }
+  return null
+}
+
+function executeNode(node, inputRecords) {
+  if (node.type === 'source') {
+    return { ...(node.record || {}) }
+  }
+  const base = Object.assign({}, ...inputRecords)
+  if (node.type === 'enrich') {
+    const field = node.field || 'field'
+    return { ...base, [field]: node.value }
+  }
+  return base
+}
+
+export function runDemoGraph(nodes, edges) {
+  const nodeById = new Map(nodes.map(node => [node.id, node]))
+  const incoming = new Map(nodes.map(node => [node.id, []]))
+  const outgoing = new Map(nodes.map(node => [node.id, []]))
+
+  for (const edge of edges) {
+    const link = normalizeLink(edge)
+    if (!link) continue
+    if (!nodeById.has(link.from) || !nodeById.has(link.to)) continue
+    incoming.get(link.to).push(link.from)
+    outgoing.get(link.from).push(link.to)
+  }
+
+  const indegree = new Map(nodes.map(node => [node.id, incoming.get(node.id).length]))
+  const queue = nodes.filter(node => indegree.get(node.id) === 0).map(node => node.id)
+  const order = []
+  while (queue.length) {
+    const id = queue.shift()
+    order.push(id)
+    for (const nextId of outgoing.get(id)) {
+      indegree.set(nextId, indegree.get(nextId) - 1)
+      if (indegree.get(nextId) === 0) queue.push(nextId)
+    }
+  }
+
+  if (order.length !== nodes.length) {
+    return { error: 'Cycle in the graph', traces: [], outputs: [] }
+  }
+
+  const values = new Map()
+  const traces = []
+  for (const id of order) {
+    const node = nodeById.get(id)
+    const inputRecords = incoming.get(id).map(fromId => values.get(fromId)).filter(Boolean)
+    const record = executeNode(node, inputRecords)
+    values.set(id, record)
+    traces.push({ nodeId: id, type: node.type, record })
+  }
+
+  const outputs = nodes
+    .filter(node => node.type === 'output')
+    .map(node => ({ id: node.id, record: values.get(node.id) }))
+
+  return { traces, outputs }
+}

package/front/src/demo/seedGraph.js

@@ -0,0 +1,38 @@
+export const STORAGE_KEY = 'flow-frontend-demo-graph'
+
+export function createSeedGraph() {
+  return {
+    nodes: [
+      {
+        id: 'source',
+        type: 'source',
+        position: { x: 80, y: 140 },
+        record: { sku: 'ABC-12', qty: 2, nip: '1234567890' }
+      },
+      {
+        id: 'enrich',
+        type: 'enrich',
+        position: { x: 420, y: 140 },
+        field: 'vatRate',
+        value: 23
+      },
+      {
+        id: 'output',
+        type: 'output',
+        position: { x: 760, y: 140 }
+      }
+    ],
+    edges: [
+      {
+        id: 'e-source-enrich',
+        src: { node: 'source', port: 'out' },
+        dest: { node: 'enrich', port: 'in' }
+      },
+      {
+        id: 'e-enrich-output',
+        src: { node: 'enrich', port: 'out' },
+        dest: { node: 'output', port: 'in' }
+      }
+    ]
+  }
+}

package/front/src/entry-client.js

@@ -1,6 +1,6 @@
 import { clientEntry } from '@live-change/frontend-base/client-entry.js'
 import App from './App.vue'
 import { createRouter } from './router'
+import config from './config.js'
 
-
-clientEntry(App, createRouter)
+clientEntry(App, createRouter, config)

package/front/src/entry-server.js

@@ -1,6 +1,7 @@
 import { serverEntry } from '@live-change/frontend-base/server-entry.js'
 import App from './App.vue'
 import { createRouter } from './router'
+import config from './config.js'
 
-const render = serverEntry(App, createRouter)
+const render = serverEntry(App, createRouter, config)
 export { render }