feat: support preview and upstream/downstream trace (#2)

Co-authored-by: lipengfei <[email protected]>

README.cn.md

@@ -22,8 +22,8 @@
 * 检索/点击图计算系统节点实现引用链路分析，并区分直接、间接、双向引用关系。
 * 拖曳图计算系统节点查看引用和被引用关系。
 * 收录了部分图计算系统产品，统一挂载到根节点`Graph Database`下。
-* 查看图计算系统原始论文或产品官网。**【待开发】**
-* 更丰富的数据和交互形态。**【待开发】**
+* 查看图计算系统原始论文或产品官网。
+* 支持上下游追踪与直接邻居查看。
 
 ## 系统列表
 
@@ -32,12 +32,12 @@
 ## 代码贡献
 
 * 项目只依赖前端组件[vis.js](https://visjs.org/)，要对图谱数据进行调整，只需要修改`index.html`文件中`nodes`和`edges`的定义。
-* 新增图计算系统论文节点，如`{id: 'Pregel', label: 'Pregel'},`。
-  - 论文节点使用`_paper`属性指定论文标题，如`{id: 'GeaFlow', _paper: 'GeaFlow: A Graph Extended and Accelerated Dataflow System'},`。
-  - 论文/产品可以使用`_website`属性指定关联网址，如`{id: 'TuGraph', _website: 'https://tugraph.tech'},`。
-  - 产品节点只需要标记`_type`属性为`db`即可，如`{id: 'TuGraph', color: 'white', _type: 'db'},`，并使用白色背景。
+* 新增图计算系统论文节点，如`{id: 'Pregel'},`。
+  - 使用`_paper`属性指定论文标题，如`{id: 'GeaFlow', _paper: 'GeaFlow: A Graph Extended and Accelerated Dataflow System'},`。
+  - 使用`_website`属性指定关联网址，如`{id: 'TuGraph', _website: 'https://tugraph.tech'},`。
+  - 设置`_type: 'db'`表示产品节点，如`{id: 'TuGraph', _type: 'db'},`。
 * 新增图计算系统论文/产品引用，如`{from: 'GeaFlow', to: 'TuGraph'},`。
-  - 双向引用需要标记为红色双向箭头格式。如`{from:'GraphChi',to:'PowerGraph',color:'red',arrows:{to:{enabled:true,scaleFactor:1},from:{enabled:true,scaleFactor:1}}},`表示`GraphChi`和`PowerGraph`存在互相引用（同时发表于OSDI-2012）。
+  - 设置属性`_bidirectional: true`表示双向引用。如`{from: 'GraphChi', to: 'PowerGraph', _bidirectional: true},`，表示`GraphChi`和`PowerGraph`存在互相引用（同时发表于OSDI-2012）。
 * 新增论文统一放到`papers/<图系统名>.pdf`路径，并按字母序修改`docs/graph-system-list.md`的引用链接。
 * 受人工整理限制，数据中难免出现错误和遗漏，欢迎大家一起贡献勘误和未录入的论文和产品信息。
 

README.md

@@ -21,8 +21,8 @@ Download and access the `index.html` file in your browser.
 * Perform citation chain analysis by searching/clicking on graph computation system node and distinguish between direct, indirect, and bidirectional citation relationships.
 * Drag graph computation system node to view reference and citation relationships.
 * Includes some graph computation system products, all mounted to the root node `Graph Database`.
-* View the original paper or product websites of graph computation systems. **[In Development]**
-* More rich data and interactive forms. **[In Development]**
+* View the original paper or product websites of graph computation systems.
+* Support upstream and downstream tracing and view direct neighbors.
 
 ## System List
 
@@ -31,12 +31,12 @@ All graph system papers/products are provided [**HERE**](docs/graph-system-list.
 ## Contributing
 
 * The project only relies on the front-end component [vis.js](https://visjs.org/). To adjust the graph data, simply modify the definitions of `nodes` and `edges` in the `index.html` file.
-* To add a new graph system paper node, for example, `{id: 'Pregel', label: 'Pregel'},`.
-  - For paper node, set `_paper` attribute as paper's title, for example, `{id: 'GeaFlow', _paper: 'GeaFlow: A Graph Extended and Accelerated Dataflow System'},`.
-  - Papers/products can set `_website` as relevant web url, for example, `{id: 'TuGraph', _website: 'https://tugraph.tech'},`.
-  - For product node, just mark the `_type` attribute as `db`, for example, `{id: 'TuGraph', color: 'white', _type: 'db'},`, which uses white background color.
+* To add a new graph system paper node, for example, `{id: 'Pregel'},`.
+  - Set `_paper` attribute as paper's title, for example, `{id: 'GeaFlow', _paper: 'GeaFlow: A Graph Extended and Accelerated Dataflow System'},`.
+  - Set `_website` as relevant website, for example, `{id: 'TuGraph', _website: 'https://tugraph.tech'},`.
+  - Set `_type: 'db'` indicates a product node, for example, `{id: 'TuGraph', _type: 'db'},`.
 * To add citation of graph system papers/product, for example, `{from: 'GeaFlow', to: 'TuGraph'},`. 
-  - For bidirectional citation, mark it as a red bidirectional arrow, for example, `{from:'GraphChi',to:'PowerGraph',color:'red',arrows:{to:{enabled:true,scaleFactor:1},from:{enabled:true,scaleFactor:1}}},` indicating `GraphChi` and `PowerGraph` cite each other (both presented at OSDI-2012).
+  - Set `_bidirectional: true` indicates bidirectional citation, for example, `{from: 'GraphChi', to: 'PowerGraph', _bidirectional: true},` indicating `GraphChi` and `PowerGraph` cite each other (both presented at OSDI-2012).
 * Add new paper to the path `papers/<GraphSystemName>.pdf` and update the reference links in `docs/graph-system-list.md` in alphabetical order.
 * Due to manual organization, errors and omissions in the data are inevitable. Contributions for corrections and missing papers or product information are welcome.
 

docs/graph-system-list.md

@@ -25,8 +25,8 @@
 * DZiG: [Sparsity-Aware Incremental Processing of Streaming Graphs](../papers/DZiG.pdf)
 * DepGraph: [A Dependency-Driven Accelerator for Efficient Iterative Graph Processing](../papers/DepGraph.pdf)
 * DiGraph: [An Efficient Path-based Iterative Directed Graph Processing System on Multiple GPUs](../papers/DiGraph.pdf)
-* Differential dataflow: [Differential dataflow](../papers/Differential dataflow.pdf)
-* Distributed GraphLab: [A Framework for Machine Learning and Data Mining in the Cloud](../papers/Distributed GraphLab.pdf)
+* Differential dataflow: [Differential dataflow](../papers/Differential%20dataflow.pdf)
+* Distributed GraphLab: [A Framework for Machine Learning and Data Mining in the Cloud](../papers/Distributed%20GraphLab.pdf)
 * DiterGraph: [Toward I/O-Efficient Incremental Computation over Large Graphs with Billion Edges](../papers/DiterGraph.pdf)
 * DynamoGraph: [A Distributed System for Large-scale, Temporal Graph Processing, its Implementation and First Observations](../papers/DynamoGraph.pdf)
 * EGraph: Efficient concurrent GPU-based dynamic graph processing
@@ -54,7 +54,7 @@
 * GasCL: [A Vertex-Centric Graph Model for GPUs](../papers/GasCL.pdf)
 * GeaFlow: [A Graph Extended and Accelerated Dataflow System](../papers/GeaFlow.pdf)
 * Gemini: [A Computation-Centric Distributed Graph Processing System](../papers/Gemini.pdf)
-* Giraph Unchained: [Barrierless Asynchronous Parallel Execution in Pregel-like Graph Processing Systems](../papers/Giraph Unchained.pdf)
+* Giraph Unchained: [Barrierless Asynchronous Parallel Execution in Pregel-like Graph Processing Systems](../papers/Giraph%20Unchained.pdf)
 * [Giraph](http://giraph.apache.org)
 * GoFFish: [A Sub-graph Centric Framework for Large-Scale Graph Analytics](../papers/GoFFish.pdf)
 * GraPU: [Accelerate Streaming Graph Analysis through Preprocessing Buffered Updates](../papers/GraPU.pdf)
@@ -191,7 +191,7 @@
 * VENUS: [A System for Streamlined Graph Computation on a Single PC](../papers/VENUS.pdf)
 * VGL: a high-performance graph processing framework for the NEC SX-Aurora TSUBASA vector architecture
 * VeilGraph: [Approximating Graph Streams](../papers/VeilGraph.pdf)
-* Version Traveler: [Fast and Memory-Efficient Version Switching in Graph Processing Systems](../papers/Version Traveler.pdf)
+* Version Traveler: [Fast and Memory-Efficient Version Switching in Graph Processing Systems](../papers/Version%20Traveler.pdf)
 * Weaver: [A High-Performance, Transactional Graph Database Based on Refinable Timestamps](../papers/Weaver.pdf)
 * WolfGraph: [the Edge-Centric graph processing on GPU](../papers/WolfGraph.pdf)
 * Wonderland: [A Novel Abstraction-Based Out-Of-Core Graph Processing System](../papers/Wonderland.pdf)