chore: allow minimal height for trace attachments (#32996)

This commit is contained in:
Pavel Feldman 2024-10-08 08:33:45 -07:00 committed by GitHub
parent d0f2170e21
commit 6c9823eeaf
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 18 additions and 9 deletions

View File

@ -20,7 +20,7 @@ import { ImageDiffView } from '@web/shared/imageDiffView';
import type { MultiTraceModel } from './modelUtil'; import type { MultiTraceModel } from './modelUtil';
import { PlaceholderPanel } from './placeholderPanel'; import { PlaceholderPanel } from './placeholderPanel';
import type { AfterActionTraceEventAttachment } from '@trace/trace'; import type { AfterActionTraceEventAttachment } from '@trace/trace';
import { CodeMirrorWrapper } from '@web/components/codeMirrorWrapper'; import { CodeMirrorWrapper, lineHeight } from '@web/components/codeMirrorWrapper';
import { isTextualMimeType } from '@isomorphic/mimeType'; import { isTextualMimeType } from '@isomorphic/mimeType';
import { Expandable } from '@web/components/expandable'; import { Expandable } from '@web/components/expandable';
import { linkifyText } from '@web/renderUtils'; import { linkifyText } from '@web/renderUtils';
@ -51,6 +51,11 @@ const ExpandableAttachment: React.FunctionComponent<ExpandableAttachmentProps> =
} }
}, [expanded, attachmentText, placeholder, attachment]); }, [expanded, attachmentText, placeholder, attachment]);
const snippetHeight = React.useMemo(() => {
const lineCount = attachmentText ? attachmentText.split('\n').length : 0;
return Math.min(Math.max(5, lineCount), 20) * lineHeight;
}, [attachmentText]);
const title = <span style={{ marginLeft: 5 }}> const title = <span style={{ marginLeft: 5 }}>
{linkifyText(attachment.name)} {hasContent && <a style={{ marginLeft: 5 }} href={downloadURL(attachment)}>download</a>} {linkifyText(attachment.name)} {hasContent && <a style={{ marginLeft: 5 }} href={downloadURL(attachment)}>download</a>}
</span>; </span>;
@ -62,14 +67,16 @@ const ExpandableAttachment: React.FunctionComponent<ExpandableAttachmentProps> =
<Expandable title={title} expanded={expanded} setExpanded={setExpanded} expandOnTitleClick={true}> <Expandable title={title} expanded={expanded} setExpanded={setExpanded} expandOnTitleClick={true}>
{placeholder && <i>{placeholder}</i>} {placeholder && <i>{placeholder}</i>}
</Expandable> </Expandable>
{expanded && attachmentText !== null && <CodeMirrorWrapper {expanded && attachmentText !== null && <div className='vbox' style={{ height: snippetHeight }}>
text={attachmentText} <CodeMirrorWrapper
readOnly text={attachmentText}
mimeType={attachment.contentType} readOnly
linkify={true} mimeType={attachment.contentType}
lineNumbers={true} linkify={true}
wrapLines={false}> lineNumbers={true}
</CodeMirrorWrapper>} wrapLines={false}>
</CodeMirrorWrapper>
</div>}
</>; </>;
}; };

View File

@ -28,6 +28,8 @@ export type SourceHighlight = {
export type Language = 'javascript' | 'python' | 'java' | 'csharp' | 'jsonl' | 'html' | 'css' | 'markdown'; export type Language = 'javascript' | 'python' | 'java' | 'csharp' | 'jsonl' | 'html' | 'css' | 'markdown';
export const lineHeight = 20;
export interface SourceProps { export interface SourceProps {
text: string; text: string;
language?: Language; language?: Language;