kie-issues#1773: DMN Editor: Render badges with evaluation status on Decision nodes

[jomarko]

Closes: apache/incubator-kie-issues#1773

TODO

• Create story that would demonstrate badges, it should be very similar story as we have for badges in the boxed expression editor
• use existing evaluationResults prop instead of evaluationStatus that was added in the draft

Success badge - current proposal

Failure badge - current proposal

[thiagoelg]

This looks good @jomarko, thanks for the PR!
Added a single comment regarding re-renders.

[thiagoelg]

This should be a useMemo to avoid unnecessary re-renders

[tiagobento]

@jomarko Would it be possible to make the badges not hide the border of the nodes? Also, how do they look like when they're hovered/selected? Another feedback I have it regarding the alignment. I think the x and ✓ are too left-aligned. Recording a video always helps with reviews :D

[jomarko]

Hi @tiagobento ,

01 hover

There is no behavior for hovering. We didn't define it in the feature definition phase. What is your suggestion for the 'hover' situation?

02 alignment

Should be fixed. I didn't record a video as it is enough to start playbook as pnpm -F @kie-tools/dmn-editor start

03 Border

this is the most problematic as the current border of nodes has width 1.5px. From reading some internet threads, it seems as not ideal to use fractions and pixels together.

I tried to margin my pseudo element with:

1. 1px
2. 1.5px
3. 2px

however there is some rounding and it is never correct result.

1px

1.5px, 2px

for both the same result, 1.5 is rounded to 2

What I could do is to change NodeStyle.ts where we define default stroke width export const DEFAULT_NODE_STROKE_WIDTH = 1.5;, however any change we would do there (1px or 2px) would affect all tests.

[tiagobento]

@jomarko Right... Hmmm... I think the 2px compromise is better? I'd go with the 2px :D