index.tsx

Overview

This file defines a React functional component named TestingControl. The component provides a user interface for conducting knowledge testing within an application, likely related to knowledge graphs or semantic search. Its primary functionality includes:

• Allowing users to input a test question.

• Adjusting similarity and reranking parameters via sliders and toggles.

• Enabling options such as using a knowledge graph and cross-language support.

• Submitting the test question for processing/testing on selected documents.

• Displaying a label word cloud visualization related to test content or results.

The UI uses Ant Design (antd) components extensively for layout and form controls. The component integrates with application state via custom hooks (useTranslate for i18n, useChunkIsTesting for loading state) and relies on props from a parent component, such as form management and testing handler functions.

Detailed Explanation

Component: TestingControl

Type Definitions

• FieldType
  Represents the structure of the form fields used in the testing form:

  type FieldType = {
    similarity_threshold?: number;
    vector_similarity_weight?: number;
    question: string;
  };
  

  • similarity_threshold (optional): Likely a numeric value to control similarity filter.

  • vector_similarity_weight (optional): Numeric weight controlling vector similarity importance.

  • question: The test query input by the user.

• IProps
  The props interface for TestingControl:

  interface IProps {
    form: FormInstance;
    handleTesting: (documentIds?: string[]) => Promise<any>;
    selectedDocumentIds: string[];
  }
  

  • form: Ant Design's FormInstance for managing form state and validation.

  • handleTesting: Async function invoked when submitting the test; accepts optional document IDs.

  • selectedDocumentIds: Array of strings identifying documents selected for testing.

Function Signature

const TestingControl = ({
  form,
  handleTesting,
  selectedDocumentIds,
}: IProps) => { ... }

Internal Logic and Hooks

• question: Uses Form.useWatch to monitor the current value of the question field in the form, preserving state across renders.

• loading: Boolean flag retrieved from useChunkIsTesting hook, indicating if a test is currently processing.

• t: Translation function from useTranslate('knowledgeDetails') for localized strings.

Computed Variables

• buttonDisabled: Determines whether the "Test" button should be disabled. It is disabled if the question is empty or only whitespace.

Event Handlers

• onClick: Calls handleTesting with the currently selected document IDs when the test button is pressed.

JSX Structure

• Wrapper <section> with CSS class testingControlWrapper.

• Title and description rendered using translated strings (t('testing') and t('testingDescription')).

• A vertical Ant Design Form named "testing" controlled by the passed form instance.

• Inside the form:

  • <SimilaritySlider> component with tooltip enabled.

  • <Rerank> component for reranking options.

  • <UseKnowledgeGraphItem> component with a prop filedName (likely a typo for fieldName).

  • <CrossLanguageItem> component for cross-language testing options.

  • A <Card> containing:

    • A required Input.TextArea bound to the question field.

    • An aligned submit <Button> that triggers testing, disabled if no valid question and shows loading state.

• Below the form, a <LabelWordCloud> component is rendered.

• A commented-out section hints at a potential future implementation of a test history log with cards and deletion controls.

Usage Example

import { Form } from 'antd';
import TestingControl from './index';

const SomeParentComponent = () => {
  const [form] = Form.useForm();
  const selectedDocumentIds = ['doc1', 'doc2'];

  const handleTesting = async (docIds?: string[]) => {
    // Call API or perform testing logic with docIds and form values
    console.log('Testing documents:', docIds);
  };

  return (
    <TestingControl
      form={form}
      handleTesting={handleTesting}
      selectedDocumentIds={selectedDocumentIds}
    />
  );
};

Implementation Details and Algorithms

• Form State Management: Utilizes Ant Design's Form component and hooks for declarative form control and validation.

• Dynamic Button State: Button enabling logic depends on the presence and content of the question input.

• Loading State Awareness: Uses a custom hook (useChunkIsTesting) to disable the submit button and show a spinner during asynchronous test operations.

• Internationalization: All user-facing text is retrieved via a translation hook, ensuring multi-language support.

• Component Composition: The form integrates multiple specialized subcomponents:

  • SimilaritySlider adjusts similarity threshold parameters.

  • Rerank presumably controls result reranking options.

  • UseKnowledgeGraphItem toggles knowledge graph usage.

  • CrossLanguageItem enables cross-language testing.

  • LabelWordCloud visualizes label frequencies or importance.

No complex algorithms appear directly in this file; it serves as a container and orchestrator of UI elements and interactions.

Interaction with Other System Parts

• Parent Components: Supplies the Ant Design form instance, selected documents, and the testing handler function.

• Hooks:

  • useTranslate for localization.

  • useChunkIsTesting for tracking asynchronous testing state.

• Child Components:
  Imported from other modules, these components handle specific controls or visualizations:

  • Rerank (@/components/rerank)

  • SimilaritySlider (@/components/similarity-slider)

  • UseKnowledgeGraphItem (@/components/use-knowledge-graph-item)

  • CrossLanguageItem (@/components/cross-language-item)

  • LabelWordCloud (local import ./label-word-cloud)

• Styling: CSS Modules style imported from ./index.less scopes styles locally.

• Ant Design: Provides UI primitives and form management.

Mermaid Component Diagram

componentDiagram
    component TestingControl {
      +form: FormInstance
      +handleTesting(documentIds?: string[]): Promise<any>
      +selectedDocumentIds: string[]
      -- Methods --
      +onClick()
    }

    component SimilaritySlider
    component Rerank
    component UseKnowledgeGraphItem
    component CrossLanguageItem
    component LabelWordCloud

    TestingControl --> SimilaritySlider : includes
    TestingControl --> Rerank : includes
    TestingControl --> UseKnowledgeGraphItem : includes
    TestingControl --> CrossLanguageItem : includes
    TestingControl --> LabelWordCloud : includes

Summary

This file index.tsx is a React component focused on rendering a testing control panel for knowledge testing functionality. It composes various specialized UI components, manages form state and validation with Ant Design, supports internationalization, and handles asynchronous testing state. It acts as the interface through which users input test queries and configure parameters before submitting tests against selected documents.