@grafana/scenes 0.3.0 → 0.4.0

package/dist/index.d.ts

@@ -4,6 +4,7 @@ import { BusEventWithPayload, PanelData, BusEvent, BusEventType, BusEventHandler
 import { VariableType, VariableHide, DataSourceRef, DataQuery } from '@grafana/schema';
 import { PanelContext, IconName } from '@grafana/ui';
 import ReactGridLayout from 'react-grid-layout';
+import { RouteComponentProps } from 'react-router-dom';
 
 interface SceneVariableState extends SceneObjectState {
     type: VariableType;
@@ -93,9 +94,12 @@ interface SceneObjectState {
     $timeRange?: SceneTimeRangeLike;
     $data?: SceneDataProvider;
     $variables?: SceneVariables;
-}
-interface SceneLayoutItemState extends SceneObjectState {
-    body: SceneObject | undefined;
+    /**
+     * @experimental
+     * Can be used to add extra behaviors to a scene object.
+     * These are activated when the their parent scene object is activated.
+     */
+    $behaviors?: Array<SceneObject | SceneStatelessBehavior>;
 }
 interface SceneLayoutChildOptions {
     width?: number | string;
@@ -209,6 +213,7 @@ type DeepPartial<T> = {
 interface SceneDataProvider extends SceneObject<SceneDataState> {
     setContainerWidth?: (width: number) => void;
 }
+type SceneStatelessBehavior = (sceneObject: SceneObject) => CancelActivationHandler | void;
 
 interface SceneObjectStateChangedPayload<TState extends SceneObjectState = SceneObjectState> {
     prevState: TState;
@@ -249,6 +254,10 @@ declare function interpolate(sceneObject: SceneObject, value: string | undefined
  * Checks if the variable is currently loading or waiting to update
  */
 declare function hasVariableDependencyInLoadingState(sceneObject: SceneObject): boolean;
+/**
+ * This will search the full scene graph, starting with the scene node passed in, then walking up the parent chain. *
+ */
+declare function findObject(scene: SceneObject, check: (obj: SceneObject) => boolean): SceneObject | null;
 declare const sceneGraph: {
     getVariables: typeof getVariables;
     getData: typeof getData;
@@ -257,6 +266,7 @@ declare const sceneGraph: {
     interpolate: typeof interpolate;
     lookupVariable: typeof lookupVariable;
     hasVariableDependencyInLoadingState: typeof hasVariableDependencyInLoadingState;
+    findObject: typeof findObject;
 };
 
 declare abstract class SceneObjectBase<TState extends SceneObjectState = SceneObjectState> implements SceneObject<TState> {
@@ -405,7 +415,6 @@ declare class VariableDependencyConfig<TState extends SceneObjectState> implemen
 
 interface QueryRunnerState extends SceneObjectState {
     data?: PanelData;
-    dataPreTransforms?: PanelData;
     queries: DataQueryExtended[];
     datasource?: DataSourceRef;
     minInterval?: string;
@@ -435,6 +444,7 @@ declare class SceneQueryRunner extends SceneObjectBase<QueryRunnerState> impleme
     private getMaxDataPoints;
     private runWithTimeRange;
     private onDataReceived;
+    private _setNoDataState;
 }
 
 interface SceneDataTransformerState extends SceneDataState {
@@ -504,6 +514,10 @@ declare class SceneVariableSet extends SceneObjectBase<SceneVariableSetState> im
      * Subscribes to child variable value changes, and starts the variable value validation process
      */
     private _onActivate;
+    /**
+     * Add all variables that depend on the changed variable to the update queue
+     */
+    private _refreshTimeRangeBasedVariables;
     /**
      * Cancel all currently running updates
      */
@@ -518,7 +532,7 @@ declare class SceneVariableSet extends SceneObjectBase<SceneVariableSetState> im
     private _checkForVariablesThatChangedWhileInactive;
     private _variableNeedsUpdate;
     /**
-     * This loops through variablesToUpdate and update all that that can.
+     * This loops through variablesToUpdate and update all that can.
      * If one has a dependency that is currently in variablesToUpdate it will be skipped for now.
      */
     private _updateNextBatch;
@@ -639,10 +653,8 @@ interface QueryVariableState extends MultiValueVariableState {
     sort: VariableSort;
 }
 declare class QueryVariable extends MultiValueVariable<QueryVariableState> {
-    private updateSubscription?;
     protected _variableDependency: VariableDependencyConfig<QueryVariableState>;
     constructor(initialState: Partial<QueryVariableState>);
-    private _onActivate;
     getValueOptions(args: VariableGetOptionsArgs): Observable<VariableValueOption[]>;
     private getRequest;
     static Component: ({ model }: SceneComponentProps<MultiValueVariable>) => JSX.Element;
@@ -652,6 +664,7 @@ interface TestVariableState extends MultiValueVariableState {
     query: string;
     delayMs?: number;
     issuedQuery?: string;
+    refresh?: VariableRefresh;
 }
 /**
  * This variable is only designed for unit tests and potentially e2e tests.
@@ -685,18 +698,11 @@ declare class TextBoxVariable extends SceneObjectBase<TextBoxVariableState> impl
     static Component: ({ model }: SceneComponentProps<TextBoxVariable>) => JSX.Element;
 }
 
-declare class UrlSyncManager {
-    private sceneRoot;
-    private urlKeyMapper;
-    constructor(sceneRoot: SceneObject);
-    /**
-     * Updates the current scene state to match URL state.
-     */
-    initSync(): void;
-    private _onLocationUpdate;
-    private _onStateChanged;
-    private _syncSceneStateFromUrl;
+interface UrlSyncManagerLike {
+    initSync(root: SceneObject): void;
+    cleanUp(root: SceneObject): void;
 }
+declare function getUrlSyncManager(): UrlSyncManagerLike;
 
 interface EmbeddedSceneState extends SceneObjectState {
     /**
@@ -710,11 +716,12 @@ interface EmbeddedSceneState extends SceneObjectState {
 }
 declare class EmbeddedScene extends SceneObjectBase<EmbeddedSceneState> {
     static Component: typeof EmbeddedSceneRenderer;
-    private urlSyncManager?;
+    constructor(state: EmbeddedSceneState);
     /**
      * initUrlSync should be called before the scene is rendered to ensure that objects are in sync
      * before they get activated. This saves some unnecessary re-renders and makes sure variables
-     * queries are issued as needed.
+     * queries are issued as needed. If your using SceneAppPage you will not need to call this as
+     * url sync is handled on the SceneAppPage level not this level.
      */
     initUrlSync(): void;
 }
@@ -857,9 +864,11 @@ declare class SceneRefreshPicker extends SceneObjectBase<SceneRefreshPickerState
 }
 declare function SceneRefreshPickerRenderer({ model }: SceneComponentProps<SceneRefreshPicker>): JSX.Element;
 
-interface SceneFlexItemLike extends SceneObject<SceneFlexItemState> {
+interface SceneFlexItemStateLike extends SceneFlexItemPlacement, SceneObjectState {
 }
-interface SceneFlexLayoutState extends SceneObjectState {
+interface SceneFlexItemLike extends SceneObject<SceneFlexItemStateLike> {
+}
+interface SceneFlexLayoutState extends SceneObjectState, SceneFlexItemPlacement {
     direction?: CSSProperties['flexDirection'];
     wrap?: CSSProperties['flexWrap'];
     children: SceneFlexItemLike[];
@@ -869,8 +878,8 @@ declare class SceneFlexLayout extends SceneObjectBase<SceneFlexLayoutState> impl
     toggleDirection(): void;
     isDraggable(): boolean;
 }
-declare function SceneFlexLayoutRenderer({ model }: SceneComponentProps<SceneFlexLayout>): JSX.Element;
-interface SceneFlexItemState extends SceneLayoutItemState {
+declare function SceneFlexLayoutRenderer({ model, parentDirection }: SceneFlexItemRenderProps<SceneFlexLayout>): JSX.Element | null;
+interface SceneFlexItemPlacement {
     flexGrow?: CSSProperties['flexGrow'];
     alignSelf?: CSSProperties['alignSelf'];
     width?: CSSProperties['width'];
@@ -881,11 +890,23 @@ interface SceneFlexItemState extends SceneLayoutItemState {
     maxHeight?: CSSProperties['maxHeight'];
     xSizing?: 'fill' | 'content';
     ySizing?: 'fill' | 'content';
+    /**
+     * True when the item should rendered but not visible.
+     * Useful for conditional display of layout items
+     */
+    isHidden?: boolean;
+}
+interface SceneFlexItemState extends SceneFlexItemPlacement, SceneObjectState {
+    body: SceneObject | undefined;
+    isHidden?: boolean;
+}
+interface SceneFlexItemRenderProps<T> extends SceneComponentProps<T> {
+    parentDirection?: CSSProperties['flexDirection'];
 }
 declare class SceneFlexItem extends SceneObjectBase<SceneFlexItemState> {
     static Component: typeof SceneFlexItemRenderer;
 }
-declare function SceneFlexItemRenderer({ model }: SceneComponentProps<SceneFlexItem>): JSX.Element | null;
+declare function SceneFlexItemRenderer({ model, parentDirection }: SceneFlexItemRenderProps<SceneFlexItem>): JSX.Element | null;
 
 interface SceneByFrameRepeaterState extends SceneObjectState {
     body: SceneFlexLayout;
@@ -902,6 +923,8 @@ declare class SceneControlsSpacer extends SceneObjectBase<{}> {
     static Component: (_props: SceneComponentProps<SceneControlsSpacer>) => JSX.Element;
 }
 
+declare function SceneGridLayoutRenderer({ model }: SceneComponentProps<SceneGridLayout>): JSX.Element;
+
 interface SceneGridItemPlacement {
     x?: number;
     y?: number;
@@ -938,6 +961,7 @@ interface SceneGridLayoutState extends SceneObjectState {
      * Turn on or off dragging for all items. Indiviadual items can still disabled via isDraggable property
      **/
     isDraggable?: boolean;
+    isLazy?: boolean;
     children: SceneGridItemLike[];
 }
 declare class SceneGridLayout extends SceneObjectBase<SceneGridLayoutState> implements SceneLayout {
@@ -971,8 +995,8 @@ declare class SceneGridLayout extends SceneObjectBase<SceneGridLayoutState> impl
     private toGridCell;
     buildGridLayout(width: number): ReactGridLayout.Layout[];
 }
-declare function SceneGridLayoutRenderer({ model }: SceneComponentProps<SceneGridLayout>): JSX.Element;
-interface SceneGridItemState extends SceneGridItemStateLike, SceneLayoutItemState {
+interface SceneGridItemState extends SceneGridItemStateLike {
+    body: SceneObject | undefined;
 }
 declare class SceneGridItem extends SceneObjectBase<SceneGridItemState> implements SceneGridItemLike {
     static Component: typeof SceneGridItemRenderer;
@@ -1006,16 +1030,35 @@ interface SceneAppPageState extends SceneObjectState {
     titleIcon?: IconName$1;
     url: string;
     routePath?: string;
+    /** Shown in the top right inline with the page title */
+    controls?: SceneObject[];
     hideFromBreadcrumbs?: boolean;
     tabs?: SceneAppPageLike[];
-    getScene: (routeMatch: SceneRouteMatch) => EmbeddedScene;
+    getScene?: (routeMatch: SceneRouteMatch) => EmbeddedScene;
     drilldowns?: SceneAppDrilldownView[];
     getParentPage?: () => SceneAppPageLike;
     preserveUrlKeys?: string[];
+    /**
+     * The current initialized scene, this is set by the framework after scene url initialization
+     **/
+    initializedScene?: SceneObject;
+}
+interface SceneAppPageLike extends SceneObject<SceneAppPageState> {
+    initializeScene(scene: SceneObject): void;
+    /**
+     * @internal. Please don't call this from plugin code.
+     * Will call the state.getScene function with the current routeMatch and will cache the resulting Scene using the routeMatch.url as key.
+     */
+    getScene(routeMatch: SceneRouteMatch): EmbeddedScene;
+    /**
+     * @internal. Please don't call this from plugin code.
+     * Get drilldown scene. Will call the drilldown.getPage function with the current routeMatch and will cache the resulting page using the routeMatch.url as key.
+     */
+    getDrilldownPage(drilldown: SceneAppDrilldownView, routeMatch: SceneRouteMatch): SceneAppPageLike;
 }
-type SceneAppPageLike = SceneObject<SceneAppPageState>;
 interface SceneAppDrilldownView {
     routePath: string;
+    defaultRoute?: boolean;
     getPage: (routeMatch: SceneRouteMatch<any>, parent: SceneAppPageLike) => SceneAppPageLike;
 }
 
@@ -1029,10 +1072,19 @@ declare class SceneApp extends SceneObjectBase<SceneAppState> {
 /**
  * Responsible for page's drilldown & tabs routing
  */
-declare class SceneAppPage extends SceneObjectBase<SceneAppPageState> {
+declare class SceneAppPage extends SceneObjectBase<SceneAppPageState> implements SceneAppPageLike {
     static Component: typeof SceneAppPageRenderer;
+    private _sceneCache;
+    private _drilldownCache;
+    constructor(state: SceneAppPageState);
+    initializeScene(scene: EmbeddedScene): void;
+    getScene(routeMatch: SceneRouteMatch): EmbeddedScene;
+    getDrilldownPage(drilldown: SceneAppDrilldownView, routeMatch: SceneRouteMatch<{}>): SceneAppPageLike;
+}
+interface SceneAppPageRendererProps extends SceneComponentProps<SceneAppPage> {
+    routeProps: RouteComponentProps;
 }
-declare function SceneAppPageRenderer({ model }: SceneComponentProps<SceneAppPage>): JSX.Element;
+declare function SceneAppPageRenderer({ model, routeProps }: SceneAppPageRendererProps): JSX.Element;
 
 interface SceneReactObjectState<TProps = {}> extends SceneObjectState {
     /**
@@ -1055,4 +1107,4 @@ declare class SceneReactObject extends SceneObjectBase<SceneReactObjectState> {
     static Component: ({ model }: SceneComponentProps<SceneReactObject>) => {} | null;
 }
 
-export { CancelActivationHandler, ConstantVariable, CustomFormatterVariable, CustomTransformOperator, CustomVariable, CustomVariableValue, DataSourceVariable, DeepPartial, EmbeddedScene, EmbeddedSceneState, FormatVariable, InterpolationFormatParameter, NestedScene, QueryRunnerState, QueryVariable, SceneActivationHandler, SceneApp, SceneAppDrilldownView, SceneAppPage, SceneAppPageLike, SceneAppPageState, SceneAppRoute, SceneByFrameRepeater, SceneCanvasText, SceneComponent, SceneComponentProps, SceneControlsSpacer, SceneDataNode, SceneDataProvider, SceneDataState, SceneDataTransformer, SceneDeactivationHandler, SceneFlexItem, SceneFlexLayout, SceneGridItem, SceneGridLayout, SceneGridRow, SceneLayout, SceneLayoutChildOptions, SceneLayoutItemState, SceneLayoutState, SceneObject, SceneObjectBase, SceneObjectRef, SceneObjectState, SceneObjectStateChangedEvent, SceneObjectStateChangedPayload, SceneObjectUrlSyncConfig, SceneObjectUrlSyncHandler, SceneObjectUrlValue, SceneObjectUrlValues, SceneObjectWithUrlSync, SceneQueryRunner, SceneReactObject, SceneRefreshPicker, SceneRouteMatch, SceneStateChangedHandler, SceneTimePicker, SceneTimeRange, SceneTimeRangeLike, SceneTimeRangeState, SceneToolbarButton, SceneToolbarInput, SceneVariable, SceneVariableDependencyConfigLike, SceneVariableSet, SceneVariableSetState, SceneVariableState, SceneVariableValueChangedEvent, SceneVariables, TestVariable, TextBoxVariable, UrlSyncManager, ValidateAndUpdateResult, VariableCustomFormatterFn, VariableDependencyConfig, VariableValue, VariableValueOption, VariableValueSelectors, VariableValueSingle, VizPanel, VizPanelMenu, VizPanelState, formatRegistry, isCustomVariableValue, isSceneObject, sceneGraph };
+export { CancelActivationHandler, ConstantVariable, CustomFormatterVariable, CustomTransformOperator, CustomVariable, CustomVariableValue, DataSourceVariable, DeepPartial, EmbeddedScene, EmbeddedSceneState, FormatVariable, InterpolationFormatParameter, NestedScene, QueryRunnerState, QueryVariable, SceneActivationHandler, SceneApp, SceneAppDrilldownView, SceneAppPage, SceneAppPageLike, SceneAppPageState, SceneAppRoute, SceneByFrameRepeater, SceneCanvasText, SceneComponent, SceneComponentProps, SceneControlsSpacer, SceneDataNode, SceneDataProvider, SceneDataState, SceneDataTransformer, SceneDeactivationHandler, SceneFlexItem, SceneFlexLayout, SceneGridItem, SceneGridLayout, SceneGridRow, SceneLayout, SceneLayoutChildOptions, SceneLayoutState, SceneObject, SceneObjectBase, SceneObjectRef, SceneObjectState, SceneObjectStateChangedEvent, SceneObjectStateChangedPayload, SceneObjectUrlSyncConfig, SceneObjectUrlSyncHandler, SceneObjectUrlValue, SceneObjectUrlValues, SceneObjectWithUrlSync, SceneQueryRunner, SceneReactObject, SceneRefreshPicker, SceneRouteMatch, SceneStateChangedHandler, SceneStatelessBehavior, SceneTimePicker, SceneTimeRange, SceneTimeRangeLike, SceneTimeRangeState, SceneToolbarButton, SceneToolbarInput, SceneVariable, SceneVariableDependencyConfigLike, SceneVariableSet, SceneVariableSetState, SceneVariableState, SceneVariableValueChangedEvent, SceneVariables, TestVariable, TextBoxVariable, UrlSyncManagerLike as UrlSyncManager, ValidateAndUpdateResult, VariableCustomFormatterFn, VariableDependencyConfig, VariableValue, VariableValueOption, VariableValueSelectors, VariableValueSingle, VizPanel, VizPanelMenu, VizPanelState, formatRegistry, getUrlSyncManager, isCustomVariableValue, isSceneObject, sceneGraph };