[Bug Report] Memory Diagram not showing edges properly

[MarkChenYutian]

Describe the bug

Occasionally, the memory diagram view of Debug Console does not render the edges in memory diagram. The nodes and handles on node are rendered correctly but the edge disappear.

⚠️ Notes

1. This bug might be related with third-party library ReactFlow we used for rendering flow graph
2. This bug might be related with browser compatibility, there are reports showing that this bug does not exist on FireFox.

To Reproduce
Steps to reproduce the behavior:

1. Compile the following code

#use <conio>
#use <util>
#use <string>

struct mess{
    char* u;
    int*  w;
    int**  x;
    int** y;
    int[] z;
};
typedef struct mess* mess_t;

int main() {
    int n = 4;
    int *a = alloc(int);
    int *b = alloc(int);
    int *c = alloc(int);
    int[] d = alloc_array(int, n);
    int **e = alloc(int*);
    mess_t m = alloc(struct mess);
    *a = 4;
    *b = n * (*c);
    *c = n + d[0];
    d[0] = n;
    d[1] = *b;
    m->x = e;
    *m->x = b;
    m->y = e;
    *(*m->y) = *a;
    m->w = a;
    m->z = d;
    return 1;
}

3. Switch the debug view to graphical view
4. Execute to the line m -> x = e;
5. The pointer between struct m and e does not show on the graphical debug console.

Expected behavior

An edge should exist between m.x and e.

Screenshots

Code being executed

As shown above

Additional context

This problem might be related with xyflow/xyflow#3171

[MarkChenYutian]

This is fixed temporarily by force to re-render the graphical debug console on every step.

[moklick]

You are using an old version of React Flow. Please use the new package reactflow with v11. When that's done, I can check this issue again.

[MarkChenYutian]

Thanks for replying! I will ping you back when I finished the upgrade for ReactFlow.

[MarkChenYutian]

@moklick Hi, I have bumped the version of ReactFlow to v11, but the issue still persists. Currently, I have to add a "key" prop to the graphical debug component to force re-render on every step.