@marimo-team/frontend 0.17.8 → 0.18.0

package/src/core/packages/__tests__/package-input-utils.test.ts

@@ -0,0 +1,93 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+import { describe, expect, it } from "vitest";
+import { stripPackageManagerPrefix } from "../package-input-utils";
+
+describe("stripPackageManagerPrefix", () => {
+  it("should remove 'pip install' prefix", () => {
+    expect(stripPackageManagerPrefix("pip install httpx")).toBe("httpx");
+    expect(stripPackageManagerPrefix("pip install httpx requests")).toBe(
+      "httpx requests",
+    );
+  });
+
+  it("should remove 'pip3 install' prefix", () => {
+    expect(stripPackageManagerPrefix("pip3 install pandas")).toBe("pandas");
+  });
+
+  it("should remove 'uv add' prefix", () => {
+    expect(stripPackageManagerPrefix("uv add numpy")).toBe("numpy");
+    expect(stripPackageManagerPrefix("uv add pandas numpy")).toBe(
+      "pandas numpy",
+    );
+  });
+
+  it("should remove 'uv pip install' prefix", () => {
+    expect(stripPackageManagerPrefix("uv pip install scipy")).toBe("scipy");
+  });
+
+  it("should remove 'poetry add' prefix", () => {
+    expect(stripPackageManagerPrefix("poetry add flask")).toBe("flask");
+  });
+
+  it("should remove 'conda install' prefix", () => {
+    expect(stripPackageManagerPrefix("conda install matplotlib")).toBe(
+      "matplotlib",
+    );
+  });
+
+  it("should remove 'pipenv install' prefix", () => {
+    expect(stripPackageManagerPrefix("pipenv install django")).toBe("django");
+  });
+
+  it("should be case insensitive", () => {
+    expect(stripPackageManagerPrefix("PIP INSTALL httpx")).toBe("httpx");
+    expect(stripPackageManagerPrefix("Pip Install requests")).toBe("requests");
+    expect(stripPackageManagerPrefix("UV ADD numpy")).toBe("numpy");
+  });
+
+  it("should handle extra whitespace", () => {
+    expect(stripPackageManagerPrefix("  pip install   httpx  ")).toBe("httpx");
+    expect(stripPackageManagerPrefix("uv add    pandas   ")).toBe("pandas");
+  });
+
+  it("should return input unchanged if no prefix matches", () => {
+    expect(stripPackageManagerPrefix("httpx")).toBe("httpx");
+    expect(stripPackageManagerPrefix("pandas numpy")).toBe("pandas numpy");
+    expect(stripPackageManagerPrefix("httpx==0.27.0")).toBe("httpx==0.27.0");
+  });
+
+  it("should handle package specifications with versions", () => {
+    expect(stripPackageManagerPrefix("pip install httpx==0.27.0")).toBe(
+      "httpx==0.27.0",
+    );
+    expect(stripPackageManagerPrefix("uv add pandas>=2.0.0")).toBe(
+      "pandas>=2.0.0",
+    );
+  });
+
+  it("should handle git URLs", () => {
+    expect(
+      stripPackageManagerPrefix(
+        "pip install git+https://github.com/encode/httpx",
+      ),
+    ).toBe("git+https://github.com/encode/httpx");
+  });
+
+  it("should handle multiple packages", () => {
+    expect(stripPackageManagerPrefix("pip install httpx requests pandas")).toBe(
+      "httpx requests pandas",
+    );
+  });
+
+  it("should only remove the first matching prefix", () => {
+    // Edge case: input contains prefix-like text multiple times
+    expect(stripPackageManagerPrefix("pip install pip install httpx")).toBe(
+      "pip install httpx",
+    );
+  });
+
+  it("should handle empty string", () => {
+    expect(stripPackageManagerPrefix("")).toBe("");
+    expect(stripPackageManagerPrefix("   ")).toBe("");
+  });
+});

package/src/core/packages/package-input-utils.ts

@@ -0,0 +1,36 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+/**
+ * Removes common package manager command prefixes from an input string.
+ * This allows users to paste commands like "pip install httpx" and have
+ * the "pip install" prefix automatically removed.
+ *
+ * @param input - The raw input string that may contain a package manager prefix
+ * @returns The input with any recognized prefix removed and trimmed
+ *
+ * @example
+ * stripPackageManagerPrefix("pip install httpx") // returns "httpx"
+ * stripPackageManagerPrefix("uv add pandas numpy") // returns "pandas numpy"
+ * stripPackageManagerPrefix("httpx") // returns "httpx"
+ */
+export function stripPackageManagerPrefix(input: string): string {
+  const trimmedInput = input.trim();
+
+  const prefixes = [
+    "pip install",
+    "pip3 install",
+    "uv add",
+    "uv pip install",
+    "poetry add",
+    "conda install",
+    "pipenv install",
+  ];
+
+  for (const prefix of prefixes) {
+    if (trimmedInput.toLowerCase().startsWith(prefix.toLowerCase())) {
+      return trimmedInput.slice(prefix.length).trim();
+    }
+  }
+
+  return trimmedInput;
+}

package/src/css/md.css

@@ -78,6 +78,11 @@ a .markdown iconify-icon:first-child {
   margin-inline-end: 0.4em;
 }
 
+/* make links and their contents inline-flex to avoid extra gaps */
+a > .markdown > .paragraph {
+  display: inline-flex;
+}
+
 iconify-icon {
   display: inline-flex;
   align-items: center;

package/src/plugins/core/__test__/sanitize.test.ts

@@ -141,7 +141,7 @@ describe("sanitizeHtml", () => {
     const html =
       "<marimo-mermaid data-diagram='&quot;sequenceDiagram&#92;n    Alice-&gt;&gt;John&#92;n    John--&gt;&gt;Alice&#92;n    &quot;'></marimo-mermaid>";
     expect(sanitizeHtml(html)).toMatchInlineSnapshot(
-      `"<marimo-mermaid></marimo-mermaid>"`,
+      `"<marimo-mermaid data-diagram="&quot;sequenceDiagram\\n    Alice->>John\\n    John-->>Alice\\n    &quot;"></marimo-mermaid>"`,
     );
   });
 

package/src/plugins/core/sanitize.ts

@@ -80,7 +80,9 @@ export function sanitizeHtml(html: string) {
       tagNameCheck: /^(marimo-[A-Za-z][\w-]*|iconify-icon)$/,
       attributeNameCheck: /^[A-Za-z][\w-]*$/,
     },
-    SAFE_FOR_XML: html.includes("marimo-mermaid"),
+    // This flag means we should sanitize such that is it safe for XML,
+    // but this is only used for HTML content.
+    SAFE_FOR_XML: !html.includes("marimo-mermaid"),
   };
   return DOMPurify.sanitize(html, sanitizationOptions);
 }

package/src/plugins/impl/DataTablePlugin.tsx

@@ -63,6 +63,7 @@ import { type CellId, findCellId } from "@/core/cells/ids";
 import { slotsController } from "@/core/slots/slots";
 import { store } from "@/core/state/jotai";
 import { isStaticNotebook } from "@/core/static/static-state";
+import { isInVscodeExtension } from "@/core/vscode/is-in-vscode";
 import { useAsyncData } from "@/hooks/useAsyncData";
 import { useDeepCompareMemoize } from "@/hooks/useDeepCompareMemoize";
 import { useEffectSkipFirstRender } from "@/hooks/useEffectSkipFirstRender";
@@ -179,6 +180,7 @@ interface Data<T> {
   showDataTypes: boolean;
   showPageSizeSelector: boolean;
   showColumnExplorer: boolean;
+  showRowExplorer: boolean;
   showChartBuilder: boolean;
   rowHeaders: FieldTypesWithExternalType;
   fieldTypes?: FieldTypesWithExternalType | null;
@@ -250,6 +252,7 @@ export const DataTablePlugin = createPlugin<S>("marimo-table")
       showDataTypes: z.boolean().default(true),
       showPageSizeSelector: z.boolean().default(true),
       showColumnExplorer: z.boolean().default(true),
+      showRowExplorer: z.boolean().default(true),
       showChartBuilder: z.boolean().default(true),
       rowHeaders: columnToFieldTypesSchema,
       freezeColumnsLeft: z.array(z.string()).optional(),
@@ -718,6 +721,7 @@ const DataTableComponent = ({
   showDownload,
   showPageSizeSelector,
   showColumnExplorer,
+  showRowExplorer,
   showChartBuilder,
   showDataTypes,
   rowHeaders,
@@ -899,6 +903,8 @@ const DataTableComponent = ({
   const showColExplorer =
     showColumnExplorer && preview_column && isPanelOpen("column-explorer");
 
+  const isInVscode = isInVscodeExtension();
+
   return (
     <>
       {/* When the totalRows is "too_many" and the pageSize is the same as the
@@ -988,7 +994,10 @@ const DataTableComponent = ({
             toggleDisplayHeader={toggleDisplayHeader}
             showChartBuilder={showChartBuilder}
             showPageSizeSelector={showPageSizeSelector}
-            showColumnExplorer={showColumnExplorer}
+            // Hidden in VSCode (for now) because we don't have a panel to show
+            // the column/row explorer.
+            showColumnExplorer={showColumnExplorer && !isInVscode}
+            showRowExplorer={showRowExplorer && !isInVscode}
             togglePanel={togglePanel}
             isPanelOpen={isPanelOpen}
             viewedRowIdx={viewedRowIdx}

package/src/plugins/impl/chat/ChatPlugin.tsx

@@ -89,6 +89,7 @@ export const ChatPlugin = createPlugin<{ messages: ChatMessage[] }>(
           send_prompt={props.functions.send_prompt}
           value={props.value?.messages || Arrays.EMPTY}
           setValue={(messages) => props.setValue({ messages })}
+          host={props.host}
         />
       </Suspense>
     </TooltipProvider>

package/src/plugins/impl/chat/chat-ui.tsx

@@ -12,6 +12,7 @@ import {
   DownloadIcon,
   HelpCircleIcon,
   PaperclipIcon,
+  RotateCwIcon,
   SendIcon,
   SettingsIcon,
   Trash2Icon,
@@ -42,7 +43,12 @@ import {
 import { Tooltip } from "@/components/ui/tooltip";
 import { toast } from "@/components/ui/use-toast";
 import { moveToEndOfEditor } from "@/core/codemirror/utils";
+import { MarimoIncomingMessageEvent } from "@/core/dom/events";
 import { useAsyncData } from "@/hooks/useAsyncData";
+import {
+  type HTMLElementNotDerivedFromRef,
+  useEventListener,
+} from "@/hooks/useEventListener";
 import { cn } from "@/utils/cn";
 import { copyToClipboard } from "@/utils/copy";
 import { Logger } from "@/utils/Logger";
@@ -63,6 +69,7 @@ interface Props extends PluginFunctions {
   allowAttachments: boolean | string[];
   value: ChatMessage[];
   setValue: (messages: ChatMessage[]) => void;
+  host: HTMLElement;
 }
 
 export const Chatbot: React.FC<Props> = (props) => {
@@ -74,6 +81,12 @@ export const Chatbot: React.FC<Props> = (props) => {
   const codeMirrorInputRef = useRef<ReactCodeMirrorRef>(null);
   const scrollContainerRef = useRef<HTMLDivElement>(null);
 
+  // Track streaming state - maps backend message_id to frontend message index
+  const streamingStateRef = useRef<{
+    backendMessageId: string | null;
+    frontendMessageIndex: number | null;
+  }>({ backendMessageId: null, frontendMessageIndex: null });
+
   const { data: initialMessages } = useAsyncData(async () => {
     const chatMessages = await props.get_chat_history({});
     const messages: UIMessage[] = chatMessages.messages.map((message, idx) => ({
@@ -113,6 +126,19 @@ export const Chatbot: React.FC<Props> = (props) => {
               .join("\n"),
             parts: m.parts,
           }));
+
+          // Create a placeholder message for streaming
+          const messageId = Date.now().toString();
+
+          setMessages((prev) => [
+            ...prev,
+            {
+              id: messageId,
+              role: "assistant",
+              parts: [{ type: "text", text: "" }],
+            },
+          ]);
+
           const response = await props.send_prompt({
             messages: messages,
             config: {
@@ -124,18 +150,35 @@ export const Chatbot: React.FC<Props> = (props) => {
               presence_penalty: config.presence_penalty,
             },
           });
-          // Update local state with AI response
-          setMessages((prev) => [
-            ...prev,
-            {
-              id: Date.now().toString(),
-              role: "assistant",
-              parts: [{ type: "text", text: response }],
-            },
-          ]);
+
+          // If streaming didn't happen (non-generator response), update the message
+          // Check if streaming state is still set (meaning no chunks were received)
+          if (
+            streamingStateRef.current.backendMessageId === null &&
+            streamingStateRef.current.frontendMessageIndex === null
+          ) {
+            setMessages((prev) => {
+              const updated = [...prev];
+              const index = updated.findIndex((m) => m.id === messageId);
+              if (index !== -1) {
+                updated[index] = {
+                  ...updated[index],
+                  parts: [{ type: "text", text: response }],
+                };
+              }
+              return updated;
+            });
+          }
+
           return new Response(response);
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
         } catch (error: any) {
+          // Clear streaming state on error
+          streamingStateRef.current = {
+            backendMessageId: null,
+            frontendMessageIndex: null,
+          };
+
           // HACK: strip the error message to clean up the response
           const strippedError = error.message
             .split("failed with exception ")
@@ -152,12 +195,98 @@ export const Chatbot: React.FC<Props> = (props) => {
         fileInputRef.current.value = "";
       }
       Logger.debug("Finished streaming message:", message);
+
+      // Clear streaming state
+      streamingStateRef.current = {
+        backendMessageId: null,
+        frontendMessageIndex: null,
+      };
     },
     onError: (error) => {
       Logger.error("An error occurred:", error);
+      // Clear streaming state on error
+      streamingStateRef.current = {
+        backendMessageId: null,
+        frontendMessageIndex: null,
+      };
     },
   });
 
+  // Listen for streaming chunks from backend
+  useEventListener(
+    props.host as HTMLElementNotDerivedFromRef,
+    MarimoIncomingMessageEvent.TYPE,
+    (e) => {
+      const message = e.detail.message;
+      if (
+        typeof message === "object" &&
+        message !== null &&
+        "type" in message &&
+        message.type === "stream_chunk"
+      ) {
+        const chunkMessage = message as {
+          type: string;
+          message_id: string;
+          content: string;
+          is_final: boolean;
+        };
+
+        // Initialize streaming state on first chunk if not already set
+        if (streamingStateRef.current.backendMessageId === null) {
+          // Find the last assistant message (which should be the placeholder we created)
+          setMessages((prev) => {
+            const updated = [...prev];
+            // Find the last assistant message
+            for (let i = updated.length - 1; i >= 0; i--) {
+              if (updated[i].role === "assistant") {
+                streamingStateRef.current = {
+                  backendMessageId: chunkMessage.message_id,
+                  frontendMessageIndex: i,
+                };
+                break;
+              }
+            }
+            return updated;
+          });
+        }
+
+        // Only process chunks for the current streaming message
+        const frontendIndex = streamingStateRef.current.frontendMessageIndex;
+        if (
+          streamingStateRef.current.backendMessageId ===
+            chunkMessage.message_id &&
+          frontendIndex !== null
+        ) {
+          setMessages((prev) => {
+            const updated = [...prev];
+            const index = frontendIndex;
+
+            // Update the message at the tracked index
+            if (index < updated.length) {
+              const messageToUpdate = updated[index];
+              if (messageToUpdate.role === "assistant") {
+                updated[index] = {
+                  ...messageToUpdate,
+                  parts: [{ type: "text", text: chunkMessage.content }],
+                };
+              }
+            }
+
+            return updated;
+          });
+
+          // Clear streaming state when final chunk arrives
+          if (chunkMessage.is_final) {
+            streamingStateRef.current = {
+              backendMessageId: null,
+              frontendMessageIndex: null,
+            };
+          }
+        }
+      }
+    },
+  );
+
   const isLoading = status === "submitted" || status === "streaming";
 
   const handleDelete = (id: string) => {
@@ -283,13 +412,14 @@ export const Chatbot: React.FC<Props> = (props) => {
         <Button
           variant="text"
           size="icon"
+          disabled={messages.length === 0}
           onClick={() => {
             setMessages([]);
             props.setValue([]);
             props.delete_chat_history({});
           }}
         >
-          <Trash2Icon className="h-3 w-3" />
+          <RotateCwIcon className="h-3 w-3" />
         </Button>
       </div>
       <div

package/src/plugins/impl/data-frames/DataFramePlugin.tsx

@@ -297,6 +297,7 @@ export const DataFrameComponent = memo(
           get_column_summaries={getColumnSummaries}
           showPageSizeSelector={(total_rows && total_rows > 5) || false}
           showColumnExplorer={false}
+          showRowExplorer={true}
           showChartBuilder={false}
           value={Arrays.EMPTY}
           setValue={Functions.NOOP}

package/src/plugins/layout/NavigationMenuPlugin.tsx

@@ -14,11 +14,13 @@ import {
 import { Tooltip, TooltipProvider } from "@/components/ui/tooltip";
 import { renderHTML } from "@/plugins/core/RenderHTML";
 import { cn } from "@/utils/cn";
+import { appendQueryParams } from "@/utils/urls";
 import type {
   IStatelessPlugin,
   IStatelessPluginProps,
 } from "../stateless-plugin";
 import "./navigation-menu.css";
+import { KnownQueryParams } from "@/core/constants";
 
 interface MenuItem {
   label: string;
@@ -99,6 +101,15 @@ const NavMenuComponent = ({
     return "_self";
   };
 
+  const preserveQueryParams = (href: string) => {
+    const currentUrl = new URL(globalThis.location.href);
+    return appendQueryParams({
+      href,
+      queryParams: currentUrl.search,
+      keys: [KnownQueryParams.filePath],
+    });
+  };
+
   const renderMenuItem = (item: MenuItem | MenuItemGroup) => {
     if ("items" in item) {
       return orientation === "horizontal" ? (
@@ -113,7 +124,7 @@ const NavMenuComponent = ({
                   <ListItem
                     key={subItem.label}
                     label={subItem.label}
-                    href={subItem.href}
+                    href={preserveQueryParams(subItem.href)}
                     target={target(subItem.href)}
                   >
                     {subItem.description &&
@@ -142,7 +153,7 @@ const NavMenuComponent = ({
                 {maybeWithTooltip(
                   <NavigationMenuLink
                     key={subItem.label}
-                    href={subItem.href}
+                    href={preserveQueryParams(subItem.href)}
                     target={target(subItem.href)}
                     className={navigationMenuTriggerStyle({
                       orientation: orientation,
@@ -162,7 +173,7 @@ const NavMenuComponent = ({
     return (
       <NavigationMenuItem key={item.label}>
         <NavigationMenuLink
-          href={item.href}
+          href={preserveQueryParams(item.href)}
           target={target(item.href)}
           className={navigationMenuTriggerStyle({
             orientation: orientation,

package/src/plugins/layout/ProgressPlugin.tsx

@@ -93,10 +93,13 @@ export const ProgressComponent = ({
 
     const elements: React.ReactNode[] = [];
     if (rate) {
-      elements.push(
-        <span key="rate">{rate} iter/s</span>,
-        <span key="spacer-rate">&middot;</span>,
-      );
+      if (rate < 1) {
+        elements.push(<span key="rate">{prettyTime(1 / rate)} per iter</span>);
+      } else {
+        elements.push(<span key="rate">{rate} iter/s</span>);
+      }
+
+      elements.push(<span key="spacer-rate">&middot;</span>);
     }
 
     if (!hasCompleted && eta) {
@@ -170,6 +173,6 @@ export function prettyTime(seconds: number): string {
     language: "shortEn",
     largest: 2,
     spacer: "",
-    maxDecimalPoints: 2,
+    maxDecimalPoints: seconds < 10 ? 2 : 0,
   });
 }

package/src/plugins/layout/StatPlugin.tsx

@@ -17,6 +17,7 @@ interface Data {
   caption?: string;
   bordered?: boolean;
   direction?: "increase" | "decrease";
+  target_direction?: "increase" | "decrease";
 }
 
 export class StatPlugin implements IStatelessPlugin<Data> {
@@ -28,6 +29,7 @@ export class StatPlugin implements IStatelessPlugin<Data> {
     caption: z.string().optional(),
     bordered: z.boolean().default(false),
     direction: z.enum(["increase", "decrease"]).optional(),
+    target_direction: z.enum(["increase", "decrease"]).default("increase"),
   });
 
   render({ data }: IStatelessPluginProps<Data>): JSX.Element {
@@ -41,6 +43,7 @@ export const StatComponent: React.FC<Data> = ({
   caption,
   bordered,
   direction,
+  target_direction,
 }) => {
   const { locale } = useLocale();
 
@@ -64,6 +67,10 @@ export const StatComponent: React.FC<Data> = ({
     return String(value);
   };
 
+  const onTarget = direction === target_direction;
+  const fillColor = onTarget ? "var(--grass-8)" : "var(--red-8)";
+  const strokeColor = onTarget ? "var(--grass-9)" : "var(--red-9)";
+
   return (
     <div
       className={cn(
@@ -83,15 +90,15 @@ export const StatComponent: React.FC<Data> = ({
             {direction === "increase" && (
               <TriangleIcon
                 className="w-4 h-4 mr-1 p-0.5"
-                fill="var(--grass-8)"
-                stroke="var(--grass-9)"
+                fill={fillColor}
+                stroke={strokeColor}
               />
             )}
             {direction === "decrease" && (
               <TriangleIcon
                 className="w-4 h-4 mr-1 p-0.5 transform rotate-180"
-                fill="var(--red-8)"
-                stroke="var(--red-9)"
+                fill={fillColor}
+                stroke={strokeColor}
               />
             )}
             {caption}

package/src/plugins/layout/__test__/ProgressPlugin.test.ts

@@ -2,25 +2,41 @@
 import { expect, test } from "vitest";
 import { prettyTime } from "../ProgressPlugin";
 
-// examples of expected output
-test("prettyTime", () => {
-  // exact
-  expect(prettyTime(0)).toMatchInlineSnapshot('"0s"');
-  expect(prettyTime(1)).toMatchInlineSnapshot('"1s"');
-  expect(prettyTime(60)).toMatchInlineSnapshot('"1m"');
-  expect(prettyTime(60 * 60)).toMatchInlineSnapshot('"1h"');
-  expect(prettyTime(60 * 60 * 24)).toMatchInlineSnapshot('"1d"');
-
-  // decimal
-  expect(prettyTime(0.5)).toMatchInlineSnapshot('"0.5s"');
-  expect(prettyTime(1.5)).toMatchInlineSnapshot('"1.5s"');
-  expect(prettyTime(60 * 1.5)).toMatchInlineSnapshot('"1m, 30s"');
-  expect(prettyTime(60 * 60 * 1.5)).toMatchInlineSnapshot('"1h, 30m"');
-  expect(prettyTime(60 * 60 * 24 * 1.5)).toMatchInlineSnapshot('"1d, 12h"');
-
+const Cases: Array<[number, string]> = [
+  // exact values
+  [0, "0s"],
+  [1, "1s"],
+  [5, "5s"],
+  [15, "15s"],
+  [60, "1m"],
+  [100, "1m, 40s"],
+  [60 * 60, "1h"],
+  [60 * 60 * 24, "1d"],
+  [60 * 60 * 24 * 7, "1w"],
+  [60 * 60 * 24 * 8, "1w, 1d"],
+  [60 * 60 * 24 * 30, "4w, 2d"],
+  [60 * 60 * 24 * 366, "1y, 18h"],
+  [60 * 60 * 24 * 466, "1y, 3mo"],
+  // decimal values
+  [0.5, "0.5s"],
+  [1.5, "1.5s"],
+  [5.2, "5.2s"],
+  [5.33, "5.33s"],
+  [15.2, "15s"],
+  [60 * 1.5, "1m, 30s"],
+  [100.2, "1m, 40s"],
+  [60 * 60 * 1.5, "1h, 30m"],
+  [60 * 60 * 24 * 1.5, "1d, 12h"],
   // edge cases
-  expect(prettyTime(0)).toMatchInlineSnapshot('"0s"');
-  expect(prettyTime(0.0001)).toMatchInlineSnapshot('"0s"');
-  expect(prettyTime(0.001)).toMatchInlineSnapshot('"0s"');
-  expect(prettyTime(0.01)).toMatchInlineSnapshot('"0.01s"');
-});
+  [0, "0s"],
+  [0.0001, "0s"],
+  [0.001, "0s"],
+  [0.01, "0.01s"],
+];
+
+// generate one test per pair
+for (const [input, expected] of Cases) {
+  test(`prettyTime(${input}) → ${expected}`, () => {
+    expect(prettyTime(input)).toBe(expected);
+  });
+}