From 9176790adf391ebec5dae5c0038eee7d43c09ca4 Mon Sep 17 00:00:00 2001 From: twwu Date: Thu, 29 May 2025 14:06:12 +0800 Subject: [PATCH] feat: enhance dataset detail layout with button disable logic based on pipeline status --- .../[datasetId]/layout-main.tsx | 30 +++++++++++++-- web/app/components/app-sidebar/index.tsx | 10 ++++- web/app/components/app-sidebar/navLink.tsx | 37 ++++++++++++++++--- .../documents/create-from-pipeline/index.tsx | 4 +- .../settings/chunk-structure/index.tsx | 5 --- .../datasets/settings/form/index.tsx | 12 +++--- .../rag-pipeline-header/publisher/index.tsx | 7 +++- .../rag-pipeline-header/publisher/popup.tsx | 2 + web/models/datasets.ts | 1 + 9 files changed, 83 insertions(+), 25 deletions(-) diff --git a/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout-main.tsx b/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout-main.tsx index 5eb459bf1b..43907718f3 100644 --- a/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout-main.tsx +++ b/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout-main.tsx @@ -120,10 +120,32 @@ const DatasetDetailLayout: FC = (props) => { const { data: relatedApps } = useDatasetRelatedApps(datasetId) + const isButtonDisabledWithPipeline = useMemo(() => { + if (!datasetRes) + return true + if (datasetRes.provider === 'external') + return false + if (!datasetRes.pipeline_id) + return false + return !datasetRes.is_published + }, [datasetRes]) + const navigation = useMemo(() => { const baseNavigation = [ - { name: t('common.datasetMenus.hitTesting'), href: `/datasets/${datasetId}/hitTesting`, icon: RiFocus2Line, selectedIcon: RiFocus2Fill }, - { name: t('common.datasetMenus.settings'), href: `/datasets/${datasetId}/settings`, icon: RiEqualizer2Line, selectedIcon: RiEqualizer2Fill }, + { + name: t('common.datasetMenus.hitTesting'), + href: `/datasets/${datasetId}/hitTesting`, + icon: RiFocus2Line, + selectedIcon: RiFocus2Fill, + disabled: isButtonDisabledWithPipeline, + }, + { + name: t('common.datasetMenus.settings'), + href: `/datasets/${datasetId}/settings`, + icon: RiEqualizer2Line, + selectedIcon: RiEqualizer2Fill, + disabled: false, + }, ] if (datasetRes?.provider !== 'external') { @@ -132,15 +154,17 @@ const DatasetDetailLayout: FC = (props) => { href: `/datasets/${datasetId}/documents`, icon: RiFileTextLine, selectedIcon: RiFileTextFill, + disabled: isButtonDisabledWithPipeline, }, { name: t('common.datasetMenus.pipeline'), href: `/datasets/${datasetId}/pipeline`, icon: PipelineLine as RemixiconComponentType, selectedIcon: PipelineFill as RemixiconComponentType, + disabled: false, }]) } return baseNavigation - }, [datasetRes?.provider, datasetId, t]) + }, [t, datasetId, isButtonDisabledWithPipeline, datasetRes?.provider]) useDocumentTitle(datasetRes?.name || t('common.menus.datasets')) diff --git a/web/app/components/app-sidebar/index.tsx b/web/app/components/app-sidebar/index.tsx index 54d7d5ac75..fd0fb5285f 100644 --- a/web/app/components/app-sidebar/index.tsx +++ b/web/app/components/app-sidebar/index.tsx @@ -16,6 +16,7 @@ export type IAppDetailNavProps = { href: string icon: NavIcon selectedIcon: NavIcon + disabled?: boolean }> extraInfo?: (modeState: string) => React.ReactNode } @@ -78,7 +79,14 @@ const AppDetailNav = ({ > {navigation.map((item, index) => { return ( - + ) })} diff --git a/web/app/components/app-sidebar/navLink.tsx b/web/app/components/app-sidebar/navLink.tsx index 295b553b04..a69f0bd6aa 100644 --- a/web/app/components/app-sidebar/navLink.tsx +++ b/web/app/components/app-sidebar/navLink.tsx @@ -6,10 +6,10 @@ import classNames from '@/utils/classnames' import type { RemixiconComponentType } from '@remixicon/react' export type NavIcon = React.ComponentType< -React.PropsWithoutRef> & { - title?: string | undefined - titleId?: string | undefined -}> | RemixiconComponentType + React.PropsWithoutRef> & { + title?: string | undefined + titleId?: string | undefined + }> | RemixiconComponentType export type NavLinkProps = { name: string @@ -19,6 +19,7 @@ export type NavLinkProps = { normal: NavIcon } mode?: string + disabled?: boolean } export default function NavLink({ @@ -26,6 +27,7 @@ export default function NavLink({ href, iconMap, mode = 'expand', + disabled = false, }: NavLinkProps) { const segment = useSelectedLayoutSegment() const formattedSegment = (() => { @@ -39,13 +41,38 @@ export default function NavLink({ const isActive = href.toLowerCase().split('/')?.pop() === formattedSegment const NavIcon = isActive ? iconMap.selected : iconMap.normal + if (disabled) { + return ( + + ) + } + return ( { +const CreateFormPipeline = () => { const { t } = useTranslation() const plan = useProviderContextSelector(state => state.plan) const enableBilling = useProviderContextSelector(state => state.enableBilling) @@ -348,4 +348,4 @@ const TestRunPanel = () => { ) } -export default TestRunPanel +export default CreateFormPipeline diff --git a/web/app/components/datasets/settings/chunk-structure/index.tsx b/web/app/components/datasets/settings/chunk-structure/index.tsx index 4919bf9cd1..8ffe562725 100644 --- a/web/app/components/datasets/settings/chunk-structure/index.tsx +++ b/web/app/components/datasets/settings/chunk-structure/index.tsx @@ -5,12 +5,10 @@ import OptionCard from '../option-card' type ChunkStructureProps = { chunkStructure: ChunkingMode - onChunkStructureChange: (value: ChunkingMode) => void } const ChunkStructure = ({ chunkStructure, - onChunkStructureChange, }: ChunkStructureProps) => { const { options, @@ -27,9 +25,6 @@ const ChunkStructure = ({ iconActiveColor={option.iconActiveColor} title={option.title} description={option.description} - onClick={() => { - onChunkStructureChange(option.id) - }} isActive={chunkStructure === option.id} effectColor={option.effectColor} showEffectColor diff --git a/web/app/components/datasets/settings/form/index.tsx b/web/app/components/datasets/settings/form/index.tsx index 992eafdc57..c0cdec731e 100644 --- a/web/app/components/datasets/settings/form/index.tsx +++ b/web/app/components/datasets/settings/form/index.tsx @@ -67,13 +67,12 @@ const Form = () => { const [showAppIconPicker, setShowAppIconPicker] = useState(false) const [description, setDescription] = useState(currentDataset?.description ?? '') const [permission, setPermission] = useState(currentDataset?.permission) - const [chunkStructure, setChunkStructure] = useState(currentDataset?.doc_form ?? ChunkingMode.text) const [topK, setTopK] = useState(currentDataset?.external_retrieval_model.top_k ?? 2) const [scoreThreshold, setScoreThreshold] = useState(currentDataset?.external_retrieval_model.score_threshold ?? 0.5) const [scoreThresholdEnabled, setScoreThresholdEnabled] = useState(currentDataset?.external_retrieval_model.score_threshold_enabled ?? false) const [selectedMemberIDs, setSelectedMemberIDs] = useState(currentDataset?.partial_member_list || []) const [memberList, setMemberList] = useState([]) - const [indexMethod, setIndexMethod] = useState(currentDataset?.indexing_technique ?? IndexingType.QUALIFIED) + const [indexMethod, setIndexMethod] = useState(currentDataset?.indexing_technique) const [keywordNumber, setKeywordNumber] = useState(currentDataset?.keyword_number ?? 10) const [retrievalConfig, setRetrievalConfig] = useState(currentDataset?.retrieval_model_dict as RetrievalConfig) const [embeddingModel, setEmbeddingModel] = useState( @@ -164,7 +163,7 @@ const Form = () => { body: { name, icon_info: iconInfo, - doc_form: chunkStructure, + doc_form: currentDataset?.doc_form, description, permission, indexing_technique: indexMethod, @@ -209,7 +208,7 @@ const Form = () => { } } - const isShowIndexMethod = chunkStructure !== ChunkingMode.parentChild && currentDataset && currentDataset.indexing_technique + const isShowIndexMethod = currentDataset && currentDataset.doc_form !== ChunkingMode.parentChild && currentDataset.indexing_technique && indexMethod return (
@@ -268,7 +267,7 @@ const Form = () => {
{ - !currentDataset?.doc_form && ( + currentDataset?.doc_form && ( <> {
diff --git a/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/index.tsx b/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/index.tsx index cbf719ec93..e7914b32d7 100644 --- a/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/index.tsx +++ b/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/index.tsx @@ -36,8 +36,11 @@ const Publisher = () => { }} > handleOpenChange(!open)}> - diff --git a/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/popup.tsx b/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/popup.tsx index 973a05caec..62a6adf409 100644 --- a/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/popup.tsx +++ b/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/popup.tsx @@ -125,6 +125,7 @@ const Popup = () => { className='mb-1 w-full hover:bg-state-accent-hover hover:text-text-accent' variant='tertiary' onClick={goToAddDocuments} + disabled={!published} >
@@ -135,6 +136,7 @@ const Popup = () => {