[wip] experimental: tracing panel

frontend/src/components/editor/cell/CellStatus.tsx

@@ -321,7 +321,7 @@ export const CellStatusComponent: React.FC<CellStatusComponentProps> = ({
   return null;
 };
 
-const ElapsedTime = (props: { elapsedTime: string }) => {
+export const ElapsedTime = (props: { elapsedTime: string }) => {
   return (
     <span className="tracking-wide font-semibold">{props.elapsedTime}</span>
   );
@@ -346,7 +346,7 @@ const LastRanTime = (props: { lastRanTime: number }) => {
   );
 };
 
-function formatElapsedTime(elapsedTime: number | null) {
+export function formatElapsedTime(elapsedTime: number | null) {
   if (elapsedTime === null) {
     return "";
   }

frontend/src/components/editor/chrome/panels/tracing-panel.tsx

@@ -0,0 +1,7 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+import { Tracing } from "@/components/tracing/tracing";
+import React from "react";
+
+export const TracingPanel: React.FC = () => {
+  return <Tracing />;
+};

frontend/src/components/editor/chrome/types.ts

@@ -14,6 +14,7 @@ import {
   NotebookPenIcon,
   BoxIcon,
   BotMessageSquareIcon,
+  ActivityIcon,
 } from "lucide-react";
 
 export type PanelType =
@@ -22,6 +23,7 @@ export type PanelType =
   | "variables"
   | "outline"
   | "dependencies"
+  | "tracing"
   | "packages"
   | "documentation"
   | "snippets"
@@ -94,6 +96,13 @@ export const PANELS: PanelDescriptor[] = [
     tooltip: "Notebook logs",
     position: "sidebar",
   },
+  {
+    type: "tracing",
+    Icon: ActivityIcon,
+    tooltip: "Tracing",
+    position: "sidebar",
+    hidden: !getFeatureFlag("tracing"),
+  },
   {
     type: "snippets",
     Icon: SquareDashedBottomCodeIcon,

frontend/src/components/editor/chrome/wrapper/app-chrome.tsx

@@ -30,6 +30,7 @@ import { IfCapability } from "@/core/config/if-capability";
 import { PackagesPanel } from "../panels/packages-panel";
 import { ChatPanel } from "@/components/chat/chat-panel";
 import { TooltipProvider } from "@radix-ui/react-tooltip";
+import { TracingPanel } from "../panels/tracing-panel";
 
 const LazyTerminal = React.lazy(() => import("@/components/terminal/terminal"));
 
@@ -153,6 +154,7 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
             {selectedPanel === "scratchpad" && <ScratchpadPanel />}
             {selectedPanel === "chat" && <ChatPanel />}
             {selectedPanel === "logs" && <LogsPanel />}
+            {selectedPanel === "tracing" && <TracingPanel />}
           </TooltipProvider>
         </div>
       </Suspense>

frontend/src/components/editor/dynamic-favicon.tsx

@@ -4,11 +4,12 @@ import { useEventListener } from "@/hooks/useEventListener";
 import { usePrevious } from "@dnd-kit/utilities";
 import { useEffect } from "react";
 
-const FAVICONS = {
+export const FAVICONS = {
   idle: "./favicon.ico",
   success: "./circle-check.ico",
   running: "./circle-play.ico",
   error: "./circle-x.ico",
+  queued: "./favicon.ico",
 };
 
 interface Props {

frontend/src/components/tracing/tracing.test.tsx

@@ -0,0 +1,17 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+import { describe, it, expect } from "vitest";
+import { formatChartTime } from "./tracing";
+
+describe("formatUTCTime", () => {
+  it("should format a timestamp correctly", () => {
+    const timestamp = 1_700_000_000; // Example timestamp
+    const formattedTime = formatChartTime(timestamp);
+    expect(formattedTime).toBe("2023-11-15 06:13:20.000");
+  });
+
+  it("should return an empty string for invalid timestamp", () => {
+    const invalidTimestamp = Number.NaN;
+    const formattedTime = formatChartTime(invalidTimestamp);
+    expect(formattedTime).toBe("");
+  });
+});