

{% from "macros/breadcrumbs.html" import breadcrumbs_macro with context %}
{% from "macros/common_head.html" import common_head_macro with context %}
{% from "macros/header.html" import header_macro with context %}
{% from "macros/json_editor.html" import json_editor_macro with context %}
<html>
<head>
  <title>Tierkreis visualization: EVAL node</title>
  {{ common_head_macro() }}

  <link type="text/css" rel="stylesheet"  src="/static/tokens.css"/>
  <link type="text/css" rel="stylesheet" src="/static/index.css"/>

</head>

<body class="graph-bg">
  {{ header_macro() }}
  <main>
    {{ breadcrumbs_macro(breadcrumbs, true) }}
    <div style="display:flex;gap:2rem">
      <div id="mynetwork"></div>
       <script type="text/javascript">
        let [network, nodes, edges] = createNetwork({{ nodes|safe }}, {{ edges|safe }}, "N");
        </script>

      {{ json_editor_macro(nodes|safe, edges|safe) }}
    </div>
  </main>
   <script type="text/javascript">
        network.setOptions({
          nodes: { font: { size: 16 } },
          edges: { font: { size: 16 } },
          layout:  {
            randomSeed: 0,
            hierarchical: {
              direction: "UD",
              sortMethod: "directed",
              levelSeparation: 125,
              nodeSpacing: 400,
              shakeTowards: "leaves",
              edgeMinimization: false
            }
          },
          physics: {
            enabled: false,
            stabilization: {
              enabled: true,
              iterations: 10000,
            },
            solver: "hierarchicalRepulsion",
            hierarchicalRepulsion: {
              centralGravity: 0.0,
              springLength: 100,
              springConstant: 0.01,
              nodeDistance: 350,
              damping: 1,
              avoidOverlap: 0
            }
          },
        });


        connectToStream("{{ url|safe }}", nodes, edges);
      </script>
</body>

</html>

