npm - @receptron/graphai_vue_cytoscape - Versions diffs - 0.0.7 → 0.0.9 - Mend

@receptron/graphai_vue_cytoscape 0.0.7 → 0.0.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/lib/bundle.cjs.js ADDED Viewed

@@ -0,0 +1,292 @@
+'use strict';
+var vue = require('vue');
+var graphai = require('graphai');
+var cytoscape = require('cytoscape');
+var klay = require('cytoscape-klay');
+cytoscape.use(klay);
+const layout = "klay";
+const colorPriority = "#f80";
+const colorStatic = "#88f";
+const calcNodeWidth = (label) => {
+    if (label === null || label === undefined) {
+        return "50px";
+    }
+    return Math.max(50, label.length * 8) + "px";
+};
+const cyStyle = [
+    {
+        selector: "node",
+        style: {
+            "background-color": "data(color)",
+            label: "data(id)",
+            shape: (ele) => (ele.data("isStatic") ? "rectangle" : "roundrectangle"),
+            width: (ele) => calcNodeWidth(ele.data("id")),
+            color: "#fff",
+            height: "30px",
+            "text-valign": "center",
+            "text-halign": "center",
+            "font-size": "12px",
+        },
+    },
+    {
+        selector: "edge",
+        style: {
+            width: 3,
+            "line-color": "#888",
+            "target-arrow-color": "#888",
+            "target-arrow-shape": "triangle",
+            "curve-style": "straight",
+            "text-background-color": "#ffffff",
+            "text-background-opacity": 0.8,
+            "text-background-shape": "rectangle",
+            "font-size": "10px",
+        },
+    },
+    {
+        selector: "edge[label]",
+        style: {
+            label: "data(label)",
+        },
+    },
+    {
+        selector: "edge[isUpdate]",
+        style: {
+            color: "#ddd",
+            "line-color": "#ddd",
+            "line-style": "dashed",
+            "curve-style": "unbundled-bezier",
+            "target-arrow-color": "#ddd",
+        },
+    },
+];
+const colorMap = {
+    [graphai.NodeState.Waiting]: "#888",
+    [graphai.NodeState.Completed]: "#000",
+    [graphai.NodeState.Executing]: "#0f0",
+    ["executing-server"]: "#FFC0CB",
+    [graphai.NodeState.Queued]: "#ff0",
+    [graphai.NodeState.Injected]: "#00f",
+    [graphai.NodeState.TimedOut]: "#f0f",
+    [graphai.NodeState.Failed]: "#f00",
+    [graphai.NodeState.Skipped]: "#0ff",
+};
+const parseInput = (input) => {
+    // WARNING: Assuming the first character is always ":"
+    const ids = input.slice(1).split(".");
+    const source = ids.shift() || "";
+    const label = ids.length ? ids.join(".") : undefined;
+    return { source, label };
+};
+const inputs2dataSources = (inputs) => {
+    if (Array.isArray(inputs)) {
+        return inputs.map((inp) => inputs2dataSources(inp)).flat();
+    }
+    if (graphai.isObject(inputs)) {
+        return Object.values(inputs)
+            .map((input) => inputs2dataSources(input))
+            .flat();
+    }
+    if (typeof inputs === "string") {
+        const templateMatch = Array.from(inputs.matchAll(/\${(:[^}]+)}/g)).map((m) => m[1]);
+        if (templateMatch.length > 0) {
+            return inputs2dataSources(templateMatch);
+        }
+    }
+    return inputs;
+};
+const dataSourceNodeIds = (sources) => {
+    return sources.filter((source) => source.nodeId).map((source) => source.nodeId);
+};
+const cytoscapeFromGraph = (graph_data) => {
+    const elements = Object.keys(graph_data.nodes || {}).reduce((tmp, nodeId) => {
+        const node = graph_data.nodes[nodeId];
+        const isStatic = "value" in node;
+        const cyNode = {
+            data: {
+                id: nodeId,
+                color: isStatic ? colorStatic : colorMap[graphai.NodeState.Waiting],
+                isStatic,
+            },
+        };
+        tmp.nodes.push(cyNode);
+        tmp.map[nodeId] = cyNode;
+        if ("inputs" in node) {
+            // computed node
+            inputs2dataSources(node.inputs).forEach((input) => {
+                if (input[0] === ":") {
+                    const { source, label } = parseInput(input);
+                    tmp.edges.push({
+                        data: {
+                            source,
+                            target: nodeId,
+                            label,
+                        },
+                    });
+                }
+            });
+        }
+        if ("update" in node && node.update) {
+            // static node
+            const { source, label } = parseInput(node.update);
+            tmp.edges.push({
+                data: {
+                    source,
+                    target: nodeId,
+                    isUpdate: true,
+                    label,
+                },
+            });
+        }
+        return tmp;
+    }, { nodes: [], edges: [], map: {} });
+    return { elements };
+};
+const useCytoscape = (selectedGraph) => {
+    let cy = null;
+    const cytoscapeData = vue.ref(cytoscapeFromGraph(selectedGraph.value ?? { nodes: {} }));
+    const cytoscapeRef = vue.ref();
+    const zoomingEnabled = vue.ref(true);
+    const updateCytoscape = async (nodeId, state) => {
+        if ([graphai.NodeState.Completed, graphai.NodeState.Waiting].includes(state)) {
+            await graphai.sleep(100);
+        }
+        const elements = cytoscapeData.value.elements;
+        elements.map[nodeId].data.color = colorMap[state];
+        const graph = selectedGraph.value;
+        const nodeData = (graph?.nodes ?? {})[nodeId] ?? [];
+        if ("agent" in nodeData && state === graphai.NodeState.Queued && (nodeData.priority ?? 0) > 0) {
+            // computed node
+            elements.map[nodeId].data.color = colorPriority;
+        }
+        else if ("value" in nodeData && state === graphai.NodeState.Waiting) {
+            // static node
+            elements.map[nodeId].data.color = colorStatic;
+        }
+        cytoscapeData.value = { elements };
+        if (state === graphai.NodeState.Injected) {
+            await graphai.sleep(100);
+            elements.map[nodeId].data.color = colorStatic;
+            cytoscapeData.value = { elements };
+        }
+    };
+    const createCytoscape = () => {
+        try {
+            cy = cytoscape({
+                container: cytoscapeRef.value,
+                style: cyStyle,
+                layout: {
+                    name: layout,
+                    // fit: true,
+                    // padding: 30,
+                    // avoidOverlap: true,
+                },
+            });
+            cy.on("mouseup", storePositions);
+            cy.on("touchend", storePositions);
+            // cy.on("select", "node", callback);
+            // cy.on("select", "edge", callback);
+            //store.commit("setCytoscape", cy);
+        }
+        catch (error) {
+            console.error(error);
+            // store.commit("setCytoscape", null);
+            // error_msg.value = `${error}`;
+        }
+    };
+    const updateGraphData = async () => {
+        if (cy) {
+            cy.elements().remove();
+            cy.add(cytoscapeData.value.elements);
+            const name = cytoscapeData.value.elements.nodes.reduce((prevName, node) => {
+                if (node.position) {
+                    return "preset";
+                }
+                return prevName;
+            }, layout);
+            console.log("layout", name);
+            cy.layout({ name }).run();
+            cy.fit();
+            if (name === layout) {
+                await graphai.sleep(400);
+                storePositions();
+            }
+        }
+    };
+    const storePositions = () => {
+        console.log("storePositions");
+        if (cy) {
+            cy.nodes().forEach((cynode) => {
+                const id = cynode.id();
+                const pos = cynode.position();
+                const node = cytoscapeData.value.elements.map[id];
+                node.position = pos;
+            });
+        }
+    };
+    const resetCytoscape = () => {
+        const elements = cytoscapeData.value.elements;
+        Object.keys(elements.map).forEach((nodeId) => {
+            const graph = selectedGraph.value;
+            const nodeData = graph.nodes[nodeId];
+            elements.map[nodeId].data.color = "value" in nodeData ? colorStatic : colorMap[graphai.NodeState.Waiting];
+        });
+        cytoscapeData.value = { elements };
+    };
+    vue.watch(cytoscapeData, () => {
+        console.log("updated");
+        updateGraphData();
+    });
+    vue.watch(selectedGraph, () => {
+        cytoscapeData.value = cytoscapeFromGraph(selectedGraph.value);
+    });
+    vue.onMounted(() => {
+        createCytoscape();
+        updateGraphData();
+    });
+    const layoutCytoscape = (key) => {
+        if (cy) {
+            const positions = cy.nodes().map((node) => {
+                return {
+                    id: node.id(),
+                    position: node.position(),
+                };
+            });
+            console.log(JSON.stringify(positions));
+            localStorage.setItem("layoutData-" + key, JSON.stringify(positions));
+        }
+    };
+    const loadLayout = (key) => {
+        const savedLayoutData = localStorage.getItem("layoutData-" + key);
+        if (savedLayoutData) {
+            const positions = JSON.parse(savedLayoutData);
+            positions.forEach((data) => {
+                if (cy) {
+                    const node = cy.getElementById(data.id);
+                    if (node) {
+                        node.position(data.position);
+                    }
+                }
+            });
+        }
+    };
+    vue.watch(zoomingEnabled, (value) => {
+        if (cy) {
+            cy.zoomingEnabled(value);
+        }
+    });
+    return {
+        cytoscapeRef,
+        updateCytoscape,
+        resetCytoscape,
+        layoutCytoscape,
+        loadLayout,
+        zoomingEnabled,
+    };
+};
+exports.dataSourceNodeIds = dataSourceNodeIds;
+exports.inputs2dataSources = inputs2dataSources;
+exports.useCytoscape = useCytoscape;
+//# sourceMappingURL=bundle.cjs.js.map

package/lib/bundle.cjs.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"bundle.cjs.js","sources":["../src/composables/cytoscape.ts"],"sourcesContent":[null],"names":["NodeState","isObject","ref","sleep","watch","onMounted"],"mappings":"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"}

package/lib/bundle.cjs.min.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";var e=require("vue"),t=require("graphai"),a=require("cytoscape"),o=require("cytoscape-klay");a.use(o);const l="klay",s="#88f",n=[{selector:"node",style:{"background-color":"data(color)",label:"data(id)",shape:e=>e.data("isStatic")?"rectangle":"roundrectangle",width:e=>{return null==(t=e.data("id"))?"50px":Math.max(50,8*t.length)+"px";var t},color:"#fff",height:"30px","text-valign":"center","text-halign":"center","font-size":"12px"}},{selector:"edge",style:{width:3,"line-color":"#888","target-arrow-color":"#888","target-arrow-shape":"triangle","curve-style":"straight","text-background-color":"#ffffff","text-background-opacity":.8,"text-background-shape":"rectangle","font-size":"10px"}},{selector:"edge[label]",style:{label:"data(label)"}},{selector:"edge[isUpdate]",style:{color:"#ddd","line-color":"#ddd","line-style":"dashed","curve-style":"unbundled-bezier","target-arrow-color":"#ddd"}}],r={[t.NodeState.Waiting]:"#888",[t.NodeState.Completed]:"#000",[t.NodeState.Executing]:"#0f0","executing-server":"#FFC0CB",[t.NodeState.Queued]:"#ff0",[t.NodeState.Injected]:"#00f",[t.NodeState.TimedOut]:"#f0f",[t.NodeState.Failed]:"#f00",[t.NodeState.Skipped]:"#0ff"},d=e=>{const t=e.slice(1).split(".");return{source:t.shift()\|\|"",label:t.length?t.join("."):void 0}},i=e=>{if(Array.isArray(e))return e.map((e=>i(e))).flat();if(t.isObject(e))return Object.values(e).map((e=>i(e))).flat();if("string"==typeof e){const t=Array.from(e.matchAll(/\${(:[^}]+)}/g)).map((e=>e[1]));if(t.length>0)return i(t)}return e},c=e=>({elements:Object.keys(e.nodes\|\|{}).reduce(((a,o)=>{const l=e.nodes[o],n="value"in l,c={data:{id:o,color:n?s:r[t.NodeState.Waiting],isStatic:n}};if(a.nodes.push(c),a.map[o]=c,"inputs"in l&&i(l.inputs).forEach((e=>{if(":"===e[0]){const{source:t,label:l}=d(e);a.edges.push({data:{source:t,target:o,label:l}})}})),"update"in l&&l.update){const{source:e,label:t}=d(l.update);a.edges.push({data:{source:e,target:o,isUpdate:!0,label:t}})}return a}),{nodes:[],edges:[],map:{}})});exports.dataSourceNodeIds=e=>e.filter((e=>e.nodeId)).map((e=>e.nodeId)),exports.inputs2dataSources=i,exports.useCytoscape=o=>{let d=null;const i=e.ref(c(o.value??{nodes:{}})),u=e.ref(),p=e.ref(!0),f=async()=>{if(d){d.elements().remove(),d.add(i.value.elements);const e=i.value.elements.nodes.reduce(((e,t)=>t.position?"preset":e),l);console.log("layout",e),d.layout({name:e}).run(),d.fit(),e===l&&(await t.sleep(400),g())}},g=()=>{console.log("storePositions"),d&&d.nodes().forEach((e=>{const t=e.id(),a=e.position();i.value.elements.map[t].position=a}))};e.watch(i,(()=>{console.log("updated"),f()})),e.watch(o,(()=>{i.value=c(o.value)})),e.onMounted((()=>{(()=>{try{d=a({container:u.value,style:n,layout:{name:l}}),d.on("mouseup",g),d.on("touchend",g)}catch(e){console.error(e)}})(),f()}));return e.watch(p,(e=>{d&&d.zoomingEnabled(e)})),{cytoscapeRef:u,updateCytoscape:async(e,a)=>{[t.NodeState.Completed,t.NodeState.Waiting].includes(a)&&await t.sleep(100);const l=i.value.elements;l.map[e].data.color=r[a];const n=o.value,d=(n?.nodes??{})[e]??[];"agent"in d&&a===t.NodeState.Queued&&(d.priority??0)>0?l.map[e].data.color="#f80":"value"in d&&a===t.NodeState.Waiting&&(l.map[e].data.color=s),i.value={elements:l},a===t.NodeState.Injected&&(await t.sleep(100),l.map[e].data.color=s,i.value={elements:l})},resetCytoscape:()=>{const e=i.value.elements;Object.keys(e.map).forEach((a=>{const l=o.value.nodes[a];e.map[a].data.color="value"in l?s:r[t.NodeState.Waiting]})),i.value={elements:e}},layoutCytoscape:e=>{if(d){const t=d.nodes().map((e=>({id:e.id(),position:e.position()})));console.log(JSON.stringify(t)),localStorage.setItem("layoutData-"+e,JSON.stringify(t))}},loadLayout:e=>{const t=localStorage.getItem("layoutData-"+e);if(t){JSON.parse(t).forEach((e=>{if(d){const t=d.getElementById(e.id);t&&t.position(e.position)}}))}},zoomingEnabled:p}};
2	+ //# sourceMappingURL=bundle.cjs.min.js.map

package/lib/bundle.cjs.min.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"bundle.cjs.min.js","sources":["../src/composables/cytoscape.ts"],"sourcesContent":[null],"names":["cytoscape","use","klay","layout","colorStatic","cyStyle","selector","style","label","shape","ele","data","width","calcNodeWidth","Math","max","length","color","height","colorMap","NodeState","Waiting","Completed","Executing","Queued","Injected","TimedOut","Failed","Skipped","parseInput","input","ids","slice","split","source","shift","join","undefined","inputs2dataSources","inputs","Array","isArray","map","inp","flat","isObject","Object","values","templateMatch","from","matchAll","m","cytoscapeFromGraph","graph_data","elements","keys","nodes","reduce","tmp","nodeId","node","isStatic","cyNode","id","push","forEach","edges","target","update","isUpdate","sources","filter","selectedGraph","cy","cytoscapeData","ref","value","cytoscapeRef","zoomingEnabled","updateGraphData","async","remove","add","name","prevName","position","console","log","run","fit","sleep","storePositions","cynode","pos","watch","onMounted","container","on","error","createCytoscape","updateCytoscape","state","includes","graph","nodeData","priority","resetCytoscape","layoutCytoscape","key","positions","JSON","stringify","localStorage","setItem","loadLayout","savedLayoutData","getItem","parse","getElementById"],"mappings":"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"}

package/lib/bundle.esm.js ADDED Viewed

@@ -0,0 +1,288 @@
+import { ref, watch, onMounted } from 'vue';
+import { NodeState, isObject, sleep } from 'graphai';
+import cytoscape from 'cytoscape';
+import klay from 'cytoscape-klay';
+cytoscape.use(klay);
+const layout = "klay";
+const colorPriority = "#f80";
+const colorStatic = "#88f";
+const calcNodeWidth = (label) => {
+    if (label === null || label === undefined) {
+        return "50px";
+    }
+    return Math.max(50, label.length * 8) + "px";
+};
+const cyStyle = [
+    {
+        selector: "node",
+        style: {
+            "background-color": "data(color)",
+            label: "data(id)",
+            shape: (ele) => (ele.data("isStatic") ? "rectangle" : "roundrectangle"),
+            width: (ele) => calcNodeWidth(ele.data("id")),
+            color: "#fff",
+            height: "30px",
+            "text-valign": "center",
+            "text-halign": "center",
+            "font-size": "12px",
+        },
+    },
+    {
+        selector: "edge",
+        style: {
+            width: 3,
+            "line-color": "#888",
+            "target-arrow-color": "#888",
+            "target-arrow-shape": "triangle",
+            "curve-style": "straight",
+            "text-background-color": "#ffffff",
+            "text-background-opacity": 0.8,
+            "text-background-shape": "rectangle",
+            "font-size": "10px",
+        },
+    },
+    {
+        selector: "edge[label]",
+        style: {
+            label: "data(label)",
+        },
+    },
+    {
+        selector: "edge[isUpdate]",
+        style: {
+            color: "#ddd",
+            "line-color": "#ddd",
+            "line-style": "dashed",
+            "curve-style": "unbundled-bezier",
+            "target-arrow-color": "#ddd",
+        },
+    },
+];
+const colorMap = {
+    [NodeState.Waiting]: "#888",
+    [NodeState.Completed]: "#000",
+    [NodeState.Executing]: "#0f0",
+    ["executing-server"]: "#FFC0CB",
+    [NodeState.Queued]: "#ff0",
+    [NodeState.Injected]: "#00f",
+    [NodeState.TimedOut]: "#f0f",
+    [NodeState.Failed]: "#f00",
+    [NodeState.Skipped]: "#0ff",
+};
+const parseInput = (input) => {
+    // WARNING: Assuming the first character is always ":"
+    const ids = input.slice(1).split(".");
+    const source = ids.shift() || "";
+    const label = ids.length ? ids.join(".") : undefined;
+    return { source, label };
+};
+const inputs2dataSources = (inputs) => {
+    if (Array.isArray(inputs)) {
+        return inputs.map((inp) => inputs2dataSources(inp)).flat();
+    }
+    if (isObject(inputs)) {
+        return Object.values(inputs)
+            .map((input) => inputs2dataSources(input))
+            .flat();
+    }
+    if (typeof inputs === "string") {
+        const templateMatch = Array.from(inputs.matchAll(/\${(:[^}]+)}/g)).map((m) => m[1]);
+        if (templateMatch.length > 0) {
+            return inputs2dataSources(templateMatch);
+        }
+    }
+    return inputs;
+};
+const dataSourceNodeIds = (sources) => {
+    return sources.filter((source) => source.nodeId).map((source) => source.nodeId);
+};
+const cytoscapeFromGraph = (graph_data) => {
+    const elements = Object.keys(graph_data.nodes || {}).reduce((tmp, nodeId) => {
+        const node = graph_data.nodes[nodeId];
+        const isStatic = "value" in node;
+        const cyNode = {
+            data: {
+                id: nodeId,
+                color: isStatic ? colorStatic : colorMap[NodeState.Waiting],
+                isStatic,
+            },
+        };
+        tmp.nodes.push(cyNode);
+        tmp.map[nodeId] = cyNode;
+        if ("inputs" in node) {
+            // computed node
+            inputs2dataSources(node.inputs).forEach((input) => {
+                if (input[0] === ":") {
+                    const { source, label } = parseInput(input);
+                    tmp.edges.push({
+                        data: {
+                            source,
+                            target: nodeId,
+                            label,
+                        },
+                    });
+                }
+            });
+        }
+        if ("update" in node && node.update) {
+            // static node
+            const { source, label } = parseInput(node.update);
+            tmp.edges.push({
+                data: {
+                    source,
+                    target: nodeId,
+                    isUpdate: true,
+                    label,
+                },
+            });
+        }
+        return tmp;
+    }, { nodes: [], edges: [], map: {} });
+    return { elements };
+};
+const useCytoscape = (selectedGraph) => {
+    let cy = null;
+    const cytoscapeData = ref(cytoscapeFromGraph(selectedGraph.value ?? { nodes: {} }));
+    const cytoscapeRef = ref();
+    const zoomingEnabled = ref(true);
+    const updateCytoscape = async (nodeId, state) => {
+        if ([NodeState.Completed, NodeState.Waiting].includes(state)) {
+            await sleep(100);
+        }
+        const elements = cytoscapeData.value.elements;
+        elements.map[nodeId].data.color = colorMap[state];
+        const graph = selectedGraph.value;
+        const nodeData = (graph?.nodes ?? {})[nodeId] ?? [];
+        if ("agent" in nodeData && state === NodeState.Queued && (nodeData.priority ?? 0) > 0) {
+            // computed node
+            elements.map[nodeId].data.color = colorPriority;
+        }
+        else if ("value" in nodeData && state === NodeState.Waiting) {
+            // static node
+            elements.map[nodeId].data.color = colorStatic;
+        }
+        cytoscapeData.value = { elements };
+        if (state === NodeState.Injected) {
+            await sleep(100);
+            elements.map[nodeId].data.color = colorStatic;
+            cytoscapeData.value = { elements };
+        }
+    };
+    const createCytoscape = () => {
+        try {
+            cy = cytoscape({
+                container: cytoscapeRef.value,
+                style: cyStyle,
+                layout: {
+                    name: layout,
+                    // fit: true,
+                    // padding: 30,
+                    // avoidOverlap: true,
+                },
+            });
+            cy.on("mouseup", storePositions);
+            cy.on("touchend", storePositions);
+            // cy.on("select", "node", callback);
+            // cy.on("select", "edge", callback);
+            //store.commit("setCytoscape", cy);
+        }
+        catch (error) {
+            console.error(error);
+            // store.commit("setCytoscape", null);
+            // error_msg.value = `${error}`;
+        }
+    };
+    const updateGraphData = async () => {
+        if (cy) {
+            cy.elements().remove();
+            cy.add(cytoscapeData.value.elements);
+            const name = cytoscapeData.value.elements.nodes.reduce((prevName, node) => {
+                if (node.position) {
+                    return "preset";
+                }
+                return prevName;
+            }, layout);
+            console.log("layout", name);
+            cy.layout({ name }).run();
+            cy.fit();
+            if (name === layout) {
+                await sleep(400);
+                storePositions();
+            }
+        }
+    };
+    const storePositions = () => {
+        console.log("storePositions");
+        if (cy) {
+            cy.nodes().forEach((cynode) => {
+                const id = cynode.id();
+                const pos = cynode.position();
+                const node = cytoscapeData.value.elements.map[id];
+                node.position = pos;
+            });
+        }
+    };
+    const resetCytoscape = () => {
+        const elements = cytoscapeData.value.elements;
+        Object.keys(elements.map).forEach((nodeId) => {
+            const graph = selectedGraph.value;
+            const nodeData = graph.nodes[nodeId];
+            elements.map[nodeId].data.color = "value" in nodeData ? colorStatic : colorMap[NodeState.Waiting];
+        });
+        cytoscapeData.value = { elements };
+    };
+    watch(cytoscapeData, () => {
+        console.log("updated");
+        updateGraphData();
+    });
+    watch(selectedGraph, () => {
+        cytoscapeData.value = cytoscapeFromGraph(selectedGraph.value);
+    });
+    onMounted(() => {
+        createCytoscape();
+        updateGraphData();
+    });
+    const layoutCytoscape = (key) => {
+        if (cy) {
+            const positions = cy.nodes().map((node) => {
+                return {
+                    id: node.id(),
+                    position: node.position(),
+                };
+            });
+            console.log(JSON.stringify(positions));
+            localStorage.setItem("layoutData-" + key, JSON.stringify(positions));
+        }
+    };
+    const loadLayout = (key) => {
+        const savedLayoutData = localStorage.getItem("layoutData-" + key);
+        if (savedLayoutData) {
+            const positions = JSON.parse(savedLayoutData);
+            positions.forEach((data) => {
+                if (cy) {
+                    const node = cy.getElementById(data.id);
+                    if (node) {
+                        node.position(data.position);
+                    }
+                }
+            });
+        }
+    };
+    watch(zoomingEnabled, (value) => {
+        if (cy) {
+            cy.zoomingEnabled(value);
+        }
+    });
+    return {
+        cytoscapeRef,
+        updateCytoscape,
+        resetCytoscape,
+        layoutCytoscape,
+        loadLayout,
+        zoomingEnabled,
+    };
+};
+export { dataSourceNodeIds, inputs2dataSources, useCytoscape };
+//# sourceMappingURL=bundle.esm.js.map

package/lib/bundle.esm.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"bundle.esm.js","sources":["../src/composables/cytoscape.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAQA,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC;AACnB,MAAM,MAAM,GAAG,MAAM;AAErB,MAAM,aAAa,GAAG,MAAM;AAC5B,MAAM,WAAW,GAAG,MAAM;AAE1B,MAAM,aAAa,GAAG,CAAC,KAAa,KAAI;IACtC,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS,EAAE;AACzC,QAAA,OAAO,MAAM;;AAEf,IAAA,OAAO,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,GAAG,IAAI;AAC9C,CAAC;AAED,MAAM,OAAO,GAAG;AACd,IAAA;AACE,QAAA,QAAQ,EAAE,MAAM;AAChB,QAAA,KAAK,EAAE;AACL,YAAA,kBAAkB,EAAE,aAAa;AACjC,YAAA,KAAK,EAAE,UAAU;YACjB,KAAK,EAAE,CAAC,GAAiB,MAAM,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,WAAW,GAAG,gBAAgB,CAAC;AACrF,YAAA,KAAK,EAAE,CAAC,GAAiB,KAAK,aAAa,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAC3D,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,MAAM,EAAE,MAAM;AACd,YAAA,aAAa,EAAE,QAAiB;AAChC,YAAA,aAAa,EAAE,QAAiB;AAChC,YAAA,WAAW,EAAE,MAAM;AACpB,SAAA;AACF,KAAA;AACD,IAAA;AACE,QAAA,QAAQ,EAAE,MAAM;AAChB,QAAA,KAAK,EAAE;AACL,YAAA,KAAK,EAAE,CAAC;AACR,YAAA,YAAY,EAAE,MAAM;AACpB,YAAA,oBAAoB,EAAE,MAAM;AAC5B,YAAA,oBAAoB,EAAE,UAAU;AAChC,YAAA,aAAa,EAAE,UAAmB;AAClC,YAAA,uBAAuB,EAAE,SAAS;AAClC,YAAA,yBAAyB,EAAE,GAAG;AAC9B,YAAA,uBAAuB,EAAE,WAAoB;AAC7C,YAAA,WAAW,EAAE,MAAM;AACpB,SAAA;AACF,KAAA;AACD,IAAA;AACE,QAAA,QAAQ,EAAE,aAAa;AACvB,QAAA,KAAK,EAAE;AACL,YAAA,KAAK,EAAE,aAAa;AACrB,SAAA;AACF,KAAA;AACD,IAAA;AACE,QAAA,QAAQ,EAAE,gBAAgB;AAC1B,QAAA,KAAK,EAAE;AACL,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,YAAY,EAAE,MAAM;AACpB,YAAA,YAAY,EAAE,QAAQ;AACtB,YAAA,aAAa,EAAE,kBAA2B;AAC1C,YAAA,oBAAoB,EAAE,MAAM;AAC7B,SAAA;AACF,KAAA;CACF;AAED,MAAM,QAAQ,GAAG;AACf,IAAA,CAAC,SAAS,CAAC,OAAO,GAAG,MAAM;AAC3B,IAAA,CAAC,SAAS,CAAC,SAAS,GAAG,MAAM;AAC7B,IAAA,CAAC,SAAS,CAAC,SAAS,GAAG,MAAM;IAC7B,CAAC,kBAAkB,GAAG,SAAS;AAC/B,IAAA,CAAC,SAAS,CAAC,MAAM,GAAG,MAAM;AAC1B,IAAA,CAAC,SAAS,CAAC,QAAQ,GAAG,MAAM;AAC5B,IAAA,CAAC,SAAS,CAAC,QAAQ,GAAG,MAAM;AAC5B,IAAA,CAAC,SAAS,CAAC,MAAM,GAAG,MAAM;AAC1B,IAAA,CAAC,SAAS,CAAC,OAAO,GAAG,MAAM;CAC5B;AAED,MAAM,UAAU,GAAG,CAAC,KAAa,KAAI;;AAEnC,IAAA,MAAM,GAAG,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC;IACrC,MAAM,MAAM,GAAG,GAAG,CAAC,KAAK,EAAE,IAAI,EAAE;AAChC,IAAA,MAAM,KAAK,GAAG,GAAG,CAAC,MAAM,GAAG,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,SAAS;AACpD,IAAA,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE;AAC1B,CAAC;AAEY,MAAA,kBAAkB,GAAG,CAAC,MAAW,KAAc;AAC1D,IAAA,IAAI,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE;AACzB,QAAA,OAAO,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,KAAK,kBAAkB,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE;;AAE5D,IAAA,IAAI,QAAQ,CAAC,MAAM,CAAC,EAAE;AACpB,QAAA,OAAO,MAAM,CAAC,MAAM,CAAC,MAAM;aACxB,GAAG,CAAC,CAAC,KAAK,KAAK,kBAAkB,CAAC,KAAK,CAAC;AACxC,aAAA,IAAI,EAAE;;AAEX,IAAA,IAAI,OAAO,MAAM,KAAK,QAAQ,EAAE;QAC9B,MAAM,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;AACnF,QAAA,IAAI,aAAa,CAAC,MAAM,GAAG,CAAC,EAAE;AAC5B,YAAA,OAAO,kBAAkB,CAAC,aAAa,CAAC;;;AAG5C,IAAA,OAAO,MAAM;AACf;AAEa,MAAA,iBAAiB,GAAG,CAAC,OAAqB,KAAc;IACnE,OAAO,OAAO,CAAC,MAAM,CAAC,CAAC,MAAkB,KAAK,MAAM,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,MAAM,KAAK,MAAM,CAAC,MAAO,CAAC;AAC9F;AAEA,MAAM,kBAAkB,GAAG,CAAC,UAAqB,KAAI;IACnD,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,MAAM,CACzD,CACE,GAIC,EACD,MAAM,KACJ;QACF,MAAM,IAAI,GAAa,UAAU,CAAC,KAAK,CAAC,MAAM,CAAC;AAC/C,QAAA,MAAM,QAAQ,GAAG,OAAO,IAAI,IAAI;AAChC,QAAA,MAAM,MAAM,GAAG;AACb,YAAA,IAAI,EAAE;AACJ,gBAAA,EAAE,EAAE,MAAM;AACV,gBAAA,KAAK,EAAE,QAAQ,GAAG,WAAW,GAAG,QAAQ,CAAC,SAAS,CAAC,OAAO,CAAC;gBAC3D,QAAQ;AACT,aAAA;SACF;AACD,QAAA,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC;AACtB,QAAA,GAAG,CAAC,GAAG,CAAC,MAAM,CAAC,GAAG,MAAM;AACxB,QAAA,IAAI,QAAQ,IAAI,IAAI,EAAE;;YAEpB,kBAAkB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,KAAa,KAAI;AACxD,gBAAA,IAAI,KAAK,CAAC,CAAC,CAAC,KAAK,GAAG,EAAE;oBACpB,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,UAAU,CAAC,KAAK,CAAC;AAC3C,oBAAA,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC;AACb,wBAAA,IAAI,EAAE;4BACJ,MAAM;AACN,4BAAA,MAAM,EAAE,MAAM;4BACd,KAAK;AACN,yBAAA;AACF,qBAAA,CAAC;;AAEN,aAAC,CAAC;;QAEJ,IAAI,QAAQ,IAAI,IAAI,IAAI,IAAI,CAAC,MAAM,EAAE;;AAEnC,YAAA,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC;AACjD,YAAA,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC;AACb,gBAAA,IAAI,EAAE;oBACJ,MAAM;AACN,oBAAA,MAAM,EAAE,MAAM;AACd,oBAAA,QAAQ,EAAE,IAAI;oBACd,KAAK;AACN,iBAAA;AACF,aAAA,CAAC;;AAEJ,QAAA,OAAO,GAAG;AACZ,KAAC,EACD,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,CAClC;IACD,OAAO,EAAE,QAAQ,EAAE;AACrB,CAAC;AAEY,MAAA,YAAY,GAAG,CAAC,aAAsD,KAAI;IACrF,IAAI,EAAE,GAAgB,IAAI;AAE1B,IAAA,MAAM,aAAa,GAAG,GAAG,CAAC,kBAAkB,CAAC,aAAa,CAAC,KAAK,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;AACnF,IAAA,MAAM,YAAY,GAAG,GAAG,EAAE;AAC1B,IAAA,MAAM,cAAc,GAAG,GAAG,CAAC,IAAI,CAAC;IAEhC,MAAM,eAAe,GAAG,OAAO,MAAc,EAAE,KAAgB,KAAI;AACjE,QAAA,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE;AAC5D,YAAA,MAAM,KAAK,CAAC,GAAG,CAAC;;AAElB,QAAA,MAAM,QAAQ,GAAG,aAAa,CAAC,KAAK,CAAC,QAAQ;AAC7C,QAAA,QAAQ,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC;AACjD,QAAA,MAAM,KAAK,GAAG,aAAa,CAAC,KAAK;AACjC,QAAA,MAAM,QAAQ,GAAG,CAAC,KAAK,EAAE,KAAK,IAAI,EAAE,EAAE,MAAM,CAAC,IAAI,EAAE;QACnD,IAAI,OAAO,IAAI,QAAQ,IAAI,KAAK,KAAK,SAAS,CAAC,MAAM,IAAI,CAAC,QAAQ,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,EAAE;;YAErF,QAAQ,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,aAAa;;aAC1C,IAAI,OAAO,IAAI,QAAQ,IAAI,KAAK,KAAK,SAAS,CAAC,OAAO,EAAE;;YAE7D,QAAQ,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,WAAW;;AAG/C,QAAA,aAAa,CAAC,KAAK,GAAG,EAAE,QAAQ,EAAE;AAClC,QAAA,IAAI,KAAK,KAAK,SAAS,CAAC,QAAQ,EAAE;AAChC,YAAA,MAAM,KAAK,CAAC,GAAG,CAAC;YAChB,QAAQ,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,WAAW;AAC7C,YAAA,aAAa,CAAC,KAAK,GAAG,EAAE,QAAQ,EAAE;;AAEtC,KAAC;IAED,MAAM,eAAe,GAAG,MAAK;AAC3B,QAAA,IAAI;YACF,EAAE,GAAG,SAAS,CAAC;gBACb,SAAS,EAAE,YAAY,CAAC,KAAK;AAC7B,gBAAA,KAAK,EAAE,OAAO;AACd,gBAAA,MAAM,EAAE;AACN,oBAAA,IAAI,EAAE,MAAM;;;;AAIb,iBAAA;AACF,aAAA,CAAC;AACF,YAAA,EAAE,CAAC,EAAE,CAAC,SAAS,EAAE,cAAc,CAAC;AAChC,YAAA,EAAE,CAAC,EAAE,CAAC,UAAU,EAAE,cAAc,CAAC;;;;;QAIjC,OAAO,KAAK,EAAE;AACd,YAAA,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC;;;;AAIxB,KAAC;AACD,IAAA,MAAM,eAAe,GAAG,YAAW;QACjC,IAAI,EAAE,EAAE;AACN,YAAA,EAAE,CAAC,QAAQ,EAAE,CAAC,MAAM,EAAE;YACtB,EAAE,CAAC,GAAG,CAAC,aAAa,CAAC,KAAK,CAAC,QAAQ,CAAC;AACpC,YAAA,MAAM,IAAI,GAAG,aAAa,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,QAAgB,EAAE,IAAoB,KAAI;AAChG,gBAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACjB,oBAAA,OAAO,QAAQ;;AAEjB,gBAAA,OAAO,QAAQ;aAChB,EAAE,MAAM,CAAC;AACV,YAAA,OAAO,CAAC,GAAG,CAAC,QAAQ,EAAE,IAAI,CAAC;YAC3B,EAAE,CAAC,MAAM,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,GAAG,EAAE;YACzB,EAAE,CAAC,GAAG,EAAE;AACR,YAAA,IAAI,IAAI,KAAK,MAAM,EAAE;AACnB,gBAAA,MAAM,KAAK,CAAC,GAAG,CAAC;AAChB,gBAAA,cAAc,EAAE;;;AAGtB,KAAC;IAED,MAAM,cAAc,GAAG,MAAK;AAC1B,QAAA,OAAO,CAAC,GAAG,CAAC,gBAAgB,CAAC;QAC7B,IAAI,EAAE,EAAE;YACN,EAAE,CAAC,KAAK,EAAE,CAAC,OAAO,CAAC,CAAC,MAAoB,KAAI;AAC1C,gBAAA,MAAM,EAAE,GAAG,MAAM,CAAC,EAAE,EAAE;AACtB,gBAAA,MAAM,GAAG,GAAG,MAAM,CAAC,QAAQ,EAAE;AAC7B,gBAAA,MAAM,IAAI,GAAG,aAAa,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;AACjD,gBAAA,IAAI,CAAC,QAAQ,GAAG,GAAG;AACrB,aAAC,CAAC;;AAEN,KAAC;IAED,MAAM,cAAc,GAAG,MAAK;AAC1B,QAAA,MAAM,QAAQ,GAAG,aAAa,CAAC,KAAK,CAAC,QAAQ;AAC7C,QAAA,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,MAAM,KAAI;AAC3C,YAAA,MAAM,KAAK,GAAG,aAAa,CAAC,KAAK;YACjC,MAAM,QAAQ,GAAG,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC;YACpC,QAAQ,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,OAAO,IAAI,QAAQ,GAAG,WAAW,GAAG,QAAQ,CAAC,SAAS,CAAC,OAAO,CAAC;AACnG,SAAC,CAAC;AACF,QAAA,aAAa,CAAC,KAAK,GAAG,EAAE,QAAQ,EAAE;AACpC,KAAC;AAED,IAAA,KAAK,CAAC,aAAa,EAAE,MAAK;AACxB,QAAA,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC;AACtB,QAAA,eAAe,EAAE;AACnB,KAAC,CAAC;AAEF,IAAA,KAAK,CAAC,aAAa,EAAE,MAAK;QACxB,aAAa,CAAC,KAAK,GAAG,kBAAkB,CAAC,aAAa,CAAC,KAAK,CAAC;AAC/D,KAAC,CAAC;IAEF,SAAS,CAAC,MAAK;AACb,QAAA,eAAe,EAAE;AACjB,QAAA,eAAe,EAAE;AACnB,KAAC,CAAC;AAEF,IAAA,MAAM,eAAe,GAAG,CAAC,GAAW,KAAI;QACtC,IAAI,EAAE,EAAE;AACN,YAAA,MAAM,SAAS,GAAG,EAAE,CAAC,KAAK,EAAE,CAAC,GAAG,CAAC,CAAC,IAAI,KAAI;gBACxC,OAAO;AACL,oBAAA,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE;AACb,oBAAA,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE;iBAC1B;AACH,aAAC,CAAC;YACF,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;AACtC,YAAA,YAAY,CAAC,OAAO,CAAC,aAAa,GAAG,GAAG,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;;AAExE,KAAC;AAED,IAAA,MAAM,UAAU,GAAG,CAAC,GAAW,KAAI;QACjC,MAAM,eAAe,GAAG,YAAY,CAAC,OAAO,CAAC,aAAa,GAAG,GAAG,CAAC;QACjE,IAAI,eAAe,EAAE;YACnB,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC;AAC7C,YAAA,SAAS,CAAC,OAAO,CAAC,CAAC,IAAwC,KAAI;gBAC7D,IAAI,EAAE,EAAE;oBACN,MAAM,IAAI,GAAG,EAAE,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,CAAC;oBACvC,IAAI,IAAI,EAAE;AACR,wBAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC;;;AAGlC,aAAC,CAAC;;AAEN,KAAC;AAED,IAAA,KAAK,CAAC,cAAc,EAAE,CAAC,KAAK,KAAI;QAC9B,IAAI,EAAE,EAAE;AACN,YAAA,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC;;AAE5B,KAAC,CAAC;IAEF,OAAO;QACL,YAAY;QACZ,eAAe;QACf,cAAc;QAEd,eAAe;QACf,UAAU;QAEV,cAAc;KACf;AACH;;;;"}

package/lib/bundle.esm.min.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{ref as e,watch as t,onMounted as a}from"vue";import{NodeState as o,isObject as l,sleep as n}from"graphai";import s from"cytoscape";import r from"cytoscape-klay";s.use(r);const i="klay",c="#88f",d=[{selector:"node",style:{"background-color":"data(color)",label:"data(id)",shape:e=>e.data("isStatic")?"rectangle":"roundrectangle",width:e=>{return null==(t=e.data("id"))?"50px":Math.max(50,8*t.length)+"px";var t},color:"#fff",height:"30px","text-valign":"center","text-halign":"center","font-size":"12px"}},{selector:"edge",style:{width:3,"line-color":"#888","target-arrow-color":"#888","target-arrow-shape":"triangle","curve-style":"straight","text-background-color":"#ffffff","text-background-opacity":.8,"text-background-shape":"rectangle","font-size":"10px"}},{selector:"edge[label]",style:{label:"data(label)"}},{selector:"edge[isUpdate]",style:{color:"#ddd","line-color":"#ddd","line-style":"dashed","curve-style":"unbundled-bezier","target-arrow-color":"#ddd"}}],u={[o.Waiting]:"#888",[o.Completed]:"#000",[o.Executing]:"#0f0","executing-server":"#FFC0CB",[o.Queued]:"#ff0",[o.Injected]:"#00f",[o.TimedOut]:"#f0f",[o.Failed]:"#f00",[o.Skipped]:"#0ff"},p=e=>{const t=e.slice(1).split(".");return{source:t.shift()\|\|"",label:t.length?t.join("."):void 0}},f=e=>{if(Array.isArray(e))return e.map((e=>f(e))).flat();if(l(e))return Object.values(e).map((e=>f(e))).flat();if("string"==typeof e){const t=Array.from(e.matchAll(/\${(:[^}]+)}/g)).map((e=>e[1]));if(t.length>0)return f(t)}return e},g=e=>e.filter((e=>e.nodeId)).map((e=>e.nodeId)),m=e=>({elements:Object.keys(e.nodes\|\|{}).reduce(((t,a)=>{const l=e.nodes[a],n="value"in l,s={data:{id:a,color:n?c:u[o.Waiting],isStatic:n}};if(t.nodes.push(s),t.map[a]=s,"inputs"in l&&f(l.inputs).forEach((e=>{if(":"===e[0]){const{source:o,label:l}=p(e);t.edges.push({data:{source:o,target:a,label:l}})}})),"update"in l&&l.update){const{source:e,label:o}=p(l.update);t.edges.push({data:{source:e,target:a,isUpdate:!0,label:o}})}return t}),{nodes:[],edges:[],map:{}})}),y=l=>{let r=null;const p=e(m(l.value??{nodes:{}})),f=e(),g=e(!0),y=async()=>{if(r){r.elements().remove(),r.add(p.value.elements);const e=p.value.elements.nodes.reduce(((e,t)=>t.position?"preset":e),i);console.log("layout",e),r.layout({name:e}).run(),r.fit(),e===i&&(await n(400),h())}},h=()=>{console.log("storePositions"),r&&r.nodes().forEach((e=>{const t=e.id(),a=e.position();p.value.elements.map[t].position=a}))};t(p,(()=>{console.log("updated"),y()})),t(l,(()=>{p.value=m(l.value)})),a((()=>{(()=>{try{r=s({container:f.value,style:d,layout:{name:i}}),r.on("mouseup",h),r.on("touchend",h)}catch(e){console.error(e)}})(),y()}));return t(g,(e=>{r&&r.zoomingEnabled(e)})),{cytoscapeRef:f,updateCytoscape:async(e,t)=>{[o.Completed,o.Waiting].includes(t)&&await n(100);const a=p.value.elements;a.map[e].data.color=u[t];const s=l.value,r=(s?.nodes??{})[e]??[];"agent"in r&&t===o.Queued&&(r.priority??0)>0?a.map[e].data.color="#f80":"value"in r&&t===o.Waiting&&(a.map[e].data.color=c),p.value={elements:a},t===o.Injected&&(await n(100),a.map[e].data.color=c,p.value={elements:a})},resetCytoscape:()=>{const e=p.value.elements;Object.keys(e.map).forEach((t=>{const a=l.value.nodes[t];e.map[t].data.color="value"in a?c:u[o.Waiting]})),p.value={elements:e}},layoutCytoscape:e=>{if(r){const t=r.nodes().map((e=>({id:e.id(),position:e.position()})));console.log(JSON.stringify(t)),localStorage.setItem("layoutData-"+e,JSON.stringify(t))}},loadLayout:e=>{const t=localStorage.getItem("layoutData-"+e);if(t){JSON.parse(t).forEach((e=>{if(r){const t=r.getElementById(e.id);t&&t.position(e.position)}}))}},zoomingEnabled:g}};export{g as dataSourceNodeIds,f as inputs2dataSources,y as useCytoscape};
2	+ //# sourceMappingURL=bundle.esm.min.js.map

package/lib/bundle.esm.min.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"bundle.esm.min.js","sources":["../src/composables/cytoscape.ts"],"sourcesContent":[null],"names":["cytoscape","use","klay","layout","colorStatic","cyStyle","selector","style","label","shape","ele","data","width","calcNodeWidth","Math","max","length","color","height","colorMap","NodeState","Waiting","Completed","Executing","Queued","Injected","TimedOut","Failed","Skipped","parseInput","input","ids","slice","split","source","shift","join","undefined","inputs2dataSources","inputs","Array","isArray","map","inp","flat","isObject","Object","values","templateMatch","from","matchAll","m","dataSourceNodeIds","sources","filter","nodeId","cytoscapeFromGraph","graph_data","elements","keys","nodes","reduce","tmp","node","isStatic","cyNode","id","push","forEach","edges","target","update","isUpdate","useCytoscape","selectedGraph","cy","cytoscapeData","ref","value","cytoscapeRef","zoomingEnabled","updateGraphData","async","remove","add","name","prevName","position","console","log","run","fit","sleep","storePositions","cynode","pos","watch","onMounted","container","on","error","createCytoscape","updateCytoscape","state","includes","graph","nodeData","priority","resetCytoscape","layoutCytoscape","key","positions","JSON","stringify","localStorage","setItem","loadLayout","savedLayoutData","getItem","parse","getElementById"],"mappings":"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"}

package/lib/bundle.umd.js ADDED Viewed

@@ -0,0 +1,293 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('graphai'), require('cytoscape'), require('cytoscape-klay')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'vue', 'graphai', 'cytoscape', 'cytoscape-klay'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.vue_cytoscape = {}, global.vue, global.graphai, global.cytoscape, global.klay));
+})(this, (function (exports, vue, graphai, cytoscape, klay) { 'use strict';
+    cytoscape.use(klay);
+    const layout = "klay";
+    const colorPriority = "#f80";
+    const colorStatic = "#88f";
+    const calcNodeWidth = (label) => {
+        if (label === null || label === undefined) {
+            return "50px";
+        }
+        return Math.max(50, label.length * 8) + "px";
+    };
+    const cyStyle = [
+        {
+            selector: "node",
+            style: {
+                "background-color": "data(color)",
+                label: "data(id)",
+                shape: (ele) => (ele.data("isStatic") ? "rectangle" : "roundrectangle"),
+                width: (ele) => calcNodeWidth(ele.data("id")),
+                color: "#fff",
+                height: "30px",
+                "text-valign": "center",
+                "text-halign": "center",
+                "font-size": "12px",
+            },
+        },
+        {
+            selector: "edge",
+            style: {
+                width: 3,
+                "line-color": "#888",
+                "target-arrow-color": "#888",
+                "target-arrow-shape": "triangle",
+                "curve-style": "straight",
+                "text-background-color": "#ffffff",
+                "text-background-opacity": 0.8,
+                "text-background-shape": "rectangle",
+                "font-size": "10px",
+            },
+        },
+        {
+            selector: "edge[label]",
+            style: {
+                label: "data(label)",
+            },
+        },
+        {
+            selector: "edge[isUpdate]",
+            style: {
+                color: "#ddd",
+                "line-color": "#ddd",
+                "line-style": "dashed",
+                "curve-style": "unbundled-bezier",
+                "target-arrow-color": "#ddd",
+            },
+        },
+    ];
+    const colorMap = {
+        [graphai.NodeState.Waiting]: "#888",
+        [graphai.NodeState.Completed]: "#000",
+        [graphai.NodeState.Executing]: "#0f0",
+        ["executing-server"]: "#FFC0CB",
+        [graphai.NodeState.Queued]: "#ff0",
+        [graphai.NodeState.Injected]: "#00f",
+        [graphai.NodeState.TimedOut]: "#f0f",
+        [graphai.NodeState.Failed]: "#f00",
+        [graphai.NodeState.Skipped]: "#0ff",
+    };
+    const parseInput = (input) => {
+        // WARNING: Assuming the first character is always ":"
+        const ids = input.slice(1).split(".");
+        const source = ids.shift() || "";
+        const label = ids.length ? ids.join(".") : undefined;
+        return { source, label };
+    };
+    const inputs2dataSources = (inputs) => {
+        if (Array.isArray(inputs)) {
+            return inputs.map((inp) => inputs2dataSources(inp)).flat();
+        }
+        if (graphai.isObject(inputs)) {
+            return Object.values(inputs)
+                .map((input) => inputs2dataSources(input))
+                .flat();
+        }
+        if (typeof inputs === "string") {
+            const templateMatch = Array.from(inputs.matchAll(/\${(:[^}]+)}/g)).map((m) => m[1]);
+            if (templateMatch.length > 0) {
+                return inputs2dataSources(templateMatch);
+            }
+        }
+        return inputs;
+    };
+    const dataSourceNodeIds = (sources) => {
+        return sources.filter((source) => source.nodeId).map((source) => source.nodeId);
+    };
+    const cytoscapeFromGraph = (graph_data) => {
+        const elements = Object.keys(graph_data.nodes || {}).reduce((tmp, nodeId) => {
+            const node = graph_data.nodes[nodeId];
+            const isStatic = "value" in node;
+            const cyNode = {
+                data: {
+                    id: nodeId,
+                    color: isStatic ? colorStatic : colorMap[graphai.NodeState.Waiting],
+                    isStatic,
+                },
+            };
+            tmp.nodes.push(cyNode);
+            tmp.map[nodeId] = cyNode;
+            if ("inputs" in node) {
+                // computed node
+                inputs2dataSources(node.inputs).forEach((input) => {
+                    if (input[0] === ":") {
+                        const { source, label } = parseInput(input);
+                        tmp.edges.push({
+                            data: {
+                                source,
+                                target: nodeId,
+                                label,
+                            },
+                        });
+                    }
+                });
+            }
+            if ("update" in node && node.update) {
+                // static node
+                const { source, label } = parseInput(node.update);
+                tmp.edges.push({
+                    data: {
+                        source,
+                        target: nodeId,
+                        isUpdate: true,
+                        label,
+                    },
+                });
+            }
+            return tmp;
+        }, { nodes: [], edges: [], map: {} });
+        return { elements };
+    };
+    const useCytoscape = (selectedGraph) => {
+        let cy = null;
+        const cytoscapeData = vue.ref(cytoscapeFromGraph(selectedGraph.value ?? { nodes: {} }));
+        const cytoscapeRef = vue.ref();
+        const zoomingEnabled = vue.ref(true);
+        const updateCytoscape = async (nodeId, state) => {
+            if ([graphai.NodeState.Completed, graphai.NodeState.Waiting].includes(state)) {
+                await graphai.sleep(100);
+            }
+            const elements = cytoscapeData.value.elements;
+            elements.map[nodeId].data.color = colorMap[state];
+            const graph = selectedGraph.value;
+            const nodeData = (graph?.nodes ?? {})[nodeId] ?? [];
+            if ("agent" in nodeData && state === graphai.NodeState.Queued && (nodeData.priority ?? 0) > 0) {
+                // computed node
+                elements.map[nodeId].data.color = colorPriority;
+            }
+            else if ("value" in nodeData && state === graphai.NodeState.Waiting) {
+                // static node
+                elements.map[nodeId].data.color = colorStatic;
+            }
+            cytoscapeData.value = { elements };
+            if (state === graphai.NodeState.Injected) {
+                await graphai.sleep(100);
+                elements.map[nodeId].data.color = colorStatic;
+                cytoscapeData.value = { elements };
+            }
+        };
+        const createCytoscape = () => {
+            try {
+                cy = cytoscape({
+                    container: cytoscapeRef.value,
+                    style: cyStyle,
+                    layout: {
+                        name: layout,
+                        // fit: true,
+                        // padding: 30,
+                        // avoidOverlap: true,
+                    },
+                });
+                cy.on("mouseup", storePositions);
+                cy.on("touchend", storePositions);
+                // cy.on("select", "node", callback);
+                // cy.on("select", "edge", callback);
+                //store.commit("setCytoscape", cy);
+            }
+            catch (error) {
+                console.error(error);
+                // store.commit("setCytoscape", null);
+                // error_msg.value = `${error}`;
+            }
+        };
+        const updateGraphData = async () => {
+            if (cy) {
+                cy.elements().remove();
+                cy.add(cytoscapeData.value.elements);
+                const name = cytoscapeData.value.elements.nodes.reduce((prevName, node) => {
+                    if (node.position) {
+                        return "preset";
+                    }
+                    return prevName;
+                }, layout);
+                console.log("layout", name);
+                cy.layout({ name }).run();
+                cy.fit();
+                if (name === layout) {
+                    await graphai.sleep(400);
+                    storePositions();
+                }
+            }
+        };
+        const storePositions = () => {
+            console.log("storePositions");
+            if (cy) {
+                cy.nodes().forEach((cynode) => {
+                    const id = cynode.id();
+                    const pos = cynode.position();
+                    const node = cytoscapeData.value.elements.map[id];
+                    node.position = pos;
+                });
+            }
+        };
+        const resetCytoscape = () => {
+            const elements = cytoscapeData.value.elements;
+            Object.keys(elements.map).forEach((nodeId) => {
+                const graph = selectedGraph.value;
+                const nodeData = graph.nodes[nodeId];
+                elements.map[nodeId].data.color = "value" in nodeData ? colorStatic : colorMap[graphai.NodeState.Waiting];
+            });
+            cytoscapeData.value = { elements };
+        };
+        vue.watch(cytoscapeData, () => {
+            console.log("updated");
+            updateGraphData();
+        });
+        vue.watch(selectedGraph, () => {
+            cytoscapeData.value = cytoscapeFromGraph(selectedGraph.value);
+        });
+        vue.onMounted(() => {
+            createCytoscape();
+            updateGraphData();
+        });
+        const layoutCytoscape = (key) => {
+            if (cy) {
+                const positions = cy.nodes().map((node) => {
+                    return {
+                        id: node.id(),
+                        position: node.position(),
+                    };
+                });
+                console.log(JSON.stringify(positions));
+                localStorage.setItem("layoutData-" + key, JSON.stringify(positions));
+            }
+        };
+        const loadLayout = (key) => {
+            const savedLayoutData = localStorage.getItem("layoutData-" + key);
+            if (savedLayoutData) {
+                const positions = JSON.parse(savedLayoutData);
+                positions.forEach((data) => {
+                    if (cy) {
+                        const node = cy.getElementById(data.id);
+                        if (node) {
+                            node.position(data.position);
+                        }
+                    }
+                });
+            }
+        };
+        vue.watch(zoomingEnabled, (value) => {
+            if (cy) {
+                cy.zoomingEnabled(value);
+            }
+        });
+        return {
+            cytoscapeRef,
+            updateCytoscape,
+            resetCytoscape,
+            layoutCytoscape,
+            loadLayout,
+            zoomingEnabled,
+        };
+    };
+    exports.dataSourceNodeIds = dataSourceNodeIds;
+    exports.inputs2dataSources = inputs2dataSources;
+    exports.useCytoscape = useCytoscape;
+}));
+//# sourceMappingURL=bundle.umd.js.map

package/lib/bundle.umd.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"bundle.umd.js","sources":["../src/composables/cytoscape.ts"],"sourcesContent":[null],"names":["NodeState","isObject","ref","sleep","watch","onMounted"],"mappings":"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"}

package/lib/cytoscape.d.ts CHANGED Viewed

@@ -7,4 +7,7 @@ export declare const useCytoscape: (selectedGraph: ComputedRef<GraphData> | Ref<
     cytoscapeRef: Ref<any, any>;
     updateCytoscape: (nodeId: string, state: NodeState) => Promise<void>;
     resetCytoscape: () => void;
+    layoutCytoscape: (key: string) => void;
+    loadLayout: (key: string) => void;
+    zoomingEnabled: Ref<boolean, boolean>;
 };

package/lib/cytoscape.js CHANGED Viewed

@@ -114,7 +114,6 @@ var colorMap = (_a = {},
     _a);
 var parseInput = function (input) {
     // WARNING: Assuming the first character is always ":"
-    console.log(input);
     var ids = input.slice(1).split(".");
     var source = ids.shift() || "";
     var label = ids.length ? ids.join(".") : undefined;
@@ -191,6 +190,7 @@ var useCytoscape = function (selectedGraph) {
     var cy = null;
     var cytoscapeData = (0, vue_1.ref)(cytoscapeFromGraph((_a = selectedGraph.value) !== null && _a !== void 0 ? _a : { nodes: {} }));
     var cytoscapeRef = (0, vue_1.ref)();
+    var zoomingEnabled = (0, vue_1.ref)(true);
     var updateCytoscape = function (nodeId, state) { return __awaiter(void 0, void 0, void 0, function () {
         var elements, graph, nodeData;
         var _a, _b, _c;
@@ -309,10 +309,44 @@ var useCytoscape = function (selectedGraph) {
         createCytoscape();
         updateGraphData();
     });
+    var layoutCytoscape = function (key) {
+        if (cy) {
+            var positions = cy.nodes().map(function (node) {
+                return {
+                    id: node.id(),
+                    position: node.position(),
+                };
+            });
+            console.log(JSON.stringify(positions));
+            localStorage.setItem("layoutData-" + key, JSON.stringify(positions));
+        }
+    };
+    var loadLayout = function (key) {
+        var savedLayoutData = localStorage.getItem("layoutData-" + key);
+        if (savedLayoutData) {
+            var positions = JSON.parse(savedLayoutData);
+            positions.forEach(function (data) {
+                if (cy) {
+                    var node = cy.getElementById(data.id);
+                    if (node) {
+                        node.position(data.position);
+                    }
+                }
+            });
+        }
+    };
+    (0, vue_1.watch)(zoomingEnabled, function (value) {
+        if (cy) {
+            cy.zoomingEnabled(value);
+        }
+    });
     return {
         cytoscapeRef: cytoscapeRef,
         updateCytoscape: updateCytoscape,
         resetCytoscape: resetCytoscape,
+        layoutCytoscape: layoutCytoscape,
+        loadLayout: loadLayout,
+        zoomingEnabled: zoomingEnabled,
     };
 };
 exports.useCytoscape = useCytoscape;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@receptron/graphai_vue_cytoscape",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "main": "lib/cytoscape.js",
   "files": [
     "./lib"
@@ -11,6 +11,7 @@
     "build_old": "run-p type-check \"build-only {@}\" --",
     "preview": "vite preview",
     "build-only": "vite build",
+    "rollup": " npx rollup -c",
     "type-check": "vue-tsc --build --force",
     "test": "echo nothing",
     "eslint": "eslint src",
@@ -34,6 +35,7 @@
     "@babel/types": "^7.26.0",
     "@rushstack/eslint-patch": "^1.8.0",
     "@tsconfig/node20": "^20.1.4",
+    "@types/cytoscape-klay": "^3.1.4",
     "@vitejs/plugin-vue": "^5.1.4",
     "@vue/tsconfig": "^0.5.1",
     "autoprefixer": "^10.4.19",