Skip to content

Commit 56d4151

Browse files
Chenglong-MSChenglong-MS
committed
various front-end changes
1 parent e2f8f9b commit 56d4151

File tree

4 files changed

+123
-82
lines changed

4 files changed

+123
-82
lines changed

‎src/views/DBTableManager.tsx

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -160,7 +160,7 @@ interface TableStatisticsViewProps {
160160
export class TableStatisticsView extends React.Component<TableStatisticsViewProps> {
161161
render() {
162162
const { tableName, columnStats } = this.props;
163-
163+
164164
// Common styles for header cells
165165
const headerCellStyle = {
166166
backgroundColor: '#fff',
@@ -450,7 +450,7 @@ export const DBTableSelectionDialog: React.FC<{ buttonElement: any }> = function
450450
// Update the analysis map with the new results
451451
setTableAnalysisMap(prevMap => ({
452452
...prevMap,
453-
[tableName]: data
453+
[tableName]: data.statistics
454454
}));
455455
}
456456
} catch (error) {
@@ -1208,10 +1208,10 @@ export const DataQueryForm: React.FC<{
12081208
}
12091209

12101210
let queryResultBox = queryResult?.status === "success" ? [
1211-
<Box sx={{display: "flex", flexDirection: "row", gap: 1, justifyContent: "space-between"}}>
1211+
<Box key="query-result-table" sx={{display: "flex", flexDirection: "row", gap: 1, justifyContent: "space-between"}}>
12121212
<CustomReactTable rows={queryResult.sample} columnDefs={Object.keys(queryResult.sample[0]).map((t: any) => ({id: t, label: t}))} rowsPerPageNum={-1} compact={false} />
12131213
</Box>,
1214-
<Box sx={{display: "flex", flexDirection: "row", gap: 1, alignItems: "center"}}>
1214+
<Box key="query-result-controls" sx={{display: "flex", flexDirection: "row", gap: 1, alignItems: "center"}}>
12151215
<Button variant="outlined" color="primary" size="small" sx={{textTransform: "none", minWidth: 120, mr: 'auto'}}
12161216
onClick={() => {
12171217
setQueryResult(undefined);
@@ -1281,7 +1281,6 @@ export const DataQueryForm: React.FC<{
12811281
fontSize: 12,
12821282
paddingBottom: '24px',
12831283
backgroundColor: "rgba(0, 0, 0, 0.03)",
1284-
12851284
overflowY: "auto"
12861285
}}
12871286
/>

‎src/views/ModelSelectionDialog.tsx

Lines changed: 77 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -219,7 +219,7 @@ export const ModelSelectionButton: React.FC<{}> = ({ }) => {
219219
}}
220220
>
221221
<TableCell align="right">
222-
<Radio checked={tempSelectedModelId == undefined} name="radio-buttons" inputProps={{'aria-label': 'Select this model'}}/>
222+
<Radio size="small" checked={tempSelectedModelId == undefined} name="radio-buttons" slotProps={{input: {'aria-label': 'Select this model'}}}/>
223223
</TableCell>
224224
<TableCell align="left">
225225
<Autocomplete
@@ -244,30 +244,40 @@ export const ModelSelectionButton: React.FC<{}> = ({ }) => {
244244
<TextField
245245
{...params}
246246
placeholder="provider"
247-
InputProps={{
248-
...params.InputProps,
249-
style: { fontSize: "0.875rem" }
247+
slotProps={{
248+
input: {
249+
...params.InputProps,
250+
style: { fontSize: "0.875rem" }
251+
}
250252
}}
251253
size="small"
252254
onChange={(event: any) => setNewEndpoint(event.target.value)}
253255
/>
254256
)}
255-
ListboxProps={{
256-
style: { padding: 0 }
257+
slotProps={{
258+
listbox: {
259+
style: { padding: 0 }
260+
},
261+
}}
262+
slots={{
263+
paper: (props) => {
264+
return <Paper {...props}>
265+
<Typography sx={{ p: 1, color: 'gray', fontStyle: 'italic', fontSize: '0.75rem' }}>
266+
examples
267+
</Typography>
268+
{props.children}
269+
</Paper>
270+
}
257271
}}
258-
PaperComponent={({ children }) => (
259-
<Paper>
260-
<Typography sx={{ p: 1, color: 'gray', fontStyle: 'italic', fontSize: '0.75rem' }}>
261-
examples
262-
</Typography>
263-
{children}
264-
</Paper>
265-
)}
266272
/>
267273
</TableCell>
268274
<TableCell align="left" >
269275
<TextField fullWidth size="small" type={showKeys ? "text" : "password"}
270-
InputProps={{ style: { fontSize: "0.875rem" } }}
276+
slotProps={{
277+
input: {
278+
style: { fontSize: "0.875rem" }
279+
}
280+
}}
271281
placeholder='leave blank if using keyless access'
272282
value={newApiKey}
273283
onChange={(event: any) => { setNewApiKey(event.target.value); }}
@@ -290,51 +300,63 @@ export const ModelSelectionButton: React.FC<{}> = ({ }) => {
290300
error={newEndpoint != "" && !newModel}
291301
{...params}
292302
placeholder="model name"
293-
InputProps={{
294-
...params.InputProps,
295-
style: { fontSize: "0.875rem" },
296-
endAdornment: (
297-
<>
298-
{isLoadingModelOptions ? <CircularProgress color="primary" size={20} /> : null}
299-
{params.InputProps.endAdornment}
300-
</>
301-
),
302-
}}
303-
inputProps={{
304-
...params.inputProps,
305-
'aria-label': 'Select or enter a model',
303+
slotProps={{
304+
input: {
305+
...params.InputProps,
306+
style: { fontSize: "0.875rem" },
307+
endAdornment: (
308+
<>
309+
{isLoadingModelOptions ? <CircularProgress color="primary" size={20} /> : null}
310+
{params.InputProps.endAdornment}
311+
</>
312+
),
313+
},
314+
htmlInput: {
315+
...params.inputProps,
316+
'aria-label': 'Select or enter a model',
317+
}
306318
}}
307319
size="small"
308320
onChange={(event: any) => { setNewModel(event.target.value); }}
309321
/>
310322
)}
311-
ListboxProps={{
312-
style: { padding: 0 }
323+
slotProps={{
324+
listbox: {
325+
style: { padding: 0 }
326+
},
313327
}}
314-
PaperComponent={({ children }) => (
315-
<Paper>
316-
{!isLoadingModelOptions && (
328+
slots={{
329+
paper: (props) => {
330+
return <Paper {...props}>
317331
<Typography sx={{ p: 1, color: 'gray', fontStyle: 'italic', fontSize: 'small' }}>
318332
examples
319333
</Typography>
320-
)}
321-
{children}
322-
</Paper>
323-
)}
334+
{props.children}
335+
</Paper>
336+
}
337+
}}
324338
/>
325339
</TableCell>
326340
<TableCell align="right">
327341
<TextField size="small" type="text" fullWidth
328342
placeholder="api_base"
329-
InputProps={{ style: { fontSize: "0.875rem" } }}
343+
slotProps={{
344+
input: {
345+
style: { fontSize: "0.875rem" }
346+
}
347+
}}
330348
value={newApiBase}
331349
onChange={(event: any) => { setNewApiBase(event.target.value); }}
332350
autoComplete='off'
333351
/>
334352
</TableCell>
335353
<TableCell align="right">
336354
<TextField size="small" type="text" fullWidth
337-
InputProps={{ style: { fontSize: "0.875rem" } }}
355+
slotProps={{
356+
input: {
357+
style: { fontSize: "0.875rem" }
358+
}
359+
}}
338360
value={newApiVersion} onChange={(event: any) => { setNewApiVersion(event.target.value); }}
339361
autoComplete='off'
340362
placeholder="api_version"
@@ -348,8 +370,6 @@ export const ModelSelectionButton: React.FC<{}> = ({ }) => {
348370
onClick={(event) => {
349371
event.stopPropagation()
350372

351-
console.log("checkpont 1")
352-
353373
let endpoint = newEndpoint;
354374

355375
let id = `${endpoint}-${newModel}-${newApiKey}-${newApiBase}-${newApiVersion}`;
@@ -397,7 +417,7 @@ export const ModelSelectionButton: React.FC<{}> = ({ }) => {
397417
<TableCell align="right"></TableCell>
398418
<TableCell sx={{fontWeight: 'bold', width: '120px'}}>provider</TableCell>
399419
<TableCell sx={{fontWeight: 'bold', width: '240px'}}>api_key</TableCell>
400-
<TableCell sx={{fontWeight: 'bold', width: '120px'}} align="left">model</TableCell>
420+
<TableCell sx={{fontWeight: 'bold', width: '160px'}} align="left">model</TableCell>
401421
<TableCell sx={{fontWeight: 'bold', width: '240px'}} align="left">api_base</TableCell>
402422
<TableCell sx={{fontWeight: 'bold', width: '120px'}} align="left">api_version</TableCell>
403423
<TableCell sx={{fontWeight: 'bold'}} align="right">Status</TableCell>
@@ -414,35 +434,33 @@ export const ModelSelectionButton: React.FC<{}> = ({ }) => {
414434

415435
let message = "the model is ready to use";
416436
if (status == "unknown") {
417-
message = "Click the status icon to test again before applying.";
437+
message = "click the status icon to test the model availability.";
418438
} else if (status == "error") {
419439
const rawMessage = testedModels.find(t => t.id == model.id)?.message || "Unknown error";
420440
message = decodeHtmlEntities(rawMessage);
421441
}
422442

423-
const borderStyle = ['error', 'unknown'].includes(status) ? '1px dashed text.secondary' : undefined;
443+
const borderStyle = ['error', 'unknown'].includes(status) ? '1px dashed lightgray' : undefined;
424444
const noBorderStyle = ['error', 'unknown'].includes(status) ? 'none' : undefined;
425445

426-
console.log(message)
427-
428446
return (
429-
<>
447+
<React.Fragment key={`${model.id}`}>
430448
<TableRow
431449
selected={isItemSelected}
432450
key={`${model.id}`}
433451
onClick={() => { setTempSelectedModelId(model.id) }}
434-
sx={{ cursor: 'pointer'}}
452+
sx={{ cursor: 'pointer', '& .MuiTableCell-root': { p: 0.5, fontSize: 14 }}}
435453
>
436-
<TableCell align="right" sx={{ borderBottom: noBorderStyle }}>
437-
<Radio checked={isItemSelected} name="radio-buttons" inputProps={{'aria-label': 'Select this model'}} />
454+
<TableCell align="right" sx={{ borderBottom: noBorderStyle,}}>
455+
<Radio size="small" checked={isItemSelected} name="radio-buttons" slotProps={{input: {'aria-label': 'Select this model'}}} />
438456
</TableCell>
439-
<TableCell align="left" sx={{ borderBottom: noBorderStyle }}>
457+
<TableCell align="left" sx={{ borderBottom: noBorderStyle, p: 0 }}>
440458
{model.endpoint}
441459
</TableCell>
442460
<TableCell component="th" scope="row" sx={{ borderBottom: borderStyle }}>
443461
{model.api_key ? (showKeys ?
444-
<Typography
445-
sx={{
462+
<Typography
463+
sx={{
446464
maxWidth: '240px',
447465
wordBreak: 'break-all',
448466
whiteSpace: 'normal'
@@ -465,8 +483,10 @@ export const ModelSelectionButton: React.FC<{}> = ({ }) => {
465483
{model.api_version}
466484
</TableCell>
467485
<TableCell sx={{fontWeight: 'bold', borderBottom: borderStyle}} align="right">
468-
<Tooltip title={message}>
486+
<Tooltip title={
487+
status == 'ok' ? message : 'test model availability'}>
469488
<IconButton
489+
size="small"
470490
onClick ={() => { testModel(model) }}
471491
>
472492
{statusIcon}
@@ -476,6 +496,7 @@ export const ModelSelectionButton: React.FC<{}> = ({ }) => {
476496
<TableCell sx={{ borderBottom: borderStyle }} align="right">
477497
<Tooltip title="remove model">
478498
<IconButton
499+
size="small"
479500
onClick={()=>{
480501
dispatch(dfActions.removeModel(model.id));
481502
if ((tempSelectedModelId)
@@ -506,14 +527,13 @@ export const ModelSelectionButton: React.FC<{}> = ({ }) => {
506527
>
507528
<TableCell colSpan={2} align="right" ></TableCell>
508529
<TableCell colSpan={6}>
509-
<Typography variant="caption" color="#c82c2c">
530+
<Typography variant="caption" color="#c82c2c" sx={{fontSize: "0.625rem"}}>
510531
{message}
511-
512532
</Typography>
513533
</TableCell>
514534
</TableRow>
515535
)}
516-
</>
536+
</React.Fragment>
517537
)
518538
})}
519539
{newModelEntry}

‎src/views/TableSelectionView.tsx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -239,6 +239,7 @@ export const TableSelectionDialog: React.FC<{ buttonElement: any }> = function T
239239
dispatch(dfActions.addMessages({
240240
"timestamp": Date.now(),
241241
"type": "error",
242+
"component": "data loader",
242243
"value": `Unable to load the sample dataset ${tableChallenges.table.id}, please try again later or upload your data.`
243244
}));
244245
})
@@ -291,6 +292,7 @@ export const TableUploadDialog: React.FC<TableUploadDialogProps> = ({ buttonElem
291292
dispatch(dfActions.addMessages({
292293
"timestamp": Date.now(),
293294
"type": "error",
295+
"component": "data loader",
294296
"value": `File ${file.name} is too large (${(file.size / (1024 * 1024)).toFixed(2)}MB), upload it via DATABASE option instead.`
295297
}));
296298
continue; // Skip this file and process the next one
@@ -322,6 +324,7 @@ export const TableUploadDialog: React.FC<TableUploadDialogProps> = ({ buttonElem
322324
dispatch(dfActions.addMessages({
323325
"timestamp": Date.now(),
324326
"type": "error",
327+
"component": "data loader",
325328
"value": `Failed to parse Excel file ${file.name}. Please check the file format.`
326329
}));
327330
}
@@ -333,6 +336,7 @@ export const TableUploadDialog: React.FC<TableUploadDialogProps> = ({ buttonElem
333336
dispatch(dfActions.addMessages({
334337
"timestamp": Date.now(),
335338
"type": "error",
339+
"component": "data loader",
336340
"value": `Unsupported file format: ${file.name}. Please use CSV, TSV, JSON, or Excel files.`
337341
}));
338342
}
@@ -566,6 +570,7 @@ export const TableCopyDialogV2: React.FC<TableCopyDialogProps> = ({ buttonElemen
566570
dispatch(dfActions.addMessages({
567571
"timestamp": Date.now(),
568572
"type": "error",
573+
"component": "data loader",
569574
"value": "unable to perform auto-sort."
570575
}));
571576
setCleanTableContent(undefined);
@@ -577,6 +582,7 @@ export const TableCopyDialogV2: React.FC<TableCopyDialogProps> = ({ buttonElemen
577582
dispatch(dfActions.addMessages({
578583
"timestamp": Date.now(),
579584
"type": "error",
585+
"component": "data loader",
580586
"value": "unable to perform clean data due to server issue."
581587
}));
582588
});

0 commit comments

Comments
 (0)