How to use @grafana/runtime - 10 common examples

applyTemplateVariables(query: AwsAthenaQuery, scopedVars: ScopedVars) {
    // TODO: pass scopedVars to templateSrv.replace()
    const templateSrv = getTemplateSrv();
    query.region = templateSrv.replace(query.region, scopedVars);
    query.maxRows = query.maxRows || '';
    query.cacheDuration = query.cacheDuration || '';
    if (typeof query.queryString === 'undefined' || query.queryString === '') {
      query.queryExecutionId = templateSrv.replace(query.queryExecutionId, scopedVars);
      query.inputs = query.queryExecutionId.split(/,/).map(id => {
        return {
          queryExecutionId: id,
        };
      });
    } else {
      query.queryExecutionId = '';
      query.inputs = [];
    }
    query.queryString = templateSrv.replace(query.queryString, scopedVars) || '';
    query.outputLocation = this.outputLocation;

$scope: any,
    utilSrv: UtilSrv,
    $rootScope: GrafanaRootScope,
    contextSrv: ContextSrv,
    bridgeSrv: BridgeSrv,
    backendSrv: BackendSrv,
    timeSrv: TimeSrv,
    linkSrv: LinkSrv,
    datasourceSrv: DatasourceSrv,
    keybindingSrv: KeybindingSrv,
    angularLoader: AngularLoader
  ) {
    // make angular loader service available to react components
    setAngularLoader(angularLoader);
    setBackendSrv(backendSrv);
    setDataSourceSrv(datasourceSrv);
    setTimeSrv(timeSrv);
    setLinkSrv(linkSrv);
    setKeybindingSrv(keybindingSrv);
    const store = configureStore();
    setLocationSrv({
      update: (opt: LocationUpdate) => {
        store.dispatch(updateLocation(opt));
      },
    });

    $scope.init = () => {
      $scope.contextSrv = contextSrv;
      $scope.appSubUrl = config.appSubUrl;
      $scope._ = _;

      profiler.init(config, $rootScope);

datasourceSrv: DatasourceSrv,
    keybindingSrv: KeybindingSrv,
    dashboardSrv: DashboardSrv,
    angularLoader: AngularLoader
  ) {
    // make angular loader service available to react components
    setAngularLoader(angularLoader);
    setBackendSrv(backendSrv);
    setDataSourceSrv(datasourceSrv);
    setTimeSrv(timeSrv);
    setLinkSrv(linkSrv);
    setKeybindingSrv(keybindingSrv);
    setDashboardSrv(dashboardSrv);

    const store = configureStore();
    setLocationSrv({
      update: (opt: LocationUpdate) => {
        store.dispatch(updateLocation(opt));
      },
    });

    $scope.init = () => {
      $scope.contextSrv = contextSrv;
      $scope.appSubUrl = config.appSubUrl;
      $scope._ = _;

      profiler.init(config, $rootScope);
      utilSrv.init();
      bridgeSrv.init();
    };

    $rootScope.colors = colors;

backendSrv: BackendSrv,
    timeSrv: TimeSrv,
    linkSrv: LinkSrv,
    datasourceSrv: DatasourceSrv,
    keybindingSrv: KeybindingSrv,
    angularLoader: AngularLoader
  ) {
    // make angular loader service available to react components
    setAngularLoader(angularLoader);
    setBackendSrv(backendSrv);
    setDataSourceSrv(datasourceSrv);
    setTimeSrv(timeSrv);
    setLinkSrv(linkSrv);
    setKeybindingSrv(keybindingSrv);
    const store = configureStore();
    setLocationSrv({
      update: (opt: LocationUpdate) => {
        store.dispatch(updateLocation(opt));
      },
    });

    $scope.init = () => {
      $scope.contextSrv = contextSrv;
      $scope.appSubUrl = config.appSubUrl;
      $scope._ = _;

      profiler.init(config, $rootScope);
      utilSrv.init();
      bridgeSrv.init();
    };

    $rootScope.colors = colors;

loadAngularPanel() {
    const { panel, dashboard } = this.props;

    // if we have no element or already have loaded the panel return
    if (!this.element || panel.angularPanel) {
      return;
    }

    const loader = getAngularLoader();
    const template = '';
    const scopeProps = { panel: panel, dashboard: dashboard };
    const angularPanel = loader.load(this.element, scopeProps, template);

    panel.setAngularPanel(angularPanel);
  }

componentDidUpdate(prevProps: Props) {
    if (!this.element || this.state.angularCtrl) {
      return;
    }

    // Set a copy of the meta
    this.model = cloneDeep(this.props.app.meta);

    const loader = getAngularLoader();
    const template = '';
    const scopeProps = { ctrl: this };
    const angularCtrl = loader.load(this.element, scopeProps, template);

    this.setState({ angularCtrl });
  }

async loadAlertTab() {
    const { angularPanel, panel } = this.props;

    const scope = angularPanel.getScope();

    // When full page reloading in edit mode the angular panel has on fully compiled & instantiated yet
    if (!scope.$$childHead) {
      setTimeout(() => {
        this.forceUpdate();
      });
      return;
    }

    this.panelCtrl = scope.$$childHead.ctrl;
    const loader = getAngularLoader();
    const template = '';

    const scopeProps = { ctrl: this.panelCtrl };

    this.component = loader.load(this.element, scopeProps, template);

    const validatonMessage = await getAlertingValidationMessage(
      panel.transformations,
      panel.targets,
      getDataSourceSrv(),
      panel.datasource
    );

    if (validatonMessage) {
      this.setState({ validatonMessage });
    }

componentDidUpdate(prevProps: Props) {
    if (!this.element || this.state.angularCtrl) {
      return;
    }

    // Set a copy of the meta
    this.model = cloneDeep(this.props.app.meta);

    const loader = getAngularLoader();
    const template = '';
    const scopeProps = { ctrl: this };
    const angularCtrl = loader.load(this.element, scopeProps, template);

    this.setState({ angularCtrl });
  }

// check if we need to load another datasource
    if (loadedDataSourceValue !== this.props.dataSourceValue) {
      if (this.angularQueryEditor) {
        this.angularQueryEditor.destroy();
        this.angularQueryEditor = null;
      }
      this.loadDatasource();
      return;
    }

    if (!this.element || this.angularQueryEditor) {
      return;
    }

    const loader = getAngularLoader();
    const template = '';
    const scopeProps = { ctrl: this.getAngularQueryComponentScope() };
    this.angularQueryEditor = loader.load(this.element, scopeProps, template);
    this.angularScope = scopeProps.ctrl;
  }

query(options: DataQueryRequest): Observable {
    for (const target of options.targets) {
      target.target = getTemplateSrv().replace(target.target, options.scopedVars);
    }

    // store the targets in activeTargets so we can
    // access the legendFormat later on via the refId
    let activeTargets: { [key: string]: any } = {};
    for (const target of options.targets) {
      if (target.hide) {
        continue;
      }
      activeTargets[target.refId] = target;
    }

    return super.query(options).pipe(
      map((rsp: DataQueryResponse) => {
        const finalRsp: DataQueryResponse = { data: [], state: LoadingState.Done };