@receptron/graphai_vue_cytoscape 0.0.1 → 0.0.3

package/README.md

@@ -0,0 +1,39 @@
+
+## Composable to show GraphAI state to Vue using cytoscape
+
+### install
+
+```sh
+yarn add @receptron/graphai_vue_cytoscape
+```
+
+### Usage
+
+
+```typescript
+import { defineComponent, ref } from "vue";
+
+import { GraphAI } from "graphai";
+import { useCytoscape } from "@receptron/graphai_vue_cytoscape";
+
+export default defineComponent({
+  setup() {
+    const selectdGraph = ref(graphData)
+    const { updateCytoscape, cytoscapeRef, resetCytoscape } = useCytoscape(selectdGraph);
+    
+    const run = async () => {
+      const graphai = new GraphAI(selectdGraph.value, agents);
+      graphai.onLogCallback = async ({ nodeId, state }) => {
+        updateCytoscape(nodeId, state);
+      };
+      await graphai.run();
+    }
+    run();
+
+    return {
+      cytoscapeRef
+    };
+  }
+});
+```
+

package/lib/cytoscape.d.ts

@@ -0,0 +1,7 @@
+import { Ref, ComputedRef } from "vue";
+import { GraphData, NodeState } from "graphai";
+export declare const useCytoscape: (selectedGraph: ComputedRef<GraphData> | Ref<GraphData>) => {
+    cytoscapeRef: Ref<any>;
+    updateCytoscape: (nodeId: string, state: NodeState) => Promise<void>;
+    resetCytoscape: () => void;
+};

package/lib/{cytoscope.js → cytoscape.js}

@@ -40,7 +40,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useCytoscope = void 0;
+exports.useCytoscape = void 0;
 var vue_1 = require("vue");
 var graphai_1 = require("graphai");
 var cytoscape_1 = __importDefault(require("cytoscape"));
@@ -120,7 +120,7 @@ var parseInput = function (input) {
     return { source: source, label: label };
 };
 var cytoscapeFromGraph = function (graph_data) {
-    var elements = Object.keys(graph_data.nodes).reduce(function (tmp, nodeId) {
+    var elements = Object.keys(graph_data.nodes || {}).reduce(function (tmp, nodeId) {
         var node = graph_data.nodes[nodeId];
         var isStatic = "value" in node;
         var cyNode = {
@@ -162,27 +162,28 @@ var cytoscapeFromGraph = function (graph_data) {
     }, { nodes: [], edges: [], map: {} });
     return { elements: elements };
 };
-var useCytoscope = function (selectedGraph) {
+var useCytoscape = function (selectedGraph) {
+    var _a;
     var cy = null;
-    var cytoscopeData = (0, vue_1.ref)(cytoscapeFromGraph(selectedGraph.value));
-    var cytoscopeRef = (0, vue_1.ref)();
-    var updateCytoscope = function (nodeId, state) { return __awaiter(void 0, void 0, void 0, function () {
+    var cytoscapeData = (0, vue_1.ref)(cytoscapeFromGraph((_a = selectedGraph.value) !== null && _a !== void 0 ? _a : { nodes: {} }));
+    var cytoscapeRef = (0, vue_1.ref)();
+    var updateCytoscape = function (nodeId, state) { return __awaiter(void 0, void 0, void 0, function () {
         var elements, graph, nodeData;
-        var _a;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
+        var _a, _b, _c;
+        return __generator(this, function (_d) {
+            switch (_d.label) {
                 case 0:
                     if (!(state === graphai_1.NodeState.Completed || state === graphai_1.NodeState.Waiting)) return [3 /*break*/, 2];
                     return [4 /*yield*/, (0, graphai_1.sleep)(100)];
                 case 1:
-                    _b.sent();
-                    _b.label = 2;
+                    _d.sent();
+                    _d.label = 2;
                 case 2:
-                    elements = cytoscopeData.value.elements;
+                    elements = cytoscapeData.value.elements;
                     elements.map[nodeId].data.color = colorMap[state];
                     graph = selectedGraph.value;
-                    nodeData = graph.nodes[nodeId];
-                    if ("agent" in nodeData && state === graphai_1.NodeState.Queued && ((_a = nodeData.priority) !== null && _a !== void 0 ? _a : 0) > 0) {
+                    nodeData = (_b = ((_a = graph === null || graph === void 0 ? void 0 : graph.nodes) !== null && _a !== void 0 ? _a : {})[nodeId]) !== null && _b !== void 0 ? _b : [];
+                    if ("agent" in nodeData && state === graphai_1.NodeState.Queued && ((_c = nodeData.priority) !== null && _c !== void 0 ? _c : 0) > 0) {
                         // computed node
                         elements.map[nodeId].data.color = colorPriority;
                     }
@@ -192,22 +193,22 @@ var useCytoscope = function (selectedGraph) {
                             elements.map[nodeId].data.color = colorStatic;
                         }
                     }
-                    cytoscopeData.value = { elements: elements };
+                    cytoscapeData.value = { elements: elements };
                     if (!(state === graphai_1.NodeState.Injected)) return [3 /*break*/, 4];
                     return [4 /*yield*/, (0, graphai_1.sleep)(100)];
                 case 3:
-                    _b.sent();
+                    _d.sent();
                     elements.map[nodeId].data.color = colorStatic;
-                    cytoscopeData.value = { elements: elements };
-                    _b.label = 4;
+                    cytoscapeData.value = { elements: elements };
+                    _d.label = 4;
                 case 4: return [2 /*return*/];
             }
         });
     }); };
-    var createCytoscope = function () {
+    var createCytoscape = function () {
         try {
             cy = (0, cytoscape_1.default)({
-                container: cytoscopeRef.value,
+                container: cytoscapeRef.value,
                 style: cyStyle,
                 layout: {
                     name: layout,
@@ -235,8 +236,8 @@ var useCytoscope = function (selectedGraph) {
                 case 0:
                     if (!cy) return [3 /*break*/, 2];
                     cy.elements().remove();
-                    cy.add(cytoscopeData.value.elements);
-                    name_1 = cytoscopeData.value.elements.nodes.reduce(function (prevName, node) {
+                    cy.add(cytoscapeData.value.elements);
+                    name_1 = cytoscapeData.value.elements.nodes.reduce(function (prevName, node) {
                         if (node.position) {
                             return "preset";
                         }
@@ -261,35 +262,35 @@ var useCytoscope = function (selectedGraph) {
             cy.nodes().forEach(function (cynode) {
                 var id = cynode.id();
                 var pos = cynode.position();
-                var node = cytoscopeData.value.elements.map[id];
+                var node = cytoscapeData.value.elements.map[id];
                 node.position = pos;
             });
         }
     };
-    var resetCytoscope = function () {
-        var elements = cytoscopeData.value.elements;
+    var resetCytoscape = function () {
+        var elements = cytoscapeData.value.elements;
         Object.keys(elements.map).forEach(function (nodeId) {
             var graph = selectedGraph.value;
             var nodeData = graph.nodes[nodeId];
             elements.map[nodeId].data.color = "value" in nodeData ? colorStatic : colorMap[graphai_1.NodeState.Waiting];
         });
-        cytoscopeData.value = { elements: elements };
+        cytoscapeData.value = { elements: elements };
     };
-    (0, vue_1.watch)(cytoscopeData, function () {
+    (0, vue_1.watch)(cytoscapeData, function () {
         console.log("updated");
         updateGraphData();
     });
     (0, vue_1.watch)(selectedGraph, function () {
-        cytoscopeData.value = cytoscapeFromGraph(selectedGraph.value);
+        cytoscapeData.value = cytoscapeFromGraph(selectedGraph.value);
     });
     (0, vue_1.onMounted)(function () {
-        createCytoscope();
+        createCytoscape();
         updateGraphData();
     });
     return {
-        cytoscopeRef: cytoscopeRef,
-        updateCytoscope: updateCytoscope,
-        resetCytoscope: resetCytoscope,
+        cytoscapeRef: cytoscapeRef,
+        updateCytoscape: updateCytoscape,
+        resetCytoscape: resetCytoscape,
     };
 };
-exports.useCytoscope = useCytoscope;
+exports.useCytoscape = useCytoscape;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@receptron/graphai_vue_cytoscape",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "main": "lib/cytoscape.js",
   "files": [
     "./lib"
@@ -15,6 +15,16 @@
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
     "format": "prettier --write src/"
   },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/receptron/graphai_utils"
+  },
+  "author": "Receptron team",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/receptron/graphai_utils/issues"
+  },
+  "homepage": "https://github.com/receptron/graphai_utils/tree/main/packages/vue-cytoscape#readme",
   "dependencies": {
     "cytoscape": "^3.29.2",
     "cytoscape-klay": "^3.1.4"

package/lib/cytoscope.d.ts

@@ -1,7 +0,0 @@
-import { Ref, ComputedRef } from "vue";
-import { GraphData, NodeState } from "graphai";
-export declare const useCytoscope: (selectedGraph: ComputedRef<GraphData> | Ref<GraphData>) => {
-    cytoscopeRef: Ref<any>;
-    updateCytoscope: (nodeId: string, state: NodeState) => Promise<void>;
-    resetCytoscope: () => void;
-};