@marimo-team/frontend 0.24.1-dev32 → 0.24.1-dev35

package/src/components/data-table/columns.tsx

@@ -7,12 +7,14 @@ const PopoverClose = PopoverPrimitive.Close;
 
 import type { Column, ColumnDef } from "@tanstack/react-table";
 import { formatDate, isValid } from "date-fns";
+import { useRef } from "react";
 import { useLocale, useNumberFormatter } from "react-aria";
 import { WithLocale } from "@/core/i18n/with-locale";
 import type { DataType } from "@/core/kernel/messages";
 import type { CalculateTopKRows } from "@/plugins/impl/DataTablePlugin";
 import { cn } from "@/utils/cn";
 import { type DateFormat, exactDateTime, getDateFormat } from "@/utils/dates";
+import { Events } from "@/utils/events";
 import { Logger } from "@/utils/Logger";
 import { Maps } from "@/utils/maps";
 import { maxFractionalDigits } from "@/utils/numbers";
@@ -382,9 +384,10 @@ const PopoutColumn = ({
   rawStringValue,
   edges,
   contentClassName,
-  buttonText,
+  scrollable = false,
   wrapped,
   children,
+  buttonText,
 }: {
   cellStyles?: string;
   selectCell?: () => void;
@@ -393,10 +396,12 @@ const PopoutColumn = ({
   // still use `rawStringValue`. Middle is sliced from `rawStringValue`.
   edges?: { leading: string; trailing: string };
   contentClassName?: string;
-  buttonText?: string;
+  scrollable?: boolean;
   wrapped?: boolean;
+  buttonText?: string;
   children: React.ReactNode;
 }) => {
+  const triggerRef = useRef<HTMLButtonElement>(null);
   const hasEdgeWhitespace =
     edges !== undefined &&
     (edges.leading.length > 0 || edges.trailing.length > 0);
@@ -412,6 +417,7 @@ const PopoutColumn = ({
     <EmotionCacheProvider container={null}>
       <Popover>
         <PopoverTrigger
+          ref={triggerRef}
           className={cn(cellStyles, "max-w-fit outline-hidden")}
           onClick={selectCell}
           onMouseDown={(e) => {
@@ -432,29 +438,77 @@ const PopoutColumn = ({
           </span>
         </PopoverTrigger>
         <PopoverContent
-          className={contentClassName}
+          className={cn(
+            contentClassName,
+            scrollable && "flex flex-col overflow-hidden",
+          )}
           align="start"
           alignOffset={10}
+          onInteractOutside={(event) => {
+            // Radix sees the shadow host as the target. Resolve the original
+            // target so pointer-down does not dismiss before click toggles.
+            const target = Events.composedTarget(event.detail.originalEvent);
+            if (triggerRef.current?.contains(target)) {
+              event.preventDefault();
+            }
+          }}
         >
-          <div className="absolute top-2 right-2">
+          <div
+            className={cn(
+              "flex -mt-3 -mr-2",
+              scrollable ? "shrink-0 justify-end" : "float-right",
+            )}
+          >
             <CopyClipboardIcon
               value={rawStringValue}
-              className="w-2.5 h-2.5"
+              className="size-3 hover:text-link"
+              buttonClassName="flex size-5 items-center justify-center"
               tooltip={false}
             />
-            <PopoverClose>
-              <Button variant="link" size="xs">
+            <PopoverClose asChild={true}>
+              <Button
+                variant="link"
+                size="xs"
+                className={cn("size-5 p-0", !buttonText && "ml-1.5 mr-1")}
+                aria-label="Close"
+              >
                 {buttonText ?? "Close"}
               </Button>
             </PopoverClose>
           </div>
-          {children}
+          {scrollable ? (
+            <div className="min-h-0 overflow-auto">{children}</div>
+          ) : (
+            children
+          )}
         </PopoverContent>
       </Popover>
     </EmotionCacheProvider>
   );
 };
 
+/**
+ * Parse a string that holds a JSON object or array document.
+ * Returns `undefined` for everything else, including JSON scalars,
+ * so ordinary text keeps its plain rendering.
+ */
+function parseJsonDocument(text: string): unknown {
+  const trimmedText = text.trim();
+
+  const first = trimmedText[0];
+  const last = trimmedText[trimmedText.length - 1];
+  const isBracketPair =
+    (first === "{" && last === "}") || (first === "[" && last === "]");
+  if (!isBracketPair) {
+    return undefined;
+  }
+  try {
+    return JSON.parse(trimmedText) as unknown;
+  } catch {
+    return undefined;
+  }
+}
+
 function isPrimitiveOrNullish(value: unknown): boolean {
   if (value == null) {
     return true;
@@ -639,6 +693,28 @@ export function renderCellValue<TData, TValue>({
       splitLeadingTrailingWhitespace(stringValue);
     const hasEdgeWhitespace = leading.length > 0 || trailing.length > 0;
 
+    // A str cell that holds a JSON document opens the same JSON viewer as
+    // native list/struct cells.
+    const jsonDocument = parseJsonDocument(middle);
+    if (jsonDocument !== undefined) {
+      return (
+        <PopoutColumn
+          cellStyles={cellStyles}
+          selectCell={selectCell}
+          rawStringValue={stringValue}
+          edges={{ leading, trailing }}
+          wrapped={isWrapped}
+        >
+          <JsonOutput
+            data={jsonDocument}
+            format="tree"
+            valueTypes="json"
+            className="max-h-64"
+          />
+        </PopoutColumn>
+      );
+    }
+
     // Parse only the inner content for URL detection so URLDetector doesn't
     // split on the whitespace padding.
     const parts = parseContent(hasEdgeWhitespace ? middle : stringValue);
@@ -662,9 +738,10 @@ export function renderCellValue<TData, TValue>({
         selectCell={selectCell}
         rawStringValue={stringValue}
         edges={{ leading, trailing }}
-        contentClassName="max-h-64 overflow-auto whitespace-pre-wrap wrap-break-word text-sm w-96"
-        buttonText="X"
+        contentClassName="max-h-64 whitespace-pre-wrap wrap-break-word text-sm w-96"
+        scrollable={true}
         wrapped={isWrapped}
+        buttonText="X"
       >
         <MarkdownUrlDetector
           content={stringValue}