### Launch MicrobeTrace Webserver

Source: https://github.com/cdcgov/hantanet/blob/master/test/security/README.md

Starts the local development server to enable testing of security payloads.

```sh
npm start
```

--------------------------------

### Initial Gantt Chart Setup

Source: https://github.com/cdcgov/hantanet/blob/master/components/gantt.html

Performs initial setup for the Gantt chart, including refreshing the view and setting the background colors. This is executed after a short delay to ensure the DOM is ready.

```javascript
setTimeout(function () {
    refresh();
    setBackground();
}, 80);
```

--------------------------------

### Initial Map Load and Configuration

Source: https://github.com/cdcgov/hantanet/blob/master/components/geo_map.html

Performs initial setup for the map based on stored temporary data. This includes toggling the visibility of country, state, and county layers, and setting the basemap or satellite view. It then centers the map on the bounds of the nodes.

```javascript
function initialLoadUpdate() { if (temp.mapData['map-countries-show'] == false) $('#map-countries-hide').trigger('click'); if (temp.mapData['map-states-show'] == false) $('#map-states-hide').trigger('click'); if (temp.mapData['map-counties-show'] == true) $('#map-counties-show').trigger('click'); if (temp.mapData['map-basemap-show'] == true) $('#map-basemap-show').trigger('click'); if (temp.mapData['map-satellite-show'] == true) $('#map-satellite-show').trigger('click'); delete temp.mapData['map-countries-show']; delete temp.mapData['map-states-show']; delete temp.mapData['map-counties-show']; delete temp.mapData['map-basemap-show']; delete temp.mapData['map-satellite-show']; map.flyToBounds(layers.nodes.getBounds()); }
```

```javascript
setTimeout(function () { matchCoordinates(function () { rerollNodes(); drawLinks(); drawNodes(); initialLoadUpdate(); }); if (layers.nodes.length) map.flyToBounds(layers.nodes.getBounds()); }, 40);
```

--------------------------------

### Launch Application Process

Source: https://github.com/cdcgov/hantanet/blob/master/components/files.html

Initiates the application launch sequence, including setting start time, disabling the launch button, and displaying processing messages. It uses a Promise to ensure the loading modal is shown before proceeding. Uses jQuery and Bootstrap modal.

```javascript
$('#launch').on('click', () => {
    session.meta.startTime = Date.now();
    $('#launch').prop('disabled', true);
    document.getElementById('loading-information').innerHTML="<p>Processing file(s)...</p>";
    new Promise(function(resolve, reject) {
        $('#loading-information-modal').on('shown.bs.modal', function (e) {
            session.messages = [];
            $('#loading-information').html('');
            resolve("done");
        });
        $('#loading-information-modal').modal({ backdrop: false, keyboard: false });
        setTimeout(() => reject(new Error("Problem loading information modal!")), 5000);
    }).then( result => launch() // error => {alert(error); launch();} // informational modal doesn't load );
});
```

--------------------------------

### Run MicrobeTrace Benchmark Test

Source: https://github.com/cdcgov/hantanet/blob/master/test/benchmark/README.md

Execute the core benchmark test script for MicrobeTrace. This script runs sessions with sequence counts ranging from 100 to 3200. Note that the server started by this script does not automatically shut down.

```sh
nodejs tests/benchmark/run.js
```

--------------------------------

### Get Visible Links

Source: https://github.com/cdcgov/hantanet/blob/master/components/2d_network.html

Retrieves visible links from the network, processing origin information. Useful for filtering and preparing link data for rendering or analysis.

```javascript
function getLLinks() { let vlinks = MT.getVisibleLinks(true); let n = vlinks.length; for (let i = 0; i < n; i++) { vlinks[i].source = session.network.nodes.find(d => d._id == vlinks[i].source); vlinks[i].target = session.network.nodes.find(d => d._id == vlinks[i].target); } return vlinks; }
```

--------------------------------

### Node Dragging Logic

Source: https://github.com/cdcgov/hantanet/blob/master/components/2d_network.html

Manages the start, drag, and end events for node dragging, including single node and multi-node (polygon selection) dragging. Updates node positions and force simulation.

```javascript
let selected, multidrag = false;
function dragstarted(n) {
  if (!d3.event.active) force.alphaTarget(0.3).restart();
  function setNode(d) {
    d.fx = d.x;
    d.fy = d.y;
  }
  multidrag = n.selected;
  selected = svg.select('g.nodes')
    .selectAll('g')
    .data(session.network.nodes)
    .filter(d => d.selected);
  if (multidrag) {
    selected.each(setNode);
  } else {
    setNode(n);
  }
}
function dragged(n) {
  function updateNode(d) {
    d.fx += d3.event.dx;
    d.fy += d3.event.dy;
  }
  if (multidrag) {
    selected.each(updateNode);
  } else {
    updateNode(n);
  }
}
function dragended(n) {
  if (!d3.event.active) force.alphaTarget(0);
  function unsetNode(d) {
    if (!d.fixed) {
      d.fx = null;
      d.fy = null;
    } else {
      // save node location back to temp network for pinned network
      if(session.style.widgets["timeline-date-field"] != 'None') {
        let node = session.network.timelineNodes.find(d2 => d2._id == d._id);
        if(node) {
          node.x = d.x;
          node.y = d.y;
          node.fx = d.fx;
          node.fy = d.fy;
        }
      }
    }
  }
  if (multidrag) {
    selected.each(unsetNode);
  } else {
    unsetNode(n);
  }
}
```

--------------------------------

### Initialize PIXI Application and Viewport

Source: https://github.com/cdcgov/hantanet/blob/master/components/pixi.html

Sets up the PIXI application with specified dimensions and resolution, and initializes a Viewport for interactive zooming and panning. Appends the PIXI view to the DOM.

```javascript
const SCREEN_WIDTH = $('#pixi').parent().width();
const SCREEN_HEIGHT = $('#pixi').parent().parent().parent().height();
const RESOLUTION = window.devicePixelRatio;

const app = new PIXI.Application({
    width: SCREEN_WIDTH,
    height: SCREEN_HEIGHT,
    resolution: RESOLUTION,
    transparent: true,
    antialias: true
});

document.getElementById('pixi').appendChild(app.view);

const viewport = new Viewport.Viewport({
    screenWidth: SCREEN_WIDTH,
    screenHeight: SCREEN_HEIGHT,
    worldWidth: SCREEN_WIDTH,
    worldHeight: SCREEN_HEIGHT
});

vport.wheel().drag().decelerate();
app.stage.addChild(viewport);
```

--------------------------------

### Initialize File View and Event Listeners

Source: https://github.com/cdcgov/hantanet/blob/master/components/files.html

Sets up Google Analytics tracking, UI panel toggles, and drag-and-drop event handlers for file management.

```javascript
(function () { ga('set', 'page', '/files'); ga('set', 'title', 'Files View'); ga('send', 'pageview'); 'use strict'; $('#file-panel').parent().css('z-index', 1000); $('#file-settings-toggle').on('click', function () { const pane = $('#file-settings-pane'); if ($(this).hasClass('active')) { pane.animate({ left: '-400px' }, () => pane.hide()); } else { pane.show(0, () => pane.animate({ left: '0px' })); } }); if (session.files.length > 0) { $('#file-prompt, #warning-prompt').remove(); session.files.forEach(addToTable); } $('#data-files').on('change', function () { processFiles(this.files); }); $('#file-panel').on('dragover', evt => { evt.stopPropagation(); evt.preventDefault(); evt.originalEvent.dataTransfer.dropEffect = 'copy'; }).on('drop', evt => { evt.stopPropagation(); evt.preventDefault(); processFiles(evt.originalEvent.dataTransfer.files); }); function processFiles(files){ const n = files.length; $('#file-prompt, #warning-prompt').remove(); for (let i = 0; i < n; i++) processFile(files[i]); $('#launch').prop('disabled', false).focus(); } function processFile(rawfile) { const extension = rawfile.name.split('.').pop().toLowerCase(); if (extension == 'zip') { let new_zip = new JSZip(); new_zip .loadAsync(rawfile) .then(zip => { zip.forEach((relativePath, zipEntry) => { zipEntry.async("string").then(c => { MT.processJSON(c, zipEntry.name.split('.').pop()) }); }); }); return; } if (extension == 'microbetrace' || extension == 'hivtrace') { let reader = new FileReader(); reader.onloadend = out => MT.processJSON(out.target.result, extension); reader.readAsText(rawfile, 'UTF-8'); return; } if (extension == 'svg') { let reader = new FileReader(); reader.onloadend = out => MT.processSVG(out.target.result); reader.readAsText(rawfile, 'UTF-8'); return; } fileto.promise(rawfile, (extension == 'xlsx' || extension == 'xls') ? 'ArrayBuffer' : 'Text').then(file => { file.name = filterXSS(file.name); file.extension = file.name.split('.').pop().toLowerCase(); session.files.push(file); addToTable(file); }); } function addToTable(file) { const extension = file.extension ? file.extension : filterXSS(file.name).split('.').pop().toLowerCase(); //#291 restore to previous filetype selection if available const isFasta = 'fasta' == file.format || extension.indexOf('fas') > -1; const isNewick = 'newick' == file.format ||extension.indexOf('nwk') > -1 || extension.indexOf('newick') > -1; const isXL = (extension == 'xlsx' || extension == 'xls'); const isNode = 'node' == file.format || file.name.toLowerCase().includes('node'); if (isXL) { let workbook = XLSX.read(file.contents, { type: 'array' }); let data = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]], {raw: false, dateNF: 'yyyy-mm-dd'}); let headers = []; data.forEach(row => { Object.keys(row).forEach(key => { const safeKey = filterXSS(key); if (!headers.includes(safeKey)) headers.push(safeKey); }); }); addTableTile(headers); } else { Papa.parse(file.contents, { delimiter: ",", // newline: "\r\n", header: true, preview: 1, complete: output => addTableTile(output.meta.fields.map(filterXSS)) }); } //For the love of all that's good... //TODO: Rewrite this as a [Web Component](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) or [something](https://reactjs.org/docs/react-component.html) or something. function addTableTile(headers) { let root = $('<div class="file-table-row"></div>').data('filename', file.name); let fnamerow = $('<div class="row w-100"></div>'); $('<div class="file-name col"></div>') .append($('<a href="#" class="oi oi-circle-x align-middle p-1" title="Remove this file"></a>').on('click', () => { session.files.splice(session.files.findIndex(f => f.name == file.name), 1); root.slideUp(() => root.remove()); })) .append($('<a href="#" class="oi oi-data-transfer-download align-middle p-1" title="Resave this file"></a>').on('click', () => { saveAs(new Blob([file.contents], { type: file.type | 'text' }), file.name); })) .append('<span class="p-1">' + file.name + '</span>') .append(` <div class="btn-group btn-group-toggle btn-group-sm float-right" data-toggle="buttons"> <label class="btn btn-light${!isFasta & !isNewick & !isNode ? ' active' : ''}"> <input type="radio" name="options-${file.
```

--------------------------------

### Initialize and Configure 3D Network Visualization

Source: https://github.com/cdcgov/hantanet/blob/master/components/3d_network.html

Sets up the ForceGraph3D instance and defines update functions for visual properties like tooltips, colors, and sizes based on session settings.

```javascript
(function () { ga('set', 'page', '/3d_network'); ga('set', 'title', '3D View'); ga('send', 'pageview'); let links = []; let nodes = []; let graph = ForceGraph3D()($("#3DNet").get(0)); function updateNodeTooltip() { let nodeTooltip = session.style.widgets["3DNet-node-tooltip-variable"]; if (nodeTooltip == "None" || nodeTooltip == null) { graph.nodeLabel(""); } else { graph.nodeLabel(d => `<span class="three-dee-node-tooltip">${d[nodeTooltip]}</span>`); } } function updateNodeColors() { let nodeColorBy = session.style.widgets["node-color-variable"]; if (nodeColorBy == "None") { let nodeColor = session.style.widgets["node-color"]; graph.nodeColor(d => d.selected ? session.style.widgets["selected-color"] : nodeColor ); } else { graph.nodeColor(d => d.selected ? session.style.widgets["selected-color"] : temp.style.nodeColorMap(d[nodeColorBy]) ); } graph.nodeOpacity(1); } function updateNodeSizes() { let nodeSizeBy = session.style.widgets["3DNet-node-radius-variable"]; if (nodeSizeBy !== "None") graph.nodeVal(nodeSizeBy); graph.nodeRelSize(session.style.widgets["3DNet-node-radius"]); } function updateLinkTooltip() { let linkTooltip = session.style.widgets["3DNet-link-tooltip-variable"]; if (linkTooltip == "None") { graph.linkLabel(""); } else { graph.linkLabel(d => `<span style="color:#333333;background:#f5f5f5;border:1px solid #cccccc;border-radius:.25rem;padding:.25rem;">${d[linkTooltip]}</span>`); } } function updateLinkColors() { let linkColorBy = session.style.widgets["link-color-variable"]; if (linkColorBy == "None") { let linkColor = session.style.widgets["link-color"]; graph.linkColor(l => linkColor); } else { graph.linkColor(l => temp.style.linkColorMap(l[linkColorBy])); } } function updateLinkOpacity() { graph.linkOpacity(1 - session.style.widgets["3DNet-link-transparency"]); } function updateLinkWidth() { graph.linkWidth(session.style.widgets["3DNet-link-width"]); } function updateBackground() { graph.backgroundColor(session.style.widgets["background-color"]); } function updateData() { if(!$('#3DNet').length) return; let newNodes = MT.getVisibleNodes(true); newNodes.forEach(d => { let match = nodes.find(d2 => d._id == d2._id || d.id == d2.id); if (match) { d.x = match.x; d.y = match.y; d.z = match.z; d.vx = match.vx; d.vy = match.vy; d.vz = match.vz; } d.id = d._id; }); nodes = newNodes; links = MT.getVisibleLinks(true); graph.graphData({ nodes: nodes, links: links }); } function updateGraph() { updateData(); updateBackground(); updateNodeSizes(); updateNodeColors(); updateNodeTooltip(); updateLinkWidth(); updateLinkColors(); updateLinkOpacity(); updateLinkTooltip(); } // graph.onNodeClick(function(node){ // let model = session.data.nodes.find(d => node.id = d.id); // if(!model) return; // model.selected = !model.selected; // $window.trigger('node-selected'); // }); $("#toggle-3DNet-settings").on("click", function () { let pane = $("#3DNet-settings-pane"); if ($(this).hasClass('active')) { pane.animate({ left: "-400px" }, function () { pane.hide(); }); } else { pane.show(0, function () { pane.animate({ left: "0px" }); }); } }); let a, downloads = 0; function download() { if (downloads) { cancelAnimationFrame(a); } else { $("#3DNet canvas")[0].toBlob(function (blob) { saveAs(blob, $("#export-3d-file-name").val() + ".png"); }); } } $("#3DNet-export").on("click", function () { downloads = 0; a = requestAnimationFrame(download); }); function clearCoords() { nodes.forEach(d => { delete d.x; delete d.y; delete d.z; }); updateGraph(); } function fit(thing, bounds) { graph.cameraPosition({ z: 1000 }); } $('#3DNet-fitbutton').on('click', fit); $("#reload-3DNet").on("click", clearCoords); $("#3DNet-node-tooltip-variable").on("change", function (e) { session.style.widgets["3DNet-node-tooltip-variable"] = e.target.value; updateNodeTooltip(); }); $("#3DNet-node-radius-variable").on("change", function (e) { session.style.widgets["3DNet-node-radius-variable"] = e.target.value; updateNodeSizes(); }); $("#3DNet-node-radius").on("change", function (e) { session.style.widgets["3DNet-node-radius"] = parseFloat(e.target.value); updateNodeSizes(); }); $("#3DNet-link-tooltip-variable").on("change", function (e) { session.style.widgets["3DNet-link-tooltip-variable"] = e.target.value; updateLinkTooltip(); }); $("#3DNet-link-transparency").on("change", function (e) { session.style.widgets["3DNet-link-transparency"] = parseFloat( e.target.value ); updateLinkOpacity(); }); $("#3DNet-link-width").on("change", function (e) { session.style.widgets["3DNet-link-width"] = parseFloat(e.target.value); updateLinkWidth(); }); $window .on("link-visibility node-visibility", updateData) .on("node-color-change selected-color-change", updateNodeColors) .on("link-color-change", updateLinkColors) .on("background-color-change", updateBackground) .on("node-selected", function () { updateData(); updateNodeColors(); }); // layout.on('stateCh
```

--------------------------------

### Initialize and Update Bubbles Visualization

Source: https://github.com/cdcgov/hantanet/blob/master/components/bubbles.html

Sets up the D3.js SVG container, updates node data, and initializes the force simulation. Handles initial rendering and updates based on visible nodes.

```javascript
(function () {
  ga('set', 'page', '/bubbles');
  ga('set', 'title', 'Bubbles View');
  ga('send', 'pageview');

  let width, height, center, simulation, vnodes, svg = d3.select('#bubbles');

  function updateVNodes() {
    let newnodes = MT.getVisibleNodes(true);
    if (!vnodes) vnodes = newnodes;
    newnodes.forEach(newNode => {
      let old = vnodes.find(oldNode => oldNode._id == newNode._id);
      if (old) {
        newNode.x = old.x;
        newNode.y = old.y;
      } else {
        newNode.x = center.x;
        newNode.y = center.y;
      }
    });
    vnodes = newnodes;
  }

  function reset() {
    let bv = $('#bubbles');
    if (!bv.length) return;
    bv.css('background-color', session.style.widgets['background-color']);
    width = bv.parent().width();
    height = bv.parent().height();
    center = { x: width / 2, y: height / 2 };

    svg.attr('width', width).attr('height', height);
    svg
      .select('#bubble-xAxisLabel')
      .attr('x', center.x);
    svg
      .select('#bubble-yAxisLabel')
      .attr('y', center.y)
      .attr('transform', 'rotate(270, 10,' + (center.y - 10) + ')');

    updateVNodes();

    let radius = $('#bubble-size').val();
    let bubble = svg.selectAll('circle').data(vnodes);

    bubble.exit().remove();
    bubble.enter().append('circle')
      .attr('r', radius)
      .attr('stroke', '#ffffff')
      .attr('stroke-width', 2)
      .on('click', function (d) {
        let c = session.data.nodes.find(node => d._id == node._id);
        c.selected = !c.selected;
        $window.trigger('node-selected');
      });

    updateNodeColors();

    var charge = -session.style.widgets['bubble-charge'];
    simulation = d3.forceSimulation().nodes(vnodes)
      .velocityDecay(0.2)
      .force('x', d3.forceX().strength(0.03).x(center.x))
      .force('y', d3.forceY().strength(0.03).y(center.y))
      .force('charge', d3.forceManyBody().strength(d => charge))
      .on('tick', function () {
        svg.selectAll('circle')
          .attr('cx', function (d) { return d.x })
          .attr('cy', function (d) { return d.y });
      });

    groupBubblesX();
    groupBubblesY();
  }

```

--------------------------------

### Initialize and Manage Table View

Source: https://github.com/cdcgov/hantanet/blob/master/components/table.html

Handles column updates, Tabulator instance creation, and event listeners for data interaction and export.

```javascript
(function(){ ga('set', 'page', '/table'); ga('set', 'title', 'Table View'); ga('send', 'pageview'); let table, meta = ['selected', 'visible', 'nn']; function updateColumns(){ if(!$('#table').length) return; let type = $('input[name=table-dataset]:checked').data('value').slice(0,-1); $('#table-columns') .chosen('destroy') .html( session.data[type+'Fields'].map((d, i) => { if(meta.includes(d)) return; return `<option value="${d}"${(i < 7) ? " selected" : ""}>${MT.titleize(d)}</option>` }).join('\n') ) .chosen({'width': 'auto'}) .on('change', updateTable); } function updateTable(){ if(!$('#table').length) return; let data_type = $('input[name=table-dataset]:checked').data('value'); let columns = $('#table-columns').val(); table = new Tabulator("#table", { //height: "calc(100% - 60px) !important", maxHeight: "100%", layout: "fitColumns", columns: columns.map(c => ({title: MT.titleize(c), field: c})), rowClick: function(e, row){ let entity = row.getData(); entity.selected = !entity.selected; if(entity.selected){ $(row.getElement()).css("background", session.style.widgets['selected-color']); row.freeze(); } else { $(row.getElement()).css("background", ""); row.unfreeze(); } $window.trigger('node-selected', 'table'); }, rowFormatter: function(row){ if(row.getData().selected){ $(row.getElement()).css("background", session.style.widgets['selected-color']); } }, dataLoaded: function(data) { var rows = this.getRows(); rows.forEach(function(row){ let entity = row.getData(); if (entity.selected) { row.freeze(); } }); } }); table.setData(session.data[data_type]); addColDelTarget(); resetTextsize(); } function updateData(){ let type = $('input[name=table-dataset]:checked').data('value'); table.replaceData(session.data[type]); } $('#table-settings-toggle').click(function(){ let pane = $('#table-settings-pane'); if($(this).hasClass('active')){ pane.animate({left: '-400px'}, function(){ pane.hide(); }); } else { pane.show(0, function(){ pane.animate({left: '0px'}); }); } }); function resetTextsize(){ let s = $('#table-font-size').val(); $('#table').css({ 'font-size': s + 'px', 'line-height': s/10 }); } function addColDelTarget () { $('.search-choice-close').each(function(i, obj) { obj.innerHTML = '&#x232B'; obj.style.fontSize = 'x-small'; obj.title = 'Remove column'; }); } $('input[name=table-dataset]').on('change', e => { updateColumns(); updateTable(); }); $('#table-columns').on('change', updateTable); $('#table-font-size').on('input', resetTextsize); $('#table-export').click(function(){ let format = $('#export-table-file-type').val(); let data = JSON.parse(JSON.stringify(session.data[$('input[name=table-dataset]:checked').data('value')])); let name = $('#export-table-file-name').val(); if(format == 'csv'){ let blob = new Blob([Papa.unparse(data)], {type: 'text/csv;charset=utf-8'}); saveAs(blob, name + '.' + format); } else if(format == 'xlsx'){ let headers = session.data[$('input[name=table-dataset]:checked').data('value').slice(0,-1) + 'Fields']; data.forEach(thing => { Object.keys(thing).forEach(field => { if(!headers.includes(field)){ delete thing[field]; } else if(Array.isArray(thing[field])){ thing[field] = thing[field].join('; '); } }); }); let wb = XLSX.utils.book_new(); let ws = XLSX.utils.json_to_sheet(data); XLSX.utils.book_append_sheet(wb, ws, name); XLSX.writeFile(wb, name + '.' + format); } else { let blob = new Blob([JSON.stringify(data)], {type: 'application/json;charset=utf-8'}); saveAs(blob, name + '.' + format); } }); $('#table').parent().css('z-index', 1000); $window .on('link-visibility', updateTable) // .on('node-selected', updateData) .on('node-selected', function(event, view) { if (view != 'table') { updateTable(); } }) .on('selected-color-change', updateTable); updateColumns(); updateTable(); })();
```

--------------------------------

### Initialize Map and Layers

Source: https://github.com/cdcgov/hantanet/blob/master/components/geo_map.html

Sets up the Leaflet map instance with basemap and satellite tile layers, and defines data fetching logic for geographic boundaries.

```javascript
(function () { ga('set', 'page', '/geo_map'); ga('set', 'title', 'Geo Map View'); ga('send', 'pageview'); // save existing session styles temp.mapData['map-countries-show'] = session.style.widgets['map-countries-show']; temp.mapData['map-states-show'] = session.style.widgets['map-states-show']; temp.mapData['map-counties-show'] = session.style.widgets['map-counties-show']; temp.mapData['map-basemap-show'] = session.style.widgets['map-basemap-show']; temp.mapData['map-satellite-show'] = session.style.widgets['map-satellite-show']; session.style.widgets['map-countries-show']= true; session.style.widgets['map-states-show']= true; session.style.widgets['map-counties-show']= false; session.style.widgets['map-basemap-show']= false; session.style.widgets['map-satellite-show']= false; if (navigator.onLine) { $('#map').parent().find('.ifOnline').css('display', 'flex'); } var layers = { basemap: L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/light-v9/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoiYWFib3lsZXMiLCJhIjoiY2o4b3QxNmtjMDhwNjMzcno4dDd1NnVraSJ9.BkjEa6NM7o7KeTaTHOaIGg'), satellite: L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/satellite-streets-v9/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoiYWFib3lsZXMiLCJhIjoiY2o4b3QxNmtjMDhwNjMzcno4dDd1NnVraSJ9.BkjEa6NM7o7KeTaTHOaIGg'), nodes: { remove: function () { return null; } }, links: { remove: function () { return null; } } }; var nodes = []; function getMapData(type, callback) { var name = type.split('.')[0]; MT.getMapData(type).then(data => { if (['countries', 'states', 'counties'].includes(name)) { layers[name] = L.geoJSON(data, { color: '#dadde0', weight: name == 'countries' ? 1 : 0.5, fillColor: '#fafaf8', fillOpacity: name == 'countries' ? 1 : 0 }); } if (callback) callback(); }) } var map = L.map('map', { center: [80, 0], zoom: 3, zoomControl: false, maxZoom: 20, preferCanvas: true }); L.control.zoom({ position: 'bottomleft' }).addTo(map); ['lat', 'lon', 'tract', 'zipcode', 'county', 'state', 'country'].forEach(v => { var name = 'map-field-' + v, s = $('#' + name); s.on('change', function (e) { session.style.widgets[name] = e.target.value; matchCoordinates(function () { rerollNodes(); drawNodes(); drawLinks(); resetStack(); }); }); if (session.data.nodeFields.includes(v)) s.val(v); }); function matchCoordinates(callback, norefresh) { if (!norefresh) nodes = MT.getVisibleNodes(); if (session.style.widgets['map-field-country'] !== 'None') { if (!temp.mapData.countries) { getMapData('countries.json', () => matchCoordinates(callback, true)); return; } var val = session.style.widgets['map-field-country']; nodes.forEach(n => { var country = temp.mapData.countries.features.find(c => c.id == n[val] || c.properties.name == n[val]); if (country) { n._lat = country.properties._lat, n._lon = country.properties._lon } }); } if (session.style.widgets['map-field-state'] !== 'None') { if (!temp.mapData.states) { getMapData('states.json', () => matchCoordinates(callback, true)); return; } var sval = session.style.widgets['map-field-state']; nodes.forEach(n => { var state = temp.mapData.states.features.find(s => s.properties.usps == n[sval] || s.properties.name == n[sval]); if (state) { n._lat = state.properties._lat; n._lon = state.properties._lon; } }); } if (session.style.widgets['map-field-county'] !== 'None') { if (!temp.mapData.counties) { getMapData('counties.json', () => matchCoordinates(callback, true)); return; } var sval = session.style.widgets['map-field-state']; var cval = session.style.widgets['map-field-county']; nodes.forEach(n => { var county; county = temp.mapData.counties.features.find(c => { return (c.properties.fips == n[cval] || parseFloat(c.properties.fips) == parseFloat(n[cval])); }); if (county) { n._lat = county.properties._lat; n._lon = county.properties._lon; return; } var state = temp.mapData.states.features.find(s => s.properties.usps == n[sval].toUpperCase() || s.properties.name.toLowerCase().includes(n[sval].toLowerCase())); county = temp.mapData.counties.features.find(c => { var small = n[cval].toLowerCase(); return c.properties.state == state.properties.usps && ( c.properties.name.includes(small) || small.includes(c.properties.name) ); }); if (county) { n._lat = county.properties._lat; n._lon = county.properties._lon; } }); } if (session.style.widgets['map-field-zipcode'] !== 'None') { if (!temp.mapData.zipcodes) { getMapData('zipcodes.csv', () => matchCoordinates(callback, true)); return; } var val = session.style.widgets['map-field-zipcode']; nodes.forEach(n => { var zo = temp.mapData.zipcodes.find(z => z.zipcode == n[val]); if (zo) { n._lat = zo._lat; n._lon = zo._lon; } }); } if (session.style.widgets['map-field-tract'] !== 'None') { if (!temp.mapData.tracts) { getMapData('tracts.csv', () => matchCoordinates(callback, true)); return; } var val = sessio
```

--------------------------------

### Clipboard Initialization

Source: https://github.com/cdcgov/hantanet/blob/master/components/2d_network.html

Initializes ClipboardJS for copying node IDs and sequences. Hides the context menu upon successful copy.

```javascript
let clipboard = new ClipboardJS('#copyID, #copySeq');
clipboard.on('success', hideContextMenu);
```

--------------------------------

### Initialize Network Rendering and Force Simulation

Source: https://github.com/cdcgov/hantanet/blob/master/components/2d_network.html

Configures the D3 force simulation, link rendering, and conditional cluster polygon rendering based on settings.

```javascript
= getVLinks(); let links = svg.select('g.links').selectAll('line').data(vlinks) .join('line') .attr('stroke-width', settings['link-width']) .attr('opacity', 1 - settings['link-opacity']) .on('mouseenter', showLinkTooltip) .on('mouseout', hideTooltip); updateLinkColor(); scaleLinkWidth(); let linklabels = svg.select('g.links').selectAll('text').data(getLLinks()) .join('text') .attr('text-anchor', 'middle') .attr('dy', settings['link-width'] + 2) .text(l => l[settings['link-label-variable']]); let layoutTick = () => { nodes .attr('transform', d => d.fixed ? `translate(${d.fx}, ${d.fy})` : `translate(${d.x}, ${d.y})` ); links .attr('x1', l => l.source.x) .attr('y1', l => l.source.y) .attr('x2', l => l.target.x) .attr('y2', l => l.target.y); if (settings['link-label-variable'] !== 'None') { linklabels .attr('x', l => (l.source.x + l.target.x) / 2) .attr('y', l => (l.source.y + l.target.y) / 2) .attr('transform', l => 'rotate(' + calcAngle(l.source, l.target) + ' ' + (l.source.x + l.target.x) / 2 + ' ' + (l.source.y + l.target.y) / 2 + ')' ); } } let foci = settings['polygons-foci']; let gather = settings['polygons-gather-force']; let fill = settings['polygon-color']; let opacity = 0.4; if (settings['polygons-color-show']) { fill = d => temp.style.polygonColorMap(d.key); opacity = d => temp.style.polygonAlphaMap(d.key); } d3.select('#network g.clusters').html(null); d3.select('#network g.clustersLabels').html(null); let groups = d3.nest().key(function(d) { return d[foci]; }).entries(newNodes).map(function(d) { var key = d.key var values = d.values.map(function(dd){ dd.foci = key; return dd; }) return {'key':key, 'values':values} }); groups = groups.filter(group => group.values.length > 2 && group.key != 'null'); // remove group by empty let groupPath = function(d) { return "M" + d3.polygonHull(d.values.map(function(i) { return [i.x, i.y]; })) .join("L") + "Z"; }; let polygonTextCord = function(d) { return d3.polygonHull(d.values.map(function(i) { return [i.x, i.y]; })); }; let clusters = new Array(groups.length); // The largest node for each cluster. newNodes.forEach(d => { let r = d[foci]; let i = d.foci; if (!clusters[i] || (r > clusters[i].radius)) clusters[i] = d; }) let polygonsTick = () => { newNodes.forEach(function(o, i) { o.y += (clusters[o.foci].y - o.y) * gather; o.x += (clusters[o.foci].x - o.x) * gather; }); nodes.attr('transform', d => `translate(${d.x}, ${d.y})`); links .attr('x1', l => l.source.x) .attr('y1', l => l.source.y) .attr('x2', l => l.target.x) .attr('y2', l => l.target.y); if (settings['link-label-variable'] !== 'None') { linklabels .attr('x', l => (l.source.x + l.target.x) / 2) .attr('y', l => (l.source.y + l.target.y) / 2) .attr('transform', l => 'rotate(' + calcAngle(l.source, l.target) + ' ' + (l.source.x + l.target.x) / 2 + ' ' + (l.source.y + l.target.y) / 2 + ')' ); } d3.select('#network g.clusters').selectAll('path') .data(groups) .attr("d", groupPath) .enter() .insert("path", "circle") .style("fill", fill) .style("stroke", fill) .style("stroke-width", 40) .style("stroke-linejoin", "round") .style("opacity", opacity) .attr("d", groupPath); d3.select('#network g.clusters').selectAll('path') .call(d3.drag() //A bunch of mouse handlers. .on('start', polygonDragStarted) .on('drag', polygonDragged) .on('end', polygonDragEnded)) if (settings['polygons-label-show']) { let g= d3.select('#network g.clustersLabels').text("").selectAll('text') .data(groups) .enter() .append("text") .attr('transform', function (d) { return "translate("+d3.polygonCentroid(polygonTextCord(d))+")"; }) .text(d => MT.titleize("" + d.key)); d3.select('#network g.clustersLabels').selectAll('text').attr("class","WashingT") .call(d3.drag() .on("start", polygonLabelDragStarted) .on("drag", polygonLabelDragged) .on("end", polygonLabelDragEnded)); redrawPolygonLabels(); } } if(settings['polygons-show']) temp.polygonGroups = groups; else delete temp.polygonGroups; let handleTick = d => { if(d) return polygonsTick; else return layoutTick; } force.nodes(session.network.nodes).on('tick', handleTick(settings['polygons-show'])); force.force('link').links(vlinks); force.force('link').distance(settings['link-length']); force.alpha(0.3).alphaTarget(0).restart(); console.log("Network render time:", (Date.now() - start).toLocaleString(), 'ms'); }
```

--------------------------------

### Initialize Map and Event Listeners

Source: https://github.com/cdcgov/hantanet/blob/master/components/choropleth.html

Initializes map functionality and sets up event listeners for map state changes and rendering.

```javascript
ibility', function () { aggregate(true, render); });
layout.on('stateChanged', function () { setTimeout(function () { choropleth.invalidateSize(); }, 80); });
```

--------------------------------

### Initialize d3-force Simulation

Source: https://github.com/cdcgov/hantanet/blob/master/components/pixi.html

Configures and initializes a d3-force simulation for network nodes and links. Includes forces for charge, centering, linking, and collision. Can be set to manual looping.

```javascript
function makeSimulation(data, manualLooping) {
    const simulation = d3.forceSimulation(data.sprites)
        .velocityDecay(0.8)
        .force("charge", d3.forceManyBody().strength(-100).distanceMax(250).distanceMin(80))
        .force("center", d3.forceCenter().x(SCREEN_WIDTH * 0.5).y(SCREEN_HEIGHT * 0.5))
        .force("link", d3.forceLink(data.links).id(d => d.index).distance(80).strength(d => d.value))
        .force("collision", d3.forceCollide().radius(d => d.radius).iterations(2));

    if (manualLooping) simulation.stop();
    return simulation;
}
```

--------------------------------

### Launch Function

Source: https://github.com/cdcgov/hantanet/blob/master/components/files.html

The main launch function that handles file processing, sorting, and potentially other initialization steps. It includes a timeout for a warning message. Uses JavaScript Promises and setTimeout.

```javascript
const launch = async () => {
    temp.messageTimeout = setTimeout(() => {
        $('#loadCancelButton').slideDown();
        alertify.warning('If you stare long enough, you can reverse the DNA Molecule\'s spin direction');
    }, 20000);
    const nFiles = session.files.length - 1;
    const check = nFiles > 0;
    const hierarchy = ['newick', 'matrix', 'link', 'node', 'fasta'];
    session.files.sort((a, b) => hierarchy.inde
```