1. Trang chủ
  2. » Luận Văn - Báo Cáo

Luận văn a source code visualization tool for analyzing and highlighting the api calls

72 1 0
Tài liệu đã được kiểm tra trùng lặp

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

THÔNG TIN TÀI LIỆU

Thông tin cơ bản

Tiêu đề A Source Code Visualization Tool for Analyzing and Highlighting the API Calls
Tác giả Nguyễn Đức Thành, Nguyễn Hoàng Cát, Trần Quốc Việt
Người hướng dẫn Dr. Lê Lam Sơn, Ph.D., Ms. Trương Thị Thái Minh, M.Eng.
Trường học Vietnam National University Ho Chi Minh City
Chuyên ngành Computer Science
Thể loại Thesis
Năm xuất bản 2023
Thành phố Ho Chi Minh City
Định dạng
Số trang 72
Dung lượng 6,64 MB

Các công cụ chuyển đổi và chỉnh sửa cho tài liệu này

Cấu trúc

  • 1.1 Motivation (12)
  • 1.2 Goals (13)
  • 1.3 Scopes (13)
  • 1.4 Report Structure (13)
  • 2.1 Definition of API (15)
  • 2.2 Impact of API (15)
  • 2.3 Types of APIs (16)
    • 2.3.1 RESTful APIs (16)
    • 2.3.2 SOAP APIs (16)
    • 2.3.3 JSON-RPC APIs (17)
    • 2.3.4 Library APIs (17)
  • 2.4 API workflow (17)
    • 2.4.1 Library installation (18)
    • 2.4.2 Library import (18)
    • 2.4.3 API documentation (19)
    • 2.4.4 Function invocation (19)
    • 2.4.5 Returned values handling (20)
    • 2.4.6 Error handling implementation (20)
    • 2.4.7 Iteration and Enhancement (20)
  • 3.1 Problem with API usage (22)
  • 3.2 Previous approaches (23)
  • 4.1 API calls extracion (24)
  • 4.2 Software Visualization (25)
  • 4.3 CSApiVisualizer (25)
  • 5.1 System Requirements (27)
    • 5.1.1 General Features (27)
    • 5.1.2 Functional Requirements (28)
      • 5.1.2.1 Analyzer (28)
      • 5.1.2.2 Visualizer (28)
  • 5.3 System modeling (30)
  • 5.4 System Architectures (31)
    • 5.4.1 Overview (31)
    • 5.4.2 Event-driven with service-based architecture (33)
  • 6.1 Overview (36)
  • 6.2 Involved Technologies (37)
    • 6.2.1 Platform (37)
    • 6.2.2 Languages (38)
    • 6.2.3 Libraries (38)
    • 6.2.4 Database (39)
  • 6.3 Implementation detail (40)
    • 6.3.1 Source project parsing (40)
    • 6.3.2 API method call in C# (41)
    • 6.3.3 Web service & Database (45)
    • 6.3.4 API usage visualization (46)
    • 6.3.5 Extension/Plugin for IDE (52)
    • 6.3.6 Go-to-line feature (53)
    • 6.3.7 Administrator page (56)
  • 7.1 Extension installation and startup (58)
  • 7.2 Testing projects (58)
  • 7.3 Results (59)
    • 7.3.1 shadowsocks-windows (59)
    • 7.3.2 pytocs (63)
  • 7.4 Evaluation (67)
  • 8.1 Covered contents (68)
  • 8.2 Future improvement (68)

Nội dung

HO CHI MINH CITY UNIVERSITY OF TECHNOLOGY FACULTY OF COMPUTER SCIENCE AND ENGINEERING REPORT CAPSTONE PROJECT A SOURCE CODE VISUALIZATION TOOL FOR ANALYZING AND HIGHLIGHTING THE API C

Motivation

Application Programming Interface, abbreviated asAPI, is a set of rules or software pro- tocols, and tools that permit different applications to communicate and interact with each other.

An API (application programming interface) defines the methods and data formats that enable applications to request and exchange information In short, an API acts as a linking bridge between two software systems, allowing them to share data and functionality It also sets a defined set of rules that developers must follow to send requests and receive responses from an application or web service, ensuring standardized, reliable communication.

APIs serve as a common language that enables diverse software components to understand and work together, even when they are built with different programming languages or run on different platforms They abstract the underlying implementation details and present a simplified, standardized interface that developers can use without needing to grasp the complexities of the systems they interact with.

API usage today faces several core challenges that developers must navigate to integrate APIs effectively Poor or incomplete documentation, limited functionality, and inconsistent performance often hinder productive implementation, while compatibility problems complicate integration across different platforms and languages Managing API versioning and security vulnerabilities adds further complexity, as backward compatibility must be maintained while APIs evolve With thousands of APIs available and a steady stream of updates, choosing the most reliable and suitable options for a given use case becomes a careful trade-off Taken together, these technical and logistical hurdles shape how developers approach API integration and ongoing maintenance in real-world applications.

To tackle API usage challenges, researchers and practitioners have pursued multiple strategies, including the development and adoption of API management platforms that deliver end-to-end solutions for documentation, testing, monitoring, and security These platforms streamline discovering, integrating, and managing APIs by offering centralized control and visibility, along with features like developer portals, analytics, and versioning to strengthen API governance and foster collaboration between providers and consumers In parallel, standardized API specifications play a key role in interoperability and reduce integration friction across ecosystems.

API specifications such as OpenAPI and GraphQL have gained popularity because they enable better documentation, automatic client code generation, and automated testing As DevOps practices and CI/CD pipelines become central, API testing and monitoring are increasingly integrated into the development workflow, helping to detect issues early and improve overall API quality Together, these approaches streamline API usage and mitigate the challenges developers face.

Goals

This project investigates the challenges and current methods for API usage identification and visualization in source code, highlighting underexplored solutions It introduces CSApiVisualizer, an interactive tool that leverages the NET Compiler Platform API to perform syntactic and semantic analysis of C# source code and to deliver a detailed visualization of API call positions in a codebase, enabling developers to gain actionable insights A web-based version of CSApiVisualizer will be available to help developers understand and track API usage more effectively within their source code The project also seeks to answer key research questions about API usage detection, visualization techniques, and their impact on code comprehension and maintenance.

• Can our approach model a complicated API usage pattern into a dependency graph?

• Can a source code that is currently being written by a software developer can be parsed in real-time?

• Can we efficiently apply an algorithm to identify API usage in source code and visualize it effectively?

• Is the visualization of API usage a potential feature that can significantly enhance devel- opers’ productivity and code maintainability?

• Can the tool adapt well to different C# projects and be beneficial in real-world scenarios?

Scopes

This study centers on C# source code analysis within the NET environment, reflecting its prominence in enterprise software development and open-source projects The CSApiVisualizer tool, developed as part of this project, leverages the NET Compiler Platform API to analyze source code and integrates the D3.js visualization library to present insights We will validate the tool’s performance using several open-source C# projects to demonstrate its practicality and robustness in real-world scenarios.

Report Structure

This eight-chapter report systematically presents the project’s phases, with Chapter 1 introducing the context and defining the project scope, and Chapter 8 providing a concise summary that outlines potential future improvements; a comprehensive, chapter-by-chapter overview follows to organize and clarify the contents of each section.

University of Technology, Ho Chi Minh City

Faculty of Computer Science and Engineering

• Chapter 1: Introduction - This opening chapter lays the groundwork for the study by highlighting the problems with API usage and introduces our approach to address these issues.

• Chapter 2: Theoretical background - This chapter provides a detailed explanation of the reasons behind the study, reinforcing its necessity and potential impact in the field of software development.

Chapter 3, The Problem, identifies the challenges API users commonly face and reviews existing research and implemented approaches in the API space By analyzing these related methods, we articulate our own solution, CSApiVisualizer, highlighting how it addresses gaps, enhances usability, and clarifies complex API interactions for developers.

Chapter 4: Approach covers system modeling and architectural design for the CSApiVisualizer, detailing the logical structure and core functionality of the platform The chapter explains how the CSApiVisualizer is modeled, outlining its architectural components and how they collaborate to support user interactions and integration with other systems.

Chapter 5 outlines our practical methodology for system modeling and design, detailing the technology stack, platform choices, languages, and libraries, and describing the concrete implementation steps, including source project parsing, identification of API method calls in C#, and API usage visualization. -**Support Pollinations.AI:**🌸 **Ad** 🌸 Elevate your C# API projects—[Support our mission](https://pollinations.ai/redirect/kofi) and help us keep AI tools accessible for seamless system modeling and design.

Chapter 6 combines Implementation and Demonstration to deliver a clear, step-by-step walkthrough of how CSApiVisualizer works, featuring screen captures and real-world usage scenarios that illustrate the tool’s capabilities and practical applications for developers.

Chapter 7: Results and Evaluations presents how our tool performs on a curated dataset of selected C# open-source projects, and the chapter systematically evaluates the outputs to determine whether they meet the specified requirements.

Chapter 8, Conclusion and Improvements, synthesizes the work presented in this report by outlining the CSApiVisualizer’s key achievements, candidly noting its limitations, and identifying promising avenues for future enhancements, while providing a clear road map for upcoming improvements and additions to CSApiVisualizer and detailing concrete directions for further research and development to boost functionality, performance, and user experience.

This project structure establishes a logical flow that guides readers from the underlying motivation through the development and demonstration of the tool to a concise conclusion and a forward-looking discussion of potential future improvements.

Capstone Project report, Semester 2, Academic year 2022 - 2023 Page 3/61

This chapter defines Application Programming Interface (API) and provides an in-depth exploration of its key concepts, theories, and working principles, while surveying commonly used API types—RESTful, SOAP, JSON-RPC, and library APIs By establishing a solid theoretical foundation, the discussion enhances understanding of our approach and its underlying principles and highlights how APIs enable modular, scalable integrations.

Definition of API

Application Programming Interface, abbreviated asAPI, is a set of rules or software pro- tocols, and tools that permit different applications to communicate and interact with each other.

An API defines the methods and data formats that enable applications to request and exchange information, acting as a bridging link between software systems By establishing a standardized set of rules and protocols, APIs let developers send requests and receive responses from web services or applications, facilitating data interchange and the reuse of functionality across platforms.

APIs act as a universal language that enables diverse software components to understand and work together, even when they’re built with different programming languages or run on different platforms They hide the underlying implementation details and expose a simplified, standardized interface that developers can use to integrate systems without needing to master their internal complexities, promoting interoperability and seamless software collaboration.

Impact of API

API usage has become a cornerstone of modern software development, transforming how applications connect, exchange data, and expose functionality APIs act as intermediaries that enable communication and resource sharing between diverse software systems, regardless of their architecture, programming language, or platform Their adoption spans multiple domains, making APIs a fundamental element of the software development landscape and a key driver of interoperability and cross-system integration.

Since the advent of APIs, they have transformed how developers build applications Instead of maintaining a sprawling monolithic codebase, developers now structure software using internal or external libraries that expose public-facing APIs This shift reduces the need to reinvent the wheel, enabling code reuse, faster development cycles, and more modular, maintainable architectures Public APIs also empower easier integration with third-party services, improve collaboration across teams, and foster vibrant ecosystems around a platform To maximize these benefits, API design should emphasize clear documentation, stable versioning, robust security, and consistent behavior across endpoints.

University of Technology, Ho Chi Minh City

APIs (application programming interfaces) enable modular, scalable software by treating applications as collections of independent components and reusable services This design allows features to be added, replaced, or removed without affecting other components, so products can rapidly adapt to changing user needs Well-documented, versioned interfaces abstract the complexity of underlying systems, letting developers focus on application logic rather than implementation details, while API providers maintain updates that can be adopted without rewriting code In short, APIs simplify development and maintenance, keep applications up-to-date, and improve reliability and flexibility.

Types of APIs

RESTful APIs

Representational State Transfer (REST) or RESTful APIs define an interface that enables two computer systems to securely exchange information over the Internet This architectural style guides the design of networked applications and web services that communicate over HTTP and exchange data in standardized formats like JSON or XML RESTful APIs are stateless, scalable, and compatible with various programming languages and platforms, offering a simple, uniform approach to building web services and enabling seamless integration across diverse software applications.

SOAP APIs

SOAP, short for Simple Object Access Protocol, is an XML-based messaging protocol used to exchange structured information between networked applications Compared to RESTful APIs, SOAP APIs adhere to a more formal, contract-based architectural design.

SOAP provides a rigorous framework for building and consuming web services, making it well-suited for enterprise-level integrations Its strength lies in comprehensive support for diverse data types and robust error handling, with precise definitions of input and output parameters, including data types, enabling complex business operations The standardized approach to errors and exceptions in SOAP ensures consistent, well-defined error messages across services However, SOAP can be more complex to implement and incurs additional processing overhead due to its XML-based message structure, and it typically carries a steeper learning curve and more setup and configuration requirements than RESTful APIs.

Capstone Project report, Semester 2, Academic year 2022 - 2023 Page 5/61

JSON-RPC APIs

JSON-RPC is a lightweight API protocol that enables client-server communication using JSON (JavaScript Object Notation) It defines a simple remote procedure call model in which clients send JSON-RPC requests to a server over HTTP or other transport protocols and receive JSON-RPC responses after the server executes the requested operation Designed for simplicity and efficiency, JSON-RPC supports a wide range of programming languages and architectures, making it ideal for building APIs in web services, microservices, and distributed systems, and providing a standardized, language-agnostic way for disparate software components to exchange structured data and achieve interoperability.

Library APIs

Library APIrefers to the Application Programming Interface exposed by a software library.

A software library is a collection of pre-compiled code and resources that provide specific functionalities, utilities, or tools for developers to use in their software applications The library API defines the set of functions, classes, methods, and data structures that developers can call to interact with the library’s capabilities and integrate them into their own code.

The Library API serves as a contract between the library and the developer’s application, outlining how the library’s functionalities are accessed, invoked, and manipulated The API documentation details the available functions, their parameters, return types, and usage guidelines, enabling developers to understand how to leverage the library effectively.

Using a library API lets developers leverage pre-built functionality, saving time and effort by avoiding the need to implement complex algorithms, manage low-level tasks, or access specialized resources from scratch By abstracting the underlying implementation details, library APIs provide a simplified, standardized interface that simplifies integration, promotes code reuse, and accelerates development across projects.

Library APIs span many programming languages and domains, offering capabilities such as data manipulation, mathematical operations, networking, graphics, database access, and user interface components Their availability—especially when APIs are well-designed and well-documented—significantly enhances software development productivity and efficiency In practice, developers rely on built-in or external libraries to perform tasks faster, meaning they’re effectively working with a library API rather than coding from scratch.

Note: From this part of the report, Application Programming Interface refers to the LibraryAPI.

API workflow

Library installation

Developers must identify the library that provides the functionality they need for the project, and most libraries are available for download or installation via package managers or from the library’s official website, with installation guided by language- or environment-specific instructions For example, the API library interface on NuGet—the package manager site for C# libraries—highlights the library name and the command to install it via the command line interface, illustrating the standard process to add an API library to a project.

Figure 2.1: Interface ofMicrosoft.CodeAnalysislibrary onhttps://www.nuget.org/

Library import

Once a library is installed in a project, you need to import or include the required files or dependencies The exact syntax varies by programming language or framework, but the import or include statement makes the library’s functions, classes, or modules available to your source code.

Capstone Project report, Semester 2, Academic year 2022 - 2023 Page 7/61

In the provided example, we are importing 3 different C# library APIs, which areCefSharp,System.Collections,Microsoft.CodeAnalysis.

API documentation

Before diving into the library API after importing, take time to study the API documentation The documentation details the available functions, their parameters, return values, and practical usage examples, helping you understand how to interact with the library and use its features effectively You can usually find the documentation on the API developers’ website, as illustrated in Figure 2.2 [11], [12].

Figure 2.2: The documentation page for IOrganizationService.Disassociate()API, use to disassociate the link between records in Microsoft Dataverse system.

Function invocation

Once the initial setup is complete, you can invoke the library’s API by calling its functions, classes, or methods to access the desired functionality, and you should pass any required parameters to tailor the behavior according to the API specification, which is detailed in the official documentation or can be quickly confirmed through IntelliSense.

The example demonstrates the usage of a Queue data structure in C# language The first line is a using directive that imports the namespace System.Collections, which contains

University of Technology, Ho Chi Minh City

In the Faculty of Computer Science and Engineering, the Queue class is defined The subsequent lines declare a new Queue instance named myQ and enqueue the string "Hello" to the end of the queue, illustrating a basic queue operation of inserting an element at the tail.

Returned values handling

An API function call returns values that must be captured and processed in your source code Depending on the library, API return values may be simple data types, complex objects, or error codes and exceptions To achieve the intended outcome, you need to handle these return values correctly—validate their type, interpret error codes, catch exceptions, and implement the appropriate follow-up actions within your program.

2 // Continue from the previous example snippet

Continuing from the previous example, we assign the value returned by myQ.Dequeue() to a variable named value, ensuring that value holds the object removed from the queue This demonstrates how Dequeue() retrieves the front item and updates the queue, with value capturing the dequeued object for subsequent processing.

Error handling implementation

Beyond the expected results, many libraries provide error handling mechanisms, including exceptions and error codes, as noted earlier Developers should implement robust error handling to gracefully manage exceptions or error conditions returned by the library's API This entails catching exceptions, checking error codes, and taking appropriate corrective actions to recover from failures and maintain software reliability.

2 // Continue from the previous example snippet

We attempt to dequeue another item frommyQas above However, this will throw an excep- tion of classInvalidOperationExceptionas we are trying to dequeue an item queue.

It is then the responsibility of the developers to handle them, otherwise it might unexpectedly break the software.

Iteration and Enhancement

Developing with a library API follows the standard software lifecycle of ongoing updates and enhancements Stay tuned to official announcements for new releases and changes, and periodically check for version updates, bug fixes, and feature improvements Be aware of potential deprecations or obsolescence that could affect your integration and plan accordingly.

Capstone Project report, Semester 2, Academic year 2022 - 2023 Page 9/61

Figure 2.3: Example of API that is marked withObsoleteattribute in C#

This chapter identifies the core issues driving the project, outlining the key problems in the domain and why they demand a new solution We assess the limitations and gaps in existing approaches, showing how current methods fall short in addressing these challenges By detailing these difficulties, we establish the context for the following chapters that will present our novel approach and proposed solution This setup clarifies the rationale for the project and signals the path toward an implementable, evidence-based strategy.

Problem with API usage

APIs offer valuable benefits for code reuse and maintainability, but developers still face several challenges when integrating them A public-facing API often exposes multiple methods to handle closely related tasks, and the difficulty lies in recognizing the right methods instead of blindly importing a different API In large-scale projects, this can lead to longer compilation times and degraded execution performance To mitigate these issues, robust monitoring and fallback mechanisms should be implemented to detect failures and support alternative integration options.

Additionally, API customization can fall short when APIs don’t offer enough options to meet specific application requirements Developers may encounter constraints related to data formats, available endpoints, and supported operations, which can slow down development and hinder overall performance.

Insufficient or inadequate API documentation remains a major challenge, since not all APIs come with clear, complete explanations for correct usage, leaving developers with ambiguous guidance Some APIs suffer from explanations that are either too general or too specific, making it hard to implement correctly In the fast-changing software landscape, many APIs become obsolete or are introduced after obsolescence, and some are replaced without developers realizing it, complicating maintenance and integration Additionally, many APIs are complex and demand a solid grasp of underlying concepts, protocols, and input/output data, so mastering a new API can require substantial time and effort, particularly when there are few practical examples or tutorials.

As APIs evolve, newer versions may introduce backward-incompatible changes that can cause compatibility issues, with existing applications or integrations potentially breaking when updates are deployed To mitigate this risk, developers should implement clear API versioning strategies and ensure their code remains compatible with the targeted API versions.

Public API stability, even for a limited or rate-limited API, directly affects the performance and availability of applications that depend on it When an API experiences frequent downtime, performance issues, or changes without advance notice, the dependent applications can have disrupted functionality and degraded user experiences, underscoring the need for reliable uptime, timely change notices, and thoughtful versioning to protect downstream systems.

11 tions and negatively affect user experience.

In enormous codebases, developers often spend substantial time diagnosing API call failures when a database connection opened via System.Data.SqlClient.SqlConnection.Open() fails to establish Tracing the erroneous Open() invocation across a sprawling project from the program's entry point [23], [24] becomes the challenging task.

Previous approaches

There have been multiple approaches that target the problem related to API usage, and this section is dedicated to their brief descriptions.

MAPO is an Eclipse plugin designed to mine API usages from open-source repositories by collecting code snippets from popular online code search tools It integrates with the Eclipse IDE and uses data mining techniques to reveal how APIs are actually used in real-world projects By analyzing open-source codebases, MAPO helps developers discover common API usage patterns, identify best practices, and spot potential pitfalls and anti-patterns.

CodeAtlasVSix is a code visualization extension for Visual Studio 2012–2017 that lets developers explore code more efficiently It uses Doxygen to parse source code and supports languages such as C/C++, Python, Java, and C#. -**Support Pollinations.AI:**🌸 **Ad** 🌸 Enhance your coding workflow with CodeAtlasVSix—discover smarter code visualization for C/C++, Python, Java, and C# in Visual Studio! [Support our mission](https://pollinations.ai/redirect/kofi) to keep AI accessible for everyone.

ExPort is a tool designed to detect and visualize API usages within large source code repositories It uses advanced code analysis techniques to identify and extract API invocations across the codebase, revealing the relationships between API methods and their usage patterns By analyzing these patterns, ExPort provides developers with actionable insights into how APIs are employed in real-world software projects The tool includes a visual interface with comprehensive, interactive visualizations that enable developers to explore and understand complex API usage patterns.

Apatite is an online code search tool that helps developers find the right utility methods among thousands of options by letting them browse APIs through the connections between components It also offers enhanced search granularity, returning results at the package, class, and method levels The tool builds its association rules by analyzing the first 100 results retrieved from Yahoo! search.

1 https://github.com/league1991/CodeAtlasVsix

This chapter presents CSApiVisualizer, our tool discussed in this report, and outlines the central motivation—enhancing source code API calls analysis within the broader domain of software visualization It explains how a clear framework for our approach supports systematic examination of API usage and visualization techniques, while showcasing CSApiVisualizer’s potential to address key challenges in API analysis, code comprehension, and visual analytics, thereby demonstrating its effectiveness and practical value for developers and researchers alike.

API calls extracion

To illustrate the challenge of identifying API calls within source code, we present a simple scenario that highlights the relationship between a user-defined method and calls to an external library (API) In practice, a developer implements a user-defined helper function that can contain several API invocations, as depicted in Figure 4.1.

Figure 4.1: Example of 2 method calls in a source code, namelyProgram.cs.

In the illustrated sample, the source file Program.cs contains two method invocations: PrintResult() and WriteLine() PrintResult() is a user-defined method that, inside its body, calls two external API methods—Sleep() and WriteLine()—which come from the NET libraries (System.Threading and System) as shown by the blue UML package annotations The remaining WriteLine() is identical to the earlier call, and in the diagram the Line markers merely indicate where these calls appeared in the original source code.

The goal of our tool is to only extracting all the API method calls (colored in green in the

Figure 4.1 shows how a user-defined method, highlighted in yellow, is distinguished from all C# source files within a solution, with further explanation provided later In addition to the method name and its line of code, the retrieval also includes relevant metadata such as the containing library, a description, and annotations (obsolete/deprecated or usable) The API usage data are then visualized as a dependency graph, as depicted in Figure 4.2.

Figure 4.2: The graph visualization of the example from Figure 4.1.

Software Visualization

Software visualization has emerged as one of the most prominent methods for visualizing API call usage As software systems grow in complexity and the demand for efficient, reliable development rises, visualization techniques enhance comprehension, analysis, and communication among software professionals Software visualization refers to the use of visual representations and techniques to understand, analyze, and communicate various aspects of software systems It involves transforming complex artifacts—such as source code, system architectures, and execution data—into visual forms that are easier to understand, explore, and manipulate.

Software visualization aims to improve human understanding of software systems by making their structure, behavior, and relationships visible to developers, designers, and other stakeholders By turning complex architectures into visual representations, it supports software comprehension and accelerates debugging, performance analysis, and maintenance Visual tools reveal dependencies, workflows, and bottlenecks, empowering teams to make informed decisions and optimize system performance In short, effective software visualization bridges the gap between concept and implementation, turning intricate code into actionable insights for everyone involved.

CSApiVisualizer

CSApiVisualizer is a source code visualization tool that analyzes and highlights API usages, helping NET developers—especially those working with C#—quickly identify where API calls occur in their code This interactive visualization solution provides clear, contextual views of how APIs are invoked across the project, making it easy to pinpoint API calls within source files Designed for the NET ecosystem, CSApiVisualizer helps teams understand dependencies, usage patterns, and hotspots, improving code quality and maintainability It integrates with C# projects to generate intuitive call graphs, references, and usage analytics, empowering developers to debug, refactor, and audit code more efficiently By turning complex API interactions into actionable visuals, CSApiVisualizer accelerates development, collaboration, and oversight for modern NET applications.

At first, it analyzes C# source code in a solution with the help of NET Compiler Platform API.

Using modular analysis, we perform both syntactic and semantic analysis of the source code The tool extracts all method calls and determines whether each call is an API call or not After the analysis, the results are serialized into multiple JSON objects that encode link-node relationships and enclosure structures.

University of Technology, Ho Chi Minh City

This article outlines the hierarchy and statistics framework for the Faculty of Computer Science and Engineering, detailing how data is sent to a JSON server via HTML POST requests The server handles data storage and renders interactive graphs, employing the D3.js library to generate an API usage graph along with its associated tracking information, as well as additional statistical visualizations.

For the purpose of prototyping, we will test our work on several open source projects written in C# Programming Language.

Capstone Project report, Semester 2, Academic year 2022 - 2023 Page 15/61

This chapter provides a comprehensive overview of the key components related to system requirements, use case diagrams, architectural design, and modeling in the context of the report.

It outlines the fundamental aspects that need to be considered for the successful development and implementation of the system.

System Requirements

General Features

G01 The currently opening Visual StudioSolutioncan be detected.

G02 The system can analyze and extract the API usage from the source code of currentSolution.

G03 API usages will be serialized into a standard data format, which is JSON, to be exchanged between major components of the system.

G04 Data visualization techniques are used to depict the API usage.

G05 A JSON server is available for exchanging JSON data, hosting and rendering to graph view.

G06 The result view can be seen on a tool window of Visual Studio plugin/exten- sion or on a web browser.

G07 The result graph can be seen in link-node relationships, enclosure hierarchy and statistics.

G08 Administrative side to manipulate previous JSON data is provided.

University of Technology, Ho Chi Minh City

Faculty of Computer Science and Engineering

Functional Requirements

A01 The analyzer is built-in with IDE.

A02 The analyzer can recognize whether source code is written in C# program- ming language before analyzing.

A03 The Syntactic analyzer can analyze and return a syntax tree for the subsequent

A04 The Semantic analyzer can analyze and extract a list of API calls.

A05 Any compiler error can be identified early to halt the analysis process.

A06 The finalized output is in JSON format.

V01 The output graph is displayed on a web page.

V02 The output graph is interactive.

V03 Users can filter graph nodes based on project files

V05 Users can click on nodes to display extra information.

S01 Analyzer and Visualizer run as different services.

S02 Data insertion and selection are allowed when requested by server.

S03 IDE will place the cursor on API usage lines when the users click on Go-to- line button in the embedded web browser.

S04 An admin dashboard is available for ease of control and testing.

S05 Previous JSON result can be deleted manually in admin dashboard.

N01 The tool window of the plugin in Visual Studio is displayed on click within 3 seconds.

N02 The time for JSON data to reach the server must be done within 10 seconds, otherwise stop the process.

N03 Approximately 100,000 JSON entries can be stored on the server, for up to

N04 The server downtime should not extend any longer than 30 minutes.

N05 The average frame per second (FPS) for the graphical presentation is higher than 30.

N06 The web interface should not have any visible lag.

Capstone Project report, Semester 2, Academic year 2022 - 2023 Page 17/61

Use case diagrams visualize the system’s behavior from the perspective of its users, helping stakeholders understand how the system will be used in practice This article explains the process of creating use case diagrams that depict the interactions between the system’s actors—such as the end-user, Analyzer, and IDE modules—and the related use cases By mapping these interactions, use case diagrams clarify system functionality, define system boundaries, and facilitate effective communication among stakeholders, ensuring everyone shares a common understanding of the intended behavior.

An overview use case diagram of CSApiVisualizer can be seen in Figure 5.1, with 3 main actors,

4 main use cases and its extension for the user actor.

Figure 5.1: An overviewUse case diagramofCSApiVisualizer

University of Technology, Ho Chi Minh City

Faculty of Computer Science and Engineering

System modeling

Capstone Project report, Semester 2, Academic year 2022 - 2023 Page 19/61

Figure 5.2 shows the activity diagram of the system, which is divided into 4 swimlanes to represent the corresponding actors.

The UI lane represents the web browser view, and in the final steps of the workflow it renders the graph view from the JSON server It also enables users to trigger the Go to line event, sending the selected API node data back to the IDE for seamless navigation.

IDE lane (TheIDElane) serves as the starting point of the activity diagram, encapsulating the editor environment It detects the Visual Studio solution to traverse every source code file, parses them into the Analyzer, and reports any resulting errors in the source code In a later step, the IDE lane subscribes to the Go to line event emitted by the UI lane and uses the editor interface to position the cursor precisely at the API usage line in the source file.

The Analyzer lane houses a source code analysis library and our API extraction model, capable of detecting syntax and semantic errors and terminating the program with a notification returned to the IDE If no errors are detected, the flow moves to the API call extraction model to separate external API method calls from internal method calls, including symbols declared implicitly The processed results are then sent to the server as a request for data storage and visualization.

Server Lane presents an entire server as a web service, enabling data exchange through standard HTML POST and GET requests, and it can generate API visualization graphs that are displayed on the user interface These capabilities make Server Lane a robust platform for building API-driven applications, offering clear, interactive visualizations of APIs directly within the UI while supporting seamless backend communication.

System Architectures

Overview

System architecture styles, or architectural design, describe the overarching structure of a software system—the way components such as the user interface and back-end environments are organized and deployed, whether as a monolithic application or as independently deployed services Understanding the trade-offs of these architectures helps architects choose the right approach to a given business problem, balancing factors like scalability, reliability, development speed, and maintainability.

Software systems commonly employ several architecture styles to structure functionality and enable scalability: Layered architecture divides the system into well-defined layers, each responsible for specific functionality to promote modularization and abstraction; Pipeline architecture processes data sequentially, with each stage performing a distinct operation before passing the data to the next stage; Microkernel architecture isolates the core system functionality from optional services, providing flexibility and extensibility; Service-based architecture (SOA) emphasizes loose coupling and reusability by organizing the system into self-contained services that communicate through clearly defined interfaces; Event-driven architecture centers on the flow of events and messages between components, supporting scalability and responsiveness; Orchestration-driven architecture focuses on central coordination and management of services to implement business processes; and Microservices architecture decomposes the system into small, independent services that can be developed, deployed, scaled, and updated independently.

University of Technology, Ho Chi Minh City

Within the Faculty of Computer Science and Engineering, architecture styles can be deployed and scaled independently, providing flexibility, fault isolation, and scalable performance Each architecture style offers unique benefits and trade-offs, empowering developers to choose the most suitable approach for their specific software system and project requirements.

Capstone Project report, Semester 2, Academic year 2022 - 2023 Page 21/61

Event-driven with service-based architecture

Figure 5.3: TheEvent-driven architecturecombined with theService-based architectureof

University of Technology, Ho Chi Minh City

Faculty of Computer Science and Engineering

For this project, the Event-driven architecture with broker topology and Service-based architectureis jointly applied This architecture pattern utilizes the strengths in performance, scalability, evolutionary, and modularity.

Figure 5.3 presents the system's architectural view, highlighting an initiating Start Visualizing event that kicks off six event processors—Source Parser, Source Analyzer, IDE, JSON Server, Code Graph Visualizer, and Embedded Browser These components communicate through event processing, with each event represented as a blue cylinder bearing an arrow, illustrating the flow of data and coordination across the architecture.

- The initiating event generates avisualize-request-sentprocessing event to the parser and adisplay-uievent to the IDE.

The Source Parser event processor includes an Environment parser component that listens for requests and initiates parsing of the solution-project-source hierarchy If parsing fails, it sends a parsing-failed event to the IDE; if parsing succeeds, it carries the results and emits a parsing-completed event to the Source Analyzer processor for further analysis.

- TheIDEevent processor is in fact an actor for extension’s main view, contains aExten- sion view to display the Embedded browser with controllers, anError information to display any acknowledged error, and a Go-to-line event listener to handle and exactly place the cursor on API usage line once the event is triggered At first, this processor is also expected to fire an initialize-browser event to create an instance of the embedded browser.

- The Source Analyzer event processor contains 3 components that work sequentially:

Source code analyzer, API call extraction model, andJSON processor The compo- nents aim to analyze the source code files, extract invoked API methods and serialize them into a JSON object It then sends the serialized JSON result through thejson-result- postedevent to theJSON Server On the other hand, theanalysis-failedevent would be sent to theIDEprocessor if it failed.

JSON Server is designed as a service-based architecture for event processing, acting as an intermediary between the Source Analyzer and downstream components It implements an API Layer between itself and the Source Analyzer, permitting only standard HTML POST requests to ensure secure data transfer The server connects to a Database system to store all JSON data received from the Analyzer, enabling reliable persistence and retrieval Its core components—User Management, Logger, and JSON Processor—work together to manage access, track activity, and process incoming JSON payloads.

+ UserManagement enables an authentication feature to view the history of saved JSON data.

+ Loggerperforms a query to save data to theDatabaseon visualization events.

+ JSON processorfinally sends the latest JSON data toCode Graph Visualizervia adata-sentprocessing event.

- TheCode Graph Visualizerevent processor mainly depends on the work of theGraph rendering libraryto get a dynamic and interactive graph from the received JSON object.

Whether an operation succeeds or fails, the system returns the result to the IDE for notification or displays the rendered graph via a visualization-result event, and it can optionally trigger a reload or fetch a newer JSON data payload if the user navigates between pages on the website.

Capstone Project report, Semester 2, Academic year 2022 - 2023 Page 23/61

Embedded Browser hosts the Web View, which is fetched from a running web service to render the computed API dependency graphs, and includes a Go-to-line event trigger component that sends go-to-line events back to the IDE for seamless navigation from the visualized graph to the source code.

This chapter bridges design and development by detailing the realization of the system from established requirements, design specifications, and modeling artifacts It provides a comprehensive overview of the strategies, methodologies, and processes used to translate the conceptual design into a functional, robust system The section outlines the general steps, the technology choices that keep the architecture lightweight, and a detailed, step-by-step implementation plan to ensure the project aligns with its goals and objectives.

Overview

The project was implemented by developing a visualization tool as an extension for an Integrated Development Environment (IDE) In summary, the development follows a six-step process, with two optional steps exclusive to the workflow.

1 The user opens the tool window in the IDE, then clicks on theVisualizebutton to start the analysis step.

2 The hierarchy of currently opening Solution is detected and passed to the Analyzer.

The analyzer module first checks for syntactic and semantic errors and halts the process if any issues are detected If no errors are found, it proceeds to the analysis and modeling of the source code and then transmits the results to the JSON server.

When the IDE produces a result, the JSON server captures it and saves a JSON data record to the database The newly added record is then used as the input for the data visualization module, enabling up-to-date visual representations of the latest data This seamless pipeline links IDE output, persistent storage, and visualization, ensuring dashboards reflect the most recent results.

5 The visualizer module receives the input and renders the graph.

6 The result graph is displayed on the tool window.

7 (Optional) After clicking on an API node, the user can trigger an event that sends the usage information of that API back to the IDE.

8 (Optional) The IDE listens to the event, receives the API information and precisely places the working cursor on that API usage line with a configured horizontal offset.

Involved Technologies

Platform

CSApiVisualizer is developed as a plugin/extension for the Visual Studio IDE, using the Visual Studio Integrated Extension (VSIX) development package After the extension is completed and deployed, users can install it easily from the Visual Studio Marketplace or by running the installer.

Results are displayed in an interactive Tool window dedicated to the Visual Studio IDE, which can be dragged anywhere on the screen or across multiple monitors The window can flexibly dock as a viewport or as a tabbed document, and it contains an embedded web browser to render the graphical result, enabling users to navigate and manipulate the tool with ease This functionality is powered by the Chromium Embedded Framework (CefSharp).

The result is displayed in an embedded web browser view powered by CefSharp 2, a lightweight NET wrapper around the Chromium Embedded Framework, the open-source version of Google Chrome CefSharp makes it easy to embed a full-featured, standards-compliant web browser into a NET application, enabling seamless in-app browsing.

C# app, and also provides browser controls for WinForms and WPF. c Web browser

Results can be viewed in the embedded web browser and can also be accessed directly from a standard browser such as Microsoft Edge or Google Chrome Performance in a normal browser is generally better than in the embedded version, but the Go-to-line feature does not work in the standard browser This discussion also covers Django, illustrating how browser compatibility and web development workflows interact with the Django framework.

Django 3 is a high-level Python web framework that encourages rapid development and clean, pragmatic design It follows the model-template- view (MTV) architectural pattern Django simplifies the process of de- veloping complex web applications It provides tools and functionalities to handle routine web development tasks, enabling developers to focus on application logic rather than boilerplate code Django also takes security seriously and helps developers avoid common security mistakes.

Django is the primary web framework used to render a server-side web service in this project Users can POST JSON data to a designated URL, and Django processes the payload with a view function, optionally interacting with the database, before returning a response The processed data is placed into a context dictionary and passed to a Django template, which embeds JavaScript that uses D3.js to render an interactive graph based on the data.

University of Technology, Ho Chi Minh City

Faculty of Computer Science and Engineering

Languages

Within the analyzer module, analysis is performed using C# 4 on source code written in the same language, leveraging the NET Compiler Platform SDK, commonly called the Roslyn Compiler API, for robust source-code analysis C# is a general-purpose, high-level programming language that supports multiple paradigms, including static and strong typing, lexical scoping, and imperative, declarative, functional, generic, object-oriented (class-based), and component-oriented programming This combination enables comprehensive code analysis, tooling, and refactoring capabilities directly on C# projects.

To build a basic website platform, developers typically rely on the classic web development stack—HTML, CSS, and JavaScript—paired with Django, a robust server-side framework, to handle backend logic, data management, and dynamic content rendering.

HTML, short for HyperText Markup Language, serves as the foundational language for structuring content on the web It conveys the meaning and organization of web pages by employing a core set of elements and tags to annotate content—such as text, images, and other media—so browsers render pages correctly and search engines understand their structure.

JavaScript is a high-level, interpreted programming language that powers interactive web pages As a primarily client-side language, it runs in the user’s browser and interacts with the Document Object Model (DOM) to drive dynamic, responsive experiences JavaScript updates HTML and CSS in real time and supports asynchronous data fetching, storage, and manipulation from the server, enabling faster, more engaging web applications.

CSS, or Cascading Style Sheets, is the language used to describe the look and formatting of HTML documents, enabling developers to separate design from content It enhances the appearance and usability of web applications by controlling layout, typography, color, and responsiveness across devices With a single CSS file, designers can apply consistent styling to multiple pages, save time on maintenance, improve accessibility, and ensure screen-size adaptability—making CSS a foundational tool in modern web development.

In our project, HTML templates render the views, JavaScript communicates with Django by sending and receiving JSON data through AJAX to update the page dynamically, Bootstrap provides the styling for a responsive UI, and Python handles the backend logic.

Additionally,Python 5 is used to develop the Django server.

Libraries

Given the task of reading the source code, analyzing and extracting the API usage, the

Roslyn Compiler API 6 in NET allows the feature to extract and traverse through the source solution-project-file collection.

4 https://learn.microsoft.com/en-us/dotnet/csharp/

6 https://github.com/dotnet/roslyn

Capstone Project report, Semester 2, Academic year 2022 - 2023 Page 27/61

During the analysis phase, the Roslyn Compiler API unlocks powerful syntactical and semantic analysis to verify code correctness, understand the meaning and usage of every symbol, and retrieve information about the containing library or API calls once the extraction model is applied This enables precise code comprehension, improved code intelligence, and accurate mapping of dependencies and API references The article also covers Data-Driven Documents (D3.js) as a visualization tool that turns the collected data into interactive visuals, illustrating symbol relationships, API usage patterns, and library connections to support deeper insights and decision-making.

D3.js 7 is a JavaScript library that enables dynamic, interactive data visualization in web browsers As an open-source tool for manipulating data-driven documents, it provides powerful visualization components and built-in functions to select graphical elements, generate SVG objects, apply styling, and implement transitions, dynamic effects, and tooltips.

Database

To store all JSON data and authentication information, this project relies on PostgreSQL 8 PostgreSQL, or Postgre for short, is an open-source database celebrated for its reliability, flexibility, and adherence to open technical standards.

University of Technology, Ho Chi Minh City

Faculty of Computer Science and Engineering

Implementation detail

Source project parsing

This project aims to develop a Visual Studio extension to streamline NET development with C# In Visual Studio, a Solution (.sln) acts as a logical container that wires together one or more Projects and manages their dependencies Each Project holds resources, source code files, and configuration data Although Visual Studio supports multiple languages—Visual Basic NET, JavaScript, TypeScript, F#, and more—the scope of this project centers on C# as the default language.

To parse a whole solution, we first look at the structure of a Visual Studio Solution in the following figure.

Figure 6.1: An example of Solution structure in Visual StudioSolution Explorer.

The opening solution named shadowsocks-windows comprises eight loaded C# projects (represented by a rectangular box with a “C#” icon) and two NET unit test projects (represented by a rectangular box with a conical flask icon) Expanding any project—particularly Shadowsocks.Net—reveals a list of folders and C# source files with the cs extension Our tooling first traverses every source file in a project, then moves to the next project and repeats the same process until the final project is reached The analysis completes when traversal ends at the last project, and any file type other than a C# source file is ignored.

The traversal might end earlier if either a syntactic error, a semantic error or any other un- expected error occurs, and the graph should not be rendered.

Capstone Project report, Semester 2, Academic year 2022 - 2023 Page 29/61

API method call in C#

To depict the problem of detecting an API method call within the C# source code, we have a sample source code snippet with some method invocation statements as below.

7 Console.WriteLine("Result is printed");

10 public static void Main(string args[])

13 Console.WriteLine("Closing the program ");

Assuming the code snippet has no semantic errors, the method invocation statements occur at lines 6, 7, 12, and 13 Of these, the call at line 12 executes a user-defined method named PrintResult(), whose declaration starts at line 4 The Sleep(1000) and Console.WriteLine(" ") calls are API methods, invoked from the System.Threading and System namespace, respectively.

The Roslyn Compiler API can classify a method invocation as referring to an internal method defined within the current solution or to a member of an external library By analyzing the invocation syntax and symbol information, it helps developers distinguish between in-solution definitions and external dependencies, improving code comprehension, navigation, and maintenance.

When an API method call is detected, relevant details are extracted, including the method name, description, containing library, and the source file line number, and these are mapped into a dedicated API Data Transfer Object (ApiDTO) Each ApiDTO is assigned a generated Globally Unique Identifier (GUID) to guarantee no duplicates Distinct identifiers support data visualization, because an API method name, even when combined with the project, document, or line context, can collide and obscure distinctions without unique IDs.

Each source code file, referred to as Document, is mapped to a DocumentDTO that includes the document’s name, its ID, and the list of ApiDTOs representing all API usages within that document To guarantee uniqueness without using GUIDs, we can append the project name to the document name, since two projects cannot share the same name The same mapping approach is applied to the higher-level aggregates, where Projects map to ProjectDTOs and the top-level Solution maps to SolutionDTOs The interrelationship among DocumentDTO, ProjectDTO, and SolutionDTO is depicted in Figure 6.2.

University of Technology, Ho Chi Minh City

Faculty of Computer Science and Engineering

Figure 6.2: The relationship of the DTOs explained in Class Diagram.

After assembling the final SolutionDTO, the tool serializes it into a JSON object for submission to the JSON server Two JSON objects are sent, each mapped to a visualization technique—Force-Directed Graph Layout and Zoomable Circle-Packing To ensure compatibility, the payloads share a similar JSON structure that aligns with the two example snippets provided.

Capstone Project report, Semester 2, Academic year 2022 - 2023 Page 31/61

3 /* Solution/Project/Document/API nodes */

34 /* Links between Solution and Project, Project and Document,

University of Technology, Ho Chi Minh City Faculty of Computer Science and Engineering

The first code snippet shows a JSON input for a force-directed graph layout, composed of two top-level arrays: an array of node objects and an array of link objects that connect two nodes Each node object carries a type and identifier, with a Project node offering basic properties such as type, id, name, and radius, while an API node can also include fields like line, lib, and group Each link object stores the IDs of its source and target nodes to draw the connection between them This data structure captures node relationships and the connections the force-directed graph layout will render, enabling varied node types with tailored attributes and precise linking via source-target IDs.

The second code snippet presents a JSON example that demonstrates nested relationships as input for a zoomable circle-packing visualization, illustrating four levels of data nodes—from aSolutionnode to APInodes—with each node carrying data properties similar to those in the first example, making it a clear reference for building hierarchical JSON structures used in zoomable circle-packing layouts.

Capstone Project report, Semester 2, Academic year 2022 - 2023 Page 33/61

Web service & Database

Although a modern web service is intended to operate independently and remotely—often delivered as Software-as-a-Service, Data-as-a-Service, or Platform-as-a-Service—practical realities can lead to hosting it as a local Django server-side site In the figure, the local web server was initialized by running python manage.py runserver from the command-line interface, causing the development server to listen on the local URL http://127.0.0.1:8000/ as shown in the red rectangle.

Figure 6.3: Local web service started log.

The home page ofCSApiVisualizerwould be displayed when accessing that URL on a nor- mal web browser asFigure 6.4.

In our project, PostgreSQL database only works as a storage for extracted API data in form of JSON, and keeps asuperuseraccount for authentication to administrative page.

University of Technology, Ho Chi Minh City

Faculty of Computer Science and Engineering

Figure 6.5: API data entries stored in thevisualizer_apidataforcetable, queried using pgAdminSQL editor.

API usage visualization

Whenever a user lands on a web page that presents visualization techniques, the web service instantly queries the most recently added JSON data row from the database It then renders the page view using the retrieved JSON data to display the visualization.

For Force-Directed Graph Layout, the algorithm implements a velocity Verlet numerical integrator to simulate the physical forces on particles, using a simplified model that fixes the time step Δt = 1 and assigns a unit mass m = 1 to all particles Under these conditions, any force F acting on a particle equates to a constant acceleration over the time interval, and the simulation proceeds by adding the acceleration to the particle’s velocity, with that velocity then used to update the particle’s position However, given the mixed nature of research and application in this project, most layout parameters are neglected.

Zoomable circle-packing uses containment (nesting) in enclosure diagrams to encode hierarchical relationships, with leaf circles sized to represent a quantitative dimension of the data This layout makes the hierarchy visually clear, but it is often less space-efficient than other hierarchical data visualizations The apparent “wasted” space—areas where no leaf circle fills its parent—actually highlights the nesting structure and reveals how the hierarchy is organized In practice, the design favors intuitive understanding of relationships and data magnitudes over maximal packing efficiency.

From the JSON input received from the web service, our layout algorithm generates force-directed graphs, a circle-packing graph that visualizes API usage dependencies in the source code, and a statistical detail that determines their frequencies The previous JSON compatibility issue was addressed due to these algorithmic computations, and D3.js will render the resulting graphs only if the JSON data conforms to the format described in Section 6.2.2.

Figure 6.6 and Figure 6.9 show 2 simple force-directed graph and circle-packing layout computed and generated by D3.js library. a Force-directed graph layout

The force-directed graph is generated from the first JSON snippet example in Section 6.2.2 In this configuration, the radii of Solution, Project, and Document nodes are similar, while the radius of an API node scales with its usage frequency inside a source code file.

Capstone Project report, Semester 2, Academic year 2022 - 2023 Page 35/61 in the Program document, the Add API node holds 7 invocations, whilst Sort only has 1 invoca- tion, resulting in a smaller node radius.

On the right side of the screen, a control panel on the force layout page displays the graph’s node and edge counts, provides zoom-in and zoom-out buttons, offers four directional controls to transform the canvas, and includes a Go-to-line button at the bottom of the controller to trigger the Go-to-line event described in Section 6.2.7.

Figure 6.6: A simpleforce-directedAPI usage graph rendered by D3.js.

When hovering on any node, its tool-tip, or information box is displayed as inFigure 6.7.

Informational value depends on node type: Solution, Project, and Document nodes expose only node-type information, while API nodes are the most informative, including the calling library and the lines of code invoked, as illustrated in Figure 6.8.

Figure 6.7: Information of aSolutionnode filled in its tool-tip.

University of Technology, Ho Chi Minh City

Faculty of Computer Science and Engineering

Besides the aforementioned features, our force-directed graph includes a color-clustering system for the displayed nodes (refer to Figure 6.9) The concept is simple: API nodes that belong to the same unit of a source code file are rendered with the same color, while other nodes such as Solution nodes and Project nodes are assigned random colors This coloring strategy enables quick visual grouping of related API components within a file and maintains clear contrast for higher-level nodes, improving readability and navigation in the visualization.

Capstone Project report, Semester 2, Academic year 2022 - 2023 Page 37/61

Figure 6.9: Example of color-clustering in Force-directed graph.

Lastly for the Force-directed graph modules, we construct a Logarithmic algorithm to deter- mine the API node radius, which can be seen inFigure 6.10 The formula in fact is: r=log 2 (x×100)

, whereris the determined API node radius, andxis number of invocation times of that API in a source file.

A drawback of the Logarithmic radius calculation algorithm is that the radius difference between two API nodes may be hard to notice when their usage counts are close In such cases, small differences in load fail to produce a clear separation in radii, reducing the method’s effectiveness for distinguishing lightly utilized nodes For example: x=7 → r = log2(7×100) ≈ 9.45; x=8 → r = log2(8×100) ≈ 9.64.

University of Technology, Ho Chi Minh City

Faculty of Computer Science and Engineering

Figure 6.10: The observable difference in radius between 2 API nodes. b Zoomable circle packing layout

An interactive visualization combines a force-directed graph with a circle packing layout that supports zooming in and out In this circle packing, circles arranged from outer to inner represent the hierarchical API usage nodes derived from the JSON snippet in Section 6.2.2; users can click the outer circle to zoom one depth level inward and reveal its children The white nodes denote API nodes and display the API name alongside usage lines, as shown in Figure 6.12.

Figure 6.11: A simplecircle-packingAPI usage graph rendered by D3.js.

Capstone Project report, Semester 2, Academic year 2022 - 2023 Page 39/61

Figure 6.12: Zoom in view of thecircle-packinglayout c Statistical charts

Additionally, the analysis includes statistical charts that visualize API usage in the analyzed C# project, with a pie chart showing the top 10 most frequently used libraries and a bar chart displaying the top 10 most frequently used APIs. -**Support Pollinations.AI:**🌸 **Ad** 🌸 Visualize your C# project’s API stats with Pollinations.AI’s free text APIs—[Support our mission](https://pollinations.ai/redirect/kofi) to keep AI tools open for all.

Figure 6.13: A pie chart and a bar chart displaying Libraries usage and API usages frequency,respectively.

University of Technology, Ho Chi Minh City

Faculty of Computer Science and Engineering

Extension/Plugin for IDE

So far, everything can be observed in a standard web browser, but our primary goal is to develop CSApiVisualizer as an interactive plugin for an Integrated Development Environment and to make the Go-to-Line feature fully functional To achieve this, we created a custom Tool Window and integrated it into Visual Studio, enabling seamless IDE-based access to CSApiVisualizer's capabilities.

Firstly, a component must be added to the IDE’s toolbar to display the tool window and the expected result should look similar toFigure 6.12.

Selecting the CSApiVisualizer tab opens the tool window as shown in Figure 6.13, featuring a CefSharp embedded web browser, and there is no address bar in either the tool window or the browser to prevent users from navigating externally.

Finally, to start the visualization, click on theSend Databutton at the bottom-right corner of the tool window.

Figure 6.14: Steps to open theCSApiVisualizertool window after the installation.

Capstone Project report, Semester 2, Academic year 2022 - 2023 Page 41/61

Figure 6.15: The tool window is revealed with an embedded web browser currently displaying the index page ofCSApiVisualizerwebsite.

Go-to-line feature

One of the project’s core features solves the Go-to-line navigation challenge in the IDE editor when users click the Go-to-line button on the force-directed graph In a normal browser view, this button isn’t functional because the event trigger and listener are defined within the CSApiVisualizer tool window The Go-to-line action works only for API nodes, as these are the editable portions of a source code file The subsequent processing steps are illustrated in Figure 6.16.

At first, the user chooses and clicks on any API node that they want to find so its data will be filled in the control board.

Once the data is displayed in the Node properties section, the user clicks the Go to line button, triggering a JavaScript CefSharp.PostMessage() request, and the response is then caught by the CefSharp browser's event handler, ChromeBrowser_JavascriptMessageReceived(), enabling seamless communication between the frontend and the CefSharp backend.

The event handler parses the request body to extract key parameters such as the file path, target line, and horizontal offset It then initializes or retrieves an instance of Visual Studio’s Development Tools Environment (DTE), opens the specified file, and calls MoveToLineAndOffset(line, offset) to place the cursor at the computed position.

University of Technology, Ho Chi Minh City

Faculty of Computer Science and Engineering

Figure 6.16: Steps to triggerGo to lineevent.

Figure 6.17: The cursor should be precisely placed at the line 12, where the API Sys- tem.Runtime.GetType()is invoked in fileProgram.cs.

When a source code file contains multiple API usage lines, the interface presents a dropdown that lists every API usage, enabling the user to select and navigate to the desired line Figure 6.17 provides a view of this dropdown showing multiple API usage entries.

Capstone Project report, Semester 2, Academic year 2022 - 2023 Page 43/61

Figure 6.18: Dropdown shows a list of API usage lines inside the source code file

University of Technology, Ho Chi Minh City

Faculty of Computer Science and Engineering

Administrator page

We provide an administrative panel to manage previously posted JSON data, including view, add, edit, and delete operations; however, the admin interface cannot be accessed through the embedded browser and must be opened manually at /adminURL.

Figure 6.19: The dashboard of Django administration site, consists of 2 data tables for the visu- alization.

Figure 6.20: Clicking on either one will display a list of input JSON objects, with the latest one staying at the top.

Figure 6.21: The detail editor of an input JSON object, allowing manual manipulation.

Capstone Project report, Semester 2, Academic year 2022 - 2023 Page 45/61

This chapter presents the outcomes and results of the project implementation, giving a clear view of the system’s functionality, features, and performance The demonstration covers setup and installation steps, the use of open-source components sourced from GitHub as test data, and key user interactions and system behavior that illustrate the tool’s capabilities It also explains how the demonstration validates the system, identifies gaps, and suggests improvements uncovered during testing and implementation phases.

University of Technology, Ho Chi Minh City

Faculty of Computer Science and Engineering

Extension installation and startup

To test theCSApiVisualizer, we compiled and built an experimental version onVisual Studio

2022 IDE Concurrently, the Django web server should be started similar toSection 6.2.3.

Testing projects

For the purpose of prototyping, we experimented the tool on 2 open-source C# projects from GitHub: shadowsocks-windows 1 and pytocs 2 The results are obtained as in multiple figures shown below.

1 A C# port of shadowsocks: https://github.com/shadowsocks/shadowsocks-windows

2 Converts Python source to C#: https://github.com/uxmal/pytocs

Capstone Project report, Semester 2, Academic year 2022 - 2023 Page 47/61

Results

Ngày đăng: 15/10/2025, 20:05

TÀI LIỆU CÙNG NGƯỜI DÙNG

TÀI LIỆU LIÊN QUAN