preview.html

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="https://unpkg.com/vis-data@latest/peer/umd/vis-data.min.js"></script>
  <script type="text/javascript" src="https://unpkg.com/vis-network@latest/peer/umd/vis-network.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/4.1.0/js-yaml.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://unpkg.com/vis-network/styles/vis-network.min.css" />
  <style>
    #mynetwork {
      width: 800px;
      height: 800px;
      border: 1px solid black;
    }
    #infoWindow {
      display: none;
      position: absolute;
      top: 50px;
      left: 820px;
      width: 800px;
      max-height: 700px;
      padding: 15px;
      border: 1px solid black;
      background-color: white;
      z-index: 1000;
      overflow-y: auto;
    }
    #infoWindow .close {
      cursor: pointer;
      color: red;
      float: right;
    }
    .productInfoBox {
      font-size: 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px;
      width: 350px;
      box-sizing: border-box;
    }
    .productInfoBox .text {
      display: flex;
      flex-direction: column;
      flex-grow: 1;
    }
    .productInfoBox img {
      margin-left: 10px;
      max-width: 120px;
    }
    .productInfoBox h3 {
      font-size: 18px;
      color: #333;
      margin: 0;
      padding: 0;
    }
    .productInfoBox a {
      text-decoration: none;
      color: #333;
    }
    .productInfoBox a:hover {
      text-decoration: underline;
    }
    .productInfoBox p {
      font-size: 16px;
      margin: 0;
      padding: 0;
    }
    .match-true {
      background-color: #d4edda; /* Green tint */
    }
    .match-false {
      background-color: #f8d7da; /* Red tint */
    }
    .table-container {
      display: block;
      width: 100%;
      overflow-x: auto;
      white-space: nowrap;
    }
    a {
      text-decoration: none;
      color: #333;
    }
    table {
      border-collapse: collapse;
      width: 100%;
      table-layout: auto;
    }
    th, td {
      border: 1px solid #ddd;
      padding: 8px;
      white-space: normal;
    }
    th {
      background-color: #f2f2f2;
      position: sticky;
      top: 0;
    }
    td:first-child, th:first-child {
      position: -webkit-sticky; /* For Safari */
      position: sticky;
      left: 0;
      background-color: #f9f9f9; /* Same color as table background */
    }
  </style>
</head>
<body>
  <p>Select a YML file from one of the run folders under runs/</p>
  <p>no file selected</p>
  <input type="file" id="fileInput">
  <div id="mynetwork"></div>
  <div id="infoWindow">
    <span class="close" onclick="document.getElementById('infoWindow').style.display='none'">X</span>
    <div id="infoContent"></div>
  </div>

  <script type="text/javascript">
  let previousContent = "";
  let fileReaderInterval;

  const render = function(content) {
    try {
      var inputJson = jsyaml.load(content);

      var termToId = {};
      var nodesList = [];
      var edgesList = []; 
      
      var lastId = 0;
      
      // parent nodes should come before children in list, but we do not assume this
      for (let analystResult of inputJson) {
        let term = analystResult.term;
        let id = lastId++;
        termToId[term] = id;
      }

      for (let res of inputJson) {
        let term = res.term;
        let originalTerm = res.original_term;

        var rendering = `<h1>${term} <a href="https://www.amazon.com/s?k=${term}" target="_blank">[visit]</a></h1>`;
        
        try {
          let summary = res.analyst_feedback;
          rendering += "<h2>Summary</h2>";
          rendering += "<div>" + marked.parse(summary) + "</div>";

          rendering += "<h2>Analytics</h2>";
          rendering += "<div class='table-container'><table>";
          for (let listing_analytics of res.analytics) {
            if (listing_analytics === null) { continue; }
            let listing = listing_analytics.original_listing;
      
            rendering += "<tr>";
            
            // Web scraped Amazon URL is suffix of amazon.com URL
            let roundedEstimatedCost = listing_analytics.estimated_cost !== null ? `$${listing_analytics.estimated_cost.toFixed(2)}` : "sourcing not found";
            let estimatedMarginPercentage = listing_analytics.estimated_margin !== null ? `${(listing_analytics.estimated_margin * 100).toFixed(2)}%` : "sourcing not found";
            let listingName = listing.name.length < 50 ? listing.name : listing.name.substring(0, 47) + '[...]';
            let listingContent = `
              <div class="productInfoBox">
                <div class="text">
                  <h3><a href="https://amazon.com${listing.url}" target="_blank">${listingName}</a></h3>
                  <p>Price: ${listing.price}<p>
                  <p>Ratings: ${listing.rating}</p>
                  <p>Reviews: ${listing.reviews}</p>
                  <p>Estimated Cost: ${roundedEstimatedCost}</p>
                  <p>Estimated Margin: ${estimatedMarginPercentage}</p>
                </div>
                <img src="${listing.image}" />
              </div>`;
            rendering += `<td>${listingContent}</td>`;

            var index = 1;
            for (let comparison of listing_analytics.comparisons) {
              if (comparison === null) { continue; }
              let altListing = comparison.supplier_listing;
              let altListingName = altListing.name.length < 50 ? altListing.name : altListing.name.substring(0, 47) + '[...]';
              let matchClass = comparison.match ? 'match-true' : 'match-false';
            
              let comparisonContent = `
                <div class="productInfoBox">
                  <div class="text">
                    <h3><a href="${altListing.url}" target="_blank"> [${index++}] ${altListingName}</a></h3>
                    <p>Price: $${altListing.price}</p>
                    <p>Match: ${comparison.match}</p>
                  </div>
                  <img src="${altListing.image}">
                </div>`;
              rendering += `<td class="${matchClass}">${comparisonContent}</td>`;
            }
            
            rendering += "</tr>";
          }
          rendering += "</table></div>";

        } catch (err) {
          rendering += "<p>Rendering error</p>";
          rendering += "<p>" + err.message + "</p>";
        }

        nodesList.push({ id: termToId[term], label: term, rendering: rendering });
        if (termToId[originalTerm] !== undefined) {
          edgesList.push({ from: termToId[originalTerm], to: termToId[term], arrows: 'to' });
        }
      }

      var nodes = new vis.DataSet(nodesList);
      var edges = new vis.DataSet(edgesList);

      var container = document.getElementById("mynetwork");
      var data = {
        nodes: nodes,
        edges: edges
      };
      var options = {};
      var network = new vis.Network(container, data, options);
    
      network.on("click", function(params) {
        if (params.nodes.length > 0) {
          var nodeId = params.nodes[0];
          var node = nodes.get(nodeId);
          document.getElementById('infoContent').innerHTML = node.rendering;
          document.getElementById('infoWindow').style.display = 'block';
        }
      });
    } catch (err) {
      alert("Error encountered: " + err.message);
    }
  }

  const startFileMonitoring = (file) => {
    clearInterval(fileReaderInterval); // Clear any previous interval
    fileReaderInterval = setInterval(() => {
      const reader = new FileReader();
      reader.onload = function(e) {
        const currentContent = e.target.result;
        if (previousContent !== currentContent) {
          previousContent = currentContent;
          render(currentContent);
        }
      };
      reader.readAsText(file);
    }, 5000);
  };
  
  document.getElementById('fileInput').addEventListener('change', function(event) {
    const file = event.target.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = function(e) {
        previousContent = e.target.result;
        render(previousContent);
        startFileMonitoring(file);
      };
      reader.readAsText(file);
    } else {
      document.getElementById('fileContent').textContent = 'No file selected';
    }
  });
  </script>
</body>
</html>