Stretch type tags to fill available space (#2635)

chaiNNer-org · Feb 29, 2024 · b721c94 · b721c94
1 parent 2f0da37
commit b721c94
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 29 deletions.
diff --git a/src/renderer/components/TypeTag.tsx b/src/renderer/components/TypeTag.tsx
@@ -265,6 +265,7 @@ export const TypeTag = memo(
             <Tag
                 bgColor="var(--tag-bg)"
                 color="var(--tag-fg)"
+                display="inline-block"
                 fontSize="x-small"
                 fontStyle={isOptional ? 'italic' : undefined}
                 height="15px"
@@ -287,39 +288,54 @@ export const TypeTag = memo(
 export interface TypeTagsProps {
     type: Type;
     isOptional: boolean;
+    longText?: boolean;
 }
 
 const Punctuation = memo(({ children }: React.PropsWithChildren<unknown>) => {
     return <span style={{ opacity: '50%' }}>{children}</span>;
 });
 
-const TagRenderer = memo(({ tag }: { tag: TagValue }) => {
+interface TagRendererProps {
+    tag: TagValue;
+    longText: boolean;
+}
+const TagRenderer = memo(({ tag, longText }: TagRendererProps) => {
     const { kind, value } = tag;
 
     let tt: string | undefined;
     let text: NonNullable<ReactNode>;
+    let direction: 'ltr' | 'rtl' = 'ltr';
 
     switch (kind) {
         case 'path': {
             tt = value;
-            const maxLength = 14;
-            text = (
-                <>
-                    {value.length > maxLength && <Punctuation>…</Punctuation>}
-                    {value.slice(Math.max(0, value.length - maxLength))}
-                </>
-            );
+            if (longText) {
+                text = value;
+                direction = 'rtl';
+            } else {
+                const maxLength = 14;
+                text = (
+                    <>
+                        {value.length > maxLength && <Punctuation>…</Punctuation>}
+                        {value.slice(Math.max(0, value.length - maxLength))}
+                    </>
+                );
+            }
             break;
         }
         case 'string': {
             tt = value;
-            const maxLength = 16;
-            text = (
-                <>
-                    {value.slice(0, maxLength)}
-                    {value.length > maxLength && <Punctuation>…</Punctuation>}
-                </>
-            );
+            if (longText) {
+                text = value;
+            } else {
+                const maxLength = 16;
+                text = (
+                    <>
+                        {value.slice(0, maxLength)}
+                        {value.length > maxLength && <Punctuation>…</Punctuation>}
+                    </>
+                );
+            }
             break;
         }
         case 'literal': {
@@ -344,12 +360,22 @@ const TagRenderer = memo(({ tag }: { tag: TagValue }) => {
             px={2}
             textAlign="center"
         >
-            <TypeTag>{text}</TypeTag>
+            {longText ? (
+                <TypeTag
+                    overflow="hidden"
+                    style={{ direction }}
+                    textOverflow="ellipsis"
+                >
+                    {text}
+                </TypeTag>
+            ) : (
+                <TypeTag>{text}</TypeTag>
+            )}
         </Tooltip>
     );
 });
 
-export const TypeTags = memo(({ type, isOptional }: TypeTagsProps) => {
+export const TypeTags = memo(({ type, isOptional, longText = false }: TypeTagsProps) => {
     const { t } = useTranslation();
     const tags = getTypeText(withoutNull(type));
 
@@ -358,6 +384,7 @@ export const TypeTags = memo(({ type, isOptional }: TypeTagsProps) => {
             {tags.map((tag) => (
                 <TagRenderer
                     key={`${tag.kind};${tag.value}`}
+                    longText={longText}
                     tag={tag}
                 />
             ))}

diff --git a/src/renderer/components/outputs/GenericOutput.tsx b/src/renderer/components/outputs/GenericOutput.tsx
@@ -1,26 +1,23 @@
-import { Center, Flex, Spacer, Text } from '@chakra-ui/react';
+import { Flex, Spacer, Text } from '@chakra-ui/react';
 import { memo } from 'react';
 import { TypeTags } from '../TypeTag';
 import { OutputProps } from './props';
 
 export const GenericOutput = memo(({ output, type }: OutputProps) => {
     return (
         <Flex
-            h="full"
-            minH="2rem"
+            alignItems="center"
+            h="2rem"
+            style={{ contain: 'layout size' }}
             verticalAlign="middle"
             w="full"
         >
             <Spacer />
-            <Center
-                h="2rem"
-                verticalAlign="middle"
-            >
-                <TypeTags
-                    isOptional={false}
-                    type={type}
-                />
-            </Center>
+            <TypeTags
+                longText
+                isOptional={false}
+                type={type}
+            />
             <Text
                 h="full"
                 lineHeight="2rem"