GAME Application Documentation

1. Overview

Name: GAME
Purpose: GAME is an interactive visualization tool for exploring relationships between codes (e.g. PheCodes, genes, or other identifiers) based on pairwise similarity or association weights.

GAME supports two data sources:

  • Local data: preloaded edge tables stored in a PostgreSQL database.
  • Uploaded data: CSV or ZIP files uploaded by the user.

2. Layout and Navigation

The app uses a left sidebar with three tabs:

  • Documentation
    Displays this documentation (from www/doc.md).

  • Input
    Contains data source selection (local data / upload the data), dataset picker or file upload inputs, and the code selection table.

  • Visualization
    The main network visualization is shown in the central body area of the app; this tab is a placeholder reserved for future sidebar controls related specifically to visualization.

The main body of the page shows:

  • A dynamic network view (visNetwork) that updates after you select codes and click Submit.
  • A modal dialog that appears when you click a node, showing detailed information about that node.

A right-side control bar (Settings) allows you to adjust layout and appearance of the network.

3. Workflow

3.1 Choose Data Source

At the top of the Input tab, choose the data source:

  • local data (default)
  • upload the data

Then, click confirm to lock in the data source and path.

3.2 Local Data Mode

Use local data when your edge tables are already stored in the database.

  1. In Input tab, select local data.
  2. In the The local dataset dropdown, choose a dataset.
  3. Click confirm.

After this, proceed to code selection (Section 3.4).

3.3 Upload Data Mode

Use upload mode when your own data.

  1. In Input tab, select upload the data.
  2. Upload the edge table in the Upload the cos data from different datasets (csv/csv.zip) input.
    • Supported formats:
      • A single .csv file; or
      • A .zip file containing a .csv. The app will unzip and read the first CSV.
    • Required columns in the edge CSV:
      • from: source code ID (e.g. PheCode, gene ID)
      • to: target code ID
      • weight: numeric association strength (e.g. cosine similarity)
    • Additional columns are allowed but not required.
  3. (Optional) Upload a dictionary CSV in Upload the description data (csv).
    • Recommended columns:
      • code: id
      • desc: description or name
      • type: code type (e.g. phecode, gene, pathway)
      • inst: instrument
    • Additional useful columns:
      • To Be Updated
    • If you do not upload a dictionary, the app will fall back to the local dict where possible.
  4. Click confirm to validate and cache uploaded data.

The uploaded edge and dictionary tables will then be used for network construction when you select codes and click Submit.

3.4 Selecting Codes and Building the Network

  1. In the Input tab, scroll to the code table:
    • Columns usually include:
      • code: internal identifier (PheCode, gene ID, etc.)
      • desc: textual description
      • inst: instrument
  2. Select one or more codes from the table.
  3. Check the Selected Codes group below the table to confirm your current selection.
    • Use the Unselect button to clear selections.
  4. Click Submit:
    • If there are many edges, a Cutoff slider may appear:
      • This slider lets you keep only edges whose weight is above a certain threshold.
      • When the number of edges is small, cutoff filtering is skipped to keep the full network.

Once edges and dictionary are prepared, the app constructs nodes, applies grouping and hierarchy rules, and generates the network.

4. Network Exploration

After clicking Submit:

  • The central Network view displays an interactive graph:
    • Nodes represent codes.
    • Edges represent associations.
  • Basic interactions:
    • Drag nodes to rearrange.
    • Zoom with the mouse wheel.
    • Hover or click nodes to see details:
      • Code ID
      • Description
      • Group and dataset information

The right-side control bar (Settings) provides options to customize the visualization.

4.1 Layout and Appearance

Controls available in the Settings panel include:

  • Layout: choose the network layout algorithm:
    • layout_nicely
    • layout_with_fr
    • layout_with_kk
    • layout_with_dh
  • Hide the groups: toggle visibility of group-level nodes.
  • Hide the labels: toggle visibility of node labels.
  • Customize node colors:
    • Assign colors to groups.
  • Customize node shapes:
    • Assign shapes to categories or node types.
  • Customize edges:
    • Edge width (edgeswidth)
    • Edge color (edgescolor)
  • Label size sliders:
    • Minimum label size
    • Maximum label size
    • drawThreshold controlling which labels are actually drawn.

6. Tips and Common Issues

  • The network keeps loading for a long time

    • Make sure you clicked Submit after selecting codes.
    • For local data, avoid selecting too many codes at once, especially with very large edge tables.
    • For uploaded data, check that from, to, and weight columns exist and are not all missing.

  • No Cutoff slider appears

    • For small edge sets, the app skips cutoff filtering and shows the full network.

  • The network is empty

    • Verify that the selected codes actually appear in the edge table.

GAME is intended as an exploratory tool; you can freely switch datasets, reselect codes, and adjust visualization settings to discover structure in your data.


Save the data to PARSE DB