feat: Add DatasetSidebarDropdown component and integrate ExtraInfo for dataset details

2025-09-17 21:20:42 +00:00 · 2025-07-09 15:13:02 +08:00 · 2025-07-09 15:13:02 +08:00 · e7d394f160
commit e7d394f160
parent dfe3c2caa1
11 changed files with 265 additions and 117 deletions
--- a/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout-main.tsx
+++ b/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout-main.tsx
@ -12,8 +12,6 @@ import {
  RiFocus2Fill,
  RiFocus2Line,
 } from '@remixicon/react'
-import { RiInformation2Line } from '@remixicon/react'
-import type { RelatedAppResponse } from '@/models/datasets'
 import AppSideBar from '@/app/components/app-sidebar'
 import Loading from '@/app/components/base/loading'
 import DatasetDetailContext from '@/context/dataset-detail'
@ -21,79 +19,16 @@ import { DataSourceType } from '@/models/datasets'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import { useStore } from '@/app/components/app/store'
 import { useAppContext } from '@/context/app-context'
-import Tooltip from '@/app/components/base/tooltip'
-import LinkedAppsPanel from '@/app/components/base/linked-apps-panel'
 import { PipelineFill, PipelineLine } from '@/app/components/base/icons/src/vender/pipeline'
-import { Divider } from '@/app/components/base/icons/src/vender/knowledge'
-import NoLinkedAppsPanel from '@/app/components/datasets/no-linked-apps-panel'
 import { useDatasetDetail, useDatasetRelatedApps } from '@/service/knowledge/use-dataset'
 import useDocumentTitle from '@/hooks/use-document-title'
+import ExtraInfo from '@/app/components/datasets/extra-info'

 export type IAppDetailLayoutProps = {
  children: React.ReactNode
  params: { datasetId: string }
 }

-type IExtraInfoProps = {
-  relatedApps?: RelatedAppResponse
-  documentCount?: number
-  expand: boolean
-}
-
-const ExtraInfo = React.memo(({
-  relatedApps,
-  documentCount,
-  expand,
-}: IExtraInfoProps) => {
-  const { t } = useTranslation()
-
-  const hasRelatedApps = relatedApps?.data && relatedApps?.data?.length > 0
-  const relatedAppsTotal = relatedApps?.data?.length || 0
-
-  return (
-    <>
-      {!expand && (
-        <div className='flex items-center gap-x-0.5 p-2 pb-3'>
-          <div className='flex grow flex-col px-2 pb-1.5 pt-1'>
-            <div className='system-md-semibold-uppercase text-text-secondary'>
-              {documentCount ?? '--'}
-            </div>
-            <div className='system-2xs-medium-uppercase text-text-tertiary'>
-              {t('common.datasetMenus.documents')}
-            </div>
-          </div>
-          <div className='py-2 pl-0.5 pr-1.5'>
-            <Divider className='text-test-divider-regular h-full w-fit' />
-          </div>
-          <div className='flex grow flex-col px-2 pb-1.5 pt-1'>
-            <div className='system-md-semibold-uppercase text-text-secondary'>
-              {relatedAppsTotal ?? '--'}
-            </div>
-            <Tooltip
-              position='top-start'
-              noDecoration
-              needsDelay
-              popupContent={
-                hasRelatedApps ? (
-                  <LinkedAppsPanel
-                    relatedApps={relatedApps.data}
-                    isMobile={expand}
-                  />
-                ) : <NoLinkedAppsPanel />
-              }
-            >
-              <div className='system-2xs-medium-uppercase flex cursor-pointer items-center gap-x-0.5 text-text-tertiary'>
-                <span>{t('common.datasetMenus.relatedApp')}</span>
-                <RiInformation2Line className='size-3' />
-              </div>
-            </Tooltip>
-          </div>
-        </div>
-      )}
-    </>
-  )
-})
-
 const DatasetDetailLayout: FC<IAppDetailLayoutProps> = (props) => {
  const {
    children,
@ -186,13 +121,13 @@ const DatasetDetailLayout: FC<IAppDetailLayoutProps> = (props) => {
            navigation={navigation}
            extraInfo={
              !isCurrentWorkspaceDatasetOperator
-                ? mode => <ExtraInfo relatedApps={relatedApps} expand={mode === 'collapse'} documentCount={datasetRes?.document_count} />
+                ? mode => <ExtraInfo relatedApps={relatedApps} expand={mode === 'expand'} documentCount={datasetRes?.document_count} />
                : undefined
            }
            iconType={datasetRes?.data_source_type === DataSourceType.NOTION ? 'notion' : 'dataset'}
          />
        )}
-        <div className="grow overflow-hidden bg-background-default-subtle">{children}</div>
+        <div className='grow overflow-hidden bg-background-default-subtle'>{children}</div>
      </DatasetDetailContext.Provider>
    </div>
  )
--- a/web/app/components/app-sidebar/dataset-info/dropdown.tsx
+++ b/web/app/components/app-sidebar/dataset-info/dropdown.tsx
@ -118,7 +118,7 @@ const DropDown = ({
          <RiMoreFill className='size-4' />
        </ActionButton>
      </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent>
+      <PortalToFollowElemContent className='z-[60]'>
        <Menu
          showDelete={!isCurrentWorkspaceDatasetOperator}
          openRenameModal={openRenameModal}
--- a/web/app/components/app-sidebar/dataset-info/menu-item.tsx
+++ b/web/app/components/app-sidebar/dataset-info/menu-item.tsx
@ -4,7 +4,7 @@ import type { RemixiconComponentType } from '@remixicon/react'
 type MenuItemProps = {
  name: string
  Icon: RemixiconComponentType
-  handleClick?: (e: React.MouseEvent<HTMLDivElement>) => void
+  handleClick?: () => void
 }

 const MenuItem = ({
@ -15,7 +15,11 @@ const MenuItem = ({
  return (
    <div
      className='flex items-center gap-x-1 rounded-lg px-2 py-1.5 hover:bg-state-base-hover'
-      onClick={handleClick}
+      onClick={(e) => {
+        e.preventDefault()
+        e.stopPropagation()
+        handleClick?.()
+      }}
    >
      <Icon className='size-4 text-text-tertiary' />
      <span className='system-md-regular px-1 text-text-secondary'>{name}</span>
--- a/web/app/components/app-sidebar/dataset-info/menu.tsx
+++ b/web/app/components/app-sidebar/dataset-info/menu.tsx
@ -19,36 +19,18 @@ const Menu = ({
 }: MenuProps) => {
  const { t } = useTranslation()

-  const onClickRename = async (e: React.MouseEvent<HTMLDivElement>) => {
-    e.stopPropagation()
-    e.preventDefault()
-    openRenameModal()
-  }
-
-  const onClickExport = async (e: React.MouseEvent<HTMLDivElement>) => {
-    e.stopPropagation()
-    e.preventDefault()
-    handleExportPipeline()
-  }
-
-  const onClickDelete = async (e: React.MouseEvent<HTMLDivElement>) => {
-    e.stopPropagation()
-    e.preventDefault()
-    detectIsUsedByApp()
-  }
-
  return (
    <div className='flex w-[200px] flex-col rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg shadow-shadow-shadow-5 backdrop-blur-[5px]'>
      <div className='flex flex-col p-1'>
        <MenuItem
          Icon={RiEditLine}
          name={t('common.operation.edit')}
-          handleClick={onClickRename}
+          handleClick={openRenameModal}
        />
        <MenuItem
          Icon={RiFileDownloadLine}
          name={t('datasetPipeline.operations.exportPipeline')}
-          handleClick={onClickExport}
+          handleClick={handleExportPipeline}
        />
      </div>
      {showDelete && (
@ -58,7 +40,7 @@ const Menu = ({
            <MenuItem
              Icon={RiDeleteBinLine}
              name={t('common.operation.delete')}
-              handleClick={onClickDelete}
+              handleClick={detectIsUsedByApp}
            />
          </div>
        </>
--- a/web/app/components/app-sidebar/dataset-sidebar-dropdown.tsx
+++ b/web/app/components/app-sidebar/dataset-sidebar-dropdown.tsx
@ -0,0 +1,160 @@
+import React, { useCallback, useRef, useState } from 'react'
+import {
+  RiMenuLine,
+} from '@remixicon/react'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import AppIcon from '../base/app-icon'
+import Divider from '../base/divider'
+import NavLink from './navLink'
+import type { NavIcon } from './navLink'
+import cn from '@/utils/classnames'
+import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
+import Effect from '../base/effect'
+import Dropdown from './dataset-info/dropdown'
+import type { DataSet } from '@/models/datasets'
+import { DOC_FORM_TEXT } from '@/models/datasets'
+import { useKnowledge } from '@/hooks/use-knowledge'
+import { useTranslation } from 'react-i18next'
+import { useDatasetRelatedApps } from '@/service/knowledge/use-dataset'
+import ExtraInfo from '../datasets/extra-info'
+
+type DatasetSidebarDropdownProps = {
+  navigation: Array<{
+    name: string
+    href: string
+    icon: NavIcon
+    selectedIcon: NavIcon
+    disabled?: boolean
+  }>
+}
+
+const DatasetSidebarDropdown = ({
+  navigation,
+}: DatasetSidebarDropdownProps) => {
+  const { t } = useTranslation()
+  const dataset = useDatasetDetailContextWithSelector(state => state.dataset) as DataSet
+
+  const { data: relatedApps } = useDatasetRelatedApps(dataset.id)
+
+  const [open, doSetOpen] = useState(false)
+  const openRef = useRef(open)
+  const setOpen = useCallback((v: boolean) => {
+    doSetOpen(v)
+    openRef.current = v
+  }, [doSetOpen])
+  const handleTrigger = useCallback(() => {
+    setOpen(!openRef.current)
+  }, [setOpen])
+
+  const iconInfo = dataset.icon_info || {
+    icon: '📙',
+    icon_type: 'emoji',
+    icon_background: '#FFF4ED',
+    icon_url: '',
+  }
+  const isExternalProvider = dataset.provider === 'external'
+  const { formatIndexingTechniqueAndMethod } = useKnowledge()
+
+  if (!dataset)
+    return null
+
+  return (
+    <>
+      <div className='fixed left-2 top-2 z-20'>
+        <PortalToFollowElem
+          open={open}
+          onOpenChange={setOpen}
+          placement='bottom-start'
+          offset={{
+            mainAxis: -41,
+          }}
+        >
+          <PortalToFollowElemTrigger onClick={handleTrigger}>
+            <div
+              className={cn(
+                'flex cursor-pointer items-center rounded-[10px] border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-1 shadow-lg backdrop-blur-sm hover:bg-background-default-hover',
+                open && 'bg-background-default-hover',
+              )}
+            >
+              <AppIcon
+                size='small'
+                iconType={iconInfo.icon_type}
+                icon={iconInfo.icon}
+                background={iconInfo.icon_background}
+                imageUrl={iconInfo.icon_url}
+              />
+              <RiMenuLine className='size-4 text-text-tertiary' />
+            </div>
+          </PortalToFollowElemTrigger>
+          <PortalToFollowElemContent className='z-50'>
+            <div className='relative w-[216px] rounded-xl border-[0.5px] border-components-panel-border bg-background-default-subtle shadow-lg'>
+              <Effect className='-left-5 top-[-22px] opacity-15' />
+              <div className='flex flex-col gap-y-2 p-4'>
+                <div className='flex items-center justify-between'>
+                  <AppIcon
+                    size='medium'
+                    iconType={iconInfo.icon_type}
+                    icon={iconInfo.icon}
+                    background={iconInfo.icon_background}
+                    imageUrl={iconInfo.icon_url}
+                  />
+                  <Dropdown expand />
+                </div>
+                <div className='flex flex-col gap-y-1 pb-0.5'>
+                  <div
+                    className='system-md-semibold truncate text-text-secondary'
+                    title={dataset.name}
+                  >
+                    {dataset.name}
+                  </div>
+                  <div className='system-2xs-medium-uppercase text-text-tertiary'>
+                    {isExternalProvider && t('dataset.externalTag')}
+                    {!isExternalProvider && 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>
+                      </div>
+                    )}
+                  </div>
+                </div>
+                {!!dataset.description && (
+                  <p className='system-xs-regular line-clamp-3 text-text-tertiary first-letter:capitalize'>
+                    {dataset.description}
+                  </p>
+                )}
+              </div>
+              <div className='px-4 py-2'>
+                <Divider
+                  type='horizontal'
+                  bgStyle='gradient'
+                  className='my-0 h-px bg-gradient-to-r from-divider-subtle to-background-gradient-mask-transparent'
+                />
+              </div>
+              <nav className='flex min-h-[200px] grow flex-col gap-y-0.5 px-3 py-2'>
+                {navigation.map((item, index) => {
+                  return (
+                    <NavLink
+                      key={index}
+                      mode='expand'
+                      iconMap={{ selected: item.selectedIcon, normal: item.icon }}
+                      name={item.name}
+                      href={item.href}
+                      disabled={!!item.disabled}
+                    />
+                  )
+                })}
+              </nav>
+              <ExtraInfo relatedApps={relatedApps} expand documentCount={dataset.document_count} />
+            </div>
+          </PortalToFollowElemContent>
+        </PortalToFollowElem>
+      </div>
+    </>
+  )
+}
+
+export default DatasetSidebarDropdown
--- a/web/app/components/app-sidebar/index.tsx
+++ b/web/app/components/app-sidebar/index.tsx
@ -14,6 +14,7 @@ import Divider from '../base/divider'
 import { useHover, useKeyPress } from 'ahooks'
 import ToggleButton from './toggle-button'
 import { getKeyboardKeyCodeBySystem } from '../workflow/utils'
+import DatasetSidebarDropdown from './dataset-sidebar-dropdown'

 export type IAppDetailNavProps = {
  iconType?: 'app' | 'dataset' | 'notion'
@ -50,6 +51,7 @@ const AppDetailNav = ({
  // Check if the current path is a workflow canvas & fullscreen
  const pathname = usePathname()
  const inWorkflowCanvas = pathname.endsWith('/workflow')
+  const isPipelineCanvas = pathname.endsWith('/pipeline')
  const workflowCanvasMaximize = localStorage.getItem('workflow-canvas-maximize') === 'true'
  const [hideHeader, setHideHeader] = useState(workflowCanvasMaximize)
  const { eventEmitter } = useEventEmitterContextContext()
@ -79,6 +81,14 @@ const AppDetailNav = ({
    )
  }

+  if (isPipelineCanvas && hideHeader) {
+    return (
+      <div className='flex w-0 shrink-0'>
+        <DatasetSidebarDropdown navigation={navigation} />
+      </div>
+    )
+  }
+
  return (
    <div
      ref={sidebarRef}
--- a/web/app/components/datasets/extra-info.tsx
+++ b/web/app/components/datasets/extra-info.tsx
@ -0,0 +1,69 @@
+import React from 'react'
+import type { RelatedAppResponse } from '@/models/datasets'
+import { useTranslation } from 'react-i18next'
+import Divider from '../base/divider'
+import Tooltip from '../base/tooltip'
+import LinkedAppsPanel from '../base/linked-apps-panel'
+import NoLinkedAppsPanel from './no-linked-apps-panel'
+import { RiInformation2Line } from '@remixicon/react'
+
+type IExtraInfoProps = {
+  relatedApps?: RelatedAppResponse
+  documentCount?: number
+  expand: boolean
+}
+
+const ExtraInfo = ({
+  relatedApps,
+  documentCount,
+  expand,
+}: IExtraInfoProps) => {
+  const { t } = useTranslation()
+
+  const hasRelatedApps = relatedApps?.data && relatedApps?.data?.length > 0
+  const relatedAppsTotal = relatedApps?.data?.length || 0
+
+  if (!expand)
+    return null
+
+  return (
+    <div className='flex items-center gap-x-0.5 p-2 pb-3'>
+      <div className='flex grow flex-col px-2 pb-1.5 pt-1'>
+        <div className='system-md-semibold-uppercase text-text-secondary'>
+          {documentCount ?? '--'}
+        </div>
+        <div className='system-2xs-medium-uppercase text-text-tertiary'>
+          {t('common.datasetMenus.documents')}
+        </div>
+      </div>
+      <div className='py-2 pl-0.5 pr-1.5'>
+        <Divider className='text-test-divider-regular h-full w-fit' />
+      </div>
+      <div className='flex grow flex-col px-2 pb-1.5 pt-1'>
+        <div className='system-md-semibold-uppercase text-text-secondary'>
+          {relatedAppsTotal ?? '--'}
+        </div>
+        <Tooltip
+          position='top-start'
+          noDecoration
+          needsDelay
+          popupContent={
+            hasRelatedApps ? (
+              <LinkedAppsPanel
+                relatedApps={relatedApps.data}
+                isMobile={expand}
+              />
+            ) : <NoLinkedAppsPanel />
+          }
+        >
+          <div className='system-2xs-medium-uppercase flex cursor-pointer items-center gap-x-0.5 text-text-tertiary'>
+            <span>{t('common.datasetMenus.relatedApp')}</span>
+            <RiInformation2Line className='size-3' />
+          </div>
+        </Tooltip>
+      </div>
+    </div>
+  )
+}
+
+export default React.memo(ExtraInfo)
--- a/web/app/components/datasets/list/dataset-card/operation-item.tsx
+++ b/web/app/components/datasets/list/dataset-card/operation-item.tsx
@ -4,7 +4,7 @@ import type { RemixiconComponentType } from '@remixicon/react'
 type OperationItemProps = {
  Icon: RemixiconComponentType
  name: string
-  handleClick?: (e: React.MouseEvent<HTMLDivElement>) => void
+  handleClick?: () => void
 }

 const OperationItem = ({
@ -15,7 +15,11 @@ const OperationItem = ({
  return (
    <div
      className='flex cursor-pointer items-center gap-x-1 rounded-lg px-2 py-1.5 hover:bg-state-base-hover'
-      onClick={handleClick}
+      onClick={(e) => {
+        e.preventDefault()
+        e.stopPropagation()
+        handleClick?.()
+      }}
    >
      <Icon className='size-4 text-text-tertiary' />
      <span className='system-md-regular px-1 text-text-secondary'>
--- a/web/app/components/datasets/list/dataset-card/operations.tsx
+++ b/web/app/components/datasets/list/dataset-card/operations.tsx
@ -19,36 +19,18 @@ const Operations = ({
 }: OperationsProps) => {
  const { t } = useTranslation()

-  const onClickRename = async (e: React.MouseEvent<HTMLDivElement>) => {
-    e.stopPropagation()
-    e.preventDefault()
-    openRenameModal()
-  }
-
-  const onClickExport = async (e: React.MouseEvent<HTMLDivElement>) => {
-    e.stopPropagation()
-    e.preventDefault()
-    handleExportPipeline()
-  }
-
-  const onClickDelete = async (e: React.MouseEvent<HTMLDivElement>) => {
-    e.stopPropagation()
-    e.preventDefault()
-    detectIsUsedByApp()
-  }
-
  return (
    <div className='relative flex w-full flex-col rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg shadow-shadow-shadow-5'>
      <div className='flex flex-col p-1'>
        <OperationItem
          Icon={RiEditLine}
          name={t('common.operation.edit')}
-          handleClick={onClickRename}
+          handleClick={openRenameModal}
        />
        <OperationItem
          Icon={RiFileDownloadLine}
          name={t('datasetPipeline.operations.exportPipeline')}
-          handleClick={onClickExport}
+          handleClick={handleExportPipeline}
        />
      </div>
      {showDelete && (
@ -58,7 +40,7 @@ const Operations = ({
            <OperationItem
              Icon={RiDeleteBinLine}
              name={t('common.operation.delete')}
-              handleClick={onClickDelete}
+              handleClick={detectIsUsedByApp}
            />
          </div>
        </>
--- a/web/app/components/header/header-wrapper.tsx
+++ b/web/app/components/header/header-wrapper.tsx
@ -16,6 +16,7 @@ const HeaderWrapper = ({
  const isBordered = ['/apps', '/datasets', '/datasets/create', '/tools'].includes(pathname)
  // Check if the current path is a workflow canvas & fullscreen
  const inWorkflowCanvas = pathname.endsWith('/workflow')
+  const isPipelineCanvas = pathname.endsWith('/pipeline')
  const workflowCanvasMaximize = localStorage.getItem('workflow-canvas-maximize') === 'true'
  const [hideHeader, setHideHeader] = useState(workflowCanvasMaximize)
  const { eventEmitter } = useEventEmitterContextContext()
@ -30,7 +31,7 @@ const HeaderWrapper = ({
      'sticky left-0 right-0 top-0 z-[15] flex min-h-[56px] shrink-0 grow-0 basis-auto flex-col',
      s.header,
      isBordered ? 'border-b border-divider-regular' : '',
-      hideHeader && inWorkflowCanvas && 'hidden',
+      hideHeader && (inWorkflowCanvas || isPipelineCanvas) && 'hidden',
    )}
    >
      {children}
--- a/web/app/components/workflow/header/index.tsx
+++ b/web/app/components/workflow/header/index.tsx
@ -21,6 +21,7 @@ const Header = ({
 }: HeaderProps) => {
  const pathname = usePathname()
  const inWorkflowCanvas = pathname.endsWith('/workflow')
+  const isPipelineCanvas = pathname.endsWith('/pipeline')
  const {
    normal,
    restoring,
@ -32,7 +33,7 @@ const Header = ({
    <div
      className='absolute left-0 top-0 z-10 flex h-14 w-full items-center justify-between bg-mask-top2bottom-gray-50-to-transparent px-3'
    >
-      {inWorkflowCanvas && maximizeCanvas && <div className='h-14 w-[52px]' />}
+      {(inWorkflowCanvas || isPipelineCanvas) && maximizeCanvas && <div className='h-14 w-[52px]' />}
      {
        normal && (
          <HeaderInNormal