@xyo-network/react-node-renderer 2.64.0-rc.2 → 2.64.0-rc.4

package/dist/browser/components/RelationalGraph.stories.js

@@ -0,0 +1,137 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Button, ButtonGroup } from "@mui/material";
+import { useAsyncEffect } from "@xylabs/react-async-effect";
+import { MemoryArchivist, MemoryArchivistConfigSchema } from "@xyo-network/archivist";
+import { HttpBridge, HttpBridgeConfigSchema } from "@xyo-network/http-bridge";
+import { IdWitness, IdWitnessConfigSchema } from "@xyo-network/id-plugin";
+import { MemoryNode } from "@xyo-network/node-memory";
+import { NodeConfigSchema } from "@xyo-network/node-model";
+import { NodeProvider, useNodeFromNode, useProvidedNode } from "@xyo-network/react-node";
+import { DefaultSeedPhrase } from "@xyo-network/react-storybook";
+import { useWallet, WalletProvider } from "@xyo-network/react-wallet";
+import { MemorySentinel, SentinelConfigSchema } from "@xyo-network/sentinel";
+import { useState } from "react";
+import { useCytoscapeElements, useCytoscapeOptions } from "../hooks";
+import { ProvidedNodeRenderer } from "./ProvidedNodeRenderer";
+import { NodeRelationalGraph } from "./RelationalGraph";
+import { options } from "./story";
+const nodeUrl = "http://localhost:8080/node";
+const MemoryNodeDecorator = (Story, args) => {
+  const [node, setNode] = useState();
+  useAsyncEffect(
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    async () => {
+      try {
+        const node2 = await MemoryNode.create({ config: { name: "GlobalNode", schema: NodeConfigSchema } });
+        const node1 = await MemoryNode.create({ config: { name: "ChildNode", schema: NodeConfigSchema } });
+        const bridge = await HttpBridge.create({
+          config: { name: "Bridge", nodeUrl, schema: HttpBridgeConfigSchema, security: { allowAnonymous: true } }
+        });
+        await node2.register(bridge);
+        await node2.attach(bridge.address, true);
+        const archivist = await MemoryArchivist.create({ config: { name: "RootStorageArchivist", schema: MemoryArchivistConfigSchema } });
+        await node2.register(archivist);
+        await node2.attach(archivist.address, true);
+        const sentinel = await MemorySentinel.create({ config: { name: "MemorySentinel", schema: SentinelConfigSchema } });
+        await node2.register(sentinel);
+        await node2.attach(sentinel.address, true);
+        const archivist1 = await MemoryArchivist.create({ config: { name: "RootStorageArchivist1", schema: MemoryArchivistConfigSchema } });
+        await node1.register(archivist1);
+        await node1.attach(archivist1.address, true);
+        await node2.register(node1);
+        await node2.attach(node1.address, true);
+        setNode(node2);
+      } catch (e) {
+        console.error("Error Creating MemoryNode", e);
+      }
+    },
+    []
+  );
+  const [wallet] = useWallet({ mnemonic: DefaultSeedPhrase });
+  return /* @__PURE__ */ jsx(WalletProvider, { rootWallet: wallet, children: /* @__PURE__ */ jsx(NodeProvider, { node, children: /* @__PURE__ */ jsx(Story, { ...args }) }) });
+};
+var RelationalGraph_stories_default = {
+  component: NodeRelationalGraph,
+  title: "node/renderer/NodeRelationalGraph"
+};
+const Template = (props) => /* @__PURE__ */ jsx(NodeRelationalGraph, { ...props });
+const TemplateDescribe = (props) => {
+  const [node] = useProvidedNode();
+  const elements = useCytoscapeElements(node);
+  const options2 = useCytoscapeOptions(elements);
+  return /* @__PURE__ */ jsx(NodeRelationalGraph, { options: options2, ...props });
+};
+const TemplateCustomAddress = (props) => {
+  const [node] = useNodeFromNode("ChildNode");
+  const elements = useCytoscapeElements(node);
+  const options2 = useCytoscapeOptions(elements);
+  return /* @__PURE__ */ jsx(NodeRelationalGraph, { options: options2, ...props });
+};
+const TemplateProvidedNodeRenderer = (props) => /* @__PURE__ */ jsx(ProvidedNodeRenderer, { ...props });
+const TemplateAttachDetach = (props) => {
+  const [node] = useNodeFromNode("ChildNode");
+  const elements = useCytoscapeElements(node);
+  const options2 = useCytoscapeOptions(elements);
+  const [idWitness, setIdWitness] = useState();
+  useAsyncEffect(
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    async () => {
+      const witnessModule = await IdWitness.create({ config: { name: "IdWitness", salt: "test", schema: IdWitnessConfigSchema } });
+      setIdWitness(witnessModule);
+    },
+    []
+  );
+  const handleAddWitness = async () => {
+    if (node && idWitness) {
+      const memoryNode = node;
+      await memoryNode.register(idWitness);
+      await memoryNode.attach(idWitness.address, true);
+    }
+  };
+  const handleRemoveWitness = async () => {
+    if (node && idWitness) {
+      const memoryNode = node;
+      if (memoryNode.registered().includes(idWitness.address)) {
+        await memoryNode.unregister(idWitness);
+      }
+    }
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(ButtonGroup, { children: [
+      /* @__PURE__ */ jsx(Button, { onClick: handleAddWitness, children: "Add Witness" }),
+      /* @__PURE__ */ jsx(Button, { onClick: handleRemoveWitness, children: "Remove Witness" })
+    ] }),
+    /* @__PURE__ */ jsx(NodeRelationalGraph, { options: options2, ...props })
+  ] });
+};
+const defaultProps = {
+  height: "calc(100vh - 20px)",
+  width: "100%"
+};
+const Default = Template.bind({});
+Default.args = {};
+const WithData = Template.bind({});
+WithData.args = { options, ...defaultProps };
+const WithDescribe = TemplateDescribe.bind({});
+WithDescribe.args = { ...defaultProps };
+WithDescribe.decorators = [MemoryNodeDecorator];
+const WithCustomAddress = TemplateCustomAddress.bind({});
+WithCustomAddress.args = { ...defaultProps };
+WithCustomAddress.decorators = [MemoryNodeDecorator];
+const WithAttachDetach = TemplateAttachDetach.bind({});
+WithAttachDetach.args = { ...defaultProps };
+WithAttachDetach.decorators = [MemoryNodeDecorator];
+const WithProvidedNodeRenderer = TemplateProvidedNodeRenderer.bind({});
+WithProvidedNodeRenderer.args = { ...defaultProps };
+WithProvidedNodeRenderer.decorators = [MemoryNodeDecorator];
+export {
+  Default,
+  MemoryNodeDecorator,
+  WithAttachDetach,
+  WithCustomAddress,
+  WithData,
+  WithDescribe,
+  WithProvidedNodeRenderer,
+  RelationalGraph_stories_default as default
+};
+//# sourceMappingURL=RelationalGraph.stories.js.map

package/dist/browser/components/RelationalGraph.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/RelationalGraph.stories.tsx"],"sourcesContent":["import { Button, ButtonGroup } from '@mui/material'\nimport { Decorator, Meta, StoryFn } from '@storybook/react'\nimport { useAsyncEffect } from '@xylabs/react-async-effect'\nimport { MemoryArchivist, MemoryArchivistConfigSchema } from '@xyo-network/archivist'\nimport { HttpBridge, HttpBridgeConfigSchema } from '@xyo-network/http-bridge'\nimport { IdWitness, IdWitnessConfigSchema } from '@xyo-network/id-plugin'\nimport { MemoryNode } from '@xyo-network/node-memory'\nimport { NodeConfigSchema } from '@xyo-network/node-model'\nimport { NodeProvider, useNodeFromNode, useProvidedNode } from '@xyo-network/react-node'\nimport { DefaultSeedPhrase } from '@xyo-network/react-storybook'\nimport { useWallet, WalletProvider } from '@xyo-network/react-wallet'\nimport { MemorySentinel, SentinelConfigSchema } from '@xyo-network/sentinel'\nimport { useState } from 'react'\n\nimport { useCytoscapeElements, useCytoscapeOptions } from '../hooks'\nimport { ProvidedNodeRenderer } from './ProvidedNodeRenderer'\nimport { NodeRelationalGraph } from './RelationalGraph'\nimport { options } from './story'\n\nconst nodeUrl = 'http://localhost:8080/node'\n\nexport const MemoryNodeDecorator: Decorator = (Story, args) => {\n  const [node, setNode] = useState<MemoryNode>()\n\n  useAsyncEffect(\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    async () => {\n      try {\n        const node = await MemoryNode.create({ config: { name: 'GlobalNode', schema: NodeConfigSchema } })\n        const node1 = await MemoryNode.create({ config: { name: 'ChildNode', schema: NodeConfigSchema } })\n        const bridge = await HttpBridge.create({\n          config: { name: 'Bridge', nodeUrl, schema: HttpBridgeConfigSchema, security: { allowAnonymous: true } },\n        })\n        await node.register(bridge)\n        await node.attach(bridge.address, true)\n\n        const archivist = await MemoryArchivist.create({ config: { name: 'RootStorageArchivist', schema: MemoryArchivistConfigSchema } })\n        await node.register(archivist)\n        await node.attach(archivist.address, true)\n\n        const sentinel = await MemorySentinel.create({ config: { name: 'MemorySentinel', schema: SentinelConfigSchema } })\n        await node.register(sentinel)\n        await node.attach(sentinel.address, true)\n\n        const archivist1 = await MemoryArchivist.create({ config: { name: 'RootStorageArchivist1', schema: MemoryArchivistConfigSchema } })\n        await node1.register(archivist1)\n        await node1.attach(archivist1.address, true)\n\n        await node.register(node1)\n        await node.attach(node1.address, true)\n\n        setNode(node)\n      } catch (e) {\n        console.error('Error Creating MemoryNode', e)\n      }\n    },\n    [],\n  )\n\n  const [wallet] = useWallet({ mnemonic: DefaultSeedPhrase })\n\n  return (\n    <WalletProvider rootWallet={wallet}>\n      <NodeProvider node={node}>\n        <Story {...args} />\n      </NodeProvider>\n    </WalletProvider>\n  )\n}\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  component: NodeRelationalGraph,\n  title: 'node/renderer/NodeRelationalGraph',\n} as Meta\n\nconst Template: StoryFn<typeof NodeRelationalGraph> = (props) => <NodeRelationalGraph {...props} />\n\nconst TemplateDescribe: StoryFn<typeof NodeRelationalGraph> = (props) => {\n  const [node] = useProvidedNode()\n  const elements = useCytoscapeElements(node)\n  const options = useCytoscapeOptions(elements)\n  return <NodeRelationalGraph options={options} {...props} />\n}\n\nconst TemplateCustomAddress: StoryFn<typeof NodeRelationalGraph> = (props) => {\n  const [node] = useNodeFromNode('ChildNode')\n  const elements = useCytoscapeElements(node)\n  const options = useCytoscapeOptions(elements)\n  return <NodeRelationalGraph options={options} {...props} />\n}\n\nconst TemplateProvidedNodeRenderer: StoryFn<typeof ProvidedNodeRenderer> = (props) => <ProvidedNodeRenderer {...props} />\n\nconst TemplateAttachDetach: StoryFn<typeof NodeRelationalGraph> = (props) => {\n  const [node] = useNodeFromNode('ChildNode')\n  const elements = useCytoscapeElements(node)\n  const options = useCytoscapeOptions(elements)\n  const [idWitness, setIdWitness] = useState<IdWitness>()\n\n  useAsyncEffect(\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    async () => {\n      const witnessModule = await IdWitness.create({ config: { name: 'IdWitness', salt: 'test', schema: IdWitnessConfigSchema } })\n      setIdWitness(witnessModule)\n    },\n    [],\n  )\n\n  const handleAddWitness = async () => {\n    if (node && idWitness) {\n      const memoryNode = node as MemoryNode\n      await memoryNode.register(idWitness)\n      await memoryNode.attach(idWitness.address, true)\n    }\n  }\n\n  const handleRemoveWitness = async () => {\n    if (node && idWitness) {\n      const memoryNode = node as MemoryNode\n      if (memoryNode.registered().includes(idWitness.address)) {\n        await memoryNode.unregister(idWitness)\n      }\n    }\n  }\n\n  return (\n    <>\n      <ButtonGroup>\n        <Button onClick={handleAddWitness}>Add Witness</Button>\n        <Button onClick={handleRemoveWitness}>Remove Witness</Button>\n      </ButtonGroup>\n      <NodeRelationalGraph options={options} {...props} />\n    </>\n  )\n}\n\nconst defaultProps = {\n  height: 'calc(100vh - 20px)',\n  width: '100%',\n}\n\nconst Default = Template.bind({})\nDefault.args = {}\n\nconst WithData = Template.bind({})\nWithData.args = { options, ...defaultProps }\n\nconst WithDescribe = TemplateDescribe.bind({})\nWithDescribe.args = { ...defaultProps }\nWithDescribe.decorators = [MemoryNodeDecorator]\n\nconst WithCustomAddress = TemplateCustomAddress.bind({})\nWithCustomAddress.args = { ...defaultProps }\nWithCustomAddress.decorators = [MemoryNodeDecorator]\n\nconst WithAttachDetach = TemplateAttachDetach.bind({})\nWithAttachDetach.args = { ...defaultProps }\nWithAttachDetach.decorators = [MemoryNodeDecorator]\n\nconst WithProvidedNodeRenderer = TemplateProvidedNodeRenderer.bind({})\nWithProvidedNodeRenderer.args = { ...defaultProps }\nWithProvidedNodeRenderer.decorators = [MemoryNodeDecorator]\n\nexport { Default, WithAttachDetach, WithCustomAddress, WithData, WithDescribe, WithProvidedNodeRenderer }\n"],"mappings":"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","names":["node","options"]}

package/dist/browser/components/RelationalGraphEvents.stories.js

@@ -0,0 +1,63 @@
+import { jsx } from "react/jsx-runtime";
+import { useAsyncEffect } from "@xylabs/react-async-effect";
+import { ArchivistConfigSchema, MemoryArchivist } from "@xyo-network/archivist";
+import { MemoryNode } from "@xyo-network/node-memory";
+import { NodeConfigSchema } from "@xyo-network/node-model";
+import { NodeProvider, useProvidedNode } from "@xyo-network/react-node";
+import { DefaultSeedPhrase } from "@xyo-network/react-storybook";
+import { useWallet, WalletProvider } from "@xyo-network/react-wallet";
+import { useEffect, useState } from "react";
+import { CytoscapeInstanceProvider, useCytoscapeInstance } from "../contexts";
+import { useCytoscapeElements, useCytoscapeOptions } from "../hooks";
+import { NodeRelationalGraph } from "./RelationalGraph";
+const MemoryNodeDecorator = (Story, args) => {
+  const [node, setNode] = useState();
+  useAsyncEffect(
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    async () => {
+      const node2 = await MemoryNode.create({ config: { name: "GlobalNode", schema: NodeConfigSchema } });
+      const archivist = await MemoryArchivist.create({ config: { name: "RootStorageArchivist", schema: ArchivistConfigSchema } });
+      await node2.register(archivist);
+      await node2.attach(archivist.address, true);
+      setNode(node2);
+    },
+    []
+  );
+  const [wallet] = useWallet({ mnemonic: DefaultSeedPhrase });
+  return /* @__PURE__ */ jsx(WalletProvider, { rootWallet: wallet, children: /* @__PURE__ */ jsx(NodeProvider, { node, children: /* @__PURE__ */ jsx(CytoscapeInstanceProvider, { children: /* @__PURE__ */ jsx(Story, { ...args }) }) }) });
+};
+var RelationalGraphEvents_stories_default = {
+  component: NodeRelationalGraph,
+  title: "node/renderer/NodeRelationalGraphEvents"
+};
+const Template = (props) => {
+  const [node] = useProvidedNode();
+  const elements = useCytoscapeElements(node);
+  const options = useCytoscapeOptions(elements);
+  const { cy } = useCytoscapeInstance(true);
+  useEffect(() => {
+    const listener = (event) => {
+      const element = event.target[0];
+      console.log(element.data().address);
+    };
+    if (cy) {
+      cy.on("select", listener);
+    }
+    return () => {
+      cy?.off("select", listener);
+    };
+  }, [cy]);
+  return /* @__PURE__ */ jsx(NodeRelationalGraph, { options, ...props });
+};
+const defaultProps = {
+  height: "calc(100vh - 20px)",
+  width: "100%"
+};
+const Default = Template.bind({});
+Default.args = { ...defaultProps };
+Default.decorators = [MemoryNodeDecorator];
+export {
+  Default,
+  RelationalGraphEvents_stories_default as default
+};
+//# sourceMappingURL=RelationalGraphEvents.stories.js.map

package/dist/browser/components/RelationalGraphEvents.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/RelationalGraphEvents.stories.tsx"],"sourcesContent":["import { Decorator, Meta, StoryFn } from '@storybook/react'\nimport { useAsyncEffect } from '@xylabs/react-async-effect'\nimport { ArchivistConfigSchema, MemoryArchivist } from '@xyo-network/archivist'\nimport { MemoryNode } from '@xyo-network/node-memory'\nimport { NodeConfigSchema } from '@xyo-network/node-model'\nimport { NodeProvider, useProvidedNode } from '@xyo-network/react-node'\nimport { DefaultSeedPhrase } from '@xyo-network/react-storybook'\nimport { useWallet, WalletProvider } from '@xyo-network/react-wallet'\nimport { EventObject } from 'cytoscape'\nimport { useEffect, useState } from 'react'\n\nimport { CytoscapeInstanceProvider, useCytoscapeInstance } from '../contexts'\nimport { useCytoscapeElements, useCytoscapeOptions } from '../hooks'\nimport { NodeRelationalGraph } from './RelationalGraph'\n\nconst MemoryNodeDecorator: Decorator = (Story, args) => {\n  const [node, setNode] = useState<MemoryNode>()\n\n  useAsyncEffect(\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    async () => {\n      const node = await MemoryNode.create({ config: { name: 'GlobalNode', schema: NodeConfigSchema } })\n\n      const archivist = await MemoryArchivist.create({ config: { name: 'RootStorageArchivist', schema: ArchivistConfigSchema } })\n      await node.register(archivist)\n      await node.attach(archivist.address, true)\n\n      setNode(node)\n    },\n    [],\n  )\n\n  const [wallet] = useWallet({ mnemonic: DefaultSeedPhrase })\n\n  return (\n    <WalletProvider rootWallet={wallet}>\n      <NodeProvider node={node}>\n        <CytoscapeInstanceProvider>\n          <Story {...args} />\n        </CytoscapeInstanceProvider>\n      </NodeProvider>\n    </WalletProvider>\n  )\n}\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  component: NodeRelationalGraph,\n  title: 'node/renderer/NodeRelationalGraphEvents',\n} as Meta\n\nconst Template: StoryFn<typeof NodeRelationalGraph> = (props) => {\n  const [node] = useProvidedNode()\n  const elements = useCytoscapeElements(node)\n  const options = useCytoscapeOptions(elements)\n\n  const { cy } = useCytoscapeInstance(true)\n\n  useEffect(() => {\n    const listener = (event: EventObject) => {\n      const element = event.target[0]\n      console.log(element.data().address)\n    }\n    if (cy) {\n      cy.on('select', listener)\n    }\n\n    return () => {\n      cy?.off('select', listener)\n    }\n  }, [cy])\n  return <NodeRelationalGraph options={options} {...props} />\n}\n\nconst defaultProps = {\n  height: 'calc(100vh - 20px)',\n  width: '100%',\n}\n\nconst Default = Template.bind({})\nDefault.args = { ...defaultProps }\nDefault.decorators = [MemoryNodeDecorator]\n\nexport { Default }\n"],"mappings":"AAsCU;AArCV,SAAS,sBAAsB;AAC/B,SAAS,uBAAuB,uBAAuB;AACvD,SAAS,kBAAkB;AAC3B,SAAS,wBAAwB;AACjC,SAAS,cAAc,uBAAuB;AAC9C,SAAS,yBAAyB;AAClC,SAAS,WAAW,sBAAsB;AAE1C,SAAS,WAAW,gBAAgB;AAEpC,SAAS,2BAA2B,4BAA4B;AAChE,SAAS,sBAAsB,2BAA2B;AAC1D,SAAS,2BAA2B;AAEpC,MAAM,sBAAiC,CAAC,OAAO,SAAS;AACtD,QAAM,CAAC,MAAM,OAAO,IAAI,SAAqB;AAE7C;AAAA;AAAA,IAEE,YAAY;AACV,YAAMA,QAAO,MAAM,WAAW,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,QAAQ,iBAAiB,EAAE,CAAC;AAEjG,YAAM,YAAY,MAAM,gBAAgB,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,QAAQ,sBAAsB,EAAE,CAAC;AAC1H,YAAMA,MAAK,SAAS,SAAS;AAC7B,YAAMA,MAAK,OAAO,UAAU,SAAS,IAAI;AAEzC,cAAQA,KAAI;AAAA,IACd;AAAA,IACA,CAAC;AAAA,EACH;AAEA,QAAM,CAAC,MAAM,IAAI,UAAU,EAAE,UAAU,kBAAkB,CAAC;AAE1D,SACE,oBAAC,kBAAe,YAAY,QAC1B,8BAAC,gBAAa,MACZ,8BAAC,6BACC,8BAAC,SAAO,GAAG,MAAM,GACnB,GACF,GACF;AAEJ;AAGA,IAAO,wCAAQ;AAAA,EACb,WAAW;AAAA,EACX,OAAO;AACT;AAEA,MAAM,WAAgD,CAAC,UAAU;AAC/D,QAAM,CAAC,IAAI,IAAI,gBAAgB;AAC/B,QAAM,WAAW,qBAAqB,IAAI;AAC1C,QAAM,UAAU,oBAAoB,QAAQ;AAE5C,QAAM,EAAE,GAAG,IAAI,qBAAqB,IAAI;AAExC,YAAU,MAAM;AACd,UAAM,WAAW,CAAC,UAAuB;AACvC,YAAM,UAAU,MAAM,OAAO,CAAC;AAC9B,cAAQ,IAAI,QAAQ,KAAK,EAAE,OAAO;AAAA,IACpC;AACA,QAAI,IAAI;AACN,SAAG,GAAG,UAAU,QAAQ;AAAA,IAC1B;AAEA,WAAO,MAAM;AACX,UAAI,IAAI,UAAU,QAAQ;AAAA,IAC5B;AAAA,EACF,GAAG,CAAC,EAAE,CAAC;AACP,SAAO,oBAAC,uBAAoB,SAAmB,GAAG,OAAO;AAC3D;AAEA,MAAM,eAAe;AAAA,EACnB,QAAQ;AAAA,EACR,OAAO;AACT;AAEA,MAAM,UAAU,SAAS,KAAK,CAAC,CAAC;AAChC,QAAQ,OAAO,EAAE,GAAG,aAAa;AACjC,QAAQ,aAAa,CAAC,mBAAmB;","names":["node"]}

package/dist/browser/components/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,OAAO,CAAA;AACrB,cAAc,oBAAoB,CAAA;AAClC,cAAc,wBAAwB,CAAA;AACtC,cAAc,mBAAmB,CAAA"}

package/dist/browser/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,OAAO,CAAA;AACrB,cAAc,oBAAoB,CAAA;AAClC,cAAc,wBAAwB,CAAA;AACtC,cAAc,mBAAmB,CAAA"}

package/dist/browser/components/index.js

@@ -0,0 +1,5 @@
+export * from "./lib";
+export * from "./ModuleCardParser";
+export * from "./ProvidedNodeRenderer";
+export * from "./RelationalGraph";
+//# sourceMappingURL=index.js.map

package/dist/browser/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/index.ts"],"sourcesContent":["export * from './lib'\nexport * from './ModuleCardParser'\nexport * from './ProvidedNodeRenderer'\nexport * from './RelationalGraph'\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}

package/dist/browser/components/lib/RelationalGraphProps.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RelationalGraphProps.d.ts","sourceRoot":"","sources":["../../../../src/components/lib/RelationalGraphProps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AACpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAA;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,MAAM,WAAW,wBAAyB,SAAQ,YAAY;IAC5D,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,OAAO,CAAC,EAAE,gBAAgB,CAAA;CAC3B"}

package/dist/browser/components/lib/RelationalGraphProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RelationalGraphProps.d.ts","sourceRoot":"","sources":["../../../../src/components/lib/RelationalGraphProps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AACpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAA;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,MAAM,WAAW,wBAAyB,SAAQ,YAAY;IAC5D,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,OAAO,CAAC,EAAE,gBAAgB,CAAA;CAC3B"}

package/dist/browser/components/lib/RelationalGraphProps.js

@@ -0,0 +1 @@
+//# sourceMappingURL=RelationalGraphProps.js.map

package/dist/browser/components/lib/RelationalGraphProps.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/browser/components/lib/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/lib/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAA"}

package/dist/browser/components/lib/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/lib/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAA"}

package/dist/browser/components/lib/index.js

@@ -0,0 +1,2 @@
+export * from "./RelationalGraphProps";
+//# sourceMappingURL=index.js.map

package/dist/browser/components/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/lib/index.ts"],"sourcesContent":["export * from './RelationalGraphProps'\n"],"mappings":"AAAA,cAAc;","names":[]}

package/dist/browser/components/story/TestData.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TestData.d.ts","sourceRoot":"","sources":["../../../../src/components/story/TestData.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAA;AA6C5C,eAAO,MAAM,OAAO,EAAE,gBAGrB,CAAA"}

package/dist/browser/components/story/TestData.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TestData.d.ts","sourceRoot":"","sources":["../../../../src/components/story/TestData.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAA;AA6C5C,eAAO,MAAM,OAAO,EAAE,gBAGrB,CAAA"}

package/dist/browser/components/story/TestData.js

@@ -0,0 +1,48 @@
+const elements = [
+  {
+    // node a
+    data: { id: "a", name: "element a" }
+  },
+  {
+    // node b
+    data: { id: "b", name: "element b" }
+  },
+  {
+    // node c
+    data: { id: "c", name: "element c" }
+  },
+  {
+    // edge ab
+    data: { id: "ab", source: "a", target: "b" }
+  },
+  {
+    // edge ac
+    data: { id: "ac", source: "a", target: "c" }
+  }
+];
+const style = [
+  {
+    selector: "node",
+    style: {
+      label: "data(id)"
+    }
+  },
+  {
+    selector: "edge",
+    style: {
+      "curve-style": "bezier",
+      "line-color": "#ccc",
+      "target-arrow-color": "#ccc",
+      "target-arrow-shape": "triangle",
+      width: 3
+    }
+  }
+];
+const options = {
+  elements,
+  style
+};
+export {
+  options
+};
+//# sourceMappingURL=TestData.js.map

package/dist/browser/components/story/TestData.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/story/TestData.tsx"],"sourcesContent":["import { CytoscapeOptions } from 'cytoscape'\n\nconst elements: CytoscapeOptions['elements'] = [\n  {\n    // node a\n    data: { id: 'a', name: 'element a' },\n  },\n  {\n    // node b\n    data: { id: 'b', name: 'element b' },\n  },\n  {\n    // node c\n    data: { id: 'c', name: 'element c' },\n  },\n  {\n    // edge ab\n    data: { id: 'ab', source: 'a', target: 'b' },\n  },\n  {\n    // edge ac\n    data: { id: 'ac', source: 'a', target: 'c' },\n  },\n]\n\nconst style: CytoscapeOptions['style'] = [\n  {\n    selector: 'node',\n    style: {\n      label: 'data(id)',\n    },\n  },\n\n  {\n    selector: 'edge',\n    style: {\n      'curve-style': 'bezier',\n      'line-color': '#ccc',\n      'target-arrow-color': '#ccc',\n      'target-arrow-shape': 'triangle',\n      width: 3,\n    },\n  },\n]\n\nexport const options: CytoscapeOptions = {\n  elements,\n  style,\n}\n"],"mappings":"AAEA,MAAM,WAAyC;AAAA,EAC7C;AAAA;AAAA,IAEE,MAAM,EAAE,IAAI,KAAK,MAAM,YAAY;AAAA,EACrC;AAAA,EACA;AAAA;AAAA,IAEE,MAAM,EAAE,IAAI,KAAK,MAAM,YAAY;AAAA,EACrC;AAAA,EACA;AAAA;AAAA,IAEE,MAAM,EAAE,IAAI,KAAK,MAAM,YAAY;AAAA,EACrC;AAAA,EACA;AAAA;AAAA,IAEE,MAAM,EAAE,IAAI,MAAM,QAAQ,KAAK,QAAQ,IAAI;AAAA,EAC7C;AAAA,EACA;AAAA;AAAA,IAEE,MAAM,EAAE,IAAI,MAAM,QAAQ,KAAK,QAAQ,IAAI;AAAA,EAC7C;AACF;AAEA,MAAM,QAAmC;AAAA,EACvC;AAAA,IACE,UAAU;AAAA,IACV,OAAO;AAAA,MACL,OAAO;AAAA,IACT;AAAA,EACF;AAAA,EAEA;AAAA,IACE,UAAU;AAAA,IACV,OAAO;AAAA,MACL,eAAe;AAAA,MACf,cAAc;AAAA,MACd,sBAAsB;AAAA,MACtB,sBAAsB;AAAA,MACtB,OAAO;AAAA,IACT;AAAA,EACF;AACF;AAEO,MAAM,UAA4B;AAAA,EACvC;AAAA,EACA;AACF;","names":[]}

package/dist/browser/components/story/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/story/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA"}

package/dist/browser/components/story/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/story/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA"}

package/dist/browser/components/story/index.js

@@ -0,0 +1,2 @@
+export * from "./TestData";
+//# sourceMappingURL=index.js.map

package/dist/browser/components/story/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/story/index.ts"],"sourcesContent":["export * from './TestData'\n"],"mappings":"AAAA,cAAc;","names":[]}

package/dist/browser/contexts/CytoscapeInstance/Context.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Context.d.ts","sourceRoot":"","sources":["../../../../src/contexts/CytoscapeInstance/Context.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAEhD,eAAO,MAAM,wBAAwB,sGAA4C,CAAA"}

package/dist/browser/contexts/CytoscapeInstance/Context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Context.d.ts","sourceRoot":"","sources":["../../../../src/contexts/CytoscapeInstance/Context.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAEhD,eAAO,MAAM,wBAAwB,sGAA4C,CAAA"}

package/dist/browser/contexts/CytoscapeInstance/Context.js

@@ -0,0 +1,6 @@
+import { createContextEx } from "@xyo-network/react-shared";
+const CytoscapeInstanceContext = createContextEx();
+export {
+  CytoscapeInstanceContext
+};
+//# sourceMappingURL=Context.js.map

package/dist/browser/contexts/CytoscapeInstance/Context.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/contexts/CytoscapeInstance/Context.ts"],"sourcesContent":["import { createContextEx } from '@xyo-network/react-shared'\n\nimport { CytoscapeInstanceState } from './State'\n\nexport const CytoscapeInstanceContext = createContextEx<CytoscapeInstanceState>()\n"],"mappings":"AAAA,SAAS,uBAAuB;AAIzB,MAAM,2BAA2B,gBAAwC;","names":[]}

package/dist/browser/contexts/CytoscapeInstance/Provider.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Provider.d.ts","sourceRoot":"","sources":["../../../../src/contexts/CytoscapeInstance/Provider.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AACxD,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAA;AAKhC,MAAM,WAAW,8BAA+B,SAAQ,YAAY;IAClE,eAAe,CAAC,EAAE,IAAI,CAAA;CACvB;AAED,eAAO,MAAM,yBAAyB,EAAE,KAAK,CAAC,EAAE,CAAC,8BAA8B,CAO9E,CAAA"}

package/dist/browser/contexts/CytoscapeInstance/Provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Provider.d.ts","sourceRoot":"","sources":["../../../../src/contexts/CytoscapeInstance/Provider.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AACxD,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAA;AAKhC,MAAM,WAAW,8BAA+B,SAAQ,YAAY;IAClE,eAAe,CAAC,EAAE,IAAI,CAAA;CACvB;AAED,eAAO,MAAM,yBAAyB,EAAE,KAAK,CAAC,EAAE,CAAC,8BAA8B,CAO9E,CAAA"}

package/dist/browser/contexts/CytoscapeInstance/Provider.js

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { CytoscapeInstanceContext } from "./Context";
+const CytoscapeInstanceProvider = ({ children, defaultInstance }) => {
+  const [cy, setCy] = useState(defaultInstance);
+  useEffect(() => {
+    setCy(defaultInstance);
+  }, [defaultInstance]);
+  return /* @__PURE__ */ jsx(CytoscapeInstanceContext.Provider, { value: { cy, provided: true, setCy }, children });
+};
+export {
+  CytoscapeInstanceProvider
+};
+//# sourceMappingURL=Provider.js.map

package/dist/browser/contexts/CytoscapeInstance/Provider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/contexts/CytoscapeInstance/Provider.tsx"],"sourcesContent":["import type { WithChildren } from '@xylabs/react-shared'\nimport { Core } from 'cytoscape'\nimport { useEffect, useState } from 'react'\n\nimport { CytoscapeInstanceContext } from './Context'\n\nexport interface CytoscapeInstanceProviderProps extends WithChildren {\n  defaultInstance?: Core\n}\n\nexport const CytoscapeInstanceProvider: React.FC<CytoscapeInstanceProviderProps> = ({ children, defaultInstance }) => {\n  const [cy, setCy] = useState<Core | undefined>(defaultInstance)\n  useEffect(() => {\n    setCy(defaultInstance)\n  }, [defaultInstance])\n\n  return <CytoscapeInstanceContext.Provider value={{ cy, provided: true, setCy }}>{children}</CytoscapeInstanceContext.Provider>\n}\n"],"mappings":"AAgBS;AAdT,SAAS,WAAW,gBAAgB;AAEpC,SAAS,gCAAgC;AAMlC,MAAM,4BAAsE,CAAC,EAAE,UAAU,gBAAgB,MAAM;AACpH,QAAM,CAAC,IAAI,KAAK,IAAI,SAA2B,eAAe;AAC9D,YAAU,MAAM;AACd,UAAM,eAAe;AAAA,EACvB,GAAG,CAAC,eAAe,CAAC;AAEpB,SAAO,oBAAC,yBAAyB,UAAzB,EAAkC,OAAO,EAAE,IAAI,UAAU,MAAM,MAAM,GAAI,UAAS;AAC5F;","names":[]}

package/dist/browser/contexts/CytoscapeInstance/State.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"State.d.ts","sourceRoot":"","sources":["../../../../src/contexts/CytoscapeInstance/State.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAC1D,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAA;AAChC,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAEhD,MAAM,WAAW,sBAAuB,SAAQ,cAAc;IAC5D,EAAE,CAAC,EAAE,IAAI,CAAA;IACT,KAAK,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,IAAI,GAAG,SAAS,CAAC,CAAC,CAAA;CACnD"}

package/dist/browser/contexts/CytoscapeInstance/State.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"State.d.ts","sourceRoot":"","sources":["../../../../src/contexts/CytoscapeInstance/State.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAC1D,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAA;AAChC,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAEhD,MAAM,WAAW,sBAAuB,SAAQ,cAAc;IAC5D,EAAE,CAAC,EAAE,IAAI,CAAA;IACT,KAAK,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,IAAI,GAAG,SAAS,CAAC,CAAC,CAAA;CACnD"}

package/dist/browser/contexts/CytoscapeInstance/State.js

@@ -0,0 +1 @@
+//# sourceMappingURL=State.js.map

package/dist/browser/contexts/CytoscapeInstance/State.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/browser/contexts/CytoscapeInstance/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/contexts/CytoscapeInstance/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA;AACzB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,OAAO,CAAA"}

package/dist/browser/contexts/CytoscapeInstance/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/contexts/CytoscapeInstance/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA;AACzB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,OAAO,CAAA"}

package/dist/browser/contexts/CytoscapeInstance/index.js

@@ -0,0 +1,5 @@
+export * from "./Context";
+export * from "./Provider";
+export * from "./State";
+export * from "./use";
+//# sourceMappingURL=index.js.map

package/dist/browser/contexts/CytoscapeInstance/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/contexts/CytoscapeInstance/index.ts"],"sourcesContent":["export * from './Context'\nexport * from './Provider'\nexport * from './State'\nexport * from './use'\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}

package/dist/browser/contexts/CytoscapeInstance/use.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use.d.ts","sourceRoot":"","sources":["../../../../src/contexts/CytoscapeInstance/use.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,oBAAoB,yIAA8F,CAAA"}

package/dist/browser/contexts/CytoscapeInstance/use.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use.d.ts","sourceRoot":"","sources":["../../../../src/contexts/CytoscapeInstance/use.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,oBAAoB,yIAA8F,CAAA"}

package/dist/browser/contexts/CytoscapeInstance/use.js

@@ -0,0 +1,7 @@
+import { useContextEx } from "@xyo-network/react-shared";
+import { CytoscapeInstanceContext } from "./Context";
+const useCytoscapeInstance = (required = false) => useContextEx(CytoscapeInstanceContext, "CytoscapeInstance", required);
+export {
+  useCytoscapeInstance
+};
+//# sourceMappingURL=use.js.map

package/dist/browser/contexts/CytoscapeInstance/use.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/contexts/CytoscapeInstance/use.ts"],"sourcesContent":["import { useContextEx } from '@xyo-network/react-shared'\n\nimport { CytoscapeInstanceContext } from './Context'\n\nexport const useCytoscapeInstance = (required = false) => useContextEx(CytoscapeInstanceContext, 'CytoscapeInstance', required)\n"],"mappings":"AAAA,SAAS,oBAAoB;AAE7B,SAAS,gCAAgC;AAElC,MAAM,uBAAuB,CAAC,WAAW,UAAU,aAAa,0BAA0B,qBAAqB,QAAQ;","names":[]}

package/dist/browser/contexts/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/contexts/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAA"}

package/dist/browser/contexts/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/contexts/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAA"}

package/dist/browser/contexts/index.js

@@ -0,0 +1,2 @@
+export * from "./CytoscapeInstance";
+//# sourceMappingURL=index.js.map

package/dist/browser/contexts/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/contexts/index.ts"],"sourcesContent":["export * from './CytoscapeInstance'\n"],"mappings":"AAAA,cAAc;","names":[]}

package/dist/browser/hooks/cytoscape/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/hooks/cytoscape/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA"}

package/dist/browser/hooks/cytoscape/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/hooks/cytoscape/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA"}

package/dist/browser/hooks/cytoscape/index.js

@@ -0,0 +1,3 @@
+export * from "./useCytoscapeElements";
+export * from "./useCytoscapeOptions";
+//# sourceMappingURL=index.js.map

package/dist/browser/hooks/cytoscape/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/hooks/cytoscape/index.ts"],"sourcesContent":["export * from './useCytoscapeElements'\nexport * from './useCytoscapeOptions'\n"],"mappings":"AAAA,cAAc;AACd,cAAc;","names":[]}

package/dist/browser/hooks/cytoscape/useCytoscapeElements.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCytoscapeElements.d.ts","sourceRoot":"","sources":["../../../../src/hooks/cytoscape/useCytoscapeElements.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAA;AACtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAA;AAK7C;;;GAGG;AACH,eAAO,MAAM,oBAAoB,eAAgB,YAAY,GAAG,SAAS,GAAG,IAAI,wBAoC/E,CAAA"}

package/dist/browser/hooks/cytoscape/useCytoscapeElements.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCytoscapeElements.d.ts","sourceRoot":"","sources":["../../../../src/hooks/cytoscape/useCytoscapeElements.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAA;AACtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAA;AAK7C;;;GAGG;AACH,eAAO,MAAM,oBAAoB,eAAgB,YAAY,GAAG,SAAS,GAAG,IAAI,wBAoC/E,CAAA"}

package/dist/browser/hooks/cytoscape/useCytoscapeElements.js

@@ -0,0 +1,39 @@
+import { useAsyncEffect } from "@xylabs/react-async-effect";
+import { useEffect, useState } from "react";
+import { CytoscapeElements } from "../../Cytoscape";
+const useCytoscapeElements = (targetNode) => {
+  const [elements, setElements] = useState([]);
+  useAsyncEffect(
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    async () => {
+      if (targetNode) {
+        const newElements = await CytoscapeElements.buildElements(targetNode) ?? [];
+        setElements(newElements);
+      }
+    },
+    [targetNode]
+  );
+  useEffect(() => {
+    let attachedListener = void 0;
+    let detachedListener = void 0;
+    if (targetNode) {
+      attachedListener = targetNode.on("moduleAttached", async () => {
+        const newElements = await CytoscapeElements.buildElements(targetNode) ?? [];
+        setElements(newElements);
+      });
+      detachedListener = targetNode.on("moduleDetached", async () => {
+        const newElements = await CytoscapeElements.buildElements(targetNode) ?? [];
+        setElements(newElements);
+      });
+    }
+    return () => {
+      attachedListener?.();
+      detachedListener?.();
+    };
+  }, [targetNode]);
+  return elements;
+};
+export {
+  useCytoscapeElements
+};
+//# sourceMappingURL=useCytoscapeElements.js.map

package/dist/browser/hooks/cytoscape/useCytoscapeElements.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/hooks/cytoscape/useCytoscapeElements.ts"],"sourcesContent":["import { useAsyncEffect } from '@xylabs/react-async-effect'\nimport { EventUnsubscribeFunction } from '@xyo-network/module'\nimport { NodeInstance } from '@xyo-network/node-model'\nimport { ElementDefinition } from 'cytoscape'\nimport { useEffect, useState } from 'react'\n\nimport { CytoscapeElements } from '../../Cytoscape'\n\n/**\n * Note: Relies on describe but could eventually be converted to a discover call\n * Logic would be similar to what the bridge does\n */\nexport const useCytoscapeElements = (targetNode: NodeInstance | undefined | null) => {\n  const [elements, setElements] = useState<ElementDefinition[]>([])\n\n  useAsyncEffect(\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    async () => {\n      if (targetNode) {\n        const newElements = (await CytoscapeElements.buildElements(targetNode)) ?? []\n        setElements(newElements)\n      }\n    },\n    [targetNode],\n  )\n\n  useEffect(() => {\n    let attachedListener: EventUnsubscribeFunction | undefined = undefined\n    let detachedListener: EventUnsubscribeFunction | undefined = undefined\n\n    if (targetNode) {\n      attachedListener = targetNode.on('moduleAttached', async () => {\n        const newElements = (await CytoscapeElements.buildElements(targetNode)) ?? []\n        setElements(newElements)\n      })\n      detachedListener = targetNode.on('moduleDetached', async () => {\n        const newElements = (await CytoscapeElements.buildElements(targetNode)) ?? []\n        setElements(newElements)\n      })\n    }\n\n    return () => {\n      attachedListener?.()\n      detachedListener?.()\n    }\n  }, [targetNode])\n\n  return elements\n}\n"],"mappings":"AAAA,SAAS,sBAAsB;AAI/B,SAAS,WAAW,gBAAgB;AAEpC,SAAS,yBAAyB;AAM3B,MAAM,uBAAuB,CAAC,eAAgD;AACnF,QAAM,CAAC,UAAU,WAAW,IAAI,SAA8B,CAAC,CAAC;AAEhE;AAAA;AAAA,IAEE,YAAY;AACV,UAAI,YAAY;AACd,cAAM,cAAe,MAAM,kBAAkB,cAAc,UAAU,KAAM,CAAC;AAC5E,oBAAY,WAAW;AAAA,MACzB;AAAA,IACF;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AAEA,YAAU,MAAM;AACd,QAAI,mBAAyD;AAC7D,QAAI,mBAAyD;AAE7D,QAAI,YAAY;AACd,yBAAmB,WAAW,GAAG,kBAAkB,YAAY;AAC7D,cAAM,cAAe,MAAM,kBAAkB,cAAc,UAAU,KAAM,CAAC;AAC5E,oBAAY,WAAW;AAAA,MACzB,CAAC;AACD,yBAAmB,WAAW,GAAG,kBAAkB,YAAY;AAC7D,cAAM,cAAe,MAAM,kBAAkB,cAAc,UAAU,KAAM,CAAC;AAC5E,oBAAY,WAAW;AAAA,MACzB,CAAC;AAAA,IACH;AAEA,WAAO,MAAM;AACX,yBAAmB;AACnB,yBAAmB;AAAA,IACrB;AAAA,EACF,GAAG,CAAC,UAAU,CAAC;AAEf,SAAO;AACT;","names":[]}

package/dist/browser/hooks/cytoscape/useCytoscapeLayout.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCytoscapeLayout.d.ts","sourceRoot":"","sources":["../../../../src/hooks/cytoscape/useCytoscapeLayout.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,kBAAkB,2FAU9B,CAAA"}

package/dist/browser/hooks/cytoscape/useCytoscapeLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCytoscapeLayout.d.ts","sourceRoot":"","sources":["../../../../src/hooks/cytoscape/useCytoscapeLayout.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,kBAAkB,2FAU9B,CAAA"}

package/dist/browser/hooks/cytoscape/useCytoscapeLayout.js

@@ -0,0 +1,15 @@
+import { useMemo } from "react";
+const useCytoscapeLayout = () => {
+  const layout = useMemo(
+    () => ({
+      minNodeSpacing: 75,
+      name: "concentric"
+    }),
+    []
+  );
+  return layout;
+};
+export {
+  useCytoscapeLayout
+};
+//# sourceMappingURL=useCytoscapeLayout.js.map

package/dist/browser/hooks/cytoscape/useCytoscapeLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/hooks/cytoscape/useCytoscapeLayout.ts"],"sourcesContent":["import { CytoscapeOptions } from 'cytoscape'\nimport { useMemo } from 'react'\n\nexport const useCytoscapeLayout = () => {\n  const layout: CytoscapeOptions['layout'] = useMemo(\n    () => ({\n      minNodeSpacing: 75,\n      name: 'concentric',\n    }),\n    [],\n  )\n\n  return layout\n}\n"],"mappings":"AACA,SAAS,eAAe;AAEjB,MAAM,qBAAqB,MAAM;AACtC,QAAM,SAAqC;AAAA,IACzC,OAAO;AAAA,MACL,gBAAgB;AAAA,MAChB,MAAM;AAAA,IACR;AAAA,IACA,CAAC;AAAA,EACH;AAEA,SAAO;AACT;","names":[]}

package/dist/browser/hooks/cytoscape/useCytoscapeOptions.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCytoscapeOptions.d.ts","sourceRoot":"","sources":["../../../../src/hooks/cytoscape/useCytoscapeOptions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAA;AAM5C,eAAO,MAAM,mBAAmB,aACpB,gBAAgB,CAAC,UAAU,CAAC,UAC9B,gBAAgB,CAAC,OAAO,CAAC,WACxB,gBAAgB,CAAC,QAAQ,CAAC,qBAepC,CAAA"}

package/dist/browser/hooks/cytoscape/useCytoscapeOptions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCytoscapeOptions.d.ts","sourceRoot":"","sources":["../../../../src/hooks/cytoscape/useCytoscapeOptions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAA;AAM5C,eAAO,MAAM,mBAAmB,aACpB,gBAAgB,CAAC,UAAU,CAAC,UAC9B,gBAAgB,CAAC,OAAO,CAAC,WACxB,gBAAgB,CAAC,QAAQ,CAAC,qBAepC,CAAA"}

package/dist/browser/hooks/cytoscape/useCytoscapeOptions.js

@@ -0,0 +1,20 @@
+import { useMemo } from "react";
+import { useCytoscapeLayout } from "./useCytoscapeLayout";
+import { useCytoscapeStyle } from "./useCytoscapeStyle";
+const useCytoscapeOptions = (elements, style, layout) => {
+  const defaultStyle = useCytoscapeStyle();
+  const defaultLayout = useCytoscapeLayout();
+  const options = useMemo(
+    () => ({
+      elements,
+      layout: layout ?? defaultLayout,
+      style: style ?? defaultStyle
+    }),
+    [defaultLayout, defaultStyle, elements, layout, style]
+  );
+  return options;
+};
+export {
+  useCytoscapeOptions
+};
+//# sourceMappingURL=useCytoscapeOptions.js.map