Orphan entities deletion (#493)

* added orphan delete dialog

* added the API services for getting and deleting the orphan nodes

* Delete dialog for orphan nodes

* Integrated the UI for Orphan node

* added the tooltip

* checked state fix and aligned the select all with the checkbox of a particular file

* added the delete menu

* made the origins configurable

* format fixes

Author: kartikpersistent

frontend/src/components/Content.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState, useMemo } from 'react';
+import { useEffect, useState, useMemo, useCallback } from 'react';
 import ConnectionModal from './Popups/ConnectionModal/ConnectionModal';
 import LlmDropdown from './Dropdown';
 import FileTable from './FileTable';
@@ -7,10 +7,9 @@ import { useCredentials } from '../context/UserCredentials';
 import { useFileContext } from '../context/UsersFiles';
 import CustomAlert from './UI/Alert';
 import { extractAPI } from '../utils/FileAPI';
-import { ContentProps, CustomFile, OptionType, UserCredentials, alertStateType } from '../types';
+import { ContentProps, CustomFile, Menuitems, OptionType, UserCredentials, alertStateType } from '../types';
+import deleteAPI from '../services/DeleteFiles';
 import { postProcessing } from '../services/PostProcessing';
-import GraphViewModal from '../components/Graph/GraphViewModal';
-import deleteAPI from '../services/deleteFiles';
 import DeletePopUp from './Popups/DeletePopUp/DeletePopUp';
 import { triggerStatusUpdateAPI } from '../services/ServerSideStatusUpdateAPI';
 import useServerSideEvent from '../hooks/useSse';
@@ -20,13 +19,17 @@ import { buttonCaptions, largeFileSize, taskParam, tooltips } from '../utils/Con
 import ButtonWithToolTip from './UI/ButtonWithToolTip';
 import connectAPI from '../services/ConnectAPI';
 import SettingModalHOC from '../HOC/SettingModalHOC';
+import GraphViewModal from './Graph/GraphViewModal';
+import CustomMenu from './UI/Menu';
+import { TrashIconOutline } from '@neo4j-ndl/react/icons';
 
 const Content: React.FC<ContentProps> = ({
   isLeftExpanded,
   isRightExpanded,
   openTextSchema,
   isSchema,
   setIsSchema,
+  openOrphanNodeDeletionModal,
 }) => {
   const [init, setInit] = useState<boolean>(false);
   const [openConnection, setOpenConnection] = useState<boolean>(false);
@@ -38,6 +41,8 @@ const Content: React.FC<ContentProps> = ({
   const [extractLoading, setextractLoading] = useState<boolean>(false);
   const [isLargeFile, setIsLargeFile] = useState<boolean>(false);
   const [showSettingnModal, setshowSettingModal] = useState<boolean>(false);
+  const [openDeleteMenu, setopenDeleteMenu] = useState<boolean>(false);
+  const [deleteAnchor, setdeleteAnchor] = useState<HTMLElement | null>(null);
 
   const {
     filesData,
@@ -480,6 +485,22 @@ const Content: React.FC<ContentProps> = ({
     }
   };
 
+  const deleteMenuItems: Menuitems[] = useMemo(
+    () => [
+      {
+        title: `Delete Files ${selectedfileslength > 0 ? `(${selectedfileslength})` : ''}`,
+        onClick: () => setshowDeletePopUp(true),
+        disabledCondition: !selectedfileslength,
+      },
+      {
+        title: 'Delete Orphan Nodes',
+        onClick: () => openOrphanNodeDeletionModal(),
+        disabledCondition: false,
+      },
+    ],
+    [selectedfileslength]
+  );
+
   const handleContinue = () => {
     if (!isLargeFile) {
       handleGenerateGraph(true, filesData);
@@ -624,19 +645,26 @@ const Content: React.FC<ContentProps> = ({
             >
               {buttonCaptions.exploreGraphWithBloom}
             </ButtonWithToolTip>
-            <ButtonWithToolTip
-              text={
-                !selectedfileslength ? tooltips.deleteFile : `${selectedfileslength} ${tooltips.deleteSelectedFiles}`
-              }
-              placement='top'
-              onClick={() => setshowDeletePopUp(true)}
-              disabled={!selectedfileslength}
-              className='ml-0.5'
-              label='Delete Files'
+            <CustomMenu
+              open={openDeleteMenu}
+              closeHandler={useCallback(() => {
+                setopenDeleteMenu(false);
+              }, [])}
+              items={deleteMenuItems}
+              MenuAnchor={deleteAnchor}
+              anchorOrigin={useMemo(() => ({ horizontal: 'left', vertical: 'bottom' }), [])}
+              transformOrigin={useMemo(() => ({ horizontal: 'right', vertical: 'top' }), [])}
+            ></CustomMenu>
+            <Button
+              label='Delete Menu trigger'
+              onClick={(e) => {
+                setdeleteAnchor(e.currentTarget);
+                setopenDeleteMenu(true);
+              }}
             >
-              {buttonCaptions.deleteFiles}
-              {selectedfileslength > 0 && `(${selectedfileslength})`}
-            </ButtonWithToolTip>
+              <TrashIconOutline className='n-size-token-7' />
+              Delete <TrashIconOutline></TrashIconOutline>
+            </Button>
           </Flex>
         </Flex>
       </div>

frontend/src/components/DataSources/Local/DropZone.tsx

@@ -221,7 +221,7 @@ const DropZone: FunctionComponent = () => {
       )}
 
       <Dropzone
-        loadingComponent={isLoading && <Loader />}
+        loadingComponent={isLoading && <Loader title='Uploading' />}
         isTesting={true}
         className='!bg-none dropzoneContainer'
         supportedFilesDescription={

frontend/src/components/FileTable.tsx

@@ -392,7 +392,7 @@ const FileTable: React.FC<FileTableProps> = ({ isExpanded, connectionStatus, set
               userCredentials &&
               userCredentials.database
             ) {
-              if (item?.fileSize > largeFileSize) {
+              if (item?.fileSize < largeFileSize) {
                 subscribe(
                   item.fileName,
                   userCredentials?.uri,

frontend/src/components/Graph/GraphViewModal.tsx

@@ -5,7 +5,6 @@ import { InteractiveNvlWrapper } from '@neo4j-nvl/react';
 import NVL, { NvlOptions } from '@neo4j-nvl/base';
 import type { Node, Relationship } from '@neo4j-nvl/base';
 import { Resizable } from 're-resizable';
-
 import {
   DragIcon,
   FitToScreenIcon,

frontend/src/components/Graph/LegendsChip.tsx

@@ -1,16 +1,12 @@
 import { useMemo } from 'react';
 import { LegendChipProps } from '../../types';
+import Legend from '../UI/Legend';
 
 export const LegendsChip: React.FunctionComponent<LegendChipProps> = ({ scheme, title, nodes }) => {
   const chunkcount = useMemo(
     // @ts-ignore
     () => [...new Set(nodes?.filter((n) => n?.labels?.includes(title)).map((i) => i.id))].length,
     []
   );
-  return (
-    <div className='legend' key={scheme.key} style={{ backgroundColor: `${scheme[title]}` }}>
-      {title}
-      {chunkcount && `(${chunkcount})`}
-    </div>
-  );
+  return <Legend title={title} chunkCount={chunkcount} bgColor={scheme[title]}></Legend>;
 };

frontend/src/components/Layout/PageLayout.tsx

@@ -13,15 +13,23 @@ import { OverridableStringUnion } from '@mui/types';
 import { useFileContext } from '../../context/UsersFiles';
 import SchemaFromTextDialog from '../Popups/Settings/SchemaFromText';
 import CustomAlert from '../UI/Alert';
+import DeletePopUpForOrphanNodes from '../Popups/DeletePopUpForOrphanNodes';
+import deleteOrphanAPI from '../../services/DeleteOrphanNodes';
 
 export default function PageLayoutNew({
   isSettingPanelExpanded,
   closeSettingModal,
   openSettingsDialog,
+  closeOrphanNodeDeletionModal,
+  showOrphanNodeDeletionModal,
+  openOrphanNodeDeletionModal,
 }: {
   isSettingPanelExpanded: boolean;
   closeSettingModal: () => void;
   openSettingsDialog: () => void;
+  closeOrphanNodeDeletionModal: () => void;
+  showOrphanNodeDeletionModal: boolean;
+  openOrphanNodeDeletionModal: () => void;
 }) {
   const [isLeftExpanded, setIsLeftExpanded] = useState<boolean>(true);
   const [isRightExpanded, setIsRightExpanded] = useState<boolean>(true);
@@ -32,6 +40,7 @@ export default function PageLayoutNew({
   const toggleLeftDrawer = () => setIsLeftExpanded(!isLeftExpanded);
   const toggleRightDrawer = () => setIsRightExpanded(!isRightExpanded);
   const [openTextSchemaDialog, setOpenTextSchemaDialog] = useState<boolean>(false);
+  const [orphanDeleteAPIloading, setorphanDeleteAPIloading] = useState<boolean>(false);
   const [alertDetails, setalertDetails] = useState<alertStateType>({
     showAlert: false,
     alertType: 'error',
@@ -75,6 +84,16 @@ export default function PageLayoutNew({
       alertMessage: '',
     });
   };
+  const orphanNodesDeleteHandler = async (selectedEntities: string[]) => {
+    try {
+      setorphanDeleteAPIloading(true);
+      const response = await deleteOrphanAPI(userCredentials as UserCredentials, selectedEntities);
+      setorphanDeleteAPIloading(false);
+      console.log(response);
+    } catch (error) {
+      console.log(error);
+    }
+  };
   return (
     <div style={{ maxHeight: 'calc(100vh - 58px)' }} className='flex overflow-hidden'>
       {alertDetails.showAlert && (
@@ -93,6 +112,12 @@ export default function PageLayoutNew({
         onClose={closeSchemaFromTextDialog}
         showAlert={showAlert}
       ></SchemaFromTextDialog>
+      <DeletePopUpForOrphanNodes
+        open={showOrphanNodeDeletionModal}
+        deleteCloseHandler={closeOrphanNodeDeletionModal}
+        deleteHandler={orphanNodesDeleteHandler}
+        loading={orphanDeleteAPIloading}
+      ></DeletePopUpForOrphanNodes>
       <SettingsModal
         openTextSchema={openSchemaFromTextDialog}
         open={isSettingPanelExpanded}
@@ -107,6 +132,7 @@ export default function PageLayoutNew({
         isRightExpanded={isRightExpanded}
         showChatBot={showChatBot}
         openTextSchema={openSchemaFromTextDialog}
+        openOrphanNodeDeletionModal={openOrphanNodeDeletionModal}
         isSchema={isSchema}
         setIsSchema={setIsSchema}
       />