fix: Disable useSessionId query when traceId input is undefined (#1451)

Closes #1449
Closes HDX-2992

# Summary

This PR prevents HyperDX from issuing an invalid query (described in #1449) by disabling the query for sessions when a trace ID is not available. This often happened not just for events without a trace ID but also immediately after opening the side panel while a valid traceId was still loading.

Updating the types to reflect the possibility that trace ID is undefined also exposed the fact that we try to show the trace waterfall and row overview panels on the trace panel even when there is no trace id. This has been fixed.

## Before

https://github.com/user-attachments/assets/91994d82-4c1c-4538-bc4b-0ee31480200a

## After

No invalid query is issued:

https://github.com/user-attachments/assets/300580d3-970e-405f-868b-d0aec9b722e7

When there is no trace id, we don't attempt to render the waterfall:
<img width="1342" height="832" alt="Screenshot 2025-12-05 at 10 02 14 AM" src="https://github.com/user-attachments/assets/80b87d02-2a80-49e2-a0ee-4808d712de0b" />

.changeset/modern-doors-own.md

@@ -0,0 +1,5 @@
+---
+"@hyperdx/app": patch
+---
+
+fix: Disable useSessionId query when traceId input is undefined

packages/app/src/components/DBRowSidePanel.tsx

@@ -234,7 +234,7 @@ const DBRowSidePanel = ({
   }, [timestampDate]);
 
   const focusDate = timestampDate;
-  const traceId = normalizedRow?.['__hdx_trace_id'];
+  const traceId: string | undefined = normalizedRow?.['__hdx_trace_id'];
 
   const childSourceId =
     source.kind === 'log'

packages/app/src/components/DBSessionPanel.tsx

@@ -14,7 +14,7 @@ export const useSessionId = ({
   enabled = false,
 }: {
   sourceId?: string;
-  traceId: string;
+  traceId?: string;
   dateRange: [Date, Date];
   enabled?: boolean;
 }) => {
@@ -22,7 +22,7 @@ export const useSessionId = ({
   const { data: source } = useSource({ id: sourceId });
 
   const config = useMemo(() => {
-    if (!source) {
+    if (!source || !traceId) {
       return;
     }
     return {
@@ -54,10 +54,10 @@ export const useSessionId = ({
   }, [source, traceId]);
 
   const { data } = useEventsData({
-    config: config!, // ok to force unwrap, the query will be disabled if source is null
+    config: config!, // ok to force unwrap, the query will be disabled if config is null
     dateRangeStartInclusive: true,
     dateRange,
-    enabled: enabled && !!source,
+    enabled: enabled && !!source && !!config,
   });
 
   const result = useMemo(() => {

packages/app/src/components/DBTracePanel.tsx

@@ -4,7 +4,6 @@ import { useForm } from 'react-hook-form';
 import { tcFromSource } from '@hyperdx/common-utils/dist/core/metadata';
 import { SourceKind } from '@hyperdx/common-utils/dist/types';
 import {
-  Badge,
   Button,
   Center,
   Divider,
@@ -19,7 +18,6 @@ import { DBTraceWaterfallChartContainer } from '@/components/DBTraceWaterfallCha
 import { useSource, useUpdateSource } from '@/source';
 import TabBar from '@/TabBar';
 
-import ServiceMap from './ServiceMap/ServiceMap';
 import { RowDataPanel } from './DBRowDataPanel';
 import { RowOverviewPanel } from './DBRowOverviewPanel';
 import { SourceSelectControlled } from './SourceSelect';
@@ -41,7 +39,7 @@ export default function DBTracePanel({
 }: {
   parentSourceId?: string | null;
   childSourceId?: string | null;
-  traceId: string;
+  traceId?: string;
   dateRange: [Date, Date];
   focusDate: Date;
   // Passed in from side panel to try to identify which
@@ -54,7 +52,7 @@ export default function DBTracePanel({
   };
   'data-testid'?: string;
 }) {
-  const { control, watch, setValue } = useForm({
+  const { control, watch } = useForm({
     defaultValues: {
       source: childSourceId,
     },
@@ -192,7 +190,7 @@ export default function DBTracePanel({
         </Stack>
       )}
       <Divider my="sm" />
-      {traceSourceData?.kind === SourceKind.Trace && (
+      {traceSourceData?.kind === SourceKind.Trace && traceId && (
         <DBTraceWaterfallChartContainer
           traceTableSource={traceSourceData}
           logTableSource={logSourceData}
@@ -246,7 +244,7 @@ export default function DBTracePanel({
           )}
         </>
       )}
-      {traceSourceData != null && !eventRowWhere && (
+      {traceSourceData != null && !eventRowWhere && traceId && (
         <Paper shadow="xs" p="xl" mt="md">
           <Center mih={100}>
             <Text size="sm">Please select a span above to view details.</Text>