fix graph bugs

web/src/components/RefsComponent.vue

@@ -6,11 +6,11 @@
       <span class="filetag item"
         v-for="(results, filename) in message.groupedResults"
         :key="filename"
-        @click="openDetail = true"
+        @click="toggleDrawer(filename)"
       >
         <FileTextOutlined /> {{ filename }}
         <a-drawer
-          v-model:open="openDetail"
+          v-model:open="openDetail[filename]"
           title="检索详情"
           width="800"
           :contentWrapperStyle="{ maxWidth: '100%'}"
@@ -19,7 +19,7 @@
           rootClassName="root"
         >
           <div class="fileinfo">
-            <p><strong>文件名:</strong> {{ results[0].file.filename }}</p>
+            <p><strong>文件名:</strong> {{ filename }}</p>
             <p><strong>文件类型:</strong> {{ results[0].file.type }}</p>
             <p><strong>创建时间:</strong> {{ new Date(results[0].file.created_at * 1000).toLocaleString() }}</p>
           </div>
@@ -47,7 +47,7 @@
 </template>
 
 <script setup>
-import { ref, computed } from 'vue'
+import { ref, computed, reactive } from 'vue'
 import {
   GlobalOutlined,
   FileTextOutlined,
@@ -59,7 +59,18 @@ const props = defineProps({
 
 const message = ref(props.message)
 
-const openDetail = ref(false)
+// 使用 reactive 创建一个响应式对象来存储每个文件的抽屉状态
+const openDetail = reactive({})
+
+// 初始化 openDetail 对象
+for (const filename in message.value.groupedResults) {
+  openDetail[filename] = false
+}
+
+const toggleDrawer = (filename) => {
+  openDetail[filename] = !openDetail[filename]
+}
+
 const showRefs = computed(() => message.value.role=='received' && message.value.status=='finished')
 </script>
 

web/src/views/GraphView.vue

@@ -10,18 +10,18 @@
   </div>
   <div class="graph-container layout-container" v-else>
     <div class="info">
-      <h2>图数据库 {{ graph?.database_name }}</h2>
+      <h2>图数据库 {{ graphInfo?.database_name }}</h2>
       <p>
-        <span v-if="state.graphloading">加载中</span>
-        <span class="green-dot" v-if="graph?.status == 'open'"></span>
+        <span v-if="state.loadingGraphInfo">加载中</span>
+        <span class="green-dot" v-if="graphInfo?.status == 'open'"></span>
         <span class="red-dot" v-else></span>
-        <span>{{ graph?.status }}</span> ·
-        <span>共 {{ graph?.entity_count }} 实体，{{ graph?.relationship_count }} 个关系</span>
+        <span>{{ graphInfo?.status }}</span> ·
+        <span>共 {{ graphInfo?.entity_count }} 实体，{{ graphInfo?.relationship_count }} 个关系</span>
       </p>
     </div>
     <div class="actions">
       <div class="actions-left">
-        <a-button @click="state.showModal = true">上传文件</a-button>
+        <a-button @click="state.showModal = true"><UploadOutlined /> 上传文件</a-button>
         <a-modal
           :open="state.showModal" title="上传文件"
           @ok="addDocumentByFile"
@@ -42,15 +42,15 @@
             >
               <p class="ant-upload-text">点击或者把文件拖拽到这里上传</p>
               <p class="ant-upload-hint">
-                目前仅支持上传文本文件，如 .pdf, .txt, .md。且同名文件无法重复添加。
+                目前仅支持上传 jsonl 文件。且同名文件无法重复添加。
               </p>
             </a-upload-dragger>
           </div>
         </a-modal>
         <input v-model="sampleNodeCount">
-        <a-button @click="loadSampleNodes">确定</a-button>
+        <a-button @click="loadSampleNodes">获取节点</a-button>
       </div>
-      <div class="action-right">
+      <div class="actions-right">
         <input
           v-model="state.searchInput"
           placeholder="输入要查询的实体"
@@ -75,21 +75,22 @@ import { Graph } from "@antv/g6";
 import { computed, onMounted, reactive, ref } from 'vue';
 import { message } from "ant-design-vue";
 import { useConfigStore } from '@/stores/config';
+import { UploadOutlined } from '@ant-design/icons-vue';
 
 const configStore = useConfigStore()
 
 let graphInstance
-const graph = ref(null)
+const graphInfo = ref(null)
 const container = ref(null);
 const fileList = ref([]);
 const sampleNodeCount = ref(100);
-const subgraph = reactive({
+const graphData = reactive({
   nodes: [],
   edges: [],
 });
 
 const state = reactive({
-  graphloading: false,
+  loadingGraphInfo: false,
   searchInput: '',
   searchLoading: false,
   showModal: false,
@@ -98,27 +99,27 @@ const state = reactive({
 })
 
 
-const loadGraph = () => {
-  state.graphloading = true
+const loadGraphInfo = () => {
+  state.loadingGraphInfo = true
   fetch('/api/database/graph', {
     method: "GET",
   })
     .then(response => response.json())
     .then(data => {
       console.log(data)
-      graph.value = data.graph
-      state.graphloading = false
+      graphInfo.value = data.graph
+      state.loadingGraphInfo = false
     })
     .catch(error => {
       console.error(error)
       message.error(error.message)
-      state.graphloading = false
+      state.loadingGraphInfo = false
     })
 }
 
-const graphData = computed(() => {
+const getGraphData = () => {
   return {
-    nodes: subgraph.nodes.map(node => {
+    nodes: graphData.nodes.map(node => {
       return {
         id: node.id,
         data: {
@@ -126,7 +127,7 @@ const graphData = computed(() => {
         },
       }
     }),
-    edges: subgraph.edges.map(edge => {
+    edges: graphData.edges.map(edge => {
       return {
         source: edge.source_id,
         target: edge.target_id,
@@ -136,7 +137,7 @@ const graphData = computed(() => {
       }
     }),
   }
-})
+}
 
 const addDocumentByFile = () => {
   state.precessing = true
@@ -168,13 +169,10 @@ const loadSampleNodes = () => {
       }
     })
     .then((data) => {
-      subgraph.nodes = data.result.nodes
-      subgraph.edges = data.result.edges
-      console.log(data)
-      console.log(subgraph)
-      setTimeout(() => {
-        randerGraph()
-      }, 500)
+      graphData.nodes = data.result.nodes
+      graphData.edges = data.result.edges
+      console.log(graphData)
+      randerGraph()
     })
     .catch((error) => {
       message.error(error.message);
@@ -197,10 +195,10 @@ const onSearch = () => {
       }
     })
     .then((data) => {
-      subgraph.nodes = data.result.nodes
-      subgraph.edges = data.result.edges
+      graphData.nodes = data.result.nodes
+      graphData.edges = data.result.edges
       console.log(data)
-      console.log(subgraph)
+      console.log(graphData)
       randerGraph()
     })
     .catch((error) => {
@@ -210,54 +208,58 @@ const onSearch = () => {
 };
 
 const randerGraph = () => {
-  graphInstance.setData(graphData.value);
+
+  if (graphInstance) {
+    graphInstance.destroy();
+  }
+
+  initGraph();
+  graphInstance.setData(getGraphData());
   graphInstance.render();
 }
 
+const initGraph = () => {
+  graphInstance = new Graph({
+    container: container.value,
+    width: container.value.offsetWidth,
+    height: container.value.offsetHeight,
+    autoFit: true,
+    autoResize: true,
+    layout: {
+      type: 'd3-force',
+      preventOverlap: true,
+      kr: 20,
+      collide: {
+        strength: 1.0,
+      },
+    },
+    node: {
+      type: 'circle',
+      style: {
+        labelText: (d) => d.data.label,
+        size: 70,
+      },
+      palette: {
+        field: 'label',
+        color: 'tableau',
+      },
+    },
+    edge: {
+      type: 'line',
+      style: {
+        labelText: (d) => d.data.label,
+        labelBackground: '#fff',
+        endArrow: true,
+      },
+    },
+    behaviors: ['drag-element', 'zoom-canvas', 'drag-canvas'],
+  });
+  window.addEventListener('resize', randerGraph);
+}
+
 onMounted(() => {
-  loadGraph();
+  loadGraphInfo();
   loadSampleNodes();
-  setTimeout(() => {
-    if (state.showPage) {
-      graphInstance = new Graph({
-        container: container.value,
-        width: container.value.offsetWidth,
-        height: container.value.offsetHeight,
-        autoFit: true,
-        autoResize: true,
-        layout: {
-          type: 'd3-force',
-          preventOverlap: true,
-          kr: 100,
-          collide: {
-            strength: 0.5,
-          },
-        },
-        node: {
-          type: 'circle',
-          style: {
-            labelText: (d) => d.data.label,
-            size: 40,
-          },
-          palette: {
-            field: 'label',
-            color: 'tableau',
-          },
-        },
-        edge: {
-          type: 'line',
-          style: {
-            labelText: (d) => d.data.label,
-            labelBackground: '#fff',
-          },
-        },
-        behaviors: ['drag-element', 'zoom-canvas', 'drag-canvas'],
-      });
-      graphInstance.setData(graphData.value);
-      graphInstance.render();
-      window.addEventListener('resize', randerGraph);
-    }
-  }, 400)
 });
 
 
@@ -303,7 +305,7 @@ const handleDrop = (event) => {
   justify-content: space-between;
   margin-bottom: 20px;
 
-  .actions-left {
+  .actions-left, .actions-right {
     display: flex;
     align-items: center;
     gap: 10px;
@@ -311,7 +313,6 @@ const handleDrop = (event) => {
 
   input {
     width: 100px;
-    margin-right: 10px;
     border-radius: 8px;
     padding: 4px 12px;
     border: 2px solid var(--main-300);
@@ -324,6 +325,7 @@ const handleDrop = (event) => {
   }
 
   button {
+    border-width: 2px;
     height: 40px;
     box-shadow: none;
   }

web/src/views/SettingView.vue

@@ -42,7 +42,8 @@
           </a-select>
         </div>
         <div class="card">
-          <span class="label">{{ items?.embed_model.des }} &nbsp;
+          <span class="label">
+            {{ items?.embed_model.des }} &nbsp;
             <a-button small v-if="needRestart.embed_model" @click="sendRestart">
               <ReloadOutlined />需要重启
             </a-button>
@@ -58,7 +59,8 @@
           </a-select>
         </div>
         <div class="card">
-          <span class="label">{{ items?.reranker.des }} &nbsp;
+          <span class="label">
+            {{ items?.reranker.des }} &nbsp;
             <a-button small v-if="needRestart.reranker" @click="sendRestart">
               <ReloadOutlined />需要重启
             </a-button>
@@ -89,7 +91,11 @@
           />
         </div>
         <div class="card">
-          <span class="label">{{ items?.enable_knowledge_graph.des }}</span>
+          <span class="label">{{ items?.enable_knowledge_graph.des }}
+            <a-button small v-if="needRestart.enable_knowledge_graph" @click="sendRestart">
+              <ReloadOutlined />需要重启
+            </a-button>
+          </span>
           <a-switch
             :checked="configStore.config.enable_knowledge_graph"
             @change="handleChange('enable_knowledge_graph', !configStore.config.enable_knowledge_graph)"
@@ -194,6 +200,13 @@ const sendRestart = () => {
 
     .label {
       margin-right: 20px;
+
+      button {
+        margin-left: 10px;
+        height: 24px;
+        padding: 0 8px;
+        font-size: smaller;
+      }
     }
   }