Dashboard Graph diagram max size causes clutter

[tscurtu]

When we have more Run box elements than fit in the diagram's max size, they are render on top of each other:

[chance-sematic]

I cannot repro this behavior on my side. I couldn't see it on either

https://chance.dev-usw2-sematic0.sematic.cloud/runs/3d330b983f1542bbad8305a99bc30b0f#panel=dag
nor
https://tudor.dev-usw2-sematic0.sematic.cloud/runs/049d3957085443b3aacf8a65b4cfccc2#panel=dag

Though I can clearly see it in your screenshot. I guess it might be because a node is moved during the graph is being produced, and the previous position of the node is memorized. If this is the case, I guess there is not much we can do, because we can't always reset the node position on every graph update after the user has touched that node, it might look like jiggering.

[tscurtu]

I believe this is caused by a max diagram setting being imposed. This only happens on the nodes that are rendered on the right side of the diagram. At the beginning of the execution, all nodes fit in the diagram, but as they were dynamically generated and added, they became cluttered.

Reproduction command:

$ bazel run sematic/examples/testing_pipeline:__main__ -- \
      --cloud \
      --detach \
      --max-parallelism 10 \
      --inline \
      --nested \
      --no-input \
      --sleep 10 \
      --spam-logs 1000 \
      --fan-out 10 \
      --raise-retry 0.7 \
      --external-resource \
      --expand-shared-memory \
      --cache-namespace test \
      --images \
      --virtual-funcs \
      --fork-subprocess return 0 \
      --fork-subprocess exit 0 \
      --fork-subprocess exit 1 \
      --fork-subprocess signal 2 \
      --fork-subprocess signal 15