I have included the next.js and next.css files as follows:
I verified that the assets/nextjs/next.js file is available in the correct location.
The topology rendering function (initializeTopology) is called in the mounted() lifecycle hook of my Vue.js component.
[
{
"id": "727eb203886b4836",
"type": "tab",
"label": "Flow 2",
"disabled": false,
"info": "",
"env": []
},
{
"id": "30a0758880701ddd",
"type": "ui-template",
"z": "727eb203886b4836",
"group": "3c3c128a73088cb0",
"page": "",
"ui": "",
"name": "topo_trial",
"order": 1,
"width": "11",
"height": "6",
"head": "",
"format": "<template>\n <div>\n <!-- <p>hello</p> -->\n <div class=\"msg\">\n <!-- {{ msg.payload }} -->\n <div id=\"topology-container\"></div>\n </div>\n <link rel=\"alternate icon\" href=\"./favicon.ico\" type=\"image/png\" sizes=\"16x16\">\n <link rel=\"stylesheet\" href=\"assets/nextjs/next.css\">\n </div>\n\n</template>\n<script src=\"https://cdn.jsdelivr.net/npm/nextlibs/nx.min.js\"></script>\n<script src=\"assets/nextjs/next.js\"></script>\n<script>\n export default {\n data() {\n return {\n topologyData: {\n nodes: [\n { id: 0, x: 400, y: -100, name: \"ISP1\", device_type: \"cloud\", color: \"grey\" },\n { id: 1, x: 600, y: -100, name: \"ISP2\", device_type: \"cloud\", color: \"grey\" },\n { id: 2, x: 400, y: 0, name: \"Edge1\", device_type: \"router\", color: \"red\" },\n { id: 3, x: 600, y: 0, name: \"Edge2\", device_type: \"router\", color: \"red\" },\n { id: 4, x: 400, y: 100, name: \"Switch1\", device_type: \"switch\" },\n { id: 5, x: 600, y: 100, name: \"Switch2\", device_type: \"switch\" },\n { id: 6, x: 200, y: 200, name: \"ESX1\", device_type: \"server\" },\n { id: 7, x: 400, y: 200, name: \"ESX2\", device_type: \"server\" },\n { id: 8, x: 600, y: 200, name: \"ESX3\", device_type: \"server\" },\n { id: 9, x: 800, y: 200, name: \"ESX4\", device_type: \"server\" },\n { id: 10, x: 500, y: 300, name: \"SAN\", device_type: \"server\" }\n ],\n links: [\n { source: 0, target: 2, color: \"green\" },\n { source: 1, target: 3 },\n { source: 2, target: 4, color: \"green\" },\n { source: 2, target: 5 },\n { source: 3, target: 4 },\n { source: 3, target: 5 },\n { source: 4, target: 5 },\n { source: 6, target: 4, color: \"green\" },\n { source: 6, target: 5, color: \"red\" },\n { source: 7, target: 4, color: \"green\" },\n { source: 7, target: 5, color: \"red\" },\n { source: 8, target: 4, color: \"green\" },\n { source: 8, target: 5, color: \"red\" },\n { source: 9, target: 4, color: \"green\" },\n { source: 9, target: 5, color: \"red\" },\n { source: 10, target: 4, color: \"red\" },\n { source: 10, target: 5, color: \"red\" }\n ]\n },\n topologyApp: null\n };\n },\n mounted() {\n \n \n\n \n this.initializeTopology();\n \n },\n methods: {\n initializeTopology() {\n const { topologyData } = this;\n\n // Instantiate nx Application\n const app = new nx.ui.Application();\n\n // Configuration for topology\n const topologyConfig = {\n width: window.innerWidth,\n height: window.innerHeight,\n nodeConfig: {\n label: \"model.name\",\n iconType: \"model.device_type\",\n color: \"model.color\"\n },\n linkConfig: {\n linkType: \"straight\",\n color: \"model.color\"\n },\n showIcon: true\n };\n\n // Instantiate Topology\n const topology = new nx.graphic.Topology(topologyConfig);\n topology.data(topologyData);\n topology.attach(app);\n\n // Attach the app to the container\n app.container(document.getElementById(\"topology-container\"));\n\n // Save the app reference\n this.topologyApp = app;\n }\n },\n unmounted() {\n // Clean up when the component is destroyed\n if (this.topologyApp) {\n this.topologyApp.destroy();\n }\n }\n };\n</script>\n\n<style>\n #topology-container {\n width: 100%;\n height: 100%;\n background-color: #f0f0f0;\n }\n</style>\n",
"storeOutMessages": true,
"passthru": true,
"resendOnRefresh": true,
"templateScope": "local",
"className": "",
"x": 280,
"y": 160,
"wires": [
[]
]
},
{
"id": "3c3c128a73088cb0",
"type": "ui-group",
"name": "topology",
"page": "7c0feb07efa735af",
"width": "11",
"height": "1",
"order": 1,
"showTitle": true,
"className": "",
"visible": "true",
"disabled": "false",
"groupType": "default"
},
{
"id": "7c0feb07efa735af",
"type": "ui-page",
"name": "topo",
"ui": "64fc71361e24a0d0",
"path": "/page4",
"icon": "home",
"layout": "grid",
"theme": "",
"breakpoints": [
{
"name": "Default",
"px": "0",
"cols": "3"
},
{
"name": "Tablet",
"px": "576",
"cols": "6"
},
{
"name": "Small Desktop",
"px": "768",
"cols": "9"
},
{
"name": "Desktop",
"px": "1024",
"cols": "12"
}
],
"order": 4,
"className": "",
"visible": "true",
"disabled": "false"
},
{
"id": "64fc71361e24a0d0",
"type": "ui-base",
"name": "",
"path": "/dashboard",
"appIcon": "",
"includeClientData": true,
"acceptsClientConfig": [
"ui-iframe",
"ui-control",
"ui-template",
"ui-gauge",
"ui-chart",
"ui-slider",
"ui-form",
"ui-text-input",
"ui-number-input",
"ui-file-input",
"ui-button",
"ui-button-group",
"ui-dropdown",
"ui-radio-group",
"ui-switch",
"ui-text",
"ui-chart",
"ui-form",
"ui-number-input",
"ui-switch",
"ui-table",
"ui-gauge",
"ui-markdown",
"ui-iframe",
"ui-tabulator",
"ui-radio-group",
"ui-dropdown",
"ui-button-group",
"ui-file-input"
],
"showPathInSidebar": false,
"showPageTitle": false,
"navigationStyle": "icon",
"titleBarStyle": "fixed"
}
]
this is my error
ReferenceError: nx is not defined
at Proxy.initializeTopology (eval at (index-TznpjNEy.js:241:3017), :3:17)
at Proxy.mounted (eval at (index-TznpjNEy.js:241:3500), :2:10)
at Proxy.mounted (index-TznpjNEy.js:241:6528)
