@c8y/tutorial 1023.64.1 → 1023.65.0

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@c8y/tutorial",
-  "version": "1023.64.1",
+  "version": "1023.65.0",
   "description": "This package is used to scaffold a tutorial for Cumulocity IoT Web SDK which explains a lot of concepts.",
   "dependencies": {
-    "@c8y/style": "1023.64.1",
-    "@c8y/ngx-components": "1023.64.1",
-    "@c8y/client": "1023.64.1",
-    "@c8y/bootstrap": "1023.64.1",
+    "@c8y/style": "1023.65.0",
+    "@c8y/ngx-components": "1023.65.0",
+    "@c8y/client": "1023.65.0",
+    "@c8y/bootstrap": "1023.65.0",
     "@angular/cdk": "^20.2.14",
     "monaco-editor": "~0.53.0",
     "ngx-bootstrap": "20.0.2",
@@ -14,8 +14,8 @@
     "rxjs": "7.8.2"
   },
   "devDependencies": {
-    "@c8y/options": "1023.64.1",
-    "@c8y/devkit": "1023.64.1"
+    "@c8y/options": "1023.65.0",
+    "@c8y/devkit": "1023.65.0"
   },
   "peerDependencies": {
     "@angular/common": ">=20 <21"

package/src/app/app.config.ts

@@ -15,6 +15,7 @@ import { provideWidgetsResolverSample } from '../widget-resolvers';
 import { provideMapExampleNavigator } from '../maps';
 import { provideTranslationsNavigator } from '../translations';
 import { provideLazyWidget } from '../lazy-widget';
+import { provideGlobalContextWidget } from '../global-context-widget';
 import { provideBreadcrumbsNavigator } from '../breadcrumbs';
 import { provideSplitViewSamples } from '../split-view';
 import { provideIconPanelExample } from '../icon-panel';
@@ -22,6 +23,7 @@ import { provideClientInterceptorSample } from '../client-interceptor';
 import { provideUserMenuSample } from '../user-menu';
 import { AlarmsModule } from '@c8y/ngx-components/alarms';
 import { BulkOperationSchedulerModule } from '@c8y/ngx-components/operations/bulk-operation-scheduler';
+import { GlobalContextModule } from '@c8y/ngx-components/global-context';
 import { provideRedirectToLastRoute } from '../redirect-to-last-route';
 import { provideAPIMock } from '../__mocks';
 import { configureWidgetProviders } from '@c8y/ngx-components/widgets/widget-providers';
@@ -51,12 +53,14 @@ export const appConfig: ApplicationConfig = {
     // Get rid of a default version factory
     importProvidersFrom(VersionModule.config({ disableWebSDKPluginVersionFactory: true })),
     ...provideLazyWidget(),
+    ...provideGlobalContextWidget(),
     ...configureWidgetProviders(),
     ...provideRedirectToLastRoute(),
     ...provideAPIMock(),
     ...provideBreadcrumbsNavigator(),
     ...provideSplitViewSamples(),
     ...provideIconPanelExample(),
-    importProvidersFrom(AlarmsModule.config({ hybrid: false }))
+    importProvidersFrom(AlarmsModule.config({ hybrid: false })),
+    importProvidersFrom(GlobalContextModule)
   ]
 };

package/src/global-context-widget/global-context-dashboard.component.ts

@@ -0,0 +1,62 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CoreModule, Widget } from '@c8y/ngx-components';
+import { ContextDashboardModule } from '@c8y/ngx-components/context-dashboard';
+
+/**
+ * Dashboard page showcasing the Global Time Context v2 widget example.
+ *
+ * This dashboard demonstrates:
+ * - GlobalContextConnectorComponent for dashboard mode (linked to global context)
+ * - LocalControlsComponent for config/view_and_config modes (local controls)
+ * - Time context integration with global dashboard controls in the action bar
+ *
+ * The widget responds to:
+ * - Time range changes (Live mode: last hour, etc. / History mode: date range)
+ * - Auto-refresh toggle
+ * - Manual refresh
+ * - Aggregation settings (in History mode)
+ */
+@Component({
+  selector: 'c8y-global-context-dashboard',
+  standalone: true,
+  imports: [CommonModule, CoreModule, ContextDashboardModule],
+  template: `
+    <c8y-title>Global Time Context Example</c8y-title>
+    <c8y-context-dashboard
+      name="global-context-example"
+      [defaultWidgets]="defaultWidgets"
+      [canDelete]="false"
+    ></c8y-context-dashboard>
+  `
+})
+export class GlobalContextDashboardComponent {
+  defaultWidgets: Widget[] = [
+    {
+      _x: 0,
+      _y: 0,
+      _width: 6,
+      _height: 5,
+      componentId: 'tutorial.global-context-widget',
+      config: {
+        // IMPORTANT: displayMode must be 'dashboard' for GlobalContextConnector to be used.
+        // This tells the system that this widget is linked to the global time context.
+        displayMode: 'dashboard'
+      },
+      title: 'Widget 1 - Linked to Global Context',
+      id: 'global-context-widget-1'
+    },
+    {
+      _x: 6,
+      _y: 0,
+      _width: 6,
+      _height: 5,
+      componentId: 'tutorial.global-context-widget',
+      config: {
+        displayMode: 'dashboard'
+      },
+      title: 'Widget 2 - Also Linked',
+      id: 'global-context-widget-2'
+    }
+  ];
+}

package/src/global-context-widget/global-context-widget-config.component.ts

@@ -0,0 +1,35 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { WidgetConfig } from './widget-config.model';
+
+/**
+ * Widget configuration component.
+ *
+ * Note: The "Time context" section (display mode, time range, aggregation, etc.)
+ * is automatically added by hookWidgetConfig with GlobalContextSectionComponent.
+ * This component only handles widget-specific configuration.
+ */
+@Component({
+  selector: 'c8y-global-context-widget-config',
+  standalone: true,
+  template: `
+    <div class="alert alert-info m-t-16">
+      <p class="m-b-0">
+        <strong>Note:</strong> The "Time context" section above is automatically injected via
+        <code>hookWidgetConfig</code> with <code>GlobalContextSectionComponent</code>. It handles:
+      </p>
+      <ul class="m-b-0 m-t-8">
+        <li>Display mode selection (Dashboard / Configuration / Widget view)</li>
+        <li>Time range configuration (Live / History)</li>
+        <li>Auto-refresh settings</li>
+        <li>Aggregation options</li>
+      </ul>
+    </div>
+  `
+})
+export class GlobalContextWidgetConfigComponent implements OnInit {
+  @Input() config: WidgetConfig = {};
+
+  ngOnInit() {
+    console.log('Widget config loaded:', this.config);
+  }
+}

package/src/global-context-widget/global-context-widget-view.component.ts

@@ -0,0 +1,331 @@
+import { Component, Input, OnInit, inject, signal, computed } from '@angular/core';
+import { DashboardChildComponent, DatePipe } from '@c8y/ngx-components';
+import {
+  LocalControlsComponent,
+  GlobalContextConnectorComponent,
+  GlobalContextState,
+  DisplayMode,
+  GLOBAL_CONTEXT_DISPLAY_MODE,
+  REFRESH_OPTION
+} from '@c8y/ngx-components/global-context';
+import { WidgetConfig, WIDGET_CONTROLS } from './widget-config.model';
+
+/**
+ * Example widget view component demonstrating Global Time Context v2 integration.
+ *
+ * The `displayMode` determines **where time controls come from** (not visual appearance):
+ *
+ * **Dashboard mode** (`displayMode: 'dashboard'`):
+ * - Time is controlled by the dashboard-level action bar (shared across all widgets)
+ * - Uses `GlobalContextConnectorComponent` to connect the widget to the global time context
+ * - All widgets on the dashboard share the same time range
+ *
+ * **Config mode** (`displayMode: 'config'`):
+ * - Time is controlled only in the widget configuration panel
+ * - Uses `LocalControlsComponent` with the widget's stored time range
+ * - Widget operates with a fixed, pre-configured time range at runtime
+ *
+ * **View_and_config mode** (`displayMode: 'view_and_config'`):
+ * - Time is controlled by inline controls rendered inside the widget itself
+ * - Uses `LocalControlsComponent` for independent, user-adjustable time controls
+ * - Widget has its own time range, not linked to other widgets
+ *
+ * Key integration points:
+ * - `[controls]` - Defines which features are available (live time, history, aggregation, etc.)
+ * - `[config]` - Current time context state (dateFrom, dateTo, aggregation, etc.)
+ * - `[isLoading]` - When true, pauses auto-refresh counter until loading completes
+ * - `(configChange)` - Emitted when user changes time context settings
+ * - `(refresh)` - Emitted on auto-refresh tick or manual refresh
+ *
+ * @example
+ * ```html
+ * <!-- In dashboard mode, use GlobalContextConnector -->
+ * <c8y-global-context-connector
+ *   [controls]="widgetControls"
+ *   [config]="contextConfig()"
+ *   [isLoading]="isLoading()"
+ *   [dashboardChild]="getDashboardChild()"
+ *   (configChange)="onContextChange($event)"
+ *   (refresh)="onRefresh()"
+ * ></c8y-global-context-connector>
+ * ```
+ */
+@Component({
+  selector: 'c8y-global-context-widget-view',
+  standalone: true,
+  imports: [DatePipe, LocalControlsComponent, GlobalContextConnectorComponent],
+  template: `
+    <!-- Dashboard mode: Connect to global time context -->
+    @if (displayMode() === GLOBAL_CONTEXT_DISPLAY_MODE.DASHBOARD) {
+      <c8y-global-context-connector
+        [controls]="widgetControls"
+        [config]="contextConfig()"
+        [isLoading]="isLoading()"
+        [dashboardChild]="getDashboardChild()"
+        [linked]="isLinkedToGlobal()"
+        (configChange)="onContextChange($event)"
+        (refresh)="onRefresh()"
+      ></c8y-global-context-connector>
+    } @else {
+      <!-- Config/View_and_config modes: Local controls -->
+      <c8y-local-controls
+        [controls]="widgetControls"
+        [displayMode]="displayMode()"
+        [config]="contextConfig()"
+        [isLoading]="isLoading()"
+        (configChange)="onContextChange($event)"
+        (refresh)="onRefresh()"
+      ></c8y-local-controls>
+    }
+
+    <!-- Widget content -->
+    <div class="p-16">
+      <!-- Status indicator -->
+      <div class="m-b-16">
+        <span class="text-muted small">Mode</span>
+        <p class="m-b-0">
+          <strong>{{ isLiveMode() ? 'Live' : 'History' }}</strong>
+        </p>
+      </div>
+
+      <!-- Time Range -->
+      @if (contextConfig().dateTimeContext; as dtc) {
+        <div class="row m-b-16">
+          <div class="col-xs-6">
+            <p class="text-muted small m-b-4">From</p>
+            <p class="text-medium m-b-0">{{ dtc.dateFrom | date: 'medium' }}</p>
+          </div>
+          <div class="col-xs-6">
+            <p class="text-muted small m-b-4">To</p>
+            <p class="text-medium m-b-0">{{ dtc.dateTo | date: 'medium' }}</p>
+          </div>
+        </div>
+
+        <!-- Settings row -->
+        <div class="d-flex flex-wrap p-t-8 p-b-8 separator-top">
+          <div class="m-r-24">
+            <span class="text-muted small">Duration</span>
+            <p class="m-b-0">
+              <strong>{{ formatDuration() }}</strong>
+            </p>
+          </div>
+          <div class="m-r-24">
+            <span class="text-muted small">Interval</span>
+            <p class="m-b-0">
+              <code>{{ dtc.interval || 'custom' }}</code>
+            </p>
+          </div>
+          @if (contextConfig().aggregation) {
+            <div>
+              <span class="text-muted small">Aggregation</span>
+              <p class="m-b-0">
+                <code>{{ contextConfig().aggregation }}</code>
+              </p>
+            </div>
+          }
+        </div>
+      } @else {
+        <p class="text-muted">Waiting for time context...</p>
+      }
+
+      <!-- Data fetch status -->
+      <div class="d-flex a-i-center p-t-8 separator-top">
+        @if (isLoading()) {
+          <i class="fa fa-spinner fa-spin m-r-8"></i>
+          <span>Loading...</span>
+        } @else {
+          <span class="text-muted small m-r-16"
+            >Last fetch: {{ lastFetchTime | date: 'mediumTime' }}</span
+          >
+          <span class="text-muted small">Fetches: {{ fetchCount }}</span>
+        }
+      </div>
+    </div>
+  `
+})
+export class GlobalContextWidgetViewComponent implements OnInit {
+  /** Reference to DashboardChildComponent, required for GlobalContextConnector */
+  private dashboardChild = inject(DashboardChildComponent);
+
+  /** Widget configuration passed from the dashboard */
+  @Input() config: WidgetConfig;
+
+  /**
+   * Determines where the time controls come from:
+   * - 'dashboard': time controlled by the dashboard action bar (shared across widgets)
+   * - 'config': time controlled only in the widget configuration panel (fixed at runtime)
+   * - 'view_and_config': time controlled by inline controls inside the widget
+   */
+  displayMode = signal<DisplayMode>(GLOBAL_CONTEXT_DISPLAY_MODE.DASHBOARD);
+
+  /** Current time context state (dateTimeContext, aggregation, refreshOption, etc.) */
+  contextConfig = signal<GlobalContextState>({});
+
+  /**
+   * Controls link state to global context:
+   * - `true` or `undefined`: Widget follows global time context (receives all changes)
+   * - `false`: Widget uses local state, ignores global context changes
+   *
+   * Set to `false` when user is actively interacting with the widget
+   * (scrolling, zooming, selecting) to prevent global changes from
+   * interrupting their action. Set back to `true` when interaction ends.
+   */
+  isLinkedToGlobal = signal<boolean | undefined>(undefined);
+
+  /**
+   * Loading state signal. Pass this to the connector/controls.
+   * When `true`, the auto-refresh counter pauses until loading completes.
+   * This prevents data fetches from stacking up during slow API calls.
+   */
+  isLoading = signal<boolean>(false);
+
+  /** Widget controls - shared with index.ts to keep registration and runtime in sync. */
+  readonly widgetControls = WIDGET_CONTROLS;
+
+  /** Expose display mode constants for use in template */
+  readonly GLOBAL_CONTEXT_DISPLAY_MODE = GLOBAL_CONTEXT_DISPLAY_MODE;
+
+  // ─────────────────────────────────────────────────────────────────────────────
+  // DEMO-ONLY PROPERTIES - You can ignore these, they're just for visualization
+  // ─────────────────────────────────────────────────────────────────────────────
+
+  /** @ignore Demo only: Timestamp of last data fetch */
+  lastFetchTime: Date | null = null;
+
+  /** @ignore Demo only: Count of data fetches */
+  fetchCount = 0;
+
+  /** @ignore Demo only: Computed flag for Live mode display */
+  isLiveMode = computed(() => this.contextConfig().refreshOption === REFRESH_OPTION.LIVE);
+
+  /** @ignore Demo only: Computed flag for auto-refresh display */
+  isAutoRefreshActive = computed(() => this.contextConfig().isAutoRefreshEnabled === true);
+
+  // ─────────────────────────────────────────────────────────────────────────────
+
+  /**
+   * Initialize the widget with configuration from the dashboard.
+   * In dashboard mode, waits for GlobalContextConnector to emit first state.
+   * In other modes, fetches data immediately.
+   */
+  ngOnInit(): void {
+    const {
+      displayMode = GLOBAL_CONTEXT_DISPLAY_MODE.DASHBOARD,
+      dateTimeContext,
+      aggregation,
+      isAutoRefreshEnabled,
+      refreshInterval,
+      refreshOption
+    } = this.config;
+
+    this.displayMode.set(displayMode as DisplayMode);
+    this.contextConfig.set({
+      dateTimeContext,
+      aggregation,
+      isAutoRefreshEnabled,
+      refreshInterval,
+      refreshOption
+    });
+
+    // In dashboard mode, GlobalContextConnector will emit the initial state
+    // In other modes, we need to fetch data ourselves
+    if (displayMode !== GLOBAL_CONTEXT_DISPLAY_MODE.DASHBOARD) {
+      this.fetchData();
+    }
+  }
+
+  /**
+   * Handle context changes from GlobalContextConnector or LocalControls.
+   * Called when user changes time range, aggregation, or other settings.
+   *
+   * @param event - Contains full context state and diff of what changed
+   */
+  onContextChange(event: { context: GlobalContextState; diff: GlobalContextState }): void {
+    const { diff, context } = event;
+
+    // Always update context config for UI reactivity
+    this.contextConfig.set(event.context);
+
+    // Optimization: Skip fetch if only auto-refresh was disabled in Live mode.
+    // In Live mode, the time window slides automatically, so we don't need to
+    // re-fetch just because auto-refresh was turned off.
+    if (
+      diff.isAutoRefreshEnabled === false &&
+      Object.keys(diff).length === 1 &&
+      context.refreshOption === REFRESH_OPTION.LIVE
+    ) {
+      return;
+    }
+
+    this.fetchData();
+  }
+
+  /**
+   * Handle refresh events (manual refresh button or auto-refresh tick).
+   */
+  onRefresh(): void {
+    this.fetchData();
+  }
+
+  /**
+   * Required for GlobalContextConnector - provides reference to DashboardChildComponent.
+   * This allows the connector to register the widget with the dashboard's context system.
+   */
+  getDashboardChild(): DashboardChildComponent {
+    return this.dashboardChild;
+  }
+
+  // ─────────────────────────────────────────────────────────────────────────────
+  // DEMO-ONLY METHOD - You can ignore this, it's just for visualization
+  // ─────────────────────────────────────────────────────────────────────────────
+
+  /**
+   * @ignore Demo only: Format the time range duration for display (e.g., "1h 30m", "2d 4h").
+   * This is not part of the Global Context integration - just a helper for this demo widget.
+   */
+  formatDuration(): string {
+    const dtc = this.contextConfig().dateTimeContext;
+    if (!dtc?.dateFrom || !dtc?.dateTo) {
+      return '-';
+    }
+
+    const diffMs = new Date(dtc.dateTo).getTime() - new Date(dtc.dateFrom).getTime();
+    const hours = Math.floor(diffMs / (1000 * 60 * 60));
+    const minutes = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60));
+
+    if (hours >= 24) {
+      const days = Math.floor(hours / 24);
+      return `${days}d ${hours % 24}h`;
+    }
+    return hours > 0 ? `${hours}h ${minutes}m` : `${minutes}m`;
+  }
+
+  // ─────────────────────────────────────────────────────────────────────────────
+
+  /**
+   * Fetch data based on current time context.
+   * Demonstrates proper loading state management:
+   * 1. Set isLoading to true (pauses auto-refresh counter)
+   * 2. Perform API call using contextConfig().dateTimeContext for time range
+   * 3. Set isLoading to false (resumes auto-refresh counter)
+   */
+  private async fetchData(): Promise<void> {
+    try {
+      this.isLoading.set(true);
+
+      // In a real widget, you would use the time context for API calls:
+      // const { dateFrom, dateTo } = this.contextConfig().dateTimeContext;
+      // const data = await this.api.getData({ dateFrom, dateTo });
+
+      // Simulate API call
+      await new Promise(resolve => setTimeout(resolve, 500));
+
+      this.lastFetchTime = new Date();
+      this.fetchCount++;
+    } catch (error) {
+      console.error('Error fetching data:', error);
+    } finally {
+      this.isLoading.set(false);
+    }
+  }
+}

package/src/global-context-widget/index.ts

@@ -0,0 +1,87 @@
+import { hookWidget, hookRoute, hookNavigator, NavigatorNode } from '@c8y/ngx-components';
+import {
+  GlobalContextSectionComponent,
+  hookWidgetConfig
+} from '@c8y/ngx-components/context-dashboard';
+import { GLOBAL_CONTEXT_DASHBOARD_PATHS } from '@c8y/ngx-components/global-context';
+import { gettext } from '@c8y/ngx-components/gettext';
+import { WIDGET_CONTROLS } from './widget-config.model';
+
+const WIDGET_ID = 'tutorial.global-context-widget';
+
+/** Route path for the example dashboard */
+const DASHBOARD_PATH = 'dashboard/global-context';
+
+/**
+ * Provides the Global Context Widget example.
+ *
+ * This widget demonstrates the new Global Time Context v2 integration:
+ * - Uses GlobalContextConnectorComponent for dashboard mode
+ * - Uses LocalControlsComponent for config/view_and_config modes
+ * - Handles context changes and refresh events
+ * - Manages loading state to pause/resume auto-refresh
+ */
+export function provideGlobalContextWidget() {
+  return [
+    // Register the dashboard path for Global Context support
+    // This enables the global context toolbar on this named dashboard route
+    {
+      provide: GLOBAL_CONTEXT_DASHBOARD_PATHS,
+      useValue: [DASHBOARD_PATH],
+      multi: true
+    },
+
+    // Register the widget
+    hookWidget({
+      id: WIDGET_ID,
+      label: gettext('Global context widget'),
+      description: gettext(
+        'Example widget demonstrating Global Time Context v2 integration with GlobalContextConnector and LocalControls.'
+      ),
+      loadComponent: () =>
+        import('./global-context-widget-view.component').then(
+          m => m.GlobalContextWidgetViewComponent
+        ),
+      loadConfigComponent: () =>
+        import('./global-context-widget-config.component').then(
+          m => m.GlobalContextWidgetConfigComponent
+        ),
+      data: {
+        schema: () => import('c8y-schema-loader?interfaceName=WidgetConfig!./widget-config.model'),
+        // Widget controls for view component
+        controls: WIDGET_CONTROLS
+      }
+    }),
+
+    // Register the "Time context" configuration section
+    // This injects GlobalContextSectionComponent into the widget configuration panel
+    hookWidgetConfig<GlobalContextSectionComponent>({
+      widgetId: WIDGET_ID,
+      priority: 10,
+      label: gettext('Time context'),
+      initialState: {
+        controls: WIDGET_CONTROLS
+      },
+      loadComponent: () =>
+        import('@c8y/ngx-components/context-dashboard').then(m => m.GlobalContextSectionComponent)
+    }),
+
+    // Register route for the example dashboard
+    hookRoute({
+      path: DASHBOARD_PATH,
+      loadComponent: () =>
+        import('./global-context-dashboard.component').then(m => m.GlobalContextDashboardComponent)
+    }),
+
+    // Register navigator entry under "Dashboards"
+    hookNavigator(
+      new NavigatorNode({
+        label: gettext('Global context'),
+        path: `/${DASHBOARD_PATH}`,
+        icon: 'clock1',
+        priority: -10,
+        parent: 'Dashboards'
+      })
+    )
+  ];
+}

package/src/global-context-widget/widget-config.model.ts

@@ -0,0 +1,57 @@
+import {
+  GlobalContextState,
+  CONTEXT_FEATURE,
+  PresetDefinition
+} from '@c8y/ngx-components/global-context';
+
+/**
+ * Widget configuration interface for the Global Context example widget.
+ *
+ * Extends `GlobalContextState` to inherit all time context properties:
+ * - `dateTimeContext`: Contains `dateFrom`, `dateTo`, and `interval`
+ * - `refreshOption`: 'live' | 'history' - determines time mode
+ * - `isAutoRefreshEnabled`: Whether auto-refresh is active
+ * - `refreshInterval`: Auto-refresh interval in milliseconds
+ * - `aggregation`: Data aggregation level (MINUTELY, HOURLY, DAILY)
+ * - `displayMode`: 'dashboard' | 'config' | 'view_and_config'
+ *
+ * These properties are automatically managed by `GlobalContextSectionComponent`
+ * when configured via `hookWidgetConfig`.
+ */
+export interface WidgetConfig extends GlobalContextState {
+  /** Custom widget title displayed in the widget header */
+  title?: string;
+}
+
+/**
+ * Widget controls definition shared between widget registration (index.ts)
+ * and the view component. Defines which time context features are available
+ * in each display mode.
+ *
+ * Available features:
+ * - CONTEXT_FEATURE.LIVE_TIME - Relative time window (e.g., "last 1 hour")
+ * - CONTEXT_FEATURE.HISTORY_TIME - Fixed date range picker
+ * - CONTEXT_FEATURE.AUTO_REFRESH - Auto-refresh toggle (5s interval)
+ * - CONTEXT_FEATURE.AGGREGATION - Data aggregation selector
+ * - CONTEXT_FEATURE.REFRESH - Manual refresh button
+ */
+export const WIDGET_CONTROLS: PresetDefinition = {
+  dashboard: [
+    CONTEXT_FEATURE.LIVE_TIME,
+    CONTEXT_FEATURE.HISTORY_TIME,
+    CONTEXT_FEATURE.AUTO_REFRESH,
+    CONTEXT_FEATURE.AGGREGATION
+  ],
+  config: [
+    CONTEXT_FEATURE.LIVE_TIME,
+    CONTEXT_FEATURE.HISTORY_TIME,
+    CONTEXT_FEATURE.AUTO_REFRESH,
+    CONTEXT_FEATURE.AGGREGATION
+  ],
+  view_and_config: [
+    CONTEXT_FEATURE.LIVE_TIME,
+    CONTEXT_FEATURE.HISTORY_TIME,
+    CONTEXT_FEATURE.AUTO_REFRESH,
+    CONTEXT_FEATURE.AGGREGATION
+  ]
+};