Contributor: Kartik Gupta
Mentor: Andrey Vasnetsov
Project: Web UI for visualization and exploration 📊
Organization: Qdrant
Original idea by Andrey Vasnetsov : Ideas for GSoC at Qdrant
Contributor proposal: Web UI for visualization and exploration 📊 (GSoC 2023 Proposal)
Problem Solved: Qdrant lacked efficient vector data visualization, compelling users to rely on external tools and coding for analysis, creating a significant functional gap.
Solution: A user-friendly web interface was developed, enabling seamless vector data exploration. It allowed quick visualization, simplified analysis, and broadened user accessibility without external dependencies.
Deliverables: A polished web application with powerful data tools, cross-device compatibility, and thorough documentation, effectively bridging the platform's functionality gap.
Outcome: The project's completion filled the void, providing Qdrant users with an intuitive interface for enhanced data insights and accessibility, marking a leap forward in user experience and data exploration capabilities.
I achieved all six milestones, which included tasks like designing the UI on Figma, creating a custom language query editor, implementing vector visualization using dimension reduction, and overcoming challenges such as autocomplete integration and web worker optimization.
Milestone 1: Making a User-Friendly UI on Figma
In this milestone, I utilized Figma to craft a user interface that is not only visually captivating but also easy to navigate. The design was optimized for various devices, ensuring a seamless experience. My focus was on enhancing user accessibility and usability, a foundation for a compelling user journey.
Milestone 2: Developing a Layout
For this milestone, I established a robust layout as the framework for all future routes. I explored two layout options, considering trade-offs in functionality and visual appeal. This layout would serve as the foundation for smooth navigation through the application's various features.
Milestone 3: Developing a View Collection Route
Creating a collection view route was a significant step, enabling users to browse and delve deeper into various collections. Through local database queries, I displayed lists of collections while maintaining seamless navigation and responsiveness.
Milestone 4: Developing a Data Page with Find Similar Functionality using Recommendation API
In this milestone, I built a data page enriched with a recommendation API feature. Users can explore and find similar data points based on their selected ID. By fetching data from local databases and leveraging the recommendation API, I empowered users to efficiently navigate through their data.
Milestone 5: Developing the Query Editor Page Libraries
For this milestone, I introduced a query editor page with custom language support. I integrated features like syntax highlighting, autocomplete, and error checking. By utilizing the Monaco Editor package, I created a user-friendly environment for writing custom queries and interacting with the local server.
Milestone 6: Developing a Route for Vector Visualization and Nearest Data Finding
In this milestone, I designed a route that enables users to visualize vector data and discover the nearest available data points. Employing dimension reduction techniques, I transformed high-dimensional vectors into a 2D space. Users can customize their view, select specific vectors, and interact with the data through a visually pleasing interface.
-
Console UI - Intail design of Console page
-
History Mode - Implement a feature which save history of Query which are run by query page
-
Console Allow Comments - Allowing comment feature in queries
-
Fixed Bugs (Eslint-warning) - Fixing Eslint warning
-
Theme Related Issues - Defining Proptyes for ErrorNotifier
-
Saved Code Feature added v2 - This feature helped users Save Current state of Console Editor
-
Page for collections - Intial setup for view collections page, here user is able to see list of collections and preform further actions on collections.
-
collections view Add confirmation dialog on collection delete enhancement - Here a Confirmation Dialog for delete collections is added in collection page.
-
Page for viewing collection content enhancement - Here the layout is change to support nested json in payload.
-
Recomendation view data enhancement - Here use can find similar point using Recomendation API.
-
CRA-to-Vite - Intailly the project in on Create React App which shifts to Vite for proformance enhancements.
-
Control+Enter Hotkey to Run Code in Console v2 - Feature on console Page where user is able to run selected query using control/command + Enter
-
Image Feature View Point v2 - Here this feature is in view points page, this try to parse the payload and search for image if there is any image link then that will display it in image along with json
-
Sidebar Change - Toggle feature is implemented in sidebar.
-
Vector Viualization Implemented a filter editor window for users to customize point filtering. - A filter editior is added selecting point to visualize and other configs.
-
Visualization Page Dimension reduction - n-Dimensional vectors are reduced to 2 dimension vector using Tsne algorithm
-
Vector Visualization Page Graph - Those reduced point are visualized in Graph using chart js
-
Console loading effect Added - Loading effect is added in console page when user run a query.
-
History Local Storage Quota Overflow Fixed Bug - Fixed a bug where history is not saved when local storage quota is full.
-
Saved Code Feature added enhancement
- Closed on Apr 3
- Closed in favour of Saved Code Feature added v2.
- Reason: Another version of mine is accepted
-
- Closed on Apr 29
- Closed in favour of CRA-to-Vite
- Reason: We decided not to switch to Ts due to time constraints.
-
BUG Code Lens is Get Registered multiple times.
- Closed on Apr 11
- Closed in favour of fix lenses bug.
- Reason: My mentor find a better way to solve that bug.
-
image-fetaure-view-point enhancement
- Closed on May 5
- Closed in favour of Image Feature View Point v2.
- Reason: Another version of mine is accepted
-
Console Headline Autocomplete enhancement
- Closed on Jun 2
- Closed in favour of add autocomplete using autocomplete-openapi package.
- Reason: My mentor find a better way to solve this issue i.e. Making a seperate package which will give autocomplete suggestions.
As of now, all six milestones have been successfully completed, and every planned aspect of the project has been executed with diligence and expertise. With a comprehensive range of bug fixes, UI enhancements, and feature implementations accomplished, every task that was part of the project's roadmap has been ticked off. This successful completion stands as a testament to the team's commitment, innovation, and collaborative spirit.
While the vast majority of the work has been completed and merged, there are a few minor enhancements and optimizations that could be further integrated into the project. Specifically, refining the autocomplete feature to support key-value suggestions in JSON structures, integrating the console's error checker with OpenAPI for improved error detection, and exploring additional methods to enhance the performance of vector visualization are areas that can be further worked on to enhance the overall user experience and functionality of the web UI.
Participating in the Google Summer of Code 2023 and working on the "Web UI for Visualization and Exploration" project has been an immensely rewarding experience. I am grateful for the opportunity to contribute to Qdrant and develop a user-friendly interface for vector data exploration.
I want to express my gratitude to my mentors and the entire Qdrant community for their support and guidance throughout this journey. This experience has not only improved my coding skills but also instilled a deeper passion for web development and data analysis.
As my coding journey continues beyond this project, I look forward to applying the knowledge and experience gained here to future endeavours. I am excited to see how Qdrant evolves with the newly developed web UI and how it positively impacts users worldwide.
Thank you for joining me on this coding adventure, and I hope to share more exciting projects in the future! Happy coding!