[OSS101] Task 2: List all adjacent nodes of the hovered node in collaboration networks for quick reference

[tyn1998]

Description

This task originates from #434.

Currently, in HyperCRX, there are several network graphs powered by ECharts that display project collaboration networks or developer collaboration networks. When a user hovers over a node in the network, the node and its adjacent nodes are highlighted, but the names of the adjacent nodes are not displayed. This is due to the consideration that the names of repository-type nodes are lengthy, and displaying all names would lead to overlapping and cluttered content.

How can we display information about all adjacent nodes of the hovered node while keeping the graph clean and uncluttered? One viable solution is shown in the following schematic diagram:

Use the text description area on the right side of the network graph as a container to list the adjacent node information. When the mouse hovers over a node, this container immediately switches to display the list of adjacent node information; when the mouse hovers over another node, the list of adjacent node information changes immediately; when the mouse is not hovering over any node, the container switches back to display the initial text description.

Please implement the solution as depicted in the schematic diagram.

任务描述

此任务来自 #434。

当前，HyperCRX中有若干个网络图，这些由ECharts驱动的网络图展示了项目协作网络或开发者协作网络。当用户将鼠标悬浮到网络中的节点时，节点及其邻接节点会被高亮，但是邻接节点的名称不会显示，这是因为我们考虑到仓库类型的节点名称较长，若都将名称显示会使内容重叠混乱。

如何在保持图表简洁的前提下又能同时显示被鼠标悬浮节点的所有邻接节点信息呢？一个可行的方案如下示意图所示：

将网络图右侧的文字描述部分作为一个承载邻接节点信息列表的容器，当鼠标悬浮到到某个节点上时，该容器立刻切换显示邻接节点信息列表；当鼠标悬浮到另一个节点上时，邻接节点信息列表也马上改变；当鼠标没有悬浮在任何一个节点上时，容器切换显示初始的文字描述。

请实现示意图中的方案。