carld · February 2, 2025 08:55
diff --git a/graph.html b/graph.html
 <!DOCTYPE html>
 <html>
 <head>
 <meta charset=utf-8 />
 <meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
 <title>Compound nodes</title>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.30.4/cytoscape.min.js"></script>
 <style>
 body { 
  font: 14px helvetica neue, helvetica, arial, sans-serif;
 }

 #cy {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
 }
 </style>
 </head>
 <body>
 <div id="cy"></div>
 <script>
 /* Domain graph */
 var exp0 = {

 };
 /* Domain graph evaluator */
 var eval0 = function(exp) {

 };

 /* Cytoscape below */
 var cy = window.cy = cytoscape({
  container: document.getElementById('cy'),

  boxSelectionEnabled: false,

  style: [
    {
      selector: 'node',
      css: {
        'shape': 'rectangle',
        'content': function(ele) { return 'yo!' + ele.data('id'); } /*'data(id)'*/,
        'text-valign': 'center',
        'text-halign': 'center'
      }
    },
    {
      selector: ':parent',
      css: {
        'text-valign': 'top',
        'text-halign': 'center',
        'shape': 'round-rectangle',
        'corner-radius': "10",
        'padding': 10
      }
    },
    {
      selector: 'node#e',
      css: {
        'corner-radius': "10",
        'padding': 0
      }
    },
    {
      selector: 'edge',
      css: {
        'curve-style': 'bezier',
        'target-arrow-shape': 'triangle'
      }
    }
  ],

  elements: {
    nodes: [
      { data: { id: 'a', parent: 'b' }, position: { x: 215, y: 85 } },
      { data: { id: 'b' } },
      { data: { id: 'c', parent: 'b' }, position: { x: 300, y: 85 } },
      { data: { id: 'd' }, position: { x: 215, y: 175 } },
      { data: { id: 'e' } },
      { data: { id: 'f', parent: 'e' }, position: { x: 300, y: 175 } }
    ],
    edges: [
      { data: { id: 'ad', source: 'a', target: 'd' } },
      { data: { id: 'eb', source: 'e', target: 'b' } }

    ]
  },

  layout: {
    name: 'grid',
    padding: 5
  }
 });
 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset=utf-8 />
	<meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
	<title>Compound nodes</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.30.4/cytoscape.min.js"></script>
	<style>
	body {
	font: 14px helvetica neue, helvetica, arial, sans-serif;
	}

	#cy {
	height: 100%;
	width: 100%;
	position: absolute;
	left: 0;
	top: 0;
	}
	</style>
	</head>
	<body>
	<div id="cy"></div>
	<script>
	/* Domain graph */
	var exp0 = {

	};
	/* Domain graph evaluator */
	var eval0 = function(exp) {

	};

	/* Cytoscape below */
	var cy = window.cy = cytoscape({
	container: document.getElementById('cy'),

	boxSelectionEnabled: false,

	style: [
	{
	selector: 'node',
	css: {
	'shape': 'rectangle',
	'content': function(ele) { return 'yo!' + ele.data('id'); } /'data(id)'/,
	'text-valign': 'center',
	'text-halign': 'center'
	}
	},
	{
	selector: ':parent',
	css: {
	'text-valign': 'top',
	'text-halign': 'center',
	'shape': 'round-rectangle',
	'corner-radius': "10",
	'padding': 10
	}
	},
	{
	selector: 'node#e',
	css: {
	'corner-radius': "10",
	'padding': 0
	}
	},
	{
	selector: 'edge',
	css: {
	'curve-style': 'bezier',
	'target-arrow-shape': 'triangle'
	}
	}
	],

	elements: {
	nodes: [
	{ data: { id: 'a', parent: 'b' }, position: { x: 215, y: 85 } },
	{ data: { id: 'b' } },
	{ data: { id: 'c', parent: 'b' }, position: { x: 300, y: 85 } },
	{ data: { id: 'd' }, position: { x: 215, y: 175 } },
	{ data: { id: 'e' } },
	{ data: { id: 'f', parent: 'e' }, position: { x: 300, y: 175 } }
	],
	edges: [
	{ data: { id: 'ad', source: 'a', target: 'd' } },
	{ data: { id: 'eb', source: 'e', target: 'b' } }

	]
	},

	layout: {
	name: 'grid',
	padding: 5
	}
	});
	</script>
	</body>
	</html>