Animate default edges in Resources Explorer

[AllieMendes]

Currently only dashed lines are animated. We also would like to get the default deges animating by having a pulsating effect on the gradient in the direction the data flows.

We already tried it but the graph crashes with an undefined color error and we weren't able to figure out yet why.

The current animation config looks like

export const edgeAnimationConfig = [
  {
    zoom: { level: 1 },
    easing: 'linear',
    style: {
      'line-dash-offset': 24,
      'line-dash-pattern': [4, 4]
    }
  },
  {
    duration: 4000
  }
];

and this is being picked up by the animation handler inside komiser/dashboard/components/explorer/DependencyGraph.tsx:40

// Type technically is Cytoscape.EdgeCollection but that throws an unexpected error
 const loopAnimation = (eles: any) => {
   const ani = eles.animation(edgeAnimationConfig[0], edgeAnimationConfig[1]);

   ani
     .reverse()
     .play()
     .promise('complete')
     .then(() => loopAnimation(eles));
 };

A potential solution might be https://github.com/sgratzl/cytoscape.js-layers?tab=readme-ov-file#edge-animations but there definitely needs to be some investigation done. Also it needs to perform pleasantly with a LOT of nodes. Our average assumption of infrastructure sizes of our customers is within the range of 500 to 50k of nodes/services so please keep that in mind.

[jolo-dev]

@AllieMendes Do you intend to have a lightning effect as in the link you provided or could it be something like this (dashed-line animation):

https://github.com/tailwarden/komiser/assets/54506108/49558b55-955e-4654-bf6d-5b3ea2561fa2

[Traxmaxx]

Hey @jolo-dev, we already have the dashed-line animation working for backups. The goal is that the edge animation is working as in the designs. If this is not possible we might need to go back to the drawing board 🤔

[jolo-dev]

@Traxmaxx alright. I thought so. Let's see how far I get

[jolo-dev]

@Traxmaxx and @AllieMendes How that looks like?

https://github.com/tailwarden/komiser/assets/54506108/c5ad62e7-9917-4e44-86b0-9a7ab9b351bd

[AllieMendes]

@Traxmaxx and @AllieMendes How that looks like?

Screen.Recording.2023-10-27.at.16.27.10.mp4

The effect looks amazing! I noticed it was two-way, but I believe the connection is not usually two-way — is it possible to have it in one direction only for the appropriate cases?