[OPIK-5027] [FE] feat: TraceLogsSidebar — full traces table in Sheet overlay

apps/opik-frontend/src/api/projects/useProjectStatisticList.ts

@@ -5,15 +5,18 @@ import api, {
   QueryConfig,
 } from "@/api/api";
 import { ProjectStatistic } from "@/types/projects";
+import { generateLogsSourceFilter, processFilters } from "@/lib/filters";
 import { processSorting } from "@/lib/sorting";
 import { Sorting } from "@/types/sorting";
+import { LOGS_SOURCE } from "@/types/traces";
 
 type UseProjectStatisticsListParams = {
   workspaceName: string;
   search?: string;
   sorting?: Sorting;
   page: number;
   size: number;
+  logsSource?: LOGS_SOURCE;
 };
 
 type UseProjectStatisticsListResponse = {
@@ -29,6 +32,7 @@ const getProjectStatisticsList = async (
     sorting,
     size,
     page,
+    logsSource,
   }: UseProjectStatisticsListParams,
 ) => {
   const { data } = await api.get(`${PROJECTS_REST_ENDPOINT}stats`, {
@@ -37,6 +41,10 @@ const getProjectStatisticsList = async (
       workspace_name: workspaceName,
       ...processSorting(sorting),
       ...(search && { name: search }),
+      ...processFilters(
+        undefined,
+        logsSource ? generateLogsSourceFilter(logsSource) : undefined,
+      ),
       size,
       page,
     },

apps/opik-frontend/src/hooks/useProjectWithStatisticsList.ts

@@ -1,6 +1,7 @@
 import { useMemo } from "react";
 import { keepPreviousData, UseQueryOptions } from "@tanstack/react-query";
 import { Sorting } from "@/types/sorting";
+import { LOGS_SOURCE } from "@/types/traces";
 import { ProjectStatistic, ProjectWithStatistic } from "@/types/projects";
 import useProjectsList from "@/api/projects/useProjectsList";
 import useProjectStatisticsList from "@/api/projects/useProjectStatisticList";
@@ -11,6 +12,7 @@ type UseProjectWithStatisticsParams = {
   sorting?: Sorting;
   page: number;
   size: number;
+  logsSource?: LOGS_SOURCE;
 };
 
 type UseProjectWithStatisticsResponse = {

apps/opik-frontend/src/shared/ResizableSidePanel/ResizableSidePanel.tsx

@@ -35,6 +35,7 @@ type ResizableSidePanelProps = {
   closeOnClickOutside?: boolean;
   horizontalNavigation?: ArrowNavigationConfig;
   verticalNavigation?: ArrowNavigationConfig;
+  container?: HTMLElement | null;
 };
 
 const UP_HOTKEYS = ["↑"];
@@ -68,8 +69,10 @@ const ResizableSidePanel: React.FunctionComponent<ResizableSidePanelProps> = ({
   closeOnClickOutside = true,
   horizontalNavigation,
   verticalNavigation,
+  container,
 }) => {
-  const portalContainer = usePortalContainer();
+  const externalContainer = usePortalContainer();
+  const portalContainer = container ?? externalContainer;
   const localStorageKey = `${panelId}-side-panel-width`;
 
   const getContainerWidth = useCallback(() => {

apps/opik-frontend/src/ui/sheet.tsx

@@ -51,12 +51,25 @@ const sheetVariants = cva(
 
 interface SheetContentProps
   extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
-    VariantProps<typeof sheetVariants> {}
+    VariantProps<typeof sheetVariants> {
+  header?: React.ReactNode;
+}
+
+const DefaultSheetHeader = () => (
+  <div className="flex h-[60px] items-center border-b border-b-border px-6">
+    <Button asChild size="icon-sm" variant="outline">
+      <SheetPrimitive.Close className="rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+        <X />
+        <span className="sr-only">Close</span>
+      </SheetPrimitive.Close>
+    </Button>
+  </div>
+);
 
 const SheetContent = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Content>,
   SheetContentProps
->(({ side = "right", className, children, ...props }, ref) => {
+>(({ side = "right", className, children, header, ...props }, ref) => {
   const container = usePortalContainer();
   return (
     <SheetPortal container={container}>
@@ -66,16 +79,12 @@ const SheetContent = React.forwardRef<
         className={cn(sheetVariants({ side }), className)}
         {...props}
       >
-        <div className="flex h-[60px] items-center border-b border-b-border px-6">
-          <Button asChild size="icon-sm" variant="outline">
-            <SheetPrimitive.Close className="rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
-              <X />
-
-              <span className="sr-only">Close</span>
-            </SheetPrimitive.Close>
-          </Button>
-        </div>
-        <div className="max-h-full overflow-y-auto p-6">{children}</div>
+        {header !== undefined ? header : <DefaultSheetHeader />}
+        {header !== undefined ? (
+          children
+        ) : (
+          <div className="max-h-full overflow-y-auto p-6">{children}</div>
+        )}
       </SheetPrimitive.Content>
     </SheetPortal>
   );

apps/opik-frontend/src/v2/layout/SideBar/ProjectSelector/ProjectSelector.tsx

@@ -236,7 +236,7 @@ const ProjectItem: React.FC<ProjectItemProps> = ({
         to="/$workspaceName/projects/$projectId/home"
         params={{ workspaceName, projectId: project.id }}
         className={cn(
-          "group flex items-center gap-2 rounded-md px-3 py-1.5 hover:bg-primary-foreground",
+          "group relative flex h-8 items-center gap-2 rounded-md px-3 hover:bg-primary-foreground hover:pr-9",
           isSelected && "bg-muted",
         )}
         onClick={(e) => {
@@ -262,7 +262,7 @@ const ProjectItem: React.FC<ProjectItemProps> = ({
               <Button
                 variant="minimal"
                 size="icon-2xs"
-                className="invisible shrink-0 group-hover:visible"
+                className="invisible absolute right-3 top-1/2 -translate-y-1/2 rounded pl-2 group-hover:visible"
               >
                 <MoreHorizontal className="size-3.5" />
               </Button>

apps/opik-frontend/src/v2/pages-shared/traces/TraceDetailsPanel/TraceDetailsActionsPanel.tsx

@@ -26,7 +26,7 @@ import {
   OnChangeFn,
 } from "@/types/shared";
 import { Filters } from "@/types/filters";
-import { ExperimentItemReference, Span, Trace } from "@/types/traces";
+import { Span, Trace } from "@/types/traces";
 import useTraceDeleteMutation from "@/api/traces/useTraceDeleteMutation";
 import { useToast } from "@/ui/use-toast";
 import { Button } from "@/ui/button";
@@ -40,8 +40,6 @@ import {
 } from "@/ui/dropdown-menu";
 import TooltipWrapper from "@/shared/TooltipWrapper/TooltipWrapper";
 import ConfirmDialog from "@/shared/ConfirmDialog/ConfirmDialog";
-import NavigationTag from "@/shared/NavigationTag/NavigationTag";
-import { RESOURCE_TYPE } from "@/shared/ResourceLink/ResourceLink";
 import FiltersButton from "@/shared/FiltersButton/FiltersButton";
 import SelectBox, { SelectBoxProps } from "@/shared/SelectBox/SelectBox";
 import ExpandableSearchInput from "@/shared/ExpandableSearchInput/ExpandableSearchInput";
@@ -116,23 +114,18 @@ const TraceDetailsActionsPanel: React.FunctionComponent<
   const isExportEnabled = useIsFeatureEnabled(FeatureToggleKeys.EXPORT_ENABLED);
 
   const {
-    permissions: { canDeleteTraces, canViewExperiments },
+    permissions: { canDeleteTraces },
   } = usePermissions();
 
   const { toast } = useToast();
 
   const { mutate } = useTraceDeleteMutation();
 
   const hasThread = Boolean(setThreadId && threadId);
-  const experiment: ExperimentItemReference | undefined = (treeData[0] as Trace)
-    ?.experiment;
-
-  const showExperimentButton = !!experiment && canViewExperiments;
 
   const minPanelWidth = useMemo(() => {
     const elements = [
-      { name: "SEPARATOR", size: 25, visible: hasThread || !!experiment },
-      { name: "VIEW_IN_EXPERIMENT", size: 140, visible: !!experiment },
+      { name: "SEPARATOR", size: 25, visible: hasThread },
       { name: "GO_TO_THREAD", size: 110, visible: hasThread },
       { name: "PADDING", size: 24, visible: true },
       { name: "FILTER", size: 60, visible: true },
@@ -148,7 +141,7 @@ const TraceDetailsActionsPanel: React.FunctionComponent<
     ];
 
     return elements.reduce((acc, e) => acc + (e.visible ? e.size : 0), 0);
-  }, [hasAgentGraph, hasThread, isAIInspectorEnabled, experiment]);
+  }, [hasAgentGraph, hasThread, isAIInspectorEnabled]);
 
   const { ref } = useObserveResizeNode<HTMLDivElement>((node) => {
     setIsSmall(node.clientWidth < minPanelWidth + SEARCH_SPACE_RESERVATION);
@@ -384,23 +377,9 @@ const TraceDetailsActionsPanel: React.FunctionComponent<
 
   return (
     <div ref={ref} className="flex flex-auto items-center justify-between">
-      {hasThread || showExperimentButton ? (
+      {hasThread ? (
         <div className="flex items-center">
           <Separator orientation="vertical" className="mx-3 h-4" />
-          {showExperimentButton && (
-            <NavigationTag
-              id={experiment.dataset_id}
-              name="View in experiment"
-              resource={RESOURCE_TYPE.experimentItem}
-              search={{
-                experiments: [experiment.id],
-                row: experiment.dataset_item_id,
-              }}
-              tooltipContent={`View this item in experiment: ${experiment.name}`}
-              className="h-8"
-              isSmall={isSmall}
-            />
-          )}
           {hasThread && (
             <TooltipWrapper content="Go to thread">
               <Button

apps/opik-frontend/src/v2/pages-shared/traces/TraceDetailsPanel/TraceDetailsPanel.tsx

@@ -44,6 +44,7 @@ type TraceDetailsPanelProps = {
   open: boolean;
   onClose: () => void;
   onRowChange?: (shift: number) => void;
+  container?: HTMLElement | null;
 };
 
 const TraceDetailsPanel: React.FunctionComponent<TraceDetailsPanelProps> = ({
@@ -57,6 +58,7 @@ const TraceDetailsPanel: React.FunctionComponent<TraceDetailsPanelProps> = ({
   onClose,
   open,
   onRowChange,
+  container,
 }) => {
   const [activeSection, setActiveSection] =
     useDetailsActionSectionState("lastSection");
@@ -293,6 +295,7 @@ const TraceDetailsPanel: React.FunctionComponent<TraceDetailsPanelProps> = ({
       horizontalNavigation={horizontalNavigation}
       verticalNavigation={verticalNavigation}
       minWidth={700}
+      container={container}
     >
       {renderContent()}
     </ResizableSidePanel>