{% extends 'base.html' %}
{% load static %}
{% load i18n %}
{% get_current_language as LANGUAGE_CODE %}
{% load dash_slash %}

{% block title %} {% trans 'SummarizePaper Tree - Discovering Connections between Research Papers using AI' %} {% endblock %}
{% block extra_head_tags %}
  <meta name="description" content="{% trans 'Our website, SummarizePaper, leverages the power of artificial intelligence to help you explore and navigate the vast landscape of research papers. With our interactive visual tool, you can easily discover connections between related papers, visualize how they are connected, and explore the relationships between topics. Whether you are a researcher, student, or simply curious about the latest advancements in a field, SummarizePaper can help you make sense of the complex web of information in the world of academia.' %}" />
  <link rel="canonical" href="https://www.summarizepaper.com/{{LANGUAGE_CODE}}/tree" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.3/d3.min.js"></script>

  <script>
    MathJax = {
      tex: {
        inlineMath: [['$', '$'], ['\\(', '\\)']]
      },
      svg: {
        fontCache: 'global'
      }
    };
    </script>
    <script type="text/javascript" id="MathJax-script" async
      src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js">
    </script>
  
    <style>
      .main-content2 {
     padding: 16px;
   }

   .title {
     font-size: 2xl;
     font-weight: bold;
     font-family: sans-serif;
     margin-bottom: 12px;
   }

   .subtitle {
     font-size: 1xl;
     font-family: serif;
     margin-bottom: 18px;
   }

   .info-block {
     display: flex;
     align-items: center;
     margin-bottom: 6px;
   }

   .info-icon {
     width: 16px;
     height: 16px;
     margin-right: 6px;
   }

   .info-text {
     font-size: 14px;
     font-weight: normal;
     margin-right: 6px;
     flex-grow: 1;
     text-overflow: ellipsis;
     overflow: hidden;
   }

   @media (min-width: 768px) {
     .main-content2 {
       padding: 16px 32px;
     }

     .title {
       font-size: 4xl;
     }
     .message-tabs li {
       font-size: 24px!important;
     }
   }
   .message {
      font-size: 1.2em;
      font-weight: bold;
      color: #555;
      margin-bottom: 10px;
      margin-top: 30px;
      text-align: center;
    }

    .link {
      color: #4285f4;
      text-decoration: none;
      transition: all 0.2s ease-in-out;
    }

    .link:hover {
      text-decoration: underline;
    }
    .paper-resources {
      font-family: Arial, sans-serif;
      font-size: 16px;
      color: #333;
      background-color: #f8f9a0;
      padding: 10px;
      border-radius: 5px;
      margin-top: 5px;
      display: inline-block;
      }

      .paper-resources a {
          color: #007bff;
          text-decoration: none;
      }

      .paper-resources a:hover {
          text-decoration: underline;
      }

      input[type="submit"] {
      background-color: #4CAF50;
      color: white;
      padding: 12px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      margin-top: 10px;
      font-size: 18px;
    }

    input[type="submit"]:hover {
      background-color: #3e8e41;
    }

    #popover2 {
    display: none;
    position: fixed;
    background-color: black;
    color: white;
    padding: 10px;
    z-index: 1;
    right: 20px;
  }
  .center {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100%;
 }
    </style>
{% endblock %}

{% block header_class %}{% endblock %}

{% block content %}
<div class="main-content2">

{% if exist != 0 %}
{% if paper.title %}
    <div class="title"><h1>{{ paper.title }}</h1></div>
  {% endif %}
  <div class="subtitle">
    {% if paper.authors.all %}
      <p><b>{% trans 'Authors:' %}</b>
        {% for author in paper.authors.all %}
          {{ author.name }}{% if author.affiliation %} ({{ author.affiliation }}){% endif %}{% if not forloop.last %}, {% endif %}
        {% endfor %}
      </p>
    {% endif %}
  </div>
  {% if paper.journal_ref %}
  <div class="info-block">
    <div class="info-text"><i class="fas fa-book"></i> {{ paper.journal_ref }}</div>
  </div>
  {% endif %}
  <div class="info-block">
    <div class="info-text"><i class="fas fa-link"></i> {% if paper.link_homepage %}<a href="{{ paper.link_homepage }}" target="_blank">{% endif %}arXiv: {{ arxiv_id|dash_slash }}{% if paper.link_homepage %}</a>{% endif %}{% if paper.link_doi %} - <a href="{{ paper.link_doi }}" target="_blank">DOI</a>{% endif %}{% if paper.category %} ({{ paper.category }}){% endif %}</div>
  </div>
  {% if paper.comments %}
  <div class="info-block">
    <div class="info-text"><i class="fas fa-comment"></i> {{ paper.comments }}</div>
  </div>
  {% endif %}
  {% if paper.license %}
  <div class="info-block">
    <div class="info-text"><i class="fas fa-id-badge"></i> {% trans 'License:' %} <a href="{{ paper.license }}" target="_blank">{{ cc_format }}</a></div>
  </div>
  {% else %}
  <div class="info-block">
    <div class="info-text"><i class="fas fa-id-badge"></i> {% trans 'License:' %} <a href="http://arxiv.org/licenses/assumed-1991-2003/" target="_blank">ASSUMED 1991-2003</a></div>
  </div>
  {% endif %}
  <div class="paper-details">
  {% if paper.abstract %}
    <p style="text-align: justify;"><strong>{% trans 'Abstract:' %}</strong> <span class="math style="width: 1.796em; display: inline-block;">{{ paper.abstract }}</span></p>
  {% endif %}
  </div>
  {% if paper.published_arxiv %}
  <div class="info-block">
    <div class="info-text"><i class="fas fa-clock"></i> {% trans 'Submitted to arXiv on' %} {{ paper.published_arxiv|date:"d M. Y" }}</div>
  </div>
  {% endif %}

  {% if  alpaper %}

  <div style="text-align: center;margin-top: 40px;">
  <div style="background-color: #f2f2f2; padding: 20px; border-radius: 10px;" id="closest">
    <p style="font-size: 18px; font-weight: bold; margin-bottom: 10px;"><h2>{% trans 'Explore the paper tree' %}</h2></p>
    <p style="font-size: 16px;">{% trans 'Click on the tree nodes to be redirected to a given paper and access their summaries and virtual assistant' %}</p>
      <div class="paper-resources">
        <div class="paper-resources-text">
        <span style="float: left;">{% trans 'Also access our AI generated' %}
        <a href="/{{ LANGUAGE_CODE }}/arxiv-id/{{ arxiv_id }}#results">{% trans 'Summaries' %}</a>,
        {% trans ' or ask questions about this paper to our' %} <a href="/{{ LANGUAGE_CODE }}/arxiv-id/{{ arxiv_id }}#assistant">{% trans 'AI assistant' %}</a></span>.
        </div>
        </div>
    </div>
  </div> 
  <div id="graph" style="border: 1px solid #ccc; border-radius: 10px;"></div>
  <div class="center" style="margin-bottom:20px;">
    <form action="{% url 'arxividpage' arxiv_id=arxiv_id %}" method="post">
      {% csrf_token %}
      <input type="hidden" name="tree" value="0">
      <input type="submit" value="{% if relpapers %}{% trans 'Search again for closest papers' %}{% else %}{% trans 'Search for closest papers' %}{% endif %}" name="close_button" style="background-color: #333;">
      
      <p style="text-align: center;">
      <label style="color: orange;">(Beta)</label>
      <span id="popover-link2">
        <i class="fas fa-question-circle"></i>
      </span></p>
    </form>
    <div id="popover2">
      <p><strong>{% trans 'Look for similar papers (in beta version)' %}</strong></p>
      <p>{% trans 'By clicking on the button above, our algorithm will scan all papers in our database to find the closest based on the contents of the full papers and not just on metadata. Please note that it only works for papers that we have generated summaries for and you can rerun it from time to time to get a more accurate result while our database grows.' %}</p>
    </div>
  </div>
  {% else %}
  <p class="message">{% trans 'The paper tree for this article is not created yet. To create it, you can run our tools' %} <a href="/{{ LANGUAGE_CODE }}/arxiv-id/{{ arxiv_id }}" class="link">{% trans 'on this page' %}</a>.</p>
  {% endif %}
{% else %}
<p>{% trans 'There is no existing article with the given arXiv ID:' %} {{ arxiv_id }}. {% blocktrans %} Try again your <a href="/{{LANGUAGE_CODE}}/">search</a> with a new arXiv ID.{% endblocktrans %}</p>
{% endif %}


</div>
{% endblock %}


{% block scripts %}
{% if alpaper %}
<script>
  document.getElementById("popover-link2").addEventListener("mouseover", function(event) {
    var popover2 = document.getElementById("popover2");
    popover2.style.display = "block";
    popover2.style.left = (event.clientX + 20) + "px";
    popover2.style.top = (event.clientY - 200) + "px";
  });
  
  document.getElementById("popover-link2").addEventListener("mouseout", function() {
    var popover2 = document.getElementById("popover2");
    popover2.style.display = "none";
  });
  </script>

<script>
var tooltip = d3.select("body")
  .append("div")
  .style("position", "absolute")
  .style("z-index", "10")
  .style("visibility", "hidden")

  function showTooltip(event, d) {
  // Get tooltip dimensions
  const tooltipWidth = tooltip.node().offsetWidth;
  const tooltipHeight = tooltip.node().offsetHeight;

  // Get mouse position and adjust tooltip position based on screen bounds
  let xPos = event.pageX + 10;
  let yPos = event.pageY + 10;

  // Check if tooltip goes off right side of screen
  if (xPos + tooltipWidth > window.innerWidth) {
    xPos = xPos;//window.innerWidth - tooltipWidth - 10;
  }

  // Check if tooltip goes off bottom side of screen
  if (yPos + tooltipHeight > window.innerHeight) {
    yPos = yPos;//window.innerHeight - tooltipHeight - 10;
  }

  // Show tooltip and position it correctly
  tooltip.style('opacity', 1)
    .style('left', xPos + 'px')
    .style('top', yPos + 'px')
    .style('background-color', 'white')
    .html(`<div style="padding: 5px">
          <strong>{% trans 'Title:' %} </strong>${d.title}<br>
          <strong>{% trans 'Authors:' %} </strong>${d.authors}<br>
          <strong>{% trans 'Arxiv ID:' %} </strong>${d.arxiv_id}<br>
          ${d.main ? '' : `<strong>{% trans 'Score:' %} </strong>${d.score.toFixed(1)}%<br>`}
        </div>`);
}


// Define the data for the graph
var data = JSON.parse('{{ relpapers_json|escapejs }}');
//console.log(data)

function drawGraph() {

// Calculate maximum distance
var maxDistance = 0;
for (var i = 0; i < data.length; i++) {
  var x = data[i].x;
  var y = data[i].y;
  var distance = Math.sqrt(x * x + y * y);
  if (distance > maxDistance) {
    maxDistance = distance;
  }
}

// Define the dimensions and margins of the graph
const margin = { top: 10, right: 10, bottom: 10, left: 10 };
const width = window.innerWidth - margin.left - margin.right;
const height = window.innerHeight - margin.top - margin.bottom;


// Append the SVG object to the graph div
d3.select('#graph svg').remove();
var svg = d3.select('#graph')
  .append('svg')
  .attr('width', width + margin.left + margin.right)
  .attr('height', height + margin.top + margin.bottom)
  .append('g')
  .attr('transform', `translate(${margin.left}, ${margin.top})`);

// Define the scales for the x and y axes
let maxY = d3.max(data, d => d.y);
let minY = d3.min(data, d => d.y);

const xScale = d3.scaleLinear()
.domain([-maxDistance-20, maxDistance+20])
.range([0, width]);

const yScale = d3.scaleLinear()
  .domain([minY-40, maxY+40])
  .range([height, 0]);


// Add the lines to connect the papers
svg.selectAll('line')
.data(data)
.enter()
.filter(d => !d.main)
.append('line')
.attr('x1', d => xScale(d.x))
.attr('y1', d => yScale(d.y)-10)
.attr('x2', d => xScale(data[0].x))
.attr('y2', d => yScale(data[0].y)+10)
.style('stroke', 'gray')
.style('stroke-width', d => 5 )
.style('opacity', d => 0.2 );

// Add the circles for each paper
const circles = svg.selectAll('g')
.data(data)
.enter()
.append('g')
.attr('transform', d => `translate(${xScale(d.x)},${yScale(d.y)})`);

circles.append('text')
  .text(d => {
  const authors = d.authors.split(', ');
  if (authors.length > 2) {
    return `${authors[0]} et al.`;
  }
  if (authors.length == 2) {
    return `${authors[0]} & ${authors[1]}`;
  }
  return `${authors[0]}`;
  })
  .attr('text-anchor', 'middle')
  .attr('alignment-baseline', 'middle')
  .style('fill', '#000')
  .style('font-size', '14px')
  .style('font-family', 'Arial')
  .each(function(d) {
    // Get the bounding box of the text element
    const bbox = this.getBBox();
    // Add a rectangle behind the text to improve readability
    d3.select(this.parentNode)
      .insert('rect', ':first-child')
      .attr('x', -bbox.width / 2 - 2)
      .attr('y', -bbox.height / 2 - 2)
      .attr('width', bbox.width + 4)
      .attr('height', bbox.height + 4)
      .style('fill', '#fff')
      .style('stroke', d.main ? 'red' : '#000') // add red stroke if data.main is true
      .style('stroke-width', d.main ? '2px' : '1px');
      });

// Add mouseover and mouseout events to the circles
circles.on("mouseover", function(){d3.select(this).style("cursor", "pointer"); return tooltip.style("visibility", "visible");})
       .on("mousemove", function(event, d){return showTooltip(event, d);})
       .on("mouseout", function(){return tooltip.style("visibility", "hidden");});

circles.on('click', function(event,d) {
  //console.log(d);
  //alert('ok');
  window.open(window.location.origin + '/' + `${d.lang}` + '/arxiv-id/' + `${d.arxiv_id}`, '_blank');
});

  // Add the text for each paper title
svg.selectAll('text.title')
  .data(data)
  .enter()
  .append('text')
  .attr('class', 'title')
  .attr('x', d => xScale(d.x))
  .attr('y', d => yScale(d.y))
  .style('display', 'none')
  .text(d => d.title);
}

drawGraph();

  function handleResize() {
  // Redraw the graph with the new dimensions and scales
  drawGraph();
}


// Attach the handleResize function to the resize event
window.addEventListener('resize', handleResize);

  </script>
  {% endif %}
{% endblock %}