Annotations: fixes variable values not displaying in annotations. (#37883) (#37884)

* Fixes wrong annotation when opening dashboard with URL encoded variable
Co-authored-by: Ashley Harrison, Hugo Haggmark, and Tobias Skarhed.

* added a more descriptive comment

(cherry picked from commit 4e98ade2af)

Co-authored-by: Uchechukwu Obasi <obasiuche62@gmail.com>

public/app/features/dashboard/state/initDashboard.ts

@@ -155,8 +155,6 @@ export function initDashboard(args: InitDashboardArgs): ThunkResult<void> {
     dashboardSrv.setCurrent(dashboard);
 
     timeSrv.init(dashboard);
-    const runner = createDashboardQueryRunner({ dashboard, timeSrv });
-    runner.run({ dashboard, range: timeSrv.timeRange() });
 
     if (storeState.dashboard.modifiedQueries) {
       const { panelId, queries } = storeState.dashboard.modifiedQueries;
@@ -166,6 +164,11 @@ export function initDashboard(args: InitDashboardArgs): ThunkResult<void> {
     // template values service needs to initialize completely before the rest of the dashboard can load
     await dispatch(initVariablesTransaction(args.urlUid!, dashboard));
 
+    // DashboardQueryRunner needs to run after all variables have been resolved so that any annotation query including a variable
+    // will be correctly resolved
+    const runner = createDashboardQueryRunner({ dashboard, timeSrv });
+    runner.run({ dashboard, range: timeSrv.timeRange() });
+
     if (getState().templating.transaction.uid !== args.urlUid) {
       // if a previous dashboard has slow running variable queries the batch uid will be the new one
       // but the args.urlUid will be the same as before initVariablesTransaction was called so then we can't continue initializing