<commit_before><!DOCTYPE>

<html>

	<head>
		<title>cytoscape-cxtmenu.js demo</title>

		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">

		<link href="font-awesome-4.0.3/css/font-awesome.css" rel="stylesheet" type="text/css" />
		<script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js"></script>

		<!-- for testing with local version of cytoscape.js -->
		<!--<script src="../cytoscape.js/build/cytoscape.js"></script>-->

		<script src="cytoscape-cxtmenu.js"></script>

		<style>
			body {
				font-family: helvetica;
				font-size: 14px;
			}

			#cy {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 999;
			}

			h1 {
				opacity: 0.5;
				font-size: 1em;
			}

			/* you can set the disabled style how you like on the text/icon */
			.cxtmenu-disabled {
				opacity: 0.333;
			}
		</style>

		<script>
			window.addEventListener('DOMContentLoaded', function(){

				var cy = window.cy = cytoscape({
					container: document.getElementById('cy'),

					ready: function(){
					},

					style: [
						{
							selector: 'node',
							css: {
								'content': 'data(name)'
							}
						},

						{
							selector: 'edge',
							css: {
								'target-arrow-shape': 'triangle'
							}
						}
					],

					elements: {
						nodes: [
							{ data: { id: 'j', name: 'Jerry' } },
							{ data: { id: 'e', name: 'Elaine' } },
							{ data: { id: 'k', name: 'Kramer' } },
							{ data: { id: 'g', name: 'George' } }
						],
						edges: [
							{ data: { source: 'j', target: 'e' } },
							{ data: { source: 'j', target: 'k' } },
							{ data: { source: 'j', target: 'g' } },
							{ data: { source: 'e', target: 'j' } },
							{ data: { source: 'e', target: 'k' } },
							{ data: { source: 'k', target: 'j' } },
							{ data: { source: 'k', target: 'e' } },
							{ data: { source: 'k', target: 'g' } },
							{ data: { source: 'g', target: 'j' } }
						]
					},
				});

				cy.cxtmenu({
					selector: 'node',

					commands: [
						{
							content: '<span class="fa fa-flash fa-2x"></span>',
							select: function(ele){
								console.log( ele.id() );
							}
						},

						{
							content: '<span class="fa fa-star fa-2x"></span>',
							select: function(ele){<commit_msg>Demo enabled for both nodes & edges for better testing<commit_after><!DOCTYPE>

<html>

	<head>
		<title>cytoscape-cxtmenu.js demo</title>

		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">

		<link href="font-awesome-4.0.3/css/font-awesome.css" rel="stylesheet" type="text/css" />
		<script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js"></script>

		<!-- for testing with local version of cytoscape.js -->
		<!--<script src="../cytoscape.js/build/cytoscape.js"></script>-->

		<script src="cytoscape-cxtmenu.js"></script>

		<style>
			body {
				font-family: helvetica;
				font-size: 14px;
			}

			#cy {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 999;
			}

			h1 {
				opacity: 0.5;
				font-size: 1em;
			}

			/* you can set the disabled style how you like on the text/icon */
			.cxtmenu-disabled {
				opacity: 0.333;
			}
		</style>

		<script>
			window.addEventListener('DOMContentLoaded', function(){

				var cy = window.cy = cytoscape({
					container: document.getElementById('cy'),

					ready: function(){
					},

					style: [
						{
							selector: 'node',
							css: {
								'content': 'data(name)'
							}
						},

						{
							selector: 'edge',
							css: {
								'target-arrow-shape': 'triangle'
							}
						}
					],

					elements: {
						nodes: [
							{ data: { id: 'j', name: 'Jerry' } },
							{ data: { id: 'e', name: 'Elaine' } },
							{ data: { id: 'k', name: 'Kramer' } },
							{ data: { id: 'g', name: 'George' } }
						],
						edges: [
							{ data: { source: 'j', target: 'e' } },
							{ data: { source: 'j', target: 'k' } },
							{ data: { source: 'j', target: 'g' } },
							{ data: { source: 'e', target: 'j' } },
							{ data: { source: 'e', target: 'k' } },
							{ data: { source: 'k', target: 'j' } },
							{ data: { source: 'k', target: 'e' } },
							{ data: { source: 'k', target: 'g' } },
							{ data: { source: 'g', target: 'j' } }
						]
					},
				});

				cy.cxtmenu({
					selector: 'node, edge',

					commands: [
						{
							content: '<span class="fa fa-flash fa-2x"></span>',
							select: function(ele){
								console.log( ele.id() );
							}
						},

						{
							content: '<span class="fa fa-star fa-2x"></span>',
							select: function(ele){
{'fraction_non_alphanumeric': 0.19920151292288296, 'fraction_numerical': 0.011767177978566926, 'mean_word_length': 2.0532392559332906, 'pattern_counts': {'":': 0, '<': 47, '<?xml version=': 0, '>': 47, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '848537', 'n_tokens_mistral': 2447, 'n_tokens_neox': 1695, 'n_words': 364}