Merge pull request #347 from traceroot-ai/xinwei_support_multi_trace_ui_select_v3

[UI] Support multiple trace selection through boxes [1/n]

Author: XinweiHe

ui/package.json

@@ -15,6 +15,7 @@
     "@lobehub/icons": "^2.26.0",
     "@lobehub/ui": "^2.8.3",
     "@radix-ui/react-avatar": "^1.1.10",
+    "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-collapsible": "^1.1.12",
     "@radix-ui/react-dialog": "^1.1.14",
     "@radix-ui/react-dropdown-menu": "^2.1.15",

ui/src/app/explore/page.tsx

@@ -2,15 +2,19 @@
 
 import { useState, useCallback, useEffect } from "react";
 import Trace from "@/components/explore/Trace";
+import ExploreHeader from "@/components/explore/ExploreHeader";
+import { TimeRange, TIME_RANGES } from "@/components/explore/TimeButton";
+import {
+  CustomTimeRange,
+  TimezoneMode,
+} from "@/components/explore/CustomTimeRangeDialog";
+import { SearchCriterion } from "@/components/explore/SearchBar";
 import ResizablePanel from "@/components/resizable/ResizablePanel";
 import RightPanelSwitch from "@/components/right-panel/RightPanelSwitch";
+import { ViewType } from "@/components/right-panel/ModeToggle";
 import AgentPanel from "@/components/agent-panel/AgentPanel";
 import { Span, Trace as TraceType } from "@/models/trace";
-import {
-  initializeProviders,
-  loadProviderSelection,
-  getProviderRegion,
-} from "@/utils/provider";
+import { initializeProviders } from "@/utils/provider";
 
 export default function Explore() {
   const [selectedTraceIds, setSelectedTraceIds] = useState<string[]>([]);
@@ -25,11 +29,28 @@ export default function Explore() {
     { category: string; value: string }[]
   >([]);
 
+  // Header state - lifted from Trace.tsx and RightPanelSwitch.tsx
+  const [viewType, setViewType] = useState<ViewType>("log");
+  const [selectedTimeRange, setSelectedTimeRange] = useState<TimeRange>(
+    TIME_RANGES[0],
+  );
+  const [timezone, setTimezone] = useState<TimezoneMode>("utc");
+  const [searchCriteria, setSearchCriteria] = useState<SearchCriterion[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [hasTraceIdInUrl, setHasTraceIdInUrl] = useState(false);
+
   // Initialize providers
   useEffect(() => {
     initializeProviders();
   }, []);
 
+  // Check if trace_id is in URL on mount
+  useEffect(() => {
+    const urlParams = new URLSearchParams(window.location.search);
+    const traceIdParam = urlParams.get("trace_id");
+    setHasTraceIdInUrl(!!traceIdParam);
+  }, []);
+
   // Helper function to get all span IDs from a trace recursively
   const getAllSpanIds = (spans: Span[]): string[] => {
     const spanIds: string[] = [];
@@ -106,6 +127,58 @@ export default function Explore() {
     [],
   );
 
+  // Header handlers
+  const handleTimeRangeSelect = useCallback((range: TimeRange) => {
+    setSelectedTimeRange(range);
+    setSelectedTraceIds([]);
+    setSelectedSpanIds([]);
+    setLoading(true);
+  }, []);
+
+  const handleCustomTimeRangeSelect = useCallback(
+    (customRange: CustomTimeRange, selectedTimezone: TimezoneMode) => {
+      setTimezone(selectedTimezone);
+
+      const customTimeRange: TimeRange = {
+        label: customRange.label,
+        isCustom: true,
+        customRange: customRange,
+      };
+
+      if (customRange.type === "relative") {
+        customTimeRange.minutes = customRange.minutes;
+      }
+
+      setSelectedTimeRange(customTimeRange);
+      setSelectedTraceIds([]);
+      setSelectedSpanIds([]);
+      setLoading(true);
+    },
+    [],
+  );
+
+  const handleSearch = useCallback((criteria: SearchCriterion[]) => {
+    setSearchCriteria(criteria);
+    setLoading(true);
+  }, []);
+
+  const handleClearSearch = useCallback(() => {
+    setSearchCriteria([]);
+    setLogSearchValue("");
+    handleLogSearchValueChange("");
+    setLoading(true);
+  }, [handleLogSearchValueChange]);
+
+  const handleRefresh = useCallback(() => {
+    setSelectedTraceIds([]);
+    setSelectedSpanIds([]);
+    setLoading(true);
+  }, []);
+
+  const handleLoadingChange = useCallback((isLoading: boolean) => {
+    setLoading(isLoading);
+  }, []);
+
   // TODO (xinwei): Add ProtectedRoute
   return (
     <AgentPanel
@@ -116,38 +189,62 @@ export default function Explore() {
       queryEndTime={timeRange?.end}
       onSpanSelect={(spanId) => handleSpanSelect([spanId])}
     >
-      <ResizablePanel
-        leftPanel={
-          <Trace
-            onTraceSelect={handleTraceSelect}
-            onSpanSelect={handleSpanSelect}
-            onTraceData={handleTraceData}
-            onTracesUpdate={handleTracesUpdate}
-            onLogSearchValueChange={handleLogSearchValueChange}
-            onMetadataSearchTermsChange={handleMetadataSearchTermsChange}
-            selectedTraceIds={selectedTraceIds}
-            selectedSpanIds={selectedSpanIds}
+      <div className="h-screen flex flex-col">
+        <ExploreHeader
+          onSearch={handleSearch}
+          onClearSearch={handleClearSearch}
+          onLogSearchValueChange={handleLogSearchValueChange}
+          onMetadataSearchTermsChange={handleMetadataSearchTermsChange}
+          searchDisabled={loading || hasTraceIdInUrl}
+          selectedTimeRange={selectedTimeRange}
+          onTimeRangeSelect={handleTimeRangeSelect}
+          onCustomTimeRangeSelect={handleCustomTimeRangeSelect}
+          currentTimezone={timezone}
+          timeDisabled={loading || hasTraceIdInUrl}
+          onRefresh={handleRefresh}
+          refreshDisabled={loading || hasTraceIdInUrl}
+          viewType={viewType}
+          onViewTypeChange={setViewType}
+        />
+        <div className="flex-1 overflow-hidden">
+          <ResizablePanel
+            leftPanel={
+              <Trace
+                onTraceSelect={handleTraceSelect}
+                onSpanSelect={handleSpanSelect}
+                onTraceData={handleTraceData}
+                onTracesUpdate={handleTracesUpdate}
+                selectedTraceIds={selectedTraceIds}
+                selectedSpanIds={selectedSpanIds}
+                selectedTimeRange={selectedTimeRange}
+                timezone={timezone}
+                searchCriteria={searchCriteria}
+                loading={loading}
+                onLoadingChange={handleLoadingChange}
+              />
+            }
+            rightPanel={
+              <RightPanelSwitch
+                traceIds={selectedTraceIds}
+                spanIds={selectedSpanIds}
+                traceQueryStartTime={timeRange?.start}
+                traceQueryEndTime={timeRange?.end}
+                allTraces={allTraces}
+                logSearchValue={logSearchValue}
+                metadataSearchTerms={metadataSearchTerms}
+                onTraceSelect={handleTraceSelect}
+                onSpanClear={handleSpanClear}
+                onTraceSpansUpdate={handleTraceSpansUpdate}
+                onSpanSelect={handleSpanSelect}
+                viewType={viewType}
+              />
+            }
+            minLeftWidth={35}
+            maxLeftWidth={60}
+            defaultLeftWidth={46}
           />
-        }
-        rightPanel={
-          <RightPanelSwitch
-            traceIds={selectedTraceIds}
-            spanIds={selectedSpanIds}
-            traceQueryStartTime={timeRange?.start}
-            traceQueryEndTime={timeRange?.end}
-            allTraces={allTraces}
-            logSearchValue={logSearchValue}
-            metadataSearchTerms={metadataSearchTerms}
-            onTraceSelect={handleTraceSelect}
-            onSpanClear={handleSpanClear}
-            onTraceSpansUpdate={handleTraceSpansUpdate}
-            onSpanSelect={handleSpanSelect}
-          />
-        }
-        minLeftWidth={35}
-        maxLeftWidth={60}
-        defaultLeftWidth={46}
-      />
+        </div>
+      </div>
     </AgentPanel>
   );
 }

ui/src/components/explore/ExploreHeader.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import React from "react";
+import SearchBar, { SearchCriterion } from "./SearchBar";
+import RefreshButton from "./RefreshButton";
+import TimeButton, { TimeRange } from "./TimeButton";
+import { CustomTimeRange, TimezoneMode } from "./CustomTimeRangeDialog";
+import ModeToggle, { ViewType } from "../right-panel/ModeToggle";
+
+interface ExploreHeaderProps {
+  // Search props
+  onSearch: (criteria: SearchCriterion[]) => void;
+  onClearSearch: () => void;
+  onLogSearchValueChange?: (value: string) => void;
+  onMetadataSearchTermsChange?: (
+    terms: { category: string; value: string }[],
+  ) => void;
+  searchDisabled?: boolean;
+
+  // Time range props
+  selectedTimeRange: TimeRange;
+  onTimeRangeSelect: (range: TimeRange) => void;
+  onCustomTimeRangeSelect: (
+    customRange: CustomTimeRange,
+    timezone: TimezoneMode,
+  ) => void;
+  currentTimezone: TimezoneMode;
+  timeDisabled?: boolean;
+
+  // Refresh props
+  onRefresh: () => void;
+  refreshDisabled?: boolean;
+
+  // Mode toggle props
+  viewType: ViewType;
+  onViewTypeChange: (type: ViewType) => void;
+}
+
+export default function ExploreHeader({
+  onSearch,
+  onClearSearch,
+  onLogSearchValueChange,
+  onMetadataSearchTermsChange,
+  searchDisabled = false,
+  selectedTimeRange,
+  onTimeRangeSelect,
+  onCustomTimeRangeSelect,
+  currentTimezone,
+  timeDisabled = false,
+  onRefresh,
+  refreshDisabled = false,
+  viewType,
+  onViewTypeChange,
+}: ExploreHeaderProps) {
+  return (
+    <div className="sticky top-0 z-10 bg-white dark:bg-zinc-950 pt-1 pl-6 pr-2 pb-1 border-b border-zinc-200 dark:border-zinc-700">
+      <div className="flex flex-row justify-between items-center gap-2">
+        <div className="flex-1 min-w-0">
+          <SearchBar
+            onSearch={onSearch}
+            onClear={onClearSearch}
+            onLogSearchValueChange={onLogSearchValueChange}
+            onMetadataSearchTermsChange={onMetadataSearchTermsChange}
+            disabled={searchDisabled}
+          />
+        </div>
+        <div className="flex items-center space-x-2 flex-shrink-0 justify-end">
+          <RefreshButton onRefresh={onRefresh} disabled={refreshDisabled} />
+          <TimeButton
+            selectedTimeRange={selectedTimeRange}
+            onTimeRangeSelect={onTimeRangeSelect}
+            onCustomTimeRangeSelect={onCustomTimeRangeSelect}
+            currentTimezone={currentTimezone}
+            disabled={timeDisabled}
+          />
+          <ModeToggle viewType={viewType} onViewTypeChange={onViewTypeChange} />
+        </div>
+      </div>
+    </div>
+  );
+}