refactor: Refactor Online Drive components to improve state management and add truncation support

web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/index.tsx

@@ -21,7 +21,7 @@ const Breadcrumbs = ({
   isInPipeline,
 }: BreadcrumbsProps) => {
   const { t } = useTranslation()
-  const { setFileList, setSelectedFileList, setPrefix, setBucket } = useDataSourceStore().getState()
+  const dataSourceStore = useDataSourceStore()
   const showSearchResult = !!keywords && searchResultsLength > 0
   const isRoot = prefix.length === 0 && bucket === ''
 
@@ -43,24 +43,27 @@ const Breadcrumbs = ({
   }, [displayBreadcrumbNum, prefix])
 
   const handleBackToBucketList = useCallback(() => {
+    const { setFileList, setSelectedFileList, setPrefix, setBucket } = dataSourceStore.getState()
     setFileList([])
     setSelectedFileList([])
     setBucket('')
     setPrefix([])
-  }, [setBucket, setFileList, setPrefix, setSelectedFileList])
+  }, [dataSourceStore])
 
   const handleClickBucketName = useCallback(() => {
+    const { setFileList, setSelectedFileList, setPrefix } = dataSourceStore.getState()
     setFileList([])
     setSelectedFileList([])
     setPrefix([])
-  }, [setFileList, setPrefix, setSelectedFileList])
+  }, [dataSourceStore])
 
   const handleClickBreadcrumb = useCallback((index: number) => {
+    const { setFileList, setSelectedFileList, setPrefix } = dataSourceStore.getState()
     const newPrefix = prefix.slice(0, index - 1)
     setFileList([])
     setSelectedFileList([])
     setPrefix(newPrefix)
-  }, [prefix, setFileList, setPrefix, setSelectedFileList])
+  }, [dataSourceStore, prefix])
 
   return (
     <div className='flex grow items-center py-1'>

web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/index.tsx

@@ -17,6 +17,7 @@ type FileListProps = {
   handleSelectFile: (file: OnlineDriveFile) => void
   handleOpenFolder: (file: OnlineDriveFile) => void
   isLoading: boolean
+  isTruncated: boolean
 }
 
 const FileList = ({
@@ -32,6 +33,7 @@ const FileList = ({
   handleOpenFolder,
   isInPipeline,
   isLoading,
+  isTruncated,
 }: FileListProps) => {
   const [inputValue, setInputValue] = useState(keywords)
 
@@ -74,6 +76,7 @@ const FileList = ({
         handleSelectFile={handleSelectFile}
         isInPipeline={isInPipeline}
         isLoading={isLoading}
+        isTruncated={isTruncated}
       />
     </div>
   )

web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/index.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react'
+import React, { useEffect, useMemo, useRef } from 'react'
 import type { OnlineDriveFile } from '@/models/pipeline'
 import Item from './item'
 import EmptyFolder from './empty-folder'
@@ -8,12 +8,14 @@ import { RiLoader2Line } from '@remixicon/react'
 import { useFileSupportTypes } from '@/service/use-common'
 import { isFile } from '../../utils'
 import { getFileExtension } from './utils'
+import { useDataSourceStore } from '../../../store'
 
 type FileListProps = {
   fileList: OnlineDriveFile[]
   selectedFileList: string[]
   keywords: string
   isInPipeline: boolean
+  isTruncated: boolean
   isLoading: boolean
   handleResetKeywords: () => void
   handleSelectFile: (file: OnlineDriveFile) => void
@@ -29,7 +31,26 @@ const List = ({
   handleOpenFolder,
   isInPipeline,
   isLoading,
+  isTruncated,
 }: FileListProps) => {
+  const anchorRef = useRef<HTMLDivElement>(null)
+  const observerRef = useRef<IntersectionObserver>()
+  const dataSourceStore = useDataSourceStore()
+
+  useEffect(() => {
+    if (anchorRef.current) {
+      observerRef.current = new IntersectionObserver((entries) => {
+        const { setStartAfter } = dataSourceStore.getState()
+        if (entries[0].isIntersecting && isTruncated && !isLoading)
+          setStartAfter(fileList[fileList.length - 1].key)
+      }, {
+        rootMargin: '100px',
+      })
+      observerRef.current.observe(anchorRef.current)
+    }
+    return () => observerRef.current?.disconnect()
+  }, [anchorRef, dataSourceStore, isTruncated, isLoading, fileList])
+
   const isAllLoading = isLoading && fileList.length === 0 && keywords.length === 0
   const isPartLoading = isLoading && fileList.length > 0
   const isEmptyFolder = !isLoading && fileList.length === 0 && keywords.length === 0
@@ -84,6 +105,7 @@ const List = ({
               </div>
             )
           }
+          <div ref={anchorRef} className='h-0' />
         </div>
       )}
     </div>

web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/index.tsx

@@ -8,8 +8,8 @@ import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
 import { ssePost } from '@/service/base'
 import type { DataSourceNodeCompletedResponse, DataSourceNodeErrorResponse } from '@/types/pipeline'
 import Toast from '@/app/components/base/toast'
-import { useDataSourceStoreWithSelector } from '../store'
+import { useDataSourceStore, useDataSourceStoreWithSelector } from '../store'
-import { convertOnlineDriveDataToFileList } from './utils'
+import { convertOnlineDriveData } from './utils'
 import produce from 'immer'
 
 type OnlineDriveProps = {
@@ -25,17 +25,13 @@ const OnlineDrive = ({
 }: OnlineDriveProps) => {
   const pipelineId = useDatasetDetailContextWithSelector(s => s.dataset?.pipeline_id)
   const prefix = useDataSourceStoreWithSelector(state => state.prefix)
-  const setPrefix = useDataSourceStoreWithSelector(state => state.setPrefix)
   const keywords = useDataSourceStoreWithSelector(state => state.keywords)
-  const setKeywords = useDataSourceStoreWithSelector(state => state.setKeywords)
   const bucket = useDataSourceStoreWithSelector(state => state.bucket)
-  const setBucket = useDataSourceStoreWithSelector(state => state.setBucket)
   const startAfter = useDataSourceStoreWithSelector(state => state.startAfter)
-  const setStartAfter = useDataSourceStoreWithSelector(state => state.setStartAfter)
   const selectedFileList = useDataSourceStoreWithSelector(state => state.selectedFileList)
-  const setSelectedFileList = useDataSourceStoreWithSelector(state => state.setSelectedFileList)
   const fileList = useDataSourceStoreWithSelector(state => state.fileList)
-  const setFileList = useDataSourceStoreWithSelector(state => state.setFileList)
+  const isTruncated = useDataSourceStoreWithSelector(state => state.isTruncated)
+  const dataSourceStore = useDataSourceStore()
   const [isLoading, setIsLoading] = useState(false)
 
   const datasourceNodeRunURL = !isInPipeline
@@ -60,8 +56,10 @@ const OnlineDrive = ({
       },
       {
         onDataSourceNodeCompleted: (documentsData: DataSourceNodeCompletedResponse) => {
-          const newFileList = convertOnlineDriveDataToFileList(documentsData.data, prefix)
+          const { setFileList, setIsTruncated } = dataSourceStore.getState()
+          const { fileList: newFileList, isTruncated } = convertOnlineDriveData(documentsData.data, prefix)
           setFileList([...fileList, ...newFileList])
+          setIsTruncated(isTruncated)
           setIsLoading(false)
         },
         onDataSourceNodeError: (error: DataSourceNodeErrorResponse) => {
@@ -73,7 +71,7 @@ const OnlineDrive = ({
         },
       },
     )
-  }, [bucket, datasourceNodeRunURL, prefix, fileList, setFileList, startAfter])
+  }, [prefix, datasourceNodeRunURL, bucket, startAfter, dataSourceStore, fileList])
 
   useEffect(() => {
     getOnlineDrive()
@@ -87,14 +85,18 @@ const OnlineDrive = ({
   }, [fileList, keywords])
 
   const updateKeywords = useCallback((keywords: string) => {
+    const { setKeywords } = dataSourceStore.getState()
     setKeywords(keywords)
-  }, [setKeywords])
+  }, [dataSourceStore])
 
   const resetPrefix = useCallback(() => {
+    const { setKeywords } = dataSourceStore.getState()
+
     setKeywords('')
-  }, [setKeywords])
+  }, [dataSourceStore])
 
   const handleSelectFile = useCallback((file: OnlineDriveFile) => {
+    const { setSelectedFileList } = dataSourceStore.getState()
     if (file.type === OnlineDriveFileType.bucket) return
     const newSelectedFileList = produce(selectedFileList, (draft) => {
       if (draft.includes(file.key)) {
@@ -107,9 +109,10 @@ const OnlineDrive = ({
       }
     })
     setSelectedFileList(newSelectedFileList)
-  }, [isInPipeline, selectedFileList, setSelectedFileList])
+  }, [dataSourceStore, isInPipeline, selectedFileList])
 
   const handleOpenFolder = useCallback((file: OnlineDriveFile) => {
+    const { setPrefix, setBucket, setFileList } = dataSourceStore.getState()
     if (file.type === OnlineDriveFileType.file) return
     setFileList([])
     if (file.type === OnlineDriveFileType.bucket) {
@@ -122,7 +125,7 @@ const OnlineDrive = ({
       })
       setPrefix(newPrefix)
     }
-  }, [prefix, setBucket, setFileList, setPrefix])
+  }, [dataSourceStore, prefix])
 
   return (
     <div className='flex flex-col gap-y-2'>
@@ -143,6 +146,7 @@ const OnlineDrive = ({
         handleOpenFolder={handleOpenFolder}
         isInPipeline={isInPipeline}
         isLoading={isLoading}
+        isTruncated={isTruncated}
       />
     </div>
   )

web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/utils.ts

@@ -12,11 +12,12 @@ export const isBucketListInitiation = (data: OnlineDriveData[], prefix: string[]
   return data.length > 1 || (data.length === 1 && data[0].files.length === 0)
 }
 
-export const convertOnlineDriveDataToFileList = (data: OnlineDriveData[], prefix: string[]): OnlineDriveFile[] => {
+export const convertOnlineDriveData = (data: OnlineDriveData[], prefix: string[]): { fileList: OnlineDriveFile[], isTruncated: boolean } => {
   const fileList: OnlineDriveFile[] = []
+  let isTruncated = false
 
   if (data.length === 0)
-    return fileList
+    return { fileList, isTruncated }
 
   if (isBucketListInitiation(data, prefix)) {
     data.forEach((item) => {
@@ -38,6 +39,7 @@ export const convertOnlineDriveDataToFileList = (data: OnlineDriveData[], prefix
         type: isFileType ? OnlineDriveFileType.file : OnlineDriveFileType.folder,
       })
     })
+    isTruncated = data[0].is_truncated ?? false
   }
-  return fileList
+  return { fileList, isTruncated }
 }

web/app/components/datasets/documents/create-from-pipeline/data-source/store/slices/online-drive.ts

@@ -14,6 +14,8 @@ export type OnlineDriveSliceShape = {
   setFileList: (fileList: OnlineDriveFile[]) => void
   bucket: string
   setBucket: (bucket: string) => void
+  isTruncated: boolean
+  setIsTruncated: (isTruncated: boolean) => void
 }
 
 export const createOnlineDriveSlice: StateCreator<OnlineDriveSliceShape> = (set) => {
@@ -42,5 +44,9 @@ export const createOnlineDriveSlice: StateCreator<OnlineDriveSliceShape> = (set)
     setBucket: (bucket: string) => set(() => ({
       bucket,
     })),
+    isTruncated: false,
+    setIsTruncated: (isTruncated: boolean) => set(() => ({
+      isTruncated,
+    })),
   })
 }

web/app/components/datasets/list/dataset-card/dataset-card-deprecated.tsx

@@ -1,240 +0,0 @@
-'use client'
-
-import { useContext } from 'use-context-selector'
-import { useRouter } from 'next/navigation'
-import { useCallback, useEffect, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { RiMoreFill } from '@remixicon/react'
-import cn from '@/utils/classnames'
-import Confirm from '@/app/components/base/confirm'
-import { ToastContext } from '@/app/components/base/toast'
-import { checkIsUsedInApp, deleteDataset } from '@/service/datasets'
-import type { DataSet } from '@/models/datasets'
-import Tooltip from '@/app/components/base/tooltip'
-import { Folder } from '@/app/components/base/icons/src/vender/solid/files'
-import type { HtmlContentProps } from '@/app/components/base/popover'
-import CustomPopover from '@/app/components/base/popover'
-import Divider from '@/app/components/base/divider'
-import RenameDatasetModal from '@/app/components/datasets/rename-modal'
-import type { Tag } from '@/app/components/base/tag-management/constant'
-import TagSelector from '@/app/components/base/tag-management/selector'
-import CornerLabel from '@/app/components/base/corner-label'
-import { useAppContext } from '@/context/app-context'
-
-export type DatasetCardProps = {
-  dataset: DataSet
-  onSuccess?: () => void
-}
-
-const DatasetCard = ({
-  dataset,
-  onSuccess,
-}: DatasetCardProps) => {
-  const { t } = useTranslation()
-  const { notify } = useContext(ToastContext)
-  const { push } = useRouter()
-  const EXTERNAL_PROVIDER = 'external' as const
-
-  const { isCurrentWorkspaceDatasetOperator } = useAppContext()
-  const [tags, setTags] = useState<Tag[]>(dataset.tags)
-
-  const [showRenameModal, setShowRenameModal] = useState(false)
-  const [showConfirmDelete, setShowConfirmDelete] = useState(false)
-  const [confirmMessage, setConfirmMessage] = useState<string>('')
-  const isExternalProvider = (provider: string): boolean => provider === EXTERNAL_PROVIDER
-  const detectIsUsedByApp = useCallback(async () => {
-    try {
-      const { is_using: isUsedByApp } = await checkIsUsedInApp(dataset.id)
-      setConfirmMessage(isUsedByApp ? t('dataset.datasetUsedByApp')! : t('dataset.deleteDatasetConfirmContent')!)
-    }
-    catch (e: any) {
-      const res = await e.json()
-      notify({ type: 'error', message: res?.message || 'Unknown error' })
-    }
-
-    setShowConfirmDelete(true)
-  }, [dataset.id, notify, t])
-  const onConfirmDelete = useCallback(async () => {
-    try {
-      await deleteDataset(dataset.id)
-      notify({ type: 'success', message: t('dataset.datasetDeleted') })
-      if (onSuccess)
-        onSuccess()
-    }
-    catch {
-    }
-    setShowConfirmDelete(false)
-  }, [dataset.id, notify, onSuccess, t])
-
-  const Operations = (props: HtmlContentProps & { showDelete: boolean }) => {
-    const onMouseLeave = async () => {
-      props.onClose?.()
-    }
-    const onClickRename = async (e: React.MouseEvent<HTMLDivElement>) => {
-      e.stopPropagation()
-      props.onClick?.()
-      e.preventDefault()
-      setShowRenameModal(true)
-    }
-    const onClickDelete = async (e: React.MouseEvent<HTMLDivElement>) => {
-      e.stopPropagation()
-      props.onClick?.()
-      e.preventDefault()
-      detectIsUsedByApp()
-    }
-    return (
-      <div className="relative w-full py-1" onMouseLeave={onMouseLeave}>
-        <div className='mx-1 flex h-8 cursor-pointer items-center gap-2 rounded-lg px-3 py-[6px] hover:bg-state-base-hover' onClick={onClickRename}>
-          <span className='text-sm text-text-secondary'>{t('common.operation.settings')}</span>
-        </div>
-        {props.showDelete && (
-          <>
-            <Divider className="!my-1" />
-            <div
-              className='group mx-1 flex h-8 cursor-pointer items-center gap-2 rounded-lg px-3 py-[6px] hover:bg-state-destructive-hover'
-              onClick={onClickDelete}
-            >
-              <span className={cn('text-sm text-text-secondary', 'group-hover:text-text-destructive')}>
-                {t('common.operation.delete')}
-              </span>
-            </div>
-          </>
-        )}
-      </div>
-    )
-  }
-
-  useEffect(() => {
-    setTags(dataset.tags)
-  }, [dataset])
-
-  return (
-    <>
-      <div
-        className='group relative col-span-1 flex min-h-[171px] cursor-pointer flex-col rounded-xl border-[0.5px] border-solid border-components-card-border bg-components-card-bg shadow-sm transition-all duration-200 ease-in-out hover:shadow-lg'
-        data-disable-nprogress={true}
-        onClick={(e) => {
-          e.preventDefault()
-          isExternalProvider(dataset.provider)
-            ? push(`/datasets/${dataset.id}/hitTesting`)
-            : push(`/datasets/${dataset.id}/documents`)
-        }}
-      >
-        {isExternalProvider(dataset.provider) && <CornerLabel label='External' className='absolute right-0' labelClassName='rounded-tr-xl' />}
-        <div className='flex h-[66px] shrink-0 grow-0 items-center gap-3 px-[14px] pb-3 pt-[14px]'>
-          <div className={cn(
-            'flex shrink-0 items-center justify-center rounded-md border-[0.5px] border-[#E0EAFF] bg-[#F5F8FF] p-2.5',
-            !dataset.embedding_available && 'opacity-50 hover:opacity-100',
-          )}>
-            <Folder className='h-5 w-5 text-[#444CE7]' />
-          </div>
-          <div className='w-0 grow py-[1px]'>
-            <div className='flex items-center text-sm font-semibold leading-5 text-text-secondary'>
-              <div className={cn('truncate', !dataset.embedding_available && 'text-text-tertiary opacity-50 hover:opacity-100')} title={dataset.name}>{dataset.name}</div>
-              {!dataset.embedding_available && (
-                <Tooltip
-                  popupContent={t('dataset.unavailableTip')}
-                >
-                  <span className='ml-1 inline-flex w-max shrink-0 rounded-md border border-divider-regular px-1 text-xs font-normal leading-[18px] text-text-tertiary'>{t('dataset.unavailable')}</span>
-                </Tooltip>
-              )}
-            </div>
-            <div className='mt-[1px] flex items-center text-xs leading-[18px] text-text-tertiary'>
-              <div
-                className={cn('truncate', (!dataset.embedding_available || !dataset.document_count) && 'opacity-50')}
-                title={dataset.provider === 'external' ? `${dataset.app_count}${t('dataset.appCount')}` : `${dataset.document_count}${t('dataset.documentCount')} · ${Math.round(dataset.word_count / 1000)}${t('dataset.wordCount')} · ${dataset.app_count}${t('dataset.appCount')}`}
-              >
-                {dataset.provider === 'external'
-                  ? <>
-                    <span>{dataset.app_count}{t('dataset.appCount')}</span>
-                  </>
-                  : <>
-                    <span>{dataset.document_count}{t('dataset.documentCount')}</span>
-                    <span className='mx-0.5 w-1 shrink-0 text-text-tertiary'>·</span>
-                    <span>{Math.round(dataset.word_count / 1000)}{t('dataset.wordCount')}</span>
-                    <span className='mx-0.5 w-1 shrink-0 text-text-tertiary'>·</span>
-                    <span>{dataset.app_count}{t('dataset.appCount')}</span>
-                  </>
-                }
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className={cn(
-            'mb-2 max-h-[72px] grow px-[14px] text-xs leading-normal text-text-tertiary group-hover:line-clamp-2 group-hover:max-h-[36px]',
-            tags.length ? 'line-clamp-2' : 'line-clamp-4',
-            !dataset.embedding_available && 'opacity-50 hover:opacity-100',
-          )}
-          title={dataset.description}>
-          {dataset.description}
-        </div>
-        <div className={cn(
-          'mt-4 h-[42px] shrink-0 items-center pb-[6px] pl-[14px] pr-[6px] pt-1',
-          tags.length ? 'flex' : '!hidden group-hover:!flex',
-        )}>
-          <div className={cn('flex w-0 grow items-center gap-1', !dataset.embedding_available && 'opacity-50 hover:opacity-100')} onClick={(e) => {
-            e.stopPropagation()
-            e.preventDefault()
-          }}>
-            <div className={cn(
-              'mr-[41px] w-full grow group-hover:!mr-0 group-hover:!block',
-              tags.length ? '!block' : '!hidden',
-            )}>
-              <TagSelector
-                position='bl'
-                type='knowledge'
-                targetID={dataset.id}
-                value={tags.map(tag => tag.id)}
-                selectedTags={tags}
-                onCacheUpdate={setTags}
-                onChange={onSuccess}
-              />
-            </div>
-          </div>
-          <div className='mx-1 !hidden h-[14px] w-[1px] shrink-0 bg-divider-regular group-hover:!flex' />
-          <div className='!hidden shrink-0 group-hover:!flex'>
-            <CustomPopover
-              htmlContent={<Operations showDelete={!isCurrentWorkspaceDatasetOperator} />}
-              position="br"
-              trigger="click"
-              btnElement={
-                <div
-                  className='flex h-8 w-8 cursor-pointer items-center justify-center rounded-md'
-                >
-                  <RiMoreFill className='h-4 w-4 text-text-secondary' />
-                </div>
-              }
-              btnClassName={open =>
-                cn(
-                  open ? '!bg-black/5 !shadow-none' : '!bg-transparent',
-                  'h-8 w-8 rounded-md border-none !p-2 hover:!bg-black/5',
-                )
-              }
-              className={'!z-20 h-fit !w-[128px]'}
-            />
-          </div>
-        </div>
-      </div>
-      {showRenameModal && (
-        <RenameDatasetModal
-          show={showRenameModal}
-          dataset={dataset}
-          onClose={() => setShowRenameModal(false)}
-          onSuccess={onSuccess}
-        />
-      )}
-      {showConfirmDelete && (
-        <Confirm
-          title={t('dataset.deleteDatasetConfirmTitle')}
-          content={confirmMessage}
-          isShow={showConfirmDelete}
-          onConfirm={onConfirmDelete}
-          onCancel={() => setShowConfirmDelete(false)}
-        />
-      )}
-    </>
-  )
-}
-
-export default DatasetCard

web/app/components/datasets/list/datasets.tsx

@@ -34,19 +34,17 @@ const Datasets = ({
     keyword: keywords,
   })
   const resetDatasetList = useResetDatasetList()
-  const loadingStateRef = useRef(false)
   const anchorRef = useRef<HTMLDivElement>(null)
   const observerRef = useRef<IntersectionObserver>()
 
   useEffect(() => {
-    loadingStateRef.current = isFetching
     document.title = `${t('dataset.knowledge')} - Dify`
-  }, [isFetching, t])
+  }, [t])
 
   useEffect(() => {
     if (anchorRef.current) {
       observerRef.current = new IntersectionObserver((entries) => {
-        if (entries[0].isIntersecting && hasNextPage)
+        if (entries[0].isIntersecting && hasNextPage && !isFetching)
           fetchNextPage()
       }, {
         rootMargin: '100px',
@@ -54,7 +52,7 @@ const Datasets = ({
       observerRef.current.observe(anchorRef.current)
     }
     return () => observerRef.current?.disconnect()
-  }, [anchorRef, datasetList, hasNextPage, fetchNextPage])
+  }, [anchorRef, datasetList, hasNextPage, fetchNextPage, isFetching])
 
   return (
     <>

web/app/components/rag-pipeline/components/panel/test-run/index.tsx

@@ -24,7 +24,7 @@ const TestRunPanel = () => {
   const onlineDocuments = useDataSourceStoreWithSelector(state => state.onlineDocuments)
   const websitePages = useDataSourceStoreWithSelector(state => state.websitePages)
   const selectedFileList = useDataSourceStoreWithSelector(state => state.selectedFileList)
-  const { bucket } = useDataSourceStore().getState()
+  const dataSourceStore = useDataSourceStore()
   const [datasource, setDatasource] = useState<Datasource>()
 
   const {
@@ -84,6 +84,7 @@ const TestRunPanel = () => {
     if (datasourceType === DatasourceType.websiteCrawl)
       datasourceInfoList.push(websitePages[0])
     if (datasourceType === DatasourceType.onlineDrive) {
+      const { bucket } = dataSourceStore.getState()
       datasourceInfoList.push({
         bucket,
         key: selectedFileList[0],
@@ -95,7 +96,7 @@ const TestRunPanel = () => {
       datasource_type: datasourceType,
       datasource_info_list: datasourceInfoList,
     })
-  }, [bucket, datasource, datasourceType, fileList, handleRun, onlineDocuments, selectedFileList, websitePages])
+  }, [dataSourceStore, datasource, datasourceType, fileList, handleRun, onlineDocuments, selectedFileList, websitePages])
 
   return (
     <div