Skip to content

Commit b115910

Browse files
kartikpersistentkartikpersistent
committed
removed hardcoded CSS values (#934)
* removed hardcode checks for width settings * encryption of secret key
1 parent c355ae8 commit b115910

File tree

8 files changed

+155
-214
lines changed

8 files changed

+155
-214
lines changed

‎frontend/src/App.css

+25-78
Original file line numberDiff line numberDiff line change
@@ -1,84 +1,7 @@
11
.filetable {
2-
/* width: calc(-360px + 100dvw); */
3-
height: calc(-350px + 100dvh);
42
border: 1px solid #d1d5db;
3+
width: 95% !important;
54
}
6-
7-
.fileTableWithExpansion {
8-
width: calc(-640px + 100dvw) !important;
9-
height: calc(-350px + 100dvh);
10-
border: 1px solid #d1d5db;
11-
}
12-
13-
.fileTableWithBothDrawers {
14-
width: calc(-650px + 100dvw) !important;
15-
height: calc(-350px + 100dvh);
16-
border: 1px solid #d1d5db;
17-
}
18-
19-
.fileTableWithExpansion .ndl-div-table {
20-
width: max-content !important;
21-
}
22-
23-
.filetable .ndl-div-table {
24-
width: max-content !important;
25-
}
26-
27-
.contentWithExpansion {
28-
width: calc(-807px + 100dvw);
29-
height: calc(100dvh - 58px);
30-
padding: 3px;
31-
display: flex;
32-
flex-direction: column;
33-
align-items: center;
34-
gap: 5px;
35-
position: relative;
36-
}
37-
38-
.contentWithOneExpansion {
39-
width: calc(-550px + 100dvw);
40-
height: calc(100dvh - 58px);
41-
padding: 3px;
42-
display: flex;
43-
flex-direction: column;
44-
align-items: center;
45-
gap: 5px;
46-
position: relative;
47-
}
48-
49-
.contentWithBothDrawers {
50-
width: calc(-786px + 100dvw);
51-
height: calc(100dvh - 58px);
52-
padding: 3px;
53-
display: flex;
54-
flex-direction: column;
55-
align-items: center;
56-
gap: 5px;
57-
position: relative;
58-
}
59-
60-
.contentWithChatBot {
61-
width: calc(-512px + 100dvw);
62-
height: calc(100dvh - 58px);
63-
padding: 3px;
64-
display: flex;
65-
flex-direction: column;
66-
align-items: center;
67-
gap: 5px;
68-
position: relative;
69-
}
70-
71-
.contentWithDropzoneExpansion {
72-
width: calc(100% - 422px);
73-
height: calc(100dvh - 58px);
74-
padding: 3px;
75-
display: flex;
76-
flex-direction: column;
77-
align-items: center;
78-
gap: 5px;
79-
position: relative;
80-
}
81-
825
.s3Container {
836
display: flex;
847
align-items: center;
@@ -406,4 +329,28 @@
406329
z-index: 111;
407330
opacity: 0.8;
408331
background-color: rgb(201 201 201 / 40%);
332+
}
333+
.layout-wrapper{
334+
display: grid;
335+
grid-template-rows: auto;
336+
grid-template-columns: 64px 1fr minmax(min-content,4fr) 1.4fr 64px;
337+
max-height: calc(100vh - 58px);
338+
max-width: 100%;
339+
}
340+
.layout-wrapper.drawerdropzoneclosed{
341+
grid-template-columns: 64px 4fr 1.1fr 64px;
342+
343+
}
344+
.layout-wrapper.drawerchatbotclosed{
345+
grid-template-columns: 64px 0.6fr minmax(min-content,4fr) 64px;
346+
}
347+
.layout-wrapper.drawerclosed{
348+
grid-template-columns: 64px minmax(min-content,4fr) 64px;
349+
}
350+
.main-content-wrapper{
351+
display: flex;
352+
flex-direction: column;
353+
max-width: 100%;
354+
position: relative;
355+
height: 100%;
409356
}

‎frontend/src/components/Content.tsx

+28-34
Original file line numberDiff line numberDiff line change
@@ -41,8 +41,6 @@ const ConfirmationDialog = lazy(() => import('./Popups/LargeFilePopUp/Confirmati
4141
let afterFirstRender = false;
4242

4343
const Content: React.FC<ContentProps> = ({
44-
isLeftExpanded,
45-
isRightExpanded,
4644
isSchema,
4745
setIsSchema,
4846
showEnhancementDialog,
@@ -265,7 +263,7 @@ const Content: React.FC<ContentProps> = ({
265263
fileItem.retryOption ?? '',
266264
fileItem.sourceUrl,
267265
localStorage.getItem('accesskey'),
268-
localStorage.getItem('secretkey'),
266+
atob(localStorage.getItem('secretkey')??''),
269267
fileItem.name ?? '',
270268
fileItem.gcsBucket ?? '',
271269
fileItem.gcsBucketFolder ?? '',
@@ -522,15 +520,6 @@ const Content: React.FC<ContentProps> = ({
522520
window.open(replacedUrl, '_blank');
523521
};
524522

525-
const classNameCheck =
526-
isLeftExpanded && isRightExpanded
527-
? 'contentWithExpansion'
528-
: isRightExpanded
529-
? 'contentWithChatBot'
530-
: !isLeftExpanded && !isRightExpanded
531-
? 'w-[calc(100%-128px)]'
532-
: 'contentWithDropzoneExpansion';
533-
534523
const handleGraphView = () => {
535524
setOpenGraphView(true);
536525
setViewPoint('showGraphView');
@@ -765,8 +754,21 @@ const Content: React.FC<ContentProps> = ({
765754
{showEnhancementDialog && (
766755
<GraphEnhancementDialog open={showEnhancementDialog} onClose={toggleEnhancementDialog}></GraphEnhancementDialog>
767756
)}
768-
<div className={`n-bg-palette-neutral-bg-default ${classNameCheck}`}>
769-
<Flex className='w-full' alignItems='center' justifyContent='space-between' flexDirection='row' flexWrap='wrap'>
757+
<GraphViewModal
758+
inspectedName={inspectedName}
759+
open={openGraphView}
760+
setGraphViewOpen={setOpenGraphView}
761+
viewPoint={viewPoint}
762+
selectedRows={childRef.current?.getSelectedRows()}
763+
/>
764+
<div className={`n-bg-palette-neutral-bg-default main-content-wrapper`}>
765+
<Flex
766+
className='w-full absolute top-0'
767+
alignItems='center'
768+
justifyContent='space-between'
769+
flexDirection='row'
770+
flexWrap='wrap'
771+
>
770772
<div className='connectionstatus__container'>
771773
<span className='h6 px-1'>Neo4j connection {isReadOnlyUser ? '(Read only Mode)' : ''}</span>
772774
<Typography variant='body-medium'>
@@ -830,7 +832,6 @@ const Content: React.FC<ContentProps> = ({
830832
</div>
831833
</Flex>
832834
<FileTable
833-
isExpanded={isLeftExpanded && isRightExpanded}
834835
connectionStatus={connectionStatus}
835836
setConnectionStatus={setConnectionStatus}
836837
onInspect={(name) => {
@@ -857,21 +858,21 @@ const Content: React.FC<ContentProps> = ({
857858
handleGenerateGraph={processWaitingFilesOnRefresh}
858859
></FileTable>
859860
<Flex
860-
className={`${
861-
!isLeftExpanded && !isRightExpanded ? 'w-[calc(100%-128px)]' : 'w-full'
862-
} p-2.5 absolute bottom-4 mt-1.5 self-start`}
861+
className={`p-2.5 mt-1.5 absolute bottom-0 w-full`}
863862
justifyContent='space-between'
864863
flexDirection={isTablet ? 'column' : 'row'}
865864
>
866-
<DropdownComponent
867-
onSelect={handleDropdownChange}
868-
options={llms ?? ['']}
869-
placeholder='Select LLM Model'
870-
defaultValue={model}
871-
view='ContentView'
872-
isDisabled={false}
873-
/>
874-
<Flex flexDirection='row' gap='4' className='self-end' flexWrap='wrap'>
865+
<div>
866+
<DropdownComponent
867+
onSelect={handleDropdownChange}
868+
options={llms ?? ['']}
869+
placeholder='Select LLM Model'
870+
defaultValue={model}
871+
view='ContentView'
872+
isDisabled={false}
873+
/>
874+
</div>
875+
<Flex flexDirection='row' gap='4' className='self-end mb-2.5' flexWrap='wrap'>
875876
<ButtonWithToolTip
876877
text={tooltips.generateGraph}
877878
placement='top'
@@ -922,13 +923,6 @@ const Content: React.FC<ContentProps> = ({
922923
</Flex>
923924
</Flex>
924925
</div>
925-
<GraphViewModal
926-
inspectedName={inspectedName}
927-
open={openGraphView}
928-
setGraphViewOpen={setOpenGraphView}
929-
viewPoint={viewPoint}
930-
selectedRows={childRef.current?.getSelectedRows()}
931-
/>
932926
</>
933927
);
934928
};

‎frontend/src/components/DataSources/AWS/S3Modal.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ const S3Modal: React.FC<S3ModalProps> = ({ hideModal, open }) => {
5757
localStorage.setItem('accesskey', accessKey);
5858
}
5959
if (accessKey.length) {
60-
localStorage.setItem('secretkey', secretKey);
60+
localStorage.setItem('secretkey',btoa(secretKey));
6161
}
6262
if (isValid && accessKey.trim() != '' && secretKey.trim() != '') {
6363
try {

‎frontend/src/components/FileTable.tsx

+39-43
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ import BreakDownPopOver from './BreakDownPopOver';
5858
let onlyfortheFirstRender = true;
5959

6060
const FileTable = forwardRef<ChildRef, FileTableProps>((props, ref) => {
61-
const { isExpanded, connectionStatus, setConnectionStatus, onInspect, onRetry, onChunkView } = props;
61+
const { connectionStatus, setConnectionStatus, onInspect, onRetry, onChunkView } = props;
6262
const { filesData, setFilesData, model, rowSelection, setRowSelection, setSelectedRows, setProcessedCount, queue } =
6363
useFileContext();
6464
const { userCredentials, isReadOnlyUser } = useCredentials();
@@ -977,8 +977,6 @@ const FileTable = forwardRef<ChildRef, FileTableProps>((props, ref) => {
977977
[table]
978978
);
979979

980-
const classNameCheck = isExpanded ? 'fileTableWithExpansion' : `filetable`;
981-
982980
useEffect(() => {
983981
setSelectedRows(table.getSelectedRowModel().rows.map((i) => i.id));
984982
}, [table.getSelectedRowModel()]);
@@ -987,49 +985,47 @@ const FileTable = forwardRef<ChildRef, FileTableProps>((props, ref) => {
987985
<>
988986
{filesData ? (
989987
<>
990-
<div className={`${isExpanded ? 'w-[calc(100%-64px)]' : 'mx-auto w-[calc(100%-100px)]'}`}>
991-
<DataGrid
992-
ref={tableRef}
993-
isResizable={true}
994-
tableInstance={table}
995-
styling={{
996-
borderStyle: 'all-sides',
997-
hasZebraStriping: true,
998-
headerStyle: 'clean',
999-
}}
1000-
isLoading={isLoading}
1001-
rootProps={{
1002-
className: classNameCheck,
1003-
}}
1004-
components={{
1005-
Body: () => (
1006-
<DataGridComponents.Body
988+
<DataGrid
989+
ref={tableRef}
990+
isResizable={true}
991+
tableInstance={table}
992+
styling={{
993+
borderStyle: 'all-sides',
994+
hasZebraStriping: true,
995+
headerStyle: 'clean',
996+
}}
997+
isLoading={isLoading}
998+
rootProps={{
999+
className: 'absolute top-[14%] h-[67%] left-10 filetable',
1000+
}}
1001+
components={{
1002+
Body: () => (
1003+
<DataGridComponents.Body
1004+
innerProps={{
1005+
className: colorMode == 'dark' ? 'tbody-dark' : 'tbody-light',
1006+
}}
1007+
/>
1008+
),
1009+
PaginationNumericButton: ({ isSelected, innerProps, ...restProps }) => {
1010+
return (
1011+
<DataGridComponents.PaginationNumericButton
1012+
{...restProps}
1013+
isSelected={isSelected}
10071014
innerProps={{
1008-
className: colorMode == 'dark' ? 'tbody-dark' : 'tbody-light',
1015+
...innerProps,
1016+
style: {
1017+
...(isSelected && {
1018+
backgroundSize: '200% auto',
1019+
borderRadius: '10px',
1020+
}),
1021+
},
10091022
}}
10101023
/>
1011-
),
1012-
PaginationNumericButton: ({ isSelected, innerProps, ...restProps }) => {
1013-
return (
1014-
<DataGridComponents.PaginationNumericButton
1015-
{...restProps}
1016-
isSelected={isSelected}
1017-
innerProps={{
1018-
...innerProps,
1019-
style: {
1020-
...(isSelected && {
1021-
backgroundSize: '200% auto',
1022-
borderRadius: '10px',
1023-
}),
1024-
},
1025-
}}
1026-
/>
1027-
);
1028-
},
1029-
}}
1030-
isKeyboardNavigable={false}
1031-
/>
1032-
</div>
1024+
);
1025+
},
1026+
}}
1027+
isKeyboardNavigable={false}
1028+
/>
10331029
</>
10341030
) : null}
10351031
</>

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const DrawerChatbot: React.FC<DrawerChatbotProps> = ({ isExpanded, clearHistoryD
1919
return messages.some((msg) => msg.isTyping || msg.isLoading);
2020
};
2121
return (
22-
<div className='flex min-h-[calc(-58px+100vh)] relative'>
22+
<div className='flex min-h-[calc(-58px+100vh)] relative w-full'>
2323
<Drawer isExpanded={isExpanded} isCloseable={false} position='right' type='push' className='!pt-0'>
2424
<Drawer.Body className='!overflow-hidden !pr-0'>
2525
<Chatbot

0 commit comments

Comments
 (0)