Skip to content

Commit bb27bfe

Browse files
kartikpersistentpraveshkumar1988
kartikpersistent
authored and
praveshkumar1988
committed
UI polishing (#428)
* button and tooltip changes * checking validation on change * settings module populate fix * format fixes * opening the modal after auth success * removed the limit * added the scrobar for dropdowns
1 parent 93f3bd6 commit bb27bfe

File tree

8 files changed

+59
-34
lines changed

8 files changed

+59
-34
lines changed

‎frontend/src/App.css‎

Lines changed: 26 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -287,11 +287,13 @@
287287
.outline-dashed h6 {
288288
font-size: 14px;
289289
}
290-
.outline-dashed .wikipedia-div{
290+
291+
.outline-dashed .wikipedia-div {
291292
padding: 12px;
292293
}
293294

294295
}
296+
295297
@container (min-height:400px) and (max-height:500px) {
296298
.outline-dashed img {
297299
width: 35px;
@@ -301,11 +303,13 @@
301303
.outline-dashed h6 {
302304
font-size: 14px;
303305
}
304-
.outline-dashed .wikipedia-div{
306+
307+
.outline-dashed .wikipedia-div {
305308
padding: 10px;
306309
}
307310

308311
}
312+
309313
@container (max-height:300px) {
310314
.outline-dashed img {
311315
width: 30px;
@@ -319,16 +323,32 @@
319323
.dropzoneContainer .ndl-upload-img-wrapper {
320324
display: none !important;
321325
}
322-
.dropzoneContainer .ndl-dropzone-header{
326+
327+
.dropzoneContainer .ndl-dropzone-header {
323328
margin-bottom: 5px !important;
324329
}
325-
.imageBg >div{
330+
331+
.imageBg>div {
326332
padding: 5px;
327333
}
328-
.outline-dashed .wikipedia-div{
334+
335+
.outline-dashed .wikipedia-div {
329336
padding: 8px;
330337
}
331338
}
332-
.ndl-dropzone .ndl-dropzone-header{
339+
340+
.ndl-dropzone .ndl-dropzone-header {
333341
margin-bottom: 0 !important;
342+
}
343+
344+
.node_label__value-container--has-value {
345+
max-height: 215px;
346+
overflow-y: scroll !important;
347+
scrollbar-width: thin;
348+
}
349+
350+
.relationship_label__value-container--has-value {
351+
max-height: 215px;
352+
overflow-y: scroll !important;
353+
scrollbar-width: thin
334354
}

‎frontend/src/components/ButtonWithToolTip.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Button, Tip } from '@neo4j-ndl/react';
2-
import React from 'react';
2+
import React, { MouseEventHandler } from 'react';
33

44
const ButtonWithToolTip = ({
55
text,
@@ -14,7 +14,7 @@ const ButtonWithToolTip = ({
1414
}: {
1515
text: string | React.ReactNode;
1616
children: React.ReactNode;
17-
onClick?: () => void;
17+
onClick?: MouseEventHandler<HTMLButtonElement> | (() => void);
1818
size?: 'small' | 'medium' | 'large';
1919
clean?: boolean;
2020
grouped?: boolean;

‎frontend/src/components/GCSModal.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,14 @@ import { useCallback, useEffect, useState } from 'react';
33
import { useCredentials } from '../context/UserCredentials';
44
import { useFileContext } from '../context/UsersFiles';
55
import { urlScanAPI } from '../services/URLScan';
6-
import { CustomFileBase, S3ModalProps, fileName, nonoautherror } from '../types';
6+
import { CustomFileBase, GCSModalProps, fileName, nonoautherror } from '../types';
77
import { v4 as uuidv4 } from 'uuid';
88
import CustomModal from '../HOC/CustomModal';
99
import { useGoogleLogin } from '@react-oauth/google';
1010
import { useAlertContext } from '../context/Alert';
1111
import { buttonCaptions } from '../utils/Constants';
1212

13-
const GCSModal: React.FC<S3ModalProps> = ({ hideModal, open }) => {
13+
const GCSModal: React.FC<GCSModalProps> = ({ hideModal, open, openGCSModal }) => {
1414
const [bucketName, setbucketName] = useState<string>('');
1515
const [folderName, setFolderName] = useState<string>('');
1616
const [projectId, setprojectId] = useState<string>('');
@@ -54,6 +54,7 @@ const GCSModal: React.FC<S3ModalProps> = ({ hideModal, open }) => {
5454
try {
5555
setStatus('info');
5656
setStatusMessage('Loading...');
57+
openGCSModal()
5758
const apiResponse = await urlScanAPI({
5859
userCredentials,
5960
model,

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

Lines changed: 12 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -76,9 +76,8 @@ const DrawerDropzone: React.FC<DrawerProps> = ({ isExpanded }) => {
7676
<div className='relative h-full'>
7777
<div className='flex flex-col h-full'>
7878
<div
79-
className={`mx-6 flex flex-none items-center justify-between ${
80-
process.env.ENV != 'PROD' ? 'pb-6' : 'pb-5'
81-
}`}
79+
className={`mx-6 flex flex-none items-center justify-between ${process.env.ENV != 'PROD' ? 'pb-6' : 'pb-5'
80+
}`}
8281
>
8382
{process.env.ENV != 'PROD' && (
8483
<Typography variant='body-medium' className='flex items-center content-center'>
@@ -94,9 +93,8 @@ const DrawerDropzone: React.FC<DrawerProps> = ({ isExpanded }) => {
9493
{isBackendConnected && APP_SOURCES != undefined && APP_SOURCES.length === 0 ? (
9594
<Flex gap='6' className='h-full source-container'>
9695
<div
97-
className={`px-6 outline-dashed outline-2 outline-offset-2 outline-gray-100 imageBg ${
98-
process.env.ENV === 'PROD' ? 'mt-2' : ''
99-
}`}
96+
className={`px-6 outline-dashed outline-2 outline-offset-2 outline-gray-100 imageBg ${process.env.ENV === 'PROD' ? 'mt-2' : ''
97+
}`}
10098
>
10199
<DropZone />
102100
</div>
@@ -114,7 +112,7 @@ const DrawerDropzone: React.FC<DrawerProps> = ({ isExpanded }) => {
114112
</div>
115113
<div className={`outline-dashed imageBg ${process.env.ENV === 'PROD' ? 'w-[245px]' : ''}`}>
116114
<GCSButton openModal={openGCSModal} />
117-
<GCSModal open={showGCSModal} hideModal={hideGCSModal} />
115+
<GCSModal openGCSModal={openGCSModal} open={showGCSModal} hideModal={hideGCSModal} />
118116
</div>
119117
</Flex>
120118
) : (
@@ -137,7 +135,7 @@ const DrawerDropzone: React.FC<DrawerProps> = ({ isExpanded }) => {
137135
</div>
138136
)}
139137
{(APP_SOURCES != undefined && APP_SOURCES.includes('s3')) ||
140-
(APP_SOURCES != undefined && APP_SOURCES.includes('gcs')) ? (
138+
(APP_SOURCES != undefined && APP_SOURCES.includes('gcs')) ? (
141139
<>
142140
{APP_SOURCES.includes('s3') && (
143141
<div
@@ -152,7 +150,7 @@ const DrawerDropzone: React.FC<DrawerProps> = ({ isExpanded }) => {
152150
className={`outline-dashed imageBg ${process.env.ENV === 'PROD' ? 'w-[245px]' : ''}`}
153151
>
154152
<GCSButton openModal={openGCSModal} />
155-
<GCSModal open={showGCSModal} hideModal={hideGCSModal} />
153+
<GCSModal openGCSModal={openGCSModal} open={showGCSModal} hideModal={hideGCSModal} />
156154
</div>
157155
)}
158156
</>
@@ -167,9 +165,8 @@ const DrawerDropzone: React.FC<DrawerProps> = ({ isExpanded }) => {
167165
{APP_SOURCES != undefined && APP_SOURCES.length === 0 ? (
168166
<Flex gap='6' className='h-full source-container'>
169167
<div
170-
className={`px-6 outline-dashed outline-2 outline-offset-2 outline-gray-100 imageBg ${
171-
process.env.ENV === 'PROD' ? 'mt-2' : ''
172-
}`}
168+
className={`px-6 outline-dashed outline-2 outline-offset-2 outline-gray-100 imageBg ${process.env.ENV === 'PROD' ? 'mt-2' : ''
169+
}`}
173170
>
174171
<DropZone />
175172
</div>
@@ -187,7 +184,7 @@ const DrawerDropzone: React.FC<DrawerProps> = ({ isExpanded }) => {
187184
</div>
188185
<div className={`outline-dashed imageBg ${process.env.ENV === 'PROD' ? 'w-[245px]' : ''}`}>
189186
<GCSButton openModal={openGCSModal} />
190-
<GCSModal open={showGCSModal} hideModal={hideGCSModal} />
187+
<GCSModal openGCSModal={openGCSModal} open={showGCSModal} hideModal={hideGCSModal} />
191188
</div>
192189
</Flex>
193190
) : (
@@ -210,7 +207,7 @@ const DrawerDropzone: React.FC<DrawerProps> = ({ isExpanded }) => {
210207
</div>
211208
)}
212209
{(APP_SOURCES != undefined && APP_SOURCES.includes('s3')) ||
213-
(APP_SOURCES != undefined && APP_SOURCES.includes('gcs')) ? (
210+
(APP_SOURCES != undefined && APP_SOURCES.includes('gcs')) ? (
214211
<>
215212
{APP_SOURCES != undefined && APP_SOURCES.includes('s3') && (
216213
<div
@@ -225,7 +222,7 @@ const DrawerDropzone: React.FC<DrawerProps> = ({ isExpanded }) => {
225222
className={`outline-dashed imageBg ${process.env.ENV === 'PROD' ? 'w-[245px]' : ''}`}
226223
>
227224
<GCSButton openModal={openGCSModal} />
228-
<GCSModal open={showGCSModal} hideModal={hideGCSModal} />
225+
<GCSModal openGCSModal={openGCSModal} open={showGCSModal} hideModal={hideGCSModal} />
229226
</div>
230227
)}
231228
</>

‎frontend/src/components/SettingModal.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -137,10 +137,8 @@ export default function SettingsModal({
137137
const response = await getNodeLabelsAndRelTypes(userCredentials as UserCredentials);
138138
setLoading(false);
139139
if (response.data.data.length) {
140-
const nodelabels = response.data?.data[0]?.labels?.slice(0, 20).map((l) => ({ value: l, label: l }));
141-
const reltypes = response.data?.data[0]?.relationshipTypes
142-
.slice(0, 20)
143-
.map((t) => ({ value: t, label: t }));
140+
const nodelabels = response.data?.data[0]?.labels.map((l) => ({ value: l, label: l }));
141+
const reltypes = response.data?.data[0]?.relationshipTypes.map((t) => ({ value: t, label: t }));
144142
setnodeLabelOptions(nodelabels);
145143
setrelationshipTypeOptions(reltypes);
146144
}
@@ -185,6 +183,7 @@ export default function SettingsModal({
185183
options: nodeLabelOptions,
186184
onChange: onChangenodes,
187185
value: selectedNodes,
186+
classNamePrefix:"node_label"
188187
}}
189188
type='creatable'
190189
/>
@@ -197,6 +196,7 @@ export default function SettingsModal({
197196
options: relationshipTypeOptions,
198197
onChange: onChangerels,
199198
value: selectedRels,
199+
classNamePrefix:"relationship_label"
200200
}}
201201
type='creatable'
202202
/>
@@ -209,7 +209,7 @@ export default function SettingsModal({
209209
: tooltips.useExistingSchema
210210
}
211211
disabled={!nodeLabelOptions.length && !relationshipTypeOptions.length}
212-
onClick={() => clickHandler}
212+
onClick={clickHandler}
213213
label='Use Existing Schema'
214214
placement='top'
215215
>
@@ -224,7 +224,7 @@ export default function SettingsModal({
224224
}}
225225
label='Get Existing Schema From Text'
226226
>
227-
Get Existing Schema From Text
227+
Get Schema From Text
228228
</ButtonWithToolTip>
229229
</Dialog.Actions>
230230
</Dialog.Content>

‎frontend/src/components/WikipediaModal.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -152,6 +152,9 @@ const WikipediaModal: React.FC<WikipediaModalTypes> = ({ hideModal, open }) => {
152152
errorText={!isValid && isFocused && 'Please Fill The Valid URL'}
153153
onChange={(e) => {
154154
setisFocused(true);
155+
if (e.target.value.includes('https://en.wikipedia.org/wiki/')) {
156+
setValid(wikiValidation(e.target.value));
157+
}
155158
setwikiQuery(e.target.value);
156159
}}
157160
/>

‎frontend/src/types.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,11 @@ export interface S3ModalProps {
9292
hideModal: () => void;
9393
open: boolean;
9494
}
95-
95+
export interface GCSModalProps {
96+
hideModal: () => void;
97+
open: boolean;
98+
openGCSModal:()=>void
99+
}
96100
export interface ConnectionModalProps {
97101
open: boolean;
98102
setOpenConnection: Dispatch<SetStateAction<boolean>>;

‎frontend/src/utils/Constants.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -98,8 +98,8 @@ export const tooltips = {
9898
deleteSelectedFiles: 'File/Files to be deleted',
9999
documentation: 'Documentation',
100100
github: 'GitHub Issues',
101-
theme: 'Theme',
102-
settings: 'Settings',
101+
theme: 'Light / Dark mode',
102+
settings: 'Entity Graph Extraction Settings',
103103
chat: 'Ask questions about the processed documents.',
104104
sources: 'Upload files of different formats.',
105105
deleteChat: 'Delete',

0 commit comments

Comments
 (0)