index.tsx

Overview

This file defines a React functional component, TestingResult, which displays the results of a testing operation on selected documents. It provides an interactive UI for users to:

Select documents for testing.
View similarity scores for document chunks.
Paginate through the testing results.
View images related to document chunks, if available.

The component heavily integrates with hooks for translation, pagination state management (with URL router sync), and asynchronous testing operations. It leverages Ant Design UI components for layout and interactivity, and uses custom utilities and SVG assets for visuals.

Detailed Explanation

Imports Summary

React & Hooks: useCallback for memoizing callback functions.
Ant Design Components: Card, Collapse, Empty, Flex, Image, Pagination, Space.
Custom Hooks:
- useTranslate: For i18n text translation.
- useGetPaginationWithRouter: For pagination state synced with router.
Utilities:
- camelCase from lodash: For converting field names to camelCase.
- api_host: Base URL for API endpoints.
- showImage: Helper to determine if an image should be shown based on document type.
SVG Icon: SelectedFilesCollapseIcon for collapse panel icon.
Child Component: SelectFiles - a component that manages the document selection UI.
Styles: CSS module imported as styles.

Constants

const similarityList: Array<{ field: keyof ITestingChunk; label: string }> = [
  { field: 'similarity', label: 'Hybrid Similarity' },
  { field: 'term_similarity', label: 'Term Similarity' },
  { field: 'vector_similarity', label: 'Vector Similarity' },
];

Defines the three similarity metrics displayed per chunk.
Each item includes the field name (matching ITestingChunk interface) and a label used for display.

Component: `ChunkTitle`

const ChunkTitle = ({ item }: { item: ITestingChunk }) => { ... }

Purpose:
Displays similarity scores for a given document chunk.

Props:

item — An object of type ITestingChunk representing a chunk of a tested document.

Functionality:

Maps over similarityList to display each similarity score as a percentage (multiplies by 100 and formats to 2 decimals).
Uses translation hook t to get localized labels for each similarity type.
Styled with circles and text labels.

Usage Example:

<Card title={<ChunkTitle item={chunk} />}>
  {/* chunk content */}
</Card>

Interface: `IProps`

Defines the props for the main component TestingResult.

Prop	Type	Description
`handleTesting`	`(documentIds?: string[]) => Promise<any>`	Async function to trigger testing on selected document IDs.
`selectedDocumentIds`	`string[]`	Array of currently selected document IDs.
`setSelectedDocumentIds`	`(ids: string[]) => void`	Setter function to update selected document IDs.
`data`	`ITestingResult \	undefined`
`loading`	`boolean \	undefined`

Component: `TestingResult`

const TestingResult = ({
  handleTesting,
  selectedDocumentIds,
  setSelectedDocumentIds,
  data,
  loading,
}: IProps) => { ... }

Purpose:
Main component that renders the testing results UI including document selection, chunk display, and pagination.

Props

handleTesting: Function to trigger testing for documents.
selectedDocumentIds: Currently selected document IDs.
setSelectedDocumentIds: Function to update selected documents.
data: Testing results containing documents, chunks, and total count.
loading: Indicates if data is loading.

Internal Variables

documents, chunks, total: Extracted from data, represent the documents tested, the chunks returned, and total number of chunks respectively.
t: Translation function scoped to 'knowledgeDetails'.
pagination, setPagination: Pagination state and setter, synced with URL routing, from useGetPaginationWithRouter().

Event Handlers

onChange(pageNumber, pageSize):
Triggered on pagination change. Calls pagination.onChange if it exists, then triggers handleTesting with currently selected documents to fetch new page data.
onTesting(ids):
Memoized with useCallback. Resets pagination to first page and calls handleTesting with new selected document IDs.

Rendered UI Structure

Collapse Panel:
Allows expanding/collapsing the document selection area.
- Header shows count of selected documents vs total.
- Contains the SelectFiles component, passing down selection handlers.
Chunks Display:
Vertically stacked cards for each chunk:
- Each card has a ChunkTitle showing similarity metrics.
- If chunk's document type supports images (showImage), displays the image from API.
- Shows chunk content with weighting.
Empty State:
If no chunks and not loading, shows Ant Design's Empty component.
Pagination:
Small-sized pagination control at bottom, controlling chunk pages.

Usage Example

<TestingResult
  handleTesting={async (ids) => {
    // Perform API call or other async testing logic
  }}
  selectedDocumentIds={['doc1', 'doc2']}
  setSelectedDocumentIds={(ids) => setSelectedDocuments(ids)}
  data={testingResultData}
  loading={isLoading}
/>

Important Implementation Details

Pagination State Sync:
Utilizes a custom hook useGetPaginationWithRouter that keeps pagination state in sync with the URL router. This allows pagination state to persist in the URL and facilitates browser navigation.
Performance Optimization:
onTesting is memoized with useCallback to avoid unnecessary re-renders or effect triggers.
Dynamic Image Rendering:
Uses a utility showImage to conditionally render images related to chunks, avoiding broken images or irrelevant displays.
Internationalization:
The use of useTranslate ensures all UI labels adapt to user language settings, enhancing global usability.
Collapse Icon:
Custom SVG icon imported and used as the expand icon for better visual branding.

Interaction with Other Parts of the System

SelectFiles Component:
This file imports and renders SelectFiles for managing document selection UI. The selected documents are passed back via setSelectedDocumentIds.
API Layer:
Uses api_host to construct URLs for chunk images.
Hooks:
- useTranslate for localized text.
- useGetPaginationWithRouter for pagination state management tied to routing.
Utilities:
- showImage to decide image rendering.
- camelCase for formatting field names for translation keys.
Interfaces:
Relies on ITestingChunk and ITestingResult interfaces for data typing, which come from the shared knowledge database interface definitions.

Mermaid Component Diagram

componentDiagram
    component TestingResult {
      +handleTesting(documentIds?: string[]): Promise<any>
      +selectedDocumentIds: string[]
      +setSelectedDocumentIds(ids: string[]): void
      +data?: ITestingResult
      +loading?: boolean
    }
    component ChunkTitle {
      +item: ITestingChunk
    }
    component SelectFiles {
      +setSelectedDocumentIds(ids: string[]): void
      +handleTesting(ids: string[]): void
    }
    TestingResult --> ChunkTitle : renders for each chunk
    TestingResult --> SelectFiles : embeds for file selection
    TestingResult ..> useTranslate : uses
    TestingResult ..> useGetPaginationWithRouter : uses
    ChunkTitle ..> useTranslate : uses
    TestingResult ..> api_host : uses for image URLs
    TestingResult ..> showImage : uses for conditional image display

Summary

This file's primary responsibility is to present testing results of document chunks with similarity metrics, enable document selection, and provide pagination. It connects UI components, hooks, and utilities cohesively into a responsive and localized React component. The design and implementation facilitate scalability and integration into a bigger knowledge testing application or system.