yujunjun/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2025-12-28 02:22:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: enhance processing components by adding runDisabled state and fetching indicators

Browse Source
This commit is contained in:
twwu 2025-06-17 16:13:49 +08:00
parent 5cc6a2bf33
commit 7ac0f0c08c
8 changed files with 29 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
web/app/components/datasets/documents/create-from-pipeline/process-documents/actions.tsx
View File

@ -5,11 +5,13 @@ import { RiArrowLeftLine } from '@remixicon/react'
type ActionsProps = {
onBack: () => void
runDisabled?: boolean
onProcess: () => void
}
const Actions = ({
onBack,
runDisabled,
onProcess,
}: ActionsProps) => {
const { t } = useTranslation()
@ -26,6 +28,7 @@ const Actions = ({
</Button>
<Button
variant='primary'
disabled={runDisabled}
onClick={onProcess}
>
{t('datasetPipeline.operations.saveAndProcess')}

3
web/app/components/datasets/documents/create-from-pipeline/process-documents/hooks.ts
View File

@ -16,7 +16,7 @@ const VAR_TYPE_MAP: Record<PipelineInputVarType, BaseFieldType> = {
export const useConfigurations = (datasourceNodeId: string) => {
const pipelineId = useDatasetDetailContextWithSelector(state => state.dataset?.pipeline_id)
const { data: paramsConfig } = usePublishedPipelineProcessingParams({
const { data: paramsConfig, isFetching: isFetchingParams } = usePublishedPipelineProcessingParams({
pipeline_id: pipelineId!,
node_id: datasourceNodeId,
})
@ -61,6 +61,7 @@ export const useConfigurations = (datasourceNodeId: string) => {
}, [paramsConfig])
return {
isFetchingParams,
initialData,
configurations,
}

7
web/app/components/datasets/documents/create-from-pipeline/process-documents/index.tsx
View File

@ -1,3 +1,4 @@
import React from 'react'
import { generateZodSchema } from '@/app/components/base/form/form-scenarios/base/utils'
import { useConfigurations } from './hooks'
import Form from './form'
@ -20,7 +21,7 @@ const ProcessDocuments = ({
onBack,
ref,
}: ProcessDocumentsProps) => {
const { initialData, configurations } = useConfigurations(dataSourceNodeId)
const { isFetchingParams, initialData, configurations } = useConfigurations(dataSourceNodeId)
const schema = generateZodSchema(configurations)
return (
@ -33,9 +34,9 @@ const ProcessDocuments = ({
onSubmit={onSubmit}
onPreview={onPreview}
/>
<Actions onBack={onBack} onProcess={onProcess} />
<Actions runDisabled={isFetchingParams} onBack={onBack} onProcess={onProcess} />
</div>
)
}
export default ProcessDocuments
export default React.memo(ProcessDocuments)

11
web/app/components/rag-pipeline/components/panel/test-run/data-source/website-crawl/base/crawler.tsx
View File

@ -54,7 +54,7 @@ const Crawler = ({
const pipelineId = useDatasetDetailContextWithSelector(s => s.dataset?.pipeline_id)
const usePreProcessingParams = useRef(!isInPipeline ? usePublishedPipelinePreProcessingParams : useDraftPipelinePreProcessingParams)
const { data: paramsConfig } = usePreProcessingParams.current({
const { data: paramsConfig, isFetching: isFetchingParams } = usePreProcessingParams.current({
pipeline_id: pipelineId!,
node_id: nodeId,
}, !!pipelineId && !!nodeId)
@ -129,6 +129,10 @@ const Crawler = ({
setCrawlErrorMessage('')
}, [runDatasourceNode, nodeId, pipelineId, onCheckedCrawlResultChange, checkCrawlStatus, t])
const handleSubmit = useCallback((value: Record<string, any>) => {
handleRun(value)
}, [handleRun])
return (
<div className='flex flex-col'>
<Header
@ -139,10 +143,9 @@ const Crawler = ({
<Options
variables={paramsConfig?.variables || []}
isRunning={isRunning}
runDisabled={isFetchingParams}
controlFoldOptions={controlFoldOptions}
onSubmit={(value) => {
handleRun(value)
}}
onSubmit={handleSubmit}
/>
</div>
{!isInit && (

4
web/app/components/rag-pipeline/components/panel/test-run/data-source/website-crawl/base/options/index.tsx
View File

@ -17,6 +17,7 @@ const I18N_PREFIX = 'datasetCreation.stepOne.website'
type OptionsProps = {
variables: RAGPipelineVariables
isRunning: boolean
runDisabled?: boolean
controlFoldOptions?: number
onSubmit: (data: Record<string, any>) => void
}
@ -24,6 +25,7 @@ type OptionsProps = {
const Options = ({
variables,
isRunning,
runDisabled,
controlFoldOptions,
onSubmit,
}: OptionsProps) => {
@ -90,7 +92,7 @@ const Options = ({
<Button
variant='primary'
onClick={form.handleSubmit}
disabled={isRunning}
disabled={runDisabled || isRunning}
loading={isRunning}
className='shrink-0 gap-x-0.5'
spinnerClassName='!ml-0'

4
web/app/components/rag-pipeline/components/panel/test-run/document-processing/actions.tsx
View File

@ -7,11 +7,13 @@ import { WorkflowRunningStatus } from '@/app/components/workflow/types'
type ActionsProps = {
formParams: CustomActionsProps
runDisabled?: boolean
onBack: () => void
}
const Actions = ({
formParams,
runDisabled,
onBack,
}: ActionsProps) => {
const { t } = useTranslation()
@ -32,7 +34,7 @@ const Actions = ({
onClick={() => {
form.handleSubmit()
}}
disabled={isSubmitting || !canSubmit || isRunning}
disabled={runDisabled || isSubmitting || !canSubmit || isRunning}
loading={isSubmitting || isRunning}
>
{t('datasetPipeline.operations.process')}

3
web/app/components/rag-pipeline/components/panel/test-run/document-processing/hooks.ts
View File

@ -17,7 +17,7 @@ const VAR_TYPE_MAP: Record<PipelineInputVarType, BaseFieldType> = {
export const useConfigurations = (datasourceNodeId: string) => {
const pipelineId = useStore(state => state.pipelineId)
const { data: paramsConfig } = useDraftPipelineProcessingParams({
const { data: paramsConfig, isFetching: isFetchingParams } = useDraftPipelineProcessingParams({
pipeline_id: pipelineId!,
node_id: datasourceNodeId,
})
@ -62,6 +62,7 @@ export const useConfigurations = (datasourceNodeId: string) => {
}, [paramsConfig])
return {
isFetchingParams,
initialData,
configurations,
}

10
web/app/components/rag-pipeline/components/panel/test-run/document-processing/index.tsx
View File

@ -1,8 +1,8 @@
import React, { useCallback } from 'react'
import { generateZodSchema } from '@/app/components/base/form/form-scenarios/base/utils'
import { useConfigurations } from './hooks'
import Options from './options'
import Actions from './actions'
import { useCallback } from 'react'
import type { CustomActionsProps } from '@/app/components/base/form/components/form/actions'
type DocumentProcessingProps = {
@ -16,12 +16,12 @@ const DocumentProcessing = ({
onProcess,
onBack,
}: DocumentProcessingProps) => {
const { initialData, configurations } = useConfigurations(dataSourceNodeId)
const { isFetchingParams, initialData, configurations } = useConfigurations(dataSourceNodeId)
const schema = generateZodSchema(configurations)
const renderCustomActions = useCallback((props: CustomActionsProps) => (
<Actions formParams={props} onBack={onBack} />
), [onBack])
<Actions runDisabled={isFetchingParams} formParams={props} onBack={onBack} />
), [isFetchingParams, onBack])
return (
<Options
@ -34,4 +34,4 @@ const DocumentProcessing = ({
)
}
export default DocumentProcessing
export default React.memo(DocumentProcessing)