|
1 | | -# Google Summer of Code 2024 project report |
| 1 | +# Google Summer of Code 2024 Project Report |
2 | 2 |
|
3 | 3 | ## Proposal Link |
4 | 4 | [AIIDA-GOOGLE SUMMER OF CODE 2024](https://docs.google.com/document/d/1VQOJ9eUC1KmGdjK3tjwNfsAXz1ttTVwR7MdOs2SziRA/edit?usp=sharing) |
5 | 5 |
|
6 | | -## Github Repo |
| 6 | +## GitHub Repository |
7 | 7 | [aiida-explorer](https://github.com/aiidateam/aiida-explorer) |
8 | 8 |
|
9 | | -### **Mentors:** |
10 | | -- **Kristjan Eimre** |
11 | | -- **Edan Bainglass** |
12 | | -- **Xing Wang** |
13 | | -- **Jusong Yu** |
| 9 | +### Mentors: |
| 10 | +- Kristjan Eimre |
| 11 | +- Edan Bainglass |
| 12 | +- Xing Wang |
| 13 | +- Jusong Yu |
14 | 14 |
|
15 | 15 | --- |
16 | 16 |
|
17 | | -## **Project Overview** |
| 17 | +## Project Overview |
18 | 18 |
|
19 | | -The objective of this project is to develop an **intuitive tool in React** for browsing **AiiDA graphs**, effectively replacing the **outdated AiiDA Provenance Browser** currently used in **Materials Cloud Explore**. |
| 19 | +The goal of this project is to build an easy-to-use tool in React for exploring AiiDA graphs. This tool will replace the old AiiDA Provenance Browser currently used in Materials Cloud Explore. |
20 | 20 |
|
21 | | -This new tool will interface seamlessly with AiiDA via a **REST API**, allowing users to: |
| 21 | +The new tool connects smoothly with AiiDA using a REST API, and it lets users: |
22 | 22 |
|
23 | | -- **Dynamically explore graphs.** |
24 | | -- **Clearly differentiate between input and output nodes.** |
25 | | -- **Fully visualize all connecting nodes.** |
26 | | -- **Preview node details without the need for page redirection.** |
| 23 | +- Explore graphs interactively. |
| 24 | +- Easily see the difference between input and output nodes. |
| 25 | +- View all the nodes connected to each other. |
| 26 | +- Check out node details without needing to open a new page. |
27 | 27 |
|
28 | | -The end goal is to create an **AiiDA node graph viewer** that is both robust and user-friendly, which will be developed in React and potentially published as a reusable component on the npm repository**. |
| 28 | +The final aim is to create a strong and user-friendly AiiDA node graph viewer. This viewer is being built with React and might even be published as a reusable component on the npm repository. |
29 | 29 |
|
30 | 30 | --- |
31 | 31 |
|
32 | | -## **Key Improvements Compared to Previous Version** |
| 32 | +## Key Improvements Compared to the Previous Version |
33 | 33 |
|
34 | | -- **Modernized User Interface:** |
35 | | - - Upgraded the existing interface from **AngularJS to React**, providing a more **streamlined** and **responsive experience**. |
| 34 | +- **Updated User Interface:** |
| 35 | + - The old interface was built with angular.js. We have now upgraded it to React, which makes the tool look and feel smoother and more responsive. |
36 | 36 |
|
37 | | -- **Enhanced Functionality:** |
38 | | - - Added new features that were missing in the previous implementation, ensuring a more **comprehensive tool for users**. |
| 37 | +- **Better Features:** |
| 38 | + - We've added new functions that were missing in the old version, so now users can do more with this tool. |
39 | 39 |
|
40 | | -- **Increased Node Threshold:** |
41 | | - - Expanded the node display limit to handle **larger and more complex graphs effectively**. |
| 40 | +- **Can Handle Larger Graphs:** |
| 41 | + - The tool can now display more nodes at once, which is helpful for working with bigger and more complex graphs. |
42 | 42 |
|
43 | 43 | --- |
44 | 44 |
|
45 | | -## **Project Outcome** |
| 45 | +## Project Outcome |
46 | 46 |
|
47 | | -### **Node Grid Component:** |
| 47 | +### Node Grid Component: |
48 | 48 |  |
49 | 49 |
|
50 | | -The **Node Grid Component** lets you **select the type of Node** you want to explore. Once a type is selected, you can view all possible options available under that category. |
| 50 | +The Node Grid Component allows users to explore nodes by their types. Here’s what it can do: |
51 | 51 |
|
52 | | -### **Node Details Page:** |
| 52 | +- **Filter by Node Type:** You can choose to see only certain types of nodes, like data nodes, process nodes, or computer nodes. |
| 53 | +- **Sort Nodes:** You can sort the nodes based on different fields. |
| 54 | +- **Filter Section and Table:** On the left side of the image, you see the filter options. On the right side, there's a table that lists all the nodes that match the filter. |
| 55 | +- **Details Button:** Each node in the table has a button that takes you to the Node Details Page (described below). |
| 56 | + |
| 57 | +### Node Details Page: |
53 | 58 |
|
54 | 59 |  |
55 | 60 |
|
56 | | -This page displays **detailed information** about the selected Node. If the selected Node has **visualization capabilities**, it can be viewed in the **Rich View**. |
| 61 | +The Node Details Page shows all the important information about a node. You can view the node’s details in two ways: as raw data or in a rich view. |
57 | 62 |
|
58 | | -- **Left Side:** Shows detailed node information. |
59 | | -- **Right Side:** Contains the **main graph component** which helps in visualizing the Node structure and related Nodes. They are arranged in a way that helps to **better segregate** them. |
| 63 | +- **Left Side:** This part of the page shows all the node’s details, like general information, attributes, and extra data. |
| 64 | +- **Right Side:** This part contains a graph that shows how the selected node is connected to other nodes. The nodes are arranged to make it easy to see different types of connections. If you click on another node in this graph, it will open that node's detail page. |
60 | 65 |
|
61 | | -### **Statistics Section:** |
| 66 | +### Statistics Section: |
62 | 67 |
|
63 | 68 |  |
64 | 69 |
|
65 | | -The **Statistics** also contains statistics about the selected Node, providing relevant information depending on the users who created those nodes. |
| 70 | +The Statistics section shows data about the AiiDA database, including general information about the nodes and details about the users who created them. |
66 | 71 |
|
67 | 72 | --- |
68 | 73 |
|
69 | | -## **Future Goals** |
| 74 | +## Future Outlook |
70 | 75 |
|
71 | | -As of now, our implementation supports the **local provenance view**. Looking ahead, we’re planning to introduce the **global provenance view**. |
| 76 | +### Current Functionality: |
| 77 | +Right now, the tool works well for looking at the local provenance view (the view that shows how nodes are connected within a small area). However, there are still some issues: |
72 | 78 |
|
73 | | -This broader perspective will allow you to **visualize interconnected nodes** on a larger scale, rather than focusing solely on a **small subset of nodes**. |
| 79 | +- **Graph Browser Bugs:** Sometimes the connections between nodes appear from the wrong side. |
| 80 | +- **Data Loading Issues:** Occasionally, the data doesn’t load correctly. |
74 | 81 |
|
75 | | ---- |
| 82 | +### Future Goals: |
| 83 | +In the future, we plan to add a global provenance view. This new feature will allow users to see how nodes are connected on a larger scale, not just within a small area. |
| 84 | + |
| 85 | +--- |
0 commit comments