Skip to content

Conversation

@adela-almasan
Copy link
Contributor

@adela-almasan adela-almasan commented Jul 22, 2025

canvas_connections_direction.mov

To Do:

  • Direction editor
  • Update UI
  • Migration
  • Tests
  • Update gdev
  • Docs
  • What's new

Fixes #92369

test dashboard

Please check that:

  • It works as expected from a user's perspective.
  • If this is a pre-GA feature, it is behind a feature toggle.
  • The docs are updated, and if this is a notable improvement, it's added to our What's New doc.

@adela-almasan adela-almasan self-assigned this Jul 22, 2025
@adela-almasan adela-almasan added the area/panel/canvas Issues related to canvas panel label Jul 22, 2025
@github-actions
Copy link
Contributor

Since you've added the Add to what's new label, consider drafting a What's new note for this feature.

fixed?: string
}@cuetsy(kind="interface")

ConnectionDirection: "forward" | "reverse" | "both" | "none" @cuetsy(kind="enum", memberNames="Forward|Reverse|Both|None")
Copy link
Contributor Author

@adela-almasan adela-almasan Jul 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This probably shouldn't be in this file, but not sure where's the best place for it, to avoid import horrors.

@github-actions github-actions bot added the type/docs Flags the technical writing team for documentation support; auto adds to org-wide docs project label Jul 23, 2025
@github-actions
Copy link
Contributor

github-actions bot commented Jul 23, 2025

💻 Deploy preview deleted.

@adela-almasan adela-almasan changed the title [WIP] Canvas: Dynamic connection direction Canvas: Dynamic connection direction Jul 24, 2025
@adela-almasan adela-almasan marked this pull request as ready for review July 24, 2025 19:17
@adela-almasan adela-almasan requested review from a team, grafanabot and imatwawana as code owners July 24, 2025 19:17
@adela-almasan adela-almasan requested review from drew08t, fastfrwrd and leeoniya and removed request for a team July 24, 2025 19:17
@adela-almasan adela-almasan requested a review from Develer July 28, 2025 18:43
@drew08t
Copy link
Contributor

drew08t commented Jul 28, 2025

Something isn't initializing correctly. When I first load Panel Tests - Canvas Connection Examples Data Pipeline Flow Monitor all connection directions, even those that are fixed, are not rendering arrow heads. It isn't until I change the options that arrow heads appear.

image

Comment on lines 481 to 485
If the direction source is **Field**, select a field that contains numeric values:

- **Positive values** - Display forward arrows.
- **Negative values** - Display reverse arrows.
- **Zero** - Display no arrow heads.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It might be worth mentioning that NaN or null will default to forward.

@adela-almasan
Copy link
Contributor Author

Something isn't initializing correctly. When I first load Panel Tests - Canvas Connection Examples Data Pipeline Flow Monitor all connection directions, even those that are fixed, are not rendering arrow heads. It isn't until I change the options that arrow heads appear.

image

@drew08t does this happen with the other panels too? I might've messed up that panel, I actually thought I removed it..

@drew08t
Copy link
Contributor

drew08t commented Jul 28, 2025

Something isn't initializing correctly. When I first load Panel Tests - Canvas Connection Examples Data Pipeline Flow Monitor all connection directions, even those that are fixed, are not rendering arrow heads. It isn't until I change the options that arrow heads appear.
image

@drew08t does this happen with the other panels too? I might've messed up that panel, I actually thought I removed it..

Not that I can see. After making this change to one connection, it works during init.

image

@adela-almasan
Copy link
Contributor Author

Something isn't initializing correctly. When I first load Panel Tests - Canvas Connection Examples Data Pipeline Flow Monitor all connection directions, even those that are fixed, are not rendering arrow heads. It isn't until I change the options that arrow heads appear.
image

@drew08t does this happen with the other panels too? I might've messed up that panel, I actually thought I removed it..

Not that I can see. After making this change to one connection, it works during init.

image

ooh yeah, the gdev is broken then, fixed is not an object. I'll remove the panel altogether, not sure how/when I added it back. I updated Network Weathermap panel to use fields for direction.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome PR, love it 😻
Could you also add those changes from ConnectionSVG to ConnectionSVG2? Or I can do it myself, just let me know 🙂

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

pushed 😁

}
}
}
}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bug: Connection Migration Fails Type Checks

The connection direction migration has two issues:

  1. Type Safety: It incorrectly assigns string literals (e.g., connection.direction, 'forward') to properties that expect enum values (e.g., ConnectionDirection, DirectionDimensionMode.Fixed), violating type contracts.
  2. Migration Scope: The parseFloat(pluginVersion) <= 12.2 version check is insufficient. It fails for undefined or empty pluginVersion, and prevents migration for panels with pluginVersion > 12.2 or newly created connections. This results in connections lacking proper direction configurations on initial load, causing missing arrowheads.
Fix in Cursor Fix in Web

@adela-almasan
Copy link
Contributor Author

Blocked by #108998 / grafana/scenes#1092

Copy link
Contributor

@fastfrwrd fastfrwrd left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good!

@adela-almasan adela-almasan merged commit 25c13c5 into main Aug 21, 2025
146 checks passed
@adela-almasan adela-almasan deleted the adela/connection_direction branch August 21, 2025 17:49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

add to changelog add to what's new area/frontend area/panel/canvas Issues related to canvas panel no-backport Skip backport of PR type/docs Flags the technical writing team for documentation support; auto adds to org-wide docs project

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Feature Request/Canvas : Connector Dynamic Flow Direction based on a metric sign

5 participants