UI fixes v0.7.2

frontend/src/App.css

@@ -90,6 +90,29 @@
     box-shadow: -12px 0 #FFF, 12px 0 rgb(var(--theme-palette-primary-bg-strong));
   }
 }
+.dropdownbtn{
+  background-color: #014063;
+  color: white !important;
+  border-radius: unset !important;
+  width: 35px;
+  padding: 0.5rem;
+}
+.dropdownbtn:hover{
+  background-color: #02293d !important;
+}
+.graphbtn{
+  border-top-right-radius: 0px !important;
+  border-bottom-right-radius: 0px !important;
+}
+.dropdownbtn.darktheme{
+  background-color: #51A6B1;
+}
+.dropdownbtn.small{
+  height: 24px;
+}
+.darktheme:hover{
+  background-color: #44929c !important;
+}
 
 .ndl-dropzone>div {
   padding-top: 10px !important;
@@ -336,7 +359,7 @@
 .layout-wrapper{
   display: grid;
   grid-template-rows: auto;
-  grid-template-columns: 64px 1fr minmax(min-content, 4fr) 1.1fr 64px;
+  grid-template-columns: 64px 1fr minmax(min-content,4fr) 1.4fr 64px;
   max-height: calc(100vh - 58px);
   max-width: 100%;
 }
@@ -357,6 +380,18 @@
   position: relative;
   height: 100%;
 }
+@media screen and (min-width:1025px) and (max-width:1440px){
+  .layout-wrapper{
+    grid-template-columns: 64px 1fr minmax(min-content,4fr) minmax(min-content,2fr) 64px;
+
+    }
+}
+@media screen and (min-width:1536px) and (max-width:2560px){
+  .layout-wrapper{
+  grid-template-columns: 64px 1fr minmax(min-content,6.5fr) minmax(max-content,1fr) 64px;
+
+  }
+}
 .sidenav-container{
   height: calc(100vh - 58px);
   min-height: 200px;

frontend/src/components/ChatBot/SourcesInfo.tsx

@@ -65,7 +65,7 @@ const SourcesInfo: FC<SourcesProps> = ({ loading, mode, chunks, sources }) => {
                     {isAllowedHost(link, ['wikipedia.org']) && (
                       <div className='flex! flex-row inline-block justify-between items-center'>
                         <img src={wikipedialogo} width={20} height={20} className='mr-2' alt='Wikipedia Logo' />
-                        <TextLink href={link} isExternalLink={true}>
+                        <TextLink href={link} type='external' target='_blank'>
                           <HoverableLink url={link}>
                             <Typography
                               variant='body-medium'
@@ -92,7 +92,7 @@ const SourcesInfo: FC<SourcesProps> = ({ loading, mode, chunks, sources }) => {
                       <>
                         <div className='flex! flex-row inline-block justiy-between items-center'>
                           <img src={youtubelogo} width={20} height={20} className='mr-2' />
-                          <TextLink href={link} isExternalLink={true}>
+                          <TextLink href={link} type='external' target='_blank'>
                             <HoverableLink url={link}>
                               <Typography
                                 variant='body-medium'
@@ -109,7 +109,7 @@ const SourcesInfo: FC<SourcesProps> = ({ loading, mode, chunks, sources }) => {
                       !isAllowedHost(link, ['storage.googleapis.com', 'wikipedia.org', 'www.youtube.com']) && (
                         <div className='flex! flex-row inline-block justify-between items-center'>
                           <GlobeAltIconOutline className='n-size-token-7' />
-                          <TextLink href={link} isExternalLink={true}>
+                          <TextLink href={link} type='external' target='_blank'>
                             <Typography variant='body-medium'>{link}</Typography>
                           </TextLink>
                         </div>

frontend/src/components/Content.tsx

@@ -1,6 +1,6 @@
-import { useEffect, useState, useMemo, useRef, Suspense, useReducer, useCallback } from 'react';
+import { useEffect, useState, useMemo, useRef, Suspense, useReducer, useCallback, useContext } from 'react';
 import FileTable from './FileTable';
-import { Button, Typography, Flex, StatusIndicator, useMediaQuery } from '@neo4j-ndl/react';
+import { Button, Typography, Flex, StatusIndicator, useMediaQuery, Menu } from '@neo4j-ndl/react';
 import { useCredentials } from '../context/UserCredentials';
 import { useFileContext } from '../context/UsersFiles';
 import { extractAPI } from '../utils/FileAPI';
@@ -40,7 +40,8 @@ import { getChunkText } from '../services/getChunkText';
 import ChunkPopUp from './Popups/ChunkPopUp';
 import { isExpired, isFileReadyToProcess } from '../utils/Utils';
 import { useHasSelections } from '../hooks/useHasSelections';
-import { Hierarchy1Icon } from '@neo4j-ndl/react/icons';
+import { ChevronUpIconOutline, ChevronDownIconOutline } from '@neo4j-ndl/react/icons';
+import { ThemeWrapperContext } from '../context/ThemeWrapper';
 
 const ConfirmationDialog = lazy(() => import('./Popups/LargeFilePopUp/ConfirmationDialog'));
 
@@ -55,7 +56,6 @@ const Content: React.FC<ContentProps> = ({
 }) => {
   const { breakpoints } = tokens;
   const isTablet = useMediaQuery(`(min-width:${breakpoints.xs}) and (max-width: ${breakpoints.lg})`);
-  // const [init, setInit] = useState<boolean>(false);
   const [openGraphView, setOpenGraphView] = useState<boolean>(false);
   const [inspectedName, setInspectedName] = useState<string>('');
   const [documentName, setDocumentName] = useState<string>('');
@@ -72,7 +72,10 @@ const Content: React.FC<ContentProps> = ({
   const [currentPage, setCurrentPage] = useState<number>(0);
   const [totalPageCount, setTotalPageCount] = useState<number | null>(null);
   const [textChunks, setTextChunks] = useState<chunkdata[]>([]);
+  const [isGraphBtnMenuOpen, setIsGraphBtnMenuOpen] = useState<boolean>(false);
+  const graphbtnRef = useRef<HTMLDivElement>(null);
   const chunksTextAbortController = useRef<AbortController>();
+  const { colorMode } = useContext(ThemeWrapperContext);
 
   const [alertStateForRetry, setAlertStateForRetry] = useState<BannerAlertProps>({
     showAlert: false,
@@ -961,11 +964,7 @@ const Content: React.FC<ContentProps> = ({
           handleGenerateGraph={processWaitingFilesOnRefresh}
         ></FileTable>
 
-        <Flex
-          className={`p-2.5  mt-1.5 absolute bottom-0 w-full`}
-          justifyContent='space-between'
-          flexDirection={isTablet ? 'column' : 'row'}
-        >
+        <Flex className={`p-2.5  mt-1.5 absolute bottom-0 w-full`} justifyContent='space-between' flexDirection={'row'}>
           <div>
             <DropdownComponent
               onSelect={handleDropdownChange}
@@ -989,38 +988,6 @@ const Content: React.FC<ContentProps> = ({
               {buttonCaptions.generateGraph}{' '}
               {selectedfileslength && !disableCheck && newFilecheck ? `(${newFilecheck})` : ''}
             </ButtonWithToolTip>
-            <ButtonWithToolTip
-              text={tooltips.showGraph}
-              placement='top'
-              onClick={handleGraphView}
-              disabled={showGraphCheck}
-              className='mr-0.5'
-              label='show graph'
-              size={isTablet ? 'small' : 'medium'}
-            >
-              {buttonCaptions.showPreviewGraph} {selectedfileslength && completedfileNo ? `(${completedfileNo})` : ''}
-            </ButtonWithToolTip>
-            <ButtonWithToolTip
-              label={'Graph Schema'}
-              text={tooltips.visualizeGraph}
-              placement='top'
-              fill='outlined'
-              onClick={handleSchemaView}
-              disabled={!connectionStatus}
-            >
-              <Hierarchy1Icon />
-            </ButtonWithToolTip>
-            <ButtonWithToolTip
-              text={tooltips.bloomGraph}
-              placement='top'
-              onClick={handleOpenGraphClick}
-              disabled={!filesData.some((f) => f?.status === 'Completed')}
-              className='ml-0.5'
-              label='Open Graph with Bloom'
-              size={isTablet ? 'small' : 'medium'}
-            >
-              {buttonCaptions.exploreGraphWithBloom}
-            </ButtonWithToolTip>
             <ButtonWithToolTip
               text={
                 !selectedfileslength ? tooltips.deleteFile : `${selectedfileslength} ${tooltips.deleteSelectedFiles}`
@@ -1035,6 +1002,55 @@ const Content: React.FC<ContentProps> = ({
               {buttonCaptions.deleteFiles}
               {selectedfileslength != undefined && selectedfileslength > 0 && `(${selectedfileslength})`}
             </ButtonWithToolTip>
+            <Flex flexDirection='row' gap='0'>
+              <Button
+                onClick={handleGraphView}
+                isDisabled={showGraphCheck}
+                className='px-0! flex! items-center justify-between gap-4 graphbtn'
+                size={isTablet ? 'small' : 'medium'}
+              >
+                <span className='mx-2'>
+                  {buttonCaptions.showPreviewGraph}{' '}
+                  {selectedfileslength && completedfileNo ? `(${completedfileNo})` : ''}
+                </span>
+              </Button>
+              <div
+                className={`ndl-icon-btn ndl-clean dropdownbtn ${colorMode === 'dark' ? 'darktheme' : ''} ${
+                  isTablet ? 'small' : 'medium'
+                }`}
+                onClick={(e) => {
+                  setIsGraphBtnMenuOpen((old) => !old);
+                  e.stopPropagation();
+                }}
+                ref={graphbtnRef}
+              >
+                {!isGraphBtnMenuOpen ? (
+                  <ChevronUpIconOutline className='n-size-token-5' />
+                ) : (
+                  <ChevronDownIconOutline className='n-size-token-' />
+                )}
+              </div>
+            </Flex>
+
+            <Menu
+              placement='top-end-bottom-end'
+              isOpen={isGraphBtnMenuOpen}
+              anchorRef={graphbtnRef}
+              onClose={() => setIsGraphBtnMenuOpen(false)}
+            >
+              <Menu.Items
+                htmlAttributes={{
+                  id: 'default-menu',
+                }}
+              >
+                <Menu.Item title='Graph Scehma' onClick={handleSchemaView} isDisabled={!connectionStatus} />
+                <Menu.Item
+                  title='Explore Graph in Neo4j'
+                  onClick={handleOpenGraphClick}
+                  isDisabled={!filesData.some((f) => f?.status === 'Completed')}
+                />
+              </Menu.Items>
+            </Menu>
           </Flex>
         </Flex>
       </div>

frontend/src/components/Dropdown.tsx

@@ -3,7 +3,6 @@ import { OptionType, ReusableDropdownProps } from '../types';
 import { memo, useMemo } from 'react';
 import { capitalize, capitalizeWithUnderscore } from '../utils/Utils';
 import { prodllms } from '../utils/Constants';
-import { InformationCircleIconOutline } from '@neo4j-ndl/react/icons';
 
 const DropdownComponent: React.FC<ReusableDropdownProps> = ({
   options,
@@ -30,13 +29,10 @@ const DropdownComponent: React.FC<ReusableDropdownProps> = ({
       <div className={view === 'ContentView' ? 'w-[150px]' : ''}>
         <Select
           type='select'
-          label='LLM Models'
-          helpText={
+          aria-label='llm-dropdown'
+          label={
             <div className='w-max! flex! gap-1 items-center'>
-              <span>
-                <InformationCircleIconOutline title='info' aria-label='infoicon' className='n-size-token-6' />
-              </span>
-              <span>LLM Model used for Extraction & Chat</span>
+              <span>LLM Model for Processing & Chat</span>
             </div>
           }
           selectProps={{
@@ -50,12 +46,12 @@ const DropdownComponent: React.FC<ReusableDropdownProps> = ({
                 label: !isModelSupported ? (
                   <Tooltip type='simple' placement={isLargeDesktop ? 'left' : 'right'}>
                     <Tooltip.Trigger>
-                      <span>{label}</span>
+                      <span className='text-nowrap'>{label}</span>
                     </Tooltip.Trigger>
                     <Tooltip.Content>Available In Development Version</Tooltip.Content>
                   </Tooltip>
                 ) : (
-                  <span>{label}</span>
+                  <span className='text-nowrap'>{label}</span>
                 ),
                 value,
                 isDisabled: !isModelSupported,

frontend/src/components/FileTable.tsx

@@ -51,8 +51,8 @@ import { useCredentials } from '../context/UserCredentials';
 import {
   ArrowPathIconSolid,
   ClipboardDocumentIconSolid,
-  MagnifyingGlassCircleIconSolid,
   DocumentTextIconSolid,
+  ExploreIcon,
 } from '@neo4j-ndl/react/icons';
 import CustomProgressBar from './UI/CustomProgressBar';
 import subscribe from '../services/PollingAPI';
@@ -389,7 +389,7 @@ const FileTable: ForwardRefRenderFunction<ChildRef, FileTableProps> = (props, re
             return (
               <Flex>
                 <span>
-                  <TextLink isExternalLink={true} href={info.row.original.sourceUrl}>
+                  <TextLink type='external' target='_blank' href={info.row.original.sourceUrl}>
                     {info.row.original.fileSource}
                   </TextLink>
                 </span>
@@ -580,7 +580,7 @@ const FileTable: ForwardRefRenderFunction<ChildRef, FileTableProps> = (props, re
               clean
               onClick={() => onInspect(info?.row?.original?.name as string)}
             >
-              <MagnifyingGlassCircleIconSolid className='n-size-token-7' />
+              <ExploreIcon className='n-size-token-7' />
             </IconButtonWithToolTip>
             <IconButtonWithToolTip
               placement='left'
@@ -982,12 +982,13 @@ const FileTable: ForwardRefRenderFunction<ChildRef, FileTableProps> = (props, re
   useEffect(() => {
     setSelectedRows(table.getSelectedRowModel().rows.map((i) => i.id));
   }, [table.getSelectedRowModel()]);
-
+  const hasEmptydatabase = filesData.length === 0 && pathname === '/readonly';
+  const isConnected = connectionStatus;
   return (
     <>
       {filesData ? (
         <>
-          {filesData.length === 0 && pathname === '/readonly' && (
+          {hasEmptydatabase && isConnected && (
             <Dialog hasDisabledCloseButton={true} isOpen={true}>
               <Dialog.Content>
                 <Login />

frontend/src/components/Layout/DrawerDropzone.tsx

@@ -121,9 +121,49 @@ const DrawerDropzone: React.FC<DrawerProps> = ({
           </Drawer.Body>
         ) : (
           <Drawer.Body className='overflow-hidden! w-[294px]!'>
-            <Typography variant='subheading-medium'>
-              This user account does not have permission to access or manage data sources.
+            <Typography variant='subheading-small'>
+              <StatusIndicator type={'danger'} /> The database connection does not have permission to access data
+              sources.
             </Typography>
+            <div className={`cursor-not-allowed h-full`}>
+              <div className={`resource-sections blur-sm pointer-events-none`}>
+                <Flex gap='6' className='h-full source-container'>
+                  {APP_SOURCES.includes('local') && (
+                    <div className='px-6 outline-dashed outline-2 outline-offset-2 outline-gray-100 mt-3 imageBg'>
+                      <DropZone />
+                    </div>
+                  )}
+                  {APP_SOURCES.some((source) => ['youtube', 'wiki', 'web'].includes(source)) && (
+                    <div className='outline-dashed imageBg w-[245px]'>
+                      <GenericButton openModal={toggleGenericModal} />
+                      <GenericModal
+                        isOnlyYoutube={isYoutubeOnly}
+                        isOnlyWikipedia={isWikipediaOnly}
+                        isOnlyWeb={isWebOnly}
+                        open={showGenericModal}
+                        closeHandler={toggleGenericModal}
+                      />
+                    </div>
+                  )}
+                  {APP_SOURCES.includes('s3') && (
+                    <div className='outline-dashed imageBg w-[245px]'>
+                      <S3Component openModal={toggleS3Modal} />
+                      <Suspense fallback={<FallBackDialog />}>
+                        <S3Modal hideModal={toggleS3Modal} open={shows3Modal} />
+                      </Suspense>
+                    </div>
+                  )}
+                  {APP_SOURCES.includes('gcs') && (
+                    <div className='outline-dashed imageBg w-[245px]'>
+                      <GCSButton openModal={toggleGCSModal} />
+                      <Suspense fallback={<FallBackDialog />}>
+                        <GCSModal openGCSModal={toggleGCSModal} open={showGCSModal} hideModal={toggleGCSModal} />
+                      </Suspense>
+                    </div>
+                  )}
+                </Flex>
+              </div>
+            </div>
           </Drawer.Body>
         )}
       </Drawer>