dataset-action-cell.tsx

Overview

dataset-action-cell.tsx defines a React functional component named DatasetActionCell that provides a set of interactive action buttons related to a document (dataset) record. These actions include renaming the document, previewing its metadata, downloading the file, and deleting the document. The component is designed to be used as part of a UI table or list where each row represents a document, enabling users to conveniently manage documents inline.

Key features:

• Displays action buttons with icons: rename, preview details, download, and delete.

• Disables actions when the document is being processed (running).

• Shows a hover card with formatted document metadata for preview.

• Supports conditional rendering to exclude the download button for virtual documents.

• Uses hooks and utility functions for side effects like document removal and download.

Detailed Explanation

Imports and Constants

• React and Hooks:

  • useCallback: For memoizing callback functions to prevent unnecessary re-renders.

• UI Components:

  • ConfirmDeleteDialog: Modal dialog to confirm deletion.

  • Button: Button UI component.

  • HoverCard, HoverCardTrigger, HoverCardContent: Components for showing hover-triggered popups.

• Icons:

  • Download, Eye, PenLine, Trash2 from lucide-react for visual action indicators.

• Utilities:

  • formatFileSize, formatDate: Formatters for file size and date fields.

  • downloadDocument: Function to trigger document download.

  • isParserRunning: Checks if a document’s parser is currently running.

• Custom hooks and constants:

  • useRemoveDocument: Hook to request document removal.

  • DocumentType.Virtual: Constant to identify virtual documents.

• Fields and formatting mapping:

  const Fields = ['name', 'size', 'type', 'create_time', 'update_time'];
  
  const FunctionMap = {
    size: formatFileSize,
    create_time: formatDate,
    update_time: formatDate,
  };
  

  These are used to filter and format the document metadata shown in the preview hover card.

Component: DatasetActionCell

export function DatasetActionCell({
  record,
  showRenameModal,
}: { record: IDocumentInfo } & UseRenameDocumentShowType)

Props

Internal variables

• id, run, type: Extracted from record.

• isRunning: Boolean indicating if the document parser is currently running.

• isVirtualDocument: Boolean indicating if the document is virtual (cannot be downloaded).

• removeDocument: Function from the useRemoveDocument hook to delete the document.

Callback functions

• onDownloadDocument(): Initiates download of the document by calling downloadDocument with document id and filename.

• handleRemove(): Calls removeDocument with the document id to delete it.

• handleRename(): Invokes showRenameModal passing the current document record.

All callbacks are memoized with useCallback to optimize rendering.

JSX Rendered

• Parent container: <section> with flex layout and hover opacity transition.

• Rename button:

  • Icon: PenLine

  • Disabled if isRunning

  • Calls handleRename on click

• Preview button with HoverCard:

  • Icon: Eye

  • Disabled if isRunning

  • On hover, shows a card with a list of selected fields (Fields) from the record.

  • Each field is formatted using FunctionMap if applicable.

• Download button:

  • Icon: Download

  • Only shown if the document is not virtual.

  • Disabled if isRunning

  • Calls onDownloadDocument on click.

• Delete button wrapped in ConfirmDeleteDialog:

  • Icon: Trash2

  • Disabled if isRunning

  • On confirmation, triggers handleRemove.

Usage Example

import { DatasetActionCell } from './dataset-action-cell';

// Example document record
const exampleRecord = {
  id: 'doc123',
  name: 'Sample Dataset',
  size: 1048576,
  type: DocumentType.Normal,
  create_time: '2024-05-10T12:00:00Z',
  update_time: '2024-06-01T15:30:00Z',
  run: { status: 'idle' },
};

function showRenameModal(record) {
  console.log('Rename modal shown for', record.name);
}

<DatasetActionCell record={exampleRecord} showRenameModal={showRenameModal} />;

Important Implementation Details

• Disabling Buttons During Processing:
  The component disables rename, preview, download, and delete actions when isRunning is true. This prevents user interactions that could conflict with ongoing background processing.

• HoverCard Metadata Preview:
  Instead of navigating or opening a new page, the preview button reveals a HoverCard popup showing formatted document metadata. This improves UX by providing quick info inline.

• Conditional Download Button:
  Virtual documents are excluded from the download action because they likely represent non-file-based datasets.

• ConfirmDeleteDialog Integration:
  The delete button is wrapped inside a confirmation dialog component to prevent accidental deletions.

• Use of Utility Functions:
  Functions like formatFileSize and formatDate provide consistent formatting across the UI.

Interaction with Other Parts of the System

• Hooks:

  • useRemoveDocument handles the API call or state update to remove documents.

• Utilities:

  • downloadDocument triggers file downloads, likely involving browser APIs or backend endpoints.

  • formatFileSize and formatDate ensure consistent display of file sizes and timestamps.

• Constants and Types:

  • DocumentType enumerates types of documents to adjust UI logic.

  • IDocumentInfo provides the shape of the document data this component expects.

• UI Components:

  • ConfirmDeleteDialog handles confirmation modals.

  • Button and HoverCard provide reusable UI controls consistent with the app's design system.

• Local utilities:

  • isParserRunning determines if a document is currently being processed, affecting UI state.

This component is designed to be embedded in a data table or list where documents are presented, providing inline controls for document management.

Mermaid Component Diagram

componentDiagram
    component DatasetActionCell {
      +record: IDocumentInfo
      +showRenameModal(record: IDocumentInfo): void

      +onDownloadDocument(): void
      +handleRemove(): void
      +handleRename(): void
    }

    DatasetActionCell --> Button : Rename
    DatasetActionCell --> Button : Preview (HoverCard)
    DatasetActionCell --> Button : Download (conditional)
    DatasetActionCell --> ConfirmDeleteDialog --> Button : Delete

    DatasetActionCell ..> useRemoveDocument : hook
    DatasetActionCell ..> downloadDocument : util function
    DatasetActionCell ..> formatFileSize : util function
    DatasetActionCell ..> formatDate : util function
    DatasetActionCell ..> isParserRunning : util function

Summary

dataset-action-cell.tsx provides an interactive, user-friendly component to manage dataset documents via inline action buttons. It balances UX considerations such as disabling buttons during processing, previewing metadata on hover, and confirming deletions. The component integrates tightly with the app's hooks, utilities, and design system, making it a reusable and maintainable part of the dataset management UI.