fix: json parsing with inf/nan (#7309)

Fixes "Copy as JSON" when we have inf/nan

Author: mscolnick

frontend/src/components/data-table/download-actions.tsx

@@ -12,7 +12,8 @@ import { useLocale } from "react-aria";
 import { logNever } from "@/utils/assertNever";
 import { copyToClipboard } from "@/utils/copy";
 import { downloadByURL } from "@/utils/download";
-import { jsonToTSV } from "@/utils/json/json-parser";
+import { prettyError } from "@/utils/errors";
+import { jsonParseWithSpecialChar, jsonToTSV } from "@/utils/json/json-parser";
 import { Button } from "../ui/button";
 import {
   DropdownMenu,
@@ -152,7 +153,17 @@ export const DownloadAs: React.FC<DownloadActionProps> = (props) => {
             {clipboardOptions.map((option) => (
               <DropdownMenuItem
                 key={option.label}
-                onSelect={() => handleClipboardCopy(option.format)}
+                onSelect={async () => {
+                  try {
+                    await handleClipboardCopy(option.format);
+                  } catch (error) {
+                    toast({
+                      title: "Failed to copy to clipboard",
+                      description: prettyError(error),
+                      variant: "danger",
+                    });
+                  }
+                }}
               >
                 <option.icon className="mo-dropdown-icon" />
                 <div className="flex flex-col">
@@ -171,12 +182,9 @@ export const DownloadAs: React.FC<DownloadActionProps> = (props) => {
 };
 
 function fetchJson(url: string): Promise<Record<string, unknown>[]> {
-  return fetch(url).then((res) => {
-    if (!res.ok) {
-      throw new Error(res.statusText);
-    }
-    return res.json();
-  });
+  return fetchText(url).then(
+    jsonParseWithSpecialChar<Record<string, unknown>[]>,
+  );
 }
 
 function fetchText(url: string): Promise<string> {

frontend/src/components/data-table/row-viewer-panel/row-viewer.tsx

@@ -18,6 +18,7 @@ import { useRef, useState } from "react";
 import { useLocale } from "react-aria";
 import { ColumnName } from "@/components/datasources/components";
 import { CopyClipboardIcon } from "@/components/icons/copy-icon";
+import { Spinner } from "@/components/icons/spinner";
 import { KeyboardHotkeys } from "@/components/shortcuts/renderShortcut";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -29,6 +30,7 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
+import { DelayMount } from "@/components/utils/delay-mount";
 import { useAsyncData } from "@/hooks/useAsyncData";
 import { useKeydownOnElement } from "@/hooks/useHotkey";
 import { Banner, ErrorBanner } from "@/plugins/impl/common/error-banner";
@@ -136,11 +138,9 @@ export const RowViewerPanel: React.FC<RowViewerPanelProps> = ({
 
     if (!rows) {
       return (
-        <SimpleBanner
-          kind="warn"
-          Icon={AlertTriangle}
-          message="No data available. Please report the issue."
-        />
+        <DelayMount milliseconds={200}>
+          <Spinner size="medium" centered={true} />
+        </DelayMount>
       );
     }
 

frontend/src/components/ui/table.tsx

@@ -7,7 +7,7 @@ const Table = React.forwardRef<
   HTMLTableElement,
   React.HTMLAttributes<HTMLTableElement>
 >(({ className, ...props }, ref) => (
-  <div className="w-full overflow-auto flex-1">
+  <div className="w-full overflow-auto scrollbar-thin flex-1">
     <table
       ref={ref}
       className={cn("w-full caption-bottom text-sm", className)}

frontend/src/core/websocket/useMarimoWebSocket.tsx

@@ -331,7 +331,7 @@ export function useMarimoWebSocket(opts: {
       try {
         handleMessage(e);
       } catch (error) {
-        Logger.error("Failed to handle message", error);
+        Logger.error("Failed to handle message", e.data, error);
         toast({
           title: "Failed to handle message",
           description: prettyError(error),