kozo2 · July 16, 2023 07:55
diff --git a/cyjs b/cyjs
 <!DOCTYPE html>
 <html>
 <head>
 <meta charset=utf-8 />
 <title>Animated BFS</title>
 <script src="require.js"></script>
 <script src="jquery-2.1.3.min.js"></script>
 <style type="text/css">
 body {
  font: 14px helvetica neue, helvetica, arial, sans-serif;
 }

 #cybfd52792-69f2-45df-899c-d4c1134d43d8 {
  height: 500px;
  width: 500px;
  position: absolute;
  left: 0;
  top: 0;
 }
 </style>

 <script>
 if(window['cytoscape'] === undefined){
    var paths = {
 	cytoscape: 'http://cdnjs.cloudflare.com/ajax/libs/cytoscape/2.2.10/cytoscape'
    };

    console.log('Begin loading all JavaScript libs...');
    require.config({paths: paths});

    require(['cytoscape'], function(cytoscape){
 	window['cytoscape'] = cytoscape;
 	console.log('Finished loading jQuery and Cytoscape.js.');

 	var event = document.createEvent("HTMLEvents");
 	event.initEvent("load_cytoscape", true, false);
 	window.dispatchEvent(event);
    });
 }
 </script>

 <script>
 (function(){

 $("#save").click(function() {
  var cyjs = $('#cybfd52792-69f2-45df-899c-d4c1134d43d8').cytoscape.json();
  var content = JSON.stringify(cyjs);
  var uriContent = "data:application/json," + encodeURIComponent(content);
  var newWindow = window.open(uriContent, 'hoge.json');
 });

 function render(){
 $('#cybfd52792-69f2-45df-899c-d4c1134d43d8').cytoscape({
  style: cytoscape.stylesheet()
    .selector('node')
      .css({
        'shape': 'data(faveShape)',
        'background-color': 'data(faveColor)',
        'content': 'data(name)'
      })
    .selector('edge')
      .css({
        'target-arrow-shape': 'triangle',
        'width': 4,
        'line-color': '#ddd',
        'target-arrow-color': '#ddd'
      })
    .selector('.highlighted')
      .css({
        'background-color': '#61bffc',
        'line-color': '#61bffc',
        'target-arrow-color': '#61bffc',
        'transition-property': 'background-color, line-color, target-arrow-color',
        'transition-duration': '0.5s'
      }),

  elements: {
      nodes: [{"data": {"id": "EGF", "name": "EGF"}}, {"data": {"id": "R_EGF", "parent": "EGF", "name": "R"}}],

      edges: []
    },

  layout: {
    name: 'breadthfirst',
    directed: true,
    roots: '#a',
    padding: 10
  },

  ready: function(){
    window.cy = this;

    // var bfs = cy.elements().bfs('#a', function(){}, true);

    // var i = 0;
    // var highlightNextEle = function(){
    //   bfs.path[i].addClass('highlighted');

    //   if( i < bfs.path.length ){
    //     i++;
    //     setTimeout(highlightNextEle, 1000);
    //   }
    // };

    // // kick off first highlight
    // highlightNextEle();
  }
 });
 };

 var before_render = function(){
    if(window['cytoscape'] === undefined){
         console.log("wait!");
 	 window.addEventListener("load_cytoscape", before_render);
    }else{
 	 console.log("begin rendering!");
 	 render();
    }
 }

 before_render();

 })();
 </script>
 </head>
 <body>
  <div id="save">click here to save</div>
  <input type="file" id="cyjs" name="json4load" />
  <div id="cybfd52792-69f2-45df-899c-d4c1134d43d8"></div>
  <!-- When only #uuid div is placed on this page, the height of output-box on ipynb will be 0px. One line below will prevent that. -->
  <div id="dammy" style="width:700px;height:500px">
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset=utf-8 />
	<title>Animated BFS</title>
	<script src="require.js"></script>
	<script src="jquery-2.1.3.min.js"></script>
	<style type="text/css">
	body {
	font: 14px helvetica neue, helvetica, arial, sans-serif;
	}

	#cybfd52792-69f2-45df-899c-d4c1134d43d8 {
	height: 500px;
	width: 500px;
	position: absolute;
	left: 0;
	top: 0;
	}
	</style>

	<script>
	if(window['cytoscape'] === undefined){
	var paths = {
	cytoscape: 'http://cdnjs.cloudflare.com/ajax/libs/cytoscape/2.2.10/cytoscape'
	};

	console.log('Begin loading all JavaScript libs...');
	require.config({paths: paths});

	require(['cytoscape'], function(cytoscape){
	window['cytoscape'] = cytoscape;
	console.log('Finished loading jQuery and Cytoscape.js.');

	var event = document.createEvent("HTMLEvents");
	event.initEvent("load_cytoscape", true, false);
	window.dispatchEvent(event);
	});
	}
	</script>

	<script>
	(function(){

	$("#save").click(function() {
	var cyjs = $('#cybfd52792-69f2-45df-899c-d4c1134d43d8').cytoscape.json();
	var content = JSON.stringify(cyjs);
	var uriContent = "data:application/json," + encodeURIComponent(content);
	var newWindow = window.open(uriContent, 'hoge.json');
	});

	function render(){
	$('#cybfd52792-69f2-45df-899c-d4c1134d43d8').cytoscape({
	style: cytoscape.stylesheet()
	.selector('node')
	.css({
	'shape': 'data(faveShape)',
	'background-color': 'data(faveColor)',
	'content': 'data(name)'
	})
	.selector('edge')
	.css({
	'target-arrow-shape': 'triangle',
	'width': 4,
	'line-color': '#ddd',
	'target-arrow-color': '#ddd'
	})
	.selector('.highlighted')
	.css({
	'background-color': '#61bffc',
	'line-color': '#61bffc',
	'target-arrow-color': '#61bffc',
	'transition-property': 'background-color, line-color, target-arrow-color',
	'transition-duration': '0.5s'
	}),

	elements: {
	nodes: [{"data": {"id": "EGF", "name": "EGF"}}, {"data": {"id": "R_EGF", "parent": "EGF", "name": "R"}}],

	edges: []
	},

	layout: {
	name: 'breadthfirst',
	directed: true,
	roots: '#a',
	padding: 10
	},

	ready: function(){
	window.cy = this;

	// var bfs = cy.elements().bfs('#a', function(){}, true);

	// var i = 0;
	// var highlightNextEle = function(){
	// bfs.path[i].addClass('highlighted');

	// if( i < bfs.path.length ){
	// i++;
	// setTimeout(highlightNextEle, 1000);
	// }
	// };

	// // kick off first highlight
	// highlightNextEle();
	}
	});
	};

	var before_render = function(){
	if(window['cytoscape'] === undefined){
	console.log("wait!");
	window.addEventListener("load_cytoscape", before_render);
	}else{
	console.log("begin rendering!");
	render();
	}
	}

	before_render();

	})();
	</script>
	</head>
	<body>
	<div id="save">click here to save</div>
	<input type="file" id="cyjs" name="json4load" />
	<div id="cybfd52792-69f2-45df-899c-d4c1134d43d8"></div>
	<!-- When only #uuid div is placed on this page, the height of output-box on ipynb will be 0px. One line below will prevent that. -->
	<div id="dammy" style="width:700px;height:500px">
	</body>
	</html>