Feature Request: Allow passing data property to individual Ports

[cliffordfajardo]

Description

It would be useful if port objects supported the data property that Node and Edge's support (types.ts file).
This would allow the user to add additional meta information about the port

Motivation for feature

I have a device with 2 ports; 1 on the left and one on the right
This port is connected to multiple other edges / nodes on the canvas from a user point of view

I'd like to be able to check port.data, which contains my own data, before modifying a port object.
In the example below, I added red-port class to a port that I didn't intentionally intent to (the left red port in the image)
I was doing something like this:

reaflowNode.ports.forEach(port => {
      port.className = "red-port"
});

then , realized after looking at my code, that the concept of data for port didn't exist.

Having data on port objects, would allow users to conditionally operate on the port

reaflowNode.ports.forEach(port => {
    if(port.data.remote_hostnames.includes('SOME_VALUE')){
        port.className = "red-port"
    }
});

References

• types.ts file

[cliffordfajardo]

I tried adding data directly on the port objects and I get an error. It looks like its from Elkjs?
Maybe the elkjs library doesn't like port objects with data property on them 🤔😢

Steps to reproduce

1. Clone reaflow repo
2. npm i
3. run the following commands to get the dev server running and story book: (separate terminal tabs)

tab1: npm run build:watch
tab2: npm run start

3. Add data property to a node inside of the Port.stories.tsx file:

Port.stories.tsx

nodes={[
        {
          id: '1',
          text: 'Node 1',
          ports: [
            {
              id: '1-from',
              width: 10,
              height: 10,
              side: 'SOUTH',
              data: {
                hostnames: 'test',
                remote_hostnames: ['']
              }
            },
            {
              id: '1-to',
              width: 10,
              height: 10,
              side: 'NORTH',
              data: {
                hostnames: 'test',
                remote_hostnames: ['']
              }
            }
          ]
        },
        {
          id: '2',
          text: 'Node 2',
          ports: [
            {
              id: '2-from',
              width: 10,
              height: 10,
              side: 'SOUTH',
              data: {
                hostnames: 'test',
                remote_hostnames: ['']
              }
            },
            {
              id: '2-to',
              width: 10,
              height: 10,
              side: 'NORTH',
              data: {
                hostnames: 'test',
                remote_hostnames: ['']
              }
            }
          ]
        }
      ]}

Stacktrace

Layout Error: Error: java.lang.Error: Severe implementation error in the Json to ElkGraph importer.
    at vcb.$y [as Wd] (elk.bundled.js:6353:88251)
    at vcb.ez [as _d] (elk.bundled.js:6353:88512)
    at vcb.Yy (elk.bundled.js:2713:48)
    at new vcb (elk.bundled.js:1385:20)
    at aqd (elk.bundled.js:5211:184)
    at Bqd (elk.bundled.js:3644:56)
    at Drd.Erd [as td] (elk.bundled.js:6353:395495)
    at reb (elk.bundled.js:3461:67)
    at grd (elk.bundled.js:5054:171)
    at Fqd (elk.bundled.js:5542:238)
    at drd (elk.bundled.js:5312:176)
    at lqd (elk.bundled.js:4935:155)
    at Zqd (elk.bundled.js:4113:75)
    at drd (elk.bundled.js:5312:202)
    at qvd (elk.bundled.js:5982:142)
    at h.dispatch (elk.bundled.js:6287:473)
    at h.saveDispatch (elk.bundled.js:6287:603)
    at elk.bundled.js:6288:162
(anonymous) @ useLayout.ts:133
Promise.catch (async)
(anonymous) @ useLayout.ts:129
commitHookEffectListMount @ react-dom.development.js:23150
commitPassiveMountOnFiber @ react-dom.development.js:24926
commitPassiveMountEffects_complete @ react-dom.development.js:24891
commitPassiveMountEffects_begin @ react-dom.development.js:24878
commitPassiveMountEffects @ react-dom.development.js:24866
flushPassiveEffectsImpl @ react-dom.development.js:27039
flushPassiveEffects @ react-dom.development.js:26984
(anonymous) @ react-dom.development.js:26769
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
Show 11 more frames