<%
	if options.get('style') == 'safe':
		background = 'background-color:black;'
		base_node_color = '#FFFFFF'
	else:
		background = ''
		base_node_color = "#0000FF"

%>
<div id="container_${count_objects}" style="width: ${options['width']}; height: ${options['height']}; margin: 10px; border:2px solid black; ${background}">
</div>
<script>

	let model_${count_objects} = ${plotter.decompress_code(network)};
	const graph = new graphology.Graph();
	graph.import(model_${count_objects});
	
	// assign initial coordinates to start iterative layout of force atlas2
	// graphologyLibrary.layout.random.assign(graph); 
	// We change to circular initial layout because the parameter to set a fixed seed{rng: Math.random} cannot be given to random method using the assign method. assign is needed to avoid the storage of one copy of the node coordinates
	graphologyLibrary.layout.circular.assign(graph); 
	const sensibleSettings = graphologyLibrary.layoutForceAtlas2.inferSettings(graph);
	//sensibleSettings.scalingRatio *= 100
	//sensibleSettings.strongGravityMode = false
	console.log(sensibleSettings);
	graphologyLibrary.layoutForceAtlas2.assign(graph, {iterations: ${options['iterations']}, settings: sensibleSettings});
    // Instantiate sigma.js and render the graph
    const sigmaInstance = new Sigma(graph, 
    	document.getElementById('container_${count_objects}'),
		{
			primitives: {
				depthLayers: ["edges", "nodes", "topEdges", "topNodes"],
			},
			styles: {
				nodes: [
						{ color: '${base_node_color}', size: 20, zIndex: 1 },
						{
							label: { attribute: "label" },
							size: { attribute: "size" },
							color: { attribute: "color" },
							zIndex: { attribute: "zIndex" },
						},
					    {
							whenState: "isActive",
							then: { color: { attribute: "color" }, label: { attribute: "label" }, labelVisibility: "visible" },
						},
					],
				edges: [
					% if options.get('style') == 'safe':
						{opacity: 0.1, size: 0.05, color: '#EEEEEE'}
					% else:
						{opacity: 0.1, size: 0.05}
					% endif
				],
			}
		}
    );

</script>
