antvis / antvis/Graphin

Legend doesn't work when BindType='edge'

Open
#471 1 comment 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 I pass the BindType='edge' into the Legend control, it throws an exception.
`TypeError: Cannot read properties of undefined (reading 'options')`
![image](https://user-images.githubusercontent.com/57726991/224114159-8e81df8c-bb41-4cbb-8293-98cf27385e6f.png)

Example
```ts
import { Legend } from '@antv/graphin-components';

```

I suspect this is because the LegendNode is looking in the wrong place on the context. It always checks `legend.node` instead of `legend['bindType']`. See [here](https://github.com/antvis/Graphin/blob/deca5f53020f6ebd4b6a31c8ed26858ab67e403d/packages/graphin-components/src/Legend/Node.tsx#L32).
```ts
// from Legend/Node.tsx#L32
const { options: defaultOptions, dataMap } = legend.node;
const [state, setState] = React.useState({
options: defaultOptions,
});
```

The value gets set on `legend['bindType']` in the parent component [here](https://github.com/antvis/Graphin/blob/deca5f53020f6ebd4b6a31c8ed26858ab67e403d/packages/graphin-components/src/Legend/index.tsx#L173)
```ts
// from Legend/index.tsx#L173
graphin.legend = {
...graphin.legend,
// 一个Graphin组件下,最多仅有2个Legend组件:node和edge
[bindType]: {
bindType,
sortKey,
colorKey,
dataMap,
options,
},
};
```

### Your Example Website or App

https://codesandbox.io/s/legend-bug-repro-3mk71p?file=/App.tsx

### Steps to Reproduce the Bug or Issue

Sandbox - https://codesandbox.io/s/legend-bug-repro-3mk71p?file=/App.tsx
You can see that when the `bindType` is `edge` there is an exception thrown. But if you set that same value to `node` then things go smoothly.
As mentioned before, that seems related to this line [here](https://github.com/antvis/Graphin/blob/deca5f53020f6ebd4b6a31c8ed26858ab67e403d/packages/graphin-components/src/Legend/index.tsx#L173).

### Expected behavior

Should be able to render the same way in the DOM for both Nodes & Edges.

### Screenshots or Videos
![Bug repro](https://user-images.githubusercontent.com/57726991/224124887-fc43b9c4-8f50-4cfd-899f-1d01416dc4b1.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.