Legend doesn't work when BindType='edge'

[msnyder-msft]

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')

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

Platform

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

Additional context

No response

[pomelo-nwu]

• https://github.com/antvis/G6VP/issues/295#issuecomment-1565922720