App State

Overview

The appState object is the central state container for the Network Analysis application. It stores all data, configuration, and cached statistics throughout the application lifecycle.

Defined in app.js:5-42

State Properties

Data Properties

file

File | null

The uploaded Excel file object from the file input

fileName

string

Name of the uploaded file for display purposes

headers

string[]

Column headers extracted from the Excel file’s first row

rows

object[]

Parsed data rows from the Excel sheet, where each row is an object with column headers as keys

sheet

string | null

Name of the selected worksheet when the Excel file has multiple sheets

Column Configuration

originCol

string

Name of the column containing origin/source nodes

destCol

string

Name of the column containing destination/target nodes

weightCol

string

Name of the column containing edge weights. Empty string means automatic counting

originLatCol

string

Name of the column containing latitude coordinates for origin nodes

originLngCol

string

Name of the column containing longitude coordinates for origin nodes

destLatCol

string

Name of the column containing latitude coordinates for destination nodes

destLngCol

string

Name of the column containing longitude coordinates for destination nodes

Processed Data

aggregatedEdges

Edge[]

Processed and aggregated edges with structure:

{
  source: string,
  target: string,
  value: number,    // Sum of weights
  count: number     // Number of rows aggregated
}

uniqueNodes

Set<string>

Set of all unique node names (both origins and destinations)

isValid

boolean

Flag indicating whether the data is valid and ready for visualization

Indices

outIndex

Map<string, Edge[]>

Index mapping source nodes to their outgoing edges for fast lookups

inIndex

Map<string, Edge[]>

Index mapping target nodes to their incoming edges for fast lookups

nodeCoordinates

Map<string, {lat: number, lng: number}>

Map of node names to their geographic coordinates

Sankey Visualization Settings

sankeyTopN

number

default:50

Number of top edges to display in the Sankey diagram

sankeyOriginFilter

string

Filter to show only edges from a specific origin node

sankeyDestFilter

string

Filter to show only edges to a specific destination node

sankeyStats

object | null

Cached statistics for the Sankey visualization:

{
  totalLinks: number,
  totalWeight: number,
  displayedLinks: number,
  displayedWeight: number
}

Network Visualization Settings

networkTopN

number

default:100

Number of top edges to display in the gravitational network

networkOriginFilter

string

Filter to show only edges from a specific origin node

networkDestFilter

string

Filter to show only edges to a specific destination node

networkStats

object | null

Cached statistics for the network visualization:

{
  totalLinks: number,
  totalWeight: number,
  displayedLinks: number,
  displayedWeight: number
}

Map Visualization Settings

mapOriginFilter

string

Filter to show only edges from a specific origin node on the map

mapDestFilter

string

Filter to show only edges to a specific destination node on the map

mapColorCol

string

Column name to use for color-coding nodes on the map

mapLegendFilter

string

Active legend filter for showing specific color groups

mapCostMode

boolean

default:false

Toggle for cost mode: line width = distance × weight

mapStats

object | null

Cached statistics for the map visualization:

{
  nodes: number,           // Number of georeferenced nodes
  displayedLinks: number,  // Links with valid coordinates
  totalLinks: number       // Total links in dataset
}

Usage Examples

Accessing State Properties

// Check if data is valid
if (appState.isValid) {
  console.log(`Loaded ${appState.rows.length} rows`);
  console.log(`Found ${appState.uniqueNodes.size} unique nodes`);
}

// Get aggregated edges
const edges = appState.aggregatedEdges;
const totalWeight = edges.reduce((sum, e) => sum + e.value, 0);

Using Indices for Fast Lookups

// Find all edges going out from a node
const nodeName = "Node A";
const outgoingEdges = appState.outIndex.get(nodeName) || [];

// Find all edges coming into a node
const incomingEdges = appState.inIndex.get(nodeName) || [];

// Calculate total outgoing weight
const totalOut = outgoingEdges.reduce((sum, e) => sum + e.value, 0);

Updating Visualization Settings

// Update Sankey settings
appState.sankeyTopN = 100;
appState.sankeyOriginFilter = "Node A";
renderSankey();

// Update Network settings
appState.networkTopN = 150;
appState.networkDestFilter = "Node B";
renderNetwork();

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

Working with Coordinates

// Check if a node has coordinates
const nodeName = "New York";
if (appState.nodeCoordinates.has(nodeName)) {
  const coords = appState.nodeCoordinates.get(nodeName);
  console.log(`Lat: ${coords.lat}, Lng: ${coords.lng}`);
}

// Count georeferenced nodes
const georefCount = appState.nodeCoordinates.size;
console.log(`${georefCount} nodes have coordinates`);

State Lifecycle

Initialization

State is initialized with empty/default values when the page loads

File Upload

handleFileSelect() populates file, fileName, and sheet

Data Parsing

parseExcelData() extracts headers and rows, sets isValid = true

Column Configuration

User selects columns via UI, triggering handleColumnChange()

Data Processing

processAggregatedEdges() generates aggregatedEdges, uniqueNodes, and indices

Visualization

Render functions use state to generate visualizations and cache statistics

handleFileSelect() - Loads file and initializes state
parseExcelData() - Populates headers and rows
handleColumnChange() - Updates column configuration
processAggregatedEdges() - Generates aggregated edges
buildIndices() - Creates index structures

Core

Overview

State Properties

Data Properties

Column Configuration

Processed Data

Indices

Sankey Visualization Settings

Network Visualization Settings

Map Visualization Settings

Usage Examples

Accessing State Properties

Using Indices for Fast Lookups

Updating Visualization Settings

Working with Coordinates

State Lifecycle

Build docs developers (and LLMs) love

Core

​Overview

​State Properties

​Data Properties

​Column Configuration

​Processed Data

​Indices

​Sankey Visualization Settings

​Network Visualization Settings

​Map Visualization Settings

​Usage Examples

​Accessing State Properties

​Using Indices for Fast Lookups

​Updating Visualization Settings

​Working with Coordinates

​State Lifecycle

​Related Functions

Build docs developers (and LLMs) love

Overview

State Properties

Data Properties

Column Configuration

Processed Data

Indices

Sankey Visualization Settings

Network Visualization Settings

Map Visualization Settings

Usage Examples

Accessing State Properties

Using Indices for Fast Lookups

Updating Visualization Settings

Working with Coordinates

State Lifecycle

Related Functions