mirror of
https://github.com/mountain-loop/yaak.git
synced 2026-08-13 07:02:09 +02:00
Gregory Schier
4a3af02eb6
A response body on one enormous line, typically base64 image data in JSON, stalls the UI. Cost tracks the longest line rather than the document size, because soft wrap has to measure a line end to end to find its break points. Read-only editors now collapse over-long lines to a placeholder that opens the full value in a paged dialog. Tokens over 5k chars collapse individually where there is a grammar, so a minified body keeps its keys visible; anything still past column 10k is collapsed too, which needs no grammar. The document is untouched, so copy, filter and save still see the full text. Also replaces the whole-document md5 behind the editor state cache with a sampled fingerprint. It ran on every editor update and again on restore. Measured in WKWebView, per render pass: 1MB single line 221ms -> 51ms 3MB single line 968ms -> 138ms 3MB switch away and back 265ms -> 37ms
72 lines
2.3 KiB
TypeScript
72 lines
2.3 KiB
TypeScript
import { HStack } from "@yaakapp-internal/ui";
|
|
import { useState } from "react";
|
|
import { showDialog } from "../lib/dialog";
|
|
import { CopyButton } from "./CopyButton";
|
|
import { IconButton } from "./core/IconButton";
|
|
|
|
/**
|
|
* How much of the value to render at once. Rendering the whole thing would hit exactly the
|
|
* layout cost this dialog exists to avoid, so it pages instead.
|
|
*/
|
|
const PAGE_CHARS = 20_000;
|
|
|
|
interface Props {
|
|
value: string;
|
|
}
|
|
|
|
export function LargeValueDialog({ value }: Props) {
|
|
const [page, setPage] = useState(0);
|
|
const pageCount = Math.max(1, Math.ceil(value.length / PAGE_CHARS));
|
|
const start = page * PAGE_CHARS;
|
|
const slice = value.slice(start, start + PAGE_CHARS);
|
|
|
|
return (
|
|
<div className="grid grid-rows-[auto_minmax(0,1fr)] gap-3 h-full">
|
|
<HStack space={2} className="flex-wrap">
|
|
<span className="text-text-subtle text-sm tabular-nums">
|
|
{value.length.toLocaleString()} characters
|
|
</span>
|
|
{pageCount > 1 && (
|
|
<HStack space={1} alignItems="center">
|
|
<IconButton
|
|
size="sm"
|
|
variant="border"
|
|
icon="chevron_left"
|
|
title="Previous page"
|
|
disabled={page === 0}
|
|
onClick={() => setPage((p) => Math.max(0, p - 1))}
|
|
/>
|
|
<span className="text-text-subtle text-sm tabular-nums">
|
|
{page + 1} / {pageCount}
|
|
</span>
|
|
<IconButton
|
|
size="sm"
|
|
variant="border"
|
|
icon="chevron_right"
|
|
title="Next page"
|
|
disabled={page >= pageCount - 1}
|
|
onClick={() => setPage((p) => Math.min(pageCount - 1, p + 1))}
|
|
/>
|
|
</HStack>
|
|
)}
|
|
<div className="ml-auto">
|
|
<CopyButton size="xs" variant="border" color="secondary" text={value} />
|
|
</div>
|
|
</HStack>
|
|
<div className="overflow-auto bg-surface-highlight rounded-md p-3">
|
|
<div className="font-mono text-sm whitespace-pre-wrap break-all select-auto">{slice}</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
LargeValueDialog.show = (value: string) => {
|
|
showDialog({
|
|
id: "large-value",
|
|
title: "Large Value",
|
|
size: "lg",
|
|
className: "h-[calc(100vh-10rem)] max-h-200!",
|
|
render: () => <LargeValueDialog value={value} />,
|
|
});
|
|
};
|