{% extends "layout.html" %} {% block title %}DAG{% endblock %}

{% block extra_header %}
  <script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.26.0/cytoscape.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/dagre/0.8.5/dagre.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/cytoscape-dagre@2.5.0/cytoscape-dagre.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/base16/ashes.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/python.min.js"></script>

  <style>
    :host {
      display: block;
    }
    #cy {
      width: 100%;
      height: 60vh;
      position: relative;
    }
    .legend {
      position: absolute;
      bottom: 20px;
      right: 20px;
      padding: 15px;
      border: 1px solid var(--bs-border-color);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    .legend-item {
      display: flex;
      align-items: center;
      margin-bottom: 8px;
    }
    .legend-color {
      width: 20px;
      height: 20px;
      margin-right: 10px;
      border: 2px solid;
    }
    .legend-shape {
      width: 20px;
      height: 20px;
      margin-right: 10px;
      background-color: var(--bs-primary);
    }
  </style>
{% endblock %}

{% block content %}
<div class="h-100">
  <h2>Dag</h2>
  <div class="accordion" id="accordion">
    <div class="accordion-item">
      <h2 class="accordion-header">
        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseViz" aria-expanded="true" aria-controls="collapseViz">
          Visualization
        </button>
      </h2>
      <div id="collapseViz" class="accordion-collapse collapse show" data-bs-parent="#accordion">
        <div class="accordion-body">
          <div id="cy">
            <div class="legend" id="cy-legend">
              <h3>Shape</h3>
              <div class="legend-item">
                <div class="legend-shape" style="border-radius: 3px"></div>
                <span>Internal</span>
              </div>
              <div class="legend-item">
                <div class="legend-shape" style="border-radius: 50%"></div>
                <span>Result</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="accordion-item">
      <h2 class="accordion-header">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseData" aria-expanded="false" aria-controls="collapseData">
          Node Table
        </button>
      </h2>
      <div id="collapseData" class="accordion-collapse collapse" data-bs-parent="#accordion">
        <div class="accordion-body">
          <div class="table-responsive table-hover">
            <table class="table">
              <thead>
                <tr>
                  <th>ID</th>
                  <th>Name</th>
                  <th>Parent</th>
                  <th>Nodetype</th>
                  <th>Datatype</th>
                  <th>Docstring</th>
                </tr>
              </thead>
              <tbody id="nodeTable">
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    {% if script %}
      <div class="accordion-item">
        <h2 class="accordion-header">
          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseCode" aria-expanded="false" aria-controls="collapseCode">
            Executed Code
          </button>
        </h2>
        <div id="collapseCode" class="accordion-collapse collapse" data-bs-parent="#accordion">
          <div class="accordion-body">
            <pre><code class="language-python">{{ script }}</code></pre>
          </div>
        </div>
      </div>
    {% endif %}
    {% if logs %}
      <div class="accordion-item">
        <h2 class="accordion-header">
          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseLogs" aria-expanded="false" aria-controls="collapseLogs">
            Logs
          </button>
        </h2>
        <div id="collapseLogs" class="accordion-collapse collapse" data-bs-parent="#accordion">
          <div class="accordion-body">
            <div class="accordion" id="logsAccordion">
              {% for key, value in logs.items() %}
                <div class="accordion-item">
                  <h2 class="accordion-header">
                    <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#{{ key }}LogCollapse" aria-expanded="true" aria-controls="{{ key }}LogCollapse">
                      {{ key }}
                    </button>
                  </h2>
                  <div id="{{ key }}LogCollapse" class="accordion-collapse collapse" data-bs-parent="#logsAccordion">
                    <div class="accordion-body">
                      <pre><code class="language-plaintext">{{ value }}</code></pre>
                    </div>
                  </div>
                </div>
              {% endfor %}
            </div>
          </div>
        </div>
      </div>
    {% endif %}
    {% if error %}
      <div class="accordion-item">
        <h2 class="accordion-header">
          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseError" aria-expanded="false" aria-controls="collapseError">
            Error
          </button>
        </h2>
        <div id="collapseError" class="accordion-collapse collapse" data-bs-parent="#accordion">
          <div class="accordion-body">
            <pre><code class="language-python">{{ error }}</code></pre>
          </div>
        </div>
      </div>
    {% endif %}
    {% if result %}
      <div class="accordion-item">
        <h2 class="accordion-header">
          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseResult" aria-expanded="false" aria-controls="collapseResult">
            Result
          </button>
        </h2>
        <div id="collapseResult" class="accordion-collapse collapse" data-bs-parent="#accordion">
          <div class="accordion-body">
            <pre><code class="language-python">{{ result }}</code></pre>
          </div>
        </div>
      </div>
    {% endif %}
    {% if html_uri %}
      <div class="accordion-item">
        <h2 class="accordion-header">
          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseHtml" aria-expanded="false" aria-controls="collapseHtml">
            HTML
          </button>
        </h2>
        <div id="collapseHtml" class="accordion-collapse collapse" data-bs-parent="#accordion">
          <div class="accordion-body">
            <iframe src="{{ html_uri }}"
                    style="width: 100%; height: 100vh; border: none;" 
                    sandbox="allow-scripts allow-same-origin"></iframe>
          </div>
        </div>
      </div>
    {% endif %}
  </div>
</div>

<script>
  console.log({{ data|tojson }});
  let graphData = {{ data|tojson }};

  const nodeTable = document.querySelector("#nodeTable");
  graphData.nodes
    .sort((a, b) => ((a.name || "") > (b.name || "") ? 1 : -1))
    .forEach((node, index) => {
      let parent = "";
      if (node.parent) {
        parent = `<a href=${node.parent_link}>${node.parent}</a>`;
      }
      let node_type = node.node_type;
      if (node.sublist) {
        let inner = node.sublist
          .map((subnode, index) => {
            return `<li><a href="${subnode[1]}" class="dropdown-item">${subnode[0].substring(0, 8)}</a></li>`
          })
          .reduce(function(a, b){ return a + b });
        node_type = `
          <div class="dropdown">
            <button class="btn btn-outline-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
              ${node_type}
            </button>
            <ul class="dropdown-menu">
              ${inner}
            </ul>
          </div>
        `
      }
      nodeTable.innerHTML += `
        <tr data-node-id="${node.id}" ${node.id == graphData.result? 'class="border border-primary"' : ""}>
          <td><a href=${node.link}>${node.id.substring(0, 8)}</a></td>
          <td>${node.name || ""}</td>
          <td>${parent}</td>
          <td>${node_type}</td>
          <td>${node.data_type}</td>
          <td>${node.doc || ""}</td>
        </tr>
      `;
    });

  document.addEventListener("DOMContentLoaded", function(){
    initCytoscape();
    const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
    const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
  });

  function initCytoscape() {
    var _style = window.getComputedStyle(document.body)
    const color_map = {
      argv: _style.getPropertyValue("--bs-warning-text-emphasis"),
      literal: _style.getPropertyValue("--bs-primary"),
      fn: _style.getPropertyValue("--bs-secondary"),
      import: _style.getPropertyValue("--bs-danger"),
    };

    const cyNodes = graphData.nodes.map((node) => ({
      data: {
        id: node.id,
        label: node.name ? node.name : "#" + node.id.substring(0, 8),
        shape: node.id === graphData.result ? "ellipse" : "roundrectangle",
        color: color_map[node.node_type],
        doc: node.doc,
      },
    }));
    const cyEdges = graphData.edges
      .filter((x) => x.type === "node")
      .map((edge) => ({
        data: {
          source: edge.source,
          target: edge.target,
        },
      }));

    const cyContainer = document.querySelector("#cy");
    const cy = cytoscape({
      container: cyContainer,
      elements: {
        nodes: cyNodes,
        edges: cyEdges,
      },
      style: [
        {
          selector: "node",
          style: {
            label: "data(label)",
            "background-color": "data(color)",
            "border-width": 1,
            "border-color": "#000",
            color: "#000",
            "text-valign": "center",
            "text-halign": "center",
            width: 80,
            height: 30,
            "font-size": 12,
            padding: 5,
            shape: "data(shape)",
          },
        },
        {
          selector: "edge",
          style: {
            width: 1,
            "line-color": "#7681b3",
            "target-arrow-color": "#7681b3",
            "target-arrow-shape": "triangle",
            "source-arrow-color": "#7681b3",
            "curve-style": "bezier",
          },
        },
      ],
      layout: {
        name: "dagre",
        rankDir: "TB",
        nodeSep: 50,
        rankSep: 100,
        padding: 50,
      },
    });
    /* cy.cssVars();*/

    const legendTable = document.querySelector("#cy-legend");
    legendTable.innerHTML = `<h3 style="margin-top: 0">Color</h3>`
    Object.entries(color_map).forEach(([a, b]) => {
      const row = document.createElement("div");
      const c = a.charAt(0).toUpperCase() + a.slice(1);
      row.classList.add("legend-item")
      row.innerHTML = `
        <div class="legend-color" style="border-color: ${b}; background-color: ${b}"></div>
        <span>${c}</span>
      `
      legendTable.appendChild(row);
    });
    legendTable.innerHTML += `
      <h3>Shape</h3>
      <div class="legend-item">
        <div class="legend-shape" style="border-radius: 3px"></div>
        <span>Internal</span>
      </div>
      <div class="legend-item">
        <div class="legend-shape" style="border-radius: 50%"></div>
        <span>Result</span>
      </div>
    `
  }
</script>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    hljs.highlightAll();
  });
</script>
{% endblock %}