neo4j-labs · prakriti-solankey · Jun 14, 2024 · Jun 14, 2024 · Jun 14, 2024 · Jun 14, 2024
diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -287,11 +287,13 @@
   .outline-dashed h6 {
     font-size: 14px;
   }
-  .outline-dashed  .wikipedia-div{
+
+  .outline-dashed .wikipedia-div {
     padding: 12px;
   }
 
 }
+
 @container (min-height:400px) and (max-height:500px) {
   .outline-dashed img {
     width: 35px;
@@ -301,11 +303,13 @@
   .outline-dashed h6 {
     font-size: 14px;
   }
-  .outline-dashed  .wikipedia-div{
+
+  .outline-dashed .wikipedia-div {
     padding: 10px;
   }
 
 }
+
 @container (max-height:300px) {
   .outline-dashed img {
     width: 30px;
@@ -319,16 +323,32 @@
   .dropzoneContainer .ndl-upload-img-wrapper {
     display: none !important;
   }
-  .dropzoneContainer .ndl-dropzone-header{
+
+  .dropzoneContainer .ndl-dropzone-header {
     margin-bottom: 5px !important;
   }
-  .imageBg >div{
+
+  .imageBg>div {
     padding: 5px;
   }
-  .outline-dashed  .wikipedia-div{
+
+  .outline-dashed .wikipedia-div {
     padding: 8px;
   }
 }
-.ndl-dropzone .ndl-dropzone-header{
+
+.ndl-dropzone .ndl-dropzone-header {
   margin-bottom: 0 !important;
+}
+
+.node_label__value-container--has-value {
+  max-height: 215px;
+  overflow-y: scroll !important;
+  scrollbar-width: thin;
+}
+
+.relationship_label__value-container--has-value {
+  max-height: 215px;
+  overflow-y: scroll !important;
+  scrollbar-width: thin
 }
diff --git a/frontend/src/components/ButtonWithToolTip.tsx b/frontend/src/components/ButtonWithToolTip.tsx
@@ -1,5 +1,5 @@
 import { Button, Tip } from '@neo4j-ndl/react';
-import React from 'react';
+import React, { MouseEventHandler } from 'react';
 
 const ButtonWithToolTip = ({
   text,
@@ -14,7 +14,7 @@ const ButtonWithToolTip = ({
 }: {
   text: string | React.ReactNode;
   children: React.ReactNode;
-  onClick?: () => void;
+  onClick?: MouseEventHandler<HTMLButtonElement> | (() => void);
   size?: 'small' | 'medium' | 'large';
   clean?: boolean;
   grouped?: boolean;

diff --git a/frontend/src/components/GCSModal.tsx b/frontend/src/components/GCSModal.tsx
@@ -3,14 +3,14 @@ import { useCallback, useEffect, useState } from 'react';
 import { useCredentials } from '../context/UserCredentials';
 import { useFileContext } from '../context/UsersFiles';
 import { urlScanAPI } from '../services/URLScan';
-import { CustomFileBase, S3ModalProps, fileName, nonoautherror } from '../types';
+import { CustomFileBase, GCSModalProps, fileName, nonoautherror } from '../types';
 import { v4 as uuidv4 } from 'uuid';
 import CustomModal from '../HOC/CustomModal';
 import { useGoogleLogin } from '@react-oauth/google';
 import { useAlertContext } from '../context/Alert';
 import { buttonCaptions } from '../utils/Constants';
 
-const GCSModal: React.FC<S3ModalProps> = ({ hideModal, open }) => {
+const GCSModal: React.FC<GCSModalProps> = ({ hideModal, open, openGCSModal }) => {
   const [bucketName, setbucketName] = useState<string>('');
   const [folderName, setFolderName] = useState<string>('');
   const [projectId, setprojectId] = useState<string>('');
@@ -54,6 +54,7 @@ const GCSModal: React.FC<S3ModalProps> = ({ hideModal, open }) => {
       try {
         setStatus('info');
         setStatusMessage('Loading...');
+        openGCSModal()
         const apiResponse = await urlScanAPI({
           userCredentials,
           model,

diff --git a/frontend/src/components/Layout/DrawerDropzone.tsx b/frontend/src/components/Layout/DrawerDropzone.tsx
@@ -76,9 +76,8 @@ const DrawerDropzone: React.FC<DrawerProps> = ({ isExpanded }) => {
             <div className='relative h-full'>
               <div className='flex flex-col h-full'>
                 <div
-                  className={`mx-6 flex flex-none items-center justify-between ${
-                    process.env.ENV != 'PROD' ? 'pb-6' : 'pb-5'
-                  }`}
+                  className={`mx-6 flex flex-none items-center justify-between ${process.env.ENV != 'PROD' ? 'pb-6' : 'pb-5'
+                    }`}
                 >
                   {process.env.ENV != 'PROD' && (
                     <Typography variant='body-medium' className='flex items-center content-center'>
@@ -94,9 +93,8 @@ const DrawerDropzone: React.FC<DrawerProps> = ({ isExpanded }) => {
                     {isBackendConnected && APP_SOURCES != undefined && APP_SOURCES.length === 0 ? (
                       <Flex gap='6' className='h-full source-container'>
                         <div
-                          className={`px-6 outline-dashed outline-2 outline-offset-2 outline-gray-100 imageBg ${
-                            process.env.ENV === 'PROD' ? 'mt-2' : ''
-                          }`}
+                          className={`px-6 outline-dashed outline-2 outline-offset-2 outline-gray-100 imageBg ${process.env.ENV === 'PROD' ? 'mt-2' : ''
+                            }`}
                         >
                           <DropZone />
                         </div>
@@ -114,7 +112,7 @@ const DrawerDropzone: React.FC<DrawerProps> = ({ isExpanded }) => {
                         </div>
                         <div className={`outline-dashed imageBg ${process.env.ENV === 'PROD' ? 'w-[245px]' : ''}`}>
                           <GCSButton openModal={openGCSModal} />
-                          <GCSModal open={showGCSModal} hideModal={hideGCSModal} />
+                          <GCSModal openGCSModal={openGCSModal} open={showGCSModal} hideModal={hideGCSModal} />
                         </div>
                       </Flex>
                     ) : (
@@ -137,7 +135,7 @@ const DrawerDropzone: React.FC<DrawerProps> = ({ isExpanded }) => {
                           </div>
                         )}
                         {(APP_SOURCES != undefined && APP_SOURCES.includes('s3')) ||
-                        (APP_SOURCES != undefined && APP_SOURCES.includes('gcs')) ? (
+                          (APP_SOURCES != undefined && APP_SOURCES.includes('gcs')) ? (
                           <>
                             {APP_SOURCES.includes('s3') && (
                               <div
@@ -152,7 +150,7 @@ const DrawerDropzone: React.FC<DrawerProps> = ({ isExpanded }) => {
                                 className={`outline-dashed imageBg ${process.env.ENV === 'PROD' ? 'w-[245px]' : ''}`}
                               >
                                 <GCSButton openModal={openGCSModal} />
-                                <GCSModal open={showGCSModal} hideModal={hideGCSModal} />
+                                <GCSModal openGCSModal={openGCSModal} open={showGCSModal} hideModal={hideGCSModal} />
                               </div>
                             )}
                           </>
@@ -167,9 +165,8 @@ const DrawerDropzone: React.FC<DrawerProps> = ({ isExpanded }) => {
                     {APP_SOURCES != undefined && APP_SOURCES.length === 0 ? (
                       <Flex gap='6' className='h-full source-container'>
                         <div
-                          className={`px-6 outline-dashed outline-2 outline-offset-2 outline-gray-100 imageBg ${
-                            process.env.ENV === 'PROD' ? 'mt-2' : ''
-                          }`}
+                          className={`px-6 outline-dashed outline-2 outline-offset-2 outline-gray-100 imageBg ${process.env.ENV === 'PROD' ? 'mt-2' : ''
+                            }`}
                         >
                           <DropZone />
                         </div>
@@ -187,7 +184,7 @@ const DrawerDropzone: React.FC<DrawerProps> = ({ isExpanded }) => {
                         </div>
                         <div className={`outline-dashed imageBg ${process.env.ENV === 'PROD' ? 'w-[245px]' : ''}`}>
                           <GCSButton openModal={openGCSModal} />
-                          <GCSModal open={showGCSModal} hideModal={hideGCSModal} />
+                          <GCSModal openGCSModal={openGCSModal} open={showGCSModal} hideModal={hideGCSModal} />
                         </div>
                       </Flex>
                     ) : (
@@ -210,7 +207,7 @@ const DrawerDropzone: React.FC<DrawerProps> = ({ isExpanded }) => {
                           </div>
                         )}
                         {(APP_SOURCES != undefined && APP_SOURCES.includes('s3')) ||
-                        (APP_SOURCES != undefined && APP_SOURCES.includes('gcs')) ? (
+                          (APP_SOURCES != undefined && APP_SOURCES.includes('gcs')) ? (
                           <>
                             {APP_SOURCES != undefined && APP_SOURCES.includes('s3') && (
                               <div
@@ -225,7 +222,7 @@ const DrawerDropzone: React.FC<DrawerProps> = ({ isExpanded }) => {
                                 className={`outline-dashed imageBg ${process.env.ENV === 'PROD' ? 'w-[245px]' : ''}`}
                               >
                                 <GCSButton openModal={openGCSModal} />
-                                <GCSModal open={showGCSModal} hideModal={hideGCSModal} />
+                                <GCSModal openGCSModal={openGCSModal} open={showGCSModal} hideModal={hideGCSModal} />
                               </div>
                             )}
                           </>

diff --git a/frontend/src/components/SettingModal.tsx b/frontend/src/components/SettingModal.tsx
@@ -137,10 +137,8 @@ export default function SettingsModal({
           const response = await getNodeLabelsAndRelTypes(userCredentials as UserCredentials);
           setLoading(false);
           if (response.data.data.length) {
-            const nodelabels = response.data?.data[0]?.labels?.slice(0, 20).map((l) => ({ value: l, label: l }));
-            const reltypes = response.data?.data[0]?.relationshipTypes
-              .slice(0, 20)
-              .map((t) => ({ value: t, label: t }));
+            const nodelabels = response.data?.data[0]?.labels.map((l) => ({ value: l, label: l }));
+            const reltypes = response.data?.data[0]?.relationshipTypes.map((t) => ({ value: t, label: t }));
             setnodeLabelOptions(nodelabels);
             setrelationshipTypeOptions(reltypes);
           }
@@ -185,6 +183,7 @@ export default function SettingsModal({
             options: nodeLabelOptions,
             onChange: onChangenodes,
             value: selectedNodes,
+            classNamePrefix:"node_label"
           }}
           type='creatable'
         />
@@ -197,6 +196,7 @@ export default function SettingsModal({
             options: relationshipTypeOptions,
             onChange: onChangerels,
             value: selectedRels,
+            classNamePrefix:"relationship_label"
           }}
           type='creatable'
         />
@@ -209,7 +209,7 @@ export default function SettingsModal({
                 : tooltips.useExistingSchema
             }
             disabled={!nodeLabelOptions.length && !relationshipTypeOptions.length}
-            onClick={() => clickHandler}
+            onClick={clickHandler}
             label='Use Existing Schema'
             placement='top'
           >
@@ -224,7 +224,7 @@ export default function SettingsModal({
             }}
             label='Get Existing Schema From Text'
           >
-            Get Existing Schema From Text
+            Get Schema From Text
           </ButtonWithToolTip>
         </Dialog.Actions>
       </Dialog.Content>

diff --git a/frontend/src/components/WikipediaModal.tsx b/frontend/src/components/WikipediaModal.tsx
@@ -152,6 +152,9 @@ const WikipediaModal: React.FC<WikipediaModalTypes> = ({ hideModal, open }) => {
           errorText={!isValid && isFocused && 'Please Fill The Valid URL'}
           onChange={(e) => {
             setisFocused(true);
+            if (e.target.value.includes('https://en.wikipedia.org/wiki/')) {
+              setValid(wikiValidation(e.target.value));
+            }
             setwikiQuery(e.target.value);
           }}
         />

diff --git a/frontend/src/types.ts b/frontend/src/types.ts
@@ -92,7 +92,11 @@ export interface S3ModalProps {
   hideModal: () => void;
   open: boolean;
 }
-
+export interface GCSModalProps {
+  hideModal: () => void;
+  open: boolean;
+  openGCSModal:()=>void
+}
 export interface ConnectionModalProps {
   open: boolean;
   setOpenConnection: Dispatch<SetStateAction<boolean>>;

diff --git a/frontend/src/utils/Constants.ts b/frontend/src/utils/Constants.ts
@@ -98,8 +98,8 @@ export const tooltips = {
   deleteSelectedFiles: 'File/Files to be deleted',
   documentation: 'Documentation',
   github: 'GitHub Issues',
-  theme: 'Theme',
-  settings: 'Settings',
+  theme: 'Light / Dark mode',
+  settings: 'Entity Graph Extraction Settings',
   chat: 'Ask questions about the processed documents.',
   sources: 'Upload files of different formats.',
   deleteChat: 'Delete',