Skip to content

Commit cf11494

Browse files
kartikpersistentprakriti-solankey
kartikpersistent
and
prakriti-solankey
authored
UI fixes v0.7.2 (#1138)
* UI fixes * dropdown option fix * Message Overlay and button size fixes * select components size change from large to small post package update (#1135) * connection status check * connection check update * fix * added dropdown for graph visulization * fixes: added explore icon fixed responsivness issue * document_status api fix --------- Co-authored-by: Prakriti Solankey <156313631+prakriti-solankey@users.noreply.github.com>
1 parent a1ed635 commit cf11494

File tree

17 files changed

+312
-141
lines changed

17 files changed

+312
-141
lines changed

‎frontend/src/App.css

Lines changed: 36 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,29 @@
9090
box-shadow: -12px 0 #FFF, 12px 0 rgb(var(--theme-palette-primary-bg-strong));
9191
}
9292
}
93+
.dropdownbtn{
94+
background-color: #014063;
95+
color: white !important;
96+
border-radius: unset !important;
97+
width: 35px;
98+
padding: 0.5rem;
99+
}
100+
.dropdownbtn:hover{
101+
background-color: #02293d !important;
102+
}
103+
.graphbtn{
104+
border-top-right-radius: 0px !important;
105+
border-bottom-right-radius: 0px !important;
106+
}
107+
.dropdownbtn.darktheme{
108+
background-color: #51A6B1;
109+
}
110+
.dropdownbtn.small{
111+
height: 24px;
112+
}
113+
.darktheme:hover{
114+
background-color: #44929c !important;
115+
}
93116

94117
.ndl-dropzone>div {
95118
padding-top: 10px !important;
@@ -336,7 +359,7 @@
336359
.layout-wrapper{
337360
display: grid;
338361
grid-template-rows: auto;
339-
grid-template-columns: 64px 1fr minmax(min-content, 4fr) 1.1fr 64px;
362+
grid-template-columns: 64px 1fr minmax(min-content,4fr) 1.4fr 64px;
340363
max-height: calc(100vh - 58px);
341364
max-width: 100%;
342365
}
@@ -357,6 +380,18 @@
357380
position: relative;
358381
height: 100%;
359382
}
383+
@media screen and (min-width:1025px) and (max-width:1440px){
384+
.layout-wrapper{
385+
grid-template-columns: 64px 1fr minmax(min-content,4fr) minmax(min-content,2fr) 64px;
386+
387+
}
388+
}
389+
@media screen and (min-width:1536px) and (max-width:2560px){
390+
.layout-wrapper{
391+
grid-template-columns: 64px 1fr minmax(min-content,6.5fr) minmax(max-content,1fr) 64px;
392+
393+
}
394+
}
360395
.sidenav-container{
361396
height: calc(100vh - 58px);
362397
min-height: 200px;

‎frontend/src/components/ChatBot/ChunkInfo.tsx

Lines changed: 138 additions & 59 deletions
Large diffs are not rendered by default.

‎frontend/src/components/ChatBot/SourcesInfo.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ const SourcesInfo: FC<SourcesProps> = ({ loading, mode, chunks, sources }) => {
6565
{isAllowedHost(link, ['wikipedia.org']) && (
6666
<div className='flex! flex-row inline-block justify-between items-center'>
6767
<img src={wikipedialogo} width={20} height={20} className='mr-2' alt='Wikipedia Logo' />
68-
<TextLink href={link} isExternalLink={true}>
68+
<TextLink href={link} type='external' target='_blank'>
6969
<HoverableLink url={link}>
7070
<Typography
7171
variant='body-medium'
@@ -92,7 +92,7 @@ const SourcesInfo: FC<SourcesProps> = ({ loading, mode, chunks, sources }) => {
9292
<>
9393
<div className='flex! flex-row inline-block justiy-between items-center'>
9494
<img src={youtubelogo} width={20} height={20} className='mr-2' />
95-
<TextLink href={link} isExternalLink={true}>
95+
<TextLink href={link} type='external' target='_blank'>
9696
<HoverableLink url={link}>
9797
<Typography
9898
variant='body-medium'
@@ -109,7 +109,7 @@ const SourcesInfo: FC<SourcesProps> = ({ loading, mode, chunks, sources }) => {
109109
!isAllowedHost(link, ['storage.googleapis.com', 'wikipedia.org', 'www.youtube.com']) && (
110110
<div className='flex! flex-row inline-block justify-between items-center'>
111111
<GlobeAltIconOutline className='n-size-token-7' />
112-
<TextLink href={link} isExternalLink={true}>
112+
<TextLink href={link} type='external' target='_blank'>
113113
<Typography variant='body-medium'>{link}</Typography>
114114
</TextLink>
115115
</div>

‎frontend/src/components/Content.tsx

Lines changed: 57 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import { useEffect, useState, useMemo, useRef, Suspense, useReducer, useCallback } from 'react';
1+
import { useEffect, useState, useMemo, useRef, Suspense, useReducer, useCallback, useContext } from 'react';
22
import FileTable from './FileTable';
3-
import { Button, Typography, Flex, StatusIndicator, useMediaQuery } from '@neo4j-ndl/react';
3+
import { Button, Typography, Flex, StatusIndicator, useMediaQuery, Menu } from '@neo4j-ndl/react';
44
import { useCredentials } from '../context/UserCredentials';
55
import { useFileContext } from '../context/UsersFiles';
66
import { extractAPI } from '../utils/FileAPI';
@@ -40,7 +40,8 @@ import { getChunkText } from '../services/getChunkText';
4040
import ChunkPopUp from './Popups/ChunkPopUp';
4141
import { isExpired, isFileReadyToProcess } from '../utils/Utils';
4242
import { useHasSelections } from '../hooks/useHasSelections';
43-
import { Hierarchy1Icon } from '@neo4j-ndl/react/icons';
43+
import { ChevronUpIconOutline, ChevronDownIconOutline } from '@neo4j-ndl/react/icons';
44+
import { ThemeWrapperContext } from '../context/ThemeWrapper';
4445

4546
const ConfirmationDialog = lazy(() => import('./Popups/LargeFilePopUp/ConfirmationDialog'));
4647

@@ -55,7 +56,6 @@ const Content: React.FC<ContentProps> = ({
5556
}) => {
5657
const { breakpoints } = tokens;
5758
const isTablet = useMediaQuery(`(min-width:${breakpoints.xs}) and (max-width: ${breakpoints.lg})`);
58-
// const [init, setInit] = useState<boolean>(false);
5959
const [openGraphView, setOpenGraphView] = useState<boolean>(false);
6060
const [inspectedName, setInspectedName] = useState<string>('');
6161
const [documentName, setDocumentName] = useState<string>('');
@@ -72,7 +72,10 @@ const Content: React.FC<ContentProps> = ({
7272
const [currentPage, setCurrentPage] = useState<number>(0);
7373
const [totalPageCount, setTotalPageCount] = useState<number | null>(null);
7474
const [textChunks, setTextChunks] = useState<chunkdata[]>([]);
75+
const [isGraphBtnMenuOpen, setIsGraphBtnMenuOpen] = useState<boolean>(false);
76+
const graphbtnRef = useRef<HTMLDivElement>(null);
7577
const chunksTextAbortController = useRef<AbortController>();
78+
const { colorMode } = useContext(ThemeWrapperContext);
7679

7780
const [alertStateForRetry, setAlertStateForRetry] = useState<BannerAlertProps>({
7881
showAlert: false,
@@ -961,11 +964,7 @@ const Content: React.FC<ContentProps> = ({
961964
handleGenerateGraph={processWaitingFilesOnRefresh}
962965
></FileTable>
963966

964-
<Flex
965-
className={`p-2.5 mt-1.5 absolute bottom-0 w-full`}
966-
justifyContent='space-between'
967-
flexDirection={isTablet ? 'column' : 'row'}
968-
>
967+
<Flex className={`p-2.5 mt-1.5 absolute bottom-0 w-full`} justifyContent='space-between' flexDirection={'row'}>
969968
<div>
970969
<DropdownComponent
971970
onSelect={handleDropdownChange}
@@ -989,38 +988,6 @@ const Content: React.FC<ContentProps> = ({
989988
{buttonCaptions.generateGraph}{' '}
990989
{selectedfileslength && !disableCheck && newFilecheck ? `(${newFilecheck})` : ''}
991990
</ButtonWithToolTip>
992-
<ButtonWithToolTip
993-
text={tooltips.showGraph}
994-
placement='top'
995-
onClick={handleGraphView}
996-
disabled={showGraphCheck}
997-
className='mr-0.5'
998-
label='show graph'
999-
size={isTablet ? 'small' : 'medium'}
1000-
>
1001-
{buttonCaptions.showPreviewGraph} {selectedfileslength && completedfileNo ? `(${completedfileNo})` : ''}
1002-
</ButtonWithToolTip>
1003-
<ButtonWithToolTip
1004-
label={'Graph Schema'}
1005-
text={tooltips.visualizeGraph}
1006-
placement='top'
1007-
fill='outlined'
1008-
onClick={handleSchemaView}
1009-
disabled={!connectionStatus}
1010-
>
1011-
<Hierarchy1Icon />
1012-
</ButtonWithToolTip>
1013-
<ButtonWithToolTip
1014-
text={tooltips.bloomGraph}
1015-
placement='top'
1016-
onClick={handleOpenGraphClick}
1017-
disabled={!filesData.some((f) => f?.status === 'Completed')}
1018-
className='ml-0.5'
1019-
label='Open Graph with Bloom'
1020-
size={isTablet ? 'small' : 'medium'}
1021-
>
1022-
{buttonCaptions.exploreGraphWithBloom}
1023-
</ButtonWithToolTip>
1024991
<ButtonWithToolTip
1025992
text={
1026993
!selectedfileslength ? tooltips.deleteFile : `${selectedfileslength} ${tooltips.deleteSelectedFiles}`
@@ -1035,6 +1002,55 @@ const Content: React.FC<ContentProps> = ({
10351002
{buttonCaptions.deleteFiles}
10361003
{selectedfileslength != undefined && selectedfileslength > 0 && `(${selectedfileslength})`}
10371004
</ButtonWithToolTip>
1005+
<Flex flexDirection='row' gap='0'>
1006+
<Button
1007+
onClick={handleGraphView}
1008+
isDisabled={showGraphCheck}
1009+
className='px-0! flex! items-center justify-between gap-4 graphbtn'
1010+
size={isTablet ? 'small' : 'medium'}
1011+
>
1012+
<span className='mx-2'>
1013+
{buttonCaptions.showPreviewGraph}{' '}
1014+
{selectedfileslength && completedfileNo ? `(${completedfileNo})` : ''}
1015+
</span>
1016+
</Button>
1017+
<div
1018+
className={`ndl-icon-btn ndl-clean dropdownbtn ${colorMode === 'dark' ? 'darktheme' : ''} ${
1019+
isTablet ? 'small' : 'medium'
1020+
}`}
1021+
onClick={(e) => {
1022+
setIsGraphBtnMenuOpen((old) => !old);
1023+
e.stopPropagation();
1024+
}}
1025+
ref={graphbtnRef}
1026+
>
1027+
{!isGraphBtnMenuOpen ? (
1028+
<ChevronUpIconOutline className='n-size-token-5' />
1029+
) : (
1030+
<ChevronDownIconOutline className='n-size-token-' />
1031+
)}
1032+
</div>
1033+
</Flex>
1034+
1035+
<Menu
1036+
placement='top-end-bottom-end'
1037+
isOpen={isGraphBtnMenuOpen}
1038+
anchorRef={graphbtnRef}
1039+
onClose={() => setIsGraphBtnMenuOpen(false)}
1040+
>
1041+
<Menu.Items
1042+
htmlAttributes={{
1043+
id: 'default-menu',
1044+
}}
1045+
>
1046+
<Menu.Item title='Graph Scehma' onClick={handleSchemaView} isDisabled={!connectionStatus} />
1047+
<Menu.Item
1048+
title='Explore Graph in Neo4j'
1049+
onClick={handleOpenGraphClick}
1050+
isDisabled={!filesData.some((f) => f?.status === 'Completed')}
1051+
/>
1052+
</Menu.Items>
1053+
</Menu>
10381054
</Flex>
10391055
</Flex>
10401056
</div>

‎frontend/src/components/Dropdown.tsx

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { OptionType, ReusableDropdownProps } from '../types';
33
import { memo, useMemo } from 'react';
44
import { capitalize, capitalizeWithUnderscore } from '../utils/Utils';
55
import { prodllms } from '../utils/Constants';
6-
import { InformationCircleIconOutline } from '@neo4j-ndl/react/icons';
76

87
const DropdownComponent: React.FC<ReusableDropdownProps> = ({
98
options,
@@ -30,13 +29,10 @@ const DropdownComponent: React.FC<ReusableDropdownProps> = ({
3029
<div className={view === 'ContentView' ? 'w-[150px]' : ''}>
3130
<Select
3231
type='select'
33-
label='LLM Models'
34-
helpText={
32+
aria-label='llm-dropdown'
33+
label={
3534
<div className='w-max! flex! gap-1 items-center'>
36-
<span>
37-
<InformationCircleIconOutline title='info' aria-label='infoicon' className='n-size-token-6' />
38-
</span>
39-
<span>LLM Model used for Extraction & Chat</span>
35+
<span>LLM Model for Processing & Chat</span>
4036
</div>
4137
}
4238
selectProps={{
@@ -50,12 +46,12 @@ const DropdownComponent: React.FC<ReusableDropdownProps> = ({
5046
label: !isModelSupported ? (
5147
<Tooltip type='simple' placement={isLargeDesktop ? 'left' : 'right'}>
5248
<Tooltip.Trigger>
53-
<span>{label}</span>
49+
<span className='text-nowrap'>{label}</span>
5450
</Tooltip.Trigger>
5551
<Tooltip.Content>Available In Development Version</Tooltip.Content>
5652
</Tooltip>
5753
) : (
58-
<span>{label}</span>
54+
<span className='text-nowrap'>{label}</span>
5955
),
6056
value,
6157
isDisabled: !isModelSupported,

‎frontend/src/components/FileTable.tsx

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -51,8 +51,8 @@ import { useCredentials } from '../context/UserCredentials';
5151
import {
5252
ArrowPathIconSolid,
5353
ClipboardDocumentIconSolid,
54-
MagnifyingGlassCircleIconSolid,
5554
DocumentTextIconSolid,
55+
ExploreIcon,
5656
} from '@neo4j-ndl/react/icons';
5757
import CustomProgressBar from './UI/CustomProgressBar';
5858
import subscribe from '../services/PollingAPI';
@@ -389,7 +389,7 @@ const FileTable: ForwardRefRenderFunction<ChildRef, FileTableProps> = (props, re
389389
return (
390390
<Flex>
391391
<span>
392-
<TextLink isExternalLink={true} href={info.row.original.sourceUrl}>
392+
<TextLink type='external' target='_blank' href={info.row.original.sourceUrl}>
393393
{info.row.original.fileSource}
394394
</TextLink>
395395
</span>
@@ -580,7 +580,7 @@ const FileTable: ForwardRefRenderFunction<ChildRef, FileTableProps> = (props, re
580580
clean
581581
onClick={() => onInspect(info?.row?.original?.name as string)}
582582
>
583-
<MagnifyingGlassCircleIconSolid className='n-size-token-7' />
583+
<ExploreIcon className='n-size-token-7' />
584584
</IconButtonWithToolTip>
585585
<IconButtonWithToolTip
586586
placement='left'
@@ -982,12 +982,13 @@ const FileTable: ForwardRefRenderFunction<ChildRef, FileTableProps> = (props, re
982982
useEffect(() => {
983983
setSelectedRows(table.getSelectedRowModel().rows.map((i) => i.id));
984984
}, [table.getSelectedRowModel()]);
985-
985+
const hasEmptydatabase = filesData.length === 0 && pathname === '/readonly';
986+
const isConnected = connectionStatus;
986987
return (
987988
<>
988989
{filesData ? (
989990
<>
990-
{filesData.length === 0 && pathname === '/readonly' && (
991+
{hasEmptydatabase && isConnected && (
991992
<Dialog hasDisabledCloseButton={true} isOpen={true}>
992993
<Dialog.Content>
993994
<Login />

‎frontend/src/components/Layout/DrawerDropzone.tsx

Lines changed: 42 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -121,9 +121,49 @@ const DrawerDropzone: React.FC<DrawerProps> = ({
121121
</Drawer.Body>
122122
) : (
123123
<Drawer.Body className='overflow-hidden! w-[294px]!'>
124-
<Typography variant='subheading-medium'>
125-
This user account does not have permission to access or manage data sources.
124+
<Typography variant='subheading-small'>
125+
<StatusIndicator type={'danger'} /> The database connection does not have permission to access data
126+
sources.
126127
</Typography>
128+
<div className={`cursor-not-allowed h-full`}>
129+
<div className={`resource-sections blur-sm pointer-events-none`}>
130+
<Flex gap='6' className='h-full source-container'>
131+
{APP_SOURCES.includes('local') && (
132+
<div className='px-6 outline-dashed outline-2 outline-offset-2 outline-gray-100 mt-3 imageBg'>
133+
<DropZone />
134+
</div>
135+
)}
136+
{APP_SOURCES.some((source) => ['youtube', 'wiki', 'web'].includes(source)) && (
137+
<div className='outline-dashed imageBg w-[245px]'>
138+
<GenericButton openModal={toggleGenericModal} />
139+
<GenericModal
140+
isOnlyYoutube={isYoutubeOnly}
141+
isOnlyWikipedia={isWikipediaOnly}
142+
isOnlyWeb={isWebOnly}
143+
open={showGenericModal}
144+
closeHandler={toggleGenericModal}
145+
/>
146+
</div>
147+
)}
148+
{APP_SOURCES.includes('s3') && (
149+
<div className='outline-dashed imageBg w-[245px]'>
150+
<S3Component openModal={toggleS3Modal} />
151+
<Suspense fallback={<FallBackDialog />}>
152+
<S3Modal hideModal={toggleS3Modal} open={shows3Modal} />
153+
</Suspense>
154+
</div>
155+
)}
156+
{APP_SOURCES.includes('gcs') && (
157+
<div className='outline-dashed imageBg w-[245px]'>
158+
<GCSButton openModal={toggleGCSModal} />
159+
<Suspense fallback={<FallBackDialog />}>
160+
<GCSModal openGCSModal={toggleGCSModal} open={showGCSModal} hideModal={toggleGCSModal} />
161+
</Suspense>
162+
</div>
163+
)}
164+
</Flex>
165+
</div>
166+
</div>
127167
</Drawer.Body>
128168
)}
129169
</Drawer>

0 commit comments

Comments
 (0)