antvis / antvis/Graphin

Legend.Node in Graphin package assumes bindType is Node in click handler. Throws `item.getEdges` is not a function error on item click.

Open
#472 2 comments 0 reactions 1 assignee Claimed by @yangzy0603 View on GitHub
bug
Dominant language
TypeScript
Stars
1.1k
Forks
275
PR merge metrics
No merged PRs in 30d

Description

### Describe the bug

When you use the `Legend` component from the `graphin` library (not the `graphin-components` package) and you pass `bindType='edge'` it throws an exception onClick because the click handler assumes the legend items are related to a node.
You can see the bug [here](https://github.com/antvis/Graphin/blob/deca5f53020f6ebd4b6a31c8ed26858ab67e403d/packages/graphin/src/components/Legend/Node.tsx#L50) in the Legend/Node.tsx file.
```ts
// from graphin/src/components/Legend/Node.tsx#L50
const handleClick = (option: OptionType) => {
const nodes = dataMap.get(checkedValue.value);
...
// @ts-ignore
nodes.forEach((node: any) => {
graph.setItemState(node.id, 'active', checkedValue.checked);
graph.setItemState(node.id, 'inactive', !checkedValue.checked);
const { id } = node;
const item = graph.findById(id) **as INode**;
const edges = item.getEdges();
edges.forEach(edge => {
graph.setItemState(edge, 'normal', checkedValue.checked);
graph.setItemState(edge, 'inactive', !checkedValue.checked);
})
});

onChange(checkedValue, result);
};
```
The assumption that the item is an `INode` is the problem here since an `IEdge` would not have the `getEdges` function.
It results in an error like this
`TypeError: item.getEdges is not a function`
![image](https://user-images.githubusercontent.com/57726991/224136166-88f695e6-9ed3-49e3-bc99-45e9b8355228.png)

Secondarily, if you use `bindType` as `node` the click handler breaks with a different error
`TypeError: onChange is not a function`
![image](https://user-images.githubusercontent.com/57726991/224138678-3f480f8f-7039-4433-859d-0359020acd82.png)

Update: This callback was introduced in [this commit](https://github.com/antvis/Graphin/commit/66f2ae64256c34a855fd317dfa05aebd231cbf77)

### Your Example Website or App

https://codesandbox.io/s/legend-bug-repro-package-2-0pzsjd?file=/App.tsx

### Steps to Reproduce the Bug or Issue

Open the [sandbox](https://codesandbox.io/s/legend-bug-repro-package-2-0pzsjd?file=/App.tsx)
Click a legend item to filter

NOTE: if you switch the `bindType` to `node` the click handler throws a different error

### Expected behavior

Should be able to have a legend for either edges or nodes and be able to filter them on the graph accordingly.

### Screenshots or Videos

![Legend Bug repro](https://user-images.githubusercontent.com/57726991/224139296-ae85e6cb-456f-473d-bbb3-2f334865b444.gif)

### Platform

- OS: Windows
- Browser: Edge
- Version: 112.0.1704.0

### Additional context

_No response_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.