Rendering Functions

function renderSankey()

appState.sankeyStats = {
  totalLinks: number,        // Total edges in dataset
  totalWeight: number,       // Sum of all edge weights
  displayedLinks: number,    // Edges shown in diagram
  displayedWeight: number    // Sum of displayed edge weights
}

// Render with default settings
renderSankey();

// Update top-N and re-render
appState.sankeyTopN = 100;
renderSankey();

// Filter to specific origin
appState.sankeyOriginFilter = "New York";
renderSankey();

// Check statistics after rendering
console.log(`Showing ${appState.sankeyStats.displayedLinks} of ${appState.sankeyStats.totalLinks} links`);

function renderNetwork()

appState.networkStats = {
  totalLinks: number,        // Total edges in dataset
  totalWeight: number,       // Sum of all edge weights
  displayedLinks: number,    // Edges shown in graph
  displayedWeight: number    // Sum of displayed edge weights
}

const options = {
  physics: {
    enabled: true,
    barnesHut: {
      gravitationalConstant: -8000,
      centralGravity: 0.5,
      springLength: 250,
      springConstant: 0.02,
      damping: 0.95,
      avoidOverlap: 0.2
    },
    stabilization: {
      iterations: 200,
      fit: true
    }
  }
}

// Edge width scaled from 0.5 to 5
const width = 0.5 + ((edge.value - minEdgeValue) / edgeDelta) * 4.5;

{
  id: edgeIndex,
  from: sourceId,
  to: targetId,
  value: weight,
  width: scaledWidth,
  title: "Source → Target<br/>Referrals: 1,234",
  arrows: 'to',
  color: { color: sourceColor, opacity: 0.6 },
  smooth: { type: 'continuous' }
}

// Render with default settings
renderNetwork();

// Show more edges
appState.networkTopN = 200;
renderNetwork();

// Filter to specific destination
appState.networkDestFilter = "Los Angeles";
renderNetwork();

// Programmatic zoom
if (window.networkInstance) {
  networkZoom(1.5);  // Zoom in 1.5x
  networkZoomReset(); // Fit to view
}

function updateEgoNetwork(panelId)

// Get ego node and its neighbors
const egoName = document.getElementById(`ego${panelId}Dest`).value;
const outEdges = appState.outIndex.get(egoName) || [];
const inEdges = appState.inIndex.get(egoName) || [];

const neighbors = new Set();
outEdges.forEach(e => neighbors.add(e.target));
inEdges.forEach(e => neighbors.add(e.source));
neighbors.add(egoName); // Include ego itself

// Update panel statistics
const neighborCount = neighbors.size - 1; // Exclude ego
const edgesCount = edgesToShow.length;
const totalWeight = edgesToShow.reduce((s, e) => s + e.value, 0);

statsEl.textContent = neighborCount === edgesCount
  ? `Edges: ${edgesCount} · Referrals: ${totalWeight.toLocaleString()}`
  : `Neighbors: ${neighborCount} · Edges: ${edgesCount} · Referrals: ${totalWeight.toLocaleString()}`;

const options = {
  physics: {
    enabled: true,
    solver: 'barnesHut',
    barnesHut: {
      avoidOverlap: 0,
      centralGravity: 0.25,
      damping: 0.45,
      gravitationalConstant: -2800,
      springConstant: 0.02,
      springLength: 150
    },
    stabilization: {
      enabled: true,
      fit: true,
      iterations: 1000
    }
  }
}

// Disable physics after stabilization
net.once('stabilizationIterationsDone', () => {
  net.setOptions({ physics: { enabled: false } });
  net.fit();
});

// Attach to ego network selects
for (let i = 1; i <= 4; i++) {
  const select = document.getElementById(`ego${i}Dest`);
  select.addEventListener('change', () => updateEgoNetwork(i));
}

// Programmatic update
const panel1Select = document.getElementById('ego1Dest');
panel1Select.value = "Chicago";
updateEgoNetwork(1);

function renderMap()

// Calculate distance using Haversine formula
function haversineDist(lat1, lng1, lat2, lng2) {
  const R = 6371; // km
  const toRad = v => v * Math.PI / 180;
  const dLat = toRad(lat2 - lat1);
  const dLng = toRad(lng2 - lng1);
  const a = Math.sin(dLat/2)**2 + 
            Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) * 
            Math.sin(dLng/2)**2;
  return R * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
}

// Calculate line width
const metric = useCost 
  ? haversineDist(from.lat, from.lng, to.lat, to.lng) * edge.value
  : edge.value;
const lineWidth = useCost
  ? 2 + (metric / maxMetric) * 38
  : 4 + (edge.value / maxWeight) * 36;

// Draw invisible hitbox (18px min) + visible line
L.polyline(points, { 
  weight: Math.max(lineWidth, 18), 
  opacity: 0, 
  interactive: true 
}).bindPopup(popupContent);

L.polyline(points, { 
  color: edgeColor, 
  weight: lineWidth, 
  opacity: 0.5, 
  dashArray: '5, 5',
  interactive: false 
});

// Map nodes to color groups
const nodeColorMap = new Map();
appState.rows.forEach(row => {
  const originNode = String(row[appState.originCol] ?? '').trim();
  const colorValue = String(row[colorCol] ?? '').trim();
  if (originNode && !nodeColorMap.has(originNode)) {
    nodeColorMap.set(originNode, colorValue);
  }
});

// Create color scale
const colorGroups = Array.from(new Set(nodeColorMap.values())).sort();
const colorScale = d3.scaleOrdinal()
  .domain(colorGroups)
  .range(colorPalette);

// Click legend item to filter to that group
legendRow.addEventListener('click', (ev) => {
  appState.mapLegendFilter = isActive ? '' : groupName;
  renderMap(); // Re-render with filter
});

// When legend filter active:
// - Show only edges whose TARGET belongs to the group
// - Force all shown nodes to use the group's color
if (legendFilter) {
  const groupNodes = new Set(
    Array.from(nodeColorMap.entries())
      .filter(([n, g]) => g === legendFilter)
      .map(([n]) => n)
  );
  filteredEdges = filteredEdges.filter(e => groupNodes.has(e.target));
}

appState.mapStats = {
  nodes: displayedNodes,           // Markers rendered
  displayedLinks: edgesDrawn,      // Edges with valid coords
  totalLinks: aggregatedEdges.length
};

const missingCoords = totalLinks - displayedLinks;
const statsText = `Georeferenced: ${displayedNodes} nodes · ` +
  `${displayedLinks}/${totalLinks} links` +
  (missingCoords > 0 ? ` (${missingCoords} without coordinates)` : '');

// Configure coordinate columns
appState.originLatCol = "Origin_Lat";
appState.originLngCol = "Origin_Lng";
appState.destLatCol = "Dest_Lat";
appState.destLngCol = "Dest_Lng";

// Render map
renderMap();

// Enable cost mode
appState.mapCostMode = true;
renderMap();

// Color by region
appState.mapColorCol = "Region";
renderMap();

// Filter to specific origin
appState.mapOriginFilter = "New York";
renderMap();

// Check rendering results
console.log(`Georeferenced ${appState.mapStats.nodes} nodes`);
console.log(`Drew ${appState.mapStats.displayedLinks} of ${appState.mapStats.totalLinks} links`);

function switchTab(tabName, sourceEl)

function showTabControls(tabName)

function showStatus(message, type = 'info')