Entity Empty Label fix and Icon

Author: kartikpersistent

frontend/src/components/ChatBot/ChatInfoModal.tsx

@@ -57,7 +57,7 @@ const ChatInfoModal: React.FC<chatInfoMessage> = ({
 }) => {
   const { breakpoints } = tokens;
   const isTablet = useMediaQuery(`(min-width:${breakpoints.xs}) and (max-width: ${breakpoints.lg})`);
-  const [activeTab, setActiveTab] = useState<number>(error.length ? 10 : mode === 'graph' ? 4 : 3);
+  const [activeTab, setActiveTab] = useState<number>(error?.length ? 10 : mode === 'graph' ? 4 : 3);
   const [infoEntities, setInfoEntities] = useState<Entity[]>([]);
   const [communities, setCommunities] = useState<Community[]>([]);
   const [loading, setLoading] = useState<boolean>(false);
@@ -106,8 +106,30 @@ const ChatInfoModal: React.FC<chatInfoMessage> = ({
           if (response.data.status === 'Failure') {
             throw new Error(response.data.error);
           }
-          setInfoEntities(response.data.data.nodes);
-          setNodes(response.data.data.nodes);
+          setInfoEntities(
+            response.data.data.nodes.map((n: Entity) => {
+              if (!n.labels.length && mode === 'entity search+vector') {
+                return {
+                  ...n,
+                  labels: ['Entity'],
+                };
+              } 
+                return n;
+              
+            })
+          );
+          setNodes(
+            response.data.data.nodes.map((n: ExtendedNode) => {
+              if (!n.labels.length && mode === 'entity search+vector') {
+                return {
+                  ...n,
+                  labels: ['Entity'],
+                };
+              } 
+                return n;
+              
+            })
+          );
           setRelationships(response.data.data.relationships);
           setCommunities(response.data.data.community_data);
           const chunks = response.data.data.chunk_data.map((chunk: any) => {
@@ -132,15 +154,17 @@ const ChatInfoModal: React.FC<chatInfoMessage> = ({
   }, [chunk_ids, mode, error]);
 
   const groupedEntities = useMemo<{ [key: string]: GroupedEntity }>(() => {
-    return infoEntities.reduce((acc, entity) => {
+    const items = infoEntities.reduce((acc, entity) => {
       const { label, text } = parseEntity(entity);
       if (!acc[label]) {
+        console.log({ label, text });
         const newColor = calcWordColor(label);
         acc[label] = { texts: new Set(), color: newColor };
       }
       acc[label].texts.add(text);
       return acc;
     }, {} as Record<string, { texts: Set<string>; color: string }>);
+    return items;
   }, [infoEntities]);
 
   const onChangeTabs = (tabId: number) => {
@@ -149,7 +173,7 @@ const ChatInfoModal: React.FC<chatInfoMessage> = ({
 
   const labelCounts = useMemo(() => {
     const counts: { [label: string]: number } = {};
-    for (let index = 0; index < infoEntities.length; index++) {
+    for (let index = 0; index < infoEntities?.length; index++) {
       const entity = infoEntities[index];
       const { labels } = entity;
       const [label] = labels;
@@ -205,7 +229,7 @@ const ChatInfoModal: React.FC<chatInfoMessage> = ({
           ) : (
             <></>
           )}
-          {mode === 'graph' && cypher_query?.trim().length ? (
+          {mode === 'graph' && cypher_query?.trim()?.length ? (
             <Tabs.Tab tabId={6}>Generated Cypher Query</Tabs.Tab>
           ) : (
             <></>
@@ -219,10 +243,10 @@ const ChatInfoModal: React.FC<chatInfoMessage> = ({
             <Box className='flex justify-center items-center'>
               <LoadingSpinner size='small' />
             </Box>
-          ) : mode === 'entity search+vector' && chunks.length ? (
+          ) : mode === 'entity search+vector' && chunks?.length ? (
             <ul>
               {chunks
-                .map((c) => ({ fileName: c.fileName, fileSource: c.fileType }))
+                .map((c) => ({ fileName: c.fileName, fileSource: c.fileSource }))
                 .map((s, index) => {
                   return (
                     <li key={index} className='flex flex-row inline-block justify-between items-center p-2'>
@@ -235,7 +259,6 @@ const ChatInfoModal: React.FC<chatInfoMessage> = ({
                             width={20}
                             height={20}
                             className='mr-2'
-                            alt='S3 Logo'
                           />
                         )}
                         <Typography
@@ -249,7 +272,7 @@ const ChatInfoModal: React.FC<chatInfoMessage> = ({
                   );
                 })}
             </ul>
-          ) : sources.length ? (
+          ) : sources?.length ? (
             <ul className='list-class list-none'>
               {sources.map((link, index) => {
                 return (
@@ -351,7 +374,7 @@ const ChatInfoModal: React.FC<chatInfoMessage> = ({
             <Box className='flex justify-center items-center'>
               <LoadingSpinner size='small' />
             </Box>
-          ) : Object.keys(groupedEntities).length > 0 || Object.keys(graphonly_entities).length > 0 ? (
+          ) : Object.keys(groupedEntities)?.length > 0 || Object.keys(graphonly_entities)?.length > 0 ? (
             <ul className='list-none p-4 max-h-80 overflow-auto'>
               {mode == 'graph'
                 ? graphonly_entities.map((label, index) => (
@@ -367,26 +390,25 @@ const ChatInfoModal: React.FC<chatInfoMessage> = ({
                       </div>
                     </li>
                   ))
-                : sortedLabels.map((label, index) => (
-                    <li
-                      key={index}
-                      className='flex items-center mb-2 text-ellipsis whitespace-nowrap max-w-[100%)] overflow-hidden'
-                    >
-                      <div
+                : sortedLabels.map((label, index) => {
+                    const entity = groupedEntities[label == 'undefined' ? 'Entity' : label];
+                    return (
+                      <li
                         key={index}
-                        style={{ backgroundColor: `${groupedEntities[label].color}` }}
-                        className='legend mr-2'
-                      >
-                        {label} ({labelCounts[label]})
-                      </div>
-                      <Typography
-                        className='entity-text text-ellipsis whitespace-nowrap max-w-[calc(100%-120px)] overflow-hidden'
-                        variant='body-medium'
+                        className='flex items-center mb-2 text-ellipsis whitespace-nowrap max-w-[100%)] overflow-hidden'
                       >
-                        {Array.from(groupedEntities[label].texts).slice(0, 3).join(', ')}
-                      </Typography>
-                    </li>
-                  ))}
+                        <div key={index} style={{ backgroundColor: `${entity.color}` }} className='legend mr-2'>
+                          {label} ({labelCounts[label]})
+                        </div>
+                        <Typography
+                          className='entity-text text-ellipsis whitespace-nowrap max-w-[calc(100%-120px)] overflow-hidden'
+                          variant='body-medium'
+                        >
+                          {Array.from(entity.texts).slice(0, 3).join(', ')}
+                        </Typography>
+                      </li>
+                    );
+                  })}
             </ul>
           ) : (
             <span className='h6 text-center'>No Entities Found</span>
@@ -397,7 +419,7 @@ const ChatInfoModal: React.FC<chatInfoMessage> = ({
             <Box className='flex justify-center items-center'>
               <LoadingSpinner size='small' />
             </Box>
-          ) : chunks.length > 0 ? (
+          ) : chunks?.length > 0 ? (
             <div className='p-4 h-80 overflow-auto'>
               <ul className='list-disc list-inside'>
                 {chunks.map((chunk) => (
@@ -522,7 +544,7 @@ const ChatInfoModal: React.FC<chatInfoMessage> = ({
           <></>
         )}
       </Flex>
-      {activeTab == 4 && nodes.length && relationships.length ? (
+      {activeTab == 4 && nodes?.length && relationships?.length ? (
         <Box className='button-container flex mt-2 justify-center'>
           <GraphViewButton nodeValues={nodes} relationshipValues={relationships} />
         </Box>

frontend/src/components/Graph/GraphViewModal.tsx

@@ -421,7 +421,7 @@ const GraphViewModal: React.FunctionComponent<GraphViewModalProps> = ({
                 graphType={graphType}
                 loading={loading}
                 handleChange={handleCheckboxChange}
-                isgds={allNodes.some(n=>n.labels.includes('__Community__'))}
+                isgds={allNodes.some((n) => n.labels.includes('__Community__'))}
               />
             )}
           </Flex>

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

@@ -80,12 +80,12 @@ export default function DeduplicationTab() {
   const onRemove = (nodeid: string, similarNodeId: string) => {
     setDuplicateNodes((prev) => {
       return prev.map((d) =>
-        d.e.elementId === nodeid
+        (d.e.elementId === nodeid
           ? {
               ...d,
               similar: d.similar.filter((n) => n.elementId != similarNodeId),
             }
-          : d
+          : d)
       );
     });
   };

frontend/src/utils/Utils.ts

@@ -359,8 +359,11 @@ export const capitalize = (word: string): string => {
 };
 export const parseEntity = (entity: Entity) => {
   const { labels, properties } = entity;
-  const [label] = labels;
+  let [label] = labels;
   const text = properties.id;
+  if (!label) {
+    label = 'Entity';
+  }
   return { label, text };
 };
 
@@ -392,7 +395,7 @@ export const isFileCompleted = (waitingFile: CustomFile, item: SourceNode) =>
   waitingFile && item.status === 'Completed';
 
 export const calculateProcessedCount = (prev: number, batchSize: number) =>
-  prev === batchSize ? batchSize - 1 : prev + 1;
+  (prev === batchSize ? batchSize - 1 : prev + 1);
 
 export const isProcessingFileValid = (item: SourceNode, userCredentials: UserCredentials) => {
   return item.status === 'Processing' && item.fileName != undefined && userCredentials && userCredentials.database;
@@ -429,6 +432,7 @@ export const getDescriptionForChatMode = (mode: string): string => {
   }
 };
 export const getLogo = (mode: string): Record<string, string> => {
+  console.log(mode);
   if (mode === 'light') {
     return {
       Wikipedia: Wikipediadarkmode,