From 9c6a9706b165376616827c7e39802604ffa31b1f Mon Sep 17 00:00:00 2001
From: Shubhdeep Chhabra <chhabrashubhdeep@gmail.com>
Date: Fri, 8 Nov 2024 11:44:13 +0530
Subject: [PATCH 1/5] Added subtabs in trace detail page

---
 .changeset/sixty-poems-visit.md               |   5 +
 README.md                                     |   3 +-
 .../sentry/components/events/EventDetails.tsx |   2 +-
 .../sentry/components/events/EventList.tsx    |  10 +-
 .../components/performance/QuerySummary.tsx   |   2 +-
 .../sentry/components/traces/TraceDetails.tsx | 109 ------------------
 .../TraceDetails/components/TraceContext.tsx  |  79 +++++++++++++
 .../components/TraceDetailHeader.tsx          |  15 +++
 .../TraceDetails/components/TraceErrors.tsx   |   7 ++
 .../components/TraceTreeview.tsx}             |  44 ++-----
 .../components/traces/TraceDetails/index.tsx  |  71 ++++++++++++
 .../components/traces/spans/SpanDetails.tsx   |   2 +-
 .../components/traces/spans/SpanItem.tsx      |   2 +-
 .../traces/traceDetail/TraceDetailHeader.tsx  |  26 -----
 .../traces/traceInfo/TraceGeneralInfo.tsx     |  37 ------
 .../components/traces/traceInfo/TraceTags.tsx |  37 ------
 .../components/traces/traceInfo/index.tsx     |  34 ------
 .../integrations/sentry/tabs/TracesTab.tsx    |   6 +-
 18 files changed, 203 insertions(+), 288 deletions(-)
 create mode 100644 .changeset/sixty-poems-visit.md
 delete mode 100644 packages/overlay/src/integrations/sentry/components/traces/TraceDetails.tsx
 create mode 100644 packages/overlay/src/integrations/sentry/components/traces/TraceDetails/components/TraceContext.tsx
 create mode 100644 packages/overlay/src/integrations/sentry/components/traces/TraceDetails/components/TraceDetailHeader.tsx
 create mode 100644 packages/overlay/src/integrations/sentry/components/traces/TraceDetails/components/TraceErrors.tsx
 rename packages/overlay/src/integrations/sentry/components/traces/{traceDetail/index.tsx => TraceDetails/components/TraceTreeview.tsx} (57%)
 create mode 100644 packages/overlay/src/integrations/sentry/components/traces/TraceDetails/index.tsx
 delete mode 100644 packages/overlay/src/integrations/sentry/components/traces/traceDetail/TraceDetailHeader.tsx
 delete mode 100644 packages/overlay/src/integrations/sentry/components/traces/traceInfo/TraceGeneralInfo.tsx
 delete mode 100644 packages/overlay/src/integrations/sentry/components/traces/traceInfo/TraceTags.tsx
 delete mode 100644 packages/overlay/src/integrations/sentry/components/traces/traceInfo/index.tsx

diff --git a/.changeset/sixty-poems-visit.md b/.changeset/sixty-poems-visit.md
new file mode 100644
index 00000000..1f4cdc4c
--- /dev/null
+++ b/.changeset/sixty-poems-visit.md
@@ -0,0 +1,5 @@
+---
+'@spotlightjs/overlay': minor
+---
+
+- Added subtabs in trace detail page
diff --git a/README.md b/README.md
index e548b2c4..19fc22ac 100644
--- a/README.md
+++ b/README.md
@@ -5,10 +5,10 @@
 </p>
 
 # What's Spotlight? [![npm version](https://img.shields.io/npm/v/@spotlightjs/spotlight.svg)](https://www.npmjs.com/package/@spotlightjs/spotlight)
+
 Spotlight is Sentry for Development. Inspired by an old project, Django Debug Toolbar, Spotlight brings a rich debug
 overlay into development environments, and it does it by leveraging the existing power of Sentry's SDKs.
 
-
 ## Links
 
 - [![Documentation](https://img.shields.io/badge/documentation-spotlight-indigo.svg)](https://spotlightjs.com/about/)
@@ -22,4 +22,3 @@ overlay into development environments, and it does it by leveraging the existing
 - [Setup Spotlight](https://spotlightjs.com/setup/)
 - [Sidecar](https://spotlightjs.com/sidecar/)
 - [Integrations](https://spotlightjs.com/integrations/)
- 
diff --git a/packages/overlay/src/integrations/sentry/components/events/EventDetails.tsx b/packages/overlay/src/integrations/sentry/components/events/EventDetails.tsx
index ee563720..83002b1f 100644
--- a/packages/overlay/src/integrations/sentry/components/events/EventDetails.tsx
+++ b/packages/overlay/src/integrations/sentry/components/events/EventDetails.tsx
@@ -67,7 +67,7 @@ export default function EventDetails() {
             </div>
             <div>
               S:{' '}
-              <Link className="cursor-pointer underline" to={`/traces/${traceCtx.trace_id}/${traceCtx.span_id}`}>
+              <Link className="cursor-pointer underline" to={`/traces/${traceCtx.trace_id}/spans/${traceCtx.span_id}`}>
                 {traceCtx.span_id}
               </Link>
             </div>
diff --git a/packages/overlay/src/integrations/sentry/components/events/EventList.tsx b/packages/overlay/src/integrations/sentry/components/events/EventList.tsx
index f27c67fc..2be49fb6 100644
--- a/packages/overlay/src/integrations/sentry/components/events/EventList.tsx
+++ b/packages/overlay/src/integrations/sentry/components/events/EventList.tsx
@@ -4,6 +4,7 @@ import { useSpotlightContext } from '~/lib/useSpotlightContext';
 import Badge from '~/ui/Badge';
 import CardList from '../../../../components/CardList';
 import TimeSince from '../../../../components/TimeSince';
+import sentryDataCache from '../../data/sentryDataCache';
 import { useSentryEvents } from '../../data/useSentryEvents';
 import { useSentryHelpers } from '../../data/useSentryHelpers';
 import type { SentryEvent } from '../../types';
@@ -15,11 +16,14 @@ function renderEvent(event: SentryEvent) {
   return <EventSummary event={event} />;
 }
 
-export default function EventList() {
-  const events = useSentryEvents();
+export default function EventList({ traceId }: { traceId?: string }) {
+  let events = useSentryEvents();
   const helpers = useSentryHelpers();
   const context = useSpotlightContext();
 
+  if (traceId) {
+    events = sentryDataCache.getEventsByTrace(traceId);
+  }
   const matchingEvents = events.filter(e => e.type !== 'transaction');
 
   const [showAll, setShowAll] = useState(!context.experiments['sentry:focus-local-events']);
@@ -46,7 +50,7 @@ export default function EventList() {
           <Link
             className="hover:bg-primary-900 flex cursor-pointer items-center gap-x-4 px-6 py-2"
             key={e.event_id}
-            to={`${e.event_id}/details`}
+            to={`/errors/${e.event_id}/details`}
           >
             <PlatformIcon event={e} className="text-primary-300 rounded-md" />
             <div className="text-primary-300 flex w-48 flex-col truncate font-mono text-sm">
diff --git a/packages/overlay/src/integrations/sentry/components/performance/QuerySummary.tsx b/packages/overlay/src/integrations/sentry/components/performance/QuerySummary.tsx
index 1037c573..8434075b 100644
--- a/packages/overlay/src/integrations/sentry/components/performance/QuerySummary.tsx
+++ b/packages/overlay/src/integrations/sentry/components/performance/QuerySummary.tsx
@@ -128,7 +128,7 @@ const QuerySummary = ({ showAll }: { showAll: boolean }) => {
                 </Link>
               </td>
               <td className="text-primary-200 w-[15%] whitespace-nowrap px-6 py-4 text-right text-sm font-medium">
-                <Link className="truncate hover:underline" to={`/traces/${span.trace_id}/${span.span_id}`}>
+                <Link className="truncate hover:underline" to={`/traces/${span.trace_id}/spans/${span.span_id}`}>
                   {span.span_id}
                 </Link>
               </td>
diff --git a/packages/overlay/src/integrations/sentry/components/traces/TraceDetails.tsx b/packages/overlay/src/integrations/sentry/components/traces/TraceDetails.tsx
deleted file mode 100644
index 3454b016..00000000
--- a/packages/overlay/src/integrations/sentry/components/traces/TraceDetails.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-import { FormEvent, useState } from 'react';
-import { Link, useLocation, useParams } from 'react-router-dom';
-import { ReactComponent as CrossIcon } from '../../../../assets/cross.svg';
-import dataCache from '../../data/sentryDataCache';
-import useDebounce from '../../hooks/useDebounce';
-import { getDuration } from '../../utils/duration';
-import DateTime from '../DateTime';
-import SpanDetails from './spans/SpanDetails';
-import SpanTree from './spans/SpanTree';
-import TraceDetailHeader from './traceDetail/TraceDetailHeader';
-import TraceInfo from './traceInfo';
-
-export default function TraceDetails() {
-  const { traceId, spanId } = useParams();
-  const { pathname } = useLocation();
-
-  const [spanNodeWidth, setSpanNodeWidth] = useState<number>(50);
-  const [query, _setQuery] = useState<string>('');
-  const setQuery = useDebounce(_setQuery, 200);
-
-  if (!traceId) {
-    return <p className="text-primary-300 p-6">Unknown trace id</p>;
-  }
-
-  const trace = dataCache.getTraceById(traceId);
-
-  if (!trace) {
-    return (
-      <p className="text-primary-300 p-6">
-        Trace not found. Check for more{' '}
-        <Link to="/traces" className="underline">
-          traces
-        </Link>
-      </p>
-    );
-  }
-  const span = spanId ? dataCache.getSpanById(trace.trace_id, spanId) : undefined;
-  const isTraceInfo = pathname === `/traces/${traceId}/info`;
-  const startTimestamp = trace.start_timestamp;
-  const totalDuration = trace.timestamp - startTimestamp;
-
-  function handleSearch(e: FormEvent<HTMLInputElement>) {
-    setQuery(e.currentTarget.value);
-  }
-
-  function handleResetSearch() {
-    setQuery('');
-  }
-
-  return (
-    <>
-      <TraceDetailHeader trace={trace} />
-      <div className="px-6 py-4">
-        <div className="text-primary-300 flex flex-1 items-center gap-x-1">
-          <div className="text-primary-200">
-            <DateTime date={trace.start_timestamp} />
-          </div>
-          <span>&mdash;</span>
-          <span>
-            <strong className="text-primary-200 font-bold">
-              {getDuration(trace.start_timestamp, trace.timestamp).toLocaleString()} ms
-            </strong>{' '}
-            recorded in{' '}
-            <strong className="text-primary-200 font-bold">{trace.spans.length.toLocaleString()} spans</strong>
-          </span>
-        </div>
-      </div>
-      <div className="bg-primary-950 text-primary-50 border-primary-600 hover:border-primary-500 relative mx-6 mb-4 mt-2 flex h-auto w-auto gap-2 rounded-md border py-1 pl-4 pr-6 outline-none transition-all">
-        <input
-          type="text"
-          className="text-primary-50 h-auto w-full flex-1 bg-transparent outline-none transition-all"
-          onChange={handleSearch}
-          placeholder="Search in Trace"
-        />
-        {query ? (
-          <CrossIcon
-            onClick={handleResetSearch}
-            className="fill-primary-50 absolute right-1 top-[5px] cursor-pointer"
-            height={20}
-            width={20}
-          />
-        ) : null}
-      </div>
-      <div className="flex-1 px-2 pb-6">
-        <SpanTree
-          traceContext={trace}
-          tree={trace.spanTree}
-          startTimestamp={startTimestamp}
-          totalDuration={totalDuration}
-          totalTransactions={(trace.transactions || []).length}
-          spanNodeWidth={spanNodeWidth}
-          setSpanNodeWidth={setSpanNodeWidth}
-          query={query}
-        />
-      </div>
-      {span ? (
-        <SpanDetails
-          traceContext={trace}
-          startTimestamp={startTimestamp}
-          totalDuration={totalDuration}
-          span={span}
-          totalTransactions={(trace.transactions || []).length}
-        />
-      ) : null}
-
-      {isTraceInfo && <TraceInfo traceContext={trace} />}
-    </>
-  );
-}
diff --git a/packages/overlay/src/integrations/sentry/components/traces/TraceDetails/components/TraceContext.tsx b/packages/overlay/src/integrations/sentry/components/traces/TraceDetails/components/TraceContext.tsx
new file mode 100644
index 00000000..493c8d20
--- /dev/null
+++ b/packages/overlay/src/integrations/sentry/components/traces/TraceDetails/components/TraceContext.tsx
@@ -0,0 +1,79 @@
+import sentryDataCache from '~/integrations/sentry/data/sentryDataCache';
+import { Tags as TagsType, Trace } from '~/integrations/sentry/types';
+import { getDuration } from '~/integrations/sentry/utils/duration';
+import DateTime from '../../../DateTime';
+import Tags from '../../../Tags';
+
+type TraceGeneralInfoProps = {
+  trace: Trace;
+};
+
+function TraceGeneralInfo({ trace }: TraceGeneralInfoProps) {
+  const traceId = trace.trace_id;
+  return (
+    <div>
+      <h2 className="mb-2 font-bold uppercase">General</h2>
+      <table className="w-full text-sm">
+        <tbody>
+          {[
+            ['Trace Id', traceId || '-'],
+            ['Spans', trace.spans.length || '-'],
+            ['Transactions', trace.transactions.length || '-'],
+            ['Errors', trace.errors || '-'],
+            [
+              'Start Timestamp',
+              trace.start_timestamp ? <DateTime key="Start Timestamp" date={trace.start_timestamp} /> : '-',
+            ],
+            ['Total Duration', `${getDuration(trace.start_timestamp, trace.timestamp).toLocaleString()} ms`],
+          ].map(([key, value]) => (
+            <tr key={key as string} className="text-primary-300">
+              <th className=" w-1/12 py-0.5 pr-4 text-left font-mono font-normal">
+                <div className="w-full truncate">{key}</div>
+              </th>
+              <td className="py-0.5">
+                <pre className="whitespace-nowrap font-mono">{value}</pre>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+type TraceTagsProps = {
+  trace: Trace;
+};
+
+function TraceTags({ trace }: TraceTagsProps) {
+  const tags: TagsType | undefined = trace.transactions
+    .map(tsx => tsx.tags)
+    .reduce((prev, current) => {
+      return Object.assign(prev!, current);
+    }, {});
+
+  if (!tags) {
+    return null;
+  }
+  return (
+    <div>
+      <h2 className="mb-2 font-bold uppercase">Tags</h2>
+      <Tags tags={tags} />
+    </div>
+  );
+}
+
+type TraceContextProps = {
+  traceId: string;
+};
+
+export default function TraceContext({ traceId }: TraceContextProps) {
+  const trace = sentryDataCache.getTraceById(traceId);
+
+  return (
+    <div className="space-y-4 px-6 py-4">
+      <TraceGeneralInfo trace={trace} />
+      <TraceTags trace={trace} />
+    </div>
+  );
+}
diff --git a/packages/overlay/src/integrations/sentry/components/traces/TraceDetails/components/TraceDetailHeader.tsx b/packages/overlay/src/integrations/sentry/components/traces/TraceDetails/components/TraceDetailHeader.tsx
new file mode 100644
index 00000000..7c314594
--- /dev/null
+++ b/packages/overlay/src/integrations/sentry/components/traces/TraceDetails/components/TraceDetailHeader.tsx
@@ -0,0 +1,15 @@
+import { Trace } from '~/integrations/sentry/types';
+import TraceIcon from '../../TraceIcon';
+
+type TraceDetailHeaderProps = {
+  trace: Trace;
+};
+
+export default function TraceDetailHeader({ trace }: TraceDetailHeaderProps) {
+  return (
+    <div className="border-b-primary-700 bg-primary-950 flex items-center gap-x-2 border-b px-6 py-4">
+      <TraceIcon trace={trace} />
+      <h1 className="max-w-full flex-1 truncate text-2xl">{trace.rootTransactionName}</h1>
+    </div>
+  );
+}
diff --git a/packages/overlay/src/integrations/sentry/components/traces/TraceDetails/components/TraceErrors.tsx b/packages/overlay/src/integrations/sentry/components/traces/TraceDetails/components/TraceErrors.tsx
new file mode 100644
index 00000000..7581d086
--- /dev/null
+++ b/packages/overlay/src/integrations/sentry/components/traces/TraceDetails/components/TraceErrors.tsx
@@ -0,0 +1,7 @@
+import EventList from '../../../events/EventList';
+
+type TraceErrorsProps = { traceId: string };
+
+export default function TraceErrors({ traceId }: TraceErrorsProps) {
+  return <EventList traceId={traceId} />;
+}
diff --git a/packages/overlay/src/integrations/sentry/components/traces/traceDetail/index.tsx b/packages/overlay/src/integrations/sentry/components/traces/TraceDetails/components/TraceTreeview.tsx
similarity index 57%
rename from packages/overlay/src/integrations/sentry/components/traces/traceDetail/index.tsx
rename to packages/overlay/src/integrations/sentry/components/traces/TraceDetails/components/TraceTreeview.tsx
index 4020bea4..7629007d 100644
--- a/packages/overlay/src/integrations/sentry/components/traces/traceDetail/index.tsx
+++ b/packages/overlay/src/integrations/sentry/components/traces/TraceDetails/components/TraceTreeview.tsx
@@ -1,43 +1,25 @@
 import { useState } from 'react';
-import { Link, useLocation, useParams } from 'react-router-dom';
-import dataCache from '../../../data/sentryDataCache';
-import { getDuration } from '../../../utils/duration';
-import DateTime from '../../DateTime';
-import SpanDetails from '../spans/SpanDetails';
-import SpanTree from '../spans/SpanTree';
-import TraceInfo from '../traceInfo';
-import TraceDetailHeader from './TraceDetailHeader';
+import { useParams } from 'react-router-dom';
+import sentryDataCache from '~/integrations/sentry/data/sentryDataCache';
+import { getDuration } from '~/integrations/sentry/utils/duration';
+import DateTime from '../../../DateTime';
+import SpanDetails from '../../spans/SpanDetails';
+import SpanTree from '../../spans/SpanTree';
 
-export default function TraceDetails() {
-  const { traceId, spanId } = useParams();
-  const { pathname } = useLocation();
+type TraceTreeViewProps = { traceId: string };
 
-  const [spanNodeWidth, setSpanNodeWidth] = useState<number>(50);
-
-  if (!traceId) {
-    return <p className="text-primary-300 p-6">Unknown trace id</p>;
-  }
+export default function TraceTreeview({ traceId }: TraceTreeViewProps) {
+  const { spanId } = useParams();
 
-  const trace = dataCache.getTraceById(traceId);
+  const [spanNodeWidth, setSpanNodeWidth] = useState<number>(50);
 
-  if (!trace) {
-    return (
-      <p className="text-primary-300 p-6">
-        Trace not found. Check for more{' '}
-        <Link to="/traces" className="underline">
-          traces
-        </Link>
-      </p>
-    );
-  }
-  const span = spanId ? dataCache.getSpanById(trace.trace_id, spanId) : undefined;
-  const isTraceInfo = pathname === `/traces/${traceId}/info`;
+  const trace = sentryDataCache.getTraceById(traceId);
+  const span = spanId ? sentryDataCache.getSpanById(traceId, spanId) : undefined;
   const startTimestamp = trace.start_timestamp;
   const totalDuration = trace.timestamp - startTimestamp;
 
   return (
     <>
-      <TraceDetailHeader trace={trace} />
       <div className="px-6 py-4">
         <div className="text-primary-300 flex flex-1 items-center gap-x-1">
           <div className="text-primary-200">
@@ -73,8 +55,6 @@ export default function TraceDetails() {
           totalTransactions={(trace.transactions || []).length}
         />
       ) : null}
-
-      {isTraceInfo && <TraceInfo traceContext={trace} />}
     </>
   );
 }
diff --git a/packages/overlay/src/integrations/sentry/components/traces/TraceDetails/index.tsx b/packages/overlay/src/integrations/sentry/components/traces/TraceDetails/index.tsx
new file mode 100644
index 00000000..a68f347d
--- /dev/null
+++ b/packages/overlay/src/integrations/sentry/components/traces/TraceDetails/index.tsx
@@ -0,0 +1,71 @@
+import { Link, Navigate, Route, Routes, useParams } from 'react-router-dom';
+import Tabs from '~/components/Tabs';
+import { default as dataCache, default as sentryDataCache } from '../../../data/sentryDataCache';
+import TraceContext from './components/TraceContext';
+import TraceDetailHeader from './components/TraceDetailHeader';
+import TraceErrors from './components/TraceErrors';
+import TraceTreeview from './components/TraceTreeview';
+
+export default function TraceDetails() {
+  const { traceId } = useParams();
+
+  if (!traceId) {
+    return <p className="text-primary-300 p-6">Unknown trace id</p>;
+  }
+
+  const trace = dataCache.getTraceById(traceId);
+
+  if (!trace) {
+    return (
+      <p className="text-primary-300 p-6">
+        Trace not found. Check for more{' '}
+        <Link to="/traces" className="underline">
+          traces
+        </Link>
+      </p>
+    );
+  }
+
+  const errorCount = sentryDataCache
+    .getEventsByTrace(traceId)
+    .filter(
+      e =>
+        e.type != 'transaction' &&
+        (e.contexts?.trace?.trace_id ? sentryDataCache.isTraceLocal(e.contexts?.trace?.trace_id) : null) !== false,
+    ).length;
+
+  const tabs = [
+    {
+      id: 'details',
+      title: 'Details',
+    },
+    {
+      id: 'context',
+      title: 'Context',
+    },
+    {
+      id: 'errors',
+      title: 'Errors',
+      notificationCount: {
+        count: errorCount,
+        severe: errorCount > 0,
+      },
+    },
+  ];
+
+  return (
+    <>
+      <TraceDetailHeader trace={trace} />
+      <Tabs tabs={tabs} nested />
+
+      <Routes>
+        <Route path="details" element={<TraceTreeview traceId={traceId} />} />
+        <Route path="spans/:spanId" element={<TraceTreeview traceId={traceId} />} />
+        <Route path="context" element={<TraceContext traceId={traceId} />} />
+        <Route path="errors" element={<TraceErrors traceId={traceId} />} />
+        {/* Default tab */}
+        <Route path="*" element={<Navigate to={`/traces/${traceId}/details`} replace />} />
+      </Routes>
+    </>
+  );
+}
diff --git a/packages/overlay/src/integrations/sentry/components/traces/spans/SpanDetails.tsx b/packages/overlay/src/integrations/sentry/components/traces/spans/SpanDetails.tsx
index a60ef4ad..d03697fa 100644
--- a/packages/overlay/src/integrations/sentry/components/traces/spans/SpanDetails.tsx
+++ b/packages/overlay/src/integrations/sentry/components/traces/spans/SpanDetails.tsx
@@ -159,7 +159,7 @@ export default function SpanDetails({
                   span.parent_span_id ? (
                     <Link
                       className="underline"
-                      to={`/traces/${span.trace_id}/${span.parent_span_id}`}
+                      to={`/traces/${span.trace_id}/spans/${span.parent_span_id}`}
                       key={`link-to-${span.parent_span_id}`}
                     >
                       {span.parent_span_id}
diff --git a/packages/overlay/src/integrations/sentry/components/traces/spans/SpanItem.tsx b/packages/overlay/src/integrations/sentry/components/traces/spans/SpanItem.tsx
index 8c03d8a8..43838b83 100644
--- a/packages/overlay/src/integrations/sentry/components/traces/spans/SpanItem.tsx
+++ b/packages/overlay/src/integrations/sentry/components/traces/spans/SpanItem.tsx
@@ -61,7 +61,7 @@ const SpanItem = ({
         style={{
           pointerEvents: isResizing ? 'none' : 'auto',
         }}
-        to={`/traces/${span.trace_id}/${span.span_id}`}
+        to={`/traces/${span.trace_id}/spans/${span.span_id}`}
       >
         <div
           className={classNames(
diff --git a/packages/overlay/src/integrations/sentry/components/traces/traceDetail/TraceDetailHeader.tsx b/packages/overlay/src/integrations/sentry/components/traces/traceDetail/TraceDetailHeader.tsx
deleted file mode 100644
index 11a8f7d2..00000000
--- a/packages/overlay/src/integrations/sentry/components/traces/traceDetail/TraceDetailHeader.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Link } from 'react-router-dom';
-import { Trace } from '~/integrations/sentry/types';
-import TraceIcon from '../TraceIcon';
-
-export default function TraceDetailHeader({ trace }: { trace: Trace }) {
-  return (
-    <div className="border-b-primary-700 bg-primary-950 flex items-center gap-x-2 border-b px-6 py-4">
-      <TraceIcon trace={trace} />
-      <h1 className="max-w-full flex-1 truncate text-2xl">{trace.rootTransactionName}</h1>
-      <div className="text-primary-300 font-mono">
-        <div>
-          T:{' '}
-          <Link className="underline" to={`/traces/${trace.trace_id}/info`}>
-            {trace.trace_id}
-          </Link>
-        </div>
-        <div>
-          S:{' '}
-          <Link to={`/traces/${trace.trace_id}/${trace.span_id}`} className="underline">
-            {trace.span_id}
-          </Link>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/packages/overlay/src/integrations/sentry/components/traces/traceInfo/TraceGeneralInfo.tsx b/packages/overlay/src/integrations/sentry/components/traces/traceInfo/TraceGeneralInfo.tsx
deleted file mode 100644
index 18cd2c73..00000000
--- a/packages/overlay/src/integrations/sentry/components/traces/traceInfo/TraceGeneralInfo.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import type { Trace } from '~/integrations/sentry/types';
-import { getDuration } from '~/integrations/sentry/utils/duration';
-import DateTime from '../../DateTime';
-
-type TraceGeneralInfoProps = {
-  trace: Trace;
-};
-
-export default function TraceGeneralInfo({ trace }: TraceGeneralInfoProps) {
-  const traceId = trace.trace_id;
-  return (
-    <div>
-      <h2 className="mb-2 font-bold uppercase">General</h2>
-      <table className="w-full text-sm">
-        <tbody>
-          {[
-            ['Trace Id', traceId || '-'],
-            ['Spans', trace.spans.length || '-'],
-            ['Transactions', trace.transactions.length || '-'],
-            ['Errors', trace.errors || '-'],
-            ['Start Timestamp', trace.start_timestamp ? <DateTime key="Start Timestamp" date={trace.start_timestamp} /> : '-'],
-            ['Total Duration', `${getDuration(trace.start_timestamp, trace.timestamp).toLocaleString()} ms`],
-          ].map(([key, value]) => (
-            <tr key={key as string} className="text-primary-300">
-              <th className=" w-1/12 py-0.5 pr-4 text-left font-mono font-normal">
-                <div className="w-full truncate">{key}</div>
-              </th>
-              <td className="py-0.5">
-                <pre className="whitespace-nowrap font-mono">{value}</pre>
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </div>
-  );
-}
diff --git a/packages/overlay/src/integrations/sentry/components/traces/traceInfo/TraceTags.tsx b/packages/overlay/src/integrations/sentry/components/traces/traceInfo/TraceTags.tsx
deleted file mode 100644
index d7571dfb..00000000
--- a/packages/overlay/src/integrations/sentry/components/traces/traceInfo/TraceTags.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import type { Trace } from '~/integrations/sentry/types';
-
-type TraceTagsProps = {
-  trace: Trace;
-};
-
-export default function TraceTags({ trace }: TraceTagsProps) {
-  const tags = trace.transactions
-    .map(tsx => tsx.tags)
-    .reduce((prev, current) => {
-      return Object.assign(prev!, current);
-    }, {});
-
-  return (
-    <div>
-      <h2 className="mb-2 font-bold uppercase">Tags</h2>
-      {tags && Object.keys(tags).length ? (
-        <table className="w-full text-sm">
-          <tbody>
-            {Object.entries(tags).map(([key, value]) => (
-              <tr key={key} className="text-primary-300">
-                <th className=" w-1/12 py-0.5 pr-4 text-left font-mono font-normal">
-                  <div className="w-full truncate">{key}</div>
-                </th>
-                <td className="py-0.5">
-                  <pre className="whitespace-nowrap font-mono">{JSON.stringify(value, undefined, 2)}</pre>
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      ) : (
-        <div className="text-primary-300">No tags recorded for this Trace.</div>
-      )}
-    </div>
-  );
-}
diff --git a/packages/overlay/src/integrations/sentry/components/traces/traceInfo/index.tsx b/packages/overlay/src/integrations/sentry/components/traces/traceInfo/index.tsx
deleted file mode 100644
index b85dd445..00000000
--- a/packages/overlay/src/integrations/sentry/components/traces/traceInfo/index.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import SidePanel, { SidePanelHeader } from '~/ui/SidePanel';
-import dataCache from '../../../data/sentryDataCache';
-import type { TraceContext } from '../../../types';
-import TraceGeneralInfo from './TraceGeneralInfo';
-import TraceTags from './TraceTags';
-
-type TraceInfoProps = {
-  traceContext: TraceContext;
-};
-
-export default function TraceInfo({ traceContext }: TraceInfoProps) {
-  const traceId = traceContext.trace_id;
-  const trace = dataCache.getTraceById(traceId);
-
-  return (
-    <SidePanel backto={`/traces/${traceId}`}>
-      <SidePanelHeader
-        title="Trace Details"
-        subtitle={
-          <>
-            Trace Id <span className="text-primary-500">&mdash;</span> {traceId}
-          </>
-        }
-        backto={`/traces/${traceId}`}
-      />
-
-      <div className="space-y-6">
-        <TraceGeneralInfo trace={trace} />
-
-        <TraceTags trace={trace} />
-      </div>
-    </SidePanel>
-  );
-}
diff --git a/packages/overlay/src/integrations/sentry/tabs/TracesTab.tsx b/packages/overlay/src/integrations/sentry/tabs/TracesTab.tsx
index 4047ec27..6d96f9da 100644
--- a/packages/overlay/src/integrations/sentry/tabs/TracesTab.tsx
+++ b/packages/overlay/src/integrations/sentry/tabs/TracesTab.tsx
@@ -1,15 +1,13 @@
 import { Route, Routes } from 'react-router-dom';
+import TraceDetails from '../components/traces/TraceDetails';
 import TraceList from '../components/traces/TraceList';
-import TraceDetails from '../components/traces/traceDetail';
 import { SentryEventsContextProvider } from '../data/sentryEventsContext';
 
 export default function TracesTab() {
   return (
     <SentryEventsContextProvider>
       <Routes>
-        <Route path="/:traceId/:spanId" element={<TraceDetails />} />
-        <Route path="/:traceId/info" element={<TraceDetails />} />
-        <Route path="/:traceId" element={<TraceDetails />} />
+        <Route path="/:traceId/*" element={<TraceDetails />} />
         <Route path="/" element={<TraceList />} />
       </Routes>
     </SentryEventsContextProvider>

From 93f31c47a57478372e4558c7ab57ec31d663c672 Mon Sep 17 00:00:00 2001
From: Burak Yigit Kaya <byk@sentry.io>
Date: Fri, 8 Nov 2024 15:54:53 +0000
Subject: [PATCH 2/5] small refactor regarding traceId filtering

---
 .../src/integrations/sentry/components/events/EventList.tsx | 6 +-----
 .../src/integrations/sentry/data/useSentryEvents.tsx        | 4 ++--
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/packages/overlay/src/integrations/sentry/components/events/EventList.tsx b/packages/overlay/src/integrations/sentry/components/events/EventList.tsx
index 2be49fb6..cd47ddfe 100644
--- a/packages/overlay/src/integrations/sentry/components/events/EventList.tsx
+++ b/packages/overlay/src/integrations/sentry/components/events/EventList.tsx
@@ -4,7 +4,6 @@ import { useSpotlightContext } from '~/lib/useSpotlightContext';
 import Badge from '~/ui/Badge';
 import CardList from '../../../../components/CardList';
 import TimeSince from '../../../../components/TimeSince';
-import sentryDataCache from '../../data/sentryDataCache';
 import { useSentryEvents } from '../../data/useSentryEvents';
 import { useSentryHelpers } from '../../data/useSentryHelpers';
 import type { SentryEvent } from '../../types';
@@ -17,13 +16,10 @@ function renderEvent(event: SentryEvent) {
 }
 
 export default function EventList({ traceId }: { traceId?: string }) {
-  let events = useSentryEvents();
+  const events = useSentryEvents(traceId);
   const helpers = useSentryHelpers();
   const context = useSpotlightContext();
 
-  if (traceId) {
-    events = sentryDataCache.getEventsByTrace(traceId);
-  }
   const matchingEvents = events.filter(e => e.type !== 'transaction');
 
   const [showAll, setShowAll] = useState(!context.experiments['sentry:focus-local-events']);
diff --git a/packages/overlay/src/integrations/sentry/data/useSentryEvents.tsx b/packages/overlay/src/integrations/sentry/data/useSentryEvents.tsx
index a5a890cd..871e1e91 100644
--- a/packages/overlay/src/integrations/sentry/data/useSentryEvents.tsx
+++ b/packages/overlay/src/integrations/sentry/data/useSentryEvents.tsx
@@ -2,7 +2,7 @@ import { useContext } from 'react';
 import sentryDataCache from './sentryDataCache';
 import { SentryEventsContext } from './sentryEventsContext';
 
-export const useSentryEvents = () => {
+export const useSentryEvents = (traceId?: string) => {
   useContext(SentryEventsContext);
-  return sentryDataCache.getEvents();
+  return traceId ? sentryDataCache.getEventsByTrace(traceId) : sentryDataCache.getEvents();
 };

From 875f26c1a0b72bce457749a1412d3c2639c14e6b Mon Sep 17 00:00:00 2001
From: Burak Yigit Kaya <byk@sentry.io>
Date: Fri, 8 Nov 2024 16:02:33 +0000
Subject: [PATCH 3/5] tags refactor

---
 .../TraceDetails/components/TraceContext.tsx  | 23 ++++++++-----------
 1 file changed, 10 insertions(+), 13 deletions(-)

diff --git a/packages/overlay/src/integrations/sentry/components/traces/TraceDetails/components/TraceContext.tsx b/packages/overlay/src/integrations/sentry/components/traces/TraceDetails/components/TraceContext.tsx
index 493c8d20..621a0723 100644
--- a/packages/overlay/src/integrations/sentry/components/traces/TraceDetails/components/TraceContext.tsx
+++ b/packages/overlay/src/integrations/sentry/components/traces/TraceDetails/components/TraceContext.tsx
@@ -1,5 +1,5 @@
 import sentryDataCache from '~/integrations/sentry/data/sentryDataCache';
-import { Tags as TagsType, Trace } from '~/integrations/sentry/types';
+import type { Tags as TagsType, Trace } from '~/integrations/sentry/types';
 import { getDuration } from '~/integrations/sentry/utils/duration';
 import DateTime from '../../../DateTime';
 import Tags from '../../../Tags';
@@ -46,20 +46,17 @@ type TraceTagsProps = {
 };
 
 function TraceTags({ trace }: TraceTagsProps) {
-  const tags: TagsType | undefined = trace.transactions
-    .map(tsx => tsx.tags)
-    .reduce((prev, current) => {
-      return Object.assign(prev!, current);
-    }, {});
+  const tags: TagsType = trace.transactions
+    .map(tsx => tsx.tags || {})
+    .reduce((prev, current) => Object.assign(prev, current), {} as TagsType);
 
-  if (!tags) {
-    return null;
-  }
   return (
-    <div>
-      <h2 className="mb-2 font-bold uppercase">Tags</h2>
-      <Tags tags={tags} />
-    </div>
+    Object.keys(tags).length > 0 && (
+      <div>
+        <h2 className="mb-2 font-bold uppercase">Tags</h2>
+        <Tags tags={tags} />
+      </div>
+    )
   );
 }
 

From 902128278cae64683f097244a96ea0b1de39ef2b Mon Sep 17 00:00:00 2001
From: Burak Yigit Kaya <byk@sentry.io>
Date: Fri, 8 Nov 2024 16:04:52 +0000
Subject: [PATCH 4/5] remove unnecessary abstraction

---
 .../traces/TraceDetails/components/TraceDetailHeader.tsx   | 2 +-
 .../traces/TraceDetails/components/TraceErrors.tsx         | 7 -------
 .../sentry/components/traces/TraceDetails/index.tsx        | 4 ++--
 3 files changed, 3 insertions(+), 10 deletions(-)
 delete mode 100644 packages/overlay/src/integrations/sentry/components/traces/TraceDetails/components/TraceErrors.tsx

diff --git a/packages/overlay/src/integrations/sentry/components/traces/TraceDetails/components/TraceDetailHeader.tsx b/packages/overlay/src/integrations/sentry/components/traces/TraceDetails/components/TraceDetailHeader.tsx
index 7c314594..b1bc3de8 100644
--- a/packages/overlay/src/integrations/sentry/components/traces/TraceDetails/components/TraceDetailHeader.tsx
+++ b/packages/overlay/src/integrations/sentry/components/traces/TraceDetails/components/TraceDetailHeader.tsx
@@ -1,4 +1,4 @@
-import { Trace } from '~/integrations/sentry/types';
+import type { Trace } from '../../../../types';
 import TraceIcon from '../../TraceIcon';
 
 type TraceDetailHeaderProps = {
diff --git a/packages/overlay/src/integrations/sentry/components/traces/TraceDetails/components/TraceErrors.tsx b/packages/overlay/src/integrations/sentry/components/traces/TraceDetails/components/TraceErrors.tsx
deleted file mode 100644
index 7581d086..00000000
--- a/packages/overlay/src/integrations/sentry/components/traces/TraceDetails/components/TraceErrors.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import EventList from '../../../events/EventList';
-
-type TraceErrorsProps = { traceId: string };
-
-export default function TraceErrors({ traceId }: TraceErrorsProps) {
-  return <EventList traceId={traceId} />;
-}
diff --git a/packages/overlay/src/integrations/sentry/components/traces/TraceDetails/index.tsx b/packages/overlay/src/integrations/sentry/components/traces/TraceDetails/index.tsx
index a68f347d..1a13db3a 100644
--- a/packages/overlay/src/integrations/sentry/components/traces/TraceDetails/index.tsx
+++ b/packages/overlay/src/integrations/sentry/components/traces/TraceDetails/index.tsx
@@ -1,9 +1,9 @@
 import { Link, Navigate, Route, Routes, useParams } from 'react-router-dom';
 import Tabs from '~/components/Tabs';
 import { default as dataCache, default as sentryDataCache } from '../../../data/sentryDataCache';
+import EventList from '../../events/EventList';
 import TraceContext from './components/TraceContext';
 import TraceDetailHeader from './components/TraceDetailHeader';
-import TraceErrors from './components/TraceErrors';
 import TraceTreeview from './components/TraceTreeview';
 
 export default function TraceDetails() {
@@ -62,7 +62,7 @@ export default function TraceDetails() {
         <Route path="details" element={<TraceTreeview traceId={traceId} />} />
         <Route path="spans/:spanId" element={<TraceTreeview traceId={traceId} />} />
         <Route path="context" element={<TraceContext traceId={traceId} />} />
-        <Route path="errors" element={<TraceErrors traceId={traceId} />} />
+        <Route path="errors" element={<EventList traceId={traceId} />} />
         {/* Default tab */}
         <Route path="*" element={<Navigate to={`/traces/${traceId}/details`} replace />} />
       </Routes>

From e8b0e8ac35e4b37d2fd5129c73fd662fa56daf6e Mon Sep 17 00:00:00 2001
From: Burak Yigit Kaya <byk@sentry.io>
Date: Fri, 8 Nov 2024 16:10:13 +0000
Subject: [PATCH 5/5] some more minor refactors

---
 .../traces/TraceDetails/components/TraceTreeview.tsx      | 8 +++++---
 .../sentry/components/traces/TraceDetails/index.tsx       | 4 ++--
 .../sentry/components/traces/spans/SpanDetails.tsx        | 4 ++--
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/packages/overlay/src/integrations/sentry/components/traces/TraceDetails/components/TraceTreeview.tsx b/packages/overlay/src/integrations/sentry/components/traces/TraceDetails/components/TraceTreeview.tsx
index 7629007d..ed4864ec 100644
--- a/packages/overlay/src/integrations/sentry/components/traces/TraceDetails/components/TraceTreeview.tsx
+++ b/packages/overlay/src/integrations/sentry/components/traces/TraceDetails/components/TraceTreeview.tsx
@@ -1,17 +1,19 @@
 import { useState } from 'react';
 import { useParams } from 'react-router-dom';
-import sentryDataCache from '~/integrations/sentry/data/sentryDataCache';
-import { getDuration } from '~/integrations/sentry/utils/duration';
+import sentryDataCache from '../../../../data/sentryDataCache';
+import { getDuration } from '../../../../utils/duration';
 import DateTime from '../../../DateTime';
 import SpanDetails from '../../spans/SpanDetails';
 import SpanTree from '../../spans/SpanTree';
 
 type TraceTreeViewProps = { traceId: string };
 
+export const DEFAULT_SPAN_NODE_WIDTH = 50;
+
 export default function TraceTreeview({ traceId }: TraceTreeViewProps) {
   const { spanId } = useParams();
 
-  const [spanNodeWidth, setSpanNodeWidth] = useState<number>(50);
+  const [spanNodeWidth, setSpanNodeWidth] = useState<number>(DEFAULT_SPAN_NODE_WIDTH);
 
   const trace = sentryDataCache.getTraceById(traceId);
   const span = spanId ? sentryDataCache.getSpanById(traceId, spanId) : undefined;
diff --git a/packages/overlay/src/integrations/sentry/components/traces/TraceDetails/index.tsx b/packages/overlay/src/integrations/sentry/components/traces/TraceDetails/index.tsx
index 1a13db3a..45ba0688 100644
--- a/packages/overlay/src/integrations/sentry/components/traces/TraceDetails/index.tsx
+++ b/packages/overlay/src/integrations/sentry/components/traces/TraceDetails/index.tsx
@@ -1,5 +1,5 @@
 import { Link, Navigate, Route, Routes, useParams } from 'react-router-dom';
-import Tabs from '~/components/Tabs';
+import Tabs from '../../../../../components/Tabs';
 import { default as dataCache, default as sentryDataCache } from '../../../data/sentryDataCache';
 import EventList from '../../events/EventList';
 import TraceContext from './components/TraceContext';
@@ -30,7 +30,7 @@ export default function TraceDetails() {
     .getEventsByTrace(traceId)
     .filter(
       e =>
-        e.type != 'transaction' &&
+        e.type !== 'transaction' &&
         (e.contexts?.trace?.trace_id ? sentryDataCache.isTraceLocal(e.contexts?.trace?.trace_id) : null) !== false,
     ).length;
 
diff --git a/packages/overlay/src/integrations/sentry/components/traces/spans/SpanDetails.tsx b/packages/overlay/src/integrations/sentry/components/traces/spans/SpanDetails.tsx
index d03697fa..52394ced 100644
--- a/packages/overlay/src/integrations/sentry/components/traces/spans/SpanDetails.tsx
+++ b/packages/overlay/src/integrations/sentry/components/traces/spans/SpanDetails.tsx
@@ -1,9 +1,9 @@
 import { useState, type ReactNode } from 'react';
 import { Link } from 'react-router-dom';
 import { format as formatSQL } from 'sql-formatter';
-import SidePanel, { SidePanelHeader } from '~/ui/SidePanel';
+import SidePanel, { SidePanelHeader } from '../../../../../ui/SidePanel';
 import dataCache from '../../../data/sentryDataCache';
-import { SentryErrorEvent, Span, TraceContext } from '../../../types';
+import type { SentryErrorEvent, Span, TraceContext } from '../../../types';
 import { formatBytes } from '../../../utils/bytes';
 import { getDuration } from '../../../utils/duration';
 import DateTime from '../../DateTime';