Feature Request: Allow passing `data` property to individual Ports

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"
    }
});

CleanShot 2023-08-09 at 17 19 14

References

types.ts file

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 🤔😢

CleanShot 2023-08-09 at 17 47 25

Steps to reproduce

Clone reaflow repo
npm i
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
```
Add data property to a node inside of the Port.stories.tsx file:

Port.stories.tsx

```ts 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 ```

reaviz / reaflow