How to Access the Selected Time Range of Grafana UI for Plugin Typescript

I want to access the selected time range on the Grafana UI in my Typescript plugin.

Here is my current code:

import { DataSourceInstanceSettings, CoreApp, ScopedVars } from '@grafana/data'; import { DataSourceWithBackend, getTemplateSrv } from '@grafana/runtime';

import { MyQuery, MyDataSourceOptions, DEFAULT_QUERY } from './types';

export class DataSource extends DataSourceWithBackend<MyQuery, MyDataSourceOptions> { constructor(instanceSettings: DataSourceInstanceSettings<MyDataSourceOptions>) { super(instanceSettings); console.log('DataSource constructor', instanceSettings); }

getDefaultQuery(_: CoreApp): Partial<MyQuery> { return DEFAULT_QUERY; }

applyTemplateVariables(query: MyQuery, scopedVars: ScopedVars): Record<string, any> { console.log(query, 'qery'); console.log(scopedVars, 'scopedVars');
// const from = request.range?.from.valueOf() ?? new Date().valueOf();
// const to = request.range?.to.valueOf() ?? new Date().valueOf();

// console.log(`Querying for range from ${new Date(from).toISOString()} to ${new Date(to).toISOString()}`);

return {
  ...query,

  queryText: getTemplateSrv().replace(query.queryText, scopedVars),
};
}

filterQuery(query: MyQuery): boolean { // if no query has been provided, prevent the query from being executed return !!query.queryText; } }

How can I access the time range?