refetching the orphan nodes after every deletion

Author: kartikpersistent

frontend/src/components/Content.tsx

@@ -595,12 +595,12 @@ const Content: React.FC<ContentProps> = ({
                 <span className='n-body-small'>Not Connected</span>
               )}
               <div className='pt-1'>
-               {!isSchema ? <StatusIndicator type='danger' /> : <StatusIndicator type='success' />}
-              {isSchema ? (
-                <span className='n-body-small'>Graph Schema configured</span>
-              ) : (
-                <span className='n-body-small'>No Graph Schema configured</span>
-              )}
+                {!isSchema ? <StatusIndicator type='danger' /> : <StatusIndicator type='success' />}
+                {isSchema ? (
+                  <span className='n-body-small'>Graph Schema configured</span>
+                ) : (
+                  <span className='n-body-small'>No Graph Schema configured</span>
+                )}
               </div>
             </Typography>
           </div>

frontend/src/components/Popups/GraphEnhancementDialog/DeleteTabForOrphanNodes/index.tsx

@@ -1,5 +1,5 @@
 import { Checkbox, DataGrid, DataGridComponents, Flex, Typography } from '@neo4j-ndl/react';
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { UserCredentials, orphanNodeProps } from '../../../../types';
 import { getOrphanNodes } from '../../../../services/GetOrphanNodes';
 import { useCredentials } from '../../../../context/UserCredentials';
@@ -31,24 +31,28 @@ export default function DeletePopUpForOrphanNodes({
   const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
   const tableRef = useRef(null);
 
+  const fetchOrphanNodes = useCallback(async () => {
+    try {
+      setLoading(true);
+      const apiresponse = await getOrphanNodes(userCredentials as UserCredentials);
+      setLoading(false);
+      if (apiresponse.data.data.length) {
+        setOrphanNodes(apiresponse.data.data);
+        setTotalOrphanNodes(
+          apiresponse.data.message != undefined && typeof apiresponse.data.message != 'string'
+            ? apiresponse.data.message.total
+            : 0
+        );
+      }
+    } catch (error) {
+      setLoading(false);
+      console.log(error);
+    }
+  }, [userCredentials]);
+
   useEffect(() => {
     (async () => {
-      try {
-        setLoading(true);
-        const apiresponse = await getOrphanNodes(userCredentials as UserCredentials);
-        setLoading(false);
-        if (apiresponse.data.data.length) {
-          setOrphanNodes(apiresponse.data.data);
-          setTotalOrphanNodes(
-            apiresponse.data.message != undefined && typeof apiresponse.data.message != 'string'
-              ? apiresponse.data.message.total
-              : 0
-          );
-        }
-      } catch (error) {
-        setLoading(false);
-        console.log(error);
-      }
+      await fetchOrphanNodes();
     })();
     return () => {
       setOrphanNodes([]);
@@ -226,6 +230,9 @@ export default function DeletePopUpForOrphanNodes({
             selectedRows.forEach((eid: string) => {
               setOrphanNodes((prev) => prev.filter((node) => node.e.elementId != eid));
             });
+            if (totalOrphanNodes) {
+              await fetchOrphanNodes();
+            }
           }}
           size='large'
           loading={loading}

frontend/src/types.ts

@@ -559,4 +559,4 @@ type RelationStyling = {
 export type GraphStyling = {
   node: Record<string, Partial<NodeStyling>>;
   relationship: Record<string, Partial<RelationStyling>>;
-};
+};

frontend/src/utils/Constants.ts

@@ -161,7 +161,7 @@ export const ChatModeOptions = [
   { Icon: 'abc', value: 'graph+vector' },
 ];
 
-export const taskParam: string[] = ['update_similarity_graph', 'create_fulltext_index','create_entity_embedding'];
+export const taskParam: string[] = ['update_similarity_graph', 'create_fulltext_index', 'create_entity_embedding'];
 
 export const nvlOptions: NvlOptions = {
   allowDynamicMinZoom: true,

frontend/src/utils/Utils.ts

@@ -185,7 +185,9 @@ export const filterData = (
     // @ts-ignore
     filteredNodes = allNodes.filter((node) => !node.labels.includes('Document') && !node.labels.includes('Chunk'));
     // @ts-ignore
-    filteredRelations = allRelationships.filter((rel) => !['PART_OF', 'FIRST_CHUNK', 'HAS_ENTITY', 'SIMILAR', 'NEXT_CHUNK'].includes(rel.caption));
+    filteredRelations = allRelationships.filter(
+      (rel) => !['PART_OF', 'FIRST_CHUNK', 'HAS_ENTITY', 'SIMILAR', 'NEXT_CHUNK'].includes(rel.caption)
+    );
     filteredScheme = Object.fromEntries(entityTypes.map((key) => [key, scheme[key]])) as Scheme;
   } else if (!graphType.includes('Document') && !graphType.includes('Entities') && graphType.includes('Chunk')) {
     // Only Chunk
@@ -197,15 +199,22 @@ export const filterData = (
   } else if (graphType.includes('Document') && graphType.includes('Entities') && !graphType.includes('Chunk')) {
     // Document + Entity
     // @ts-ignore
-    filteredNodes = allNodes.filter((node) =>node.labels.includes('Document') || (!node.labels.includes('Document') && !node.labels.includes('Chunk')));
+    filteredNodes = allNodes.filter(
+      (node) =>
+        node.labels.includes('Document') || (!node.labels.includes('Document') && !node.labels.includes('Chunk'))
+    );
     // @ts-ignore
-    filteredRelations = allRelationships.filter((rel) => !['PART_OF', 'FIRST_CHUNK', 'HAS_ENTITY', 'SIMILAR', 'NEXT_CHUNK'].includes(rel.caption));
+    filteredRelations = allRelationships.filter(
+      (rel) => !['PART_OF', 'FIRST_CHUNK', 'HAS_ENTITY', 'SIMILAR', 'NEXT_CHUNK'].includes(rel.caption)
+    );
   } else if (graphType.includes('Document') && !graphType.includes('Entities') && graphType.includes('Chunk')) {
     // Document + Chunk
     // @ts-ignore
     filteredNodes = allNodes.filter((node) => node.labels.includes('Document') || node.labels.includes('Chunk'));
     // @ts-ignore
-    filteredRelations = allRelationships.filter((rel) =>['PART_OF', 'FIRST_CHUNK', 'SIMILAR', 'NEXT_CHUNK'].includes(rel.caption));
+    filteredRelations = allRelationships.filter((rel) =>
+      ['PART_OF', 'FIRST_CHUNK', 'SIMILAR', 'NEXT_CHUNK'].includes(rel.caption)
+    );
     filteredScheme = { Document: scheme.Document, Chunk: scheme.Chunk };
   } else if (!graphType.includes('Document') && graphType.includes('Entities') && graphType.includes('Chunk')) {
     // Chunk + Entity