Canvas: Connection properties based on data (#64360)

Co-authored-by: nmarrs <nathanielmarrs@gmail.com>

public/app/features/canvas/element.ts

@@ -4,7 +4,7 @@ import { RegistryItem } from '@grafana/data';
 import { PanelOptionsSupplier } from '@grafana/data/src/panel/PanelPlugin';
 import { config } from 'app/core/config';
 
-import { DimensionContext } from '../dimensions/context';
+import { DimensionContext, ColorDimensionConfig, ScaleDimensionConfig } from '../dimensions';
 
 import { BackgroundConfig, Constraint, LineConfig, Placement } from './types';
 
@@ -46,6 +46,8 @@ export interface CanvasConnection {
   target: ConnectionCoordinates;
   targetName?: string;
   path: ConnectionPath;
+  color?: ColorDimensionConfig;
+  size?: ScaleDimensionConfig;
   // See https://github.com/anseki/leader-line#options for more examples of more properties
 }
 

public/app/features/canvas/runtime/scene.tsx

@@ -144,6 +144,8 @@ export class Scene {
         this.initMoveable(destroySelecto, enableEditing);
         this.currentLayer = this.root;
         this.selection.next([]);
+        this.connections.select(undefined);
+        this.connections.updateState();
       }
     });
     return this.root;