From c2cbdcd3bf9705d9e3bc16404b6606b01a6fb291 Mon Sep 17 00:00:00 2001
From: twwu <twwu@dify.ai>
Date: Tue, 29 Jul 2025 13:46:17 +0800
Subject: [PATCH] feat: Enhance dataset info and card components with
 memoization for improved performance

---
 web/app/components/app-sidebar/dataset-info/index.tsx |  7 +++++--
 .../components/datasets/list/dataset-card/index.tsx   | 11 +++++++++--
 .../rag-pipeline-header/publisher/popup.tsx           |  3 +++
 3 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/web/app/components/app-sidebar/dataset-info/index.tsx b/web/app/components/app-sidebar/dataset-info/index.tsx
index 3d9ebecf0a..f85e3880b2 100644
--- a/web/app/components/app-sidebar/dataset-info/index.tsx
+++ b/web/app/components/app-sidebar/dataset-info/index.tsx
@@ -1,6 +1,6 @@
 'use client'
 import type { FC } from 'react'
-import React from 'react'
+import React, { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import AppIcon from '../../base/app-icon'
 import Effect from '../../base/effect'
@@ -27,6 +27,9 @@ const DatasetInfo: FC<DatasetInfoProps> = ({
     icon_url: '',
   }
   const isExternalProvider = dataset.provider === 'external'
+  const isPipelinePublished = useMemo(() => {
+    return dataset.runtime_mode === 'rag_pipeline' && dataset.is_published
+  }, [dataset.runtime_mode, dataset.is_published])
   const { formatIndexingTechniqueAndMethod } = useKnowledge()
 
   return (
@@ -54,7 +57,7 @@ const DatasetInfo: FC<DatasetInfoProps> = ({
               </div>
               <div className='system-2xs-medium-uppercase text-text-tertiary'>
                 {isExternalProvider && t('dataset.externalTag')}
-                {!isExternalProvider && dataset.doc_form && dataset.indexing_technique && (
+                {!isExternalProvider && isPipelinePublished && dataset.doc_form && dataset.indexing_technique && (
                   <div className='flex items-center gap-x-2'>
                     <span>{t(`dataset.chunkingMode.${DOC_FORM_TEXT[dataset.doc_form]}`)}</span>
                     <span>{formatIndexingTechniqueAndMethod(dataset.indexing_technique, dataset.retrieval_model_dict?.search_method)}</span>
diff --git a/web/app/components/datasets/list/dataset-card/index.tsx b/web/app/components/datasets/list/dataset-card/index.tsx
index 15604c4d89..fe161ee459 100644
--- a/web/app/components/datasets/list/dataset-card/index.tsx
+++ b/web/app/components/datasets/list/dataset-card/index.tsx
@@ -56,6 +56,13 @@ const DatasetCard = ({
   const isPipelineUnpublished = useMemo(() => {
     return dataset.runtime_mode === 'rag_pipeline' && !dataset.is_published
   }, [dataset.runtime_mode, dataset.is_published])
+  const isShowChunkingModeIcon = useMemo(() => {
+    return dataset.doc_form && (dataset.runtime_mode !== 'rag_pipeline' || dataset.is_published)
+  }, [dataset.doc_form, dataset.runtime_mode, dataset.is_published])
+  const isShowDocModeInfo = useMemo(() => {
+    return dataset.doc_form && dataset.indexing_technique && dataset.retrieval_model_dict?.search_method && (dataset.runtime_mode !== 'rag_pipeline' || dataset.is_published)
+  }, [dataset.doc_form, dataset.indexing_technique, dataset.retrieval_model_dict?.search_method, dataset.runtime_mode, dataset.is_published])
+
   const chunkingModeIcon = dataset.doc_form ? DOC_FORM_ICON_WITH_BG[dataset.doc_form] : React.Fragment
   const Icon = isExternalProvider ? DOC_FORM_ICON_WITH_BG.external : chunkingModeIcon
   const iconInfo = dataset.icon_info || {
@@ -177,7 +184,7 @@ const DatasetCard = ({
               background={iconInfo.icon_type === 'image' ? undefined : iconInfo.icon_background}
               imageUrl={iconInfo.icon_type === 'image' ? iconInfo.icon_url : undefined}
             />
-            {(dataset.doc_form || isExternalProvider) && (
+            {(isShowChunkingModeIcon || isExternalProvider) && (
               <div className='absolute -bottom-1 -right-1 z-[5]'>
                 <Icon className='size-4' />
               </div>
@@ -192,7 +199,7 @@ const DatasetCard = ({
             </div>
             <div className='system-2xs-medium-uppercase flex items-center gap-x-3 text-text-tertiary'>
               {isExternalProvider && <span>{t('dataset.externalKnowledgeBase')}</span>}
-              {!isExternalProvider && (
+              {!isExternalProvider && isShowDocModeInfo && (
                 <>
                   {dataset.doc_form && <span>{t(`dataset.chunkingMode.${DOC_FORM_TEXT[dataset.doc_form]}`)}</span>}
                   {dataset.indexing_technique && <span>{formatIndexingTechniqueAndMethod(dataset.indexing_technique, dataset.retrieval_model_dict?.search_method)}</span>}
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 03cbf071d2..51c561636a 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
@@ -38,6 +38,7 @@ import {
 import Confirm from '@/app/components/base/confirm'
 import PublishAsKnowledgePipelineModal from '../../publish-as-knowledge-pipeline-modal'
 import type { IconInfo } from '@/models/datasets'
+import { useResetDatasetList } from '@/service/knowledge/use-dataset'
 
 const PUBLISH_SHORTCUT = ['ctrl', '⇧', 'P']
 
@@ -76,6 +77,7 @@ const Popup = () => {
   }] = useBoolean(false)
 
   const invalidPublishedPipelineInfo = useInvalid([...publishedPipelineInfoQueryKeyPrefix, pipelineId])
+  const resetDatasetList = useResetDatasetList()
 
   const handlePublish = useCallback(async (params?: PublishWorkflowParams) => {
     if (publishing)
@@ -100,6 +102,7 @@ const Popup = () => {
           workflowStore.getState().setPublishedAt(res.created_at)
           mutateDatasetRes?.()
           invalidPublishedPipelineInfo()
+          resetDatasetList()
         }
       }
     }