<commit_before><div id="snapshot" class="snapshot"><div id="loading">Snapshot loading... [This takes a while--please be patient we're building the climate change universe just for you!] <img src="./img/lightbox/loading.gif"></div></div>
<script language="javascript">
var xmlhttp = new XMLHttpRequest();
var url = "./snapshot_orgs.php";
var done = 0;
var xmlhttp2 = new XMLHttpRequest();
var url2 = "./snapshot_layout.php";
var orgs;
var layout;

/**
 * The main snapshot function.
 * This function assumes that snapshot_orgs and snapshot_layout have already been called populating "layout" and "orgs" as global variables
 *
 * First, it finds the snapshot div within the document to orient itself to the width available
 * Then it draws the borders (the gray boxes under the titles) and the titles themselves
 * Finally it iterates through the list of organizations by focus-types and prints each individual cell ("PrintCell");
 */
function drawSnapshot() {
  var snapshotDiv = document.getElementById("snapshot");
  var width = window.innerWidth;

  //Handle the template width (GAR!)
  var containerWidth = snapshotDiv.clientWidth;
  if (containerWidth < width) {
    width = containerWidth;
  }

  var orgCount = Object.keys(orgs).length;

  var orgList = layout["orgs"];
  var focusList = layout["focus_types"];
  var tableLayout = layout["layout"];

  var cellWidth = parseInt (width / (focusList.length+1));
  var height = cellWidth * ((orgList.length+1));
  snapshotDiv.style.height = height + "px";

  var baseTop = snapshotDiv.offsetTop;
  var baseLeft = snapshotDiv.offsetLeft;

  var canvas = drawCanvas(width, height, snapshotDiv);

  drawBorders(focusList, orgList, snapshotDiv, cellWidth);

  drawLabels(focusList, orgList, snapshotDiv, cellWidth);

  for (i=0;i<orgList.length;i++) {
    var org = orgList[i];
    for (j=0;j<focusList.length;j++) {
      var focus = focusList[j];
      var cellLayout = tableLayout[org][focus];
      if (cellLayout == null) {
        //no items
        continue;
      }
      var cellLeft = (j+1) * cellWidth + baseLeft;
      var cellTop = i * cellWidth + baseTop;

      printCell(cellLayout, cellLeft, cellTop, cellWidth, snapshotDiv);
    }
  }
  var loadingDiv = document.getElementById("loading").innerHTML="";
}

function drawCanvas(width, height, snapshotDiv) {
  //First add the canvas at the very back.
  console.log("Drawing canvas (" + width + "," + height + ")");
  var canvas = document.createElement("canvas");
  canvas.style.left = snapshotDiv.offsetLeft + "px";
  canvas.style.top = snapshotDiv.offsetTop + "px";
  canvas.width = width;
  canvas.height = height;
  canvas.style.position = "absolute";
  canvas.style.zIndex = -1;

  snapshotDiv.appendChild(canvas);

  return canvas;
}

/**
 * Draws the gray borders around the snapshot
 * @param focusList
 * @param orgList
 * @param snapshotDiv
 * @param cellWidth
 */
function drawBorders(focusList, orgList, snapshotDiv, cellWidth) {
  var baseTop = snapshotDiv.offsetTop;
  var baseLeft = snapshotDiv.offsetLeft;

  var orgBackground = document.createElement("div");
  snapshotDiv.appendChild(orgBackground);
  orgBackground.id="org-labels-background";
  orgBackground.style.width= cellWidth + "px";
  orgBackground.style.left = (baseLeft) + "px";
  orgBackground.style.top=(baseTop) + "px";
  orgBackground.style.height=((orgList.length + 1) * cellWidth) + "px";

  var dataBackground = document.createElement("div");
  snapshotDiv.appendChild(dataBackground);
  dataBackground.id="data-background";
  dataBackground.style.width= (focusList.length * cellWidth) + "px";
  dataBackground.style.left = (baseLeft + cellWidth) + "px";
  dataBackground.style.top=(baseTop) + "px";
  dataBackground.style.height=(orgList.length * cellWidth) + "px";

  var focusBackground = document.createElement("div");
  snapshotDiv.appendChild(focusBackground);
  focusBackground.id="focus-labels-background";
  focusBackground.style.width= (focusList.length * cellWidth) + "px";
  focusBackground.style.left = (baseLeft + cellWidth) + "px";
  focusBackground.style.top= (baseTop + (orgList.length) * cellWidth) + "px";
  focusBackground.style.height=(cellWidth) + "px";
}

function drawLabels(focusList, orgList, snapshotDiv, cellWidth) {
  var baseTop = snapshotDiv.offsetTop;
  var baseLeft = snapshotDiv.offsetLeft;

  var height = cellWidth * (orgList.length);
  snapshotDiv.style.height = height + "px";

  for (j=0;j<focusList.length;j++) {
    var focusLabel = document.createElement("div");
    focusLabel.id="focus_" + j;
    snapshotDiv.appendChild(focusLabel);
    focusLabel.className = "heading-div";
    focusLabel.style.width = cellWidth + "px";
    focusLabel.style.left = ((j+1) * cellWidth  + baseLeft) + "px";
    focusLabel.style.height = cellWidth + "px";
    focusLabel.style.top = (baseTop + height + cellWidth / 5) +  "px";
    focusLabel.onmouseover = showToolTip;
    focusLabel.onmouseout = hideToolTip;

    var headingLabel = document.createElement("h4");
    headingLabel.id="focus_" + j + "_heading";
    headingLabel.className = "heading-label";
    focusLabel.appendChild(headingLabel);
    headingLabel.innerHTML = focusList[j];

    createLabelToolTip(j, "focus text", focusLabel.style.left, focusLabel.style.top, cellWidth, snapshotDiv, "focus");
  }

  for (i=0;i<orgList.length;i++) {
    var orgLabel = document.createElement("div");
    orgLabel.id="org_" + [i];
    snapshotDiv.appendChild(orgLabel);
    orgLabel.className = "heading-div";
    orgLabel.style.width = cellWidth + "px";
    orgLabel.style.height = cellWidth + "px";
    orgLabel.style.left = baseLeft + "px";
    orgLabel.style.top = baseTop + i * cellWidth + "px";

    headingLabel = document.createElement("h4");
    headingLabel.id="org_" + i + "_heading";
    headingLabel.className = "heading-label";
    orgLabel.appendChild(headingLabel);
    headingLabel.innerHTML = orgList[i];
  }
}

function createLabelToolTip (id, text, left, top, cellSize, addTo, focusOrType) {
  //Create the tooltip
  var hMidpoint = addTo.offsetLeft + addTo.offsetWidth / 2;
  var vMidpoint = addTo.offsetTop + addTo.offsetHeight/ 2;
  var tooltipWidth = cellSize;
  var tooltipHeight = cellSize;

  var toolTip = document.createElement("div");
  toolTip.id = focusOrType + "_" + id + "_tooltip" ;
  toolTip.className= "hover-box";
  addTo.appendChild(toolTip);

  toolTip.innerHTML = text;

  //Compute its position relative to the midpoint.
  if (left < hMidpoint) {
    toolTip.style.left = (left + (cellSize * 5/4)) + "px";
  } else {
    toolTip.style.left = (left - (cellSize / 4) - tooltipWidth) + "px";
  }

  if (top < vMidpoint) {
    toolTip.style.top = (top) + "px";
  } else {
    toolTip.style.top = (top - tooltipHeight + (cellSize * 3 / 2)) + "px";
  }
  toolTip.style.width = tooltipWidth + "px";
  toolTip.style.height = tooltipHeight + "px";
}

function printCell(cellLayout,  left, top, cellWidth, addTo) {
  var sizer = cellWidth / 3;
  var totalInCell = cellLayout[0];
  if (totalInCell <= 4) {
    sizer = cellWidth / 2;
  } else if (totalInCell <=9) {
    sizer = cellWidth / 3;
  }else if (totalInCell > 9 && totalInCell < 16) {
    sizer = cellWidth / 4;
  } else {
    console.log ("TOO MANY ITEMS IN CELL: " + cellLayout);
    sizer = cellWidth / 5;
  }


  var rowNum;
  // Start at 1 to skip the total in the first array value
  for (rowNum = 0; rowNum< cellLayout.length - 1; rowNum++) {
    var row = cellLayout[rowNum + 1];
    if (row == null || !Array.isArray(row)) {<commit_msg>Location is now correct of tooltip for focus areas.<commit_after><div id="snapshot" class="snapshot"><div id="loading">Snapshot loading... [This takes a while--please be patient we're building the climate change universe just for you!] <img src="./img/lightbox/loading.gif"></div></div>
<script language="javascript">
var xmlhttp = new XMLHttpRequest();
var url = "./snapshot_orgs.php";
var done = 0;
var xmlhttp2 = new XMLHttpRequest();
var url2 = "./snapshot_layout.php";
var orgs;
var layout;

/**
 * The main snapshot function.
 * This function assumes that snapshot_orgs and snapshot_layout have already been called populating "layout" and "orgs" as global variables
 *
 * First, it finds the snapshot div within the document to orient itself to the width available
 * Then it draws the borders (the gray boxes under the titles) and the titles themselves
 * Finally it iterates through the list of organizations by focus-types and prints each individual cell ("PrintCell");
 */
function drawSnapshot() {
  var snapshotDiv = document.getElementById("snapshot");
  var width = window.innerWidth;

  //Handle the template width (GAR!)
  var containerWidth = snapshotDiv.clientWidth;
  if (containerWidth < width) {
    width = containerWidth;
  }

  var orgCount = Object.keys(orgs).length;

  var orgList = layout["orgs"];
  var focusList = layout["focus_types"];
  var tableLayout = layout["layout"];

  var cellWidth = parseInt (width / (focusList.length+1));
  var height = cellWidth * ((orgList.length+1));
  snapshotDiv.style.height = height + "px";

  var baseTop = snapshotDiv.offsetTop;
  var baseLeft = snapshotDiv.offsetLeft;

  var canvas = drawCanvas(width, height, snapshotDiv);

  drawBorders(focusList, orgList, snapshotDiv, cellWidth);

  drawLabels(focusList, orgList, snapshotDiv, cellWidth);

  for (i=0;i<orgList.length;i++) {
    var org = orgList[i];
    for (j=0;j<focusList.length;j++) {
      var focus = focusList[j];
      var cellLayout = tableLayout[org][focus];
      if (cellLayout == null) {
        //no items
        continue;
      }
      var cellLeft = (j+1) * cellWidth + baseLeft;
      var cellTop = i * cellWidth + baseTop;

      printCell(cellLayout, cellLeft, cellTop, cellWidth, snapshotDiv);
    }
  }
  var loadingDiv = document.getElementById("loading").innerHTML="";
}

function drawCanvas(width, height, snapshotDiv) {
  //First add the canvas at the very back.
  console.log("Drawing canvas (" + width + "," + height + ")");
  var canvas = document.createElement("canvas");
  canvas.style.left = snapshotDiv.offsetLeft + "px";
  canvas.style.top = snapshotDiv.offsetTop + "px";
  canvas.width = width;
  canvas.height = height;
  canvas.style.position = "absolute";
  canvas.style.zIndex = -1;

  snapshotDiv.appendChild(canvas);

  return canvas;
}

/**
 * Draws the gray borders around the snapshot
 * @param focusList
 * @param orgList
 * @param snapshotDiv
 * @param cellWidth
 */
function drawBorders(focusList, orgList, snapshotDiv, cellWidth) {
  var baseTop = snapshotDiv.offsetTop;
  var baseLeft = snapshotDiv.offsetLeft;

  var orgBackground = document.createElement("div");
  snapshotDiv.appendChild(orgBackground);
  orgBackground.id="org-labels-background";
  orgBackground.style.width= cellWidth + "px";
  orgBackground.style.left = (baseLeft) + "px";
  orgBackground.style.top=(baseTop) + "px";
  orgBackground.style.height=((orgList.length + 1) * cellWidth) + "px";

  var dataBackground = document.createElement("div");
  snapshotDiv.appendChild(dataBackground);
  dataBackground.id="data-background";
  dataBackground.style.width= (focusList.length * cellWidth) + "px";
  dataBackground.style.left = (baseLeft + cellWidth) + "px";
  dataBackground.style.top=(baseTop) + "px";
  dataBackground.style.height=(orgList.length * cellWidth) + "px";

  var focusBackground = document.createElement("div");
  snapshotDiv.appendChild(focusBackground);
  focusBackground.id="focus-labels-background";
  focusBackground.style.width= (focusList.length * cellWidth) + "px";
  focusBackground.style.left = (baseLeft + cellWidth) + "px";
  focusBackground.style.top= (baseTop + (orgList.length) * cellWidth) + "px";
  focusBackground.style.height=(cellWidth) + "px";
}

function drawLabels(focusList, orgList, snapshotDiv, cellWidth) {
  var baseTop = snapshotDiv.offsetTop;
  var baseLeft = snapshotDiv.offsetLeft;

  var height = cellWidth * (orgList.length);
  snapshotDiv.style.height = height + "px";

  for (j=0;j<focusList.length;j++) {
    var focusLabel = document.createElement("div");
    focusLabel.id="focus_" + j;
    snapshotDiv.appendChild(focusLabel);
    focusLabel.className = "heading-div";
    focusLabel.style.width = cellWidth + "px";
    focusLabel.style.left = ((j+1) * cellWidth  + baseLeft) + "px";
    focusLabel.style.height = cellWidth + "px";
    focusLabel.style.top = (baseTop + height + cellWidth / 5) +  "px";
    focusLabel.onmouseover = showToolTip;
    focusLabel.onmouseout = hideToolTip;

    var headingLabel = document.createElement("h4");
    headingLabel.id="focus_" + j + "_heading";
    headingLabel.className = "heading-label";
    focusLabel.appendChild(headingLabel);
    headingLabel.innerHTML = focusList[j];

    //TODO: Somehow the left and top aren't working
    createLabelToolTip(j, "focus text", focusLabel.offsetLeft, focusLabel.offsetTop, cellWidth, snapshotDiv, "focus");
  }

  for (i=0;i<orgList.length;i++) {
    var orgLabel = document.createElement("div");
    orgLabel.id="org_" + [i];
    snapshotDiv.appendChild(orgLabel);
    orgLabel.className = "heading-div";
    orgLabel.style.width = cellWidth + "px";
    orgLabel.style.height = cellWidth + "px";
    orgLabel.style.left = baseLeft + "px";
    orgLabel.style.top = baseTop + i * cellWidth + "px";

    headingLabel = document.createElement("h4");
    headingLabel.id="org_" + i + "_heading";
    headingLabel.className = "heading-label";
    orgLabel.appendChild(headingLabel);
    headingLabel.innerHTML = orgList[i];
  }
}

function createLabelToolTip (id, text, left, top, cellSize, addTo, focusOrType) {
  //Create the tooltip
  var hMidpoint = addTo.offsetLeft + addTo.offsetWidth / 2;
  var vMidpoint = addTo.offsetTop + addTo.offsetHeight/ 2;
  var tooltipWidth = cellSize;
  var tooltipHeight = cellSize;

  console.log("Left:" + left + "; Top:" + top);

  var toolTip = document.createElement("div");
  toolTip.id = focusOrType + "_" + id + "_tooltip" ;
  toolTip.className= "hover-box";
  addTo.appendChild(toolTip);

  toolTip.innerHTML = text;

  //Compute its position relative to the midpoint.
  if (left < hMidpoint) {
    toolTip.style.left = (left + (cellSize / 4)) + "px";
  } else {
    toolTip.style.left = (left - (cellSize / 4) - tooltipWidth) + "px";
  }

  if (top < vMidpoint) {
    toolTip.style.top = (top) + "px";
  } else {
    toolTip.style.top = (top - tooltipHeight) + "px";
  }
  toolTip.style.width = tooltipWidth + "px";
  toolTip.style.height = tooltipHeight + "px";
}

function printCell(cellLayout,  left, top, cellWidth, addTo) {
  var sizer = cellWidth / 3;
  var totalInCell = cellLayout[0];
  if (totalInCell <= 4) {
    sizer = cellWidth / 2;
  } else if (totalInCell <=9) {
    sizer = cellWidth / 3;
  }else if (totalInCell > 9 && totalInCell < 16) {
    sizer = cellWidth / 4;
  } else {
    console.log ("TOO MANY ITEMS IN CELL: " + cellLayout);
    sizer = cellWidth / 5;
  }

  var rowNum;
  // Start at 1 to skip the total in the first array value
  for (rowNum = 0; rowNum< cellLayout.length - 1; rowNum++) {
    var row = cellLayout[rowNum + 1];
    if (row == null || !Array.isArray(row)) {
{'fraction_non_alphanumeric': 0.13628856444473805, 'fraction_numerical': 0.004822620070027086, 'mean_word_length': 3.9828834759710334, 'pattern_counts': {'":': 0, '<': 37, '<?xml version=': 0, '>': 17, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 4}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1024906', 'n_tokens_mistral': 4787, 'n_tokens_neox': 4700, 'n_words': 1199}