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/

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!