feat: locate the specific location of the document based on the coordinates of the chunk

web/src/interfaces/database/knowledge.ts

@@ -74,6 +74,7 @@ export interface IChunk {
   docnm_kwd: string;
   img_id: string;
   important_kwd: any[];
+  positions: number[][];
 }
 
 export interface ITestingChunk {

web/src/less/variable.less

@@ -8,6 +8,8 @@
 @gray11: rgba(232, 232, 234, 1);
 @purple: rgba(127, 86, 217, 1);
 @selectedBackgroundColor: rgba(239, 248, 255, 1);
+@blurBackground: rgba(22, 119, 255, 0.5);
+@blurBackgroundHover: rgba(22, 119, 255, 0.2);
 
 @fontSize12: 12px;
 @fontSize14: 14px;

web/src/pages/add-knowledge/components/knowledge-chunk/components/chunk-card/index.less

@@ -13,6 +13,28 @@
     color: red;
     font-style: normal;
   }
+
+  caption {
+    color: @blurBackground;
+    font-size: 20px;
+    height: 50px;
+    line-height: 50px;
+    font-weight: 600;
+    margin-bottom: 10px;
+  }
+
+  th {
+    color: #fff;
+    background-color: @blurBackground;
+  }
+
+  td:hover {
+    background: @blurBackgroundHover;
+  }
+
+  tr:nth-child(even) {
+    background-color: #f2f2f2;
+  }
 }
 
 .cardSelected {

web/src/pages/add-knowledge/components/knowledge-chunk/components/chunk-card/index.tsx

@@ -64,9 +64,7 @@ const ChunkCard = ({
             onClick={handleContentClick}
             className={styles.content}
             dangerouslySetInnerHTML={{ __html: item.content_with_weight }}
-          >
+          ></section>
-            {/* {item.content_with_weight} */}
-          </section>
           <div>
             <Switch checked={enabled} onChange={onChange} />
           </div>

web/src/pages/add-knowledge/components/knowledge-chunk/components/document-preview/hightlights.ts

@@ -6,21 +6,27 @@ export const testHighlights = [
     position: {
       boundingRect: {
         x1: 219.7,
+        // x1: 419.7,
         y1: 204.3,
+        // y1: 304.3,
         x2: 547.0,
+        // x2: 747.0,
         y2: 264.0,
-        width: 849,
+        // y2: 364.0,
-        height: 1200,
       },
       rects: [
-        {
+        // {
-          x1: 219.7,
+        //   x1: 219.7,
-          y1: 204.3,
+        //   // x1: 419.7,
-          x2: 547.0,
+        //   y1: 204.3,
-          y2: 264.0,
+        //   // y1: 304.3,
-          width: 849,
+        //   x2: 547.0,
-          height: 1200,
+        //   // x2: 747.0,
-        },
+        //   y2: 264.0,
+        //   // y2: 364.0,
+        //   width: 849,
+        //   height: 1200,
+        // },
       ],
       pageNumber: 9,
     },
@@ -28,6 +34,56 @@ export const testHighlights = [
       text: 'Flow or TypeScript?',
       emoji: '🔥',
     },
-    id: '8245652131754351',
+    id: 'jsdlihdkghergjl',
   },
-];
+  {
+    content: {
+      text: '图2：乘联会预计6 月新能源乘用车厂商批发销量74 万辆，环比增长10%，同比增长30%。',
+    },
+    position: {
+      boundingRect: {
+        x1: 219.0,
+        x2: 546.0,
+        y1: 616.0,
+        y2: 674.7,
+      },
+      rects: [],
+      pageNumber: 6,
+    },
+    comment: {
+      text: 'Flow or TypeScript?',
+      emoji: '🔥',
+    },
+    id: 'bfdbtymkhjildbfghserrgrt',
+  },
+  {
+    content: {
+      text: '图2：乘联会预计6 月新能源乘用车厂商批发销量74 万辆，环比增长10%，同比增长30%。',
+    },
+    position: {
+      boundingRect: {
+        x1: 73.7,
+        x2: 391.7,
+        y1: 570.3,
+        y2: 676.3,
+      },
+      rects: [],
+      pageNumber: 1,
+    },
+    comment: {
+      text: '',
+      emoji: '',
+    },
+    id: 'fgnhxdvsesgmghyu',
+  },
+].map((x) => {
+  const boundingRect = x.position.boundingRect;
+  const ret: any = {
+    width: 849,
+    height: 1200,
+  };
+  Object.entries(boundingRect).forEach(([key, value]) => {
+    ret[key] = value / 0.7;
+  });
+  return { ...x, position: { ...x.position, boundingRect: ret, rects: [ret] } };
+});

web/src/pages/add-knowledge/components/knowledge-chunk/components/document-preview/index.less

@@ -6,6 +6,9 @@
   position: relative;
   :global(.PdfHighlighter) {
     overflow-x: hidden;
-    // left: 0;
+  }
+  :global(.Highlight--scrolledTo .Highlight__part) {
+    overflow-x: hidden;
+    background-color: rgba(255, 226, 143, 1);
   }
 }

web/src/pages/add-knowledge/components/knowledge-chunk/components/document-preview/preview.tsx

@@ -1,16 +1,15 @@
 import { Spin } from 'antd';
-import { useRef, useState } from 'react';
+import { useEffect, useRef } from 'react';
-import type { NewHighlight } from 'react-pdf-highlighter';
 import {
   AreaHighlight,
   Highlight,
+  NewHighlight,
   PdfHighlighter,
   PdfLoader,
   Popup,
   Tip,
 } from 'react-pdf-highlighter';
-import { useGetSelectedChunk } from '../../hooks';
+import { useGetChunkHighlights, useGetSelectedChunk } from '../../hooks';
-import { testHighlights } from './hightlights';
 import { useGetDocumentUrl } from './hooks';
 
 import styles from './index.less';
@@ -36,7 +35,9 @@ const Preview = ({ selectedChunkId }: IProps) => {
   const url = useGetDocumentUrl();
   const selectedChunk = useGetSelectedChunk(selectedChunkId);
 
-  const [state, setState] = useState<any>(testHighlights);
+  // const [state, setState] = useState<any>(testHighlights);
+  const state = useGetChunkHighlights(selectedChunkId);
+
   const ref = useRef((highlight: any) => {});
 
   const parseIdFromHash = () =>
@@ -67,7 +68,7 @@ const Preview = ({ selectedChunkId }: IProps) => {
 
     console.log('Saving highlight', highlight);
 
-    setState([{ ...highlight, id: getNextId() }, ...highlights]);
+    // setState([{ ...highlight, id: getNextId() }, ...highlights]);
   };
 
   const updateHighlight = (
@@ -77,29 +78,31 @@ const Preview = ({ selectedChunkId }: IProps) => {
   ) => {
     console.log('Updating highlight', highlightId, position, content);
 
-    setState(
+    // setState(
-      state.map((h: any) => {
+    //   state.map((h: any) => {
-        const {
+    //     const {
-          id,
+    //       id,
-          position: originalPosition,
+    //       position: originalPosition,
-          content: originalContent,
+    //       content: originalContent,
-          ...rest
+    //       ...rest
-        } = h;
+    //     } = h;
-        return id === highlightId
+    //     return id === highlightId
-          ? {
+    //       ? {
-              id,
+    //           id,
-              position: { ...originalPosition, ...position },
+    //           position: { ...originalPosition, ...position },
-              content: { ...originalContent, ...content },
+    //           content: { ...originalContent, ...content },
-              ...rest,
+    //           ...rest,
-            }
+    //         }
-          : h;
+    //       : h;
-      }),
+    //   }),
-    );
+    // );
   };
 
-  // useEffect(() => {
+  useEffect(() => {
-  //   ref.current(testHighlights[0]);
+    if (state.length > 0) {
-  // }, [selectedChunk]);
+      ref.current(state[0]);
+    }
+  }, [state]);
 
   return (
     <div className={styles.documentContainer}>

web/src/pages/add-knowledge/components/knowledge-chunk/hooks.ts

@@ -1,6 +1,8 @@
 import { IChunk, IKnowledgeFile } from '@/interfaces/database/knowledge';
-import { useCallback, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
+import { IHighlight } from 'react-pdf-highlighter';
 import { useSelector } from 'umi';
+import { v4 as uuid } from 'uuid';
 
 export const useSelectDocumentInfo = () => {
   const documentInfo: IKnowledgeFile = useSelector(
@@ -28,5 +30,46 @@ export const useHandleChunkCardClick = () => {
 
 export const useGetSelectedChunk = (selectedChunkId: string) => {
   const chunkList: IChunk[] = useSelectChunkList();
-  return chunkList.find((x) => x.chunk_id === selectedChunkId);
+  return (
+    chunkList.find((x) => x.chunk_id === selectedChunkId) ?? ({} as IChunk)
+  );
+};
+
+export const useGetChunkHighlights = (
+  selectedChunkId: string,
+): IHighlight[] => {
+  const selectedChunk: IChunk = useGetSelectedChunk(selectedChunkId);
+
+  const highlights: IHighlight[] = useMemo(() => {
+    return Array.isArray(selectedChunk?.positions)
+      ? selectedChunk?.positions?.map((x) => {
+          const actualPositions = x.map((y, index) =>
+            index !== 0 ? y / 0.7 : y,
+          );
+          const boundingRect = {
+            width: 849,
+            height: 1200,
+            x1: actualPositions[1],
+            x2: actualPositions[2],
+            y1: actualPositions[3],
+            y2: actualPositions[4],
+          };
+          return {
+            id: uuid(),
+            comment: {
+              text: '',
+              emoji: '',
+            },
+            content: { text: selectedChunk.content_with_weight },
+            position: {
+              boundingRect: boundingRect,
+              rects: [boundingRect],
+              pageNumber: x[0],
+            },
+          };
+        })
+      : [];
+  }, [selectedChunk]);
+
+  return highlights;
 };