GSoC'25 idea: Improve the IHR Website Codebase

[dpgiakatos]

The IHR website provides outputs from IHR research projects through a simple and user-friendly web interface. Its current codebase is large and contains many features. This time, instead of adding new features, we will focus on improving the existing ones. The goal of this project is to refactor certain components to enhance reusability.

Expected Results:

• Refactor the codebase
• Improve reusability

Knowledge Prerequisites:

• VueJS
• JavaScript
• CSS
• HTML

Resources:

• https://github.com/InternetHealthReport/ihr-website

[srinitha709]

Ya this is a good idea the IHR website, with its extensive codebase, provides a solid foundation. To improve and maintain it effectively, focusing on optimization, refactoring, and enhancing user experience will be the main key
so below are some strategies i think would be helpful in achieving this
Improving the Code Quality & Consistency
Refactoring the existing components for better reusability and maintainability ,Split large components into smaller, more manageable ones. For example, split components in src/components (like AggregatedAlarmsTable.vue) into smaller, focused pieces.

using ESLint and Prettier to enforce consistent code formatting across the project.

Regularly review and clean up the codebase by removing unused code, reducing redundant functions, and improving variable naming.

Optimizing the Performance:- Lazy load large components, especially in views like GlobalReport.vue and NetworkTopology.vue, to enhance the page load time.and
using Vuex more efficiently for state management, ensuring only necessary data is fetched and reducing unnecessary re-renders.
Compress images and assets under the assets/imgs folder to improve load times without compromising quality.

Improve Error Handling and Logging by
Implement more granular error handling across components. For example, in components like IypApi.js or GripApi.js, ensure errors are caught and communicated properly.
Implement more detailed logging, especially in the API integration points (IhrApi.js, IodaApi.js), to help track issues effectively.

Add more unit and integration tests for components and functions, especially in areas related to core functionality like charts, API data fetching, and rendering. using Jest or Mocha to test JavaScript components.
Regularly run tests to ensure all new commits don't break existing functionality.

User Experience Improvements--
Focusing on UI/UX refinements in components like Footer.vue or Header.vue. Ensure smooth transitions, clear navigation, and accessibility improvements (e.g., adding aria-labels).
Improve error messages and feedback mechanisms in pages like BGPMonitor.vue and GlobalReport.vue, guiding users when there’s an issue with data display or API calls

By focusing on these areas, i think we can maintain a high standard for the IHR website codebase, ensuring it remains efficient, user-friendly, and secure.

[dpgiakatos]

Hello,

Your suggestions are good, but I believe they may be too extensive for a single GSoC project, considering the implementation time and our past experience with project management. It might be helpful to include a prioritized list of your proposed changes in your proposal. This list could outline the changes you plan to address during the GSoC project (if selected) and another list for future work.

Before proceeding with your proposal, please wait for the official GSoC 2025 ideas announcement from our organization. Once the ideas are announced, it would be a good idea to seek feedback from us before you officially submit your proposal.

I also want to mention that we want to refactor the current method of displaying data in the tables. We have a component that we reuse in every widget, but we want to change this implementation to include the table directly in the code of each widget, rather than reusing the same table component.

Thank you.

[iamkb28]

Hi @dpgiakatos!

I came across the refactoring project for the IHR website, and I’m really interested in contributing! I’m a third-year B.Tech CSE student, and while I don’t have experience with VueJS, I have built projects using HTML, CSS, and JavaScript. I’m passionate about learning new technologies, and I see this as a great opportunity to improve my skills in maintaining and improving codebases while also learning more about web development.

I’m eager to explore refactoring and testing under your guidance and contribute meaningfully to the project. I would also appreciate any suggestions for my proposal so that I can start working on it in the right direction. Looking forward to your response!

Regards,
Khushi Bansal

[dpgiakatos]

Hi, the current solution for the tables is not good because the components that use tables do not have the same requirements. As a result, the Table component becomes too complex to reuse. One possible approach is to delete it and have each component use its own table component, rather than trying to reuse the same one. As for your proposal, we have in our gsoc repo samples from some very good proposals. Thank you.

[Syedmahmood777]

Hey @dpgiakatos,
I am highly interested in this project for IHR. As a contributor, I would be glad to work on refactoring the codebase. Moreover, I have relevant experience with MERN as well as vanilla web development. To enhance maintainability and reusability, I propose improvements such as modularizing Vue components, optimizing state management with Vuex, implementing lazy loading for better routing performance, and standardizing styling with scoped styles and CSS preprocessors like SASS/LESS.

Documentation updates, including component descriptions and setup instructions, will also be a priority. We can begin by integrating linting tools and gradually work towards these improvements. Also, would you like us to present new ideas, or should we focus on refining and using this existing idea provided in the ideas list in our proposal?

Thank you.

[dpgiakatos]

Hello, please focus on the existing ideas within our organization. Thank you.

[Abhsihekkaul]

Hey @dpgiakatos ,

This project sounds really interesting, and I’d love to contribute! Refactoring and improving reusability are crucial for maintaining a clean and efficient codebase, and I’m excited about the opportunity to work on this.

I have experience with JavaScript, Vue.js, HTML, and CSS, MERN and I enjoy optimizing code for better readability and performance. Looking forward to collaborating with the team, learning from others, and helping improve the IHR website. Let me know how I can get started!

[dpgiakatos]

Hi, the first step is to read the contributor guide:
https://github.com/InternetHealthReport/gsoc/blob/main/ihr-contributor-handbook.md

[Sakshamgupta90]

Hi @dpgiakatos, project sounds interesting! It would be helpful if you could share more details on the following:

1. What challenges are you currently facing in the codebase?
2. What components you looking to refactor?
3. Will the refactoring also include dependency upgrades, or is it purely focused on code structure?

Understanding these would provide a better understanding of the use case and the overall project goals.

[dpgiakatos]

Hello,
I am answering below:

1. One challenge is that the current solution for the tables is not good because the components that use tables do not have the same requirements. As a result, the Table component becomes too complex to reuse. One possible approach is to delete it and have each component use its own table component, rather than trying to reuse the same one.
2. This I cannot answer. You have to read and understand the codebase (it's a requirement) and then propose your changes in your proposal.
3. No, it's focused on the code structure.

Thanks.

[Abhsihekkaul]

Yes @dpgiakatos this is true
I was solving the Loading spinner problem and while solving it i have observed that the complexity of code for chart is quite high. Need to refactor everything from scratch.

I have some ideas let me make a prototype for the charts and other UI components and will be sending you.

I really want to work on this project
I have read the contribution md and i found the mission of IHR to becoming the openstreetmap for internet find me too much intriguing.

[dpgiakatos]

What do you mean by refactoring everything from scratch? Please elaborate. The current way of implementing the charts (line, bar, etc.) is good, as each component has the corresponding chart code. There are parts that can be improved, but keep in mind that your proposed changes should be done within the duration of GSoC. Having an excellent proposal for refactoring everything is unfeasible, as it will take at least 3 months with full-time work and requires very good development experience. Please propose changes that can be done during the GSoC program, according to GSoC rules, and align with your skills.

[Abhsihekkaul]

Hey @dpgiakatos,

I completely understand your point. By “refactoring from scratch,” I didn’t mean a complete overhaul but rather a structured approach to simplifying complex components where necessary. After reviewing the code, I noticed that while the current chart implementations are functional, there are areas where we can improve modularity and maintainability.

Instead of a full refactor, I’d propose:

Extracting reusable logic from charts into composable functions to reduce redundancy.
Optimizing performance by ensuring charts update efficiently with minimal re-renders.
Improving code readability by refactoring large, complex functions into smaller, focused units.

Right now , I am focusing on creating a prototyp which can show these improvements. Additionally i will make sure that the changes align with the GSoC timeline. Once I have something concrete, I’ll share it with you for feedback before finalizing my approach.

To be very Honest I have good command over MERN. But I love this project so much that i started learning to vue.js to make the best possible implimentation to the code. As the problem #921 take my considerable time to understanding the whole game.

[ia319]

Hello, I am very interested in this project. I studied the IHR website code base and found some duplicate logic that may affect reusability and maintainability. Here are some of my observations and suggestions, I hope it can be helpful.
Problem: Multiple components implement routing logic (such as ASN jump) repeatedly. Date and number formatting, metadata processing logic is scattered and repeated. Filtering logic is repeated and commonTable.js is not fully utilized.
Suggestion: Create a unified navigation service to centrally manage jumps. Develop formatting tool modules and metadata services to uniformly process data.
In addition, although commonTable.js provides basic filtering functions, many components still implement their own filtering logic
It is recommended to enhance commonTable.js to support flexible filtering and allow other components to use it directly.
It is expected to improve code reusability and maintainability and reduce some duplication of work.
Can be posted to Issue, does it need to be modified?

[dpgiakatos]

Hi, since this is part of your proposal, please add it to your proposal. We have a sample of how a proposal should be in ourgsoc repo. Thanks.

[ia319]

Ok, thanks for the reply, I will check it out

[dpgiakatos]

Hi all,
This is not really the place to draft your proposal. Instead, let us know if you have specific questions about the idea.

[chiragjethva03]

[dpgiakatos]

This is irrelevant to this thread. This thread is for our GSoC topic, while the above message describes a failed GitHub action for a PR. Thus, I think I will delete this message to avoid confusing other people interested in the GSoC idea. Thanks.

[Abhsihekkaul]

Hey @dpgiakatos

I am implementing the individual tables for the CountryInternetExchangePoints.vue and HostNameQueryingASes.vue as CountryInternetExchangePointsTable.vue and HostNameQueryingASesTable.vue
as it is using IYPGenericTable as a rendering component just wanted to confirm whether i am going to the right direction for this project.
And, after the implementation how can i propose the changes as previously i have seen it is essential to ask for changes before making a pr request.

[Abhsihekkaul]

Additionally, after diving more further there are multiple components which are using the same table component

Will not be putting it here, later will draft in my gsoc proposal

Just let me know @dpgiakatos apart from refactoring tables, what other changes are we looking forward to make in IHR website. So that i will get inclined towards those.
One thing which i love about open source is that my ability to learn a new language or framework has change significantly.

[dpgiakatos]

Technically, you (all contributors) need to discuss the changes you want to make with the mentors first before starting to implement them. This is crucial because we may not have planned for these changes, and you might spend time making them only to have them rejected later.

Regarding the questions you asked, I am answering below:

• The tables will be integrated into the widget components; we do not want separate table components for all our widgets.
• As for the files CountryInternetExchangePoints.vue and HostNameQueryingASes.vue that you experimented with, you can include these changes in your proposal, so there's no need to make a separate PR for them.
• Regarding the other table components, you'll need to understand how they work by reviewing the codebase.
• You should also mention in your proposal any other changes you think could improve the IHR-website codebase.

Keep in mind that this project has a high difficulty level, so if you're unfamiliar with Vue.js, you might want to consider working on other projects first.

Thanks

[Abhsihekkaul]

Hi @dpgiakatos

Thank you for your response.

Regarding my experience, I primarily work with the MERN stack, but I am also comfortable with Vue.js as I have built several projects using it. I have a good understanding of Vue or web development in general. That said, I will ensure that I review the codebase thoroughly and align my proposal with the project's structure and requirements.

I appreciate the clarification on the table components and will incorporate the insights into my proposal accordingly.
If any widget's code becomes excessively lengthy, I will consider creating a separate table component; otherwise, I will keep the code within the widget itself.

Since we have ample time before the GSOC proposal deadline, I will take the opportunity to identify more areas for improvement in the IHR website and structure my proposal accordingly. I genuinely love this project and am fully committed to contributing to it.

[Abhsihekkaul]

Just for clarification, since I haven't raised a PR in the IHR website yet, would this affect my chances of getting selected? As you've mentioned that all changes should be included in the proposal, I won't have the opportunity to raise any PRs and showcase my skills before the proposal phase begins.

[dpgiakatos]

You need to read the GSoC contributor's guide, as everything is explained there. Regarding showcasing your skills, it's not limited to contributing to the organizations you want to apply to. In your proposal, you should include all your contributions to the open-source community. Additionally, while not mandatory, some contributors choose to include a small demo along with their proposal. It's worth noting that having a well-written proposal, like the example we have in our gsoc repository, plays a very important role. Thanks.

[Abhsihekkaul]

Hey @dpgiakatos

I have made a implementation for the CountryInterenetExchangePoints and i have attached the file with this rather than adding it to the issue so that you can review that once whether this is something this project needs as a rerfactor

I have given CountryInterentExchangePoints as its self containing table

i have one more question around the refactor are we looking to remove only IypGenricTable or we are also looking to add IypGenericTreemapChart inside the widgets and removing that as
In that i didn't include the metadata and cypherquerycode.

what do you about an approach that maintains some level of reusability through smaller, more focused components, while still giving each widget control over its specific implementation?

I am trying to evaluate everything for better changes

[Abhsihekkaul]

additionally, I would like to know can i review my proposal to mentors by the end of this month as i will have more time and i will think more changes and sumbit my proposal to gsoc by the beginnnig of febrary.

[dpgiakatos]

Sorry, we can only provide feedback on your proposal once, due to the large number of potential GSoC candidates. This means that you have to include your example in your proposal, and when it is ready for feedback, you can send it to us. Thanks.

[adity1raut]

Dear @dpgiakatos,

I recently came across the IHR website refactoring project and would love to contribute! As a second-year B.Tech CSE student with experience in full-stack development—including HTML, CSS, JavaScript, and the MERN stack—I am eager to apply my skills while learning from this opportunity.

Having completed my React.js learning and gained a solid understanding of Vue.js, I am excited to take on this challenge. This would be my second project using Vue.js and my sixth with React.js. My strong interest in refactoring and testing aligns well with this project, and I am confident that my contributions can enhance both the performance and maintainability of the codebase.

By working on this project, I will not only refine my technical skills but also gain hands-on experience in writing cleaner, more efficient, and scalable code. Additionally, contributing to this initiative will allow me to collaborate with like-minded developers, further improving my problem-solving and teamwork abilities.

If you have any suggestions for my proposal, I would greatly appreciate your insights to ensure I move in the right direction. I am excited about the opportunity to make a meaningful impact and look forward to your guidance.

Looking forward to your response!

Best regards,
Aditya Raut

[dpgiakatos]

Hi all, this is not a place for introductions, but a place for questions related to this project. Thank you.

[codebylalit]

Hey @dpgiakatos

I’ve gone through the IHR website’s codebase and noticed that the current table implementation is being restructured so that each widget has its own table component instead of a generic one. Before I finalize my approach, I wanted to clarify:

Are there any specific widgets that must retain a shared structure, or should all of them have independent table implementations?

Apart from the table refactoring, are there any other high-priority components you'd like contributors to focus on?

I want to ensure my proposal aligns well with the project’s needs. Looking forward to your insights!

Thanks!

[dpgiakatos]

Hello, I am answering your questions:

1. All the components will have independent table implementations.
2. This is something that you have to think about and include in your proposal. Understanding the codebase is a key element for deciding which parts need refactoring.

Thanks.

[dpgiakatos]

Hello, here is a clarification about the widgets' table refactoring:

We do not want to completely remove the IypGenericTable.vue file (now renamed to IypController.vue). This file contains the widget structure and includes the data table component, which we intend to use within each widget. For instance, the component with the tab view (chart, data, api, metadata) will remain unchanged, and the component inside the data tab view will be separated for each widget.