Feat: Display the knowledge graph on the knowledge base page #4543 (#…

…4587)

### What problem does this PR solve?

Feat: Display the knowledge graph on the knowledge base page #4543

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/components/chunk-method-modal/index.tsx

@@ -30,6 +30,9 @@ import LayoutRecognize from '../layout-recognize';
 import ParseConfiguration, {
   showRaptorParseConfiguration,
 } from '../parse-configuration';
+import GraphRagItems, {
+  showGraphRagItems,
+} from '../parse-configuration/graph-rag-items';
 import styles from './index.less';
 
 interface IProps extends Omit<IModalManagerChildrenProps, 'showModal'> {
@@ -296,6 +299,7 @@ const ChunkMethodModal: React.FC<IProps> = ({
         {showRaptorParseConfiguration(selectedTag) && (
           <ParseConfiguration></ParseConfiguration>
         )}
+        {showGraphRagItems(selectedTag) && <GraphRagItems></GraphRagItems>}
         {showEntityTypes && <EntityTypesItem></EntityTypesItem>}
       </Form>
     </Modal>

web/src/components/entity-types-item.tsx

@@ -5,16 +5,22 @@ import EditTag from './edit-tag';
 const initialEntityTypes = [
   'organization',
   'person',
-  'location',
+  'geo',
   'event',
-  'time',
+  'category',
 ];
 
-const EntityTypesItem = () => {
+type IProps = {
+  field?: string[];
+};
+
+const EntityTypesItem = ({
+  field = ['parser_config', 'entity_types'],
+}: IProps) => {
   const { t } = useTranslate('knowledgeConfiguration');
   return (
     <Form.Item
-      name={['parser_config', 'entity_types']}
+      name={field}
       label={t('entityTypes')}
       rules={[{ required: true }]}
       initialValue={initialEntityTypes}

web/src/components/indented-tree/modal.tsx

@@ -1,16 +1,15 @@
-import { useFetchKnowledgeGraph } from '@/hooks/chunk-hooks';
-import { Modal } from 'antd';
 import { useTranslation } from 'react-i18next';
 import IndentedTree from './indented-tree';
 
+import { useFetchKnowledgeGraph } from '@/hooks/knowledge-hooks';
 import { IModalProps } from '@/interfaces/common';
+import { Modal } from 'antd';
 
 const IndentedTreeModal = ({
-  documentId,
   visible,
   hideModal,
 }: IModalProps<any> & { documentId: string }) => {
-  const { data } = useFetchKnowledgeGraph(documentId);
+  const { data } = useFetchKnowledgeGraph();
   const { t } = useTranslation();
 
   return (
@@ -22,7 +21,7 @@ const IndentedTreeModal = ({
       footer={null}
     >
       <section>
-        <IndentedTree data={data?.data?.mind_map} show></IndentedTree>
+        <IndentedTree data={data?.mind_map} show></IndentedTree>
       </section>
     </Modal>
   );

web/src/components/layout-recognize.tsx

@@ -1,17 +1,35 @@
+import { LlmModelType } from '@/constants/knowledge';
 import { useTranslate } from '@/hooks/common-hooks';
-import { Form, Switch } from 'antd';
+import { useSelectLlmOptionsByModelType } from '@/hooks/llm-hooks';
+import { Form, Select } from 'antd';
+import { useMemo } from 'react';
+
+const enum DocumentType {
+  DeepDOC = 'DeepDOC',
+  PlainText = 'Plain Text',
+}
 
 const LayoutRecognize = () => {
   const { t } = useTranslate('knowledgeDetails');
+  const allOptions = useSelectLlmOptionsByModelType();
+
+  const options = useMemo(() => {
+    const list = [DocumentType.DeepDOC, DocumentType.PlainText].map((x) => ({
+      label: x,
+      value: x,
+    }));
+
+    return [...list, ...allOptions[LlmModelType.Image2text]];
+  }, [allOptions]);
+
   return (
     <Form.Item
       name={['parser_config', 'layout_recognize']}
       label={t('layoutRecognize')}
-      initialValue={true}
-      valuePropName="checked"
+      initialValue={DocumentType.DeepDOC}
       tooltip={t('layoutRecognizeTip')}
     >
-      <Switch />
+      <Select options={options} />
     </Form.Item>
   );
 };

web/src/components/parse-configuration/graph-rag-items.tsx

@@ -0,0 +1,120 @@
+import { useTranslate } from '@/hooks/common-hooks';
+import { Divider, Form, Select, Switch } from 'antd';
+import { upperFirst } from 'lodash';
+import { useCallback, useMemo } from 'react';
+import EntityTypesItem from '../entity-types-item';
+
+const excludedTagParseMethods = ['table', 'knowledge_graph', 'tag'];
+
+export const showTagItems = (parserId: string) => {
+  return !excludedTagParseMethods.includes(parserId);
+};
+
+const enum MethodValue {
+  General = 'general',
+  Light = 'light',
+}
+
+export const excludedParseMethods = [
+  'table',
+  'resume',
+  'picture',
+  'knowledge_graph',
+  'qa',
+  'tag',
+];
+
+export const showGraphRagItems = (parserId: string) => {
+  return !excludedParseMethods.includes(parserId);
+};
+
+// The three types "table", "resume" and "one" do not display this configuration.
+const GraphRagItems = () => {
+  const { t } = useTranslate('knowledgeConfiguration');
+
+  const methodOptions = useMemo(() => {
+    return [MethodValue.Light, MethodValue.General].map((x) => ({
+      value: x,
+      label: upperFirst(x),
+    }));
+  }, []);
+
+  const renderWideTooltip = useCallback(
+    (title: React.ReactNode | string) => {
+      return {
+        title: typeof title === 'string' ? t(title) : title,
+        overlayInnerStyle: { width: '50vw' },
+      };
+    },
+    [t],
+  );
+
+  return (
+    <>
+      <Divider></Divider>
+      <Form.Item
+        name={['parser_config', 'graphrag', 'use_graphrag']}
+        label={t('useGraphRag')}
+        initialValue={false}
+        valuePropName="checked"
+        tooltip={renderWideTooltip('useGraphRagTip')}
+      >
+        <Switch />
+      </Form.Item>
+      <Form.Item
+        shouldUpdate={(prevValues, curValues) =>
+          prevValues.parser_config.graphrag.use_graphrag !==
+          curValues.parser_config.graphrag.use_graphrag
+        }
+      >
+        {({ getFieldValue }) => {
+          const useRaptor = getFieldValue([
+            'parser_config',
+            'graphrag',
+            'use_graphrag',
+          ]);
+
+          return (
+            useRaptor && (
+              <>
+                <EntityTypesItem
+                  field={['parser_config', 'graphrag', 'entity_types']}
+                ></EntityTypesItem>
+                <Form.Item
+                  name={['parser_config', 'graphrag', 'method']}
+                  label={t('graphRagMethod')}
+                  tooltip={renderWideTooltip(
+                    <div
+                      dangerouslySetInnerHTML={{
+                        __html: t('graphRagMethodTip'),
+                      }}
+                    ></div>,
+                  )}
+                  initialValue={MethodValue.Light}
+                >
+                  <Select options={methodOptions} />
+                </Form.Item>
+                <Form.Item
+                  name={['parser_config', 'graphrag', 'resolution']}
+                  label={t('resolution')}
+                  tooltip={renderWideTooltip('resolutionTip')}
+                >
+                  <Switch />
+                </Form.Item>
+                <Form.Item
+                  name={['parser_config', 'graphrag', 'community']}
+                  label={t('community')}
+                  tooltip={renderWideTooltip('communityTip')}
+                >
+                  <Switch />
+                </Form.Item>
+              </>
+            )
+          );
+        }}
+      </Form.Item>
+    </>
+  );
+};
+
+export default GraphRagItems;

web/src/components/use-knowledge-graph-item.tsx

@@ -0,0 +1,21 @@
+import { Form, Switch } from 'antd';
+import { useTranslation } from 'react-i18next';
+
+type IProps = {
+  filedName: string[];
+};
+
+export function UseKnowledgeGraphItem({ filedName }: IProps) {
+  const { t } = useTranslation();
+
+  return (
+    <Form.Item
+      label={t('chat.useKnowledgeGraph')}
+      tooltip={t('chat.useKnowledgeGraphTip')}
+      name={filedName}
+      initialValue={false}
+    >
+      <Switch></Switch>
+    </Form.Item>
+  );
+}

web/src/constants/knowledge.ts

@@ -2,6 +2,7 @@ export enum KnowledgeRouteKey {
   Dataset = 'dataset',
   Testing = 'testing',
   Configuration = 'configuration',
+  KnowledgeGraph = 'knowledgeGraph',
 }
 
 export const DatasetBaseKey = 'dataset';

web/src/hooks/chunk-hooks.ts

@@ -206,23 +206,3 @@ export const useFetchChunk = (chunkId?: string): ResponseType<any> => {
 
   return data;
 };
-
-export const useFetchKnowledgeGraph = (
-  documentId: string,
-): ResponseType<any> => {
-  const { data } = useQuery({
-    queryKey: ['fetchKnowledgeGraph', documentId],
-    initialData: true,
-    enabled: !!documentId,
-    gcTime: 0,
-    queryFn: async () => {
-      const data = await kbService.knowledge_graph({
-        doc_id: documentId,
-      });
-
-      return data;
-    },
-  });
-
-  return data;
-};

web/src/hooks/common-hooks.tsx

@@ -1,7 +1,7 @@
 import { ExclamationCircleFilled } from '@ant-design/icons';
 import { App } from 'antd';
 import isEqual from 'lodash/isEqual';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { ReactNode, useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 export const useSetModalState = () => {
@@ -78,6 +78,7 @@ export function useDynamicSVGImport(
 
 interface IProps {
   title?: string;
+  content?: ReactNode;
   onOk?: (...args: any[]) => any;
   onCancel?: (...args: any[]) => any;
 }
@@ -87,12 +88,12 @@ export const useShowDeleteConfirm = () => {
   const { t } = useTranslation();
 
   const showDeleteConfirm = useCallback(
-    ({ title, onOk, onCancel }: IProps): Promise<number> => {
+    ({ title, content, onOk, onCancel }: IProps): Promise<number> => {
       return new Promise((resolve, reject) => {
         modal.confirm({
           title: title ?? t('common.deleteModalTitle'),
           icon: <ExclamationCircleFilled />,
-          // content: 'Some descriptions',
+          content,
           okText: t('common.ok'),
           okType: 'danger',
           cancelText: t('common.cancel'),

web/src/hooks/knowledge-hooks.ts

@@ -1,11 +1,13 @@
 import { ResponsePostType } from '@/interfaces/database/base';
 import {
   IKnowledge,
+  IKnowledgeGraph,
   IRenameTag,
   ITestingResult,
 } from '@/interfaces/database/knowledge';
 import i18n from '@/locales/config';
 import kbService, {
+  getKnowledgeGraph,
   listTag,
   removeTag,
   renameTag,
@@ -373,3 +375,20 @@ export const useFetchTagListByKnowledgeIds = () => {
 };
 
 //#endregion
+
+export function useFetchKnowledgeGraph() {
+  const knowledgeBaseId = useKnowledgeBaseId();
+
+  const { data, isFetching: loading } = useQuery<IKnowledgeGraph>({
+    queryKey: ['fetchKnowledgeGraph', knowledgeBaseId],
+    initialData: { graph: {}, mind_map: {} } as IKnowledgeGraph,
+    enabled: !!knowledgeBaseId,
+    gcTime: 0,
+    queryFn: async () => {
+      const { data } = await getKnowledgeGraph(knowledgeBaseId);
+      return data?.data;
+    },
+  });
+
+  return { data, loading };
+}

web/src/interfaces/database/document.ts

@@ -33,8 +33,17 @@ export interface IParserConfig {
   layout_recognize?: boolean;
   pages: any[];
   raptor?: Raptor;
+  graphrag?: GraphRag;
 }
 
 interface Raptor {
   use_raptor: boolean;
 }
+
+interface GraphRag {
+  community?: boolean;
+  entity_types?: string[];
+  method?: string;
+  resolution?: boolean;
+  use_graphrag?: boolean;
+}

web/src/interfaces/database/knowledge.ts

@@ -1,4 +1,5 @@
 import { RunningStatus } from '@/constants/knowledge';
+import { TreeData } from '@antv/g6/lib/types';
 
 // knowledge base
 export interface IKnowledge {
@@ -136,3 +137,8 @@ export interface ITestingResult {
 }
 
 export type IRenameTag = { fromTag: string; toTag: string };
+
+export interface IKnowledgeGraph {
+  graph: Record<string, any>;
+  mind_map: TreeData;
+}