node and document colum changes

Author: kartikpersistent

frontend/src/components/Content.tsx

@@ -612,7 +612,7 @@ const Content: React.FC<ContentProps> = ({
           )}
         </Flex>
         <Flex className='w-full' alignItems='center' flexDirection='row'>
-          <div className='connectionstatus__container'>
+          <div className='connectionstatus__container !py-2'>
             <span className='h6 px-1'>Schema Settings</span>
             <Typography variant='body-medium'>
               {!isSchema ? <StatusIndicator type='danger' /> : <StatusIndicator type='success' />}

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

@@ -50,10 +50,10 @@ export default function DeletePopUpForOrphanNodes({
         console.log(error);
       }
     })();
-    return()=>{
-  setOrphanNodes([]);
- setTotalOrphanNodes(0);
-}
+    return () => {
+      setOrphanNodes([]);
+      setTotalOrphanNodes(0);
+    };
   }, [userCredentials]);
   const columnHelper = createColumnHelper<orphanNodeProps>();
 
@@ -99,33 +99,43 @@ export default function DeletePopUpForOrphanNodes({
       columnHelper.accessor((row) => row.e.labels, {
         id: 'Labels',
         cell: (info) => {
-          return info.getValue().map((l, index) => <Legend key={index} title={l} bgColor={calcWordColor(l)}></Legend>);
+          return (
+            <Flex>
+              {info.getValue().map((l, index) => (
+                <Legend key={index} title={l} bgColor={calcWordColor(l)}></Legend>
+              ))}
+            </Flex>
+          );
         },
         header: () => <span>Labels</span>,
         footer: (info) => info.column.id,
       }),
       columnHelper.accessor((row) => row.documents, {
         id: 'Connnected Documents',
         cell: (info) => {
-          return Array.from(new Set([...info.getValue()])).map((d, index) => (
-            <Flex key={`d${index}`} flexDirection='row'>
-              <span>
-                <DocumentIconOutline className='n-size-token-7' />
-              </span>
-              <span>{d}</span>
+          return (
+            <Flex>
+              {Array.from(new Set([...info.getValue()])).map((d, index) => (
+                <Flex key={`d${index}`} flexDirection='row'>
+                  <span>
+                    <DocumentIconOutline className='n-size-token-7' />
+                  </span>
+                  <span>{d}</span>
+                </Flex>
+              ))}
             </Flex>
-          ));
+          );
         },
         header: () => <span>Related Documents </span>,
         footer: (info) => info.column.id,
-        maxSize:280
+        maxSize: 280,
       }),
       columnHelper.accessor((row) => row.chunkConnections, {
         id: 'Connected Chunks',
         cell: (info) => <i>{info?.getValue()}</i>,
         header: () => <span>Connected Chunks</span>,
         footer: (info) => info.column.id,
-        minSize:280,
+        minSize: 280,
       }),
     ],
     []
@@ -232,7 +242,9 @@ export default function DeletePopUpForOrphanNodes({
           disabled={!table.getSelectedRowModel().rows.length}
           placement='top'
         >
-          {table.getSelectedRowModel().rows.length?`Delete Selected Nodes (${table.getSelectedRowModel().rows.length})`:'Select Node(s) to delete'}
+          {table.getSelectedRowModel().rows.length
+            ? `Delete Selected Nodes (${table.getSelectedRowModel().rows.length})`
+            : 'Select Node(s) to delete'}
         </ButtonWithToolTip>
       </Flex>
     </div>

frontend/src/components/Popups/Settings/EntityExtractionSetting.tsx

@@ -110,12 +110,14 @@ export default function EntityExtractionSetting({
       );
       return updatedOptions;
     });
+    setIsSchema(true);
   };
   const onChangenodes = (selectedOptions: OnChangeValue<OptionType, true>, actionMeta: ActionMeta<OptionType>) => {
     if (actionMeta.action === 'clear') {
       localStorage.setItem('selectedNodeLabels', JSON.stringify({ db: userCredentials?.uri, selectedOptions: [] }));
     }
     setSelectedNodes(selectedOptions);
+    setIsSchema(true);
     localStorage.setItem('selectedNodeLabels', JSON.stringify({ db: userCredentials?.uri, selectedOptions }));
   };
   const onChangerels = (selectedOptions: OnChangeValue<OptionType, true>, actionMeta: ActionMeta<OptionType>) => {
@@ -126,6 +128,7 @@ export default function EntityExtractionSetting({
       );
     }
     setSelectedRels(selectedOptions);
+    setIsSchema(true);
     localStorage.setItem('selectedRelationshipLabels', JSON.stringify({ db: userCredentials?.uri, selectedOptions }));
   };
   const [nodeLabelOptions, setnodeLabelOptions] = useState<OptionType[]>([]);

frontend/src/utils/Constants.ts

@@ -1,6 +1,6 @@
 import { VisualizeBloomIcon } from '@neo4j-ndl/react/icons';
 import { NvlOptions } from '@neo4j-nvl/base';
-import { GraphType} from '../types';
+import { GraphType } from '../types';
 
 export const document = `+ [docs]`;
 

frontend/src/utils/Utils.ts

@@ -186,8 +186,9 @@ export const filterData = (
     filteredNodes = allNodes.filter((node) => !node.labels.includes('Document') && !node.labels.includes('Chunk'));
     // @ts-ignore
     filteredRelations = allRelationships.filter(
-      (rel) =>// @ts-ignore
-        !['PART_OF', 'FIRST_CHUNK', 'HAS_ENTITY', 'SIMILAR', 'NEXT_CHUNK'].includes(rel.caption)
+      (
+        rel // @ts-ignore
+      ) => !['PART_OF', 'FIRST_CHUNK', 'HAS_ENTITY', 'SIMILAR', 'NEXT_CHUNK'].includes(rel.caption)
     );
 
     filteredScheme = entityTypes.reduce((acc, key) => {
@@ -204,19 +205,23 @@ export const filterData = (
   } else if (graphType.includes('Document') && graphType.includes('Entities') && !graphType.includes('Chunk')) {
     // Document + Entity
     filteredNodes = allNodes.filter(
-      (node) =>     // @ts-ignore
-        node.labels.includes('Document') || (!node.labels.includes('Document') && !node.labels.includes('Chunk'))
+      (
+        node // @ts-ignore
+      ) => node.labels.includes('Document') || (!node.labels.includes('Document') && !node.labels.includes('Chunk'))
     );
     filteredRelations = allRelationships.filter(
-      (rel) => // @ts-ignore
-        !['PART_OF', 'FIRST_CHUNK', 'HAS_ENTITY', 'SIMILAR', 'NEXT_CHUNK'].includes(rel.caption)
+      (
+        rel // @ts-ignore
+      ) => !['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'));
-    filteredRelations = allRelationships.filter((rel) => // @ts-ignore
-      ['PART_OF', 'FIRST_CHUNK', 'SIMILAR', 'NEXT_CHUNK'].includes(rel.caption)
+    filteredRelations = allRelationships.filter(
+      (
+        rel // @ts-ignore
+      ) => ['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')) {