UI for graph enhancement operations (#501)

* added the new image for web sources header

* added the GraphEnhancement Dialog

* added the entity extraction and orphan node deletion in tabs

* added the orphan nodes deletion table

* image size changes

* added the status indicator for graph schema settings

* added the description for the Entity extraction and orphan node deletion

* added the size for the orphan node deletion columns

* Resetting the state on unmount phase

---------

Co-authored-by: Prakriti Solankey <[email protected]>

Author: kartikpersistent

frontend/src/App.css

@@ -1,18 +1,18 @@
 .filetable {
   /* width: calc(-360px + 100dvw); */
-  height: calc(-322px + 100dvh);
+  height: calc(-400px + 100dvh);
   border: 1px solid #d1d5db;
 }
 
 .fileTableWithExpansion {
   width: calc(-640px + 100dvw) !important;
-  height: calc(-322px + 100dvh);
+  height: calc(-400px + 100dvh);
   border: 1px solid #d1d5db;
 }
 
 .fileTableWithBothDrawers {
   width: calc(-650px + 100dvw) !important;
-  height: calc(-322px + 100dvh);
+  height: calc(-400px + 100dvh);
   border: 1px solid #d1d5db;
 }
 

frontend/src/assets/images/data-from-cloud.svg

@@ -1,12 +1,12 @@
-import { useEffect, useState, useMemo, useCallback } from 'react';
+import { useEffect, useState, useMemo } from 'react';
 import ConnectionModal from './Popups/ConnectionModal/ConnectionModal';
 import FileTable from './FileTable';
 import { Button, Typography, Flex, StatusIndicator } from '@neo4j-ndl/react';
 import { useCredentials } from '../context/UserCredentials';
 import { useFileContext } from '../context/UsersFiles';
 import CustomAlert from './UI/Alert';
 import { extractAPI } from '../utils/FileAPI';
-import { ContentProps, CustomFile, Menuitems, OptionType, UserCredentials, alertStateType } from '../types';
+import { ContentProps, CustomFile, OptionType, UserCredentials, alertStateType } from '../types';
 import deleteAPI from '../services/DeleteFiles';
 import { postProcessing } from '../services/PostProcessing';
 import DeletePopUp from './Popups/DeletePopUp/DeletePopUp';
@@ -20,15 +20,16 @@ import connectAPI from '../services/ConnectAPI';
 import SettingModalHOC from '../HOC/SettingModalHOC';
 import DropdownComponent from './Dropdown';
 import GraphViewModal from './Graph/GraphViewModal';
-import CustomMenu from './UI/Menu';
+import GraphEnhancementDialog from './Popups/GraphEnhancementDialog';
+import { OverridableStringUnion } from '@mui/types';
+import { AlertColor, AlertPropsColorOverrides } from '@mui/material';
 
 const Content: React.FC<ContentProps> = ({
   isLeftExpanded,
   isRightExpanded,
   openTextSchema,
   isSchema,
   setIsSchema,
-  openOrphanNodeDeletionModal,
 }) => {
   const [init, setInit] = useState<boolean>(false);
   const [openConnection, setOpenConnection] = useState<boolean>(false);
@@ -40,8 +41,7 @@ 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 [showEnhancementDialog, setshowEnhancementDialog] = useState<boolean>(false);
 
   const {
     filesData,
@@ -81,7 +81,22 @@ const Content: React.FC<ContentProps> = ({
       });
     }
   );
-
+  const openGraphEnhancementDialog = () => {
+    setshowEnhancementDialog(true);
+  };
+  const closeGraphEnhancementDialog = () => {
+    setshowEnhancementDialog(false);
+  };
+  const showAlert = (
+    alertmsg: string,
+    alerttype: OverridableStringUnion<AlertColor, AlertPropsColorOverrides> | undefined
+  ) => {
+    setalertDetails({
+      showAlert: true,
+      alertMessage: alertmsg,
+      alertType: alerttype,
+    });
+  };
   useEffect(() => {
     if (!init && !searchParams.has('connectURL')) {
       let session = localStorage.getItem('neo4j.connection');
@@ -492,23 +507,6 @@ const Content: React.FC<ContentProps> = ({
     }
   };
 
-  const deleteMenuItems: Menuitems[] = useMemo(
-    () => [
-      {
-        title: `Delete Files ${selectedfileslength > 0 ? `(${selectedfileslength})` : ''}`,
-        onClick: () => setshowDeletePopUp(true),
-        disabledCondition: !selectedfileslength,
-        description: tooltips.deleteFile,
-      },
-      {
-        title: 'Deleted unconnected Nodes',
-        onClick: () => openOrphanNodeDeletionModal(),
-        disabledCondition: false,
-      },
-    ],
-    [selectedfileslength]
-  );
-
   const handleContinue = () => {
     if (!isLargeFile) {
       handleGenerateGraph(true, filesData);
@@ -573,6 +571,13 @@ const Content: React.FC<ContentProps> = ({
           setIsSchema={setIsSchema}
         />
       )}
+      {showEnhancementDialog && (
+        <GraphEnhancementDialog
+          open={showEnhancementDialog}
+          onClose={closeGraphEnhancementDialog}
+          showAlert={showAlert}
+        ></GraphEnhancementDialog>
+      )}
       <div className={`n-bg-palette-neutral-bg-default ${classNameCheck}`}>
         <Flex className='w-full' alignItems='center' justifyContent='space-between' flexDirection='row'>
           <ConnectionModal
@@ -591,17 +596,34 @@ const Content: React.FC<ContentProps> = ({
               )}
             </Typography>
           </div>
-
           {!connectionStatus ? (
             <Button className='mr-2.5' onClick={() => setOpenConnection(true)}>
               {buttonCaptions.connectToNeo4j}
             </Button>
           ) : (
-            <Button className='mr-2.5' onClick={disconnect}>
-              {buttonCaptions.disconnect}
-            </Button>
+            <div>
+              <Button className='mr-2.5' onClick={openGraphEnhancementDialog}>
+                Graph Enhancement
+              </Button>
+              <Button className='mr-2.5' onClick={disconnect}>
+                {buttonCaptions.disconnect}
+              </Button>
+            </div>
           )}
         </Flex>
+        <Flex className='w-full' alignItems='center' flexDirection='row'>
+          <div className='connectionstatus__container'>
+            <span className='h6 px-1'>Schema Settings</span>
+            <Typography variant='body-medium'>
+              {!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>
+              )}
+            </Typography>
+          </div>
+        </Flex>
         <FileTable
           isExpanded={isLeftExpanded && isRightExpanded}
           connectionStatus={connectionStatus}
@@ -659,25 +681,19 @@ const Content: React.FC<ContentProps> = ({
             >
               {buttonCaptions.exploreGraphWithBloom}
             </ButtonWithToolTip>
-            <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);
-              }}
+            <ButtonWithToolTip
+              text={
+                !selectedfileslength ? tooltips.deleteFile : `${selectedfileslength} ${tooltips.deleteSelectedFiles}`
+              }
+              placement='top'
+              onClick={() => setshowDeletePopUp(true)}
+              disabled={!selectedfileslength}
+              className='ml-0.5'
+              label='Delete Files'
             >
-              Delete
-            </Button>
+              {buttonCaptions.deleteFiles}
+              {selectedfileslength > 0 && `(${selectedfileslength})`}
+            </ButtonWithToolTip>
           </Flex>
         </Flex>
       </div>

frontend/src/assets/images/graph-enhancements.svg

@@ -4,25 +4,15 @@ import {
   MoonIconOutline,
   SunIconOutline,
   CodeBracketSquareIconOutline,
-  Cog8ToothIconOutline,
   InformationCircleIconOutline,
 } from '@neo4j-ndl/react/icons';
 import { Typography } from '@neo4j-ndl/react';
 import { useCallback, useEffect } from 'react';
 import IconButtonWithToolTip from '../UI/IconButtonToolTip';
 import { tooltips } from '../../utils/Constants';
 import { useFileContext } from '../../context/UsersFiles';
-import { Badge } from '@mui/material';
 
-export default function Header({
-  themeMode,
-  toggleTheme,
-  openSettingsModal,
-}: {
-  themeMode: string;
-  toggleTheme: () => void;
-  openSettingsModal: () => void;
-}) {
+export default function Header({ themeMode, toggleTheme }: { themeMode: string; toggleTheme: () => void }) {
   const handleURLClick = useCallback((url: string) => {
     window.open(url, '_blank');
   }, []);
@@ -86,6 +76,7 @@ export default function Header({
                 clean
                 size='large'
                 onClick={toggleTheme}
+                placement='left'
               >
                 {themeMode === 'dark' ? (
                   <span role='img' aria-label='sun'>
@@ -97,18 +88,6 @@ export default function Header({
                   </span>
                 )}
               </IconButtonWithToolTip>
-              <Badge color={isSchema ? 'success' : 'error'} overlap='circular' badgeContent=' ' variant='dot'>
-                <IconButtonWithToolTip
-                  label={tooltips.settings}
-                  text={tooltips.settings}
-                  size='large'
-                  clean
-                  onClick={openSettingsModal}
-                  placement='left'
-                >
-                  <Cog8ToothIconOutline />
-                </IconButtonWithToolTip>
-              </Badge>
             </div>
           </div>
         </section>

frontend/src/components/Content.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react';
+import { useState } from 'react';
 import SideNav from './SideNav';
 import DrawerDropzone from './DrawerDropzone';
 import DrawerChatbot from './DrawerChatbot';
@@ -13,23 +13,15 @@ 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>(false);
@@ -39,17 +31,13 @@ export default function PageLayoutNew({
   const { userCredentials } = useCredentials();
   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',
     alertMessage: '',
   });
   const { messages } = useMessageContext();
-  const openSchemaFromTextDialog = useCallback(() => setOpenTextSchemaDialog(true), []);
-  const closeSchemaFromTextDialog = useCallback(() => setOpenTextSchemaDialog(false), []);
-  const { isSchema, setIsSchema } = useFileContext();
+  const { isSchema, setIsSchema, setShowTextFromSchemaDialog, showTextFromSchemaDialog } = useFileContext();
 
   const deleteOnClick = async () => {
     try {
@@ -84,16 +72,7 @@ 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 && (
@@ -107,19 +86,17 @@ export default function PageLayoutNew({
       <SideNav isExpanded={isLeftExpanded} position='left' toggleDrawer={toggleLeftDrawer} />
       <DrawerDropzone isExpanded={isLeftExpanded} />
       <SchemaFromTextDialog
-        open={openTextSchemaDialog}
+        open={showTextFromSchemaDialog}
         openSettingsDialog={openSettingsDialog}
-        onClose={closeSchemaFromTextDialog}
+        onClose={() => {
+          setShowTextFromSchemaDialog(false);
+        }}
         showAlert={showAlert}
       ></SchemaFromTextDialog>
-      <DeletePopUpForOrphanNodes
-        open={showOrphanNodeDeletionModal}
-        deleteCloseHandler={closeOrphanNodeDeletionModal}
-        deleteHandler={orphanNodesDeleteHandler}
-        loading={orphanDeleteAPIloading}
-      ></DeletePopUpForOrphanNodes>
       <SettingsModal
-        openTextSchema={openSchemaFromTextDialog}
+        openTextSchema={() => {
+          setShowTextFromSchemaDialog(true);
+        }}
         open={isSettingPanelExpanded}
         onClose={closeSettingModal}
         settingView='headerView'
@@ -131,8 +108,9 @@ export default function PageLayoutNew({
         isLeftExpanded={isLeftExpanded}
         isRightExpanded={isRightExpanded}
         showChatBot={showChatBot}
-        openTextSchema={openSchemaFromTextDialog}
-        openOrphanNodeDeletionModal={openOrphanNodeDeletionModal}
+        openTextSchema={() => {
+          setShowTextFromSchemaDialog(true);
+        }}
         isSchema={isSchema}
         setIsSchema={setIsSchema}
       />