Implementation:Infiniflow Ragflow MetadataManageModal Hooks

Knowledge Sources	Infiniflow_Ragflow
Domains	Frontend, Metadata
Last Updated	2026-02-12 06:00 GMT

Overview

Concrete complex state management hooks for the metadata modal provided by the RAGFlow frontend.

Description

The use-manage-modal module exports a `util` object with data transformation helpers (between API response formats and table data), `useMetadataOperations` for tracking delete/update operations as a pending changeset, `useFetchMetaDataManageData` for fetching metadata from the API, `useManageMetaDataModal` which orchestrates table state with CRUD operations and save logic across multiple metadata types (Manage, Setting, UpdateSingle, SingleFileSetting), `useManageMetadata` for controlling modal visibility and initial data, and `useOperateData` for batch delete from row selection.

Usage

Import `useManageMetaDataModal` in the ManageMetadataModal component to drive table data and save behavior. Import `useManageMetadata` in parent components that need to open the modal with pre-configured data. Import `util` for data format conversions.

Code Reference

Source Location

• Repository: Infiniflow_Ragflow
• File: web/src/pages/dataset/components/metedata/hooks/use-manage-modal.ts
• Lines: 1-561

Signature

export const util: {
  changeToMetaDataTableData(data: IMetaDataReturnType): IMetaDataTableData[];
  JSONToMetaDataTableData(data: Record<string, string | string[]>): IMetaDataTableData[];
  tableDataToMetaDataJSON(data: IMetaDataTableData[]): IMetaDataReturnJSONType;
  tableDataToMetaDataSettingJSON(data: IMetaDataTableData[]): IMetaDataReturnJSONSettings;
  metaDataSettingJSONToMetaDataTableData(data: IMetaDataReturnJSONSettings): IMetaDataTableData[];
};

export const useMetadataOperations = () => {
  operations; addDeleteBatch; addDeleteRow; addDeleteValue; addUpdateValue; resetOperations;
};

export const useFetchMetaDataManageData = (type?: MetadataType, documentIds?: string[]) => {
  data: IMetaDataTableData[]; loading: boolean; refetch: () => void;
};

export const useManageMetaDataModal = (
  metaData?: IMetaDataTableData[], type?: MetadataType,
  otherData?: Record<string, any>, documentIds?: string[],
) => {
  tableData; setTableData; handleDeleteSingleValue; handleDeleteSingleRow;
  handleDeleteBatchRow; loading; handleSave; addUpdateValue; addDeleteValue;
};

export const useManageMetadata = () => {
  manageMetadataVisible; showManageMetadataModal; hideManageMetadataModal;
  tableData; config;
};

export const useOperateData = (params: {
  rowSelection: RowSelectionState; list: IMetaDataTableData[];
  handleDeleteBatchRow: (keys: string[]) => void;
}) => { handleDelete: () => void };

Import

import {
  useManageMetaDataModal,
  useManageMetadata,
  useOperateData,
  util,
} from '@/pages/dataset/components/metedata/hooks/use-manage-modal';

I/O Contract

Inputs

Name	Type	Required	Description
metaData	IMetaDataTableData[]	No	Initial metadata table data to populate the modal
type	MetadataType	No	Metadata operation mode (Manage, Setting, UpdateSingle, SingleFileSetting)
otherData	Record<string, any>	No	Additional context such as document ID for single-file operations
documentIds	string[]	No	Array of document IDs for scoped metadata fetch

Outputs

Name	Type	Description
tableData	IMetaDataTableData[]	Current metadata table rows with field, description, values, and valueType
handleSave	(params: { callback: () => void; builtInMetadata?: IBuiltInMetadataItem[] }) => Promise<any>	Persists pending operations to the API based on metadata type
operations	MetadataOperations	Accumulated delete and update operations pending save

Usage Examples

import { useManageMetaDataModal } from '@/pages/dataset/components/metedata/hooks/use-manage-modal';

const {
  tableData, setTableData, handleDeleteSingleRow, handleSave,
} = useManageMetaDataModal(originalTableData, MetadataType.Manage);

Related Pages

• Environment:Infiniflow_Ragflow_Frontend_Node_Environment