@grafana/scenes 5.13.0--canary.887.10699625611.0 → 5.13.0

package/dist/index.js

@@ -241,7 +241,6 @@ class SceneObjectBase {
     this._deactivationHandlers = /* @__PURE__ */ new Map();
     this._subs = new rxjs.Subscription();
     this._refCount = 0;
-    this._UNSAFE_PARENT_ACTIVATION = false;
     if (!state.key) {
       state.key = uuid.v4();
     }
@@ -398,19 +397,12 @@ class SceneObjectBase {
     }
   }
   activate() {
-    let parentDeactivate;
-    if (this.parent && !this.parent.isActive && this._UNSAFE_PARENT_ACTIVATION) {
-      parentDeactivate = this.parent.activate();
-    }
     if (!this.isActive) {
       this._internalActivate();
     }
     this._refCount++;
     let called = false;
     return () => {
-      if (parentDeactivate) {
-        parentDeactivate();
-      }
       this._refCount--;
       if (called) {
         const msg = `SceneObject cancelation handler returned by activate() called a second time`;
@@ -651,6 +643,7 @@ const emptyPanelData = {
 class SceneObjectUrlSyncConfig {
   constructor(_sceneObject, _options) {
     this._sceneObject = _sceneObject;
+    this._nextChangeShouldAddHistoryStep = false;
     this._keys = _options.keys;
   }
   getKeys() {
@@ -665,6 +658,14 @@ class SceneObjectUrlSyncConfig {
   updateFromUrl(values) {
     this._sceneObject.updateFromUrl(values);
   }
+  performBrowserHistoryAction(callback) {
+    this._nextChangeShouldAddHistoryStep = true;
+    callback();
+    this._nextChangeShouldAddHistoryStep = false;
+  }
+  shouldCreateHistoryStep(values) {
+    return this._nextChangeShouldAddHistoryStep;
+  }
 }
 
 const INTERVAL_STRING_REGEX = /^\d+[yYmMsSwWhHdD]$/;
@@ -768,11 +769,15 @@ class SceneTimeRange extends SceneObjectBase {
         this.state.UNSAFE_nowDelay
       );
       if (update.from !== this.state.from || update.to !== this.state.to) {
-        this.setState(update);
+        this._urlSync.performBrowserHistoryAction(() => {
+          this.setState(update);
+        });
       }
     };
     this.onTimeZoneChange = (timeZone) => {
-      this.setState({ timeZone });
+      this._urlSync.performBrowserHistoryAction(() => {
+        this.setState({ timeZone });
+      });
     };
     this.onRefresh = () => {
       this.setState({
@@ -6009,6 +6014,16 @@ function getQueryController(sceneObject) {
   }
   return void 0;
 }
+function getUrlSyncManager(sceneObject) {
+  let parent = sceneObject;
+  while (parent) {
+    if ("urlSyncManager" in parent.state) {
+      return parent.state.urlSyncManager;
+    }
+    parent = parent.parent;
+  }
+  return void 0;
+}
 
 const sceneGraph = {
   getVariables,
@@ -6024,7 +6039,8 @@ const sceneGraph = {
   findObject,
   findAllObjects,
   getAncestor,
-  getQueryController
+  getQueryController,
+  getUrlSyncManager
 };
 
 class UniqueUrlKeyMapper {
@@ -9026,54 +9042,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 data.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 = runtime.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");
-          runtime.locationService.partial(mappedUpdated, true);
-          this._lastLocation = runtime.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 rxjs.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 = runtime.locationService.getLocation();
     this.handleNewObject(this._sceneRoot);
+    if (this._options.updateUrlOnInit) {
+      const urlState = getUrlState(root);
+      if (isUrlStateDifferent(urlState, this._paramsCache.getParams())) {
+        runtime.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",
@@ -9098,11 +9113,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 = runtime.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");
+      runtime.locationService.partial(mappedUpdated, shouldReplace);
+      this._lastLocation = runtime.locationService.getLocation();
+    }
+  }
   getUrlState(root) {
     return getUrlState(root);
   }
 }
-_onStateChanged = new WeakMap();
 class UrlParamsCache {
   constructor() {
     __privateAdd(this, _cache, void 0);
@@ -9120,18 +9157,28 @@ 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 React.useMemo(
+    () => new UrlSyncManager({
+      updateUrlOnInit: options.updateUrlOnInit,
+      createBrowserHistorySteps: options.createBrowserHistorySteps
+    }),
+    [options.updateUrlOnInit, options.createBrowserHistorySteps]
+  );
 }
 
-function useUrlSync(sceneRoot) {
-  const urlSyncManager = getUrlSyncManager();
+function useUrlSync(sceneRoot, options = {}) {
   const location = reactRouterDom.useLocation();
   const [isInitialized, setIsInitialized] = React.useState(false);
+  const urlSyncManager = useUrlSyncManager(options);
   React.useEffect(() => {
     urlSyncManager.initSync(sceneRoot);
     setIsInitialized(true);
@@ -9148,8 +9195,13 @@ function useUrlSync(sceneRoot) {
   return isInitialized;
 }
 
-function UrlSyncContextProvider({ children, scene }) {
-  const isInitialized = useUrlSync(scene);
+function UrlSyncContextProvider({
+  children,
+  scene,
+  updateUrlOnInit,
+  createBrowserHistorySteps
+}) {
+  const isInitialized = useUrlSync(scene, { updateUrlOnInit, createBrowserHistorySteps });
   if (!isInitialized) {
     return null;
   }
@@ -11440,13 +11492,16 @@ class SceneApp extends SceneObjectBase {
 }
 SceneApp.Component = ({ model }) => {
   const { pages } = model.useState();
-  return /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Switch, null, pages.map((page) => /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
+  return /* @__PURE__ */ React__default["default"].createElement(SceneAppContext.Provider, {
+    value: model
+  }, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Switch, null, pages.map((page) => /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
     key: page.state.url,
     exact: false,
     path: page.state.url,
     render: (props) => renderSceneComponentWithRouteProps(page, props)
-  })));
+  }))));
 };
+const SceneAppContext = React.createContext(null);
 const sceneAppCache = /* @__PURE__ */ new Map();
 function useSceneApp(factory) {
   const cachedApp = sceneAppCache.get(factory);
@@ -11701,6 +11756,7 @@ function SceneAppPageView({ page, routeProps }) {
   const containerState = containerPage.useState();
   const params = useAppQueryParams();
   const scene = page.getScene(routeProps.match);
+  const appContext = React.useContext(SceneAppContext);
   const isInitialized = containerState.initializedScene === scene;
   const { layout } = page.state;
   React.useLayoutEffect(() => {
@@ -11711,7 +11767,7 @@ function SceneAppPageView({ page, routeProps }) {
   React.useEffect(() => {
     return () => containerPage.setState({ initializedScene: void 0 });
   }, [containerPage]);
-  const urlSyncInitialized = useUrlSync(containerPage);
+  const urlSyncInitialized = useUrlSync(containerPage, appContext == null ? void 0 : appContext.state.urlSyncOptions);
   if (!isInitialized && !urlSyncInitialized) {
     return null;
   }
@@ -12740,6 +12796,7 @@ exports.IntervalVariable = IntervalVariable;
 exports.LocalValueVariable = LocalValueVariable;
 exports.MultiValueVariable = MultiValueVariable;
 exports.NestedScene = NestedScene;
+exports.NewSceneObjectAddedEvent = NewSceneObjectAddedEvent;
 exports.PanelBuilders = PanelBuilders;
 exports.PanelOptionsBuilders = PanelOptionsBuilders;
 exports.QueryVariable = QueryVariable;
@@ -12799,7 +12856,6 @@ exports.VizPanelMenu = VizPanelMenu;
 exports.behaviors = index$1;
 exports.dataLayers = index;
 exports.formatRegistry = formatRegistry;
-exports.getUrlSyncManager = getUrlSyncManager;
 exports.isCustomVariableValue = isCustomVariableValue;
 exports.isDataLayer = isDataLayer;
 exports.isDataRequestEnricher = isDataRequestEnricher;