{% layout 'layout.liquid' %}

{% block head %}
<script src="/static/lib/sigma.min.js"></script>
<script src="/static/lib/graphology.umd.min.js"></script>

<title>Depyth</title>
{% endblock %}

{% block content %}
<main class="p-4 flex-1 flex flex-col container mx-auto">
		<header class="w-fit mx-auto mb-8">
			<h1 class="text-5xl my-4 text-center">Depyth</h1>
		</header>

	<h2 class="text-4xl my-3">Analysis of your requirements.txt</h2>

	<h3 class="text-3xl my-3">General</h3>

	<p>Installing your requirements.txt would mean installing up to <span class="font-bold">{{ nb_deps }}</span> packages, for a total download size of around <span class="font-bold">{{totalWeight.value}}</span>.</p>
	<p>Note: this estimation does not take into account platforms and architectures, and includes all optional packages.</p>

	<h3 class="text-3xl my-3">Weight chart</h3>


	<div class="grid grid-cols-[auto_1fr]">
		{% for package in packageByWeight %}
		<div class="flex flex-col justify-center h-16">
			<p class="w-fit text-xl font-bold">{{package.name}}</p>
			<p>{{package.humanWeight}} - {{ package.weight | divided_by: totalWeight.raw | times: 100 | round }}%</p>
		</div>
		<progress value="{{ package.weight }}" max="{{ totalWeight.raw }}" min="0" class="w-full h-16"></progress>
	{% endfor %}
	</div>

	<h3 class="text-3xl my-3">Dependency graph</h3>

	<div id="graph" class="w-full h-[60vh] bg-white border border-black"></div>

	<script>
		const graph = new graphology.Graph();

		graph.import( JSON.parse(`{{ graph | json }}`) );

		// Instantiate sigma.js and render the graph
		const sigmaInstance = new Sigma(graph, document.getElementById("graph"));
	</script>
</main>
{% endblock %}