dataset-card.tsx

Overview

The dataset-card.tsx file defines two React functional components, DatasetCard and SeeAllCard, which are used to display dataset information and navigation options within a user interface. These components are part of a system that manages and presents datasets (referred to as "knowledge" entities) and provide interactive elements such as dropdown menus, badges, and navigation hooks.

• DatasetCard displays information about a single dataset, including dataset metadata, a description of the number of files it contains, and UI controls for additional actions (like renaming or other dataset-specific operations).

• SeeAllCard provides a simple card UI element that allows users to navigate to a full list of all datasets.

This file heavily interacts with UI components (HomeCard, MoreButton, SharedBadge, Card, CardContent), hooks (useNavigatePage, useRenameDataset), and interfaces (IKnowledge) that are part of a larger application ecosystem.

Components and Functions

1. DatasetCard

Description

DatasetCard is a React component that renders a card representing a single dataset. It shows dataset details, a badge with the dataset's nickname, and a dropdown menu for additional dataset actions. Clicking the card navigates the user to the detailed page of the dataset.

Props

type DatasetCardProps = {
  dataset: IKnowledge;
} & Pick<ReturnType<typeof useRenameDataset>, 'showDatasetRenameModal'>;

• dataset (IKnowledge): The dataset object containing all relevant information such as id, doc_num (number of files), and nickname.

• showDatasetRenameModal (function): A callback function to open a modal for renaming the dataset, provided by the useRenameDataset hook.

Usage

<DatasetCard
  dataset={myDataset}
  showDatasetRenameModal={handleRenameModalOpen}
/>

Behavior

• Uses useNavigatePage hook to get navigateToDataset function.

• Creates a description string displaying the number of files in the dataset using internationalization via the t function.

• Renders a HomeCard component with:

  • Dataset data, including description.

  • A "more" dropdown menu (DatasetDropdown) wrapping a MoreButton component.

  • A SharedBadge displaying the dataset nickname.

  • On-click handler to navigate to the dataset detail page.

2. SeeAllCard

Description

SeeAllCard renders a card UI element labeled "See All" with a right arrow icon. When clicked, it navigates the user to the full list of datasets.

Props

• None.

Usage

<SeeAllCard />

Behavior

• Uses useNavigatePage hook to get navigateToDatasetList function.

• Renders a Card component styled with fixed width and height.

• Inside the card, a CardContent component shows the "See All" label and a right-pointing chevron icon.

• Clicking the card triggers navigation to the datasets list page.

Key Implementation Details

• Internationalization: The file uses the t function from i18next to translate the string 'knowledgeDetails.files' dynamically. This allows the description text to be localized.

• Navigation Hooks: The useNavigatePage hook abstracts navigation logic, providing functions to navigate to dataset details or dataset lists.

• Dropdown Menu: The DatasetDropdown component wraps the MoreButton to provide a dropdown for additional dataset actions, including renaming.

• Composition: Instead of directly coding UI elements, this file composes reusable components (HomeCard, SharedBadge, MoreButton, Card, CardContent) to build the UI, promoting modularity and consistency.

Interactions with Other Parts of the Application

• UI Components:

  • HomeCard displays the dataset card layout.

  • MoreButton is the trigger button for the dropdown menu.

  • SharedBadge shows the dataset nickname as a badge.

  • Card and CardContent are used for the "See All" card layout.

• Hooks:

  • useNavigatePage provides navigation functions (navigateToDataset, navigateToDatasetList).

  • useRenameDataset supplies the showDatasetRenameModal function for renaming datasets.

• Interfaces:

  • IKnowledge defines the data structure for a dataset.

• Dropdown and Rename Logic:

  • DatasetDropdown wraps the dropdown menu logic and options related to dataset actions.

The components in this file are likely used within a dashboard or homepage to list datasets and allow users to manage or explore them.

Visual Diagram

componentDiagram
    direction TB
    DatasetCard --> HomeCard : renders
    DatasetCard --> DatasetDropdown : uses
    DatasetDropdown --> MoreButton : wraps
    DatasetCard --> SharedBadge : displays badge
    DatasetCard --> useNavigatePage : uses navigateToDataset()
    DatasetCard --> useRenameDataset : uses showDatasetRenameModal()
    SeeAllCard --> Card : renders
    SeeAllCard --> CardContent : renders inside Card
    SeeAllCard --> useNavigatePage : uses navigateToDatasetList()

Summary

Both components rely on navigation hooks and modular UI components to provide a clean, user-friendly interface for dataset management.

Example Usage Snippet

import { DatasetCard, SeeAllCard } from './dataset-card';
import { useRenameDataset } from './use-rename-dataset';

function DatasetList({ datasets }: { datasets: IKnowledge[] }) {
  const { showDatasetRenameModal } = useRenameDataset();

  return (
    <div className="dataset-list">
      {datasets.map(ds => (
        <DatasetCard 
          key={ds.id} 
          dataset={ds} 
          showDatasetRenameModal={showDatasetRenameModal} 
        />
      ))}
      <SeeAllCard />
    </div>
  );
}

This example demonstrates rendering multiple DatasetCard components with a SeeAllCard at the end, providing navigation and management capabilities for datasets.

End of Documentation for dataset-card.tsx