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

[wouldmm]

新建了一个文件夹用于新特性，鼠标放置能显示相关节点。

为了方便实现，修改了Graph里面的tooltip，以及repo-network特性里面的两个class名称

目前存在的问题是，我是使用阈值来控制显示的邻接节点。我找不到Graph使节点高亮的阈值是多少，有许多节点之间是有value，但是并没有在network中高亮出来，我自己找规律找了一些阈值使得表格中仅仅显示高亮的节点。

[CLAassistant]

All committers have signed the CLA.

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[wouldmm]

具体实现的样例如下图，并且鼠标挪开后能显示原来的文字

[wxharry]

Hi first-time contributor, welcome to the community. I can help with your questions. But it seems like your branch is not building, could you please fix it for me first. Thanks

BTW, Please remember to sign the CLA.

[wouldmm]

I'm not sure if this error is caused by the mistake that I pulled the yarn.lock file to branch. It seems that some of the code in yarn.lock is updated automatically, and I didn't take the initiative to change it.

I'm now trying to cancel the yarn.lock changes, and it seems that the pull request automatically synchronizes the change for me. I don't know if I'm doing it correctly or if I need to do a new pull request?

[wxharry]

I'm not sure if this error is caused by the mistake that I pulled the yarn.lock file to branch. It seems that some of the code in yarn.lock is updated automatically, and I didn't take the initiative to change it.

I'm now trying to cancel the yarn.lock changes, and it seems that the pull request automatically synchronizes the change for me. I don't know if I'm doing it correctly or if I need to do a new pull request?

It is fine. yarn.lock should be included, you don't need to worry about it. read more here

[wouldmm]

I can run the project in my computer, I don't know why there is a build error. It seems to missing file "manifest.json"

[wouldmm]

Sorry, I accidentally clicked on the resolve conversation, which caused one of your suggestion records to disappear

I followed your suggestion, but I don't know how to use showTip to determine the movement of the mouse because I tried but didn't succeed. On the contrary, I used mouseover to implement it. I don't know if the code logic for rendering the table is correct because I have never done a similar task before.

And Thank you for your patient guidance. I haven't learned much about the relevant knowledge, I just want to pass the assessment. Please forgive me if there are any areas where my code is not good.

[wxharry]

You can leave other issues aside. The first thing to do is to make it react component level. It is not a browser extension level task but a very basic one. Please follow the instructions:

1. add an event handler to Graph. a. Add a new prop to GraphProp, it should be a function b. Implement the prop in Graph. Call the function whenever a tooltip shows and hides(You can use whatever works for you, either mousehover or tooltipshown). When it is triggered, giving needed params and whether it is shown or hidden. (simliar to what you have already did) c. Give a handle function in src/pages/ContentScripts/features/repo-networks/view.tsx. You don't need a index.tsx, what you need to have a new function and pass it to the Graph element. This function handles the data like you did in the index.tsx

The expected output for 1) should be like this:

// in src/pages/ContentScripts/features/repo-networks/view.tsx
// You have a function to handle data
const onProjectCorrelationNetworkNodeToolTipChange = (params:any)=>{
// parse data here
}

<Graph data={repoNetwork} style={graphStyle} focusedNodeID={currentRepo} 
           onToolTipChange={onProjectCorrelationNetworkNodeToolTipChange} />

// Graph element has something like this
const Graph: React.FC<GraphProps> = ({ data, style = {}, focusedNodeID, onToolTipChange: onToolTipChange }) => {

2. Change graph description visibility a. create two new booleans using useState for graphs b. Set the variables based on Tooltip change in onProjectCorrelationNetworkNodeToolTipChange c. make description show and hide using the variables something like this:

const [projectDescriptoinShow, SetProjectDescriptoinShow] = useState(true)
...
const onProjectCorrelationNetworkNodeToolTipChange = (params:any)=>{
SetProjectDescriptoinShow (true/false)
}
...
            { projectDescriptoinShow & 
<div className="color-text-secondary-2" style={{ marginLeft: '35px', marginRight: '35px' }}>
              <p>{t('component_projectCorrelationNetwork_description')}</p>
              <ul style={{ margin: '0px 0 10px 15px' }}>
                <li>{t('component_projectCorrelationNetwork_description_node')}</li>
                <li>{t('component_projectCorrelationNetwork_description_edge')}</li>
              </ul>
            </div>
}

3. Have a component to show tables a. Add a Table.tsx file. To create a component, reference tosrc/components/TooltipTrigger/index.tsx as this is a super simple one. You need to change the name, props, and content. b. Add Table to the view, pass any parameters needed.

What is expected: { projectDescriptoinShow ? <div className="color-text-secondary-2" style={{ marginLeft: '35px', marginRight: '35px' }}>

{t('component_projectCorrelationNetwork_description')}

<ul style={{ margin: '0px 0 10px 15px' }}>

{t('component_projectCorrelationNetwork_description_node')}

{t('component_projectCorrelationNetwork_description_edge')}

: <Table data={tableData} /> }

These are easy code to work on, you just need less than an hour to know all these and another one to make it work. This may be just a course for you but it is not for me. Please show your efforts.

[wouldmm]

Thank you so much for your patient help. You are really smart, and your suggested method is something I hadn’t thought of. I have done my best to complete this task and hope I won't disappoint you this time.

[wxharry]

Thank you so much for your patient help. You are really smart, and your suggested method is something I hadn’t thought of. I have done my best to complete this task and hope I won't disappoint you this time.

Good job this time. Will take a look later today. Thanks for you contributions.

[wouldmm]

Thanks again for your paitent guidence.

[wouldmm]

I modified the code according to your suggestion. In addition, I considered that if the table is too long and I want to view more complete node data, the table will disappear when the mouse moves out of the graph. My current approach is that when the mouse moves into the right component, the table will reappear. And I added a hyperlink to the data of each node. I don't know if this solution is reasonable.

[wxharry]

I modified the code according to your suggestion. In addition, I considered that if the table is too long and I want to view more complete node data, the table will disappear when the mouse moves out of the graph. My current approach is that when the mouse moves into the right component, the table will reappear. And I added a hyperlink to the data of each node. I don't know if this solution is reasonable.

Not sure this is a good design. cc @HalloMelon. Do you have any idea how to properly handle this problem?

[wxharry]

@wouldmm Let's add an icon and a tooltip for description and show table on mouse hovering. The table should use current repo as by default(for the first time we open the perceptor tab, show the table for hovering on the current repo node)

You can find the code in options page.

I noticed you use links as repo name, it is useful. Well done! Should be able to merge after this change.

[wouldmm]

I tried to add a tooltip to display text, which was basically implemented, but after adding it, the graph moved to the left. I tried many ways but still couldn't fix this problem. And when I press F12 to view the web developer, the graph suddenly jumps to the center. Sorry, I don't know what to do.

[wxharry]

I tried to add a tooltip to display text, which was basically implemented, but after adding it, the graph moved to the left. I tried many ways but still couldn't fix this problem. And when I press F12 to view the web developer, the graph suddenly jumps to the center. Sorry, I don't know what to do.

Looks like it is because of the Popover. Replace it with NativePopover fix this problem.

[wouldmm]

I‘ve changed the Popover to NativePopover.