pasupulaphani · May 20, 2025 15:36
diff --git a/graph_viewer.html b/graph_viewer.html
 <!DOCTYPE html>
 <html>
 <head>
  <meta charset="UTF-8" />
  <title>G6 API-Loaded Tree</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/antv-g6/4.8.21/g6.min.js"></script>
  <style>
    body {
      margin: 0;
      padding: 0;
      font-family: sans-serif;
    }
    #graph-wrapper {
      width: 100%;
      height: 600px; /* container height restricted */
      border: 2px solid #ddd;
      overflow: hidden;
      position: relative;
    }
    #contextMenu {
      display: none;
      position: absolute;
      background: white;
      border: 1px solid #aaa;
      padding: 8px;
      font-size: 14px;
      z-index: 1000;
    }
  </style>
 </head>
 <body>

  <h2 style="margin:10px">API-Based G6 Graph</h2>
  <div id="graph-wrapper">
    <div id="graph-container" style="width:100%; height:100%;"></div>
    <div id="contextMenu">🔍 View Details</div>
  </div>

  <script>
    // Dummy API call simulation
    function fetchGraphData() {
      return new Promise(resolve => {
        setTimeout(() => {
          resolve({
            id: 'root',
            label: 'Root',
            children: [
              {
                id: 'child1',
                label: 'Child 1',
                children: [
                  { id: 'grandchild1', label: 'Grandchild 1' },
                  { id: 'grandchild2', label: 'Grandchild 2' }
                ]
              },
              { id: 'child2', label: 'Child 2' }
            ]
          });
        }, 500); // simulate 500ms latency
      });
    }

    async function renderGraph() {
      const data = await fetchGraphData();

      const container = document.getElementById('graph-container');
      const width = container.clientWidth;
      const height = container.clientHeight;

      const graph = new G6.TreeGraph({
        container,
        width,
        height,
        modes: {
          default: [
            'drag-canvas',
            'zoom-canvas',
            'drag-node',
            'collapse-expand'
          ]
        },
        defaultNode: {
          type: 'rect',
          size: [120, 40],
          style: {
            fill: '#e6f7ff',
            stroke: '#1890ff',
            radius: 6
          },
          labelCfg: {
            style: {
              fill: '#000',
              fontSize: 14
            }
          }
        },
        defaultEdge: {
          type: 'cubic-horizontal',
          style: {
            stroke: '#ccc'
          }
        },
        layout: {
          type: 'compactBox',
          direction: 'TB',
          getId: d => d.id,
          getHeight: () => 50,
          getWidth: () => 120,
          getVGap: () => 30,
          getHGap: () => 50
        }
      });

      graph.data(data);
      graph.render();
      graph.fitView(); // fits it to container

      // Interaction: Tooltip hover
      graph.on('node:mouseenter', evt => {
        const node = evt.item;
        const model = node.getModel();
        graph.setItemState(node, 'hover', true);
        graph.updateItem(node, {
          label: `${model.label} (hovering)`
        });
      });

      graph.on('node:mouseleave', evt => {
        const node = evt.item;
        const model = node.getModel();
        graph.setItemState(node, 'hover', false);
        graph.updateItem(node, {
          label: model.label.replace(/ \(hovering\)/, '')
        });
      });

      // Click Event
      graph.on('node:click', evt => {
        alert(`Clicked node: ${evt.item.getModel().label}`);
      });

      // Right-click Context Menu
      const contextMenu = document.getElementById('contextMenu');
      let currentNode = null;

      graph.on('node:contextmenu', evt => {
        evt.originalEvent.preventDefault();
        currentNode = evt.item.getModel();
        contextMenu.style.left = evt.canvasX + 'px';
        contextMenu.style.top = evt.canvasY + 'px';
        contextMenu.style.display = 'block';
      });

      document.addEventListener('click', () => {
        contextMenu.style.display = 'none';
      });

      contextMenu.addEventListener('click', () => {
        if (currentNode) {
          alert(`Viewing details for: ${currentNode.label}`);
          contextMenu.style.display = 'none';
        }
      });
    }

    renderGraph();
  </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8" />
	<title>G6 API-Loaded Tree</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/antv-g6/4.8.21/g6.min.js"></script>
	<style>
	body {
	margin: 0;
	padding: 0;
	font-family: sans-serif;
	}
	#graph-wrapper {
	width: 100%;
	height: 600px; /* container height restricted */
	border: 2px solid #ddd;
	overflow: hidden;
	position: relative;
	}
	#contextMenu {
	display: none;
	position: absolute;
	background: white;
	border: 1px solid #aaa;
	padding: 8px;
	font-size: 14px;
	z-index: 1000;
	}
	</style>
	</head>
	<body>

	<h2 style="margin:10px">API-Based G6 Graph</h2>
	<div id="graph-wrapper">
	<div id="graph-container" style="width:100%; height:100%;"></div>
	<div id="contextMenu">🔍 View Details</div>
	</div>

	<script>
	// Dummy API call simulation
	function fetchGraphData() {
	return new Promise(resolve => {
	setTimeout(() => {
	resolve({
	id: 'root',
	label: 'Root',
	children: [
	{
	id: 'child1',
	label: 'Child 1',
	children: [
	{ id: 'grandchild1', label: 'Grandchild 1' },
	{ id: 'grandchild2', label: 'Grandchild 2' }
	]
	},
	{ id: 'child2', label: 'Child 2' }
	]
	});
	}, 500); // simulate 500ms latency
	});
	}

	async function renderGraph() {
	const data = await fetchGraphData();

	const container = document.getElementById('graph-container');
	const width = container.clientWidth;
	const height = container.clientHeight;

	const graph = new G6.TreeGraph({
	container,
	width,
	height,
	modes: {
	default: [
	'drag-canvas',
	'zoom-canvas',
	'drag-node',
	'collapse-expand'
	]
	},
	defaultNode: {
	type: 'rect',
	size: [120, 40],
	style: {
	fill: '#e6f7ff',
	stroke: '#1890ff',
	radius: 6
	},
	labelCfg: {
	style: {
	fill: '#000',
	fontSize: 14
	}
	}
	},
	defaultEdge: {
	type: 'cubic-horizontal',
	style: {
	stroke: '#ccc'
	}
	},
	layout: {
	type: 'compactBox',
	direction: 'TB',
	getId: d => d.id,
	getHeight: () => 50,
	getWidth: () => 120,
	getVGap: () => 30,
	getHGap: () => 50
	}
	});

	graph.data(data);
	graph.render();
	graph.fitView(); // fits it to container

	// Interaction: Tooltip hover
	graph.on('node:mouseenter', evt => {
	const node = evt.item;
	const model = node.getModel();
	graph.setItemState(node, 'hover', true);
	graph.updateItem(node, {
	label: `${model.label} (hovering)`
	});
	});

	graph.on('node:mouseleave', evt => {
	const node = evt.item;
	const model = node.getModel();
	graph.setItemState(node, 'hover', false);
	graph.updateItem(node, {
	label: model.label.replace(/ \(hovering\)/, '')
	});
	});

	// Click Event
	graph.on('node:click', evt => {
	alert(`Clicked node: ${evt.item.getModel().label}`);
	});

	// Right-click Context Menu
	const contextMenu = document.getElementById('contextMenu');
	let currentNode = null;

	graph.on('node:contextmenu', evt => {
	evt.originalEvent.preventDefault();
	currentNode = evt.item.getModel();
	contextMenu.style.left = evt.canvasX + 'px';
	contextMenu.style.top = evt.canvasY + 'px';
	contextMenu.style.display = 'block';
	});

	document.addEventListener('click', () => {
	contextMenu.style.display = 'none';
	});

	contextMenu.addEventListener('click', () => {
	if (currentNode) {
	alert(`Viewing details for: ${currentNode.label}`);
	contextMenu.style.display = 'none';
	}
	});
	}

	renderGraph();
	</script>
	</body>
	</html>