UI bug fixes (#527)

* delete popup

* table changes

* Format fixes and added the warning status indicator for the 0 selected labels and rels

* menu changes

* entity dividers

* added the status indicator

---------

Co-authored-by: kartikpersistent <[email protected]>

Author: prakriti-solankey

frontend/src/components/ChatBot/ChatModeToggle.tsx

@@ -1,3 +1,4 @@
+import { StatusIndicator } from '@neo4j-ndl/react';
 import { useMemo } from 'react';
 import { useFileContext } from '../../context/UsersFiles';
 import CustomMenu from '../UI/Menu';
@@ -35,7 +36,13 @@ export default function ChatModeToggle({
                 setchatMode(m);
               },
               disabledCondition: false,
-              description: `${chatMode === m ? 'selected' : ''}`,
+              description: <span>
+              {chatMode === m && (
+                <>
+                 <StatusIndicator type={`${chatMode === m ? 'success' : 'unknown'}`} /> Selected 
+                </>
+              )}
+            </span>,
             };
           }),
         [chatMode, chatModes]

frontend/src/components/ChatBot/Chatbot.tsx

@@ -405,7 +405,7 @@ const Chatbot: React.FC<ChatbotProps> = (props) => {
             onChange={handleInputChange}
           />
           <Button type='submit' disabled={loading}>
-            {buttonCaptions.submit}
+            Ask
           </Button>
         </form>
       </div>

frontend/src/components/Content.tsx

@@ -569,6 +569,7 @@ const Content: React.FC<ContentProps> = ({
           deleteHandler={(delentities: boolean) => handleDeleteFiles(delentities)}
           deleteCloseHandler={() => setshowDeletePopUp(false)}
           loading={deleteLoading}
+          view='contentView'
         ></DeletePopUp>
       )}
       {showSettingnModal && (
@@ -606,9 +607,20 @@ 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 ? (
+                  <StatusIndicator type='danger' />
+                ) : selectedNodes.length || selectedRels.length ? (
+                  <StatusIndicator type='success' />
+                ) : (
+                  <StatusIndicator type='warning' />
+                )}
                 {isSchema ? (
-                  <span className='n-body-small'>Graph Schema configured</span>
+                  <span className='n-body-small'>
+                    Empty Graph Schema configured{' '}
+                    {selectedNodes.length || selectedRels.length
+                      ? `${selectedNodes.length} Labels + ${selectedRels.length} Rel Types`
+                      : ''}{' '}
+                  </span>
                 ) : (
                   <span className='n-body-small'>No Graph Schema configured</span>
                 )}

frontend/src/components/Popups/DeletePopUp/DeletePopUp.tsx

@@ -1,42 +1,53 @@
 import { Button, Checkbox, Dialog } from '@neo4j-ndl/react';
 import { useState } from 'react';
-
 export default function DeletePopUp({
   open,
   no_of_files,
   deleteHandler,
   deleteCloseHandler,
   loading,
+  view,
 }: {
   open: boolean;
   no_of_files: number;
   deleteHandler: (delentities: boolean) => void;
   deleteCloseHandler: () => void;
   loading: boolean;
+  view?: 'contentView' | 'settingsView';
 }) {
   const [deleteEntities, setDeleteEntities] = useState<boolean>(true);
+  const message =
+    view === 'contentView'
+      ? `Are you sure you want to permanently delete ${no_of_files} ${no_of_files > 1 ? 'Files' : 'File'} ${
+          deleteEntities ? 'and associated entities' : ''
+        } from the graph database?`
+      : `Are you sure you want to permanently delete ${no_of_files} ${
+          no_of_files > 1 ? 'Nodes' : 'Node'
+        } from the graph database? `;
   return (
     <Dialog open={open} onClose={deleteCloseHandler}>
       <Dialog.Content>
-        <h5 className='max-w-[90%]'>
-          Are you sure you want to permanently delete {no_of_files} {no_of_files > 1 ? 'Files' : 'File'}{' '}
-          {deleteEntities ? 'and associated entities' : ''} from the graph database ?
-        </h5>
-        <div className='mt-1'>
-          <Checkbox
-            label='Delete Entities'
-            checked={deleteEntities}
-            onChange={(e) => {
-              if (e.target.checked) {
-                setDeleteEntities(true);
-              } else {
-                setDeleteEntities(false);
-              }
-            }}
-          />
-        </div>
+        <h5 className='max-w-[90%]'>{message}</h5>
+        {view === 'contentView' && (
+          <div className='mt-5'>
+            <Checkbox
+              label='Delete Entities'
+              checked={deleteEntities}
+              onChange={(e) => {
+                if (e.target.checked) {
+                  setDeleteEntities(true);
+                } else {
+                  setDeleteEntities(false);
+                }
+              }}
+            />
+          </div>
+        )}
       </Dialog.Content>
       <Dialog.Actions className='mt-3'>
+        <Button onClick={deleteCloseHandler} size='large' disabled={loading}>
+          Cancel
+        </Button>
         <Button onClick={() => deleteHandler(deleteEntities)} size='large' loading={loading}>
           Continue
         </Button>

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

@@ -17,6 +17,7 @@ import {
   Row,
   getSortedRowModel,
 } from '@tanstack/react-table';
+import DeletePopUp from '../../DeletePopUp/DeletePopUp';
 export default function DeletePopUpForOrphanNodes({
   deleteHandler,
   loading,
@@ -30,6 +31,7 @@ export default function DeletePopUpForOrphanNodes({
   const { userCredentials } = useCredentials();
   const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
   const tableRef = useRef(null);
+  const [showDeletePopUp, setshowDeletePopUp] = useState<boolean>(false);
 
   const fetchOrphanNodes = useCallback(async () => {
     try {
@@ -64,7 +66,7 @@ export default function DeletePopUpForOrphanNodes({
   const columns = useMemo(
     () => [
       {
-        id: 'select',
+        id: 'Check to Delete All Files',
         header: ({ table }: { table: Table<orphanNodeProps> }) => {
           return (
             <Checkbox
@@ -80,7 +82,7 @@ export default function DeletePopUpForOrphanNodes({
               <Checkbox
                 aria-label='row-checkbox'
                 onChange={row.getToggleSelectedHandler()}
-                title='select row for deletion'
+                title='Select the Row for Deletion'
                 checked={row.getIsSelected()}
               />
             </div>
@@ -118,7 +120,7 @@ export default function DeletePopUpForOrphanNodes({
         id: 'Connnected Documents',
         cell: (info) => {
           return (
-            <Flex>
+            <Flex className='textellipsis'>
               {Array.from(new Set([...info.getValue()])).map((d, index) => (
                 <Flex key={`d${index}`} flexDirection='row'>
                   <span>
@@ -168,16 +170,41 @@ export default function DeletePopUpForOrphanNodes({
     },
   });
 
+  const selectedFilesCheck = table.getSelectedRowModel().rows.length
+    ? `Delete Selected Nodes (${table.getSelectedRowModel().rows.length})`
+    : 'Select Node(s) to delete';
+
+  const onDeleteHandler = async () => {
+    await deleteHandler(table.getSelectedRowModel().rows.map((r) => r.id));
+    const selectedRows = table.getSelectedRowModel().rows.map((r) => r.id);
+    setTotalOrphanNodes((prev) => prev - selectedRows.length);
+    selectedRows.forEach((eid: string) => {
+      setOrphanNodes((prev) => prev.filter((node) => node.e.elementId != eid));
+    });
+    setshowDeletePopUp(false);
+    if (totalOrphanNodes) {
+      await fetchOrphanNodes();
+    }
+  };
+
   return (
     <div>
+      {showDeletePopUp && (
+        <DeletePopUp
+          open={showDeletePopUp}
+          no_of_files={table.getSelectedRowModel().rows.length ?? 0}
+          deleteHandler={onDeleteHandler}
+          deleteCloseHandler={() => setshowDeletePopUp(false)}
+          loading={loading}
+          view='settingsView'
+        />
+      )}
       <div>
         <Flex flexDirection='column'>
           <Flex justifyContent='space-between' flexDirection='row'>
             <Typography variant='subheading-large'>Orphan Nodes Deletion (100 nodes per batch)</Typography>
-            {totalOrphanNodes > 0 ? (
+            {totalOrphanNodes > 0 && (
               <Typography variant='subheading-large'>Total Nodes: {totalOrphanNodes}</Typography>
-            ) : (
-              <></>
             )}
           </Flex>
           <Flex justifyContent='space-between' flexDirection='row'>
@@ -221,19 +248,9 @@ export default function DeletePopUpForOrphanNodes({
           },
         }}
       />
-      <Flex className='mt-1' flexDirection='row' justifyContent='flex-end'>
+      <Flex className='mt-3' flexDirection='row' justifyContent='flex-end'>
         <ButtonWithToolTip
-          onClick={async () => {
-            await deleteHandler(table.getSelectedRowModel().rows.map((r) => r.id));
-            const selectedRows = table.getSelectedRowModel().rows.map((r) => r.id);
-            setTotalOrphanNodes((prev) => prev - selectedRows.length);
-            selectedRows.forEach((eid: string) => {
-              setOrphanNodes((prev) => prev.filter((node) => node.e.elementId != eid));
-            });
-            if (totalOrphanNodes) {
-              await fetchOrphanNodes();
-            }
-          }}
+          onClick={() => setshowDeletePopUp(true)}
           size='large'
           loading={loading}
           text={
@@ -249,9 +266,7 @@ 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'}
+          {selectedFilesCheck}
         </ButtonWithToolTip>
       </Flex>
     </div>

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

@@ -1,4 +1,4 @@
-import { Dialog, Tabs, Box, Typography } from '@neo4j-ndl/react';
+import { Dialog, Tabs, Box, Typography, Flex } from '@neo4j-ndl/react';
 import graphenhancement from '../../../assets/images/graph-enhancements.svg';
 import { useState } from 'react';
 import DeletePopUpForOrphanNodes from './DeleteTabForOrphanNodes';
@@ -47,30 +47,32 @@ export default function GraphEnhancementDialog({
       disableCloseButton={false}
       onClose={onClose}
     >
-      <Dialog.Header className='flex justify-between self-end !mb-0'>
+      <Dialog.Header className='flex justify-between self-end !mb-0 '>
         <Box className='n-bg-palette-neutral-bg-weak px-4'>
           <Box className='flex flex-row items-center mb-2'>
-            <img src={graphenhancement} style={{ width: 200, height: 200, marginRight: 10 }} loading='lazy' />
+            <img src={graphenhancement} style={{ width: 250, height: 250, marginRight: 10 }} loading='lazy' />
             <Box className='flex flex-col'>
               <Typography variant='h2'>Graph Enhancements</Typography>
               <Typography variant='subheading-medium' className='mb-2'>
                 This set of tools will help you enhance the quality of your Knowledge Graph by removing possible
                 duplicated entities, disconnected nodes and set a Graph Schema for improving the quality of the entity
                 extraction process
               </Typography>
+              <Flex className='pt-2'>
+                <Tabs fill='underline' onChange={setactiveTab} size='large' value={activeTab}>
+                  <Tabs.Tab tabId={0} aria-label='Database'>
+                    Entity Extraction Settings
+                  </Tabs.Tab>
+                  <Tabs.Tab tabId={1} aria-label='Add database'>
+                    Disconnected Nodes
+                  </Tabs.Tab>
+                </Tabs>
+              </Flex>
             </Box>
           </Box>
         </Box>
       </Dialog.Header>
-      <Dialog.Content className='flex flex-col n-gap-token- grow overflow-auto w-[80%] mx-auto'>
-        <Tabs fill='underline' onChange={setactiveTab} size='large' value={activeTab}>
-          <Tabs.Tab tabId={0} aria-label='Database'>
-            Entity Extraction Settings
-          </Tabs.Tab>
-          <Tabs.Tab tabId={1} aria-label='Add database'>
-            Disconnected Nodes
-          </Tabs.Tab>
-        </Tabs>
+      <Dialog.Content className='flex flex-col n-gap-token- grow overflow-auto w-[90%] mx-auto'>
         <Tabs.TabPanel className='n-flex n-flex-col n-gap-token-4 n-p-token-6' value={activeTab} tabId={0}>
           <div className='w-[80%] mx-auto'>
             <EntityExtractionSettings
@@ -80,7 +82,7 @@ export default function GraphEnhancementDialog({
               }}
               colseEnhanceGraphSchemaDialog={onClose}
               settingView='headerView'
-            ></EntityExtractionSettings>
+            />
           </div>
         </Tabs.TabPanel>
         <Tabs.TabPanel className='n-flex n-flex-col n-gap-token-4 n-p-token-6' value={activeTab} tabId={1}>

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

@@ -1,6 +1,6 @@
 import { MouseEventHandler, useCallback, useEffect, useState } from 'react';
 import ButtonWithToolTip from '../../UI/ButtonWithToolTip';
-import { buttonCaptions, tooltips } from '../../../utils/Constants';
+import { appLabels, buttonCaptions, tooltips } from '../../../utils/Constants';
 import { Dropdown, Flex, Typography } from '@neo4j-ndl/react';
 import { useCredentials } from '../../../context/UserCredentials';
 import { useFileContext } from '../../../context/UsersFiles';
@@ -238,6 +238,9 @@ export default function EntityExtractionSetting({
         </span>
       </Typography>
       <div className='mt-4'>
+        <div className='flex align-self-center justify-center'>
+          <h5>{appLabels.predefinedSchema}</h5>
+        </div>
         <Dropdown
           helpText='Schema Examples'
           label='Predefined Schema'
@@ -252,6 +255,9 @@ export default function EntityExtractionSetting({
           }}
           type='select'
         />
+        <div className='flex align-self-center justify-center'>
+          <h5>{appLabels.ownSchema}</h5>
+        </div>
         <Dropdown
           helpText='You can select more than one values'
           label='Node Labels'
@@ -280,6 +286,7 @@ export default function EntityExtractionSetting({
           }}
           type='creatable'
         />
+
         <Flex className='!mt-4 flex items-center' flexDirection='row' justifyContent='flex-end'>
           <Flex flexDirection='row' gap='4'>
             <ButtonWithToolTip

frontend/src/components/UI/Menu.tsx

@@ -33,12 +33,12 @@ export default function CustomMenu({
       {items?.map((i, idx) => {
         return (
           <Menu.Item
-            description={i.description}
             key={`${idx}${i.title}`}
             title={i.title}
             onClick={i.onClick}
             disabled={i.disabledCondition}
             className={i.isSelected ? i.selectedClassName : ''}
+            description={i.description}
           />
         );
       })}

frontend/src/types.ts

@@ -520,7 +520,7 @@ export interface Menuitems {
   title: string;
   onClick: () => void;
   disabledCondition: boolean;
-  description?: string;
+  description?: string | React.ReactNode;
   isSelected?: boolean;
   selectedClassName?: string;
 }

frontend/src/utils/Constants.ts

@@ -185,3 +185,8 @@ export const intitalGraphType: GraphType[] = ['Document', 'Entities', 'Chunk'];
 export const knowledgeGraph = 'Knowledge Graph';
 export const lexicalGraph = 'Lexical Graph';
 export const entityGraph = 'Entity Graph';
+
+export const appLabels = {
+  ownSchema: 'Or Define your own Schema',
+  predefinedSchema: 'Select a Pre-defined Schema',
+};