CSC/ECE 517 Spring 2023 -G2335. Develop Frontend UI Interface for GraphQL Query

From Expertiza_Wiki
Jump to navigation Jump to search

Topic Overview

Motivation

Numerical data are important in providing insights. However, in raw format, numerical data are hard to grasp and introduce more confusion than information. Graphical presentations of numerical data are needed to draw insights and focus from the available data.

For this project, we are developing the front-end user interface for GraphQL query for a desktop application to display summary statistics of Github repository and Github users' contribution to said repository. Github provides GraphQL API for developers who are interested in the raw data surrounding each Github repository and user. Such data can be used to develop metrics to monitor a repository's activities, performance, community involvement, community usage, and contribution from the community and collaborators. The main focus of this project is developing a UI to display these metrics and summary statistics in graphical and tabular formats to provide clients with insights into their own Github repository or any Github repository they are interested in.

Our interface design will be developed from scratch based on client requirements (project requirements). We aim to make this design and interface a building block and sound foundation for future projects that want to extend our use case or build similar applications.

Scope

As our project focuses on the design and front-end interface of the application, back-end calls to fetch and methods organize data from Github GraphQL API will not be handled. Instead, the data will be stubbed using pre-process datasets in CSV files. These files are the products of data fetched from Github API and organized for ease of accessing and rapid development of the front-end.

Additionally, as the interface will be developed from scratch and the time allotted for this project, we will be focusing on basic displays and graphs of the data.

Feature Requirements

Raw Data

The raw data we are working with contain these fields

Metrics Column Names Explanation
Days lifeSpan Days of Github experience before class.
A commitContributions The number of private and public commits made by this user.
B commitComments, issueComments, gistComments, repositoryDiscussionComments, repositoryDiscussions The number of comments made by this user in commits, issues, and pull request discussions.
C pullRequests, pullRequestReviewContributions The number of PR and PR reviews made by this user.
D issues, projects The number of issues, and projects created by this user.
E Alanguagecount + Clanguagecount The number of different languages used in user's type I repositories.
F Alanguagesizet + Clanguagesize The size of code written in Github popular languages in user's type I repositories.
G Blanguagecount + Dlanguagecount The number of different languages used in user's type II repositories.
H Blanguagesizet + Dlanguagesize The size of code written in Github popular languages in user's type II repositories.
I repoACount, repoBCount, repoCCount, repoDCount The total number of type I, and type II repositories.
J forkACount, stargazerACount, Awatchers, forkCCount, stargazerCCount, Cwatchers The total number of forks, stars, and watchers in type I repositories.
K forkBCount, stargazerBCount, Bwatchers, forkDCount, stargazerDCount, Dwatchers The total number of forks, stars, and watchers in type II repositories.
L repoASize, repoCSize The total code size of type I repositories.
M repoBSize, repoDSize The total code size of type II repositories.

Tools

The interface for the desktop application will be developed using pyQt6 to create front-end components, Python to compute statistics from raw data, and matplotlib to render graphs

Features

The followings are the features that the desktop application is required to have

  • A table for basic statistics ((median, 25th, mean, 75th percentile, stdev) in the following format
median 25th mean 75th stdev
Days
A
...other metrics...
  • A table for the lowest ranked 1/5 username in the following format
1st 2nd 3rd 4th 5th
Days USER 10 USER 2 USER 6 USER 18 USER 21
A USER 5 USER 1 USER 13 USER 22 USER 19
...other metrics... ... ... ... ... ...
  • A boxplot for each of the metrics listed
  • A histogram for each of the metrics listed

Interface Design

Todo: Include basic design for the UI

Implementation Details

Todo: Inlcude implementation details such as tool used (PyQt6, Python, Matplotlib, etc.), views, and UI components

Testing

Todo: include testing plans and tool here

Future Work

Todo: Include notes about future work and application of this UI

Contributors

  • Aileen Jacob (amjacob2)
  • Anh Nguyen (anguyen9)
  • Joe Johnson (jdjohns4)
  • Mentor Jialin Cui (jcui9)