@grafana/scenes 5.12.0 → 5.13.0--canary.878.10702174754.0

package/dist/esm/services/UrlSyncManager.js

@@ -1,8 +1,11 @@
 import { locationService } from '@grafana/runtime';
 import { SceneObjectStateChangedEvent } from '../core/events.js';
 import { writeSceneLog } from '../utils/writeSceneLog.js';
+import { Subscription } from 'rxjs';
 import { UniqueUrlKeyMapper } from './UniqueUrlKeyMapper.js';
-import { syncStateFromUrl, getUrlState, isUrlValueEqual } from './utils.js';
+import { getUrlState, syncStateFromUrl, isUrlValueEqual } from './utils.js';
+import { BusEventWithPayload } from '@grafana/data';
+import { useMemo } from 'react';
 
 var __accessCheck = (obj, member, msg) => {
   if (!member.has(obj))
@@ -22,54 +25,53 @@ var __privateSet = (obj, member, value, setter) => {
   setter ? setter.call(obj, value) : member.set(obj, value);
   return value;
 };
-var _onStateChanged, _cache, _location;
+var _cache, _location;
+class NewSceneObjectAddedEvent extends BusEventWithPayload {
+}
+NewSceneObjectAddedEvent.type = "new-scene-object-added";
 class UrlSyncManager {
-  constructor() {
+  constructor(_options = {}) {
     this._urlKeyMapper = new UniqueUrlKeyMapper();
-    this._stateSub = null;
     this._paramsCache = new UrlParamsCache();
-    __privateAdd(this, _onStateChanged, ({ payload }) => {
-      const changedObject = payload.changedObject;
-      if (changedObject.urlSync) {
-        const newUrlState = changedObject.urlSync.getUrlState();
-        const searchParams = locationService.getSearch();
-        const mappedUpdated = {};
-        for (const [key, newUrlValue] of Object.entries(newUrlState)) {
-          const uniqueKey = this._urlKeyMapper.getUniqueKey(key, changedObject);
-          const currentUrlValue = searchParams.getAll(uniqueKey);
-          if (!isUrlValueEqual(currentUrlValue, newUrlValue)) {
-            mappedUpdated[uniqueKey] = newUrlValue;
-          }
-        }
-        if (Object.keys(mappedUpdated).length > 0) {
-          writeSceneLog("UrlSyncManager", "onStateChange updating URL");
-          locationService.partial(mappedUpdated, true);
-          this._lastLocation = locationService.getLocation();
-        }
-      }
-    });
+    this._options = _options;
   }
   initSync(root) {
     var _a;
-    if (this._stateSub) {
+    if (this._subs) {
       writeSceneLog("UrlSyncManager", "Unregister previous scene state subscription", (_a = this._sceneRoot) == null ? void 0 : _a.state.key);
-      this._stateSub.unsubscribe();
+      this._subs.unsubscribe();
     }
     writeSceneLog("UrlSyncManager", "init", root.state.key);
     this._sceneRoot = root;
-    this._stateSub = root.subscribeToEvent(SceneObjectStateChangedEvent, __privateGet(this, _onStateChanged));
+    this._subs = new Subscription();
+    this._subs.add(
+      root.subscribeToEvent(SceneObjectStateChangedEvent, (evt) => {
+        this.handleSceneObjectStateChanged(evt.payload.changedObject);
+      })
+    );
+    this._subs.add(
+      root.subscribeToEvent(NewSceneObjectAddedEvent, (evt) => {
+        this.handleNewObject(evt.payload);
+      })
+    );
     this._urlKeyMapper.clear();
     this._lastLocation = locationService.getLocation();
     this.handleNewObject(this._sceneRoot);
+    if (this._options.updateUrlOnInit) {
+      const urlState = getUrlState(root);
+      if (isUrlStateDifferent(urlState, this._paramsCache.getParams())) {
+        locationService.partial(urlState, true);
+      }
+    }
   }
   cleanUp(root) {
     if (this._sceneRoot !== root) {
       return;
     }
     writeSceneLog("UrlSyncManager", "Clean up");
-    if (this._stateSub) {
-      this._stateSub.unsubscribe();
-      this._stateSub = null;
+    if (this._subs) {
+      this._subs.unsubscribe();
+      this._subs = void 0;
       writeSceneLog(
         "UrlSyncManager",
         "Root deactived, unsub to state",
@@ -94,11 +96,33 @@ class UrlSyncManager {
     }
     syncStateFromUrl(sceneObj, this._paramsCache.getParams(), this._urlKeyMapper);
   }
+  handleSceneObjectStateChanged(changedObject) {
+    var _a, _b;
+    if (!changedObject.urlSync) {
+      return;
+    }
+    const newUrlState = changedObject.urlSync.getUrlState();
+    const searchParams = locationService.getSearch();
+    const mappedUpdated = {};
+    for (const [key, newUrlValue] of Object.entries(newUrlState)) {
+      const uniqueKey = this._urlKeyMapper.getUniqueKey(key, changedObject);
+      const currentUrlValue = searchParams.getAll(uniqueKey);
+      if (!isUrlValueEqual(currentUrlValue, newUrlValue)) {
+        mappedUpdated[uniqueKey] = newUrlValue;
+      }
+    }
+    if (Object.keys(mappedUpdated).length > 0) {
+      const shouldCreateHistoryEntry = (_b = (_a = changedObject.urlSync).shouldCreateHistoryStep) == null ? void 0 : _b.call(_a, newUrlState);
+      const shouldReplace = shouldCreateHistoryEntry !== true;
+      writeSceneLog("UrlSyncManager", "onStateChange updating URL");
+      locationService.partial(mappedUpdated, shouldReplace);
+      this._lastLocation = locationService.getLocation();
+    }
+  }
   getUrlState(root) {
     return getUrlState(root);
   }
 }
-_onStateChanged = new WeakMap();
 class UrlParamsCache {
   constructor() {
     __privateAdd(this, _cache, void 0);
@@ -116,13 +140,23 @@ class UrlParamsCache {
 }
 _cache = new WeakMap();
 _location = new WeakMap();
-let urlSyncManager;
-function getUrlSyncManager() {
-  if (!urlSyncManager) {
-    urlSyncManager = new UrlSyncManager();
+function isUrlStateDifferent(sceneUrlState, currentParams) {
+  for (let key in sceneUrlState) {
+    if (!isUrlValueEqual(currentParams.getAll(key), sceneUrlState[key])) {
+      return true;
+    }
   }
-  return urlSyncManager;
+  return false;
+}
+function useUrlSyncManager(options) {
+  return useMemo(
+    () => new UrlSyncManager({
+      updateUrlOnInit: options.updateUrlOnInit,
+      createBrowserHistorySteps: options.createBrowserHistorySteps
+    }),
+    [options.updateUrlOnInit, options.createBrowserHistorySteps]
+  );
 }
 
-export { UrlSyncManager, getUrlSyncManager };
+export { NewSceneObjectAddedEvent, UrlSyncManager, useUrlSyncManager };
 //# sourceMappingURL=UrlSyncManager.js.map

package/dist/esm/services/UrlSyncManager.js.map

@@ -1 +1 @@
-{"version":3,"file":"UrlSyncManager.js","sources":["../../../src/services/UrlSyncManager.ts"],"sourcesContent":["import { Location } from 'history';\n\nimport { locationService } from '@grafana/runtime';\n\nimport { SceneObjectStateChangedEvent } from '../core/events';\nimport { SceneObject, SceneObjectUrlValues } from '../core/types';\nimport { writeSceneLog } from '../utils/writeSceneLog';\nimport { Unsubscribable } from 'rxjs';\nimport { UniqueUrlKeyMapper } from './UniqueUrlKeyMapper';\nimport { getUrlState, isUrlValueEqual, syncStateFromUrl } from './utils';\n\nexport interface UrlSyncManagerLike {\n  initSync(root: SceneObject): void;\n  cleanUp(root: SceneObject): void;\n  getUrlState(root: SceneObject): SceneObjectUrlValues;\n  handleNewLocation(location: Location): void;\n  handleNewObject(sceneObj: SceneObject): void;\n}\n\nexport class UrlSyncManager implements UrlSyncManagerLike {\n  private _urlKeyMapper = new UniqueUrlKeyMapper();\n  private _sceneRoot?: SceneObject;\n  private _stateSub: Unsubscribable | null = null;\n  private _lastLocation: Location | undefined;\n  private _paramsCache = new UrlParamsCache();\n\n  /**\n   * Updates the current scene state to match URL state.\n   */\n  public initSync(root: SceneObject) {\n    if (this._stateSub) {\n      writeSceneLog('UrlSyncManager', 'Unregister previous scene state subscription', this._sceneRoot?.state.key);\n      this._stateSub.unsubscribe();\n    }\n\n    writeSceneLog('UrlSyncManager', 'init', root.state.key);\n\n    this._sceneRoot = root;\n    this._stateSub = root.subscribeToEvent(SceneObjectStateChangedEvent, this.#onStateChanged);\n\n    this._urlKeyMapper.clear();\n    this._lastLocation = locationService.getLocation();\n\n    this.handleNewObject(this._sceneRoot);\n  }\n\n  public cleanUp(root: SceneObject) {\n    // Ignore this if we have a new or different root\n    if (this._sceneRoot !== root) {\n      return;\n    }\n\n    writeSceneLog('UrlSyncManager', 'Clean up');\n\n    if (this._stateSub) {\n      this._stateSub.unsubscribe();\n      this._stateSub = null;\n      writeSceneLog(\n        'UrlSyncManager',\n        'Root deactived, unsub to state',\n        'same key',\n        this._sceneRoot.state.key === root.state.key\n      );\n    }\n\n    this._sceneRoot = undefined;\n    this._lastLocation = undefined;\n  }\n\n  public handleNewLocation(location: Location) {\n    if (!this._sceneRoot || this._lastLocation === location) {\n      return;\n    }\n\n    writeSceneLog('UrlSyncManager', 'handleNewLocation');\n\n    this._lastLocation = location;\n\n    // Sync scene state tree from url\n    syncStateFromUrl(this._sceneRoot!, this._paramsCache.getParams(), this._urlKeyMapper);\n  }\n\n  public handleNewObject(sceneObj: SceneObject) {\n    if (!this._sceneRoot) {\n      return;\n    }\n\n    syncStateFromUrl(sceneObj, this._paramsCache.getParams(), this._urlKeyMapper);\n  }\n\n  #onStateChanged = ({ payload }: SceneObjectStateChangedEvent) => {\n    const changedObject = payload.changedObject;\n\n    if (changedObject.urlSync) {\n      const newUrlState = changedObject.urlSync.getUrlState();\n\n      const searchParams = locationService.getSearch();\n      const mappedUpdated: SceneObjectUrlValues = {};\n\n      for (const [key, newUrlValue] of Object.entries(newUrlState)) {\n        const uniqueKey = this._urlKeyMapper.getUniqueKey(key, changedObject);\n        const currentUrlValue = searchParams.getAll(uniqueKey);\n\n        if (!isUrlValueEqual(currentUrlValue, newUrlValue)) {\n          mappedUpdated[uniqueKey] = newUrlValue;\n        }\n      }\n\n      if (Object.keys(mappedUpdated).length > 0) {\n        writeSceneLog('UrlSyncManager', 'onStateChange updating URL');\n        locationService.partial(mappedUpdated, true);\n\n        /// Mark the location already handled\n        this._lastLocation = locationService.getLocation();\n      }\n    }\n  };\n\n  public getUrlState(root: SceneObject): SceneObjectUrlValues {\n    return getUrlState(root);\n  }\n}\n\nclass UrlParamsCache {\n  #cache: URLSearchParams | undefined;\n  #location: Location | undefined;\n\n  public getParams(): URLSearchParams {\n    const location = locationService.getLocation();\n\n    if (this.#location === location) {\n      return this.#cache!;\n    }\n\n    this.#location = location;\n    this.#cache = new URLSearchParams(location.search);\n\n    return this.#cache;\n  }\n}\n\nlet urlSyncManager: UrlSyncManagerLike | undefined;\n\nexport function getUrlSyncManager(): UrlSyncManagerLike {\n  if (!urlSyncManager) {\n    urlSyncManager = new UrlSyncManager();\n  }\n\n  return urlSyncManager;\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"UrlSyncManager.js","sources":["../../../src/services/UrlSyncManager.ts"],"sourcesContent":["import { Location } from 'history';\n\nimport { locationService } from '@grafana/runtime';\n\nimport { SceneObjectStateChangedEvent } from '../core/events';\nimport { SceneObject, SceneObjectUrlValues, SceneUrlSyncOptions } from '../core/types';\nimport { writeSceneLog } from '../utils/writeSceneLog';\nimport { Subscription } from 'rxjs';\nimport { UniqueUrlKeyMapper } from './UniqueUrlKeyMapper';\nimport { getUrlState, isUrlValueEqual, syncStateFromUrl } from './utils';\nimport { BusEventWithPayload } from '@grafana/data';\nimport { useMemo } from 'react';\n\nexport interface UrlSyncManagerLike {\n  initSync(root: SceneObject): void;\n  cleanUp(root: SceneObject): void;\n  handleNewLocation(location: Location): void;\n  handleNewObject(sceneObj: SceneObject): void;\n}\n\n/**\n * Notify the url sync manager of a new object that has been added to the scene\n * that needs to init state from URL.\n */\nexport class NewSceneObjectAddedEvent extends BusEventWithPayload<SceneObject> {\n  public static readonly type = 'new-scene-object-added';\n}\n\nexport class UrlSyncManager implements UrlSyncManagerLike {\n  private _urlKeyMapper = new UniqueUrlKeyMapper();\n  private _sceneRoot?: SceneObject;\n  private _subs: Subscription | undefined;\n  private _lastLocation: Location | undefined;\n  private _paramsCache = new UrlParamsCache();\n  private _options: SceneUrlSyncOptions;\n\n  public constructor(_options: SceneUrlSyncOptions = {}) {\n    this._options = _options;\n  }\n\n  /**\n   * Updates the current scene state to match URL state.\n   */\n  public initSync(root: SceneObject) {\n    if (this._subs) {\n      writeSceneLog('UrlSyncManager', 'Unregister previous scene state subscription', this._sceneRoot?.state.key);\n      this._subs.unsubscribe();\n    }\n\n    writeSceneLog('UrlSyncManager', 'init', root.state.key);\n\n    this._sceneRoot = root;\n    this._subs = new Subscription();\n\n    this._subs.add(\n      root.subscribeToEvent(SceneObjectStateChangedEvent, (evt) => {\n        this.handleSceneObjectStateChanged(evt.payload.changedObject);\n      })\n    );\n\n    this._subs.add(\n      root.subscribeToEvent(NewSceneObjectAddedEvent, (evt) => {\n        this.handleNewObject(evt.payload);\n      })\n    );\n\n    this._urlKeyMapper.clear();\n    this._lastLocation = locationService.getLocation();\n\n    // Sync current url with state\n    this.handleNewObject(this._sceneRoot);\n\n    if (this._options.updateUrlOnInit) {\n      // Get current url state and update url to match\n      const urlState = getUrlState(root);\n\n      if (isUrlStateDifferent(urlState, this._paramsCache.getParams())) {\n        locationService.partial(urlState, true);\n      }\n    }\n  }\n\n  public cleanUp(root: SceneObject) {\n    // Ignore this if we have a new or different root\n    if (this._sceneRoot !== root) {\n      return;\n    }\n\n    writeSceneLog('UrlSyncManager', 'Clean up');\n\n    if (this._subs) {\n      this._subs.unsubscribe();\n      this._subs = undefined;\n\n      writeSceneLog(\n        'UrlSyncManager',\n        'Root deactived, unsub to state',\n        'same key',\n        this._sceneRoot.state.key === root.state.key\n      );\n    }\n\n    this._sceneRoot = undefined;\n    this._lastLocation = undefined;\n  }\n\n  public handleNewLocation(location: Location) {\n    if (!this._sceneRoot || this._lastLocation === location) {\n      return;\n    }\n\n    writeSceneLog('UrlSyncManager', 'handleNewLocation');\n\n    this._lastLocation = location;\n\n    // Sync scene state tree from url\n    syncStateFromUrl(this._sceneRoot!, this._paramsCache.getParams(), this._urlKeyMapper);\n  }\n\n  public handleNewObject(sceneObj: SceneObject) {\n    if (!this._sceneRoot) {\n      return;\n    }\n\n    syncStateFromUrl(sceneObj, this._paramsCache.getParams(), this._urlKeyMapper);\n  }\n\n  private handleSceneObjectStateChanged(changedObject: SceneObject) {\n    if (!changedObject.urlSync) {\n      return;\n    }\n\n    const newUrlState = changedObject.urlSync.getUrlState();\n\n    const searchParams = locationService.getSearch();\n    const mappedUpdated: SceneObjectUrlValues = {};\n\n    for (const [key, newUrlValue] of Object.entries(newUrlState)) {\n      const uniqueKey = this._urlKeyMapper.getUniqueKey(key, changedObject);\n      const currentUrlValue = searchParams.getAll(uniqueKey);\n\n      if (!isUrlValueEqual(currentUrlValue, newUrlValue)) {\n        mappedUpdated[uniqueKey] = newUrlValue;\n      }\n    }\n\n    if (Object.keys(mappedUpdated).length > 0) {\n      const shouldCreateHistoryEntry = changedObject.urlSync.shouldCreateHistoryStep?.(newUrlState);\n      const shouldReplace = shouldCreateHistoryEntry !== true;\n\n      writeSceneLog('UrlSyncManager', 'onStateChange updating URL');\n      locationService.partial(mappedUpdated, shouldReplace);\n\n      /// Mark the location already handled\n      this._lastLocation = locationService.getLocation();\n    }\n  }\n\n  public getUrlState(root: SceneObject): SceneObjectUrlValues {\n    return getUrlState(root);\n  }\n}\n\nclass UrlParamsCache {\n  #cache: URLSearchParams | undefined;\n  #location: Location | undefined;\n\n  public getParams(): URLSearchParams {\n    const location = locationService.getLocation();\n\n    if (this.#location === location) {\n      return this.#cache!;\n    }\n\n    this.#location = location;\n    this.#cache = new URLSearchParams(location.search);\n\n    return this.#cache;\n  }\n}\n\nfunction isUrlStateDifferent(sceneUrlState: SceneObjectUrlValues, currentParams: URLSearchParams) {\n  for (let key in sceneUrlState) {\n    if (!isUrlValueEqual(currentParams.getAll(key), sceneUrlState[key])) {\n      return true;\n    }\n  }\n\n  return false;\n}\n\n/**\n * Creates a new memoized instance of the UrlSyncManager based on options\n */\nexport function useUrlSyncManager(options: SceneUrlSyncOptions): UrlSyncManagerLike {\n  return useMemo(\n    () =>\n      new UrlSyncManager({\n        updateUrlOnInit: options.updateUrlOnInit,\n        createBrowserHistorySteps: options.createBrowserHistorySteps,\n      }),\n    [options.updateUrlOnInit, options.createBrowserHistorySteps]\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/services/useUrlSync.js

@@ -1,13 +1,13 @@
 import { useState, useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
-import { getUrlSyncManager } from './UrlSyncManager.js';
 import { locationService } from '@grafana/runtime';
 import { writeSceneLog } from '../utils/writeSceneLog.js';
+import { useUrlSyncManager } from './UrlSyncManager.js';
 
-function useUrlSync(sceneRoot) {
-  const urlSyncManager = getUrlSyncManager();
+function useUrlSync(sceneRoot, options = {}) {
   const location = useLocation();
   const [isInitialized, setIsInitialized] = useState(false);
+  const urlSyncManager = useUrlSyncManager(options);
   useEffect(() => {
     urlSyncManager.initSync(sceneRoot);
     setIsInitialized(true);

package/dist/esm/services/useUrlSync.js.map

@@ -1 +1 @@
-{"version":3,"file":"useUrlSync.js","sources":["../../../src/services/useUrlSync.ts"],"sourcesContent":["import { SceneObject } from '../core/types';\nimport { useEffect, useState } from 'react';\nimport { useLocation } from 'react-router-dom';\nimport { getUrlSyncManager } from './UrlSyncManager';\nimport { locationService } from '@grafana/runtime';\nimport { writeSceneLog } from '../utils/writeSceneLog';\n\nexport function useUrlSync(sceneRoot: SceneObject): boolean {\n  const urlSyncManager = getUrlSyncManager();\n  const location = useLocation();\n  const [isInitialized, setIsInitialized] = useState(false);\n\n  useEffect(() => {\n    urlSyncManager.initSync(sceneRoot);\n    setIsInitialized(true);\n    return () => urlSyncManager.cleanUp(sceneRoot);\n  }, [sceneRoot, urlSyncManager]);\n\n  useEffect(() => {\n    // Use latest location, as by the time this effect runs, the location might have changed again\n    const latestLocation = locationService.getLocation();\n    const locationToHandle = latestLocation !== location ? latestLocation : location;\n\n    if (latestLocation !== location) {\n      writeSceneLog('useUrlSync', 'latestLocation different from location')\n    }\n\n    urlSyncManager.handleNewLocation(locationToHandle);\n  }, [sceneRoot, urlSyncManager, location]);\n\n  return isInitialized;\n}\n\nexport interface UrlSyncContextProviderProps {\n  scene: SceneObject;\n  children: React.ReactNode;\n}\n"],"names":[],"mappings":";;;;;;AAOO,SAAS,WAAW,SAAiC,EAAA;AAC1D,EAAA,MAAM,iBAAiB,iBAAkB,EAAA,CAAA;AACzC,EAAA,MAAM,WAAW,WAAY,EAAA,CAAA;AAC7B,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AAExD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,cAAA,CAAe,SAAS,SAAS,CAAA,CAAA;AACjC,IAAA,gBAAA,CAAiB,IAAI,CAAA,CAAA;AACrB,IAAO,OAAA,MAAM,cAAe,CAAA,OAAA,CAAQ,SAAS,CAAA,CAAA;AAAA,GAC5C,EAAA,CAAC,SAAW,EAAA,cAAc,CAAC,CAAA,CAAA;AAE9B,EAAA,SAAA,CAAU,MAAM;AAEd,IAAM,MAAA,cAAA,GAAiB,gBAAgB,WAAY,EAAA,CAAA;AACnD,IAAM,MAAA,gBAAA,GAAmB,cAAmB,KAAA,QAAA,GAAW,cAAiB,GAAA,QAAA,CAAA;AAExE,IAAA,IAAI,mBAAmB,QAAU,EAAA;AAC/B,MAAA,aAAA,CAAc,cAAc,wCAAwC,CAAA,CAAA;AAAA,KACtE;AAEA,IAAA,cAAA,CAAe,kBAAkB,gBAAgB,CAAA,CAAA;AAAA,GAChD,EAAA,CAAC,SAAW,EAAA,cAAA,EAAgB,QAAQ,CAAC,CAAA,CAAA;AAExC,EAAO,OAAA,aAAA,CAAA;AACT;;;;"}
+{"version":3,"file":"useUrlSync.js","sources":["../../../src/services/useUrlSync.ts"],"sourcesContent":["import { SceneObject, SceneUrlSyncOptions } from '../core/types';\nimport { useEffect, useState } from 'react';\nimport { useLocation } from 'react-router-dom';\nimport { locationService } from '@grafana/runtime';\nimport { writeSceneLog } from '../utils/writeSceneLog';\nimport { useUrlSyncManager } from './UrlSyncManager';\n\nexport function useUrlSync(sceneRoot: SceneObject, options: SceneUrlSyncOptions = {}): boolean {\n  const location = useLocation();\n  const [isInitialized, setIsInitialized] = useState(false);\n  const urlSyncManager = useUrlSyncManager(options);\n\n  useEffect(() => {\n    urlSyncManager.initSync(sceneRoot);\n    setIsInitialized(true);\n    return () => urlSyncManager.cleanUp(sceneRoot);\n  }, [sceneRoot, urlSyncManager]);\n\n  useEffect(() => {\n    // Use latest location, as by the time this effect runs, the location might have changed again\n    const latestLocation = locationService.getLocation();\n    const locationToHandle = latestLocation !== location ? latestLocation : location;\n\n    if (latestLocation !== location) {\n      writeSceneLog('useUrlSync', 'latestLocation different from location');\n    }\n\n    urlSyncManager.handleNewLocation(locationToHandle);\n  }, [sceneRoot, urlSyncManager, location]);\n\n  return isInitialized;\n}\n\nexport interface UrlSyncContextProviderProps {\n  scene: SceneObject;\n  children: React.ReactNode;\n}\n"],"names":[],"mappings":";;;;;;AAOO,SAAS,UAAW,CAAA,SAAA,EAAwB,OAA+B,GAAA,EAAa,EAAA;AAC7F,EAAA,MAAM,WAAW,WAAY,EAAA,CAAA;AAC7B,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AACxD,EAAM,MAAA,cAAA,GAAiB,kBAAkB,OAAO,CAAA,CAAA;AAEhD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,cAAA,CAAe,SAAS,SAAS,CAAA,CAAA;AACjC,IAAA,gBAAA,CAAiB,IAAI,CAAA,CAAA;AACrB,IAAO,OAAA,MAAM,cAAe,CAAA,OAAA,CAAQ,SAAS,CAAA,CAAA;AAAA,GAC5C,EAAA,CAAC,SAAW,EAAA,cAAc,CAAC,CAAA,CAAA;AAE9B,EAAA,SAAA,CAAU,MAAM;AAEd,IAAM,MAAA,cAAA,GAAiB,gBAAgB,WAAY,EAAA,CAAA;AACnD,IAAM,MAAA,gBAAA,GAAmB,cAAmB,KAAA,QAAA,GAAW,cAAiB,GAAA,QAAA,CAAA;AAExE,IAAA,IAAI,mBAAmB,QAAU,EAAA;AAC/B,MAAA,aAAA,CAAc,cAAc,wCAAwC,CAAA,CAAA;AAAA,KACtE;AAEA,IAAA,cAAA,CAAe,kBAAkB,gBAAgB,CAAA,CAAA;AAAA,GAChD,EAAA,CAAC,SAAW,EAAA,cAAA,EAAgB,QAAQ,CAAC,CAAA,CAAA;AAExC,EAAO,OAAA,aAAA,CAAA;AACT;;;;"}

package/dist/index.d.ts

@@ -262,11 +262,13 @@ declare function isSceneObject(obj: any): obj is SceneObject;
 interface SceneObjectWithUrlSync extends SceneObject {
     getUrlState(): SceneObjectUrlValues;
     updateFromUrl(values: SceneObjectUrlValues): void;
+    shouldCreateHistoryStep?(values: SceneObjectUrlValues): boolean;
 }
 interface SceneObjectUrlSyncHandler {
     getKeys(): string[];
     getUrlState(): SceneObjectUrlValues;
     updateFromUrl(values: SceneObjectUrlValues): void;
+    shouldCreateHistoryStep?(values: SceneObjectUrlValues): boolean;
 }
 interface DataRequestEnricher {
     enrichDataRequest(source: SceneObject): Partial<DataQueryRequest> | null;
@@ -330,6 +332,19 @@ interface SceneDataQuery extends DataQuery {
     [key: string]: any;
     timeRangeCompare?: boolean;
 }
+interface SceneUrlSyncOptions {
+    /**
+     * This will update the url to contain all scene url state
+     * when the scene is initialized. Important for browser history "back" actions.
+     */
+    updateUrlOnInit?: boolean;
+    /**
+     * This is only supported by some objects if they implement
+     * shouldCreateHistoryStep where they can control what changes
+     * url changes should add a new browser history entry.
+     */
+    createBrowserHistorySteps?: boolean;
+}
 
 /**
  *
@@ -959,6 +974,38 @@ declare class SceneQueryController extends SceneObjectBase<SceneQueryStateContro
     cancelAll(): void;
 }
 
+interface UrlSyncManagerLike {
+    initSync(root: SceneObject): void;
+    cleanUp(root: SceneObject): void;
+    handleNewLocation(location: Location): void;
+    handleNewObject(sceneObj: SceneObject): void;
+}
+/**
+ * Notify the url sync manager of a new object that has been added to the scene
+ * that needs to init state from URL.
+ */
+declare class NewSceneObjectAddedEvent extends BusEventWithPayload<SceneObject> {
+    static readonly type = "new-scene-object-added";
+}
+declare class UrlSyncManager implements UrlSyncManagerLike {
+    private _urlKeyMapper;
+    private _sceneRoot?;
+    private _subs;
+    private _lastLocation;
+    private _paramsCache;
+    private _options;
+    constructor(_options?: SceneUrlSyncOptions);
+    /**
+     * Updates the current scene state to match URL state.
+     */
+    initSync(root: SceneObject): void;
+    cleanUp(root: SceneObject): void;
+    handleNewLocation(location: Location): void;
+    handleNewObject(sceneObj: SceneObject): void;
+    private handleSceneObjectStateChanged;
+    getUrlState(root: SceneObject): SceneObjectUrlValues;
+}
+
 /**
  * Get the closest node with variables
  */
@@ -1027,6 +1074,11 @@ declare function getAncestor<ParentType>(sceneObject: SceneObject, ancestorType:
  * Returns the closest query controller undefined if none found
  */
 declare function getQueryController(sceneObject: SceneObject): SceneQueryControllerLike | undefined;
+/**
+ * Returns the closest SceneObject that has a state property with the
+ * name urlSyncManager that is of type UrlSyncManager
+ */
+declare function getUrlSyncManager(sceneObject: SceneObject): UrlSyncManagerLike | undefined;
 
 declare const sceneGraph: {
     getVariables: typeof getVariables;
@@ -1043,6 +1095,7 @@ declare const sceneGraph: {
     findAllObjects: typeof findAllObjects;
     getAncestor: typeof getAncestor;
     getQueryController: typeof getQueryController;
+    getUrlSyncManager: typeof getUrlSyncManager;
 };
 
 interface ActWhenVariableChangedState extends SceneObjectState {
@@ -1213,10 +1266,13 @@ interface SceneObjectUrlSyncConfigOptions {
 declare class SceneObjectUrlSyncConfig implements SceneObjectUrlSyncHandler {
     private _sceneObject;
     private _keys;
+    private _nextChangeShouldAddHistoryStep;
     constructor(_sceneObject: SceneObjectWithUrlSync, _options: SceneObjectUrlSyncConfigOptions);
     getKeys(): string[];
     getUrlState(): SceneObjectUrlValues;
     updateFromUrl(values: SceneObjectUrlValues): void;
+    performBrowserHistoryAction(callback: () => void): void;
+    shouldCreateHistoryStep(values: SceneObjectUrlValues): boolean;
 }
 
 declare class SceneTimeRange extends SceneObjectBase<SceneTimeRangeState> implements SceneTimeRangeLike {
@@ -1597,41 +1653,16 @@ declare class LocalValueVariable extends SceneObjectBase<LocalValueVariableState
     isAncestorLoading(): boolean;
 }
 
-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;
-    private _urlKeyMapper;
-    private _sceneRoot?;
-    private _stateSub;
-    private _lastLocation;
-    private _paramsCache;
-    /**
-     * Updates the current scene state to match URL state.
-     */
-    initSync(root: SceneObject): void;
-    cleanUp(root: SceneObject): void;
-    handleNewLocation(location: Location): void;
-    handleNewObject(sceneObj: SceneObject): void;
-    getUrlState(root: SceneObject): SceneObjectUrlValues;
-}
-declare function getUrlSyncManager(): UrlSyncManagerLike;
-
-declare function useUrlSync(sceneRoot: SceneObject): boolean;
+declare function useUrlSync(sceneRoot: SceneObject, options?: SceneUrlSyncOptions): boolean;
 
-interface UrlSyncContextProviderProps {
+interface UrlSyncContextProviderProps extends SceneUrlSyncOptions {
     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;
+declare function UrlSyncContextProvider({ children, scene, updateUrlOnInit, createBrowserHistorySteps, }: UrlSyncContextProviderProps): React$1.ReactNode;
 
 interface EmbeddedSceneState extends SceneObjectState {
     /**
@@ -2159,6 +2190,7 @@ interface SceneRouteMatch<Params extends {
 interface SceneAppState extends SceneObjectState {
     pages: SceneAppPageLike[];
     name?: string;
+    urlSyncOptions?: SceneUrlSyncOptions;
 }
 interface SceneAppRoute {
     path: string;
@@ -2712,4 +2744,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, FiltersRequestEnricher, FormatVariable, GroupByVariable, InterpolationFormatParameter, IntervalVariable, LocalValueVariable, MacroVariableConstructor, MultiValueVariable, MultiValueVariableState, NestedScene, PanelBuilders, PanelOptionsBuilders, QueryRunnerState, QueryVariable, RuntimeDataSource, SafeSerializableSceneObject, 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, VariableGetOptionsArgs, 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, isFiltersRequestEnricher, isSceneObject, registerQueryWithController, registerRuntimeDataSource, renderSelectForVariable, sceneGraph, sceneUtils, useSceneApp, useSceneObjectState, useUrlSync };
+export { AdHocFiltersVariable, CancelActivationHandler, ConstantVariable, ControlsLayout, CustomFormatterVariable, CustomTransformOperator, CustomTransformerDefinition, CustomVariable, CustomVariableValue, DataLayerFilter, DataRequestEnricher, DataSourceVariable, DeepPartial, EmbeddedScene, EmbeddedSceneState, ExtraQueryDataProcessor, ExtraQueryDescriptor, ExtraQueryProvider, FieldConfigBuilder, FieldConfigBuilders, FieldConfigOverridesBuilder, FiltersRequestEnricher, FormatVariable, GroupByVariable, InterpolationFormatParameter, IntervalVariable, LocalValueVariable, MacroVariableConstructor, MultiValueVariable, MultiValueVariableState, NestedScene, NewSceneObjectAddedEvent, PanelBuilders, PanelOptionsBuilders, QueryRunnerState, QueryVariable, RuntimeDataSource, SafeSerializableSceneObject, 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, SceneDataTransformerState, 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, SceneUrlSyncOptions, SceneVariable, SceneVariableDependencyConfigLike, SceneVariableSet, SceneVariableSetState, SceneVariableState, SceneVariableValueChangedEvent, SceneVariables, SplitLayout, TestVariable, TextBoxVariable, UrlSyncContextProvider, UrlSyncManager, UrlSyncManagerLike, UseStateHookOptions, UserActionEvent, ValidateAndUpdateResult, VariableCustomFormatterFn, VariableDependencyConfig, VariableGetOptionsArgs, VariableValue, VariableValueControl, VariableValueOption, VariableValueSelectWrapper, VariableValueSelectors, VariableValueSingle, VizConfig, VizConfigBuilder, VizConfigBuilders, VizPanel, VizPanelBuilder, VizPanelMenu, VizPanelState, index$1 as behaviors, index as dataLayers, formatRegistry, isCustomVariableValue, isDataLayer, isDataRequestEnricher, isFiltersRequestEnricher, isSceneObject, registerQueryWithController, registerRuntimeDataSource, renderSelectForVariable, sceneGraph, sceneUtils, useSceneApp, useSceneObjectState, useUrlSync };