Skip to content

Commit ec97a9d

Browse files
kartikpersistentkartikpersistent
committed
added progress staus in table
1 parent 2c665d9 commit ec97a9d

File tree

5 files changed

+42
-51
lines changed

5 files changed

+42
-51
lines changed

‎frontend/src/components/Content.tsx‎

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import { updateGraphAPI } from '../services/UpdateGraph';
1212
import GraphViewModal from './GraphViewModal';
1313
import { initialiseDriver } from '../utils/Driver';
1414
import Driver from 'neo4j-driver/types/driver';
15-
import { chunkSize } from '../utils/Constants';
15+
1616

1717
const Content: React.FC<ContentProps> = ({ isExpanded, showChatBot, openChatBot }) => {
1818
const [init, setInit] = useState<boolean>(false);
@@ -75,7 +75,7 @@ const Content: React.FC<ContentProps> = ({ isExpanded, showChatBot, openChatBot
7575
}
7676
};
7777

78-
const extractData = async (file: File, uid: number) => {
78+
const extractData = async (uid: number) => {
7979
if (filesData[uid]?.status == 'New') {
8080
try {
8181
setFilesData((prevfiles) =>
@@ -90,7 +90,6 @@ const Content: React.FC<ContentProps> = ({ isExpanded, showChatBot, openChatBot
9090
})
9191
);
9292
const apiResponse = await extractAPI(
93-
file,
9493
filesData[uid].model,
9594
userCredentials as UserCredentials,
9695
filesData[uid].fileSource,
@@ -177,7 +176,7 @@ const Content: React.FC<ContentProps> = ({ isExpanded, showChatBot, openChatBot
177176
if (files.length > 0) {
178177
for (let i = 0; i < files.length; i++) {
179178
if (filesData[i]?.status === 'New') {
180-
data.push(extractData(files[i] as File, i));
179+
data.push(extractData(i));
181180
}
182181
}
183182
Promise.allSettled(data).then(async (_) => {
@@ -192,9 +191,8 @@ const Content: React.FC<ContentProps> = ({ isExpanded, showChatBot, openChatBot
192191

193192
const handleOpenGraphClick = () => {
194193
const bloomUrl = process.env.BLOOM_URL;
195-
const connectURL = `${userCredentials?.userName}@${localStorage.getItem('URI')}%3A${
196-
localStorage.getItem('port') ?? '7687'
197-
}`;
194+
const connectURL = `${userCredentials?.userName}@${localStorage.getItem('URI')}%3A${localStorage.getItem('port') ?? '7687'
195+
}`;
198196
const encodedURL = encodeURIComponent(connectURL);
199197
const replacedUrl = bloomUrl?.replace('{CONNECT_URL}', encodedURL);
200198
window.open(replacedUrl, '_blank');
@@ -204,10 +202,10 @@ const Content: React.FC<ContentProps> = ({ isExpanded, showChatBot, openChatBot
204202
isExpanded && showChatBot
205203
? 'contentWithBothDrawers'
206204
: isExpanded
207-
? 'contentWithExpansion'
208-
: showChatBot
209-
? 'contentWithChatBot'
210-
: 'contentWithNoExpansion';
205+
? 'contentWithExpansion'
206+
: showChatBot
207+
? 'contentWithChatBot'
208+
: 'contentWithNoExpansion';
211209

212210
const handleGraphView = () => {
213211
setOpenGraphView(true);

‎frontend/src/components/DropZone.tsx‎

Lines changed: 2 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@ import Loader from '../utils/Loader';
55
import { v4 as uuidv4 } from 'uuid';
66
import { useCredentials } from '../context/UserCredentials';
77
import { useFileContext } from '../context/UsersFiles';
8-
import { getFileFromLocal, saveFileToLocal, url } from '../utils/Utils';
98
import CustomAlert from './Alert';
109
import { CustomFile, alertState } from '../types';
1110
import { chunkSize } from '../utils/Constants';
11+
import { getFileFromLocal, url } from '../utils/Utils';
1212

1313
const DropZone: FunctionComponent = () => {
1414
const { files, filesData, setFiles, setFilesData, model } = useFileContext();
@@ -24,7 +24,6 @@ const DropZone: FunctionComponent = () => {
2424

2525
const onDropHandler = (f: Partial<globalThis.File>[]) => {
2626
setIsClicked(true);
27-
f.forEach((i) => saveFileToLocal(i as any));
2827
setSelectedFiles(f.map((f) => f as File));
2928
setIsLoading(false);
3029
if (f.length) {
@@ -104,14 +103,9 @@ const DropZone: FunctionComponent = () => {
104103
let start = 0;
105104
let end = chunkSize;
106105
const uploadNextChunk = async () => {
107-
console.log({
108-
end,
109-
'filesize': file.size
110-
})
111106
if (chunkNumber <= totalChunks) {
112107
const chunk = file.slice(start, end);
113108
console.log({ chunkNumber })
114-
console.log("chunk size", chunk.size)
115109
const formData = new FormData();
116110
formData.append('file', chunk);
117111
formData.append('chunkNumber', chunkNumber.toString());
@@ -152,7 +146,7 @@ const DropZone: FunctionComponent = () => {
152146
if (curfile.name == file.name) {
153147
return {
154148
...curfile,
155-
uploadprogess: (chunkNumber + 1) * chunkProgressIncrement,
149+
uploadprogess: (chunkNumber) * chunkProgressIncrement,
156150
};
157151
}
158152
return curfile;
@@ -165,11 +159,6 @@ const DropZone: FunctionComponent = () => {
165159
} else {
166160
end = file.size + 1;
167161
}
168-
setalertDetails({
169-
showAlert: true,
170-
alertType: 'info',
171-
alertMessage: `Chunk ${chunkNumber}/${totalChunks} uploaded successfully`,
172-
});
173162
uploadNextChunk();
174163
}
175164
} catch (error) {

‎frontend/src/components/FileTable.tsx‎

Lines changed: 28 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { DataGrid, DataGridComponents, IconButton, StatusIndicator, TextLink } from '@neo4j-ndl/react';
1+
import { DataGrid, DataGridComponents, IconButton, StatusIndicator, TextLink, Typography } from '@neo4j-ndl/react';
22
import { useEffect, useMemo, useState } from 'react';
33
import React from 'react';
44
import {
@@ -13,14 +13,15 @@ import {
1313
import { useFileContext } from '../context/UsersFiles';
1414
import { getSourceNodes } from '../services/GetFiles';
1515
import { v4 as uuidv4 } from 'uuid';
16-
import { getFileFromLocal, statusCheck } from '../utils/Utils';
16+
import {statusCheck } from '../utils/Utils';
1717
import { SourceNode, CustomFile, FileTableProps, UserCredentials } from '../types';
1818
import { useCredentials } from '../context/UserCredentials';
1919
import { MagnifyingGlassCircleIconSolid } from '@neo4j-ndl/react/icons';
2020
import CustomAlert from './Alert';
21+
import CustomProgressBar from './CustomProgressBar';
2122

2223
const FileTable: React.FC<FileTableProps> = ({ isExpanded, connectionStatus, setConnectionStatus, onInspect }) => {
23-
const { filesData, setFiles, setFilesData, model } = useFileContext();
24+
const { filesData, setFilesData, model } = useFileContext();
2425
const { userCredentials } = useCredentials();
2526
const columnHelper = createColumnHelper<CustomFile>();
2627
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
@@ -41,8 +42,8 @@ const FileTable: React.FC<FileTableProps> = ({ isExpanded, connectionStatus, set
4142
info.row.original?.fileSource === 's3 bucket'
4243
? info.row.original?.source_url
4344
: info.row.original?.fileSource === 'youtube'
44-
? info.row.original?.source_url
45-
: info.getValue()
45+
? info.row.original?.source_url
46+
: info.getValue()
4647
}
4748
>
4849
{info.getValue()}
@@ -70,6 +71,24 @@ const FileTable: React.FC<FileTableProps> = ({ isExpanded, connectionStatus, set
7071
filterFn: 'statusFilter' as any,
7172
size: 200,
7273
}),
74+
columnHelper.accessor((row) => row.uploadprogess, {
75+
id: 'uploadprogess',
76+
cell: (info: CellContext<CustomFile, string>) => {
77+
if (parseInt(info.getValue()) === 100) {
78+
return <Typography variant='body-medium'><StatusIndicator type="success" />Uploaded</Typography>
79+
} else if (info.row.original?.status === "Uploading") {
80+
return <CustomProgressBar value={parseInt(info?.getValue())}></CustomProgressBar>
81+
} else if (info.row.original?.status === "New") {
82+
return <Typography variant='body-medium'><StatusIndicator type="info" />Not Started</Typography>
83+
} else if (info.row.original?.status === "Failed") {
84+
return <Typography variant='body-medium'><StatusIndicator type="danger" />NA</Typography>
85+
} else {
86+
return <Typography variant='body-medium'><StatusIndicator type="info" />Uploaded</Typography>
87+
}
88+
},
89+
header: () => <span>Upload Progress</span>,
90+
footer: (info) => info.column.id,
91+
}),
7392
columnHelper.accessor((row) => row.size, {
7493
id: 'fileSize',
7594
cell: (info: CellContext<CustomFile, string>) => <i>{(parseInt(info?.getValue()) / 1000)?.toFixed(2)}</i>,
@@ -166,7 +185,7 @@ const FileTable: React.FC<FileTableProps> = ({ isExpanded, connectionStatus, set
166185
status:
167186
item.fileSource === 's3 bucket' && localStorage.getItem('accesskey') === item?.awsAccessKeyId
168187
? item.status
169-
: item.fileSource === 'local file' && getFileFromLocal(`${item.fileName}`) != null
188+
: item.fileSource === 'local file'
170189
? item.status
171190
: item.status === 'Completed' || item.status === 'Failed'
172191
? item.status
@@ -182,24 +201,13 @@ const FileTable: React.FC<FileTableProps> = ({ isExpanded, connectionStatus, set
182201
gcsBucket: item?.gcsBucket,
183202
gcsBucketFolder: item?.gcsBucketFolder,
184203
errorMessage: item?.errorMessage,
204+
uploadprogess: item?.uploadprogress ?? 0
185205
});
186206
}
187207
});
188208
}
189209
setIsLoading(false);
190210
setFilesData(prefiles);
191-
const prefetchedFiles: (File | null)[] = [];
192-
res.data.data.forEach((item: SourceNode) => {
193-
const localFile = getFileFromLocal(`${item.fileName}`);
194-
if (item.fileName != undefined && item.fileName.length) {
195-
if (localFile != null) {
196-
prefetchedFiles.push(localFile);
197-
} else {
198-
prefetchedFiles.push(null);
199-
}
200-
}
201-
});
202-
setFiles(prefetchedFiles);
203211
} else {
204212
throw new Error(res?.data?.error);
205213
}
@@ -209,7 +217,6 @@ const FileTable: React.FC<FileTableProps> = ({ isExpanded, connectionStatus, set
209217
setIsLoading(false);
210218
setConnectionStatus(false);
211219
setFilesData([]);
212-
setFiles([]);
213220
setShowAlert(true);
214221
console.log(error);
215222
}
@@ -218,7 +225,6 @@ const FileTable: React.FC<FileTableProps> = ({ isExpanded, connectionStatus, set
218225
fetchFiles();
219226
} else {
220227
setFilesData([]);
221-
setFiles([]);
222228
}
223229
}, [connectionStatus]);
224230

@@ -259,6 +265,8 @@ const FileTable: React.FC<FileTableProps> = ({ isExpanded, connectionStatus, set
259265
};
260266
}, []);
261267

268+
269+
262270
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
263271
table.getColumn('status')?.setFilterValue(e.target.checked);
264272
};

‎frontend/src/types.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ export interface CustomFile extends Partial<globalThis.File> {
1616
gcsBucket?: string;
1717
gcsBucketFolder?: string;
1818
errorMessage?: string;
19+
uploadprogess?:number
1920
}
2021

2122
export interface OptionType {
@@ -93,6 +94,7 @@ export interface SourceNode {
9394
gcsBucket?: string;
9495
gcsBucketFolder?: string;
9596
errorMessage?: string;
97+
uploadprogress?:number;
9698
}
9799

98100
export interface SideNavProps {

‎frontend/src/utils/FileAPI.ts‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ export const uploadAPI = async (file: File, userCredentials: UserCredentials, mo
1616

1717
// Extract call
1818
export const extractAPI = async (
19-
file: File,
2019
model: string,
2120
userCredentials: UserCredentials,
2221
source_type: string,
@@ -40,12 +39,7 @@ export const extractAPI = async (
4039
} else if (source_type === 'youtube') {
4140
additionalParams = { model, source_url, source_type };
4241
} else {
43-
if (file.size > chunkSize) {
44-
additionalParams = { model, source_type, file_name };
45-
} else {
46-
additionalParams = { model, file, source_type };
47-
}
48-
42+
additionalParams = { model, source_type, file_name };
4943
}
5044
const response = await apiCall(urlExtract, method, commonParams, additionalParams);
5145
return response;

0 commit comments

Comments
 (0)