Assessment Task: Scalable Network Visualization Web Application

[drtamermansour]

Overview

Students will develop a web application that lets users upload large network files (tab-delimited text or Excel workbooks) and then interactively

Overview

A web application that lets users upload large network files and then interactively query and visualize subgraphs using Cytoscape.js. The main objective is to integrate a visualization library into a Flask-based website while handling errors reported by Cytoscape.js.

Task Breakdown

1. File Input and Integrity Checking

   • Supported Formats: The application must support multiple Network File Formats
   • Error Reporting: the code should attempt to load the file and then handle any output error messages generated by Cytoscape.js. This involves:
     • Capturing error events or messages from Cytoscape.js when the network data does not conform to the expected format.
     • Displaying clear, user-friendly error notifications to inform the user what went wrong (e.g. “Invalid network format: missing source or target column”).

2. Performance and Scalability (Optional)

   • The solution should be designed to be scalable for large files. Therefore, use strategies such as streaming or chunked parsing to process very large files.

3. Network Query and Visualization

   • Query Functionality: The website should allow the user to query for a set of nodes.
   • Subgraph Extraction: From the full network, extract the query nodes along with all directly connected (first-degree neighbor) nodes and edges.
   • Interactive Display: Use Cytoscape.js to display the resulting subgraph interactively in the browser.
   • Layout Options: The Cytoscape.js visualization should offer several layout choices. Allow the user to switch between layout options after the network is loaded.
   • Visualization Panel: The network visualization area should be responsive and interactive, allowing zoom, pan, and layout switching.

4. Technology Stack

   • Use Python with Flask to serve the web application (static HTML/CSS/JS files).
   • Client-Side Processing: All file upload and data processing (parsing, format checking, and subgraph extraction) must be handled entirely in the browser using JavaScript.
   • Visualization Library: Integrate Cytoscape.js to render the network graph.

Deliverables

• Source Code: Complete code for the Flask backend and all client-side JavaScript, HTML, and CSS.
• Documentation: A README explaining the application architecture, libraries used, and instructions for running the application.
• Demonstration: A short video or live demo showing:
  • File upload and validation
  • Querying a set of nodes
  • Interactive visualization with at least two different layout options

[PalashChitnavis]

Assessment Repository