@grafana/scenes 4.26.2 → 4.26.3--canary.765.9397990341.0

package/dist/index.d.ts

@@ -7,6 +7,7 @@ import { Observable, Unsubscribable, MonoTypeOperatorFunction, Subscription, Rep
 import * as _grafana_schema from '@grafana/schema';
 import { VariableType, VariableHide, TimeZone, DataTopic, DataQuery, DataSourceRef, VariableRefresh, LoadingState, DashboardCursorSync, MatcherConfig, TableFieldOptions } from '@grafana/schema';
 import { VariableInterpolation } from '@grafana/runtime';
+import { Location } from 'history';
 import { PanelContext, IconName } from '@grafana/ui';
 import ReactGridLayout from 'react-grid-layout';
 import { RouteComponentProps } from 'react-router-dom';
@@ -1559,26 +1560,39 @@ interface UrlSyncManagerLike {
     initSync(root: SceneObject): void;
     cleanUp(root: SceneObject): void;
     getUrlState(root: SceneObject): SceneObjectUrlValues;
+    handleNewLocation(location: Location): void;
+    handleNewObject(sceneObj: SceneObject): void;
 }
 declare class UrlSyncManager implements UrlSyncManagerLike {
     private _urlKeyMapper;
-    private _sceneRoot;
+    private _sceneRoot?;
     private _stateSub;
-    private _locationSub?;
-    private _lastPath?;
-    private _ignoreNextLocationUpdate;
+    private _lastLocation;
+    private _urlParams;
     /**
      * Updates the current scene state to match URL state.
      */
     initSync(root: SceneObject): void;
     cleanUp(root: SceneObject): void;
     syncFrom(sceneObj: SceneObject): void;
-    private _onLocationUpdate;
+    handleNewLocation(location: Location): void;
+    handleNewObject(sceneObj: SceneObject): void;
     private _onStateChanged;
     getUrlState(root: SceneObject): SceneObjectUrlValues;
 }
 declare function getUrlSyncManager(): UrlSyncManagerLike;
 
+declare function useUrlSync(sceneRoot: SceneObject): boolean;
+
+interface UrlSyncContextProviderProps {
+    scene: SceneObject;
+    children: React.ReactNode;
+}
+/**
+ * Right now this is actually not defining a context, but think it might in the future (with UrlSyncManager as the context value)
+ */
+declare function UrlSyncContextProvider({ children, scene }: UrlSyncContextProviderProps): React$1.ReactNode;
+
 interface EmbeddedSceneState extends SceneObjectState {
     /**
      * The main content of the scene (usually a SceneFlexLayout)
@@ -1592,13 +1606,6 @@ interface EmbeddedSceneState extends SceneObjectState {
 declare class EmbeddedScene extends SceneObjectBase<EmbeddedSceneState> {
     static Component: typeof EmbeddedSceneRenderer;
     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. 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;
 }
 declare function EmbeddedSceneRenderer({ model }: SceneComponentProps<EmbeddedScene>): React__default.JSX.Element;
 
@@ -2633,4 +2640,4 @@ declare const sceneUtils: {
     isGroupByVariable: typeof isGroupByVariable;
 };
 
-export { AdHocFiltersVariable, CancelActivationHandler, ConstantVariable, ControlsLayout, CustomFormatterVariable, CustomTransformOperator, CustomTransformerDefinition, CustomVariable, CustomVariableValue, DataLayerFilter, DataRequestEnricher, DataSourceVariable, DeepPartial, EmbeddedScene, EmbeddedSceneState, ExtraQueryDataProcessor, ExtraQueryDescriptor, ExtraQueryProvider, FieldConfigBuilder, FieldConfigBuilders, FieldConfigOverridesBuilder, FormatVariable, GroupByVariable, InterpolationFormatParameter, IntervalVariable, LocalValueVariable, MacroVariableConstructor, MultiValueVariable, NestedScene, PanelBuilders, PanelOptionsBuilders, QueryRunnerState, QueryVariable, RuntimeDataSource, SceneActivationHandler, SceneApp, SceneAppDrilldownView, SceneAppPage, SceneAppPageLike, SceneAppPageState, SceneAppRoute, SceneByFrameRepeater, SceneByVariableRepeater, SceneCSSGridItem, SceneCSSGridLayout, SceneCanvasText, SceneComponent, SceneComponentProps, SceneControlsSpacer, SceneDataLayerBase, SceneDataLayerControls, SceneDataLayerProvider, SceneDataLayerProviderState, SceneDataLayerSet, SceneDataLayerSetBase, SceneDataNode, SceneDataProvider, SceneDataProviderResult, SceneDataQuery, SceneDataState, SceneDataTransformer, SceneDeactivationHandler, SceneDebugger, SceneFlexItem, SceneFlexItemLike, SceneFlexItemState, SceneFlexLayout, SceneGridItem, SceneGridItemLike, SceneGridItemStateLike, SceneGridLayout, SceneGridRow, SceneLayout, SceneLayoutChildOptions, SceneLayoutState, SceneObject, SceneObjectBase, SceneObjectRef, SceneObjectState, SceneObjectStateChangedEvent, SceneObjectStateChangedPayload, SceneObjectUrlSyncConfig, SceneObjectUrlSyncHandler, SceneObjectUrlValue, SceneObjectUrlValues, SceneObjectWithUrlSync, SceneQueryControllerEntry, SceneQueryControllerEntryType, SceneQueryControllerLike, SceneQueryRunner, SceneReactObject, SceneRefreshPicker, SceneRefreshPickerState, SceneRouteMatch, SceneStateChangedHandler, SceneStatelessBehavior, SceneTimePicker, SceneTimeRange, SceneTimeRangeCompare, SceneTimeRangeLike, SceneTimeRangeState, SceneTimeRangeTransformerBase, SceneTimeZoneOverride, SceneToolbarButton, SceneToolbarInput, SceneVariable, SceneVariableDependencyConfigLike, SceneVariableSet, SceneVariableSetState, SceneVariableState, SceneVariableValueChangedEvent, SceneVariables, SplitLayout, TestVariable, TextBoxVariable, UrlSyncManager, UrlSyncManagerLike, UseStateHookOptions, UserActionEvent, ValidateAndUpdateResult, VariableCustomFormatterFn, VariableDependencyConfig, VariableValue, VariableValueControl, VariableValueOption, VariableValueSelectWrapper, VariableValueSelectors, VariableValueSingle, VizConfig, VizConfigBuilder, VizConfigBuilders, VizPanel, VizPanelBuilder, VizPanelMenu, VizPanelState, index$1 as behaviors, index as dataLayers, formatRegistry, getUrlSyncManager, isCustomVariableValue, isDataLayer, isDataRequestEnricher, isSceneObject, registerQueryWithController, registerRuntimeDataSource, sceneGraph, sceneUtils, useSceneApp, useSceneObjectState };
+export { AdHocFiltersVariable, CancelActivationHandler, ConstantVariable, ControlsLayout, CustomFormatterVariable, CustomTransformOperator, CustomTransformerDefinition, CustomVariable, CustomVariableValue, DataLayerFilter, DataRequestEnricher, DataSourceVariable, DeepPartial, EmbeddedScene, EmbeddedSceneState, ExtraQueryDataProcessor, ExtraQueryDescriptor, ExtraQueryProvider, FieldConfigBuilder, FieldConfigBuilders, FieldConfigOverridesBuilder, FormatVariable, GroupByVariable, InterpolationFormatParameter, IntervalVariable, LocalValueVariable, MacroVariableConstructor, MultiValueVariable, NestedScene, PanelBuilders, PanelOptionsBuilders, QueryRunnerState, QueryVariable, RuntimeDataSource, SceneActivationHandler, SceneApp, SceneAppDrilldownView, SceneAppPage, SceneAppPageLike, SceneAppPageState, SceneAppRoute, SceneByFrameRepeater, SceneByVariableRepeater, SceneCSSGridItem, SceneCSSGridLayout, SceneCanvasText, SceneComponent, SceneComponentProps, SceneControlsSpacer, SceneDataLayerBase, SceneDataLayerControls, SceneDataLayerProvider, SceneDataLayerProviderState, SceneDataLayerSet, SceneDataLayerSetBase, SceneDataNode, SceneDataProvider, SceneDataProviderResult, SceneDataQuery, SceneDataState, SceneDataTransformer, SceneDeactivationHandler, SceneDebugger, SceneFlexItem, SceneFlexItemLike, SceneFlexItemState, SceneFlexLayout, SceneGridItem, SceneGridItemLike, SceneGridItemStateLike, SceneGridLayout, SceneGridRow, SceneLayout, SceneLayoutChildOptions, SceneLayoutState, SceneObject, SceneObjectBase, SceneObjectRef, SceneObjectState, SceneObjectStateChangedEvent, SceneObjectStateChangedPayload, SceneObjectUrlSyncConfig, SceneObjectUrlSyncHandler, SceneObjectUrlValue, SceneObjectUrlValues, SceneObjectWithUrlSync, SceneQueryControllerEntry, SceneQueryControllerEntryType, SceneQueryControllerLike, SceneQueryRunner, SceneReactObject, SceneRefreshPicker, SceneRefreshPickerState, SceneRouteMatch, SceneStateChangedHandler, SceneStatelessBehavior, SceneTimePicker, SceneTimeRange, SceneTimeRangeCompare, SceneTimeRangeLike, SceneTimeRangeState, SceneTimeRangeTransformerBase, SceneTimeZoneOverride, SceneToolbarButton, SceneToolbarInput, SceneVariable, SceneVariableDependencyConfigLike, SceneVariableSet, SceneVariableSetState, SceneVariableState, SceneVariableValueChangedEvent, SceneVariables, SplitLayout, TestVariable, TextBoxVariable, UrlSyncContextProvider, UrlSyncManager, UrlSyncManagerLike, UseStateHookOptions, UserActionEvent, ValidateAndUpdateResult, VariableCustomFormatterFn, VariableDependencyConfig, VariableValue, VariableValueControl, VariableValueOption, VariableValueSelectWrapper, VariableValueSelectors, VariableValueSingle, VizConfig, VizConfigBuilder, VizConfigBuilders, VizPanel, VizPanelBuilder, VizPanelMenu, VizPanelState, index$1 as behaviors, index as dataLayers, formatRegistry, getUrlSyncManager, isCustomVariableValue, isDataLayer, isDataRequestEnricher, isSceneObject, registerQueryWithController, registerRuntimeDataSource, sceneGraph, sceneUtils, useSceneApp, useSceneObjectState, useUrlSync };

package/dist/index.js

@@ -591,39 +591,42 @@ class UniqueUrlKeyMapper {
     this.index = /* @__PURE__ */ new Map();
   }
   getUniqueKey(key, obj) {
-    const objectsWithKey = this.index.get(key);
+    let objectsWithKey = this.index.get(key);
     if (!objectsWithKey) {
-      throw new Error("Cannot find any scene object that uses the key '" + key + "'");
+      this.index.set(key, [obj]);
+      return key;
+    }
+    let address = objectsWithKey.findIndex((o) => o === obj);
+    if (address === -1) {
+      objectsWithKey = filterOutDeadObjects(objectsWithKey);
+      objectsWithKey.push(obj);
+      address = objectsWithKey.length - 1;
     }
-    const address = objectsWithKey.findIndex((o) => o.sceneObject === obj);
     if (address > 0) {
       return `${key}-${address + 1}`;
     }
     return key;
   }
-  rebuildIndex(root) {
+  clear() {
     this.index.clear();
-    this.buildIndex(root, 0);
-  }
-  buildIndex(sceneObject, depth) {
-    if (sceneObject.urlSync) {
-      for (const key of sceneObject.urlSync.getKeys()) {
-        const hit = this.index.get(key);
-        if (hit) {
-          hit.push({ sceneObject, depth });
-          hit.sort((a, b) => a.depth - b.depth);
-        } else {
-          this.index.set(key, [{ sceneObject, depth }]);
+  }
+}
+function filterOutDeadObjects(sceneObjects) {
+  const filtered = [];
+  for (const obj of sceneObjects) {
+    if (obj.parent) {
+      obj.parent.forEachChild((child) => {
+        if (child === obj) {
+          filtered.push(child);
         }
-      }
+      });
     }
-    sceneObject.forEachChild((child) => this.buildIndex(child, depth + 1));
   }
+  return filtered;
 }
 
 function getUrlState(root) {
   const urlKeyMapper = new UniqueUrlKeyMapper();
-  urlKeyMapper.rebuildIndex(root);
   const result = {};
   const visitNode = (obj) => {
     if (obj.urlSync) {
@@ -642,10 +645,18 @@ function getUrlState(root) {
 }
 function syncStateFromSearchParams(root, urlParams) {
   const urlKeyMapper = new UniqueUrlKeyMapper();
-  urlKeyMapper.rebuildIndex(root);
   syncStateFromUrl(root, urlParams, urlKeyMapper);
 }
-function syncStateFromUrl(sceneObject, urlParams, urlKeyMapper) {
+function syncStateFromUrl(root, urlParams, urlKeyMapper) {
+  if (!root.parent) {
+    syncUrlStateToObject(root, urlParams, urlKeyMapper);
+  }
+  root.forEachChild((child) => {
+    syncUrlStateToObject(child, urlParams, urlKeyMapper);
+  });
+  root.forEachChild((child) => syncStateFromUrl(child, urlParams, urlKeyMapper));
+}
+function syncUrlStateToObject(sceneObject, urlParams, urlKeyMapper) {
   if (sceneObject.urlSync) {
     const urlState = {};
     const currentState = sceneObject.urlSync.getUrlState();
@@ -670,7 +681,6 @@ function syncStateFromUrl(sceneObject, urlParams, urlKeyMapper) {
       sceneObject.urlSync.updateFromUrl(urlState);
     }
   }
-  sceneObject.forEachChild((child) => syncStateFromUrl(child, urlParams, urlKeyMapper));
 }
 function isUrlValueEqual(currentUrlValue, newUrlValue) {
   if (currentUrlValue.length === 0 && newUrlValue == null) {
@@ -7720,28 +7730,12 @@ class UrlSyncManager {
   constructor() {
     this._urlKeyMapper = new UniqueUrlKeyMapper();
     this._stateSub = null;
-    this._locationSub = null;
-    this._ignoreNextLocationUpdate = false;
-    this._onLocationUpdate = (location) => {
-      if (this._ignoreNextLocationUpdate) {
-        this._ignoreNextLocationUpdate = false;
-        return;
-      }
-      if (this._lastPath !== location.pathname) {
-        return;
-      }
-      const urlParams = new URLSearchParams(location.search);
-      this._urlKeyMapper.rebuildIndex(this._sceneRoot);
-      syncStateFromUrl(this._sceneRoot, urlParams, this._urlKeyMapper);
-      this._lastPath = location.pathname;
-    };
     this._onStateChanged = ({ payload }) => {
       const changedObject = payload.changedObject;
       if (changedObject.urlSync) {
         const newUrlState = changedObject.urlSync.getUrlState();
         const searchParams = runtime.locationService.getSearch();
         const mappedUpdated = {};
-        this._urlKeyMapper.rebuildIndex(this._sceneRoot);
         for (const [key, newUrlValue] of Object.entries(newUrlState)) {
           const uniqueKey = this._urlKeyMapper.getUniqueKey(key, changedObject);
           const currentUrlValue = searchParams.getAll(uniqueKey);
@@ -7750,24 +7744,26 @@ class UrlSyncManager {
           }
         }
         if (Object.keys(mappedUpdated).length > 0) {
-          this._ignoreNextLocationUpdate = true;
+          writeSceneLog("UrlSyncManager", "onStateChange updating URL");
           runtime.locationService.partial(mappedUpdated, true);
+          this._lastLocation = runtime.locationService.getLocation();
         }
       }
     };
   }
   initSync(root) {
-    if (!this._locationSub) {
-      writeSceneLog("UrlSyncManager", "New location listen");
-      this._locationSub = runtime.locationService.getHistory().listen(this._onLocationUpdate);
-    }
+    var _a;
     if (this._stateSub) {
-      writeSceneLog("UrlSyncManager", "Unregister previous scene state subscription", this._sceneRoot.state.key);
+      writeSceneLog("UrlSyncManager", "Unregister previous scene state subscription", (_a = this._sceneRoot) == null ? void 0 : _a.state.key);
       this._stateSub.unsubscribe();
     }
+    writeSceneLog("UrlSyncManager", "init", root.state.key);
+    const location = runtime.locationService.getLocation();
     this._sceneRoot = root;
-    this._lastPath = runtime.locationService.getLocation().pathname;
+    this._lastLocation = location;
+    this._urlParams = new URLSearchParams(location.search);
     this._stateSub = root.subscribeToEvent(SceneObjectStateChangedEvent, this._onStateChanged);
+    this._urlKeyMapper.clear();
     this.syncFrom(this._sceneRoot);
   }
   cleanUp(root) {
@@ -7775,11 +7771,6 @@ class UrlSyncManager {
       return;
     }
     writeSceneLog("UrlSyncManager", "Clean up");
-    if (this._locationSub) {
-      this._locationSub();
-      writeSceneLog("UrlSyncManager", "Unregister history listen");
-      this._locationSub = null;
-    }
     if (this._stateSub) {
       this._stateSub.unsubscribe();
       this._stateSub = null;
@@ -7790,12 +7781,28 @@ class UrlSyncManager {
         this._sceneRoot.state.key === root.state.key
       );
     }
+    this._sceneRoot = void 0;
+    this._urlParams = void 0;
   }
   syncFrom(sceneObj) {
     const urlParams = runtime.locationService.getSearch();
-    this._urlKeyMapper.rebuildIndex(this._sceneRoot);
     syncStateFromUrl(sceneObj, urlParams, this._urlKeyMapper);
   }
+  handleNewLocation(location) {
+    if (!this._sceneRoot || this._lastLocation === location) {
+      return;
+    }
+    writeSceneLog("UrlSyncManager", "handleNewLocation");
+    this._urlParams = new URLSearchParams(location.search);
+    this._lastLocation = location;
+    syncStateFromUrl(this._sceneRoot, this._urlParams, this._urlKeyMapper);
+  }
+  handleNewObject(sceneObj) {
+    if (!this._sceneRoot || !this._urlParams) {
+      return;
+    }
+    syncStateFromUrl(sceneObj, this._urlParams, this._urlKeyMapper);
+  }
   getUrlState(root) {
     return getUrlState(root);
   }
@@ -7808,6 +7815,29 @@ function getUrlSyncManager() {
   return urlSyncManager;
 }
 
+function useUrlSync(sceneRoot) {
+  const urlSyncManager = getUrlSyncManager();
+  const location = reactRouterDom.useLocation();
+  const [isInitialized, setIsInitialized] = React.useState(false);
+  React.useEffect(() => {
+    urlSyncManager.initSync(sceneRoot);
+    setIsInitialized(true);
+    return () => urlSyncManager.cleanUp(sceneRoot);
+  }, [sceneRoot, urlSyncManager]);
+  React.useEffect(() => {
+    urlSyncManager.handleNewLocation(location);
+  }, [sceneRoot, urlSyncManager, location]);
+  return isInitialized;
+}
+
+function UrlSyncContextProvider({ children, scene }) {
+  const isInitialized = useUrlSync(scene);
+  if (!isInitialized) {
+    return null;
+  }
+  return children;
+}
+
 function setWindowGrafanaSceneContext(activeScene) {
   const prevScene = window.__grafanaSceneContext;
   writeSceneLog("setWindowGrafanaScene", "set window.__grafanaSceneContext", activeScene);
@@ -7827,13 +7857,9 @@ class EmbeddedScene extends SceneObjectBase {
       const unsetGlobalScene = setWindowGrafanaSceneContext(this);
       return () => {
         unsetGlobalScene();
-        getUrlSyncManager().cleanUp(this);
       };
     });
   }
-  initUrlSync() {
-    getUrlSyncManager().initSync(this);
-  }
 }
 EmbeddedScene.Component = EmbeddedSceneRenderer;
 function EmbeddedSceneRenderer({ model }) {
@@ -10306,7 +10332,8 @@ function SceneAppPageView({ page, routeProps }) {
   React.useEffect(() => {
     return () => containerPage.setState({ initializedScene: void 0 });
   }, [containerPage]);
-  if (!isInitialized) {
+  const urlSyncInitialized = useUrlSync(containerPage);
+  if (!isInitialized && !urlSyncInitialized) {
     return null;
   }
   const pageNav = {
@@ -10379,13 +10406,9 @@ class SceneAppPage extends SceneObjectBase {
     super(state);
     this._sceneCache = /* @__PURE__ */ new Map();
     this._drilldownCache = /* @__PURE__ */ new Map();
-    this.addActivationHandler(() => {
-      return () => getUrlSyncManager().cleanUp(this);
-    });
   }
   initializeScene(scene) {
     this.setState({ initializedScene: scene });
-    getUrlSyncManager().initSync(this);
   }
   getScene(routeMatch) {
     let scene = this._sceneCache.get(routeMatch.url);
@@ -11380,6 +11403,7 @@ exports.SceneVariableValueChangedEvent = SceneVariableValueChangedEvent;
 exports.SplitLayout = SplitLayout;
 exports.TestVariable = TestVariable;
 exports.TextBoxVariable = TextBoxVariable;
+exports.UrlSyncContextProvider = UrlSyncContextProvider;
 exports.UrlSyncManager = UrlSyncManager;
 exports.UserActionEvent = UserActionEvent;
 exports.VariableDependencyConfig = VariableDependencyConfig;
@@ -11405,4 +11429,5 @@ exports.sceneGraph = sceneGraph;
 exports.sceneUtils = sceneUtils;
 exports.useSceneApp = useSceneApp;
 exports.useSceneObjectState = useSceneObjectState;
+exports.useUrlSync = useUrlSync;
 //# sourceMappingURL=index.js.map