/* JQUERY ENGINE */
/* JSPDF ENGINE */
/* KONVA ENGINE */
/* MARKJS ENGINE */

  var additionalRowStorage;
  if (typeof additionalRowStorage === 'undefined') {
    var additionalRowStorage = {
      'ELEMENT_IDS': {}
    };
  }

  // populate all session_key fields
  $('.session_key').text(sessionKey);

  // just used in rail report
  // rail summary has to be built first
  if (typeof buildRailSummaryFromJson != 'undefined') {
    buildRailSummaryFromJson();
  }
  if (typeof buildJsonTable != 'undefined') {
    buildJsonTable(null, true);
  }

  // this function will clear the cache for all reports with the same uid
  function clearReportCache() {
    localStorage.removeItem(sessionKey);

    var thisUid = sessionKey.split('/')[0];

    for (var cache in localStorage) {
      var uid = cache.split('/')[0];

      if (thisUid == uid) {
        localStorage.removeItem(cache);
      }
    }
  }

function cacheWebPage() {
  delayedExecutionOrCancel('cacheWebPage', () => {
    localStorage.setItem(sessionKey, JSON.stringify(additionalRowStorage));
  }, 500);
}

  function loadFromCache() {
    var cache = localStorage.getItem(sessionKey);

    // if there is a cache we want to use that.
    // the presence of a cache means the external json file (if it exists/existed)
    // has already been loaded into memory for this report instance
    if (cache != null) {
      additionalRowStorage = JSON.parse(cache);
      if (!additionalRowStorage['ELEMENT_IDS']) {
        additionalRowStorage['ELEMENT_IDS'] = {};
      }
    }
    
    cacheWebPage();
  }

  function textRegexMatchArray(text, regex) {
    try {
      var reg = new RegExp(regex, 'i');
      return text.match(reg);
    } catch {
      return false;
    }
  }

  function equalsContainsMatches(text, match) {
    if (text === match) return true;
    if (text.indexOf(match) > -1) return true;

    return textRegexMatchArray(text, match);
  }

  function escapeRegex(string) {
    if (!escapeRegex.regex) {
      escapeRegex.regex = /[-\/\\^$*+?.()|[\]{}]/g;
    }

    return string.replace(escapeRegex.regex, '\\$&');
  }

  function getCurrentDirectory() {

    // origin will be http if its on the webserver and file if its local
    if (window.location.origin.match(/https?:\/\//i)) {
      const ret = window.location.href.split('/').slice(0, -1).join('/');
      return ret;
    }
    
    // start at index 1 because index 0 is empty meaning it adds a slash at the beginning
    // and we dont want the extra slash.
    // end at index -1 because the last index is the file name and we dont want that either.
    var dir = window.location.pathname.split('/').slice(1, -1).join('/');
    
    // linux directory structure fix. if the window location pathname doesnt include the drive, we add the file prefix. this fixes it in bills vm.
    if (!dir.match(/^\w+:\//i)) {
      dir = 'file:///' + dir;
    }
    return dir;
  }

  function moveCaretToEnd(el) {
    var range = document.createRange();
    range.selectNode(el);
    range.setStart(el, 0);
    range.setEnd(el, 1);
    range.collapse();

    var sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
  }

  function copyTextToClipboard(text) {
    //Create a textbox field where we can insert text to. 
    var copyFrom = document.createElement("textarea");

    //Set the text content to be the text you wished to copy.
    copyFrom.textContent = text;

    //Append the textbox field into the body as a child. 
    //"execCommand()" only works when there exists selected text, and the text is inside 
    //document.body (meaning the text is part of a valid rendered HTML element).
    document.body.appendChild(copyFrom);

    //Select all the text!
    copyFrom.select();

    //Execute command
    document.execCommand('copy');

    //(Optional) De-select the text using blur(). 
    copyFrom.blur();

    //Remove the textbox field from the document.body, so no other JavaScript nor 
    //other elements can get access to this.
    document.body.removeChild(copyFrom);
  }

  function downloadTextToFile(text, fileName) {
    var a = document.createElement("a");
    var blob = new Blob([text], { type: 'application/text' });
    a.href = window.URL.createObjectURL(blob);
    a.download = fileName;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  }

  function closeModal() {
    $('.modal').css('display', 'none');
  }

  function showSettingsModal() {
    if (!document.getElementById('settings_modal_button').classList.contains('disabled')) {
      $('#modal_CSET').css('display', 'block');
    }
  }

// this will queue a delayed execution keyed to the name that is given.
// if the same name is given again, it will cancel the previous one in favor of the next one.
function delayedExecutionOrCancel(name, callback, time) {
  clearTimeout(delayedExecutionOrCancel[name]);
  delayedExecutionOrCancel[name] = setTimeout(callback, time);
}
  
// ALL report web listeners need to go in here so they can be reloaded when we reload the table data
function initializeEventListeners() {
  // reset functions that have cached data
  getHeaderTextFromCell.tableHeaders = undefined;
  getHeaderTextFromCell.cache = undefined
  getActiveRailName.netName = undefined;
  col_id_from_header_name.tableHeaders = undefined;
  col_id_from_header_name.cache = undefined

  lastSelectedRow = null;
  
  createTableSortFunctions();
  $('.sorted-table').tablesort();

  loadFromCache();

  setTableRowSelectionEvents();
  setRowKeys();
  setEditableCellListeners(); // needs to be above loadAdditionalRowStorage
  loadAdditionalRowStorage();
  setTableCellHeightRestrictionEvents();
  initRailSummaryStuff();
  setHighlightOnClickEvents();
}

function initializeEventListeners_PostLoad() {
  if (typeof initCustomContextMenu != 'undefined') {
    initCustomContextMenu();
  }

  if (typeof initCustomRailContextMenu != 'undefined') {
    initCustomRailContextMenu();
  }

  if (typeof filterTableBy != 'undefined') {
    filterTableBy(null, 'default');
  }

  $('body').css("visibility", "visible");

  /* we want the last thing to be the prefilter */
  if (typeof setPrefilledFilter != 'undefined') {
    setPrefilledFilter();
  }

  /* so the uri prefilter option works - needs to happen after body is visible */
  if (typeof filterTable != 'undefined') {
    filterTable(true);
  }

  setOctopartAvailabilityColors();
}

function open_excel_link(path) {
  var url = (navigator.platform.match(/win/i) ? 'ms-excel:ofe|u|' : '') + getCurrentDirectory() + '/' + path;

  window.open(url);
}


// the idea here is the user can select either the 'All' button or one or many of the other buttons.
// pressing the 'All' button will desect all the other buttons.
// pressing any other button will select it and deselect the 'All' button if it's selected
function filterTableBy(event, type) {
  // if no type is selected then 
  if (!type) {
    $('.table-sub-filter-button').removeClass('selected');
  }
  else {
    $('.table-sub-filter-button.default').removeClass('selected');
  }

  if (event) {
    $(event.currentTarget).toggleClass('selected');
  }

  if ($('.table-sub-filter-button.selected').length == 0) {
    $('.table-sub-filter-button.default').addClass('selected');
  }

  filterTable();
}

function filterTable(skipWait = false) {
  var filterSelection = $('#table-filter-column-selection');

  if (!filterSelection.length) return;

  delayedExecutionOrCancel('filterTable', () => {
    saveFilteredTableSearchInputs();

    $('.overflow_div .sorted-table tbody').unmark();

    const colName = filterSelection.children('option:selected').text();
    const colIdx = col_id_from_header_name("^" + colName + "$"); // need to make the regex match exactly

    if (colIdx < 0) return;

    if (filterSelection.find(':selected').hasClass('is-number-range')) {
      $('#table-filter-text-input-container').css('display', 'none');
      $('#table-filter-range-input-container').css('display', '');
      hideRowRange(colIdx);
    }
    else {
      $('#table-filter-text-input-container').css('display', '');
      $('#table-filter-range-input-container').css('display', 'none');
      hideRows(colIdx);
    }

    const rowCount = $('.overflow_div .sorted-table tbody tr:visible').length;
    $('#filter-search-result-text').text(rowCount);
  }, skipWait ? 0 : 1000);
}

function hideRowRange(colIdx) {
  const rangeLow = $('#table-filter-range-input-low');
  const rangeHigh = $('#table-filter-range-input-high');

  const showAll = $('#table-sub-filter-all').hasClass('selected');

  const showEdited = $('#table-sub-filter-edited').hasClass('selected');
  const showVoltMissmatch = $('#table-sub-filter-volt-mismatch').hasClass('selected');

  const showAddedXnet = $('#table-sub-filter-added-xnets').hasClass('selected');
  const showModifiedXnet = $('#table-sub-filter-modified-xnets').hasClass('selected');
  const showRemovedXnet = $('#table-sub-filter-removed-xnets').hasClass('selected');

  const xnetStateColumn = col_id_from_header_name('state');
  const checkXNetState = xnetStateColumn >= 0 && (showAddedXnet || showModifiedXnet || showRemovedXnet);

  const pinVoltColumn = col_id_from_header_name('pin / bank volt');
  const netVoltColumn = col_id_from_header_name('net volt');

  const octopartGreen = $('#table-sub-filter-octo-green').hasClass('selected');
  const octopartLime = $('#table-sub-filter-octo-lime').hasClass('selected');
  const octopartOrange = $('#table-sub-filter-octo-orange').hasClass('selected');
  const octopartRed = $('#table-sub-filter-octo-red').hasClass('selected');

  const octoPartColumn = col_id_from_header_name('part number');
  const checkOctopart = octoPartColumn >= 0 && (octopartGreen || octopartLime || octopartOrange || octopartRed);

  for (const rowEl of $('.overflow_div .sorted-table tbody tr').toArray()) {
    const row = $(rowEl);
    const children = row.children();
    
    if (!showAll) {
      row.css('display', '');

      if (showEdited) {
        var noEdits = true;
        for (const cell of children.toArray()) {
          if ($(cell).hasClass('edited')) {
            noEdits = false;
            break;
          }
        }

        if (noEdits) {
          row.css('display', 'none');
          continue;
        }
      }

      if (showVoltMissmatch && pinVoltColumn >= 0 && netVoltColumn >= 0) {
        if (!children.eq(pinVoltColumn).hasClass('red-cell')) {
          row.css('display', 'none');
          continue;
        }
      }

      if (checkOctopart) {
        const cell = children.eq(octoPartColumn);

        var hide = false;

        if (octopartGreen && cell.hasClass('green-cell')) {
          hide = true;
        }
        else if (octopartLime && cell.hasClass('yellow-cell')) {
          hide = true;
        }
        else if (octopartOrange && cell.hasClass('orange-cell')) {
          hide = true;
        }
        else if (octopartRed && cell.hasClass('red-cell')) {
          hide = true;
        }

        if (!hide) {
          row.css('display', 'none');
          continue;
        }
      }
      
      if (checkXNetState) {
        const stateValue = children.eq(xnetStateColumn).text();

        var hide = false;

        if (showAddedXnet && stateValue.match(/added/i)) {
          hide = true;
        }
        else if (showModifiedXnet && stateValue.match(/modified/i)) {
          hide = true;
        }
        else if (showRemovedXnet && stateValue.match(/removed/i)) {
          hide = true;
        }

        if (!hide) {
          row.css('display', 'none');
          continue;
        }
      }
    }

    const cell = children.eq(colIdx);
    const cellNumber = Number(cell.text().replace(/[^0-9.\-]/ig, ''));

    if (Number.isNaN(cellNumber) || cellNumber < rangeLow.val() || cellNumber > rangeHigh.val()) {
      cell.parent('tr').hide();
    }
    else {
      cell.parent('tr').show();
    }
  }
}

function hideRows(colIdx) {
  const filter = $('#table-filter-text-input-field').val();

  const matchByContains = $('#table-filter-text-input-logic').val() === 'c';
  const filterValues = filter.split(',');

  const showAll = $('#table-sub-filter-all').hasClass('selected');

  const showEdited = $('#table-sub-filter-edited').hasClass('selected');
  const showVoltMissmatch = $('#table-sub-filter-volt-mismatch').hasClass('selected');

  const showAddedXnet = $('#table-sub-filter-added-xnets').hasClass('selected');
  const showModifiedXnet = $('#table-sub-filter-modified-xnets').hasClass('selected');
  const showRemovedXnet = $('#table-sub-filter-removed-xnets').hasClass('selected');

  const xnetStateColumn = col_id_from_header_name('state');
  const checkXNetState = xnetStateColumn >= 0 && (showAddedXnet || showModifiedXnet || showRemovedXnet);

  const pinVoltColumn = col_id_from_header_name('pin / bank volt');
  const netVoltColumn = col_id_from_header_name('net volt');

  const octopartGreen = $('#table-sub-filter-octo-green').hasClass('selected');
  const octopartLime = $('#table-sub-filter-octo-lime').hasClass('selected');
  const octopartOrange = $('#table-sub-filter-octo-orange').hasClass('selected');
  const octopartRed = $('#table-sub-filter-octo-red').hasClass('selected');

  const octoPartColumn = col_id_from_header_name('part number');
  const checkOctopart = octoPartColumn >= 0 && (octopartGreen || octopartLime || octopartOrange || octopartRed);

  for (const rowEl of $('.overflow_div .sorted-table tbody tr').toArray()) {
    const row = $(rowEl);
    const children = row.children();
    
    if (!showAll) {
      row.css('display', '');

      if (showEdited) {
        var noEdits = true;
        for (const cell of children.toArray()) {
          if ($(cell).hasClass('edited')) {
            noEdits = false;
            break;
          }
        }

        if (noEdits) {
          row.css('display', 'none');
          continue;
        }
      }

      if (showVoltMissmatch && pinVoltColumn >= 0 && netVoltColumn >= 0) {
        if (!children.eq(pinVoltColumn).hasClass('red-cell')) {
          row.css('display', 'none');
          continue;
        }
      }

      if (checkOctopart) {
        const cell = children.eq(octoPartColumn);

        var hide = false;

        if (octopartGreen && cell.hasClass('green-cell')) {
          hide = true;
        }
        else if (octopartLime && cell.hasClass('yellow-cell')) {
          hide = true;
        }
        else if (octopartOrange && cell.hasClass('orange-cell')) {
          hide = true;
        }
        else if (octopartRed && cell.hasClass('red-cell')) {
          hide = true;
        }

        if (!hide) {
          row.css('display', 'none');
          continue;
        }
      }
      
      if (checkXNetState) {
        const stateValue = children.eq(xnetStateColumn).text();

        var hide = false;

        if (showAddedXnet && stateValue.match(/added/i)) {
          hide = true;
        }
        else if (showModifiedXnet && stateValue.match(/modified/i)) {
          hide = true;
        }
        else if (showRemovedXnet && stateValue.match(/removed/i)) {
          hide = true;
        }

        if (!hide) {
          row.css('display', 'none');
          continue;
        }
      }
    }

    // if theres no filter applied we want to show the row
    if (filterValues.length == 0) {
      row.css('display', '');
      continue;
    }

    const cell = children.eq(colIdx);
    const cellText = cell.text().trim();

    if (matchByContains) {
      for (const searchString of filterValues) {
        if (equalsContainsMatches(cellText, searchString)) {
          row.css('display', '');
          cell.markRegExp(new RegExp(searchString, 'i'));
          break;
        }
        else {
          row.css('display', 'none');
        }
      }
    }
    else {
      for (const searchString of filterValues) {
        if (equalsContainsMatches(cellText, searchString)) {
          row.css('display', 'none');
          break;
        }
        else {
          row.css('display', '');
        }
      }
    }
  }
}
  function acceptRejectRows(rowElements, newValue, saveButtonOn = true) {
    var rows = $(rowElements);

    if (rows.length <= 0) return;

    var arCellId = col_id_from_header_name('a/r|accept.+?reject');
    var msCellId = col_id_from_header_name('match.+?score');

    // if there is no accept reject row we wont have anything to edit so no point in continuing...
    if (arCellId < 0) return;

    var msClass, arClass, nodeClass;

    if (newValue >= 100) {
      msClass = 'override-good';
      arClass = 'accept';
      nodeClass = 'green-node';
    }
    else if (newValue >= 0) {
      msClass = 'override-bad';
      arClass = 'reject';
      nodeClass = 'red-node';
    }

    rows.toArray().forEach(rowElement => {
      var row = $(rowElement);
      var rowKey = getRowKey(row);
      var cells = row.children();

      var arCell = $(cells[arCellId]);
      var acceptRejectCellMap = getRowCellMap(rowKey, cells[arCellId]);

      // clear existing values
      arCell.removeClass('accept')
        .removeClass('reject');

      delete acceptRejectCellMap['css-class'];
      delete acceptRejectCellMap['text'];

      if (newValue >= 0) {
        arCell.addClass(arClass);
        acceptRejectCellMap['css-class'] = arClass;
      }

      row.find('td .highlight-on-click').toArray().forEach(element => setNodeColor(element, nodeClass));

      // if no match score row, then we stop here, otherwise its an ep compare/verify report and we edit the match score
      if (msCellId < 0) return;

      var msCell = $(cells[msCellId]);
      var matchScoreCellMap = getRowCellMap(rowKey, cells[msCellId]);

      // clear existing values
      msCell.removeClass('override-bad');
      msCell.removeClass('override-good');
      delete matchScoreCellMap['css-class'];
      delete matchScoreCellMap['overrideValue'];

      if (newValue >= 0) {
        msCell.addClass(msClass);
        matchScoreCellMap['css-class'] = msClass;
        matchScoreCellMap['overrideValue'] = newValue; // this gets picked up by NetBom to be put in the Excel report
      }
    });

    if (saveButtonOn) {
      cacheWebPage();
    }
  }
  $('body').keydown(
    function (event) {
      if (event.key === "Shift" || event.key === "Control" || event.key === "Alt") {
        return;
      }

      if (event.target.id === 'table-filter-text-input-field') {
        if (event.key === 'Escape') {
          // $('input#table-filter-text-input-field').val('');
          $('input#table-filter-text-input-field').blur();
          // filterTable();
        }
        else if (event.key === 'ArrowUp') {
          var sel = $('#table-filter-column-selection');
          var optionIndex = sel[0].options.selectedIndex;
          var nextIndex = optionIndex - 1;
          
          if (nextIndex < 0) return;
          
          sel.val(sel[0].options[nextIndex].value);
        }
        else if (event.key === 'ArrowDown') {
          var sel = $('#table-filter-column-selection');
          var optionIndex = sel[0].options.selectedIndex;
          var nextIndex = optionIndex + 1;
          
          if (nextIndex >= sel[0].options.length) return;
          
          sel.val(sel[0].options[nextIndex].value);
        }
      }

      if (event.target.localName !== 'body') return;

      if (event.key === "ArrowUp") {
        var allRows = $(".overflow_div .sorted-table tbody tr");
        var selectedTableRow = $('.overflow_div .sorted-table tbody tr.selectedRow:first');

        var rowToSelect;

        for (var i = $(selectedTableRow).index() - 1; i < allRows.length; i--) {
          if ($(allRows[i]).css('display') !== 'none') {
            if (i >= 0) {
              rowToSelect = allRows[i];
            }
            break;
          }
        }

        if (rowToSelect) {
          // deselect all rows next to the selected row
          if (!event.ctrlKey && !event.shiftKey) {
            deselectTableRow($(selectedTableRow).siblings());
            deselectTableRow($(selectedTableRow));
          }

          // select our new row
          selectTableRow(rowToSelect);
        }

        // we dont want the scroll bar to move if we are pressing arrow keys
        event.preventDefault();
      }
      else if (event.key === "ArrowDown") {
        var allRows = $(".overflow_div .sorted-table tbody tr");
        var selectedTableRow = $('.overflow_div .sorted-table tbody tr.selectedRow:last');

        var rowToSelect;

        for (var i = $(selectedTableRow).index() + 1; i < allRows.length; i++) {
          if ($(allRows[i]).css('display') !== 'none') {
            if (i < allRows.length) {
              rowToSelect = allRows[i];
            }
            break;
          }
        }

        if (rowToSelect) {
          // deselect all rows next to the selected row
          if (!event.ctrlKey && !event.shiftKey) {
            deselectTableRow($(selectedTableRow).siblings());
            deselectTableRow($(selectedTableRow));
          }

          // select our new row
          selectTableRow(rowToSelect);
        }

        // we dont want the scroll bar to move if we are pressing arrow keys
        event.preventDefault();
      }
      else if (event.ctrlKey && !event.shiftKey && event.key !== 'Backspace') { // ctrl + key
        if (event.altKey) { // ctrl + alt + key
          switch (event.key.toLowerCase()) {
            case 'a': // accept
              var selectedTableRow = $('.overflow_div .sorted-table tbody tr.selectedRow');
              acceptRejectRows(selectedTableRow, '100', true);
              break;
            case 'r': // reject
              var selectedTableRow = $('.overflow_div .sorted-table tbody tr.selectedRow');
              acceptRejectRows(selectedTableRow, '0', true);
              break;
            case 'c': // clear
              var selectedTableRow = $('.overflow_div .sorted-table tbody tr.selectedRow');
              acceptRejectRows(selectedTableRow, '-1', true);
              break;
            case 'enter': // accept rows and set selected row to next row
              var selectedTableRow = $('.overflow_div .sorted-table tbody tr.selectedRow');
              acceptRejectRows(selectedTableRow, '100', true);

              // get all rows so we can use the index of the last table row
              var allRows = $(".overflow_div .sorted-table tbody tr");

              deselectTableRow(null);

              for (var i = selectedTableRow.last().index() + 1; i < allRows.length; i++) {
                if ($(allRows[i]).css('display') !== 'none') {
                  if (i < allRows.length) {
                    selectTableRow(allRows[i]);
                  }
                  break;
                }
              }
              break;
            default:
              return;
          }
        }
        else { // ctrl + key
          switch (event.key.toLowerCase()) {
            case 'a': // select all visible rows
              var allRows = $(".overflow_div .sorted-table tbody tr:visible");
              selectTableRow(allRows);
              break;
            case 's': // save edited rows
              saveAdditionalRowStorage();
              break;
            case 'f': // jump to filter
              $('#table-filter-text-input-field').select();
              break;
            default:
              return;
          }
        }

        // we dont want normal ctrl+key things to happen if we have custom ones in place
        event.preventDefault();
      }
      else {
        writeToSelectedCells(event);
      }
    });

function writeToSelectedCells(event) {
  // we have to check against the literal 'true' because it holds true or false as a string lol
  if (document.activeElement.contentEditable !== 'true') {
    return;
  }
  
  var commentCellIdx = $(document.activeElement).index();

  // make sure we get an index otherwise we dont want to do anything
  if (commentCellIdx >= 0) {
    var selectedTableRow = $('.overflow_div .sorted-table tbody tr.selectedRow');

    // we return if the selected rows are 1 because if that is the case we let the parent function take care of writing, we dont need to bulk write a single row
    if (selectedTableRow.length <= 1) return 0;

    if (event.key.length === 1) { // regular characters

      selectedTableRow.toArray().forEach(row => {
        var commentCell = $(row).children()[commentCellIdx];

        $(commentCell).text($(commentCell).text() + event.key);
        userCellEditCallback(commentCell);
        edit_pin_net_volt_cell(row);
      });

    } else if (event.key === 'Backspace') {
      if (event.ctrlKey) { // delete word by word
        selectedTableRow.toArray().forEach(row => {
          var commentCell = $(row).children()[commentCellIdx];

          var txt = $(commentCell).text();

          $(commentCell).text(txt.substring(0, txt.lastIndexOf(' ')));
          userCellEditCallback(commentCell);
          edit_pin_net_volt_cell(row);
        });
      }
      else {
        selectedTableRow.toArray().forEach(row => {
          var commentCell = $(row).children()[commentCellIdx];

          var txt = $(commentCell).text();

          $(commentCell).text(txt.substring(0, txt.length - 1)); 
          userCellEditCallback(commentCell);
          edit_pin_net_volt_cell(row);
        });
      }
    }
  }
  
  restyle_from_derating();

  return commentCellIdx >= 0;
}

/*
  A simple, lightweight jQuery plugin for creating sortable tables.
  https://github.com/kylefox/jquery-tablesort
  Version 0.0.11
*/
function createTableSortFunctions() {
  (function ($) {
    $.tablesort = function ($table, settings) {
      var self = this;
      this.$table = $table;
      this.$thead = this.$table.find('thead');
      this.settings = $.extend({}, $.tablesort.defaults, settings);
      this.$sortCells = this.$thead.length > 0 ? this.$thead.find('th:not(.no-sort)') : this.$table.find('th:not(.no-sort)');
      this.$sortCells.on('dblclick.tablesort', function () {
        self.sort($(this));
      });
      this.index = null;
      this.$th = null;
      this.direction = null;
      this.sorting = false;
      this.firstSort = true;
      
      self.sort($(this.$sortCells[0]));
    };

    $.tablesort.prototype = {

      sort: function (th, direction) {
        if (this.sorting) return;
        this.sorting = true;

        //click on a different column
        if (this.index !== th.index()) {
          this.direction = 'desc';
          this.index = th.index();
        }
        else if (direction !== 'asc' && direction !== 'desc')
          this.direction = this.direction === 'asc' ? 'desc' : 'asc';
        else
          this.direction = direction;

        direction = this.direction == 'asc' ? 1 : -1;
        
        if (this.firstSort) {
          this.sorting = false;
          this.firstSort = false;
          return;
        }

        var start = new Date(),
          self = this,
          table = this.$table,
          rowsContainer = table.find('tbody').length > 0 ? table.find('tbody') : table,
          rows = rowsContainer.find('tr'), // .has('td, th') <--- this slows things down tremendously
          cells = rows.find(':nth-child(' + (th.index() + 1) + ')').filter('td, th'),
          sortBy = th.data().sortBy,
          sortedMap = [];

        var unsortedValues = cells.map(function (idx, cell) {
          if (sortBy)
            return (typeof sortBy === 'function') ? sortBy($(th), $(cell), self) : sortBy;
          return ($(this).data().sortValue != null ? $(this).data().sortValue : $(this).text());
        });

        if (unsortedValues.length === 0) {
          this.sorting = false;
          return;
        }

        self.$table.trigger('tablesort:start', [self]);
        self.log("Sorting by " + this.index + ' ' + this.direction);

        // Try to force a browser redraw
        self.$table.css("display");
        // Run sorting asynchronously on a timeout to force browser redraw after
        // `tablesort:start` callback. Also avoids locking up the browser too much.
        setTimeout(function () {
          self.$sortCells.removeClass(self.settings.asc + ' ' + self.settings.desc);
          for (var i = 0, length = unsortedValues.length; i < length; i++) {
            sortedMap.push({
              index: i,
              cell: cells[i],
              row: rows[i],
              value: unsortedValues[i]
            });
          }
          
          var sorter = new Intl.Collator('en', { sensitivity: 'base', numeric: true });

          sortedMap.sort(function (a, b) {
            // should be fastest javascript compare function
            return sorter.compare(a.value, b.value) * direction;

            return a.value.localeCompare(b.value, undefined, {
              numeric: true,
              sensitivity: 'base'
            }) * direction;

            return self.settings.compare(a.value, b.value) * direction;
          });

          $.each(sortedMap, function (i, entry) {
            rowsContainer.append(entry.row);
          });

          th.addClass(self.settings[self.direction]);

          self.sorting = false;
          self.log('Sort finished in ' + ((new Date()).getTime() - start.getTime()) + 'ms');
          self.$table.trigger('tablesort:complete', [self]);
          //Try to force a browser redraw
          self.$table.css("display");
        }, unsortedValues.length > 2000 ? 200 : 10);
      },

      log: function (msg) {
        if (($.tablesort.DEBUG || this.settings.debug) && console && console.log) {
          console.log('[tablesort] ' + msg);
        }
      },

      destroy: function () {
        this.$sortCells.off('dblclick.tablesort');
        this.$table.data('tablesort', null);
        return null;
      }

    };

    $.tablesort.DEBUG = false;

    $.tablesort.defaults = {
      debug: $.tablesort.DEBUG,
      asc: 'sorted ascending',
      desc: 'sorted descending',
      compare: function (a, b) {
        if (a > b) {
          return 1;
        } else if (a < b) {
          return -1;
        } else {
          return 0;
        }
      }
    };

    $.fn.tablesort = function (settings) {
      var table, sortable, previous;
      return this.each(function () {
        table = $(this);
        previous = table.data('tablesort');
        if (previous) {
          previous.destroy();
        }
        table.data('tablesort', new $.tablesort(table, settings));
      });
    };

  })(window.Zepto || window.jQuery);
}

  // reference to jquery row object
  var lastSelectedRow = null;

  function selectTableRow(r) {
    var row = $(r);
    if (row.css("display") !== "none") {
      row.addClass('selectedRow');
      lastSelectedRow = row.last();
    }
  }

  function deselectTableRow(r) {
    var row = r ? $(r) : $('.selectedRow');
    row.removeClass('selectedRow');
    lastSelectedRow = row.last();
  }

function setTableRowSelectionEvents() {
  $(".sorted-table tbody tr").click(function (event) {
    if (!event.ctrlKey && !event.shiftKey) {
      deselectTableRow($(this).siblings());
    }

    if (!event.shiftKey || (event.shiftKey && !lastSelectedRow.length)) {
      if ($(this).hasClass('selectedRow')) {
        deselectTableRow(this);
      } else {
        selectTableRow(this);
      }
    }
    else {
      // order the two selected indexes
      var [low, high] = [lastSelectedRow.index() + 1, this.rowIndex].sort((a, b) => a - b);

      var rows = $(".sorted-table tr").filter(idx => idx <= high && idx >= low);

      selectTableRow(rows);

      window.getSelection().removeAllRanges(); // remove text selection that happens when a user shift clicks
    }
  });
}

  ["keyup", "keydown"].forEach((event) => {
    window.addEventListener(event, (e) => {
      document.onselectstart = function () {
        return !(e.key == "Shift" && e.shiftKey);
      }
    });
  });

  function col_id_from_header_name(name) {
    // we cache return values because theres a lot of repetitive text processing happening
    if (col_id_from_header_name.cache == undefined) {
      col_id_from_header_name.cache = {};
      col_id_from_header_name.tableHeaders = $('.overflow_div .sorted-table thead tr th').toArray();
    }

    if (col_id_from_header_name.cache[name]) {
      return col_id_from_header_name.cache[name];
    }

    var rowId = -1;
    col_id_from_header_name.tableHeaders.every(h => {
      var header = $(h);
      // split on html tags that arent line breaks (<br>) so it doesnt match the items in drop-down menus in the headers
      if (equalsContainsMatches(header.html().split(/<[^<>]{3,}>/i)[0].trim().replace(/\n|<br>/ig, ''), name)) {
        rowId = header.index();
        return false; // break out of loop
      }
      return true; // continue loop
    });

    col_id_from_header_name.cache[name] = rowId;

    return rowId;
  }

  function getHeaderTextFromCell(cell) {
      var index = $(cell).index();

    // we cache return values because theres a lot of repetitive text processing happening
    if (getHeaderTextFromCell.cache == undefined) {
      getHeaderTextFromCell.cache = {};
      getHeaderTextFromCell.tableHeaders = $('.overflow_div .sorted-table thead tr th').toArray();
    }

    if (getHeaderTextFromCell.cache[index]) {
      return getHeaderTextFromCell.cache[index];
    }

    // need to trim because the ::after css attribute that adds the sorting arrow adds a space which messes with our dictionary keys
    var ret = $(getHeaderTextFromCell.tableHeaders[index].firstChild).text().trim();

    getHeaderTextFromCell.cache[index] = ret;

    return ret;
  }

  // this needs to happen before any data is loaded
  function setRowKeys() {
    const rowKeyHeaderIndexes = [];
    const tableHeaders = $('.sorted-table thead tr th').toArray();

    for (var i = 0; i < tableHeaders.length; i++) {
      if (!$(tableHeaders[i]).text().match(/accept(.+)reject|a\/r|comment/i)) {
        rowKeyHeaderIndexes.push(i);
      }
    }

    // assign row keys so they dont change when we edit cells
    $('.sorted-table tbody tr').toArray().forEach(row => {
      var tds = $(row).find('td');

      var keyVals = [];

      tds.toArray().forEach(row => {
        var i = row.cellIndex;
        if (rowKeyHeaderIndexes.includes(i)) {
          keyVals.push($(tds[i]).text());
        }
      });

      var key = keyVals.sort().join('').replace(/\n|\s/ig, '').toUpperCase();

      row['ROW_KEY'] = key;
    });
  }

  function getRowKey(row) { // should be a reference to the tr
    return $(row)[0]['ROW_KEY'];
  }

  // TODO make this more versatile and usable on the table that contains the 'cell' variable instead of a hard coded table reference
  function setFocusCellBelow(cell) {
    var selectedTableRow = $(cell).parent();
    var headerName = getHeaderTextFromCell(cell);

    // get all rows so we can use the index of the last table row
    var allRows = $(".overflow_div .sorted-table tbody tr");

    for (var i = selectedTableRow.last().index() + 1; i < allRows.length; i++) {
      if ($(allRows[i]).css('display') !== 'none') {
        if (i < allRows.length) {
          document.activeElement.blur();
          deselectTableRow();
          selectTableRow(allRows[i]);
          var cellBelow = allRows[i].cells[col_id_from_header_name(headerName)];
          $(cellBelow).focus();
          moveCaretToEnd(cellBelow);
        }
        return;
      }
    }
  }

  // TODO make this more versatile and usable on the table that contains the 'cell' variable instead of a hard coded table reference
  function setFocusCellAbove(cell) {
    var selectedTableRow = $(cell).parent();
    var headerName = getHeaderTextFromCell(cell);

    // get all rows so we can use the index of the last table row
    var allRows = $(".overflow_div .sorted-table tbody tr");

    for (var i = selectedTableRow.last().index() - 1; i < allRows.length; i--) {
      if ($(allRows[i]).css('display') !== 'none') {
        if (i < allRows.length) {
          document.activeElement.blur();
          deselectTableRow();
          selectTableRow(allRows[i]);
          var cellAbove = allRows[i].cells[col_id_from_header_name(headerName)];
          $(cellAbove).focus();
          moveCaretToEnd(cellAbove);
        }
        return;
      }
    }
  }
  
function setEditableCellListeners() {
  $(".sorted-table tbody tr td").toArray().forEach(cellEl => {

    if (cellEl.contentEditable != 'true') return;

    var cell = $(cellEl);

    // when overrides are loaded we want to first revert the original text so we
    // store it in the cells
    cell[0]['ORIGINAL_TEXT'] = cell.text().trim();

    // we are trimming the text to remove the trailing whitespace which makes it more annoying to edit fields because
    // they look like they end at the word but theyre annoyingly padded sometimes
    cell.text(cell.text().trim());

    cell.on('keyup', (event) => {
      // this returns a zero if it didnt write to any cells -- basically means there are no selected rows
      if (!writeToSelectedCells(event)) {
        userCellEditCallback(cell);
        restyle_from_derating();
        edit_pin_net_volt_cell(cell.parent());
      }
    });
  });
}

function setOctopartAvailabilityColors() {

  // if the octopart button is disabled we dont want to 
  if ($('.octopart-button').hasClass('disabled')) return;

  const pn_cell_idx = col_id_from_header_name('part number');
  const qty_cell_idx = col_id_from_header_name('qty');

  if (pn_cell_idx < 0 || qty_cell_idx < 0) return;

  const all_stock_cell_idx = [];

  $('.sorted-table thead tr th').toArray().forEach(cellEl => {
    if (cellEl.innerText.match(/stock/i)) {
      all_stock_cell_idx.push($(cellEl).index());
    }
  });

  if (all_stock_cell_idx.length <= 0) return;

  const build_quantity = $('#build-quantity').val();
  //console.log('Build quantity: ' + build_quantity);

  $(".sorted-table tbody tr").toArray().forEach(rowEl => {
    const rowKids = $(rowEl).children();

    const pn_cell = rowKids.eq(pn_cell_idx);
    const qty_cell = rowKids.eq(qty_cell_idx);

    const required_quantity = Number(qty_cell.text().trim()) * build_quantity;

    var hasOctopartInfo = false;
    var availableVendors = 0;
    for (const stock_cell_idx of all_stock_cell_idx) {
      const count = rowKids.eq(stock_cell_idx).text().trim();
      if (count != '-') {
        hasOctopartInfo = true;
      }

      if (Number(count) >= required_quantity) {
        availableVendors += 1;
      }
    }

    pn_cell.removeClass();

    if (!hasOctopartInfo) {
      pn_cell.addClass('gray-cell');
    }
    else if (availableVendors >= all_stock_cell_idx.length) {
      pn_cell.addClass('green-cell');
    }
    else if (availableVendors >= 2) {
      pn_cell.addClass('yellow-cell');
    }
    else if (availableVendors >= 1) {
      pn_cell.addClass('orange-cell');
    }
    else {
      pn_cell.addClass('red-cell');
    }
  });
}

function userCellEditCallback(cell) {
  var jCell = $(cell);
  var rowKey = getRowKey(jCell.parent());
  var cellMap = getRowCellMap(rowKey, cell);
  cellMap['text'] = jCell.text();

  if (jCell.text() == jCell[0]['ORIGINAL_TEXT']) {
    cellMap['css-class'] = '';
    jCell.removeClass('edited');
  }
  else {
    cellMap['css-class'] = 'edited';
    jCell.addClass('edited');
  }

  cacheWebPage();
}

  function saveAdditionalRowStorage() {
    var reportUid = sessionKey.split('/')[0];

    var toSave = {};

    for (var key in localStorage) {
      if (key.startsWith(reportUid)) {
        var reportName = key.split('/')[1];
        toSave[reportName] = localStorage.getItem(key);
      }
    }

    var a = document.createElement("a");
    var blob = new Blob(["var additionalRowStorage = " + JSON.stringify(toSave, null, 2)], { type: 'application/json' });
    a.href = window.URL.createObjectURL(blob);
    a.download = jsonSaveFileName;
    a.click();
  }

  /* this needs to be called at the very end of the document load so that the row keys can be established first */
  function loadAdditionalRowStorage(manualMatchScoreMap) {
    if (manualMatchScoreMap != undefined) {
      // reset original values before we overwrite them again
      $('.overflow_div .sorted-table tbody tr td')
        .toArray()
        .forEach(cell => {
          var cellRef = $(cell);
          cellRef.removeClass('override-bad');
          cellRef.removeClass('override-good');
          cellRef.removeClass('accept');
          cellRef.removeClass('reject');

          if (cellRef[0]['ORIGINAL_TEXT']) {
            cellRef.text(cellRef[0]['ORIGINAL_TEXT']);
          }
        });

      $('.highlight-on-click.highlighted').removeClass('highlighted');

      var reportUid = sessionKey.split('/')[0];

      for (var reportName in manualMatchScoreMap) {
        localStorage.setItem(reportUid + '/' + reportName, manualMatchScoreMap[reportName]);
      }

      loadFromCache();
    }

    try {
      if (additionalRowStorage['ELEMENT_IDS']) {
        for (var key in additionalRowStorage['ELEMENT_IDS']) {
          var info = additionalRowStorage['ELEMENT_IDS'][key];
          if (info['text']) {
            $(key).text(info['text']);
          }
          if (info['css-class']) {
            $(key).addClass(info['css-class']);
          }
        }
      }
      $('.overflow_div .sorted-table tbody tr').toArray().forEach(row => {
        var rowKey = getRowKey(row);

        if (additionalRowStorage[rowKey]) {
          var cells = $(row).children();
          for (var header in additionalRowStorage[rowKey]) {
            var columnId = col_id_from_header_name(header);

            if (columnId < 0) {
              console.warn('Unable to find column for table header: ' + header);
              continue;
            }

            if (additionalRowStorage[rowKey][header]['text']) {
              $(cells[columnId]).text(additionalRowStorage[rowKey][header]['text']);
            }

            if (additionalRowStorage[rowKey][header]['css-class']) {
              $(cells[columnId]).addClass(additionalRowStorage[rowKey][header]['css-class']);
            }

            if (additionalRowStorage[rowKey][header]['highlighted']) {
              $(cells[columnId]).find('.highlight-on-click')
                .toArray()
                .forEach(n => {
                  var node = $(n);
                  var color = additionalRowStorage[rowKey][header]['highlighted'][node.text()];
                  if (color) {
                    node.addClass('highlighted').addClass(color);
                  }
                });
            }
          }
        }
        edit_pin_net_volt_cell(row);
      });

      
      if (getActiveRailName() != null) {
        restyle_from_derating(true);
        recalculateSummaryCapacitance(); // has to be after the cap_derating_change call
      }
    }
    catch (e) {
      console.log('Failed to load match score override values.');
      console.log(e);
    }

    if (manualMatchScoreMap && window.parent) {
      window.parent.postMessage({
        'reload_from_cache': manualMatchScoreMap,
        'location': window.location.href,
      }, '*');
    }
  }

  function overloadAdditionalRowStorage() {
    // from: https://stackoverflow.com/questions/6711002/how-can-i-get-javascript-to-read-from-a-json-file
    var input = document.createElement('input');
    input.type = 'file';

    input.onchange = e => {

      // getting a hold of the file reference
      var file = e.target.files[0];

      // setting up the reader
      var reader = new FileReader();
      reader.readAsText(file, 'UTF-8');

      // here we tell the reader what to do when it's done reading...
      reader.onload = readerEvent => {
        var content = readerEvent.target.result; // this is the content!

        // we add this line so its javascript when we save to file -- we need to remove to parse as json
        content = content.replace(/^var additionalRowStorage =/i, '');
        var jsonobj = JSON.parse(content);
        loadAdditionalRowStorage(jsonobj);
      }
    }

    input.click();
  }

  function getRowCellMap(rowKey, cell) {
    var cellKey = getHeaderTextFromCell(cell);

    var rowMap, cellMap;
    if (!additionalRowStorage[rowKey]) {
      rowMap = {};
      additionalRowStorage[rowKey] = rowMap;
    } else {
      rowMap = additionalRowStorage[rowKey];
    }

    if (!rowMap[cellKey]) {
      cellMap = {};
      rowMap[cellKey] = cellMap;
    } else {
      cellMap = rowMap[cellKey];
    }

    return cellMap;
  }
  
function setTableCellHeightRestrictionEvents() {
  var cellsToEdit = [];

  $('.table-cell-height-restriction').toArray().forEach(el => {
    // this means its cut off by height restriction
    if (el.scrollHeight > el.clientHeight) {
      cellsToEdit.push(el);
    }
  });

  cellsToEdit.forEach(element => {
    var floatingContainer = $('<div>');
    floatingContainer.addClass('floating-table-buttons');

    var jumpToTopButton = $('<span style="visibility:hidden;">');
    jumpToTopButton.text(" \u2191 ")
      // the first css gives it its style, the second one is used to differentiate it from the other buttons
      // but since we pass a reference to the click event callback we dont even need to differentiate it
      .addClass('expand-icon-btn-styling')
      .addClass('jump-icon-btn')
      .click(e => {
        e.stopPropagation();
        // using a jquery accessor here instead of walking up the dom because the structure often changes
        var scrollWindow = $('.overflow_div .sorted-table').get(0); // .get() returns the dom element instead of a jquery object like .first()
        element.scrollIntoView({ behavior: "auto", block: "start", inline: "nearest" });
        scrollWindow.scrollTo(0, scrollWindow.scrollTop - 60); // move 60 pixels above to offset header and give some margin

        onResizeWindow();
      });

    var expandCollapsedRowButton = $('<span>');
    expandCollapsedRowButton.text(" \u21F2 ")
      .addClass('expand-icon-btn-styling')
      .addClass('expand-icon-btn')
      .click(e => {
        e.stopPropagation();

        // closest will traverse up and grab the first matching thing
        var row = $(e.target).closest('tr').first();

        // we want to grab all the elements in all the cells of this row
        var allCellsInRow = row.find('.table-cell-height-restriction');
        var allContainersInRow = row.find('.floating-table-buttons');
        var importantRowNames = row.find('.important-sticky-left');
        var importantRowNameTds = [];
        $.each(importantRowNames, function (i, importantRowInnerCell) {
          importantRowNameTds.push(importantRowInnerCell.closest('td'));
        });
        var allExpandButtonsInRow = row.find('.expand-icon-btn');
        var allJumpButtonsInRow = row.find('.jump-icon-btn');

        var closestTable = $(e.target).closest('table');
        var firstHeader = null;
        var firstOverflowDiv = null;
        if (closestTable) {
          firstHeader = closestTable.find('th').first();
          firstOverflowDiv = closestTable.closest('.overflow_div');
        }
        allCellsInRow.toggleClass('expanded');
        allContainersInRow.toggleClass('expanded');

        if (allCellsInRow.hasClass('expanded')) {
          allExpandButtonsInRow.text(" \u21F1 ");
          allJumpButtonsInRow.css("visibility", "visible");
          allContainersInRow.css("top", firstHeader.outerHeight() + 1); // height of header plus 1 pixel for distancing
          importantRowNames.css("top", firstOverflowDiv.outerHeight() / 2); // height of table, divided by 2
          $.each(importantRowNameTds, function (i, td) {
            $(td).attr('valign',"TOP");
          });
        }
        else {
          allExpandButtonsInRow.text(" \u21F2 ");
          allJumpButtonsInRow.css("visibility", "hidden");
          element.scrollIntoView({ behavior: "auto", block: "center", inline: "nearest" });
          allContainersInRow.css("top", 0);
          importantRowNames.css("top", 0);
          $.each(importantRowNameTds, function (i, td) {
            $(td).attr('valign',null);
          });
        }

        onResizeWindow();
      });

    floatingContainer.append(expandCollapsedRowButton);
    floatingContainer.append(jumpToTopButton);
    
    // add our button container to the top of the cell container
    $(element).prepend(floatingContainer);

    $(element).closest('td').addClass('with-expand-icon');
  });
}

  function saveFilteredTableSearchInputs() {
    /* var filter = $('#table-filter-text-input-field');
    var rangeLow = $('#table-filter-range-input-low');
    var rangeHigh = $('#table-filter-range-input-high');
    var matchCriteria = $('#table-filter-text-input-logic');

    sessionStorage.setItem('#table-filter-text-input-field', filter.val());
    sessionStorage.setItem('#table-filter-range-input-low', rangeLow.val());
    sessionStorage.setItem('#table-filter-range-input-high', rangeHigh.val());
    sessionStorage.setItem('#table-filter-text-input-logic', matchCriteria.val()); */

    var filterSelection = $('#table-filter-column-selection');
    var filterColumnText = filterSelection[0].selectedOptions[0].textContent;
    sessionStorage.setItem('#table-filter-column-selection', filterColumnText);
  }

  function loadFilteredTableSearchInputs() {
    /* var filter = sessionStorage.getItem('#table-filter-text-input-field');
    var rangeLow = sessionStorage.getItem('#table-filter-range-input-low');
    var rangeHigh = sessionStorage.getItem('#table-filter-range-input-high');
    var matchCriteria = sessionStorage.getItem('#table-filter-text-input-logic');

    if (filter) {
      $('#table-filter-text-input-field').val(filter);
    }
    if (rangeLow) {
      $('#table-filter-range-input-low').val(rangeLow);
    }
    if (rangeHigh) {
      $('#table-filter-range-input-high').val(rangeHigh);
    }
    if (matchCriteria) {
      $('#table-filter-text-input-logic').val(matchCriteria);
    } */

    var filterSelection = sessionStorage.getItem('#table-filter-column-selection');

    if (filterSelection && $('#table-filter-column-selection').length > 0) {
      for (var option of $('#table-filter-column-selection')[0]) {
        if (filterSelection == option.textContent) {
          $('#table-filter-column-selection').val($(option).val());
          break;
        }
      }
    }
  }

// https://html-online.com/articles/get-url-parameters-javascript/
function getUrlVars() {
  var vars = {};
  var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function (m, key, value) {
    vars[key] = value;
  });
  return vars;
}

// https://html-online.com/articles/get-url-parameters-javascript/
function getUrlParam(parameter, defaultvalue) {
  var urlparameter = defaultvalue;
  if (window.location.href.indexOf(parameter) > -1) {
    urlparameter = getUrlVars()[parameter];
  }
  return urlparameter;
}

function setPrefilledFilter() {
  var vars = getUrlVars();

  if (vars.net_trace_net && vars.net_trace_table) {
    const netTraceNet = decodeURIComponent(vars.net_trace_net);
    const netTraceTable = decodeURIComponent(vars.net_trace_table);
    const netNum = vars.net_num ? vars.net_num : '';
    this.reportName = decodeURIComponent(vars.report_name);

    var title = '';

    if (netNum) {
      title += 'Net #: ' + netNum + " -  ";
    }

    if (netTraceTable.match(/new/i)) {
      title += 'New Net Trace: ' + netTraceNet;
    } else if (netTraceTable.match(/old/i)) {
      title += 'Old Net Trace: ' + netTraceNet;
    } else {
      title += 'Net Trace: ' + netTraceNet;
    }
    document.title = title;

    setBodyKonvaNetTrace(netTraceTable, netTraceNet);
    return;
  }

  if (vars['table_only']) {
    $('.accordion_header').css('display', 'none');
    $('.nl_header_text').css('display', 'none');
    $('.nl_header_button_column').css('display', 'none');
    $('.sheet-change-dropdown').css('display', 'none');
    $('.nl_header_logo').css('display', 'none');
    $('.nl_header_wrapper').css(
      {
        'box-shadow': 'none', // remove box shadow
        'border-top': 'none', // remove border
        'padding': 0, // remove padding
        'height': 0, // remove forced height
      });

    var html = '<button id="button_open_in_ex_win" class="sheet-change-button small-square">&#x1F5D7;</button>';

    $('.nl_header_right_button_row').first().prepend(html);
    $('.nl_header_right_button_row').last().css('display', 'none');

    $('.nl_header_right_button_container').css('margin-top', '10px');

    // set external window button event
    $('#button_open_in_ex_win').click((e) => { window.open(window.location.pathname) });
  
    $('.octopart-button').detach().prependTo($('#button_open_in_ex_win').parent());
  }

  if (vars['custom_title']) {
    var title = vars['custom_title'].replace(/__/g, ' ');
    $('#download-excel-btn').after('<h1 style="display:inline-block; padding: 0 50px; margin: 0;">' + title + '</h1>');
  }

  if (vars['prefilter']) {
    var filterInfo = vars['prefilter'].split(':');
    var column = filterInfo[0];
    var filterVal = decodeURIComponent(filterInfo[1]);
    filterVal = escapeRegex(filterVal);

    if (vars['prefiltertype'] === 'equals') {
      filterVal = '^' + filterVal + '$';
    }

    column = column.replace(/_/g, ' ').toUpperCase();
    var desiredColumnName = '';
    for (var option of $('#table-filter-column-selection')[0]) {
      if (option.textContent.toUpperCase() == column) {
        desiredColumnName = $(option).val();
        break;
      }
    }

    if (desiredColumnName) {
      $('#table-filter-column-selection').val(desiredColumnName);
    }
    $('#table-filter-text-input-field').val(filterVal);
  } else {
    loadFilteredTableSearchInputs();
  }
}
  // handler for clicking anywhere in the page
  $(this).click(function (event) {
    // disable all context menus
    $(".context-menu").css('display', 'none');
  });

  function ctxmenu_init_subgroup_empty(id) {
    var divId = "#" + id;
    var sgId = "#" + id + '-sg';

    var spl = divId.split('-');
    spl.pop();
    var divSectionToClose = spl.join('-');

    $(sgId).hover(
      function (e) { // handler in
        // we only care about the mouseenter event
        if (e.handleObj.origType === 'mouseleave') return;

        // close all other sub groups
        $(divSectionToClose + " .context-menu").css('display', 'none');
      }
    );
  }

  function ctxmenu_init_subgroup_items(id) {
    var divId = "#" + id;
    var sgId = "#" + id + '-sg';

    var spl = divId.split('-');
    spl.pop();
    var divSectionToClose = spl.join('-');

    $(sgId).hover(
      function (e) { // handler in
        // we only care about the mouseenter event
        if (e.handleObj.origType === 'mouseleave') return;

        // close all other sub groups
        $(divSectionToClose + " .context-menu").css('display', 'none');

        var parentWidth = $(divId).width();

        var top = e.target.offsetTop ? e.target.offsetTop : top;
        var left = parentWidth;

        $(divId).css('display', 'none');

        $(divId)
          .toggle()
          .css(
            {
              display: 'block',
              top: top + "px",
              left: left + "px"
            }
          );
      }
    );
  }

function makeTclReadableMarker(allMarkerData) {
  var markerText = '';

  for (var rowInfo of allMarkerData) {

    var topLevel = '';

    for (var rowKey in rowInfo) {
      if (rowKey === 'markerData') continue;
      topLevel += rowKey + ':' + rowInfo[rowKey] + '\n';
    }

    for (var markerEntry of rowInfo.markerData) {

      for (var markerMap of markerEntry) {
        markerText += markerMap.use_case.toUpperCase() + '=';

        if (markerMap[markerMap.use_case] != undefined) {
          markerText += markerMap[markerMap.use_case];
        } else {
          markerText += 'UNKNOWN';
        }
        markerText += '\n';

        markerText += topLevel;

        for (var key in markerMap) {
          markerText += key.toUpperCase() + ':' + markerMap[key] + '\n';
        }

        markerText += '\n';
      }
    }
  }

  return markerText;
}

function generateMarkerText(allMarkerData) {
  var markerFile = [];

  markerFile.push("(marker_file");
  markerFile.push(" (version 1.0)");
  markerFile.push(" (markers");

  var markerCount = 1;
  for (var rowInfo of allMarkerData) {

    var reportColumn = rowInfo.reportColumn;
    reportColumn = reportColumn[0].toUpperCase() + reportColumn.substring(1);

    for (var markerData of rowInfo.markerData) {
      for (var marker of markerData) {

        markerFile.push("  (");

        var longMsg = 'Report= ' + reportName;
        longMsg += '\n                Block= ' + marker.block;
        longMsg += '\n                Report= ' + reportColumn;
        longMsg += '\n                Instance= ' + marker.page_instance;
        longMsg += '\n                PhysicalPath= ' + marker.phys_path;
        longMsg += '\n                LogicalPath= ' + marker.path;

        markerFile.push('    (tool "CheckPlus")');
        markerFile.push('    (class "LOGICAL")');
        markerFile.push("    (severity 30)");
        markerFile.push("    (error_num " + markerCount++ + ")");
        if (marker.use_case === 'refdes') {
          var shortMsg = reportName + ' ' + marker.refdes + ' -> ' + marker.description;

          markerFile.push('    (short_msg "' + shortMsg + '")');
          markerFile.push('    (long_msg "' + longMsg + '")');
          markerFile.push("    (location");
          markerFile.push("     (");
          markerFile.push('      (object_kind "instance")');
          markerFile.push('      (canonical_name "_!drawerror inst ' + marker.page_instance + ';")');
          markerFile.push('      (parent_canonical_name "DRAWERROR inst ' + marker.page_instance + ';")');
        } else if (marker.use_case === 'node') {
          var shortMsg = reportName + ' ' + marker.node_name + ' -> ' + marker.net_name;

          markerFile.push('    (short_msg "' + shortMsg + '")');
          markerFile.push('    (long_msg "' + longMsg + '")');
          markerFile.push("    (location");
          markerFile.push("     (");
          markerFile.push('      (object_kind "instance_port")');
          markerFile.push('      (canonical_name "_!drawerror pin ' + marker.page_instance + "." + marker.pin_name + ';")');
          markerFile.push('      (parent_canonical_name "DRAWERROR pin ' + marker.page_instance + ';")');
        }
        markerFile.push('      (drawing_name "' + marker.path + '")');
        markerFile.push("     )");
        markerFile.push("   )");
        markerFile.push("  )");
      }
    }
  }

  markerFile.push(" )");
  markerFile.push(")");

  return markerFile.join('\n');
}

function makeAllegroPcbList(rows, columnName) {
  if (rows.length <= 0) return;

  const cellId = col_id_from_header_name(columnName);

  var markers = [];

  rows.toArray().forEach(rowEl => {
    const row = $(rowEl);
    const cell = row.find('td').eq(cellId);

    const nodeList = [];
    const refdesList = [];
    cell.find('.marker-data-node')
      .toArray()
      .forEach(cellEl => {
        const cellRef = $(cellEl);
        nodeList.push(cellRef.text().replace(/\n/g, '').trim());
      });
    cell.find('.marker-data-refdes')
      .toArray()
      .forEach(cellEl => {
        const cellRef = $(cellEl);
        refdesList.push(cellRef.text().replace(/\n/g, '').trim());
      });
    markers = markers.concat(nodeList, refdesList);
  });

  return markers.join("\n");
}

function makeMarkerFiles(rows, lookupTable, columnName) {
  if (rows.length <= 0) return;

  const cellId = col_id_from_header_name(columnName);

  var markers = [];

  rows.toArray().forEach(rowEl => {
    const row = $(rowEl);
    const cell = row.find('td').eq(cellId);

    const cellMarkerInfo = [];

    cell.find('.marker-data-node')
      .toArray()
      .forEach(cellEl => {
        const cellRef = $(cellEl);

        const nodeName = cellRef.text().replace(/\n/g, '').trim();

        const nodeInfo = lookupTable.node_info[nodeName];

        if (!nodeInfo || !nodeInfo.marker_data) return;

        const markerData = [];
        for (const markerRef of nodeInfo.marker_data) {
          // create a deep copy so we arent editing the original
          const markerCopy = JSON.parse(JSON.stringify(markerRef));

          markerCopy.use_case = 'node';
          markerCopy.part_number = nodeInfo.part_number;
          markerCopy.description = lookupTable.part_info[nodeInfo.part_number].description;
          markerCopy.node_name = nodeInfo.node_name;
          markerCopy.node = nodeInfo.node_name;
          markerCopy.net_name = nodeInfo.net_name;
          markerCopy.pin_name = nodeInfo.pin_name;

          markerData.push(markerCopy);
        }
        cellMarkerInfo.push(markerData);
      });
    cell.find('.marker-data-refdes')
      .toArray()
      .forEach(cellEl => {
        const cellRef = $(cellEl);

        const refdes = cellRef.text().replace(/\n/g, '').trim();

        const refdesInfo = lookupTable.refdes_info[refdes];

        if (!refdesInfo || !refdesInfo.marker_data) return;

        const markerData = [];

        for (const markerRef of refdesInfo.marker_data) {
          // create a deep copy so we arent editing the original
          const markerCopy = JSON.parse(JSON.stringify(markerRef));

          markerCopy.use_case = 'refdes';
          markerCopy.part_number = refdesInfo.part_number;
          markerCopy.description = lookupTable.part_info[refdesInfo.part_number].description;
          markerCopy.refdes = refdesInfo.refdes;
          markerData.push(markerCopy);
        }
        cellMarkerInfo.push(markerData);
      });
    if (cellMarkerInfo.length > 0) {
      markers.push({ 'reportColumn': columnName, 'reportName': reportName, 'markerData': cellMarkerInfo });
    }
  });

  return markers;
}


function setBodyKonvaNetTrace(tableVariableName, netName) {
  var container = $('<div>');
  container.css('padding', '10px');

  var crossProbeContainer = $('<span>');
  crossProbeContainer.addClass('noprint');

  crossProbeContainer.text('Ctrl+Scroll to zoom in/out | Ctrl+Click and drag to pan | ');

  var netTraceSearchBar = $('<input style="margin: 0 20px" placeholder="Search.."></input>');
  netTraceSearchBar.on('keyup', (e) => {
    const searchText = $(e.target).val();

    var searchGroup = stage.findOne('.search-group');
    var parentLayer = searchGroup.getParent();

    // delete all the old search nodes
    searchGroup.destroy();

    // create a new search group
    searchGroup = new Konva.Group({ name: 'search-group' });
    
    // add the new search group to the search drawing layer
    parentLayer.add(searchGroup);

    if (!searchText) return;

    for (const textObject of stage.findOne('.drawing-group').find('Text')) { // TODO cache this query for optimization
      const textToSearch = textObject.text();
      const match = equalsContainsMatches(textToSearch, searchText);
      if (match) {
        const searchLabel = new Konva.Label({
          name: 'search-label',
          opacity: 1,
          x: textObject.getAbsolutePosition(stage).x - 1,
          y: textObject.getAbsolutePosition(stage).y - 1,
        });

        searchLabel.add(new Konva.Tag({
          fill: 'yellow',
          cornerRadius: 1,
        }));

        searchLabel.add(new Konva.Text({
          text: textToSearch,
          fontSize: textObject.getAttr('fontSize'),
          fontStyle: textObject.getAttr('fontStyle'),
          padding: 1,
        }));

        searchGroup.add(searchLabel);
      }
    }
  });

  crossProbeContainer.append(netTraceSearchBar);

  var ahdlButton = $('<button id="net-trace-ahdl-download-btn" class="sheet-change-button">AHDL CrossProbe</button>');
  var captureButton = $('<button id="net-trace-capture-download-btn" class="sheet-change-button">Capture CrossProbe</button>');
  var pcbButton = $('<button id="net-trace-pcb-download-btn" class="sheet-change-button">PCB CrossProbe</button>');
  
  ahdlButton.click((e) => {
    var markers = netTraceMarker(dataTable, netName);
    var text = generateMarkerText(markers);
    downloadTextToFile(text, reportName + '_AHDL_NetTrace.mkr');
  });

  captureButton.click((e) => {
    var markers = netTraceMarker(dataTable, netName);
    var text = makeTclReadableMarker(markers);
    downloadTextToFile(text, reportName + '_Capture_NetTrace.mkr');
  });

  pcbButton.click((e) => {
    var text = currentTraceNodes.join('\n');
    downloadTextToFile(text, reportName + '_PCB_NetTrace.txt');
  });

  crossProbeContainer.append(ahdlButton);
  crossProbeContainer.append(captureButton);
  crossProbeContainer.append(pcbButton);
  container.append(crossProbeContainer);

  var rightButtonContainer = $('<span>');

  rightButtonContainer.addClass('noprint');
  rightButtonContainer.css('float', 'right');
  var refreshButton = $('<button>');
  refreshButton.text('Reset Trace');

  refreshButton.click((e) => {
    drawSchematicNew(dataTable, netName);
  });

  var pdfFileName = tableVariableName.match(/new/i) ? 'NB_NetTrace_' + netName + '_New' : 'NB_NetTrace_' + netName + '_Old';

  var saveToPdfButton = $('<button>');
  saveToPdfButton.text('Save To PDF');
  saveToPdfButton.click((e) => {
    konvaSaveToPdf(pdfFileName);
  });

  rightButtonContainer.append(refreshButton);
  rightButtonContainer.append(saveToPdfButton);

  container.append(rightButtonContainer);

  var konva = $('<div id="konvaWrapper" class="konva-net-trace-container">');

  konva.append($('<span class="noprint" id="konvaZoomLevelText" style="float: right; padding: 5px;">100%</span>'));

  konva.append('<div id="konvaContainer">');

  container.append(konva);

  $('body').append(container);

  var dataTable = this[tableVariableName];

  drawSchematicNew(dataTable, netName);
}

function showNetTrace(event, rows, graphTable, columnName) {
  const netnameIdx = col_id_from_header_name(columnName);
  const netNumIdx = col_id_from_header_name('net num');

  rows.toArray().forEach(rowEl => {
    const netTraceKeyCell = $(rowEl).find('td')[netnameIdx];
    const netTraceKey = $(netTraceKeyCell).find('.net-trace-key');

    const rowKey = netTraceKey.length ? netTraceKey.text() : netTraceKeyCell.innerText;

    if (this[graphTable].net_tracing[rowKey] == undefined) {
      flashContextMenuRow(event, 'red');
      return;
    }

    // when we give it dimensions we force it to open in a new window
    var windowSettings = 'height=900,width=1600,noopener';
    var uri = '?net_trace_table=' + encodeURIComponent(graphTable) + '&net_trace_net=' + encodeURIComponent(rowKey) + '&report_name=' + encodeURIComponent(reportName) + '&';

    if (netNumIdx >= 0) {
      uri += 'net_num=' + encodeURIComponent($($(rowEl).find('td')[netNumIdx]).text().trim()) + '&';
    }

    window.open(getCurrentDirectory() + '/modal.html' + uri, 'Net Trace ' + rowKey, windowSettings);
  });
}

function flashContextMenuRow(event, color) {
  $(event.currentTarget)
    .css('background-color', color)
    .fadeOut(250)
    .fadeIn(250);
  event.stopPropagation();
}

function showNetTraceFromRail(graphTable, netName) {
  // when we give it dimensions we force it to open in a new window
  var windowSettings = 'height=900,width=1600,noopener';
  var uri = '?net_trace_table=' + encodeURIComponent(graphTable) + '&net_trace_net=' + encodeURIComponent(netName) + '&report_name=' + encodeURIComponent(reportName) + '&';

  window.open(getCurrentDirectory() + '/modal.html' + uri, 'Net Trace ' + netName, windowSettings);
}

function netTraceMarker(table, netName) {
  const markerData = [];

  for (const nodeName of currentTraceNodes) {
    const nodeInfo = table.node_info[nodeName];

    if (!nodeInfo || !nodeInfo.marker_data) return;

    for (const markerRef of nodeInfo.marker_data) {
      // create a deep copy so we arent editing the original
      const markerCopy = JSON.parse(JSON.stringify(markerRef));

      markerCopy.use_case = 'node';
      markerCopy.part_number = nodeInfo.part_number;
      markerCopy.description = table.part_info[nodeInfo.part_number].description;
      markerCopy.node_name = nodeInfo.node_name;
      markerCopy.node = nodeInfo.node_name;
      markerCopy.net_name = nodeInfo.net_name;
      markerCopy.pin_name = nodeInfo.pin_name;

      markerData.push(markerCopy);
    }
  }

  return [{ reportColumn: 'Net Trace', markerData: [markerData] }];
}

  function changeRailFilterColumn() {
    var filterElement = $('#rail-filter-column-selection');
    if (!filterElement.length) return;
    const filterColumn = filterElement.val();
      
    if (filterColumn.match(/rail name/i)) {
      $('#rail-filter-input-container').css('display', '');
      $('#rail-filter-range-container').css('display', 'none');
      filterRails();
    } else {
      $('#rail-filter-input-container').css('display', 'none');
      $('#rail-filter-range-container').css('display', '');
      filterRailRange();
    }
  }

  function saveRailSearchInputs() {
    const min = $('#rail-filter-number-min').val();
    const max = $('#rail-filter-number-max').val();
    const filterColumn = $('#rail-filter-column-selection').val();
    const filterLogic = $('#rail-filter-logic-selection').val();
    const filterText = $('#rail-filter-input').val();

    sessionStorage.setItem('#rail-filter-number-min', min);
    sessionStorage.setItem('#rail-filter-number-max', max);
    sessionStorage.setItem('#rail-filter-column-selection', filterColumn);
    sessionStorage.setItem('#rail-filter-logic-selection', filterLogic);
    sessionStorage.setItem('#rail-filter-input', filterText);
  }

  function filterRailRange() {
    saveRailSearchInputs();
    
    const filterColumn = $('#rail-filter-column-selection').val();
    const min = $('#rail-filter-number-min').val();
    const max = $('#rail-filter-number-max').val();

    const rows = $('#rail-summary-table .nl_diff_btn');

    for (const rowElement of rows.toArray()) {
      const row = $(rowElement);
      var index = 0;

      const headerCells = row.find('.rail-column').toArray();
      const cellValues = row.find('.rail-value').toArray();

      if (headerCells.length != cellValues.length) {
        console.log('Header cells length does not equal cell values length.');
        continue;
      }

      for (const cellElement of headerCells) {
        const cell = $(cellElement);
        if (cell.text() == filterColumn) break;
        index += 1;
      }

      if (index >= headerCells.length) {
        console.log('Power rail search index out of bounds.');
        continue;
      }

      // remove all non-digit characters from filter
      const cellValue = parseFloat($(cellValues[index]).text().replace(/[^\d.]/ig, ''));

      if (cellValue >= min && cellValue <= max) {
        row.parent().css('display', '');
      }
      else {
        row.parent().css('display', 'none');
      }
    }

    const rowCount = $('#rail-summary-table .nl_diff_btn:visible').length;
    $('#rail-filter-search-result-text').text(rowCount);

    onResizeWindow();
  }

  function filterRails() {
    saveRailSearchInputs();
    
    const filterColumn = $('#rail-filter-column-selection').val();
    const filterLogic = $('#rail-filter-logic-selection').val();
    const filterText = $('#rail-filter-input').val();

    const rows = $('#rail-summary-table .nl_diff_btn');

    if (!filterText) {
      rows.toArray().forEach(element => $(element).parent().css('display', ''));
      $('#rail-filter-search-result-text').text(rows.length);
      return;
    }

    for (const rowElement of rows.toArray()) {
      const row = $(rowElement);
      var index = 0;

      const headerCells = row.find('.rail-column').toArray();
      const cellValues = row.find('.rail-value').toArray();

      if (headerCells.length != cellValues.length) {
        console.log('Header cells length does not equal cell values length.');
        continue;
      }

      for (const cellElement of headerCells) {
        const cell = $(cellElement);
        if (cell.text() == filterColumn) break;
        index += 1;
      }

      if (index >= headerCells.length) {
        console.log('Power rail search index out of bounds.');
        continue;
      }

      const cellValue = $(cellValues[index]).text();

      if (filterLogic == 'c') { // contains
        if (equalsContainsMatches(cellValue, filterText)) {
          row.parent().css('display', '');
        }
        else {
          row.parent().css('display', 'none');
        }
      } else { // not contains
        if (equalsContainsMatches(cellValue, filterText)) {
          row.parent().css('display', 'none');
        }
        else {
          row.parent().css('display', '');
        }
      }
    }

    const rowCount = $('#rail-summary-table .nl_diff_btn:visible').length;
    $('#rail-filter-search-result-text').text(rowCount);

    onResizeWindow();
  }

  function clickRailReport(element, event, url) {
    location.href = url;
  }

  function getHighlightedRailName() {
    var highlighted_rail = $('#highlighted_rail_name');
    if (highlighted_rail.length != 0)
    {
      return highlighted_rail.text().trim();
    }
    return getActiveRailName(); // if we don't have a highlighted rail, we want to use the regular active rail name
  }

function getActiveRailName(cssEscape = false) {
  var activeRow = $('#rail-summary-table .nl_diff_btn.active');
  if (activeRow.length <= 0) return null;

  if (!getActiveRailName.netName) {
    getActiveRailName.netName = activeRow.find('.rail-name')
      .first().text().trim()
      .replace(/\-/ig, 'NEG')
      .replace(/\+/ig, 'POS');
  }

  return cssEscape ? CSS.escape(getActiveRailName.netName) : getActiveRailName.netName;
}

function edit_pin_net_volt_cell(rowEl) {
  const netVoltColId = col_id_from_header_name('net volt');
  const pinVoltColId = col_id_from_header_name('pin / bank volt');

  if (netVoltColId < 0 || pinVoltColId < 0) return; // report doesnt have the required columns

  const row = $(rowEl);
  const cells = row.children();

  const netVoltCol = cells.eq(netVoltColId);
  const pinVoltCol = cells.eq(pinVoltColId);

  if (!netVoltCol.text().match(/\d/i)) return;

  if (pinVoltCol.text().match(/any/i)) {
    netVoltCol.addClass('close-match');
    return;
  }
  else {
    netVoltCol.removeClass('close-match');
  }

  if (!pinVoltCol.text().match(/\d/i)) return;

  const netVoltText = Number(netVoltCol.text().replace(/[^0-9.]/igm, ''));
  const range = pinVoltCol.text().match(/([\d.]+)/igm);

  var pinVoltText;
  if (!range || range.length > 2) {
    return; // something is wrong or there is no value we can match against
  }
  else if (range.length == 2) {
    const lowerRange = Number(range[0]);
    const upperRange = Number(range[1]);

    if (netVoltText >= lowerRange && netVoltText <= upperRange) {
      netVoltCol.removeClass('red-cell');
      pinVoltCol.removeClass('red-cell');

      netVoltCol.addClass('green-cell');
      pinVoltCol.addClass('green-cell');
    }
    else {
      netVoltCol.removeClass('green-cell');
      pinVoltCol.removeClass('green-cell');

      netVoltCol.addClass('red-cell');
      pinVoltCol.addClass('red-cell');
    }
    return;
  }
  else {
    pinVoltText = Number(range[0]);
  }

  if (netVoltText == pinVoltText) {
    netVoltCol.removeClass('red-cell');
    pinVoltCol.removeClass('red-cell');

    netVoltCol.addClass('green-cell');
    pinVoltCol.addClass('green-cell');
  }
  else {
    netVoltCol.removeClass('green-cell');
    pinVoltCol.removeClass('green-cell');

    netVoltCol.addClass('red-cell');
    pinVoltCol.addClass('red-cell');
  }
}

function restyle_from_derating(initial = false) {
  delayedExecutionOrCancel('restyle_from_derating', () => {

    var deratingColId = col_id_from_header_name('voltage derating %');
    var voltageColId = col_id_from_header_name('cap voltage');
    var calculatedVoltageColId = col_id_from_header_name('calculated voltage derating');

    if (deratingColId < 0 || voltageColId < 0 || calculatedVoltageColId < 0) return; // report doesnt have the required columns

    var netName = getActiveRailName(); // this is used in the power rail report

    if (netName) { // if we are in the power rail report, this will have a value..
      var railVoltage = $('#' + getActiveRailName(true) + '_net_volt').text().replace(/[^0-9.]/ig, ''); // remove all non-digits

      $('.overflow_div .sorted-table tbody tr').toArray().forEach(rowEl => {
        const cells = $(rowEl).children();

        var deratingCol = cells.eq(deratingColId);
        var voltageCol = cells.eq(voltageColId);
        var calculatedVoltageCol = cells.eq(calculatedVoltageColId);

        var deratingMultiplier = Number(deratingCol.text().replace(/[^0-9.]/ig, ''));

        var voltageVal = Number(voltageCol.text().replace(/[^0-9.]/ig, ''));

        if (!voltageVal) {
          calculatedVoltageCol.text('N/A');
          deratingCol.addClass('red-cell');
          voltageCol.addClass('red-cell');
          calculatedVoltageCol.addClass('red-cell');
          return;
        }

        var calculatedVoltageDeratingVal = Number((1 - (railVoltage / voltageVal)) * 100).toFixed(2);
        calculatedVoltageCol.text(calculatedVoltageDeratingVal + '%');

        if (calculatedVoltageDeratingVal < 0 || deratingMultiplier > calculatedVoltageDeratingVal) {
          deratingCol.addClass('red-cell');
          voltageCol.addClass('red-cell');
          calculatedVoltageCol.addClass('red-cell');
        } else {
          deratingCol.removeClass('red-cell');
          voltageCol.removeClass('red-cell');
          calculatedVoltageCol.removeClass('red-cell');
        }
      });
    }
    else { // else we are not in the power rail report, so we need to get voltage from each row
      var netVoltColId = col_id_from_header_name('net volt');

      $('.overflow_div .sorted-table tbody tr').toArray().forEach(rowEl => {
        const cells = $(rowEl).children();

        var railVoltage = Number(cells.eq(netVoltColId).text().replace(/[^0-9.]/ig, ''));

        var deratingCol = cells.eq(deratingColId);
        var voltageCol = cells.eq(voltageColId);
        var calculatedVoltageCol = cells.eq(calculatedVoltageColId);

        var deratingMultiplier = Number(deratingCol.text().replace(/[^0-9.]/ig, ''));

        var voltageVal = Number(voltageCol.text().replace(/[^0-9.]/ig, ''));

        if (!voltageVal) {
          calculatedVoltageCol.text('N/A');
          deratingCol.addClass('red-cell');
          voltageCol.addClass('red-cell');
          calculatedVoltageCol.addClass('red-cell');
          return;
        }

        var calculatedVoltageDeratingVal = Number((1 - (railVoltage / voltageVal)) * 100).toFixed(2);
        calculatedVoltageCol.text(calculatedVoltageDeratingVal + '%');

        if (calculatedVoltageDeratingVal < 0 || deratingMultiplier > calculatedVoltageDeratingVal) {
          deratingCol.addClass('red-cell');
          voltageCol.addClass('red-cell');
          calculatedVoltageCol.addClass('red-cell');
        } else {
          deratingCol.removeClass('red-cell');
          voltageCol.removeClass('red-cell');
          calculatedVoltageCol.removeClass('red-cell');
        }
      });
    }

    if (initial) {
      $('.overflow_div .sorted-table tbody tr').toArray().forEach(row => { cap_derating_change(row) });
    }

  }, initial ? 0 : 500);
}

  function cap_derating_change(row) {    
    var rowCells = $(row).children();

    // get quantity, value, and derating
    var quantity = $(rowCells[col_id_from_header_name('quantity')]).text().trim();
    var value = $(rowCells[col_id_from_header_name('value')]).text().trim();
    var derating = $(rowCells[col_id_from_header_name('value derating %')]).text().trim();

    // remove unit of measurement from value
    value = value.replace(/[^0-9.]/ig, '');

    // calculate new total capacitance
    value = +(derating / 100.0 * quantity * parseFloat(value)).toFixed(2);

    var totalCapCell = $(rowCells[col_id_from_header_name('total capacitance')]);

    var capUnit = totalCapCell.text().replace(/[^A-z]/ig, '');

    totalCapCell.text(value + '' + capUnit);
  }

  function recalculateSummaryCapacitance() {
    if (getActiveRailName() == null) return;
    
    const totalCapCells = $('.overflow_div .sorted-table tbody tr td:nth-child(' + (col_id_from_header_name('total capacitance') + 1) + ')')
    .toArray();

    var summaryCapField = $('#' + getActiveRailName(true) + '_total_cap');
    var capSumPico = 0.0;

    totalCapCells.forEach(cell => {
        var c = $(cell);
        var text = c.text().trim().toLowerCase();
        var unit = text.replace(/[^MUNPF]/ig, '');
        var value = parseFloat(text.replace(/[MUNPF]/ig, ''));

        switch (unit) {
          case 'f':
            value *= 1000000000000;
            break;
          case 'mf':
            value *= 1000000000;
            break;
          case 'nf':
            value *= 1000;
            break;
          case 'pf':
            break;
          case 'uf':
          default:
            value *= 1000000;
            break;
        }

        capSumPico += value;
      });

    summaryCapField.text(+(capSumPico / 1000000).toFixed(2));

    additionalRowStorage['ELEMENT_IDS']['#' + getActiveRailName(true) + '_total_cap'] = {
      'text': summaryCapField.text(),
    };
    cacheWebPage();
  }

  function initRailSummaryStuff() {
    const btns = $('.nl_summary_table_inner_scroll .rail-value .editable');
    btns.on('click', (e) => {
      e.stopPropagation();
    });
    
    restyle_from_derating(true);

    const deratingValCol = col_id_from_header_name('voltage derating %');
    const capDeratingCol = col_id_from_header_name('value derating %');

    if (deratingValCol >= 0) {
      $('.overflow_div .sorted-table tbody tr td:nth-child(' + (deratingValCol + 1) + ')')
        .keydown((e) => {
          var key = e.key;
          if (key === 'Space' || (key.length == 1 && key.match(/[^0-9.]/i))) {
            e.preventDefault();
          }
          else if (key == 'ArrowUp') {
            setFocusCellAbove(e.target);
            e.preventDefault();
          }
          else if (key === 'Enter' || key == 'ArrowDown') {
            setFocusCellBelow(e.target);
            e.preventDefault();
          }
        })
        .keyup((event) => {
          restyle_from_derating();
        });
    }

    if (capDeratingCol >= 0) {
      $('.overflow_div .sorted-table tbody tr td:nth-child(' + (capDeratingCol + 1) + ')')
        .keydown((e) => {
          var key = e.key;
          if (key === 'Space' || (key.length == 1 && key.match(/[^0-9.]/i))) {
            e.preventDefault();
          }
          else if (key == 'ArrowUp') {
            setFocusCellAbove(e.target);
            e.preventDefault();
          }
          else if (key === 'Enter' || key == 'ArrowDown') {
            setFocusCellBelow(e.target);
            e.preventDefault();
          }
        })
        .keyup((event) => {
          cap_derating_change(event.target.parentElement);
          recalculateSummaryCapacitance(); // has to be after the cap_derating_change call
        });
    }
    
    if (getActiveRailName() == null) return;

    $('#' + getActiveRailName(true) + '_net_volt')
      .click((e => {
        e.stopPropagation();
      }))
      .keydown((e) =>{
        var key = e.key;

        if (key.length == 1 && key.match(/[^0-9.v]/i)) {
          e.preventDefault();
        }
        else if (key === 'Enter') {
          // remove focus
          document.activeElement.blur();
          e.preventDefault();
        }
        else if (key === 'Space') {
          e.preventDefault();
        }
      })
      .keyup((e) => {
        restyle_from_derating();
        $(e.target).addClass('edited');
        additionalRowStorage['ELEMENT_IDS']['#' + getActiveRailName(true) + '_net_volt'] = {
          'text': $(e.target).text(),
          'css-class': 'edited'
        };
        cacheWebPage();
      });

    recalculateSummaryCapacitance(); // has to be after the cap_derating_change call
  }

  function setPowerRailSessionStorage() {
    if ($('.nl_summary_table_inner_scroll').length <= 0) return;

    var pos = sessionStorage.getItem('railScrollPos');

    $('.nl_summary_table_inner_scroll')
      .scrollTop(pos)
      .scroll((e) => {
        sessionStorage.setItem('railScrollPos', $(e.target).scrollTop());
      });

    var hideRails = $('#rail-filter-hide-checked').prop('checked');

    // saved as a string.. if value is undefined we dont want to do anything
    if (sessionStorage.getItem('#rail-filter-hide-checked') == 'true') {
      $('#rail-filter-hide-checked').prop('checked', true);
      hideRails = true;
    }
    else if (sessionStorage.getItem('#rail-filter-hide-checked') == 'false') {
      $('#rail-filter-hide-checked').prop('checked', false);
      hideRails = false;
    }

    for (var railElement of $('.rail-row-container').toArray()) {
      var id = railElement.id;
      var checked = sessionStorage.getItem('#' + id);
      if (checked) {
        $(railElement).find('.hide-rail-row-checkbox').prop('checked', true);
        if (hideRails) {
          $(railElement).addClass('hide');
        }
      }
    }

    const min = sessionStorage.getItem('#rail-filter-number-min');
    const max = sessionStorage.getItem('#rail-filter-number-max');
    const filterColumn = sessionStorage.getItem('#rail-filter-column-selection');
    const filterLogic = sessionStorage.getItem('#rail-filter-logic-selection');
    const filterText = sessionStorage.getItem('#rail-filter-input');

    if (min) {
      $('#rail-filter-number-min').val(min);
    }
    if (max) {
      $('#rail-filter-number-max').val(max);
    }
    if (filterColumn) {
      $('#rail-filter-column-selection').val(filterColumn);
    }
    if (filterLogic) {
      $('#rail-filter-logic-selection').val(filterLogic);
    }
    if (filterText) {
      $('#rail-filter-input').val(filterText);
    }

    changeRailFilterColumn();
  }

  setPowerRailSessionStorage();

  function toggleHiddenRails(element, event) {
    const rails = $('.rail-row-container .hide-rail-row-checkbox').toArray();
    for (const railElement of rails) {
      const rail = $(railElement);

      if (element.checked && rail.prop('checked')) {
        rail.parent().addClass('hide');
      }
      else {
        rail.parent().removeClass('hide');
      }
    }

    sessionStorage.setItem('#rail-filter-hide-checked', element.checked);
  }

  function toggleHideRail(element, event) {
    if (element.checked && $('#rail-filter-hide-checked').prop('checked')) {
      $(element).parent().toggleClass('hide');
      onResizeWindow();
    }

    if (element.checked) {
      sessionStorage.setItem('#' + $(element).parent().attr('id'), element.checked);
    }
    else {
      sessionStorage.removeItem('#' + $(element).parent().attr('id'));
    }
  }
  
function setHighlightOnClickEvents() {
  $('.highlight-on-click').toArray().forEach(n => {
    var node = $(n);

    // we have to listen to the mousedown event because text highlighting comes after this one
    node.on('mousedown', (e) => {
      // we only want left-click to change the node color
      // we dont want to select the node if the shift or ctrl key is pressed
      if (e.button != 0 || e.shiftKey || e.ctrlKey) return true;

      if (node.hasClass('red-node')) {
        setNodeColor(node);
      }
      else if (node.hasClass('green-node')) {
        setNodeColor(node, 'red-node');
      }
      else {
        setNodeColor(node, 'green-node');
      }

      if (e.originalEvent.detail > 1) {
        e.preventDefault();
        e.stopPropagation();
      }
    }).click((e) => { // we have to listen to the click event so that when we highlight a node it doesnt select the whole row
      // we only want to stop propagation if we changed the node color
      if (e.button != 0 || e.shiftKey || e.ctrlKey) return true;

      e.preventDefault();
      e.stopPropagation();
    });
  });
}

  function setNodeColor(nodeElement, color) {
    var node = $(nodeElement);

    node.removeClass() // remove all classes
      .addClass('highlight-on-click'); // add base class back

    var cell = node.closest('td');
    var row = cell.closest('tr');
    var key = getRowKey(row);
    var cellMap = getRowCellMap(key, cell);

    if (color) {
      node.addClass('highlighted');
      node.addClass(color);

      if (!cellMap['highlighted']) {
        cellMap['highlighted'] = {};
      }

      cellMap['highlighted'][node.text()] = color;
    }
    else {
      delete cellMap['highlighted'][node.text()];
    }

    cacheWebPage();
  }
    $('.sheet-change-dropdown').hover(
    (event) => { // mouse enter
      $($(event.currentTarget).children()[0]).addClass('sheet-change-dropdown-content-show');
    },
    (event) => { // mouse leave
      $($(event.currentTarget).children()[0]).removeClass('sheet-change-dropdown-content-show');
    });
  function onResizeWindow() {
    var headerHeight = $('.header_measure_div').height();
    $('.overflow_div').height(window.outerHeight - headerHeight - 160);

    if (window.parent) {
      window.parent.postMessage({
        'iframe_height': $('html').height(),
        'location': window.location.href,
      }, '*');
    }
  }

  $(document).ready(function () {
    onResizeWindow();
    $(window).resize(function () {
      onResizeWindow();
      resizeNetTraceContainer();
    });
  });

  $(window).on('message', (e) => {
    var data = e.originalEvent.data;

    if (data['print_page']) {
      window.print();
    }

    if (data['try_reload']) {
      reloadIfChanged();
    }
  });

  function reloadIfChanged() {
    // cache has been cleared
    if (localStorage.getItem(sessionKey) == null) {
      window.location.reload(); // just force reload and get it over with -- no fancy dynamic reloading of edited fields
    }
    // another window has made an edit
    else if (JSON.stringify(additionalRowStorage) !== localStorage.getItem(sessionKey)) {
      loadFromCache();
      loadAdditionalRowStorage({}); // workaround -- send empty object so it reloads the fields
    }
  }

  // when window receives focus it will determine if the window is in sync with local storage
  // and if not it will resync
  $(window).focus((e) => {
    reloadIfChanged();
  });

const NET_TRACE_DRAW_DIR_DOWN = 1;
const NET_TRACE_DRAW_DIR_UP = -1;
const NET_TRACE_PART_HEIGHT = 60;

var stage;
var stagePosOffset = { x: 0, y: 0 };
var stageScale = 0.0;

var konvaWidth;
var konvaHeight;

var currentTraceNodes = [];
var expandedNodes = {};

var netHoverColorChangeMap = {};

// resizes the container so drawing doesnt go out of bounds
function resizeNetTraceContainer() {
  if (!stage) return;

  konvaWidth = $('#konvaWrapper').width();
  konvaHeight = $('#konvaWrapper').height();

  stage.width(konvaWidth);
  stage.height(konvaHeight);
}

function redrawTooltip(group, text) {
  var mousePos = stage.getRelativePointerPosition();
  group.position({
    x: mousePos.x + 20,
    y: mousePos.y + 20,
  });

  var textObj = group.findOne('Text');

  text = text.replace(/\\/ig, '');

  textObj.text(text);

  var rect = group.findOne('Rect');
  rect.width(textObj.width());
  rect.height(textObj.height());

  group.show();
}

function hideTooltip(group) {
  group.hide();
}

function highlightNode(node) {
  node.stroke('white');
  node.strokeWidth(2);
  node.radius(6);
}

function removeNodeHighlight(node) {
  // return default values
  node.stroke('');
  node.radius(4);
}

function highlightPart(part) {
  var refdesLabel = part.getParent().findOne('.refdes-label');
  refdesLabel.textDecoration('underline');
  refdesLabel.fontSize(13);
}

function removePartHighlight(part) {
  var refdesLabel = part.getParent().findOne('.refdes-label');
  refdesLabel.textDecoration('');
  refdesLabel.fontSize(12);
}

function haveIntersection(r1, r2) {
  return !(
    r2.x > r1.x + r1.width ||
    r2.x + r2.width < r1.x ||
    r2.y > r1.y + r1.height ||
    r2.y + r2.height < r1.y
  );
}

function konvaSaveToPdf(fileName) {
  window.jsPDF = window.jspdf.jsPDF;

  const preDimensions = {
    scaleX: stage.scaleX(),
    scaleY: stage.scaleY(),
    x: stage.x(),
    y: stage.y(),
  }

  const drawingGroup = stage.findOne('.drawing-group');

  const layerSize = drawingGroup.getClientRect({ relativeTo: stage });

  // calculate sizes
  const stageSize = stage.getSize();
  const scaleX = stageSize.width / layerSize.width;
  const scaleY = stageSize.height / layerSize.height;
  const scaleValue = Math.max(Math.min(scaleX, scaleY) * 0.9, 0.25);

  stage.scale({ x: scaleValue, y: scaleValue });
  stage.position({ x: 0, y: 0 });

  // higher pixel ratio means we can zoom in more in the pdf, but it also takes longer to create
  var pixelRatio = 0.5 + (1.0 / stage.scale().x);

  pixelRatio = Math.min(5.0, pixelRatio);
  pixelRatio = Math.max(1.0, pixelRatio);

  const rect = drawingGroup.getClientRect();

  const stageheight = stage.height();
  const stagewidth = stage.width();
  const pageWidth = Math.min(stagewidth, Number(rect.width + rect.x + 50));
  const pageHeight = Math.min(stageheight, Number(rect.height + rect.y + 50));

  const pdf = new jsPDF(
    {
      orientation: pageWidth > pageHeight ? 'l' : 'p',
      unit: 'pt',
      format: [
        pageWidth,
        pageHeight,
      ],
      compress: true,
    });

  pdf.setTextColor('#ffffff'); // so we can have invisible text for pdf to ctrl+f search

  const allText = drawingGroup.find('Text');

  var pageNumber = 0;
  for (var x = 0; x < rect.width; x += pageWidth) {
    for (var y = 0; y < rect.height; y += pageHeight) {

      // the new jsPDF() call creates the first page and then we want to add a page for every extra after
      if (pageNumber++ > 0) pdf.addPage();

      var remainingText = [];
      allText.forEach(text => {
        const pos = text.getAbsolutePosition();

        // reset text position for each page
        var textX = pos.x - x;
        var textY = pos.y - y;

        if (textX < 0 || textX > pageWidth) return;
        if (textY < 0 || textY > pageHeight) return;

        const size = text.fontSize() / (1 / stage.scale().x); // convert pixels to points

        pdf.setFontSize(size);
        pdf.setFont(undefined, text.fontStyle());
        pdf.text(
          text.text(),
          textX,
          textY,
          {
            baseline: 'top',
            angle: -text.getAbsoluteRotation(),
          });
      });

      pdf.addImage(stage.toDataURL(
        {
          pixelRatio: pixelRatio,
          width: pageWidth,
          height: pageHeight,
          x: x,
          y: y,
        }), '', 0, 0, pageWidth, pageHeight);
    }
  }

  pdf.save(fileName + '.pdf');

  stage.scaleX(preDimensions.scaleX);
  stage.scaleY(preDimensions.scaleY);
  stage.x(preDimensions.x);
  stage.y(preDimensions.y);
}

function setKonvaMouseChangeOnHover(item, cursor) {
  item.on('mouseenter', () => stage.container().style.cursor = cursor);
  item.on('mouseleave', () => stage.container().style.cursor = 'default');
}

var previousTrace;
var previousMirrorTrace;
var nodesInMirrorTrace;

function drawSchematicNew(netListTable, key, traceOverride = null, mirrorOverride = null) {
  var netTrace, mirrorTrace;

  if (!traceOverride && !mirrorOverride) {
    var netInfo = netListTable.net_info[key];

    // check if this is a diff pair operation
    if (netInfo.diff_pair_pol) {

      // if the trace we are doing is a positive diff pair, we render it as requested
      // if it is a negative diff pair, we mirror the negative and put the positive pair on top
      if (netInfo.diff_pair_pol.match(/pos/i)) {
        netTrace = { [netInfo.net_name]: netListTable.net_tracing[netInfo.net_name] };
        mirrorTrace = { [netInfo.diff_pair_mate]: netListTable.net_tracing[netInfo.diff_pair_mate] };
      }
      else {
        netTrace = { [netInfo.diff_pair_mate]: netListTable.net_tracing[netInfo.diff_pair_mate] };
        mirrorTrace = { [netInfo.net_name]: netListTable.net_tracing[netInfo.net_name] };
      }
    } else {
      // normal operation
      netTrace = { [netInfo.net_name]: netListTable.net_tracing[netInfo.net_name] };
    }
  }
  else {
    netTrace = traceOverride ? traceOverride : previousTrace;
    mirrorTrace = mirrorOverride ? mirrorOverride : previousMirrorTrace;
  }

  previousTrace = netTrace;
  previousMirrorTrace = mirrorTrace;

  if (!netTrace) return;
  if (!expandedNodes) expandedNodes = {};

  if (stage) stage.destroy();

  const scaleBy = 1.05;

  konvaWidth = $('#konvaWrapper').width();
  konvaHeight = $('#konvaWrapper').height();

  // first we need to create a stage
  stage = new Konva.Stage({
    container: 'konvaContainer',
    width: konvaWidth,
    height: konvaHeight,
    draggable: true,
  });

  stage.container().style.cursor = 'default';

  stage.on('dragmove', (e) => {
    stagePosOffset = stage.position();
  });

  // we can add custom context menu in here later
  stage.on('contextmenu', (e) => {
    e.evt.preventDefault();
  });

  stage.on('dragstart', (e) => {
    // if the drag target is the stage, we want to cancel it UNLESS the ctrl key is pressed
    if (e.target.getType() === 'Stage') {
      if (!e.evt.ctrlKey) {
        e.target.stopDrag();
      }
    }
    else {
      // if the user is trying to ctrl+drag something other than the stage,
      // then we want to drag the stage instead of the part or whatever
      if (e.evt.ctrlKey) {
        stage.startDrag(e);
      }
    }
  });

  stage.on('wheel', (e) => {
    // stop default scrolling
    e.evt.preventDefault();

    // how to scale? Zoom in? Or zoom out?
    let direction = e.evt.deltaY < 0 ? 1 : -1;

    // ctrl+scroll
    if (!e.evt.ctrlKey) {
      var newPos = {
        x: stage.x(),
        y: stage.y() + (NET_TRACE_PART_HEIGHT * direction),
      };
      stage.position(newPos);
      stagePosOffset = newPos;
      return;
    }
    var oldScale = stage.scaleX();
    var pointer = stage.getPointerPosition();

    var mousePointTo = {
      x: (pointer.x - stage.x()) / oldScale,
      y: (pointer.y - stage.y()) / oldScale,
    };

    var newScale = direction > 0 ? oldScale * scaleBy : oldScale / scaleBy;

    newScale = Math.ceil(newScale * 100) / 100.0;

    stage.scale({ x: newScale, y: newScale });
    $('#konvaZoomLevelText').text('Zoom: ' + Math.ceil(newScale * 100) + '%');

    var newPos = {
      x: pointer.x - mousePointTo.x * newScale,
      y: pointer.y - mousePointTo.y * newScale,
    };

    stage.position(newPos);

    stagePosOffset = newPos;
    stageScale = newScale;
  });

  // create layers
  const drawingLayer = new Konva.Layer();
  const searchLayer = new Konva.Layer();
  const tooltipLayer = new Konva.Layer();

  // create initial groups to go in layers
  const watermarkGroup = new Konva.Group({
    name: 'watermark-group',
  });
  const drawingGroup = new Konva.Group({
    name: 'drawing-group',
  });
  const searchGroup = new Konva.Group({
    name: 'search-group'
  });
  const tooltipGroup = new Konva.Group({
    visible: false,
  });

  const toolTip = new Konva.Text({
    text: '',
    fontFamily: 'Calibri',
    fontSize: 14,
    padding: 5,
    alpha: 0.75,
    name: 'tooltip-text',
  });

  tooltipGroup.add(new Konva.Rect({
    fill: 'white',
    stroke: 'black',
    strokeWidth: 2,
    height: 25,
    width: 100,
    cornerRadius: [0, 6,6,6],
  }));

  tooltipGroup.add(toolTip);
  drawingLayer.add(watermarkGroup);
  drawingLayer.add(drawingGroup);
  searchLayer.add(searchGroup);
  tooltipLayer.add(tooltipGroup);

  // add the layers to the stage -- order is important
  stage.add(drawingLayer);
  stage.add(searchLayer); // search layer on top of drawing layer
  stage.add(tooltipLayer); // tooltip on top of drawing and search layer

  // draw the image
  drawingLayer.draw();

  if (nodesInMirrorTrace) {
    removeExistingNodes(netTrace, { nodesAdded: nodesInMirrorTrace });
  }

  var longestNames = [];
  preTraceNet(longestNames, netTrace, { index: 0 });

  if (mirrorTrace) {
    preTraceNet(longestNames, mirrorTrace, { index: 0 });
  }

  // round up all the lengths
  for (var i = 0; i < longestNames.length; i++) {
    longestNames[i] = Math.ceil(longestNames[i]);
    longestNames[i] = Math.max(longestNames[i], 50);
  }

  var position = {
    x: 50,
    y: 75, // adjusted for logo image in top-right corner
    index: 0,
    nameLengths: longestNames,
    traceHead: JSON.parse(JSON.stringify(netTrace)), // deep clone net trace so we can edit it if we want without disturbing the original
    nodesAdded: {},
      nodesToSkip: {},
    // this is an array of arrays. it holds the order of the net names that are drawn so we can visually connect one net to the net above regardless of distance
    netNamesDrawnAbove: [],
    // this function is used to modify the sorting order of the refdes/nodes when we draw them (we dont use this currently but might be useful in future)
    postSorting: (items) => { return items },
    drawDirection: NET_TRACE_DRAW_DIR_DOWN,
  };

  drawTraceRecursively(netListTable, drawingGroup, position.traceHead, position);

  currentTraceNodes = Object.keys(position.nodesAdded);
	
  var diffPairPos;
  var maxY = position.y;
  var maxX = 50;
  for (var nameLength of longestNames) {
    maxX += nameLength;
  }

  if (mirrorTrace) {

    // lazy implementation: we build a dummy trace first to see what the final Y value will be so
    // we know how far down we need to shift the diff pair trace since its drawn bottom-up

    const diffPairPosDummy = {
      x: 0,
      y: 0,
      index: 0,
      nameLengths: longestNames,
      traceHead: JSON.parse(JSON.stringify(mirrorTrace)),
      nodesAdded: {},
      nodesToSkip: {},
      netNamesDrawnAbove: [],
      postSorting: (items) => { return items },
      drawDirection: NET_TRACE_DRAW_DIR_DOWN,
    };

    removeExistingNodes(diffPairPosDummy.traceHead, position);

    const dummyGroup = new Konva.Group();
    drawTraceRecursively(netListTable, dummyGroup, diffPairPosDummy.traceHead, diffPairPosDummy);
    dummyGroup.destroy();

    for (var i = 0; i < diffPairPosDummy.netNamesDrawnAbove.length; i++) {
      for (var posInfo of diffPairPosDummy.netNamesDrawnAbove[i].reverse()) {
        posInfo.x += 50;
        posInfo.y += position.y + diffPairPosDummy.y;
        position.netNamesDrawnAbove[i].push(posInfo);
      }
    }

    diffPairPos = {
      x: 50,
      y: position.y + diffPairPosDummy.y,
      index: 0,
      nameLengths: longestNames,
      traceHead: JSON.parse(JSON.stringify(mirrorTrace)), // deep clone net trace so we can edit it if we want without disturbing the original
      nodesAdded: {},
      nodesToSkip: {},
      // this is an array of arrays. it holds the order of the net names that are drawn so we can visually connect one net to the net above regardless of distance
      netNamesDrawnAbove: position.netNamesDrawnAbove,
      // this is like the above, but since we are drawing bottom-up we need another stack to check against so we can look both to nets above and nets below
      netNamesDrawnBelow: [],
      // this function is used to modify the sorting order of the refdes/nodes when we draw them (we dont use this currently but might be useful in future)
      postSorting: (items) => { return items },
      drawDirection: NET_TRACE_DRAW_DIR_UP,
    };

    removeExistingNodes(diffPairPos.traceHead, position);

    drawTraceRecursively(netListTable, drawingGroup, diffPairPos.traceHead, diffPairPos);
    nodesInMirrorTrace = diffPairPos.nodesAdded;
    currentTraceNodes = currentTraceNodes.concat(Object.keys(nodesInMirrorTrace));

    if (diffPairPos.y > maxY) maxY = diffPairPos.y;
  }

  // sort by page number
  currentTraceNodes.sort((a, b) => {
    var markerData1 = netListTable.node_info[a].marker_data;
    var markerData2 = netListTable.node_info[b].marker_data;

    if (markerData1.length && markerData2.length) {
      if (markerData1[0].page != markerData2[0].page) {
        return sortAlphaNum(markerData1[0].page, markerData2[0].page);
      }
    }

    return sortAlphaNum(a, b);
  });

  // these properties we hard code the order and the rest are sorted alphabetically
  const ignoreTooltipProps = {
    part_number: 1,
    part_name: 1,
    description: 1,
    voltage: 1,
    marker_data: 1,
    net_name: 1,
    node_name: 1,
    pin_name: 1,
    pin_number: 1,
    pin_name_unsanitized: 1,
    refdes: 1,
    node_list: 1,
  };

  stage.find('.part-tooltip-hitbox').forEach(part => {
    part.moveToTop(); // move hitbox above the rest of the stuff in the group
    var partId = part.getParent().id();
    if (partId) { // all should have
      const refdesInfo = netListTable.refdes_info[partId];
      var ttpText = [];

      if (refdesInfo.marker_data.length > 0) {
        ttpText.push('Block: ' + refdesInfo.marker_data[0].ppath_without_last_instance);
        ttpText.push('Page: ' + refdesInfo.marker_data[0].phys_page);
        if (refdesInfo.marker_data[0].remapped_page) {
          ttpText.push('Remapped Page: ' + refdesInfo.marker_data[0].remapped_page);
        }
        ttpText.push('Symbol: ' + refdesInfo.marker_data[0].sym_num);
        ttpText.push('');
      }

      ttpText.push('Part Number: ' + refdesInfo.part_number);
      ttpText.push('Part Name: ' + refdesInfo.part_name);
      if (refdesInfo.voltage) {
        ttpText.push('Part Voltage: ' + refdesInfo.voltage);
      }
      if (refdesInfo.value) {
        ttpText.push('Part Value: ' + refdesInfo.value);
      }
      
      ttpText.push('');

      for (const key in refdesInfo) {
        if (ignoreTooltipProps[key]) continue;

        if (refdesInfo[key]) {

          var name = key.replace(/_/ig, ' ')
            .replace(/[a-z]/ig, function (letter) {
              return letter.toUpperCase();
            });

          ttpText.push(name + ': ' + refdesInfo[key]);
        }
      }

      if (refdesInfo.description) {
        ttpText.push('');
        ttpText.push(refdesInfo.description);
      }

      part.on('mousemove', (e) => {
        redrawTooltip(tooltipGroup, ttpText.join('\n'));
        highlightPart(part);
      });
      part.on('mouseout', (e) => {
        hideTooltip(tooltipGroup);
        removePartHighlight(part);
      });
    }
  });

  // this moves the nodes to the top of their group, but the net lines are not in the group
  // so the nodes will still appear behind the net lines if the net lines were rendered after
  stage.find('.node').forEach(node => {
    node.moveToTop();
    if (node.id()) {
      var nodeInfo = netListTable.node_info[node.id()];
      var ttpText = [];

      if (nodeInfo.marker_data.length > 0) {
        ttpText.push('Block: ' + nodeInfo.marker_data[0].ppath_without_last_instance);
        ttpText.push('Page: ' + nodeInfo.marker_data[0].phys_page);
        if (nodeInfo.marker_data[0].remapped_page) {
          ttpText.push('Remapped Page: ' + nodeInfo.marker_data[0].remapped_page);
        }
        ttpText.push('Instance: ' + nodeInfo.marker_data[0].page_instance);
        ttpText.push('Symbol: ' + nodeInfo.marker_data[0].sym_num);
        ttpText.push('');
      }
      
      ttpText.push('Pin Name: ' + nodeInfo.pin_name);
      ttpText.push('Pin Number: ' + nodeInfo.pin_number);
      ttpText.push('Net Name: ' + nodeInfo.net_name);
      
      ttpText.push('');

      for (const key in nodeInfo) {
        if (ignoreTooltipProps[key]) continue;

        if (nodeInfo[key]) {

          var name = key.replace(/_/ig, ' ')
            .replace(/\b[a-z]/ig, function (letter) {
              return letter.toUpperCase();
            });

          ttpText.push(name + ': ' + nodeInfo[key]);
        }
      }

      node.on('mousemove', (e) => {
        redrawTooltip(tooltipGroup, ttpText.join('\n'));
        highlightNode(node);
      });
      node.on('mouseout', (e) => {
        hideTooltip(tooltipGroup);
        removeNodeHighlight(node);
      });
    }
  });

  stage.find('.netstop').forEach(node => {
    node.moveToTop();

    if (!node.netName) return;

    // deep copy to not disturb original trace
    const netTraceCheck = JSON.parse(JSON.stringify(netListTable.net_tracing[node.netName]));

    if (Object.keys(netTraceCheck).length) {
      const previousNode = Object.keys(node.previousObject);

      // delete duplicate reference
      delete netTraceCheck[previousNode];

      // need to put the net name first
      removeExistingNodes({ netName: netTraceCheck }, position);
      if (diffPairPos) {
        removeExistingNodes({ netName: netTraceCheck }, diffPairPos);
      }
    }

    if (Object.keys(netTraceCheck).length == 0) {
      node.fill('white');
      node.off('dblclick');
      setKonvaMouseChangeOnHover(node, 'default');
    }
  });

  stage.find('.net-name-text').forEach(net => {
    net.getParent()
      .on('mousemove', (e) => {
        // the netHoverColorChangeMap map has lines and text shapes
        netHoverColorChangeMap[net.text()].forEach(shapeToChange => {
          if (shapeToChange.getAttr('name') == 'node') {
            shapeToChange.setAttr('stroke', 'orangered');
            shapeToChange.setAttr('strokeWidth', 1);
          }
          else if (shapeToChange.getAttr('text')) { // using getAttr because text() function is only valid on text nodes
            shapeToChange.setAttr('fontStyle', 'bold');
            shapeToChange.setAttr('fill', 'orangered');
          }
          else {
            shapeToChange.setAttr('stroke', 'orangered');
            shapeToChange.setAttr('fill', 'orangered');
          }
        });
      })
      .on('mouseout', (e) => {
        netHoverColorChangeMap[net.text()].forEach(shapeToChange => {
          if (shapeToChange.getAttr('name') == 'node') {
            shapeToChange.setAttr('stroke', 'black');
            shapeToChange.setAttr('strokeWidth', 0);
          }
          else if (shapeToChange.getAttr('text')) {
            shapeToChange.setAttr('fontStyle', 'normal');
            shapeToChange.setAttr('fill', 'black');
          }
          else {
            shapeToChange.setAttr('stroke', 'black');
            shapeToChange.setAttr('fill', 'black');
          }
        });
      });
  });

  stage.find('.horizontal-net').forEach(net => {
    net.moveToBottom();
  });

  stage.find('.vertical-net').forEach(net => {
    net.moveToBottom();
  });

  stage.find('.part').forEach(part => {
    part.moveToTop();
  });

  if (stagePosOffset) {
    stage.position(stagePosOffset);
  }

  if (stageScale) {
    stage.scale({ x: stageScale, y: stageScale });
  }

  maxY = (drawingGroup.getClientRect().height / stage.scale().x) + 500;
  maxX = (drawingGroup.getClientRect().width / stage.scale().y) + 500;

  for (var iY = -500; iY < maxY; iY += 250) {
    for (var iX = -500; iX < maxX; iX += 250) {
      watermarkGroup.add(new Konva.Text({
        opacity: 0.15,
        text: '(c) 2022 CadEnhance',
        x: iX,
        y: iY,
        fill: '#39A3AC',
        rotation: -45,
        fontSize: 11,
      }));
    }
  }

  drawingGroup.add(new Konva.Text({
    text: document.title,
    fontFamily: 'Calibri',
    fontSize: 22,
    x: stage.width() / 3,
    y: 20,
    fontStyle: 'bold',
    fill: '#39A3AC'
  }));

  const logoImage = new Konva.Image({
    x: 10,
    y: 10,
    scaleX: 0.1,
    scaleY: 0.1,
  });

  logoImage.on('click', () => {
    window.open('http://www.cadenhance.com/', '_blank');
  });

  setKonvaMouseChangeOnHover(logoImage, 'pointer');

  drawingGroup.add(logoImage);

  var imgobj = new Image();
  imgobj.onload = function () {
    logoImage.image(imgobj);
    drawingGroup.draw();
  };
  imgobj.src = logo;
}

function getRefdesInfoFromNode(table, node) {
  var nodeInfo = table.node_info[node];

  if (!nodeInfo) return '';

  return table.refdes_info[nodeInfo.refdes];
}

function getPartInfoFromNode(table, node) {
  var refdesInfo = getRefdesInfoFromNode(table, node);

  if (!refdesInfo || !refdesInfo.part_number) return {};

  return table.part_info[refdesInfo.part_number];
}

function preTraceNet(longestNames, netRef, position) {
  for (const netName in netRef) {
    const nodes = netRef[netName];

    var originalIndex = position.index++;

    var netTextDraw = new Konva.Text({
      text: netName,
      fontSize: 12,
    });

    if (longestNames[originalIndex]) {
      longestNames[originalIndex] = Math.max(longestNames[originalIndex], netTextDraw.width());
    }
    else {
      longestNames[originalIndex] = netTextDraw.width();
    }

    // nodeNameFrom is the left node
    for (const nodeNameFrom in nodes) {
      const nodeNameTo = Object.keys(nodes[nodeNameFrom])[0];

      // handling many-pin parts that get traced through (2+ pins)
      for (const nodeName of Object.keys(nodes[nodeNameFrom])) {
        const netRef2 = nodes[nodeNameFrom][nodeName];

        preTraceNet(longestNames, netRef2, position);
      }

      if (!nodeNameTo) continue;

      const nextNet = nodes[nodeNameFrom][nodeNameTo];

      preTraceNet(longestNames, nextNet, position);
    }
    position.index = originalIndex;
  }
}

// when we glue two net traces together we want to remove the nodes in the second trace
// that already exist in the first trace so that the rendering stays the same
function removeExistingNodes(trace, position) {
  for (const netName in trace) {
    const nodes = trace[netName];
    for (const nodeNameFrom in nodes) {

      var existingNode1 = position.nodesAdded[nodeNameFrom];

      if (existingNode1) {
        delete trace[netName][nodeNameFrom];
        continue;
      }

      const nodeNameTo = Object.keys(nodes[nodeNameFrom])[0];
      if (!nodeNameTo) continue;

      var existingNode2 = position.nodesAdded[nodeNameFrom];

      if (existingNode2) {
        delete trace[netName][nodeNameTo];
        continue;
      }

      for (const nodeName of Object.keys(nodes[nodeNameFrom])) {

        if (position.nodesAdded[nodeName]) {
          delete trace[netName][nodeNameFrom][nodeName]
          continue;
        }
        
        const netRef2 = nodes[nodeNameFrom][nodeName];

        removeExistingNodes(netRef2, position);
      }

      const nextNet = nodes[nodeNameFrom][nodeNameTo];

      if (!nextNet) continue;

      removeExistingNodes(nextNet, position);
    }
  }
}

function getNextTreeNode(node) {
  var keys = Object.keys(node);
  return keys.length ? node[keys[0]] : undefined;
}

function getTreeNodeName(node) {
  var keys = Object.keys(node);
  return keys.length ? keys[0] : undefined;
}

function sortAlphaNum(a, b) {
  if (!sortAlphaNum.collator) {
    sortAlphaNum.collator = new Intl.Collator('en', { numeric: true, sensitivity: 'accent' });
  }
  return sortAlphaNum.collator.compare(a, b);
}

function sortNodes(allNodes, powerNodes, normalNodes, groundNodes, singlePinNodes, position) {
  powerNodes = powerNodes.sort(
    (leftNodeNameA, leftNodeNameB) => {
      const nodeCountPartA = Object.keys(allNodes[leftNodeNameA]).length;
      const nodeCountPartB = Object.keys(allNodes[leftNodeNameB]).length;

      // if the node count is not the same, we want to sort by ascending node count
      if (nodeCountPartA != nodeCountPartB) {
        return nodeCountPartA > nodeCountPartB ? 1 : -1;
      }

      const netRefA = getNextTreeNode(allNodes[leftNodeNameA]);
      const netRefB = getNextTreeNode(allNodes[leftNodeNameB]);

      const netA = getTreeNodeName(netRefA);
      const netB = getTreeNodeName(netRefB);

      // sort by netname
      var alphanumNetName = sortAlphaNum(netA, netB);

      // if net names are the same, sort by node name
      if (alphanumNetName == 0) {
        alphanumNetName = sortAlphaNum(leftNodeNameA, leftNodeNameB);
      }

      return alphanumNetName;
    });

  normalNodes = normalNodes.sort(
    (leftNodeNameA, leftNodeNameB) => {
      const netRefA = getNextTreeNode(allNodes[leftNodeNameA]);
      const netRefB = getNextTreeNode(allNodes[leftNodeNameB]);

      const netA = getTreeNodeName(netRefA);
      const netB = getTreeNodeName(netRefB);

      // sort by netname
      var alphanumNetName = sortAlphaNum(netA, netB);

      // if net names are the same, sort by node name
      if (alphanumNetName == 0) {

        const netNodesA = netRefA[netA] ? Object.keys(netRefA[netA]).length : 0;
        const netNodesB = netRefB[netB] ? Object.keys(netRefB[netB]).length : 0;

        // if net names are the same but they both dont dead end, we want the dead end below the not dead end
        if (netNodesA != netNodesB) {
          return netNodesA < netNodesB ? 1 : -1;
        }

        // sort by node name
        alphanumNetName = sortAlphaNum(leftNodeNameA, leftNodeNameB);
      }

      return alphanumNetName;
    });

  groundNodes = groundNodes.sort(
    (leftNodeNameA, leftNodeNameB) => {
      const netRefA = getNextTreeNode(allNodes[leftNodeNameA]);
      const netRefB = getNextTreeNode(allNodes[leftNodeNameB]);

      const netA = getTreeNodeName(netRefA);
      const netB = getTreeNodeName(netRefB);

      // sort by netname
      var alphanumNetName = sortAlphaNum(netA, netB);

      // if net names are the same, sort by node name
      if (alphanumNetName == 0) {
        alphanumNetName = sortAlphaNum(leftNodeNameA, leftNodeNameB);
      }

      return alphanumNetName;
    });

  singlePinNodes = singlePinNodes.sort(sortAlphaNum);

  if (position.drawDirection == NET_TRACE_DRAW_DIR_DOWN) {
    return powerNodes.concat(normalNodes, groundNodes, singlePinNodes);
  }
  else {
    return groundNodes.concat(normalNodes, powerNodes, singlePinNodes);
  }
}

// this can probably be combined with the sortNets function in the future
function sortPins(table, nodes, position) {
  var powerNodes = [];
  var normalNodes = [];
  var groundNodes = [];
  var singlePinNodes = [];

  for (const rightNodeName of Object.keys(nodes)) {
    const netRef = nodes[rightNodeName];

    var netName = getTreeNodeName(netRef);

    const netVoltage = table.net_info[netName].voltage;

    if (netVoltage == '0V') {
      groundNodes.push(rightNodeName);
    } else if (netVoltage) {
      powerNodes.push(rightNodeName);
    } else {
      normalNodes.push(rightNodeName);
    }
  }

  return sortNodes(nodes, powerNodes, normalNodes, groundNodes, singlePinNodes, position);
}

function sortNets(table, nodes, position) {
  var powerNodes = [];
  var normalNodes = [];
  var groundNodes = [];
  var singlePinNodes = [];

  for (const leftNodeName of Object.keys(nodes)) {

    // in the case of a multi-pin part we need to sort the right-hand nodes before we grab the top one
    if (Object.keys(nodes[leftNodeName]).length > 1) {
      var sortedRightNodes = sortPins(table, nodes[leftNodeName], position); // sort the nodes
      var newOrderedMap = {}; // create a new map
      for (var rightNode of sortedRightNodes) { // use the old map to create the newly ordered map
        newOrderedMap[rightNode] = nodes[leftNodeName][rightNode];
      }
      nodes[leftNodeName] = newOrderedMap; // replace the old map
    }

    const rightNodeName = getTreeNodeName(nodes[leftNodeName]);
    const netRef = getNextTreeNode(nodes[leftNodeName]);

    if (!rightNodeName || !netRef) {
      singlePinNodes.push(leftNodeName);
      continue;
    }

    const netName = getTreeNodeName(netRef);

    // this is the graphical trace ending because the right node has already been added elsewhere
    // but we want to render it anyway so it doesnt become a net stop
    if (!netName) {
      normalNodes.push(leftNodeName);
      continue;
    }

    const netVoltage = table.net_info[netName].voltage;

    if (netVoltage == '0V') {
      groundNodes.push(leftNodeName);
    } else if (netVoltage) {
      powerNodes.push(leftNodeName);
    } else {
      normalNodes.push(leftNodeName);
    }
  }

  return sortNodes(nodes, powerNodes, normalNodes, groundNodes, singlePinNodes, position);
}

// we call this function at the start of every net
function drawTraceRecursively(table, group, netRef, position, previousObject = null) {

  var originZeroX = position.x;
  var originZeroY = position.y;

  for (const netName in netRef) { // there is only one 
    const nodes = netRef[netName];
    const netLineGroup = drawNetLine(table, group, netName, position);

    var originalIndex = position.index++;
    var originalX = position.x;
    var originalY = position.y;

    // end position for vertical net line
    var endPos = { x: position.x, y: position.y };

    // were essentially sorting parts here
    var sortedNodes = sortNets(table, nodes, position);
    sortedNodes = position.postSorting(sortedNodes);

    // we want to increment y after looping through the nodes unless we end at a single-pin part
    // because we already incremented after the single-pin part
    var incrementYAfter = true;

    // nodeNameFrom is the left node
    for (const nodeNameFrom of sortedNodes) {
      // if the nodeNameFrom isnt in the nodes list, then it has been removed at some point by us
      // and we want to remove it. one case where we remove nodes is for combining left-side pins in the drawManyPinPart function
      if (!nodes[nodeNameFrom]) continue;
      // if the nodeNameFrom is in the nodesToSkip list it means we've already added it to the drawing
      // but we are anticipating that it will appear again and we dont want to add it.
      // this is different from nodesAdded because that map keeps track of all the nodes added, which is more than
      // just the nodes we want to make sure we don't double add
      if (position.nodesToSkip[nodeNameFrom]) continue;

      const nodeNameTo = Object.keys(nodes[nodeNameFrom])[0];
      endPos.y = position.y;
      
      position.nodesAdded[nodeNameFrom] = 1;

      if (nodeNameTo) {
        position.nodesAdded[nodeNameTo] = 1;
      }

      var skipNext = drawPart(table, group, nodeNameFrom, nodeNameTo, position, nodes);

      if (!nodeNameTo || skipNext) {
        position.x = originalX;
        position.y += (NET_TRACE_PART_HEIGHT * position.drawDirection); // height of part
        incrementYAfter = false;
        continue;
      }

      const nextNet = nodes[nodeNameFrom][nodeNameTo];
      drawTraceRecursively(table, group, nextNet, position, nodes[nodeNameFrom]);
      position.x = originalX;

      endPos.x = position.x;
      incrementYAfter = false;
    }

    // end net
    if (sortedNodes.length <= 0) {
      const netPositionStack = position.netNamesDrawnAbove[position.index - 1];
      const aboveIdx = position.drawDirection > 0 ? netPositionStack.length - 1 : position.netNamesDrawnBelow[position.index - 1].length - 1;
      const netInfoAbove = netPositionStack[aboveIdx];

      if (!netInfoAbove || !netInfoAbove.connected) {
        var netLineColor = drawNetTail(table, netLineGroup, netName, position, netRef, previousObject);
      }
    }

    if (Object.keys(nodes).length > 0) {
      drawVerticalNetLine(group, netName,
        { x: originalX, y: originalY },
        endPos
      );
    }

    if (incrementYAfter) {
      // height of a part
      position.y += (NET_TRACE_PART_HEIGHT * position.drawDirection);
    }

    position.x = originZeroX;
    position.index = originalIndex;
  }
}

function drawNetTail(table, group, netName, position, netRef, previousObject) {
  var netVoltage = table.net_info[netName].voltage;

  if (!netVoltage) { // not power or ground
    group.add(new Konva.Line({
      stroke: 'black',
      strokeWidth: 2,
      points: [position.x, position.y, position.x + 14, position.y],
    }));
    position.x += 14;

    if (previousObject) {
      const netStop = drawNetStop(table, group, position);
      netStop.netName = netName;
      netStop.previousObject = previousObject;

      setKonvaMouseChangeOnHover(netStop, 'pointer');

      netStop.on('dblclick', (e) => {
        // deep copy to not disturb original trace
        var newNetTrace = JSON.parse(JSON.stringify(table.net_tracing[netName]));

        if (Object.keys(newNetTrace)) {
          const previousNode = Object.keys(previousObject)[0];

          // delete duplicate reference so we arent rendering the same trace in both directions
          delete newNetTrace[previousNode];

          // save nodes to expanded nodes so we know if we should contract it when the node is double clicked
          const netTraceNodes = Object.keys(newNetTrace);
          for (const expandedNode of netTraceNodes) {
            expandedNodes[expandedNode] = netTraceNodes;
          }

          // need to put the net name first
          removeExistingNodes({ netName: newNetTrace }, position);

          // assign new trace to the tail end of the old trace
          netRef[netName] = newNetTrace;

          var traceHead = position.traceHead;

          // redraw schematic using the new trace
          if (position.drawDirection == NET_TRACE_DRAW_DIR_UP) {
            drawSchematicNew(table, '', null, traceHead);
          }
          else {
            drawSchematicNew(table, '', traceHead, null);
          }
        }
      });
    }
    else {
      group.add(new Konva.Line({
        points: [position.x, position.y - 10, position.x, position.y + 10],
        stroke: 'black',
        strokeWidth: 2,
      }));
    }
  } else if (netVoltage == '0V') { // ground
    group.add(new Konva.Line({
      stroke: 'green',
      strokeWidth: 2,
      points: [position.x, position.y, position.x + 15, position.y],
    }));
    position.x += 15;

    group.add(new Konva.Line({
      stroke: 'green',
      strokeWidth: 2,
      points: [position.x, position.y, position.x, position.y + 10],
    }));

    group.add(new Konva.Line({
      stroke: 'green',
      strokeWidth: 2,
      points: [position.x - 6, position.y + 10, position.x + 6, position.y + 10],
    }));

    group.add(new Konva.Line({
      stroke: 'green',
      strokeWidth: 2,
      points: [position.x - 4, position.y + 14, position.x + 4, position.y + 14],
    }));

    group.add(new Konva.Line({
      stroke: 'green',
      strokeWidth: 2,
      points: [position.x - 2, position.y + 18, position.x + 2, position.y + 18],
    }));

    return 'green';
  } else if (netVoltage) { // power
    group.add(new Konva.Line({
      stroke: 'red',
      strokeWidth: 2,
      points: [position.x, position.y, position.x + 15, position.y],
    }));
    position.x += 15;

    group.add(new Konva.Line({
      stroke: 'red',
      strokeWidth: 2,
      points: [position.x, position.y, position.x, position.y - 10],
    }));

    const radius = 8;

    // invisible hitbox
    const powerExpandHitbox = new Konva.Circle({
      radius: 12,
      x: position.x,
      y: position.y - 6, // y - half radius
    });

    setKonvaMouseChangeOnHover(powerExpandHitbox, 'pointer');

    powerExpandHitbox.on('dblclick', (e) => {
      // deep copy to not disturb original trace
      var newNetTrace = JSON.parse(JSON.stringify(table.net_tracing[netName]));

      if (Object.keys(newNetTrace)) {
        const previousNode = Object.keys(previousObject)[0];

        // delete duplicate reference so we arent rendering the same trace in both directions
        delete newNetTrace[previousNode];

        // save nodes to expanded nodes so we know if we should contract it when the node is double clicked
        const netTraceNodes = Object.keys(newNetTrace);
        for (const expandedNode of netTraceNodes) {
          expandedNodes[expandedNode] = netTraceNodes;
        }

        // need to put the net name first
        removeExistingNodes({ netName: newNetTrace }, position);

        // assign new trace to the tail end of the old trace
        netRef[netName] = newNetTrace;

        var traceHead = position.traceHead;

        // redraw schematic using the new trace
        if (position.drawDirection == NET_TRACE_DRAW_DIR_UP) {
          drawSchematicNew(table, '', null, traceHead);
        }
        else {
          drawSchematicNew(table, '', traceHead, null);
        }
      }
    });
    group.add(powerExpandHitbox);

    const triangle = new Konva.RegularPolygon({
      sides: 3,
      radius: radius,
      stroke: 'red',
      strokeWidth: 2,
      x: position.x,
      y: position.y - (radius / 2) - 10,
    });

    group.add(triangle);

    var voltageTextNode = new Konva.Text({
      text: netVoltage,
      fontSize: 12,
    });

    voltageTextNode.y(position.y + (voltageTextNode.height() / 2));
    voltageTextNode.x(position.x - (voltageTextNode.width() / 2));

    group.add(voltageTextNode);

    return 'red';
  }
}

function drawVerticalNetLine(group, netName, positionStart, positionEnd) {
  const netLineRef = new Konva.Line({
    points: [positionStart.x, positionStart.y, positionEnd.x, positionEnd.y],
    stroke: 'black',
    strokeWidth: 2,
    hitStrokeWidth: 8,
    name: 'vertical-net',
  });

  if (!netHoverColorChangeMap[netName]) {
    netHoverColorChangeMap[netName] = [];
  }

  netHoverColorChangeMap[netName].push(netLineRef);

  group.add(netLineRef);

  console.log("|  Y1:" + positionStart.y + " Y2:" + positionEnd.y + " Drawing net: " + netName);
}

function drawNetLine(table, group, netName, position) {
  const netNamePadding = 8;
  const netLineLength = position.nameLengths[position.index] + (netNamePadding * 2);

  const netLineGroup = new Konva.Group();

  const netLineText = new Konva.Text({
    text: netName,
    x: position.x + netNamePadding,
    y: position.y - 14,
    fontSize: 12,
    name: 'net-name-text',
  });

  const netLineRef = new Konva.Line({
    points: [position.x, position.y, position.x + netLineLength, position.y],
    stroke: 'black',
    strokeWidth: 2,
    hitStrokeWidth: 8,
    name: 'horizontal-net',
  });

  if (!netHoverColorChangeMap[netName]) {
    netHoverColorChangeMap[netName] = [];
  }

  netHoverColorChangeMap[netName].push(netLineText);
  netHoverColorChangeMap[netName].push(netLineRef);

  netLineGroup.add(netLineText);
  netLineGroup.add(netLineRef);

  group.add(netLineGroup);

  position.x += netLineLength;

  if (position.drawDirection == NET_TRACE_DRAW_DIR_DOWN) {
    if (!position.netNamesDrawnAbove[position.index]) {
      position.netNamesDrawnAbove[position.index] = [];
    }
  } else {
    if (!position.netNamesDrawnBelow[position.index]) {
      position.netNamesDrawnBelow[position.index] = [];
    }
    const netsBelowStack = position.netNamesDrawnBelow[position.index];

    netsBelowStack.push({
      netName: netName,
    });
  }

  // if we are drawing upwards (negative diff pair) then we need to walk up the netPositionStack
  const netPositionStackIndex = position.index; // this is the index of which net name position stack we are on
  const netPositionStack = position.netNamesDrawnAbove[netPositionStackIndex];

  const aboveIdx = position.drawDirection > 0 ? netPositionStack.length - 1 : position.netNamesDrawnBelow[position.index].length - 1;
  const netInfoAbove = netPositionStack[aboveIdx];

  var connected = false;

  // we dont want to connect power/ground nets
  if (netInfoAbove && netInfoAbove.netName == netName && !table.net_info[netName].voltage) {
    connected = true;
    netInfoAbove.connected = true; // maybe we just put the lower one connected... idk yet
    drawVerticalNetLine(group, netName, netInfoAbove, position);
  }

  if (position.drawDirection == NET_TRACE_DRAW_DIR_DOWN) {
    netPositionStack.push({
      netName: netName,
      x: position.x,
      y: position.y,
      connected: connected,
    });
  }

  console.log("-- X:" + position.x + " Y:" + position.y + " Drawing net: " + netName);

  return netLineGroup;
}

function drawPart(table, group, node1, node2, position, nodeListRef) {
  const partGroup = new Konva.Group({
    name: 'part', // TODO maybe differentiate between different part types
  });

  group.add(partGroup);

  const partInfo = getPartInfoFromNode(table, node1);
  const refdesInfo = getRefdesInfoFromNode(table, node1);
  const partType = partInfo.part_type || getRefdesInfoFromNode(table, node1).part_type;
  const isCap = partInfo.is_cap || getRefdesInfoFromNode(table, node1).is_cap;
  const isRevCap = partInfo.is_polar_cap || getRefdesInfoFromNode(table, node1).is_polar_cap;

  var leftPins = [];

  // create an array of all the pins on the left side of the part other than the one provided (node1)
  // if there are any in this array, we draw a many-pin and add them to the left side of the part
  for (const nodeListNode of refdesInfo.node_list) {
    if (nodeListRef[nodeListNode]) {
      leftPins.push(nodeListNode);
      position.nodesToSkip[nodeListNode] = 1;
      position.nodesAdded[nodeListNode] = 1;
    }
  }

  // sort the pins on the left side by their pin name and then pin number
  leftPins = leftPins.sort((a, b) => { 
    var leftNodeName = table.node_info[a].pin_name;
    var rightNodeName = table.node_info[b].pin_name;

    if (leftNodeName != rightNodeName) {
      return sortAlphaNum(leftNodeName, rightNodeName);
    }
    
    var leftNodeNumber = table.node_info[a].pin_number;
    var rightNodeNumber = table.node_info[b].pin_number;

    return sortAlphaNum(leftNodeNumber, rightNodeNumber);
  });

  // the first node we draw in this function and any remaning nodes (meaning its a many-pin part) get drawn in the many-pin part function
  node1 = leftPins.shift();

  const nodeInfo1 = table.node_info[node1];
  const leftNode = new Konva.Circle({
    radius: 4,
    fill: expandedNodes[node1] ? 'red' : 'black',
    x: position.x,
    y: position.y,
    name: 'node',
    id: node1,
    hitStrokeWidth: 8,
  });

  if (!netHoverColorChangeMap[nodeInfo1.net_name]) {
    netHoverColorChangeMap[nodeInfo1.net_name] = [];
  }

  netHoverColorChangeMap[nodeInfo1.net_name].push(leftNode);

  partGroup.add(leftNode);

  if (expandedNodes[node1]) {
    setKonvaMouseChangeOnHover(leftNode, 'pointer');

    leftNode.on('dblclick', (e) => {
      const netTraceNodes = Object.keys(nodeListRef);

      // all the net traces nodes will exist in the expanded nodes so we just check for the first one
      if (expandedNodes[netTraceNodes[0]]) {
        for (const expandedNodeKey of Object.keys(nodeListRef)) {
          delete expandedNodes[expandedNodeKey];
        }

        for (const key in nodeListRef) {
          delete nodeListRef[key];
        }

        var traceHead = position.traceHead;

        // redraw schematic using the new trace
        if (position.drawDirection == NET_TRACE_DRAW_DIR_UP) {
          drawSchematicNew(table, '', null, traceHead);
        }
        else {
          drawSchematicNew(table, '', traceHead, null);
        }
      }
    });
  }

  const netLineLength = 40;

  partGroup.add(new Konva.Line({
    stroke: 'blue',
    strokeWidth: 2,
    points: [position.x, position.y, position.x + netLineLength, position.y],
  }));

  if (nodeInfo1.pin_type) {
    drawPinDirection(group, position, nodeInfo1.pin_type, true);
  }

  partGroup.id(nodeInfo1.refdes);

  const pinNumberLabel1 = new Konva.Text({
    text: nodeInfo1.pin_number,
    fontSize: 12,
  });

  pinNumberLabel1.x(position.x + netLineLength - pinNumberLabel1.width() - 4);
  pinNumberLabel1.y(position.y - pinNumberLabel1.height() - 1);
  partGroup.add(pinNumberLabel1);

  const pinNameLabel1 = new Konva.Label({
    name: 'pin-name-label',
    opacity: 0.90,
  });
  
  pinNameLabel1.add(new Konva.Tag({
    fill: '#fabf8f',
    cornerRadius: 3,
  }));

  pinNameLabel1.add(new Konva.Text({
    text: nodeInfo1.pin_name,
    fontSize: 10,
    fontStyle: 'bold',
    padding: 1,
  }));

  if (nodeInfo1.pin_number != nodeInfo1.pin_name) {
    pinNameLabel1.x(position.x + netLineLength - pinNameLabel1.width() - 4);
    pinNameLabel1.y(position.y + (pinNameLabel1.height() / 2));
    partGroup.add(pinNameLabel1);
  }

  // adjust for line
  position.x += netLineLength;

  // we want to draw the endline for non-components even if there is only one node in the trace
  var drawEndLine = true;
  var drawValue = true;
  var singlePinComponent = false;
  var manyPinComponent = false;
  const xStart = position.x;
  const yStart = position.y;
  var valueDrawY = position.y;

  // this first check determines if the trace goes through more than one of the components pins. essentially handling tracing through a many-pin component
  if (leftPins.length > 0 || (nodeListRef[node1] && Object.keys(nodeListRef[node1]).length > 1)) { // maybe we put this in a function later
    valueDrawY = drawManyPinPart(table, group, partGroup, node1, position, nodeListRef, leftPins);

    manyPinComponent = true;
    singlePinComponent = true; // this will raise the refdes label a little bit
    drawValue = !singlePinComponent;
  }
  else if (!partType || refdesInfo.node_list.length > 2) {
    drawComponentNew(table, partGroup, node1, node2, position);
    singlePinComponent = !node2 || refdesInfo.node_list.length > 2;
    drawEndLine = false;
    drawValue = !singlePinComponent;
  }
  else if (partType === 'resistor') {
    drawResistorNew(table, partGroup, node1, node2, position);
  }
  else if (isCap) { // TODO add reverse polarity cap drawing in here too
    drawCapacitorNew(table, partGroup, node1, node2, position);
  }
  else if (partType === 'inductor') {
    drawInductorNew(table, partGroup, node1, node2, position);
  }
  else if (partType === 'diode' || partType === 'led') {
    drawDiodeNew(table, partGroup, node1, node2, position);
  }
  else if (partType === 'fuse') {
    drawFuseNew(table, partGroup, node1, node2, position);
  }
  else {
    drawComponentNew(table, partGroup, node1, node2, position);
    drawEndLine = false;
    drawValue = false;
  }

  const xEnd = position.x;
  const xDiff = xEnd - xStart;

  // invisible tooltip hitbox
  partGroup.add(new Konva.Rect({
    x: xStart - 20,
    y: yStart - (20 * position.drawDirection),
    width: (position.x - xStart) * 2,
    height: position.y - yStart + (40 * position.drawDirection),
    name: 'part-tooltip-hitbox',
    // fill: 'black'
  }));

  const refdesLabel = new Konva.Text({
    text: refdesInfo.refdes,
    fontSize: 12,
    fontStyle: 'bold',
    name: 'refdes-label',
  });

  refdesLabel.x(xStart + (xDiff / 2) - (refdesLabel.width() / 2));
  if (position.drawDirection == NET_TRACE_DRAW_DIR_UP) {
    refdesLabel.y(position.y - (singlePinComponent ? 14 : 12) - refdesLabel.height());
  }
  else {
    refdesLabel.y(yStart - (singlePinComponent ? 14 : 12) - refdesLabel.height());
  }

  if (refdesInfo.load) {
    var color;
    switch (refdesInfo.load.toLowerCase()) {
      case 'prod':
        color = 'DarkOrange';
        break;
      case 'proto':
        color = 'aqua';
        break;
      case 'never':
        color = 'red';
        break;
      case 'always':
        color = 'LightGreen';
        break;
      default:
        //all other values should be yellow/gold 
        color ='Gold'
        break;
    }
    if (color) {
      partGroup.add(new Konva.Rect({
        x: refdesLabel.x() - 3,
        y: refdesLabel.y() - 1,
        height: refdesLabel.height() + 2,
        width: refdesLabel.width() + 6,
        fill: color,
        cornerRadius: 3,
        opacity: 0.45,
      }));
    }
  }

  partGroup.add(refdesLabel);

  var valueLabel;
  if (drawValue && refdesInfo.value) {
    valueLabel = new Konva.Text({
      text: refdesInfo.value,
      fontSize: 12,
    });

    valueLabel.x(xStart + (xDiff / 2) - (valueLabel.width() / 2));
    valueLabel.y(valueDrawY + 6 + (valueLabel.height() / 2));

    partGroup.add(valueLabel);
  }

  if (manyPinComponent) return true;

  // on non-basic components we dont want to draw the line if it doesnt have a second node
  if (node2 || drawEndLine) {
    const nodeInfo2 = table.node_info[node2];

    if (nodeInfo2) {

      if (nodeInfo2.pin_type) {
        drawPinDirection(group, position, nodeInfo1.pin_type, false);
      }

      const pinNumberLabel2 = new Konva.Text({
        text: nodeInfo2.pin_number,
        fontSize: 12,
      });

      pinNumberLabel2.x(position.x + 4);
      pinNumberLabel2.y(position.y - pinNumberLabel2.height() - 1);
      partGroup.add(pinNumberLabel2);

      const pinNameLabel2 = new Konva.Label({
        name: 'pin-name-label',
        opacity: 0.90,
      });
      
      pinNameLabel2.add(new Konva.Tag({
        fill: '#fabf8f',
        cornerRadius: 3,
      }));
    
      pinNameLabel2.add(new Konva.Text({
        text: nodeInfo2.pin_name,
        fontSize: 10,
        fontStyle: 'bold',
        padding: 1,
      }));

      if (nodeInfo2.pin_number != nodeInfo2.pin_name) {
        pinNameLabel2.x(position.x + 4);
        pinNameLabel2.y(position.y + (pinNameLabel2.height() / 2));
        partGroup.add(pinNameLabel2);
      }
    }

    partGroup.add(new Konva.Line({
      stroke: 'blue',
      strokeWidth: 2,
      points: [position.x, position.y, position.x + netLineLength, position.y],
    }));

    // adjust for second line
    position.x += netLineLength;

    // draw second node or net stop if there isnt a second node
    if (node2) {
      const rightNodeRef = new Konva.Circle({
        radius: 4,
        fill: 'black',
        x: position.x,
        y: position.y,
        name: 'node',
        id: node2,
        hitStrokeWidth: 8,
      });

      if (!netHoverColorChangeMap[nodeInfo2.net_name]) {
        netHoverColorChangeMap[nodeInfo2.net_name] = [];
      }

      netHoverColorChangeMap[nodeInfo2.net_name].push(rightNodeRef);

      partGroup.add(rightNodeRef);
    } else {
      const netStop = drawNetStop(table, group, position);

      setKonvaMouseChangeOnHover(netStop, 'pointer');

      netStop.on('dblclick', (e) => {
        const refdesInfo = table.refdes_info[nodeInfo1.refdes];
        // we only want to iterate the node list if its a two pin part -- then we can reliably pick the
        // node on the other side.
        if (refdesInfo.node_list.length == 2) {
          for (const refdesNode of refdesInfo.node_list) {
            if (refdesNode != nodeInfo1.node_name) {
              // we found the node on the other side, so we grab its net info
              var netInfo = table.node_info[refdesNode];
              // then we grab the reference to the end of the trace
              var traceEnd = nodeListRef[node1];
              // now we create a deep copy of the other side of the trace (the one we are trying to expand)
              var newTrace = { [netInfo.net_name]: JSON.parse(JSON.stringify(table.net_tracing[netInfo.net_name])) };

              // delete the duplicate reference to the first trace from the second trace so it doesnt try to render the part twice
              delete newTrace[netInfo.net_name][netInfo.node_name];

              removeExistingNodes(newTrace, position);

              // add the expanded trace onto the end of the initial trace
              traceEnd[netInfo.node_name] = newTrace;

              var traceHead = position.traceHead;

              // redraw schematic using the new trace
              if (position.drawDirection == NET_TRACE_DRAW_DIR_UP) {
                drawSchematicNew(table, '', null, traceHead);
              }
              else {
                drawSchematicNew(table, '', traceHead, null);
              }
            }
          }
        }
      });
    }
  }

  // if we are drawing a value label we want to make sure its not overlapping the pin names
  // if it is overlapping the pin names, we want to shift it down a bit
  if (valueLabel) {
    const pinNameLabels = partGroup.find('.pin-name-label');
    if (pinNameLabels.length > 0) {
      const bBoxValueField = valueLabel.getClientRect();
      for (const pinNameLabel of pinNameLabels) {
        const bBoxPinName = pinNameLabel.getClientRect();
        if (haveIntersection(bBoxValueField, bBoxPinName)) {
          valueLabel.y(valueLabel.y() + 8);
          break;
        }
      }
    }
  }

  // for dni parts we want to make it clear that they are dni
  if (refdesInfo.do_not_install || refdesInfo.do_not_pop) {
    partGroup
      .getChildren()
      .forEach(item => {
        if (item.getName() == 'node') return;

        if (item.getAttr('fill')) {
          item.setAttr('fill', 'gray');
        }
        if (item.getAttr('stroke')) {
          item.setAttr('stroke', 'black');
          item.setAttr('opacity', 0.8);
        }
      });
      
    const dniLabel = new Konva.Label({
      name: 'dni-label',
    });

    dniLabel.add(new Konva.Tag({
      fill: 'red',
      cornerRadius: 2,
      opacity: 0.50,
    }));

    dniLabel.add(new Konva.Text({
      text: refdesInfo.do_not_install ? 'DNI' : 'NO POP',
      fontSize: 11,
      fontStyle: 'bold',
      padding: 1,
      fill: 'white',
    }));

    const centerPartX = (position.x - xStart - (node2 || drawEndLine ? netLineLength : 0)) / 2;

    dniLabel.x(xStart + centerPartX - (dniLabel.width() / 2));
    dniLabel.y(yStart - dniLabel.height() + 2);
    partGroup.add(dniLabel);
  }

  console.log("X:" + position.x + " Y:" + position.y + " Drawing nodes: " + node1 + "<->" + node2);

  return manyPinComponent;
}

function drawNetStop(table, group, position) {
  const radius = 10;
  var konvaNetStop = new Konva.RegularPolygon({
    sides: 6,
    radius: radius,
    stroke: 'black',
    fill: 'red',
    strokeWidth: 2,
    x: position.x,
    y: position.y,
    name: 'netstop',
  });

  group.add(konvaNetStop);

  return konvaNetStop;
}

function drawResistorNew(table, group, node1, node2, position) {
  function drawResistorLine(group, position, y1, y2) {
    group.add(new Konva.Line({
      stroke: 'red',
      strokeWidth: 2,
      points: [position.x, position.y + y1, position.x + 5, position.y + y2],
    }));
    position.x += 5;
  }

  const yDistance1 = 6;
  const yDistance2 = yDistance1 / 2;

  drawResistorLine(group, position, 0, -yDistance2);
  drawResistorLine(group, position, -yDistance2, yDistance1);
  drawResistorLine(group, position, yDistance1, -yDistance1);
  drawResistorLine(group, position, -yDistance1, yDistance1);
  drawResistorLine(group, position, yDistance1, -yDistance1);
  drawResistorLine(group, position, -yDistance1, yDistance1);
  drawResistorLine(group, position, yDistance1, -yDistance2);
  drawResistorLine(group, position, -yDistance2, 0);
}

function drawCapacitorNew(table, group, node1, node2, position) {
  const yDistance1 = 6;
  
  group.add(new Konva.Line({
    stroke: 'red',
    strokeWidth: 2,
    points: [position.x, position.y, position.x + 15, position.y],
  }));
  position.x += 15;

  // vertical line
  group.add(new Konva.Line({
    stroke: 'red',
    strokeWidth: 2,
    points: [position.x, position.y - yDistance1, position.x, position.y + yDistance1],
  }));

  // empty spacer
  position.x += 10;

  // vertical line
  group.add(new Konva.Line({
    stroke: 'red',
    strokeWidth: 2,
    points: [position.x, position.y - yDistance1, position.x, position.y + yDistance1],
  }));

  group.add(new Konva.Line({
    stroke: 'red',
    strokeWidth: 2,
    points: [position.x, position.y, position.x + 15, position.y],
  }));
  position.x += 15;
}

function drawInductorNew(table, group, node1, node2, position) {
  position.x += 1;
  const radius = 4;
  group.add(new Konva.Circle({
    stroke: 'black',
    strokeWidth: 2,
    x: position.x + 3,
    y: position.y,
    radius: radius,
  }));
  group.add(new Konva.Circle({
    stroke: 'black',
    strokeWidth: 2,
    x: position.x + 11,
    y: position.y,
    radius: radius,
  }));
  group.add(new Konva.Circle({
    stroke: 'black',
    strokeWidth: 2,
    x: position.x + 19,
    y: position.y,
    radius: radius,
  }));
  group.add(new Konva.Circle({
    stroke: 'black',
    strokeWidth: 2,
    x: position.x + 27,
    y: position.y,
    radius: radius,
  }));
  group.add(new Konva.Circle({
    stroke: 'black',
    strokeWidth: 2,
    x: position.x + 35,
    y: position.y,
    radius: radius,
  }));
  group.add(new Konva.Rect({
    // stroke: 'black',
    fill: 'white',
    // strokeWidth: 1,
    x: position.x-2,
    y: position.y+1,
    height: 5,
    width: 43,
  }));

  position.x += 39; // 39 instead of 40 because we incremented by one already
}

function drawDiodeNew(table, group, node1, node2, position) {
  var node1Info = table.node_info[node1];
  // triangle points towards the cathode
  var trianglePointingRight = node1Info.pin_name.replace(/\s/ig, '').match(/anode|^a/i);

  group.add(new Konva.Line({
    strokeWidth: 2,
    stroke: 'black',
    points: [position.x, position.y, position.x + 14, position.y],
  }));

  if (trianglePointingRight) {
    group.add(new Konva.RegularPolygon({
      sides: 3,
      radius: 8,
      strokeWidth: 2,
      stroke: 'black',
      x: position.x + 18,
      y: position.y,
      rotation: 90,
    }));
    group.add(new Konva.Line({
      strokeWidth: 2,
      stroke: 'black',
      points: [position.x + 26, position.y - 8, position.x + 26, position.y + 8],
    }));
  } else {
    group.add(new Konva.RegularPolygon({
      sides: 3,
      radius: 8,
      strokeWidth: 2,
      stroke: 'black',
      x: position.x + 22,
      y: position.y,
      rotation: -90,
    }));
    group.add(new Konva.Line({
      strokeWidth: 2,
      stroke: 'black',
      points: [position.x + 14, position.y - 8, position.x + 14, position.y + 8],
    }));
  }

  group.add(new Konva.Line({
    strokeWidth: 2,
    stroke: 'black',
    points: [position.x + 26, position.y, position.x + 40, position.y],
  }));

  position.x += 40;
}

function drawFuseNew(table, group, node1, node2, position) {
  group.add(new Konva.Rect({
    x: position.x,
    y: position.y - 7,
    width: 40,
    height: 14,
    fill: 'white',
    stroke: 'red',
    strokeWidth: 2,
  }));

  group.add(new Konva.Line({
    points: [position.x + 10, position.y - 7, position.x + 10, position.y + 7],
    stroke: 'red',
    strokeWidth: 2,
  }));

  group.add(new Konva.Line({
    points: [position.x + 30, position.y - 7, position.x + 30, position.y + 7],
    stroke: 'red',
    strokeWidth: 2,
  }));

  // IEEE/ANSI Standard below
  // const arcBubbleRadius = 10;

  // group.add(new Konva.Arc({
  //   x: position.x + arcBubbleRadius,
  //   y: position.y - 1,
  //   innerRadius: arcBubbleRadius - 1,
  //   outerRadius: arcBubbleRadius + 1,
  //   fill: 'black',
  //   angle: 180,
  // }));

  // group.add(new Konva.Arc({
  //   x: position.x + (arcBubbleRadius * 3),
  //   y: position.y + 1,
  //   innerRadius: arcBubbleRadius - 1,
  //   outerRadius: arcBubbleRadius + 1,
  //   fill: 'black',
  //   angle: 180,
  //   rotation: 180
  // }));

  position.x += 40; // length of middle of part
}

function drawComponentNew(table, group, node1, node2, position) {
  const yDistance1 = node2 ? 6 : 12;

  group.add(new Konva.Rect({
    stroke: 'black',
    fill: 'red',
    strokeWidth: 2,
    width: 40,
    height: yDistance1 * 2,
    x: position.x,
    y: position.y - yDistance1,
  }));
  position.x += 40;
}

function drawManyPinPart(table, group, partGroup, node1, position, nodeListRef, leftNodes) {
  const netLineLength = 40;
  const xStart = position.x;
  const yStart = position.y;
  var valueDrawY = position.y;

  position.x += netLineLength;

  const nodes = sortPins(table, nodeListRef[node1], position);

  for (const nodeName of position.postSorting(nodes)) {
    position.nodesAdded[nodeName] = 1;

    const netRef = nodeListRef[node1][nodeName];

    const rightNodeInfo = table.node_info[nodeName];

    const pinNumberLabel2 = new Konva.Text({
      text: rightNodeInfo.pin_number,
      fontSize: 12,
    });

    pinNumberLabel2.x(position.x + 4);
    pinNumberLabel2.y(position.y - pinNumberLabel2.height() - 1);
    partGroup.add(pinNumberLabel2);

    if (rightNodeInfo.pin_type) {
      drawPinDirection(group, position, rightNodeInfo.pin_type, false);
    }

    if (rightNodeInfo.pin_number != rightNodeInfo.pin_name) {
      const pinNameLabel2 = new Konva.Label({
        name: 'pin-name-label',
        opacity: 0.90,
      });
      
      pinNameLabel2.add(new Konva.Tag({
        fill: '#fabf8f',
        cornerRadius: 3,
      }));
    
      pinNameLabel2.add(new Konva.Text({
        text: rightNodeInfo.pin_name,
        fontSize: 10,
        fontStyle: 'bold',
        padding: 1,
      }));

      pinNameLabel2.x(position.x + 4);
      pinNameLabel2.y(position.y + (pinNameLabel2.height() / 2));
      partGroup.add(pinNameLabel2);
    }

    partGroup.add(new Konva.Line({
      stroke: 'blue',
      strokeWidth: 2,
      points: [position.x, position.y, position.x + netLineLength, position.y],
    }));

    // adjust for blue line
    position.x += netLineLength;

    const rightNodeRef = new Konva.Circle({
      radius: 4,
      fill: 'black',
      x: position.x,
      y: position.y,
      name: 'node',
      id: nodeName,
      hitStrokeWidth: 8,
    });

    if (!netHoverColorChangeMap[rightNodeInfo.net_name]) {
      netHoverColorChangeMap[rightNodeInfo.net_name] = [];
    }

    netHoverColorChangeMap[rightNodeInfo.net_name].push(rightNodeRef);

    partGroup.add(rightNodeRef);

    valueDrawY = position.y;

    drawTraceRecursively(table, group, netRef, position, nodeListRef[node1]);

    // adjust for blue line
    position.x -= netLineLength;
  }

  var idx = 1;
  // draw all the extra left nodes
  for (const leftNodeName of leftNodes) {

    const netLineLength = 40; // TODO pull this out of here (and the other places its used) and move it into the global scope
    const leftNodePosY = yStart + (((NET_TRACE_PART_HEIGHT - 20) * idx++) * position.drawDirection);

    if (position.drawDirection == NET_TRACE_DRAW_DIR_DOWN) {
      if (leftNodePosY > valueDrawY) valueDrawY = leftNodePosY;
    }
    else if (position.drawDirection == NET_TRACE_DRAW_DIR_UP) {
      if (leftNodePosY < valueDrawY) valueDrawY = leftNodePosY;
    }

    const leftNodeInfo = table.node_info[leftNodeName];
    const leftNode = new Konva.Circle({
      radius: 4,
      fill: expandedNodes[leftNodeName] ? 'red' : 'black',
      x: xStart - netLineLength,
      y: leftNodePosY,
      name: 'node',
      id: leftNodeName,
      hitStrokeWidth: 8,
    });

    if (!netHoverColorChangeMap[leftNodeInfo.net_name]) {
      netHoverColorChangeMap[leftNodeInfo.net_name] = [];
    }

    netHoverColorChangeMap[leftNodeInfo.net_name].push(leftNode);

    partGroup.add(leftNode);

    if (expandedNodes[leftNodeName]) {
      setKonvaMouseChangeOnHover(leftNode, 'pointer');

      leftNode.on('dblclick', (e) => {
        const netTraceNodes = Object.keys(nodeListRef);

        // all the net traces nodes will exist in the expanded nodes so we just check for the first one
        if (expandedNodes[netTraceNodes[0]]) {
          for (const expandedNodeKey of Object.keys(nodeListRef)) {
            delete expandedNodes[expandedNodeKey];
          }

          for (const key in nodeListRef) {
            delete nodeListRef[key];
          }

          var traceHead = position.traceHead;

          // redraw schematic using the new trace
          if (position.drawDirection == NET_TRACE_DRAW_DIR_UP) {
            drawSchematicNew(table, '', null, traceHead);
          }
          else {
            drawSchematicNew(table, '', traceHead, null);
          }
        }
      });
    }

    partGroup.add(new Konva.Line({
      stroke: 'blue',
      strokeWidth: 2,
      points: [xStart - netLineLength, leftNodePosY, xStart, leftNodePosY],
    }));

    if (leftNodeInfo.pin_type) {
      drawPinDirection(group, { x: xStart - netLineLength, y: leftNodePosY }, leftNodeInfo.pin_type, true);
    }

    partGroup.id(leftNodeInfo.refdes);

    const pinNumberLabel1 = new Konva.Text({
      text: leftNodeInfo.pin_number,
      fontSize: 12,
    });

    pinNumberLabel1.x(xStart - pinNumberLabel1.width() - 4);
    pinNumberLabel1.y(leftNodePosY - pinNumberLabel1.height() - 1);
    partGroup.add(pinNumberLabel1);

    const pinNameLabel1 = new Konva.Label({
      name: 'pin-name-label',
      opacity: 0.90,
    });

    pinNameLabel1.add(new Konva.Tag({
      fill: '#fabf8f',
      cornerRadius: 3,
    }));

    pinNameLabel1.add(new Konva.Text({
      text: leftNodeInfo.pin_name,
      fontSize: 10,
      fontStyle: 'bold',
      padding: 1,
    }));

    if (leftNodeInfo.pin_number != leftNodeInfo.pin_name) {
      pinNameLabel1.x(xStart - pinNameLabel1.width() - 4);
      pinNameLabel1.y(leftNodePosY + (pinNameLabel1.height() / 2));
      partGroup.add(pinNameLabel1);
    }
  }

  // making the distance between the left pins smaller by 20 and adding 20 to the end to make space for the value and refdes
  const requiredHeightForLeftSideNodes = (NET_TRACE_PART_HEIGHT - 20) * (leftNodes.length + 1) + 20;
  if (position.y - yStart < requiredHeightForLeftSideNodes) {
    position.y = yStart + (requiredHeightForLeftSideNodes * position.drawDirection);
  }

  position.y -= (NET_TRACE_PART_HEIGHT * position.drawDirection); // height of a part

  const netRef = table.node_info[node1];
  if (leftNodes.length) {
    drawVerticalNetLine(group, netRef.net_name, { x: xStart - netLineLength, y: yStart }, { x: xStart - netLineLength, y: position.y });
  }

  valueDrawY += (12 * position.drawDirection); // top padding

  partGroup.add(new Konva.Rect({
    fill: 'red',
    stroke: 'black',
    strokeWidth: 2,
    y: yStart - (12 * position.drawDirection),
    x: xStart,
    height: valueDrawY - yStart + (12 * position.drawDirection),
    width: position.x - xStart,
  }));

  if (position.drawDirection == NET_TRACE_DRAW_DIR_UP) {
    valueDrawY = yStart + 8;
  }
  else {
    valueDrawY -= 8;
  }

  const nodesToWrite = [].concat([node1], leftNodes);
  console.log("X:" + position.x + " Y:" + position.y + " Drawing many pin part: (" + nodesToWrite.join(',') + ")<->(" + nodes.join(',') + ")");

  return valueDrawY;
}

function drawPinDirection(group, position, pinType, leftSide) {
  if (pinType.match(/in|bi/i)) {
    group.add(new Konva.RegularPolygon({
      fill: 'blue',
      x: position.x + (leftSide ? 18 : 22), // x + one half net line length
      y: position.y,
      radius: 5,
      sides: 3,
      rotation: leftSide ? 90 : -90,
    }));
  }

  if (pinType.match(/out|bi/i)) {
    group.add(new Konva.RegularPolygon({
      fill: 'blue',
      x: position.x + (leftSide ? 22 : 18), // x + one half net line length
      y: position.y,
      radius: 5,
      sides: 3,
      rotation: leftSide ? -90 : 90,
    }));
  }
}
  

function buildRailSummaryFromJson() {    
  const railSummaryTable = $('#rail-summary-table');

  if (!railSummaryTable) return;

  const reportHtmlTable = $('.overflow_div .sorted-table.json-populated-table');
  const reportLookupTable = this[reportHtmlTable.attr('id')];

  if (!reportLookupTable) return;

  var addActive = true;

  var longestRailName = 0;
  for (const railName of reportLookupTable.SHEET_ORDER) {
    if (railName.length > longestRailName) longestRailName = railName.length;
  }

  longestRailName *= 8;   // length in pixels
  longestRailName += 100; // extra buffer

  for (const railName of reportLookupTable.SHEET_ORDER) {
    const railContainer = $('<span>');

    railContainer.addClass('rail-row-container');
    railContainer.attr('id', railName + '_row_container');

    const railInputElement = $('<input type="checkbox" onclick="toggleHideRail(this, event)">');

    railInputElement.addClass('hide-rail-row-checkbox');

    const railRowButton = $('<button>');

    if (addActive) {
      addActive = false;
      railRowButton.addClass('active');
    }

    railRowButton.addClass('nl_diff_btn');
    railRowButton.addClass('slim');
    railRowButton.css('width', 'calc(100% - 35px)');
    railRowButton.click((e) => {
      $('.rail-row-container .nl_diff_btn.active').removeClass('active');
      railRowButton.addClass('active');
      buildJsonTable(railName);
    });

    const railData = reportLookupTable[railName].RAIL_SUMMARY;

    var html = '<span style="width: ' + longestRailName + 'px; overflow: hidden;"><span class="rail-column">Rail Name</span>: <span class="rail-value rail-name">' + railName + '</span></span>';
    html += '<span style="width: 125px;"><span class="rail-column">Voltage</span>: <span class="rail-value"><span class="editable" id="' + railName + '_net_volt" contenteditable="true">' + railData.RAIL_VOLT + '</span></b></span></span>';
    html += '<span style="width: 175px;"><span class="rail-column">Capacitor Quantity</span>: <span class="rail-value">' + railData.QUANTITY + '</span></span>';
    html += '<span style="width: 200px;"><span class="rail-column">Unique Capacitor PNs</span>: <span class="rail-value">' + railData.UNIQUE_PNS + '</span></span>';
    html += '<span><span class="rail-column">Total Capacitance</span>: <span class="rail-value"><span id="' + railName + '_total_cap">' + railData.TOTAL_CAPACITANCE + '</span> uF</span></span>';

    railRowButton.html(html);

    railContainer.append(railInputElement);
    railContainer.append(railRowButton);
    railSummaryTable.append(railContainer);
  }
}

// this function builds the report html table from a json object.
// the ID of the table in the report corresponds to the name of the json file that we
//  need to look in for the report data.
function buildJsonTable(key, firstLoad = false) {

  // get the report table -- maybe in the future we support more than one table but for now we grab the first one and use that only
  const reportHtmlTable = $('.json-populated-table').first();

  // this is the json db that we look at for the report information
  const reportLookupTable = this[reportHtmlTable.attr('id')]; // keyed to the id of the table we are using

  if (reportLookupTable) {
    if (!key) { // if no key is provided to this function, we use the first key in the sheet order array
      key = reportLookupTable.SHEET_ORDER[0];
    }

    const htmlTable = $('#' + reportLookupTable.REPORT_ID);

    // const tableHead = htmlTable.find('thead').first();
    const tableBody = htmlTable.find('tbody').first();

    // empty tables
    // tableHead.html('');
    tableBody.html('');

    // this array will store the longest string in each column
    const longestText = [];

    const headerConfig = reportLookupTable.HEADER_CONFIGURATION;

    // iterate all the rows of the report
    for (const data of reportLookupTable[key].ROWS) {

      // create new html row element
      const bodyRow = $('<tr>');

      // iterate all the headers
      var i = 0;
      for (const header of reportLookupTable.HEADERS) {
        const columnConfiguration = headerConfig[header];
        const editable = columnConfiguration.EDITABLE;
        const rowCell = $('<td' + (editable ? ' contenteditable="true"' : '') + '>');

        const content = data[header];

        // the data can either be a hash or plaintext
        if (typeof content == 'object') {
          if (content.DATA) { // this means its an array
            if (content.WRAP_IN_CLASS) {
              const items = [];
              const span = '<span class="' + content.WRAP_IN_CLASS + '">';
              for (const item of content.DATA) {
                items.push(span + item + '</span>');
              }
              rowCell.html(items.join(content.DELIMITER || ','));
            }
            else {
              rowCell.text(content.DATA.join(content.DELIMITER || ','));
            }
          }
          else if (content.TEXT) {
            rowCell.text(content.TEXT);
          }
        }
        else {
          rowCell.text(content);
        }

        // determine if the length of this text is longer than the longest text in this column, and if so, set it in the array
        if (rowCell.text().length > (longestText[i] || 0)) {
          longestText[i] = rowCell.text().length;
        }
        i += 1;
        
        // set word spacing configuration setting
        if (columnConfiguration.WORD_SPACING) {
          rowCell.css('word-spacing', columnConfiguration.WORD_SPACING + 'px');
        }

        // set hidden configuration setting
        if (columnConfiguration.HIDE) {
          rowCell.css('display', 'none');
        }

        bodyRow.append(rowCell);
      }
      tableBody.append(bodyRow);
    }

    // determine the total length of all the longest rows combined so we can use that as the numerator in our equation
    var totalLength = 0;
    for (const headerLength of longestText) {
      totalLength += (headerLength || 0);
    }

    // set the widths of the table columns
    var i = 0;
    for (const tableHeaderEl of reportHtmlTable.find('th').toArray()) {
      const tableHeader = $(tableHeaderEl);
      tableHeader.width((longestText[i++] / totalLength * 100.0) + 'vw');
    }

    // const headerRow = $('<tr>');
    // for (const header of reportLookupTable.HEADERS) {
    //   const readableHeader = header.split('_').map(word => word.charAt(0).toUpperCase() + word.substring(1).toLowerCase()).join(' ');
    //   const headerSettings = reportLookupTable.HEADER_CONFIGURATION[header];

    //   const tableCell = $('<th>');
    //   tableCell.text(readableHeader);

    //   headerRow.append(tableCell);
    // }

    // tableHead.append(headerRow);
  }
  
  initializeEventListeners();
  if (!firstLoad) {
    initializeEventListeners_PostLoad();
  }
}