feat: add max width for table cells (#387)

packages/graphic-walker/package.json

@@ -58,6 +58,7 @@
  "@radix-ui/react-context-menu": "^2.1.5",
  "@radix-ui/react-dialog": "^1.0.5",
  "@radix-ui/react-dropdown-menu": "^2.0.6",
+ "@radix-ui/react-hover-card": "^1.0.7",
  "@radix-ui/react-icons": "^1.3.0",
  "@radix-ui/react-label": "^2.0.2",
  "@radix-ui/react-popover": "^1.0.7",

packages/graphic-walker/src/components/dataTable/index.tsx

@@ -11,11 +11,12 @@ import { PureFilterEditDialog } from '../../fields/filterField/filterEditDialog'
 import { BarsArrowDownIcon, BarsArrowUpIcon, FunnelIcon } from '@heroicons/react/24/outline';
 import { ComputationContext } from '../../store';
 import { parsedOffsetDate } from '../../lib/op/offset';
-import { formatDate } from '../../utils';
+import { cn, formatDate } from '../../utils';
 import { FieldProfiling } from './profiling';
 import { addFilterForQuery, createFilter } from '../../utils/workflow';
 import { Button, buttonVariants } from '../ui/button';
 import { Badge } from '../ui/badge';
+import { HoverCard, HoverCardContent, HoverCardTrigger } from '../ui/hover-card';
 
 interface DataTableProps {
  /** page limit */
@@ -164,12 +165,66 @@ function useFilters(metas: IMutField[]) {
  return { filters, options, editingFilterIdx, onSelectFilter, onDeleteFilter, onWriteFilter, onClose };
 }
 
-function FieldValue(props: { field: IMutField; item: IRow; displayOffset?: number }) {
+function fieldValue(props: { field: IMutField; item: IRow; displayOffset?: number }) {
  const { field, item } = props;
  if (field.semanticType === 'temporal') {
- return <>{formatDate(parsedOffsetDate(props.displayOffset, field.offset)(item[field.fid]))}</>;
+ return formatDate(parsedOffsetDate(props.displayOffset, field.offset)(item[field.fid]));
  }
- return <>{`${item[field.fid]}`}</>;
+ return `${item[field.fid]}`;
+}
+
+function CopyButton(props: { value: string }) {
+ const [copied, setCopied] = useState(false);
+ useEffect(() => {
+ if (copied) {
+ const timer = setTimeout(() => {
+ setCopied(false);
+ }, 2000);
+ return () => {
+ clearTimeout(timer);
+ };
+ }
+ }, [copied]);
+ return (
+ <Button
+ variant="secondary"
+ className="h-6 px-2 text-xs w-14"
+ size="sm"
+ onClick={() => {
+ try {
+ navigator.clipboard.writeText(props.value);
+ setCopied(true);
+ } catch (e) {
+ console.error(e);
+ }
+ }}
+ disabled={copied}
+ >
+ {copied ? 'Copied' : 'Copy'}
+ </Button>
+ );
+}
+
+function TruncateDector(props: { value: string }) {
+ const ref = useRef<HTMLAnchorElement>(null);
+ const [isTruncate, setIsTruncate] = useState(false);
+ const [open, setOpen] = useState(false);
+ useEffect(() => {
+ if (ref.current) {
+ setIsTruncate(ref.current.offsetWidth < ref.current.scrollWidth);
+ }
+ }, [ref.current]);
+ return (
+ <HoverCard open={open && isTruncate} onOpenChange={setOpen}>
+ <HoverCardTrigger ref={ref} className="truncate block">
+ {props.value}
+ </HoverCardTrigger>
+ <HoverCardContent className="flex space-x-2 items-center w-fit py-2 px-3">
+ <p className="text-xs max-w-[360px] line-clamp-4 break-all">{props.value}</p>
+ <CopyButton value={props.value} />
+ </HoverCardContent>
+ </HoverCard>
+ );
 }
 
 const DataTable: React.FC<DataTableProps> = (props) => {
@@ -442,11 +497,17 @@ const DataTable: React.FC<DataTableProps> = (props) => {
  <tbody className="divide-y divide-border bg-background font-mono">
  {rows.map((row, index) => (
  <tr className="divide-x divide-border" key={index}>
- {metas.map((field) => (
- <td key={field.fid + index} className={getHeaderType(field) + ' whitespace-nowrap py-2 px-4 text-xs text-muted-foreground'}>
- <FieldValue field={field} item={row} displayOffset={displayOffset} />
- </td>
- ))}
+ {metas.map((field) => {
+ const value = fieldValue({ field, item: row, displayOffset });
+ return (
+ <td
+ key={field.fid + index}
+ className={getHeaderType(field) + ' whitespace-nowrap py-2 px-4 text-xs text-muted-foreground max-w-[240px]'}
+ >
+ <TruncateDector value={value} />
+ </td>
+ );
+ })}
  </tr>
  ))}
  </tbody>

packages/graphic-walker/src/components/dataTable/profiling.tsx

@@ -52,7 +52,7 @@ function NominalProfiling({ computation, field, valueRenderer = (s) => `${s}` }:
  return (
  <Tooltip key={idx} content={displayValue}>
  <div className="w-full rounded-md px-2 py-1 hover:bg-accent flex justify-between space-x-2">
- <div className="min-w-[0px] flex-shrink whitespace-nowrap text-ellipsis overflow-hidden">{displayValue}</div>
+ <div className="min-w-[0px] flex-shrink truncate max-w-[180px]">{displayValue}</div>
  <div className="flex-shrink-0">{Math.floor((100 * count) / meta.total)}%</div>
  </div>
  </Tooltip>

packages/graphic-walker/src/components/ui/hover-card.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
+
+import { cn } from '@/utils';
+import { portalContainerContext } from '@/store/theme';
+
+const HoverCard = HoverCardPrimitive.Root;
+
+const HoverCardTrigger = HoverCardPrimitive.Trigger;
+
+const HoverCardContent = React.forwardRef<
+ React.ElementRef<typeof HoverCardPrimitive.Content>,
+ React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
+>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
+ <HoverCardPrimitive.Portal container={React.useContext(portalContainerContext)}>
+ <HoverCardPrimitive.Content
+ ref={ref}
+ align={align}
+ sideOffset={sideOffset}
+ className={cn(
+ 'z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+ className
+ )}
+ {...props}
+ />
+ </HoverCardPrimitive.Portal>
+));
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
+
+export { HoverCard, HoverCardTrigger, HoverCardContent };

yarn.lock

@@ -1297,6 +1297,22 @@
  "@radix-ui/react-primitive" "1.0.3"
  "@radix-ui/react-use-callback-ref" "1.0.1"
 
+"@radix-ui/react-hover-card@^1.0.7":
+ version "1.0.7"
+ resolved "https://registry.yarnpkg.com/@radix-ui/react-hover-card/-/react-hover-card-1.0.7.tgz#684bca2504432566357e7157e087051aa3577948"
+ integrity sha512-OcUN2FU0YpmajD/qkph3XzMcK/NmSk9hGWnjV68p6QiZMgILugusgQwnLSDs3oFSJYGKf3Y49zgFedhGh04k9A==
+ dependencies:
+ "@babel/runtime" "^7.13.10"
+ "@radix-ui/primitive" "1.0.1"
+ "@radix-ui/react-compose-refs" "1.0.1"
+ "@radix-ui/react-context" "1.0.1"
+ "@radix-ui/react-dismissable-layer" "1.0.5"
+ "@radix-ui/react-popper" "1.1.3"
+ "@radix-ui/react-portal" "1.0.4"
+ "@radix-ui/react-presence" "1.0.1"
+ "@radix-ui/react-primitive" "1.0.3"
+ "@radix-ui/react-use-controllable-state" "1.0.1"
+
 "@radix-ui/react-icons@^1.3.0":
  version "1.3.0"
  resolved "https://registry.yarnpkg.com/@radix-ui/react-icons/-/react-icons-1.3.0.tgz#c61af8f323d87682c5ca76b856d60c2312dbcb69"
@@ -2060,7 +2076,7 @@
  "@types/react" "*"
  "@types/reactcss" "*"
 
-"@types/react-dom@*", "@types/react-dom@^18.2.15", "@types/react-dom@^18.x":
+"@types/react-dom@*", "@types/react-dom@^18.2.15":
  version "18.3.0"
  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.3.0.tgz#0cbc818755d87066ab6ca74fbedb2547d74a82b0"
  integrity sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==
@@ -2074,7 +2090,7 @@
  dependencies:
  "@types/react" "*"
 
-"@types/react@*", "@types/react@^18.2.37", "@types/react@^18.x":
+"@types/react@*", "@types/react@^18.2.37":
  version "18.3.2"
  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.3.2.tgz#462ae4904973bc212fa910424d901e3d137dbfcd"
  integrity sha512-Btgg89dAnqD4vV7R3hlwOxgqobUQKgx3MmrQRi0yYbs/P0ym8XozIAlkqVilPqHQwXs4e9Tf63rrCgl58BcO4w==