Graph visualization removal of dropdown & Schema popup

frontend/src/HOC/SettingModalHOC.tsx

@@ -1,28 +1,28 @@
-import React from 'react';
-import { SettingsModalProps } from '../types';
-import SettingsModal from '../components/Popups/Settings/SettingModal';
+// import React from 'react';
+// import { SettingsModalProps } from '../types';
+// import SettingsModal from '../components/Popups/Settings/SettingModal';
 
-const SettingModalHOC: React.FC<SettingsModalProps> = ({
-  openTextSchema,
-  open,
-  onClose,
-  isSchema,
-  settingView,
-  setIsSchema,
-  onContinue,
-  onClear,
-}) => {
-  return (
-    <SettingsModal
-      open={open}
-      onClose={onClose}
-      openTextSchema={openTextSchema}
-      onContinue={onContinue}
-      isSchema={isSchema}
-      setIsSchema={setIsSchema}
-      settingView={settingView}
-      onClear={onClear}
-    />
-  );
-};
-export default SettingModalHOC;
+// const SettingModalHOC: React.FC<SettingsModalProps> = ({
+//   openTextSchema,
+//   open,
+//   onClose,
+//   isSchema,
+//   settingView,
+//   setIsSchema,
+//   onContinue,
+//   onClear,
+// }) => {
+//   return (
+//     <SettingsModal
+//       open={open}
+//       onClose={onClose}
+//       openTextSchema={openTextSchema}
+//       onContinue={onContinue}
+//       isSchema={isSchema}
+//       setIsSchema={setIsSchema}
+//       settingView={settingView}
+//       onClear={onClear}
+//     />
+//   );
+// };
+// export default SettingModalHOC;

frontend/src/components/ChatBot/ChatInfoModal.tsx

@@ -17,13 +17,13 @@ import wikipedialogo from '../../assets/images/wikipedia.svg';
 import youtubelogo from '../../assets/images/youtube.svg';
 import gcslogo from '../../assets/images/gcs.webp';
 import s3logo from '../../assets/images/s3logo.png';
-import { Chunk, Entity, GroupedEntity, UserCredentials, chatInfoMessage } from '../../types';
+import { Chunk, Entity, ExtendedNode, GroupedEntity, UserCredentials, chatInfoMessage } from '../../types';
 import { useContext, useEffect, useMemo, useState } from 'react';
 import HoverableLink from '../UI/HoverableLink';
 import GraphViewButton from '../Graph/GraphViewButton';
 import { chunkEntitiesAPI } from '../../services/ChunkEntitiesInfo';
 import { useCredentials } from '../../context/UserCredentials';
-import type { Node, Relationship } from '@neo4j-nvl/base';
+import type { Relationship } from '@neo4j-nvl/base';
 import { calcWordColor } from '@neo4j-devtools/word-color';
 import ReactMarkdown from 'react-markdown';
 import { GlobeAltIconOutline } from '@neo4j-ndl/react/icons';
@@ -46,7 +46,7 @@ const ChatInfoModal: React.FC<chatInfoMessage> = ({
   const [infoEntities, setInfoEntities] = useState<Entity[]>([]);
   const [loading, setLoading] = useState<boolean>(false);
   const { userCredentials } = useCredentials();
-  const [nodes, setNodes] = useState<Node[]>([]);
+  const [nodes, setNodes] = useState<ExtendedNode[]>([]);
   const [relationships, setRelationships] = useState<Relationship[]>([]);
   const [chunks, setChunks] = useState<Chunk[]>([]);
   const themeUtils = useContext(ThemeWrapperContext);

frontend/src/components/Content.tsx

@@ -17,7 +17,6 @@ import ConfirmationDialog from './Popups/LargeFilePopUp/ConfirmationDialog';
 import { buttonCaptions, defaultLLM, largeFileSize, llms, taskParam, tooltips } from '../utils/Constants';
 import ButtonWithToolTip from './UI/ButtonWithToolTip';
 import connectAPI from '../services/ConnectAPI';
-import SettingModalHOC from '../HOC/SettingModalHOC';
 import DropdownComponent from './Dropdown';
 import GraphViewModal from './Graph/GraphViewModal';
 import GraphEnhancementDialog from './Popups/GraphEnhancementDialog';
@@ -27,7 +26,6 @@ import { AlertColor, AlertPropsColorOverrides } from '@mui/material';
 const Content: React.FC<ContentProps> = ({
   isLeftExpanded,
   isRightExpanded,
-  openTextSchema,
   isSchema,
   setIsSchema,
   showEnhancementDialog,
@@ -42,8 +40,6 @@ const Content: React.FC<ContentProps> = ({
   const { setUserCredentials, userCredentials } = useCredentials();
   const [showConfirmationModal, setshowConfirmationModal] = useState<boolean>(false);
   const [extractLoading, setextractLoading] = useState<boolean>(false);
-  const [isLargeFile, setIsLargeFile] = useState<boolean>(false);
-  const [showSettingnModal, setshowSettingModal] = useState<boolean>(false);
 
   const {
     filesData,
@@ -250,7 +246,6 @@ const Content: React.FC<ContentProps> = ({
   };
 
   const handleGenerateGraph = (allowLargeFiles: boolean, selectedFilesFromAllfiles: CustomFile[]) => {
-    setIsLargeFile(false);
     const data = [];
     if (selectedfileslength && allowLargeFiles) {
       for (let i = 0; i < selectedfileslength; i++) {
@@ -288,9 +283,8 @@ const Content: React.FC<ContentProps> = ({
   const handleOpenGraphClick = () => {
     const bloomUrl = process.env.BLOOM_URL;
     const uriCoded = userCredentials?.uri.replace(/:\d+$/, '');
-    const connectURL = `${uriCoded?.split('//')[0]}//${userCredentials?.userName}@${uriCoded?.split('//')[1]}:${
-      userCredentials?.port ?? '7687'
-    }`;
+    const connectURL = `${uriCoded?.split('//')[0]}//${userCredentials?.userName}@${uriCoded?.split('//')[1]}:${userCredentials?.port ?? '7687'
+      }`;
     const encodedURL = encodeURIComponent(connectURL);
     const replacedUrl = bloomUrl?.replace('{CONNECT_URL}', encodedURL);
     window.open(replacedUrl, '_blank');
@@ -300,10 +294,10 @@ const Content: React.FC<ContentProps> = ({
     isLeftExpanded && isRightExpanded
       ? 'contentWithExpansion'
       : isRightExpanded
-      ? 'contentWithChatBot'
-      : !isLeftExpanded && !isRightExpanded
-      ? 'w-[calc(100%-128px)]'
-      : 'contentWithDropzoneExpansion';
+        ? 'contentWithChatBot'
+        : !isLeftExpanded && !isRightExpanded
+          ? 'w-[calc(100%-128px)]'
+          : 'contentWithDropzoneExpansion';
 
   const handleGraphView = () => {
     setOpenGraphView(true);
@@ -434,109 +428,48 @@ const Content: React.FC<ContentProps> = ({
   }, [isSchema]);
 
   const onClickHandler = () => {
-    if (isSchema) {
-      if (childRef.current?.getSelectedRows().length) {
-        let selectedLargeFiles: CustomFile[] = [];
-        childRef.current?.getSelectedRows().forEach((f) => {
-          const parsedData: CustomFile = f;
-          if (parsedData.fileSource === 'local file') {
-            if (typeof parsedData.size === 'number' && parsedData.status === 'New' && parsedData.size > largeFileSize) {
-              selectedLargeFiles.push(parsedData);
-            }
-          }
-        });
-        // @ts-ignore
-        if (selectedLargeFiles.length) {
-          setIsLargeFile(true);
-          setshowConfirmationModal(true);
-          handleGenerateGraph(false, []);
-        } else {
-          setIsLargeFile(false);
-          handleGenerateGraph(true, filesData);
-        }
-      } else if (filesData.length) {
-        const largefiles = filesData.filter((f) => {
-          if (typeof f.size === 'number' && f.status === 'New' && f.size > largeFileSize) {
-            return true;
+    if (childRef.current?.getSelectedRows().length) {
+      let selectedLargeFiles: CustomFile[] = [];
+      childRef.current?.getSelectedRows().forEach((f) => {
+        const parsedData: CustomFile = f;
+        if (parsedData.fileSource === 'local file') {
+          if (typeof parsedData.size === 'number' && parsedData.status === 'New' && parsedData.size > largeFileSize) {
+            selectedLargeFiles.push(parsedData);
           }
-          return false;
-        });
-        const selectAllNewFiles = filesData.filter((f) => f.status === 'New');
-        const stringified = selectAllNewFiles.reduce((accu, f) => {
-          const key = f.id;
-          // @ts-ignore
-          accu[key] = true;
-          return accu;
-        }, {});
-        setRowSelection(stringified);
-        if (largefiles.length) {
-          setIsLargeFile(true);
-          setshowConfirmationModal(true);
-          handleGenerateGraph(false, []);
-        } else {
-          setIsLargeFile(false);
-          handleGenerateGraph(true, filesData);
         }
+      });
+      // @ts-ignore
+      if (selectedLargeFiles.length) {
+        setshowConfirmationModal(true);
+        handleGenerateGraph(false, []);
+      } else {
+        handleGenerateGraph(true, filesData);
       }
-    } else {
-      if (childRef.current?.getSelectedRows().length) {
-        let selectedLargeFiles: CustomFile[] = [];
-        childRef.current?.getSelectedRows().forEach((f) => {
-          const parsedData: CustomFile = f;
-          if (parsedData.fileSource === 'local file') {
-            if (typeof parsedData.size === 'number' && parsedData.status === 'New' && parsedData.size > largeFileSize) {
-              selectedLargeFiles.push(parsedData);
-            }
-          }
-        });
-        // @ts-ignore
-        if (selectedLargeFiles.length) {
-          setIsLargeFile(true);
-        } else {
-          setIsLargeFile(false);
-        }
-      } else if (filesData.length) {
-        const largefiles = filesData.filter((f) => {
-          if (typeof f.size === 'number' && f.status === 'New' && f.size > largeFileSize) {
-            return true;
-          }
-          return false;
-        });
-        const selectAllNewFiles = filesData.filter((f) => f.status === 'New');
-        const stringified = selectAllNewFiles.reduce((accu, f) => {
-          const key = f.id;
-          // @ts-ignore
-          accu[key] = true;
-          return accu;
-        }, {});
-        setRowSelection(stringified);
-        if (largefiles.length) {
-          setIsLargeFile(true);
-        } else {
-          setIsLargeFile(false);
+    } else if (filesData.length) {
+      const largefiles = filesData.filter((f) => {
+        if (typeof f.size === 'number' && f.status === 'New' && f.size > largeFileSize) {
+          return true;
         }
+        return false;
+      });
+      const selectAllNewFiles = filesData.filter((f) => f.status === 'New');
+      const stringified = selectAllNewFiles.reduce((accu, f) => {
+        const key = f.id;
+        // @ts-ignore
+        accu[key] = true;
+        return accu;
+      }, {});
+      setRowSelection(stringified);
+      if (largefiles.length) {
+        setshowConfirmationModal(true);
+        handleGenerateGraph(false, []);
+      } else {
+        handleGenerateGraph(true, filesData);
+
       }
-      setshowSettingModal(true);
     }
   };
 
-  const handleContinue = () => {
-    if (!isLargeFile) {
-      handleGenerateGraph(true, filesData);
-      setshowSettingModal(false);
-    } else {
-      setshowSettingModal(false);
-      setshowConfirmationModal(true);
-      handleGenerateGraph(false, []);
-    }
-    setIsSchema(true);
-    setalertDetails({
-      showAlert: true,
-      alertType: 'success',
-      alertMessage: 'Schema is set successfully',
-    });
-    localStorage.setItem('isSchema', JSON.stringify(true));
-  };
   return (
     <>
       {alertDetails.showAlert && (
@@ -574,17 +507,6 @@ const Content: React.FC<ContentProps> = ({
           view='contentView'
         ></DeletePopUp>
       )}
-      {showSettingnModal && (
-        <SettingModalHOC
-          settingView='contentView'
-          onClose={() => setshowSettingModal(false)}
-          onContinue={handleContinue}
-          open={showSettingnModal}
-          openTextSchema={openTextSchema}
-          isSchema={isSchema}
-          setIsSchema={setIsSchema}
-        />
-      )}
       {showEnhancementDialog && (
         <GraphEnhancementDialog
           open={showEnhancementDialog}
@@ -664,9 +586,8 @@ const Content: React.FC<ContentProps> = ({
           ref={childRef}
         ></FileTable>
         <Flex
-          className={`${
-            !isLeftExpanded && !isRightExpanded ? 'w-[calc(100%-128px)]' : 'w-full'
-          } p-2.5 absolute bottom-4 mt-1.5 self-start`}
+          className={`${!isLeftExpanded && !isRightExpanded ? 'w-[calc(100%-128px)]' : 'w-full'
+            } p-2.5 absolute bottom-4 mt-1.5 self-start`}
           justifyContent='space-between'
           flexDirection='row'
         >

frontend/src/components/Graph/CheckboxSelection.tsx

@@ -1,28 +1,21 @@
 import { Checkbox } from '@neo4j-ndl/react';
 import React from 'react';
 import { CheckboxSectionProps } from '../../types';
-
 const CheckboxSelection: React.FC<CheckboxSectionProps> = ({ graphType, loading, handleChange }) => (
   <div className='flex gap-5 mt-2 justify-between'>
     <div className='flex gap-5'>
       <Checkbox
-        checked={graphType.includes('Document')}
-        label='Document'
-        disabled={(graphType.includes('Document') && graphType.length === 1) || loading}
-        onChange={() => handleChange('Document')}
+        checked={graphType.includes('DocumentChunk')}
+        label='Document & Chunk'
+        disabled={(graphType.includes('DocumentChunk') && graphType.length === 1) || loading}
+        onChange={() => handleChange('DocumentChunk')}
       />
       <Checkbox
         checked={graphType.includes('Entities')}
         label='Entities'
         disabled={(graphType.includes('Entities') && graphType.length === 1) || loading}
         onChange={() => handleChange('Entities')}
       />
-      <Checkbox
-        checked={graphType.includes('Chunk')}
-        label='Chunks'
-        disabled={(graphType.includes('Chunk') && graphType.length === 1) || loading}
-        onChange={() => handleChange('Chunk')}
-      />
     </div>
   </div>
 );

frontend/src/components/Graph/GraphViewButton.tsx

@@ -1,10 +1,11 @@
 import React, { useState } from 'react';
 import { Button } from '@neo4j-ndl/react';
 import GraphViewModal from './GraphViewModal';
-import { Node, Relationship } from '@neo4j-nvl/base';
+import { Relationship } from '@neo4j-nvl/base';
+import { ExtendedNode } from '../../types';
 
 interface GraphViewButtonProps {
-  nodeValues?: Node[];
+  nodeValues?: ExtendedNode[];
   relationshipValues?: Relationship[];
 }
 const GraphViewButton: React.FC<GraphViewButtonProps> = ({ nodeValues, relationshipValues }) => {