Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Legend doesn't work when BindType='edge' #471

Open
msnyder-msft opened this issue Mar 9, 2023 · 1 comment
Open

Legend doesn't work when BindType='edge' #471

msnyder-msft opened this issue Mar 9, 2023 · 1 comment
Assignees
Labels
bug Something isn't working

Comments

@msnyder-msft
Copy link

msnyder-msft commented Mar 9, 2023

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

Example

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

<Legend bindType={'edge'} sortKey={'data.type'}>
    <Legend.Node />
</Legend>

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.

// 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

// 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.

Expected behavior

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

Screenshots or Videos

Bug repro

Platform

  • OS: Windows
  • Browser: Edge
  • Version: 112.0.1704.0

Additional context

No response

@pomelo-nwu
Copy link
Member

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
Status: No status
Development

No branches or pull requests

3 participants