@xyo-network/react-node-renderer 2.64.1 → 2.64.4

package/dist/node/hooks/cytoscape/useAddNewElements.d.mts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useAddNewElements.d.ts","sourceRoot":"","sources":["../../../../src/hooks/cytoscape/useAddNewElements.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAA;AAO7C,eAAO,MAAM,iBAAiB,iBAAiB,iBAAiB,EAAE,eAAoB,OAAO,SAW5F,CAAA"}

package/dist/node/hooks/cytoscape/useAddNewElements.d.ts

@@ -1,3 +0,0 @@
-import { ElementDefinition } from 'cytoscape';
-export declare const useAddNewElements: (newElements?: ElementDefinition[], hideLabels?: boolean) => void;
-//# sourceMappingURL=useAddNewElements.d.ts.map

package/dist/node/hooks/cytoscape/useAddNewElements.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useAddNewElements.d.ts","sourceRoot":"","sources":["../../../../src/hooks/cytoscape/useAddNewElements.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAA;AAO7C,eAAO,MAAM,iBAAiB,iBAAiB,iBAAiB,EAAE,eAAoB,OAAO,SAW5F,CAAA"}

package/dist/node/hooks/cytoscape/useAddNewElements.js

@@ -1,66 +0,0 @@
-// src/hooks/cytoscape/useAddNewElements.tsx
-import { useEffect } from "react";
-
-// src/contexts/CytoscapeInstance/Context.ts
-import { createContextEx } from "@xyo-network/react-shared";
-var CytoscapeInstanceContext = createContextEx();
-
-// src/contexts/CytoscapeInstance/use.ts
-import { useContextEx } from "@xyo-network/react-shared";
-var useCytoscapeInstance = (required = false) => useContextEx(CytoscapeInstanceContext, "CytoscapeInstance", required);
-
-// src/Cytoscape/lib/layout/ColaLayout.ts
-var ColaLayout = {
-  centerGraph: false,
-  convergenceThreshold: 0.01,
-  name: "cola"
-};
-
-// src/hooks/cytoscape/usePopperListener.tsx
-import { useTheme } from "@mui/material";
-import { useCallback } from "react";
-var usePopperListener = () => {
-  const theme = useTheme();
-  const popperListener = useCallback(
-    (node, hideLabels, cy) => {
-      const div = document.createElement("div");
-      const shadowColor = theme.palette.getContrastText(theme.palette.text.primary);
-      const popper = node.popper({
-        content: () => {
-          div.innerHTML = node.data().name;
-          div.style.opacity = "0";
-          div.style.transition = "opacity .25s";
-          div.style.textShadow = `0 0 3px ${shadowColor}`;
-          document.body.appendChild(div);
-          return div;
-        }
-      });
-      const update = async () => {
-        await popper.update();
-      };
-      node.on("position", update);
-      node.on("mouseover", () => hideLabels ? div.style.opacity = "1" : void 0);
-      node.on("mouseout", () => hideLabels ? div.style.opacity = "0" : void 0);
-      cy == null ? void 0 : cy.on("pan zoom resize", update);
-    },
-    [theme]
-  );
-  return popperListener;
-};
-
-// src/hooks/cytoscape/useAddNewElements.tsx
-var useAddNewElements = (newElements = [], hideLabels) => {
-  const { cy } = useCytoscapeInstance(true);
-  const popperListener = usePopperListener();
-  useEffect(() => {
-    if (newElements.length > 1) {
-      const renderedElements = cy == null ? void 0 : cy.add(newElements);
-      renderedElements == null ? void 0 : renderedElements.nodes().forEach((node) => popperListener(node, hideLabels, cy));
-      cy == null ? void 0 : cy.layout(ColaLayout).run();
-    }
-  }, [cy, hideLabels, newElements, popperListener]);
-};
-export {
-  useAddNewElements
-};
-//# sourceMappingURL=useAddNewElements.js.map

package/dist/node/hooks/cytoscape/useAddNewElements.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../../src/hooks/cytoscape/useAddNewElements.tsx","../../../../src/contexts/CytoscapeInstance/Context.ts","../../../../src/contexts/CytoscapeInstance/use.ts","../../../../src/Cytoscape/lib/layout/ColaLayout.ts","../../../../src/hooks/cytoscape/usePopperListener.tsx"],"sourcesContent":["import { ElementDefinition } from 'cytoscape'\nimport { useEffect } from 'react'\n\nimport { useCytoscapeInstance } from '../../contexts'\nimport { ColaLayout } from '../../Cytoscape'\nimport { usePopperListener } from './usePopperListener'\n\nexport const useAddNewElements = (newElements: ElementDefinition[] = [], hideLabels?: boolean) => {\n  const { cy } = useCytoscapeInstance(true)\n  const popperListener = usePopperListener()\n\n  useEffect(() => {\n    if (newElements.length > 1) {\n      const renderedElements = cy?.add(newElements)\n      renderedElements?.nodes().forEach((node) => popperListener(node, hideLabels, cy))\n      cy?.layout(ColaLayout).run()\n    }\n  }, [cy, hideLabels, newElements, popperListener])\n}\n","import { createContextEx } from '@xyo-network/react-shared'\n\nimport { CytoscapeInstanceState } from './State'\n\nexport const CytoscapeInstanceContext = createContextEx<CytoscapeInstanceState>()\n","import { useContextEx } from '@xyo-network/react-shared'\n\nimport { CytoscapeInstanceContext } from './Context'\n\nexport const useCytoscapeInstance = (required = false) => useContextEx(CytoscapeInstanceContext, 'CytoscapeInstance', required)\n","export const ColaLayout = {\n  centerGraph: false,\n  convergenceThreshold: 0.01,\n  name: 'cola',\n}\n","import { useTheme } from '@mui/material'\nimport { Core, NodeSingular } from 'cytoscape'\nimport { useCallback } from 'react'\n\nexport const usePopperListener = () => {\n  const theme = useTheme()\n\n  const popperListener = useCallback(\n    (node: NodeSingular, hideLabels?: boolean, cy?: Core) => {\n      const div = document.createElement('div')\n      const shadowColor = theme.palette.getContrastText(theme.palette.text.primary)\n\n      const popper = node.popper({\n        content: () => {\n          div.innerHTML = node.data().name\n          div.style.opacity = '0'\n          div.style.transition = 'opacity .25s'\n          div.style.textShadow = `0 0 3px ${shadowColor}`\n\n          document.body.appendChild(div)\n\n          return div\n        },\n      })\n\n      const update = async () => {\n        await popper.update()\n      }\n\n      node.on('position', update)\n      node.on('mouseover', () => (hideLabels ? (div.style.opacity = '1') : undefined))\n      node.on('mouseout', () => (hideLabels ? (div.style.opacity = '0') : undefined))\n\n      cy?.on('pan zoom resize', update)\n    },\n    [theme],\n  )\n\n  return popperListener\n}\n"],"mappings":";AACA,SAAS,iBAAiB;;;ACD1B,SAAS,uBAAuB;AAIzB,IAAM,2BAA2B,gBAAwC;;;ACJhF,SAAS,oBAAoB;AAItB,IAAM,uBAAuB,CAAC,WAAW,UAAU,aAAa,0BAA0B,qBAAqB,QAAQ;;;ACJvH,IAAM,aAAa;AAAA,EACxB,aAAa;AAAA,EACb,sBAAsB;AAAA,EACtB,MAAM;AACR;;;ACJA,SAAS,gBAAgB;AAEzB,SAAS,mBAAmB;AAErB,IAAM,oBAAoB,MAAM;AACrC,QAAM,QAAQ,SAAS;AAEvB,QAAM,iBAAiB;AAAA,IACrB,CAAC,MAAoB,YAAsB,OAAc;AACvD,YAAM,MAAM,SAAS,cAAc,KAAK;AACxC,YAAM,cAAc,MAAM,QAAQ,gBAAgB,MAAM,QAAQ,KAAK,OAAO;AAE5E,YAAM,SAAS,KAAK,OAAO;AAAA,QACzB,SAAS,MAAM;AACb,cAAI,YAAY,KAAK,KAAK,EAAE;AAC5B,cAAI,MAAM,UAAU;AACpB,cAAI,MAAM,aAAa;AACvB,cAAI,MAAM,aAAa,WAAW,WAAW;AAE7C,mBAAS,KAAK,YAAY,GAAG;AAE7B,iBAAO;AAAA,QACT;AAAA,MACF,CAAC;AAED,YAAM,SAAS,YAAY;AACzB,cAAM,OAAO,OAAO;AAAA,MACtB;AAEA,WAAK,GAAG,YAAY,MAAM;AAC1B,WAAK,GAAG,aAAa,MAAO,aAAc,IAAI,MAAM,UAAU,MAAO,MAAU;AAC/E,WAAK,GAAG,YAAY,MAAO,aAAc,IAAI,MAAM,UAAU,MAAO,MAAU;AAE9E,+BAAI,GAAG,mBAAmB;AAAA,IAC5B;AAAA,IACA,CAAC,KAAK;AAAA,EACR;AAEA,SAAO;AACT;;;AJhCO,IAAM,oBAAoB,CAAC,cAAmC,CAAC,GAAG,eAAyB;AAChG,QAAM,EAAE,GAAG,IAAI,qBAAqB,IAAI;AACxC,QAAM,iBAAiB,kBAAkB;AAEzC,YAAU,MAAM;AACd,QAAI,YAAY,SAAS,GAAG;AAC1B,YAAM,mBAAmB,yBAAI,IAAI;AACjC,2DAAkB,QAAQ,QAAQ,CAAC,SAAS,eAAe,MAAM,YAAY,EAAE;AAC/E,+BAAI,OAAO,YAAY;AAAA,IACzB;AAAA,EACF,GAAG,CAAC,IAAI,YAAY,aAAa,cAAc,CAAC;AAClD;","names":[]}

package/dist/node/hooks/cytoscape/usePopperListener.cjs

@@ -1,60 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/hooks/cytoscape/usePopperListener.tsx
-var usePopperListener_exports = {};
-__export(usePopperListener_exports, {
-  usePopperListener: () => usePopperListener
-});
-module.exports = __toCommonJS(usePopperListener_exports);
-var import_material = require("@mui/material");
-var import_react = require("react");
-var usePopperListener = () => {
-  const theme = (0, import_material.useTheme)();
-  const popperListener = (0, import_react.useCallback)(
-    (node, hideLabels, cy) => {
-      const div = document.createElement("div");
-      const shadowColor = theme.palette.getContrastText(theme.palette.text.primary);
-      const popper = node.popper({
-        content: () => {
-          div.innerHTML = node.data().name;
-          div.style.opacity = "0";
-          div.style.transition = "opacity .25s";
-          div.style.textShadow = `0 0 3px ${shadowColor}`;
-          document.body.appendChild(div);
-          return div;
-        }
-      });
-      const update = async () => {
-        await popper.update();
-      };
-      node.on("position", update);
-      node.on("mouseover", () => hideLabels ? div.style.opacity = "1" : void 0);
-      node.on("mouseout", () => hideLabels ? div.style.opacity = "0" : void 0);
-      cy == null ? void 0 : cy.on("pan zoom resize", update);
-    },
-    [theme]
-  );
-  return popperListener;
-};
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  usePopperListener
-});
-//# sourceMappingURL=usePopperListener.cjs.map

package/dist/node/hooks/cytoscape/usePopperListener.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../../src/hooks/cytoscape/usePopperListener.tsx"],"sourcesContent":["import { useTheme } from '@mui/material'\nimport { Core, NodeSingular } from 'cytoscape'\nimport { useCallback } from 'react'\n\nexport const usePopperListener = () => {\n  const theme = useTheme()\n\n  const popperListener = useCallback(\n    (node: NodeSingular, hideLabels?: boolean, cy?: Core) => {\n      const div = document.createElement('div')\n      const shadowColor = theme.palette.getContrastText(theme.palette.text.primary)\n\n      const popper = node.popper({\n        content: () => {\n          div.innerHTML = node.data().name\n          div.style.opacity = '0'\n          div.style.transition = 'opacity .25s'\n          div.style.textShadow = `0 0 3px ${shadowColor}`\n\n          document.body.appendChild(div)\n\n          return div\n        },\n      })\n\n      const update = async () => {\n        await popper.update()\n      }\n\n      node.on('position', update)\n      node.on('mouseover', () => (hideLabels ? (div.style.opacity = '1') : undefined))\n      node.on('mouseout', () => (hideLabels ? (div.style.opacity = '0') : undefined))\n\n      cy?.on('pan zoom resize', update)\n    },\n    [theme],\n  )\n\n  return popperListener\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAAyB;AAEzB,mBAA4B;AAErB,IAAM,oBAAoB,MAAM;AACrC,QAAM,YAAQ,0BAAS;AAEvB,QAAM,qBAAiB;AAAA,IACrB,CAAC,MAAoB,YAAsB,OAAc;AACvD,YAAM,MAAM,SAAS,cAAc,KAAK;AACxC,YAAM,cAAc,MAAM,QAAQ,gBAAgB,MAAM,QAAQ,KAAK,OAAO;AAE5E,YAAM,SAAS,KAAK,OAAO;AAAA,QACzB,SAAS,MAAM;AACb,cAAI,YAAY,KAAK,KAAK,EAAE;AAC5B,cAAI,MAAM,UAAU;AACpB,cAAI,MAAM,aAAa;AACvB,cAAI,MAAM,aAAa,WAAW,WAAW;AAE7C,mBAAS,KAAK,YAAY,GAAG;AAE7B,iBAAO;AAAA,QACT;AAAA,MACF,CAAC;AAED,YAAM,SAAS,YAAY;AACzB,cAAM,OAAO,OAAO;AAAA,MACtB;AAEA,WAAK,GAAG,YAAY,MAAM;AAC1B,WAAK,GAAG,aAAa,MAAO,aAAc,IAAI,MAAM,UAAU,MAAO,MAAU;AAC/E,WAAK,GAAG,YAAY,MAAO,aAAc,IAAI,MAAM,UAAU,MAAO,MAAU;AAE9E,+BAAI,GAAG,mBAAmB;AAAA,IAC5B;AAAA,IACA,CAAC,KAAK;AAAA,EACR;AAEA,SAAO;AACT;","names":[]}

package/dist/node/hooks/cytoscape/usePopperListener.d.cts

@@ -1,3 +0,0 @@
-import { Core, NodeSingular } from 'cytoscape';
-export declare const usePopperListener: () => (node: NodeSingular, hideLabels?: boolean, cy?: Core) => void;
-//# sourceMappingURL=usePopperListener.d.ts.map

package/dist/node/hooks/cytoscape/usePopperListener.d.cts.map

@@ -1 +0,0 @@
-{"version":3,"file":"usePopperListener.d.ts","sourceRoot":"","sources":["../../../../src/hooks/cytoscape/usePopperListener.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAG9C,eAAO,MAAM,iBAAiB,eAInB,YAAY,eAAe,OAAO,OAAO,IAAI,SA+BvD,CAAA"}

package/dist/node/hooks/cytoscape/usePopperListener.d.mts

@@ -1,3 +0,0 @@
-import { Core, NodeSingular } from 'cytoscape';
-export declare const usePopperListener: () => (node: NodeSingular, hideLabels?: boolean, cy?: Core) => void;
-//# sourceMappingURL=usePopperListener.d.ts.map

package/dist/node/hooks/cytoscape/usePopperListener.d.mts.map

@@ -1 +0,0 @@
-{"version":3,"file":"usePopperListener.d.ts","sourceRoot":"","sources":["../../../../src/hooks/cytoscape/usePopperListener.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAG9C,eAAO,MAAM,iBAAiB,eAInB,YAAY,eAAe,OAAO,OAAO,IAAI,SA+BvD,CAAA"}

package/dist/node/hooks/cytoscape/usePopperListener.d.ts

@@ -1,3 +0,0 @@
-import { Core, NodeSingular } from 'cytoscape';
-export declare const usePopperListener: () => (node: NodeSingular, hideLabels?: boolean, cy?: Core) => void;
-//# sourceMappingURL=usePopperListener.d.ts.map

package/dist/node/hooks/cytoscape/usePopperListener.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"usePopperListener.d.ts","sourceRoot":"","sources":["../../../../src/hooks/cytoscape/usePopperListener.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAG9C,eAAO,MAAM,iBAAiB,eAInB,YAAY,eAAe,OAAO,OAAO,IAAI,SA+BvD,CAAA"}

package/dist/node/hooks/cytoscape/usePopperListener.js

@@ -1,35 +0,0 @@
-// src/hooks/cytoscape/usePopperListener.tsx
-import { useTheme } from "@mui/material";
-import { useCallback } from "react";
-var usePopperListener = () => {
-  const theme = useTheme();
-  const popperListener = useCallback(
-    (node, hideLabels, cy) => {
-      const div = document.createElement("div");
-      const shadowColor = theme.palette.getContrastText(theme.palette.text.primary);
-      const popper = node.popper({
-        content: () => {
-          div.innerHTML = node.data().name;
-          div.style.opacity = "0";
-          div.style.transition = "opacity .25s";
-          div.style.textShadow = `0 0 3px ${shadowColor}`;
-          document.body.appendChild(div);
-          return div;
-        }
-      });
-      const update = async () => {
-        await popper.update();
-      };
-      node.on("position", update);
-      node.on("mouseover", () => hideLabels ? div.style.opacity = "1" : void 0);
-      node.on("mouseout", () => hideLabels ? div.style.opacity = "0" : void 0);
-      cy == null ? void 0 : cy.on("pan zoom resize", update);
-    },
-    [theme]
-  );
-  return popperListener;
-};
-export {
-  usePopperListener
-};
-//# sourceMappingURL=usePopperListener.js.map

package/dist/node/hooks/cytoscape/usePopperListener.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../../src/hooks/cytoscape/usePopperListener.tsx"],"sourcesContent":["import { useTheme } from '@mui/material'\nimport { Core, NodeSingular } from 'cytoscape'\nimport { useCallback } from 'react'\n\nexport const usePopperListener = () => {\n  const theme = useTheme()\n\n  const popperListener = useCallback(\n    (node: NodeSingular, hideLabels?: boolean, cy?: Core) => {\n      const div = document.createElement('div')\n      const shadowColor = theme.palette.getContrastText(theme.palette.text.primary)\n\n      const popper = node.popper({\n        content: () => {\n          div.innerHTML = node.data().name\n          div.style.opacity = '0'\n          div.style.transition = 'opacity .25s'\n          div.style.textShadow = `0 0 3px ${shadowColor}`\n\n          document.body.appendChild(div)\n\n          return div\n        },\n      })\n\n      const update = async () => {\n        await popper.update()\n      }\n\n      node.on('position', update)\n      node.on('mouseover', () => (hideLabels ? (div.style.opacity = '1') : undefined))\n      node.on('mouseout', () => (hideLabels ? (div.style.opacity = '0') : undefined))\n\n      cy?.on('pan zoom resize', update)\n    },\n    [theme],\n  )\n\n  return popperListener\n}\n"],"mappings":";AAAA,SAAS,gBAAgB;AAEzB,SAAS,mBAAmB;AAErB,IAAM,oBAAoB,MAAM;AACrC,QAAM,QAAQ,SAAS;AAEvB,QAAM,iBAAiB;AAAA,IACrB,CAAC,MAAoB,YAAsB,OAAc;AACvD,YAAM,MAAM,SAAS,cAAc,KAAK;AACxC,YAAM,cAAc,MAAM,QAAQ,gBAAgB,MAAM,QAAQ,KAAK,OAAO;AAE5E,YAAM,SAAS,KAAK,OAAO;AAAA,QACzB,SAAS,MAAM;AACb,cAAI,YAAY,KAAK,KAAK,EAAE;AAC5B,cAAI,MAAM,UAAU;AACpB,cAAI,MAAM,aAAa;AACvB,cAAI,MAAM,aAAa,WAAW,WAAW;AAE7C,mBAAS,KAAK,YAAY,GAAG;AAE7B,iBAAO;AAAA,QACT;AAAA,MACF,CAAC;AAED,YAAM,SAAS,YAAY;AACzB,cAAM,OAAO,OAAO;AAAA,MACtB;AAEA,WAAK,GAAG,YAAY,MAAM;AAC1B,WAAK,GAAG,aAAa,MAAO,aAAc,IAAI,MAAM,UAAU,MAAO,MAAU;AAC/E,WAAK,GAAG,YAAY,MAAO,aAAc,IAAI,MAAM,UAAU,MAAO,MAAU;AAE9E,+BAAI,GAAG,mBAAmB;AAAA,IAC5B;AAAA,IACA,CAAC,KAAK;AAAA,EACR;AAEA,SAAO;AACT;","names":[]}

package/src/components/ModuleGraphFlexBox.tsx

@@ -1,56 +0,0 @@
-import { Button } from '@mui/material'
-import { FlexBoxProps } from '@xylabs/react-flexbox'
-import { ModuleInstance } from '@xyo-network/module'
-import { EventObject } from 'cytoscape'
-import { useEffect } from 'react'
-
-import { useCytoscapeInstance } from '../contexts'
-import { useAddNewElements, useNewElements, usePopperListener, useRelationalGraphOptions } from '../hooks'
-import { WithExtensions } from './cytoscape-extensions'
-import { NodeRelationalGraphFlexBox } from './RelationalGraph'
-
-export interface ModuleGraphFlexBoxProps extends FlexBoxProps {
-  rootModule?: ModuleInstance | null
-}
-
-export const ModuleGraphFlexBox: React.FC<ModuleGraphFlexBoxProps> = ({ rootModule, ...props }) => {
-  const { cy } = useCytoscapeInstance(true)
-  const popperListener = usePopperListener()
-  const { handleToggleLabels, hideLabels, options } = useRelationalGraphOptions(rootModule ?? undefined)
-
-  const { newElements, setSelectedElement } = useNewElements()
-
-  useAddNewElements(newElements, hideLabels)
-
-  useEffect(() => {
-    const listener = (event: EventObject) => {
-      const element = event.target[0]
-      if (element.isNode()) setSelectedElement(element)
-    }
-    cy?.on('select', listener)
-
-    return () => {
-      cy?.off('select', listener)
-    }
-  }, [cy, setSelectedElement])
-
-  useEffect(() => {
-    cy?.ready(() => {
-      cy.nodes().forEach((node) => popperListener(node, hideLabels, cy))
-    })
-  }, [cy, hideLabels, popperListener, setSelectedElement])
-
-  return (
-    <WithExtensions>
-      <NodeRelationalGraphFlexBox
-        actions={
-          <Button size={'small'} onClick={handleToggleLabels} variant="contained">
-            Toggle Labels
-          </Button>
-        }
-        options={options}
-        {...props}
-      />
-    </WithExtensions>
-  )
-}

package/src/components/WithCola.tsx

@@ -1,13 +0,0 @@
-import { use } from 'cytoscape'
-import cola from 'cytoscape-cola'
-import { PropsWithChildren, useEffect, useState } from 'react'
-
-export const WithCola: React.FC<PropsWithChildren> = ({ children }) => {
-  const [initialized, setInitialized] = useState(false)
-  useEffect(() => {
-    use(cola)
-    setInitialized(true)
-  }, [])
-
-  return <>{initialized ? children : undefined}</>
-}

package/src/hooks/cytoscape/useAddNewElements.tsx

@@ -1,19 +0,0 @@
-import { ElementDefinition } from 'cytoscape'
-import { useEffect } from 'react'
-
-import { useCytoscapeInstance } from '../../contexts'
-import { ColaLayout } from '../../Cytoscape'
-import { usePopperListener } from './usePopperListener'
-
-export const useAddNewElements = (newElements: ElementDefinition[] = [], hideLabels?: boolean) => {
-  const { cy } = useCytoscapeInstance(true)
-  const popperListener = usePopperListener()
-
-  useEffect(() => {
-    if (newElements.length > 1) {
-      const renderedElements = cy?.add(newElements)
-      renderedElements?.nodes().forEach((node) => popperListener(node, hideLabels, cy))
-      cy?.layout(ColaLayout).run()
-    }
-  }, [cy, hideLabels, newElements, popperListener])
-}

package/src/hooks/cytoscape/usePopperListener.tsx

@@ -1,40 +0,0 @@
-import { useTheme } from '@mui/material'
-import { Core, NodeSingular } from 'cytoscape'
-import { useCallback } from 'react'
-
-export const usePopperListener = () => {
-  const theme = useTheme()
-
-  const popperListener = useCallback(
-    (node: NodeSingular, hideLabels?: boolean, cy?: Core) => {
-      const div = document.createElement('div')
-      const shadowColor = theme.palette.getContrastText(theme.palette.text.primary)
-
-      const popper = node.popper({
-        content: () => {
-          div.innerHTML = node.data().name
-          div.style.opacity = '0'
-          div.style.transition = 'opacity .25s'
-          div.style.textShadow = `0 0 3px ${shadowColor}`
-
-          document.body.appendChild(div)
-
-          return div
-        },
-      })
-
-      const update = async () => {
-        await popper.update()
-      }
-
-      node.on('position', update)
-      node.on('mouseover', () => (hideLabels ? (div.style.opacity = '1') : undefined))
-      node.on('mouseout', () => (hideLabels ? (div.style.opacity = '0') : undefined))
-
-      cy?.on('pan zoom resize', update)
-    },
-    [theme],
-  )
-
-  return popperListener
-}