fix: Do not pin span in url for playground trace details slideover (#…

…5200)

app/src/pages/playground/Playground.tsx

@@ -1,5 +1,6 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
+import { useSearchParams } from "react-router-dom";
 import { css } from "@emotion/react";
 
 import {
@@ -40,6 +41,20 @@ const playgroundWrapCSS = css`
 
 export function Playground(props: InitialPlaygroundState) {
   const showStreamToggle = useFeatureFlag("playgroundNonStreaming");
+  const [, setSearchParams] = useSearchParams();
+
+  useEffect(() => {
+    setSearchParams(
+      (searchParams) => {
+        // remove lingering selectedSpanNodeId param so as to not poison the trace details slideover
+        // with stale data from previous pages
+        searchParams.delete("selectedSpanNodeId");
+        return searchParams;
+      },
+      { replace: true }
+    );
+  }, [setSearchParams]);
+
   return (
     <PlaygroundProvider {...props}>
       <div css={playgroundWrapCSS}>

app/src/pages/playground/SpanPlaygroundPage.tsx

@@ -28,7 +28,11 @@ export function SpanPlaygroundPage() {
   return (
     <Flex direction="column" height={"100%"}>
       <SpanPlaygroundBanners span={span} parsingErrors={parsingErrors} />
-      <Playground instances={[playgroundInstance]} />
+      <Playground
+        // remount the playground when the span changes, resetting all local state, closing dialogs, etc.
+        key={span.id}
+        instances={[playgroundInstance]}
+      />
     </Flex>
   );
 }