GSoC'25 idea: IYP Browser

[dpgiakatos]

The Internet Yellow Pages (IYP) is a knowledge database that aggregates information about various Internet resources, such as ASNs, IP prefixes, and domain names. Currently, we use the Neo4J browser to query the graph, which returns results in four formats: an interactive graph, a table, a raw table, and a JSON object. To enhance the user experience, especially for those unfamiliar with Cypher, we have developed an LLM model and will provide an API to simplify the querying process. Our goal is to develop a new browser that allows users to input either a Cypher query (using the Neo4J API) or an English description (using our LLM API) of the results they wish to obtain from the database. Additionally, we aim to continue providing the default four output formats along with explanations generated by our LLM API.

Expected Results:

• Design a user-friendly, maintainable browser that connects to both the Neo4J API and our LLM API (frontend only, no backend)
• Implement a graph visualizer similar to that of the Neo4J browser
• Implement a data table viewer similar to that of the Neo4J browser
• Allow users to input either a Cypher query or a natural language description
• Provide the LLM-generated explanation text (from our LLM API) alongside the graph visualizer and/or data table viewer

Knowledge Prerequisite:

• Neo4J
• Javascript
• VueJS
• NVL (Neo4j Visualization Library)
• Quasar

Resources:

• https://github.com/InternetHealthReport/internet-yellow-pages
• http://iyp.iijlab.net/
• https://neo4j.com/docs/nvl/current/
• https://www.npmjs.com/package/@neo4j-nvl/base
• https://neo4j.com/docs/getting-started/graph-visualization/graph-visualization/
• https://github.com/InternetHealthReport/iyp-browser
• IYP Browser (view)

The description continues in this message:
https://github.com/orgs/InternetHealthReport/discussions/50#discussioncomment-12185853

P.S. This place is only for questions/discussions about this idea. Please do not draft your proposals here.

[amaydixit11]

This is an excellent initiative to make querying Neo4J databases more accessible, especially for users unfamiliar with Cypher. Integrating natural language processing into the browser will undoubtedly enhance the user experience and broaden the audience for this tool.

As someone experienced with Neo4J and frontend technologies like React and D3.js, I’d like to contribute to this project by offering suggestions for frontend design and implementation. A few suggestions/ideas for implementation,

• Frontend Design: Using a framework like Next.js for the browser interface can facilitate easy integration with APIs and efficient rendering of dynamic components.
• Graph Visualizer: Libraries like D3.js or Cytoscape.js can replicate and enhance the Neo4J browser's graph view. Features like node filtering, highlighting, and relationship exploration could improve usability. Additionally using Cytoscape.js with the cola layout can help handle large network graphs well and while also supporting custom styling/interactions
• Table Viewer: A library like AG Grid or React Table can handle large datasets efficiently and provide sorting, filtering, and pagination features.
• Natural language query interface: Add query templates/examples to help users understand capabilities, Show real-time previews of the Cypher translation when possible, Include an option to edit the generated Cypher before execution

Moreover, a cypher query builder GUI can also be implemented in the same without much difficulty,

If the team is open to contributions, I’d be happy to prototype a component (e.g., the graph visualizer or the LLM integration) or assist in designing the frontend architecture.

I’m excited about the potential of this tool to simplify interactions with Neo4J and would love to contribute to making it a success. Let me know how I can best support this initiative!

[dpgiakatos]

Hello,

Thank you for your suggestion, but it requires too much effort. I believe it would be better to stick to the initially planned features. Additionally, it is preferable for us to use the technologies that we are currently utilizing within the IHR organization. Therefore, VueJS and the Quasar framework would be more suitable for this project.

Regarding the graph framework, I would like to use the following library:
https://github.com/yWorks/yfiles-jupyter-graphs-for-neo4j
However, it does not have a free license if we want to use it for an HTML app.

Thank you for considering this in your GSoC proposal.

[srinitha709]

@dpgiakatos This is a fantastic idea, and I’m truly excited about the direction you’re taking with the IYP browser! simplifying the querying process while leveraging existing technologies like VueJS and Quasar framework is an excellent approach. Below is my proposed plan:

Leverage VueJS and Quasar:
Build a responsive, maintainable user interface using VueJS and Quasar's component library.
Interactive Graph Visualization:
Incorporate a visualization tool (e.g., Cytoscape.js) for features like zoom, node interactions, and tooltips.
Dynamic Data Table and Natural Language Querying:
Create a dynamic table with Quasar components, including sorting, filtering, and export functionalities.
Integrate the LLM API to convert natural language inputs into Cypher queries.
Display LLM-generated explanations alongside the results.

I’m confident this approach will deliver a robust, user-friendly solution that meets the project’s objectives. I’d love to contribute and collaborate further to ensure its success. Please let me know the next steps.

[dpgiakatos]

Hello,

Regarding the table or LLM explanation view, displaying the contents is quite straightforward. However, the graph rendering presents more challenges. Here are some questions that may help you as you create your proposal (the same comment also for @amaydixit11):

• What format does the Neo4j response of a query take?
• How can we visualize the Neo4j response using a graph (if the response returns a graph)?
• If the returned graph is too large, what can we do in this case, as the visualization may not be feasible?
• Are there any open-source solutions that can create a graph similar to Neo4j?
• Is it possible to use parts of the Neo4j browser, since it is an open-source project, and reuse them in our project?
• We also want to ensure that the graph we create matches the one generated by the Neo4j browser.

With that in mind, it would be beneficial to start thinking about the graph feature and its implementation before submitting your proposal. We can provide feedback on this prior to your submission.

Thank you.

[GoonsD]

Hello @dpgiakatos, This is really an exciting project, it will ease the use of IYP especially for those not familiar with cypher queries. Over the past few days, I’ve taken time to research how IYP functions as a knowledge database and have explored its integration with Neo4J. I’ve also run the existing project locally, reviewed the codebase, and gained a good understanding of its current architecture and features.

The proposed integration of an LLM API to simplify querying is a great step forward. It's great to use VueJS and the Quasar framework, as they align with the technologies currently used within IHR. However, I’d like to seek some clarity and share a few thoughts:

1. Graph Framework: The yFiles library seems like a robust choice, but its licensing restrictions for HTML applications might be a limitation. Would it be worth considering open-source alternatives?
2. LLM Integration: Are there any particular challenges you foresee in embedding LLM-generated explanations into the new browser’s interface? It would be helpful to understand any potential performance or usability concerns.
3. Authentication Simplification: Since the new browser will remove the need for users to input credentials or URLs, what would be the recommended approach for securely managing API access to the Neo4J DB and LLM?

I look forward to hearing your thoughts and suggestions. Please let me know if there are specific areas where I can focus my efforts to align with the project’s goals.

[dpgiakatos]

Hello,

Thank you for your questions. I answered them below:

1. Yes, we are considering other open-source alternatives, as we do not want to reinvent the wheel. One option we have is to refer to the Neo4j browser and use parts of its code related to graph visualization, since it is an open-source project. However, it may take some time to understand its codebase. If you know of any other alternatives, please feel free to share them.
2. We are currently running our LLM in-house for testing. We already have an API running and are testing its performance. We expect to have a better overview in the next months. We will provide endpoints for this part, and performance is not a concern for this project, as it is a frontend-only project that displays data from endpoints.
3. All the endpoints we provide do not require authentication. Anyone can use them for free without needing to log in. We have taken all necessary actions to ensure that every endpoint we expose is secure.

As I mentioned earlier, I believe the most challenging aspect of this project is the graph visualization. With that in mind, it would be beneficial to start thinking about the graph feature and its implementation before submitting your proposal. We can provide feedback on this prior to your submission.

Thank you.

[GoonsD]

Hello @dpgiakatos , thank you for your valuable feedback and insight. I am currently familiarizing myself with the NEO4j browser codebase, in the case we will have to reference the code related to graph visualization. Thank you for the clarity on the model and authentication, I fully understand the scope of the project and have started making plans around implementation.

Thank you.

[dpgiakatos]

Hello all, I found that Neo4j has the NVL library for graph plotting, which we can use for this potential project. You can find more information in the materials linked below:

• https://neo4j.com/docs/nvl/current/
• https://www.npmjs.com/package/@neo4j-nvl/base

If you have any questions feel free to ask here.

Thanks

[vara-prasad-07]

Hi @dpgiakatos ,

Thanks for sharing this! After going through the NVL documentation, I’d like to outline my initial approach for integrating it into the IYP Browser project:

1] Setting Up Neo4j & NVL

      Deploy a local Neo4j instance for testing.
      Use Cypher queries to fetch and structure relevant graph data.
      Set up NVL in a VueJS component to render query results.

2] Graph Visualization Implementation

    Use Neo4jGraphRenderer to plot ASNs, IP prefixes, and domain name relationships dynamically.
    Customize node/edge styles based on entity types.
    Implement interactive controls (zoom, click event handling, filtering).

3] Enhancing User Interaction

  Add a search bar to allow users to run Cypher queries or natural language queries (if LLM API is integrated).
  Provide multiple graph layouts (force-directed, hierarchical, etc.).
  Explore real-time updates for dynamic graph rendering.

I’d like to hear any thoughts or suggestions on this approach. Also, should we consider additional visualization libraries (like D3.js) alongside NVL for more flexibility?

Looking forward to the discussion!

Best,
vara prasad

[dpgiakatos]

Hello,

I believe it would be good idea to explore how Neo4j DB, Neo4j Browser, and IYP work before we continue our discussion (IYP is not updated dynamically). Additionally, we want to integrate our LLM API (this is in the expected results) and we don't want to have multiple graph layouts.

To address your question, we want to use only one visualization library for graph visualization. If NVL can fulfill this requirement, then we should avoid adding using other visualization libraries.

A general reminder for everyone: please read the initial description and review all the provided resources. Also, kindly refrain from drafting your proposals in this space; it should be reserved for questions and discussions related to the topic.

Thank you!

[vara-prasad-07]

Hi @dpgiakatos ,

Thanks for your feedback! I’ll first explore how Neo4j DB, Neo4j Browser, and IYP work together before making further implementation decisions. I understand that IYP is not updated dynamically, and I’ll take that into account when structuring the graph visualization.

For the LLM API integration, I will review the provided resources to understand how best to incorporate natural language querying for Neo4j. If there are any preferred LLM APIs or models we should use, please let me know.

Regarding visualization, I’ll focus solely on NVL and ensure it meets all project requirements before considering alternatives. I appreciate the clarity on this.

I’ll take some time to go through the materials and come back with more specific questions. Looking forward to the next discussion

Thank you!

[dpgiakatos]

From the description is clear that we will provide the LLM API. Please read the full description.

[vara-prasad-07]

Thank you for your understanding regarding the miscommunication of my earlier explanation of the IYP BROWSER project idea. I will familiarize myself with the project description and resource links. I'm confident that I will deliver a working prototype that effectively showcases the MVP of the project concept.

[dpgiakatos]

Hello everyone! For future comments, discussions, and questions, please read the description carefully and review all the materials provided. While we do not prohibit the use of ChatGPT or other similar LLMs for polishing your text, please ensure that the content is relevant and within scope before using it as is. Thank you!

[dpgiakatos]

Hello, community. For this potential idea, we will deliver a basic codebase to serve as a starting point. When it is available I will link it here. Thank you.

[vara-prasad-07]

Good to hear that @dpgiakatos .I am currently working on this idea

[dpgiakatos]

Hello, here is the repository for the basic codebase:
https://github.com/InternetHealthReport/iyp-browser

My plan is to implement the basic functionalities. I think it will be easier to have a starting codebase rather than start from a blank project. You can take a look, but please avoid opening issues. When I have developed the basic functionalities, I will write another message here having details about the features that we want to implement (so you can include them to your proposal). Please do not rush.

[dpgiakatos]

The initial setup was quite challenging, that's why I decided to provide a basic codebase.

[vara-prasad-07]

Hii @dpgiakatos ,

I've cloned and run the codebase locally, querying graph data using Cypher snippets and analyzing API-based retrieval. It is beneficial to understand the IYP browser project goals.

I noticed that the Vue app currently supports only graph retrieval. To align with the project goals, I'll implement the missing features (Table, Explanation, and Code), enhance UI/UX, and integrate the provided LLM APIs for natural language queries.

Can I use this codebase for my GSoC'25 demo? If only I could implement all the other features that were mentioned.

Thank you

[dpgiakatos]

Hi, not yet. I want to develop some basic functionalities to have a starting point, and then I will come back with a list of features that we want to implement. Please wait for the next announcement. Thank you.

[vara-prasad-07]

Fine @dpgiakatos, I am waiting for your announcement. Until then, I will make myself comfortable with the basic codebase.
Thank you

[dpgiakatos]

Hello, I've completed the basic features and project structure of the iyp-browser (https://github.com/InternetHealthReport/iyp-browser). Now, I believe this potential idea is more targeted. That said, I'm listing what we want to include:

• Graph component: add mouse controls (zoom, reset), add node/relationship interaction (on click will open a sidebar with corresponding details), add option after clicking on a node to expand it, have controls to change node color by node type
• Table component: fix the column header for all use cases (the problem can be identified if you try different Cypher queries), if the cell contains an object (JSON) then the object should be human-readable, connect content with ihr.live (e.g., if a cell has 2497, then clicking will redirect to ihr.live/as2497)
• OutputPanel component: have a button for sharing this component with the content, like the widget's sharing button in ihr.live, and have an option for a standalone component in order to be used in an iframe
• Router: adjust the router to execute Cypher queries from the URL (like a GET request)
• Improve the UI: there is a basic UI, but some bugs exist, resolve them, and feel free to propose a different UI design

If you don't understand something, feel free to ask.

P.S. I may add some more things to the above list in the future.

[GoonsD]

Hello @dpgiakatos ,

Thank you for providing the guide and resources for this project. From the above target for the project, it looks really exciting. I am currently getting a hang around the current deployed codebase and other addition to implement and contribute to the project.
Looking forward to more targets and guide on this project while I get use and implement the provided codebase. I will share my progress on this trends.

[vara-prasad-07]

Hey @dpgiakatos,

I'm glad to hear you've implemented the basic functionalities! I’ve reviewed the required features, and I’ll be sure to reach out if I have any questions or run into any issues while implementing them.

Thank you

[GoonsD]

Hello @dpgiakatos ,

Thank you for providing the guide and resources for this project. From the above target for the project, it looks really exciting. I am currently getting a hang around the current deployed codebase and other addition to implement and contribute to the project. Looking forward to more targets and guide on this project while I get use and implement the provided codebase. I will share my progress on this trends.

Hello @dpgiakatos ,

As the opening time for proposal submission is approaching. I have made significant progress on drafting my proposal and understanding the 12 listed issues and deliverables for GSOC 25. I have few questions and seek a bit of clarifications.

1.) On the project discussion idea note, IYP brower project size hours was stated to be 175 or 350 hours. Please can you clarify on the hours required for the project
2.) Deliverable 1 "add option after clicking on a node to expand it", should this implementation for expansion be triggered by a double click event on a node or when a node clicked an option for expansion shows on the side bar?

Can I also share some of my draft with you to review and get your feedback?
Looking forward to your response.

[dpgiakatos]

Hello,
I am answering your questions:

1. The project size will be 350 hours.
2. I don't know, whatever is better for the final user.

Yes, you can send your proposal for feedback. Due to the large number of GSoC candidates, we can give feedback only once, so please make sure to be in good shape before sending it. Thank you.

[GoonsD]

Hello @dpgiakatos ,
I earlier submitted my GSOC proposal :), I appreciate your guidance.

[dpgiakatos]

Hello, the extension of the features list that I wrote in my previous message can be found here:
IYP Browser

[vara-prasad-07]

Yes, observing the extension of the features list makes me clear. I am on my way to implementing those features without fail

Thank you!

[dpgiakatos]

Sorry, but you must read Google's instructions for participating. You should not implement the list of features beforehand. This idea and the corresponding features will be implemented during the GSoC program by the selected participant.

[vara-prasad-07]

Yes, @dpgiakatos, I understand. Currently, I am working with the basic codebase in my local environment to gain a better understanding of the Vue components, including GraphOutput.vue, TableOutput.vue, InputPanel.vue, and OutputPanel.vue, as well as the API calls. Your codebase is well-structured, and I am experimenting with some changes. I plan to submit a solid proposal for this project and will definitely try to contribute to the IHR organization.

Thank you!

[vara-prasad-07]

Hey @dpgiakatos ,
I've been exploring ideas to enhance the IYP Browser experience, especially for non-technical users and better graph visualization.

Here is the detailed explanation of ideas: Ideas to Enhance IYP Browser (view)

Here are 4 feature suggestions:
1]Graph Export Feature
2]Dynamic Theme Switching
3]Auto-Complete for Cypher Queries
4]File Import & Drag-Drop Query Execution

I'd love to hear your thoughts on these 4 features

Thank you!

[dpgiakatos]

Hello,
Thank you for your suggestions, I am answering below.

1. We do not need it as we will implement a share link feature. We want to have a report system.
2. It's not planned.
3. There is already an auto-complete system for Cypher queries, exactly like Neo4j Browser. Our plan is to upgrade it to an intelligent auto-completion using the graph schema and not AI. This is difficult as we have to modify the Neo4j library that we use for the default auto-completion.
4. Since we will have the link sharing feature, we do not need it.

Thanks.

[vara-prasad-07]

Hello @dpgiakatos ,

Thank you for your detailed feedback on my feature suggestions.

I understand that the Graph Export Feature and File Import/Drag-Drop Query Execution are unnecessary due to the upcoming link-sharing feature.

Regarding the Auto-Complete for Cypher Queries, I appreciate the clarification about the existing system and the plan to upgrade it using the graph schema. If possible, I try to explore the Neo4j library to understand how it can be modified or assist with research on intelligent auto-completion.

Looking forward to your guidance.

Thank you!

[vara-prasad-07]

Hi @dpgiakatos,

Hope you're doing well! I’ve been going through the existing codebase and the list of 12 features to be implemented during the GSoC period. I need to have a quick clarification regarding the proposal structure.

Since you’ve already set up the basic codebase to retrieve the graph database using Cypher queries, should my proposal focus on how I am going to develop that initial setup, along with implementing the 12 features? Or should it primarily detail how I will integrate those 12 features into the existing codebase you’ve built?

I just want to align my proposal with what’s expected, so your guidance would be really helpful. Looking forward to your thoughts!

Thank you

[dpgiakatos]

Hi, the second one. Thanks.

[vara-prasad-07]

Hii @dpgiakatos,

I hope you're doing well. I need clarification about feature no 11.
Does this feature need to predict entire lines or code blocks that align with our current work(only shows properties available for a selected node type, show only relationships connecting to this node type) when we start typing the cypher query similar to tools like GitHub Copilot, vs code editor?

Thank you

[dpgiakatos]

No, we need to show only the relationships that are connected to the given node or the nodes that are connected to the specific relationships, along with their properties. Thanks.

[vara-prasad-07]

Yes, I got it
Thanks

[vara-prasad-07]

In the features list, you marked feature 1 (adding node/relationship interaction, which opens a sidebar with corresponding details) as completed. After reviewing the updated basic codebase, I noticed that you have already implemented this feature.

Should I remove the implementation of feature 1 from my proposal?

Thank you

[dpgiakatos]

Please don't ask about each thing you want to include in your proposal. Do the best you can and when it's ready, ask for feedback. Thanks.

[vara-prasad-07]

sorry for that. I will soon reach out you for proposal feedback.
thank you

[Ronit0104123]

Hi ,

I have been exploring the codebase and have already contributed to some PRs. I plan to submit a GSoC proposal to implement the features discussed in this project.

I’ve been analyzing the feature list and have a good understanding of how to approach the implementation. However, I would love to get your insights on the following:

1)Are there any features that you consider a higher priority?
2) In the feature for expanding the node in the graph on click, does it mean to display the connected nodes to that node as well, along with the ones that were displayed for that particular cypher query?
3) In the feature for having controls to change color by node type, do we want the user to have the option to select colors on his own?, as different node types in the graph already have distinctive colors.
4) In the feature for the cell containing an object to be human-readable, exactly how should it look like to be human-readable?

I want to ensure my proposal aligns well with the project's vision. Looking forward to your thoughts!

[dpgiakatos]

Hello,
I am answering your questions:

1. All the features that we listed in the GitHub project page have a high priority.
2. Yes.
3. Yes.
4. JSON or CSV format.

Thanks.

[GoonsD]

Hi ,

I have been exploring the codebase and have already contributed to some PRs. I plan to submit a GSoC proposal to implement the features discussed in this project.

I’ve been analyzing the feature list and have a good understanding of how to approach the implementation. However, I would love to get your insights on the following:

1)Are there any features that you consider a higher priority? 2) In the feature for expanding the node in the graph on click, does it mean to display the connected nodes to that node as well, along with the ones that were displayed for that particular cypher query? 3) In the feature for having controls to change color by node type, do we want the user to have the option to select colors on his own?, as different node types in the graph already have distinctive colors. 4) In the feature for the cell containing an object to be human-readable, exactly how should it look like to be human-readable?

I want to ensure my proposal aligns well with the project's vision. Looking forward to your thoughts!

Congratulations @Ronit0104123

[AQIB-NAWAB]

Hi @dpgiakatos, I'm interested in this project. I have quite a bit of experience in development and open source.
Here is my portfolio: https://portfolio-aqib-nine.vercel.app/

I have a few questions about the project:

1. When a user sends text to the LLM, will the LLM convert that text into a Cypher query using the data, and will this query process return the data?
2. Can you provide us with the UML diagrams or resources to better understand the whole picture of yellow pages what we actually end up getting from the database?
3. Additionally, I was thinking of a chat model where there will be a chat box on the left side and detailed results on the right side. However, I just want to confirm one thing: do we have the option of context for the model so it gives us better responses in the case of chat?

Looking for your reply
Thank you

[dpgiakatos]

No, thanks.

[AQIB-NAWAB]

Hi @dpgiakatos , idea 5 and idea 4 mentioned there is it referencing to the cell in properties when we click the node ?

Here is picture for better clarity

Cell Contains JSON

ASN Redirection

Thanks for helping me out.

[AQIB-NAWAB]

Hi @dpgiakatos , I was working on the project to get hands on experience to improve my proposal.
Here are few features I implemented looking for your feedback.

1. Allow user to change the color of feedback
2. If cell contains AS , allow to navigate to ihr.live
3. Share the OutputPanel using button
4. Execute the query with crtl + Enter
5. full screen
6. resize the output panel

Here is demo video

Screencast.from.2025-04-02.21-09-56.webm

Looking for your feedback
Thanks

[dpgiakatos]

Hi, have you read the gsoc rules? Rule 7.3d "If a Project Proposal is for a Project that the GSoC Contributor is already working on, the GSoC Contributor must note this in the Project Proposal. Any work done on the Project prior to acceptance of the Project Proposal will not be considered for Evaluations."

By the word "Evaluations", according to GSoC rules (1.4): “Evaluation” means an evaluation by the Mentor of their GSoC Contributor’s work or an evaluation by the GSoC Contributor of their Mentor, as applicable.

So, if you do any prior work (which is not recommended), then you will have to refactor (future work) your work in order to align with the project's requirements.

This is a message for all the GSoC candidates:

We have written multiple times that it's recommended to not do any prior work before your selection to the GSoC program. The point of GSoC is to write a good proposal with your implementation approach. Then, if you are selected, you discuss with the mentors the implementation details, and only then do you start the development.

When we created our GSoC ideas, we selected the project length and difficulty according to the features we want to include. By implementing things beforehand, you are no longer aligned with the project's requirements.

[AQIB-NAWAB]

Hi @dpgiakatos , I'm really sorry for that. I will follow the rules. I was just testing for better flow and better understanding which may help in my proposal but I will careful next time. I'm really sorry for that.

Thanks

[Ronit0104123]

Hi,

I’m working on drafting my GSoC proposal and wanted to clarify the following features related to the OutputPanel component:

A button to share OutputPanel content, similar to the widget's sharing button on ihr.live.

An option for OutputPanel to function as a standalone component to be used in an iframe.

Adjusting the router to execute Cypher queries directly from the URL, similar to a GET request.

These features seem somewhat related because in every case we have to make a URL with the query, I wanted to understand their exact differences. Would they be implemented together in some way? I'd appreciate any guidance on how to approach them in the proposal.

[dpgiakatos]

Hello,

I am answering below:

1. When we share OutputPanel as an iframe we want to get only the OutputPanel without displaying the InputPanel and any other component. The URL should be looking like this: .../iframe?q=['cyher']
2. When we share one OutputPanel using the share button then we want to display all the iyp-browser with all the components and displaying only one OutputPanel component. The URL should be look like this: ...?q=['cypher']
3. When we have many OutputPanel components and we want to share them, then we want to display to the user all the iyp-browser with all the components and all the OutputPanel components. In that case the user will have to copy the entire URL. We will not have a button for this. The URL should be look like this: ...?q=['cypher1', 'cypher2', ...]