index.tsx

Overview

This file defines a React functional component, GoogleScholarForm, which renders a form interface for configuring search parameters tailored to Google Scholar data queries. The form includes inputs for sorting options, year range selection using custom year pickers, toggling patent inclusion, and dynamic variable input. It leverages Ant Design (antd) components for UI elements and integrates with custom hooks and components (useTranslate, useBuildSortOptions, DynamicInputVariable, TopNItem) to provide localized labels, sort option building, and dynamic input management.

Additionally, the file defines a reusable YearPicker component, a wrapper around Ant Design's DatePicker configured to select only years, with logic to convert between dayjs objects and plain year numbers suitable for backend storage.

Detailed Component and Function Documentation

YearPicker Component

const YearPicker = ({
  onChange,
  value,
}: {
  onChange?: (val: number | undefined) => void;
  value?: number | undefined;
}) => { ... }

Purpose

A specialized date picker component that allows users to select only the year (not month or day). It handles the conversion between the display format (dayjs objects) and a simple number (YYYY), which is more suitable for backend processing and storage.

Props

Behavior

• Converts the incoming value (number) to a dayjs object for compatibility with DatePicker.

• On change, converts the selected dayjs year back to a number and calls onChange.

• If no year is selected, passes undefined to onChange.

Usage Example

<YearPicker
  value={2023}
  onChange={(year) => console.log("Selected year:", year)}
/>

GoogleScholarForm Component

const GoogleScholarForm = ({ onValuesChange, form, node }: IOperatorForm) => { ... }

Purpose

This is the main form component for configuring Google Scholar search query parameters. It allows users to:

• Input dynamic variables related to the search node.

• Specify the number of top results to retrieve.

• Choose a sorting criterion.

• Select a year range (low and high) to filter results.

• Toggle whether to include patents in the search.

Props

GoogleScholarForm conforms to the IOperatorForm interface, which includes:

Internal Logic and Hooks

• Uses useTranslate('flow') to fetch localized label strings.

• Calls useBuildSortOptions() to generate sorting options for the sort selector.

• Renders dynamic input fields relevant to node using DynamicInputVariable.

• Uses TopNItem to allow users to specify how many top results to retrieve.

• Provides two YearPicker components for selecting the start (year_low) and end (year_high) years.

• Includes a switch to toggle the inclusion of patents in the search results.

Form Structure

Usage Example

<GoogleScholarForm
  form={formInstance}
  node={currentNode}
  onValuesChange={(changed, all) => {
    console.log('Form changed:', changed, all);
  }}
/>

Important Implementation Details

• YearPicker Conversion Logic: Uses dayjs to handle date objects but only allows year selection, converting between number years and dayjs instances to maintain compatibility with the Ant Design DatePicker.

• Localization: All label strings are pulled using the useTranslate hook scoped to the 'flow' namespace, enabling internationalization.

• Dynamic Inputs: The form integrates a dynamic input component (DynamicInputVariable) closely tied to the node prop, suggesting that the form's inputs can change based on some external context or configuration.

• Controlled Form: Uses Ant Design's Form component with form instance passed in from props, allowing external control and validation.

• Custom Sorting Options: The sort options come from a custom hook useBuildSortOptions, implying this list is dynamic or configurable elsewhere.

Interaction with Other Parts of the System

• DynamicInputVariable: Likely a reusable component that renders form inputs dynamically based on the current node context, enabling flexible query configurations.

• TopNItem: A component to input or select the top N results count, part of the search parameter controls.

• useTranslate hook: Provides internationalized text strings, enabling the UI to support multiple languages.

• useBuildSortOptions hook: Supplies the options used in the sort selector, probably built based on backend or application-specific criteria.

• Ant Design Components: Utilizes Ant Design's Form, Select, Switch, and DatePicker for UI consistency.

• dayjs Library: Used for date manipulation and formatting, essential for the YearPicker component.

This file primarily functions as a UI layer for constructing search parameters for Google Scholar queries and interacts with various UI components and hooks that manage localization, dynamic input generation, and sorting options.

Visual Diagram

componentDiagram
    component GoogleScholarForm {
        +onValuesChange
        +form
        +node
        ---
        +DynamicInputVariable(node)
        +TopNItem(initialValue=5)
        +Select(options=useBuildSortOptions())
        +YearPicker(value=year_low)
        +YearPicker(value=year_high)
        +Switch(initialValue=true)
    }

    component YearPicker {
        +value (number | undefined)
        +onChange((number | undefined) => void)
    }

    GoogleScholarForm --> DynamicInputVariable : renders
    GoogleScholarForm --> TopNItem : renders
    GoogleScholarForm --> Select : renders (sort options)
    GoogleScholarForm --> YearPicker : renders (year_low & year_high)
    GoogleScholarForm --> Switch : renders (patents toggle)

Summary

• The file exports a single default React component GoogleScholarForm that renders a comprehensive form for setting Google Scholar search parameters.

• Includes the YearPicker helper component for year-only date selection.

• Integrates with localization, dynamic input, and custom sorting hooks/components.

• Facilitates user input of years, sorting preferences, patent inclusion, and dynamic variables.

• Uses Ant Design components and dayjs for robust UI and date handling.

This component is a critical UI part of a larger system that configures and executes Google Scholar search queries or related data retrieval workflows.