Skip to content

Commit 13e24dd

Browse files
Chenglong-MSChenglong-MS
committed
upgrade to mui 7.1.1, hopefully not too many stuff broken?
1 parent 5231653 commit 13e24dd

File tree

8 files changed

+143
-147
lines changed

8 files changed

+143
-147
lines changed

‎package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@
77
"@emotion/react": "^11.14.0",
88
"@emotion/styled": "^11.14.0",
99
"@fontsource/roboto": "^4.5.5",
10-
"@mui/icons-material": "^5.14.0",
11-
"@mui/material": "^7.0.2",
10+
"@mui/icons-material": "^7.1.1",
11+
"@mui/material": "^7.1.1",
1212
"@reduxjs/toolkit": "^1.8.6",
1313
"@types/dompurify": "^3.0.5",
1414
"@types/validator": "^13.12.2",

‎src/scss/DataView.scss

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -159,7 +159,6 @@ table .item.selecting {
159159
overflow: clip;
160160
//border-bottom: none;
161161
border-bottom-width: 2px;
162-
padding: 0;
163162

164163
&:last-child {
165164
.data-view-header-container {

‎src/views/DBTableManager.tsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -937,7 +937,8 @@ export const DataLoaderForm: React.FC<{
937937
</TableCell>
938938
</TableRow>,
939939
<TableRow >
940-
<TableCell sx={{ paddingBottom: 0, paddingTop: 0, px: 0, maxWidth: 800, overflowX: "auto", borderBottom: displaySamples[tableName] ? '1px solid rgba(0, 0, 0, 0.1)' : 'none' }} colSpan={4}>
940+
<TableCell colSpan={4} sx={{ paddingBottom: 0, paddingTop: 0, px: 0, maxWidth: 800, overflowX: "auto",
941+
borderBottom: displaySamples[tableName] ? '1px solid rgba(0, 0, 0, 0.1)' : 'none' }}>
941942
<Collapse in={displaySamples[tableName]} timeout="auto" unmountOnExit>
942943
<Box sx={{ px: 1, py: 0.5}}>
943944
<CustomReactTable rows={metadata.sample_rows.slice(0, 9).map((row: any) => {
@@ -993,7 +994,7 @@ export const DataLoaderForm: React.FC<{
993994
label={paramDef.name}
994995
value={params[paramDef.name]}
995996
placeholder={paramDef.description}
996-
onChange={(event) => {
997+
onChange={(event: any) => {
997998
dispatch(dfActions.updateDataLoaderConnectParam({
998999
dataLoaderType, paramName: paramDef.name,
9991000
paramValue: event.target.value}));
@@ -1224,10 +1225,10 @@ export const DataQueryForm: React.FC<{
12241225
sx={{width: 120, ml: 'auto', '& .MuiInputBase-root': {fontSize: 12, height: 32},
12251226
'& .MuiInputLabel-root': {fontSize: 12, transform: "translate(14px, -6px) scale(0.75)"}}}
12261227
slotProps={{
1227-
inputLabel: {shrink: true}
1228+
inputLabel: {shrink: true},
12281229
}}
12291230
value={queryResultName}
1230-
onChange={(event) => setQueryResultName(event.target.value)}
1231+
onChange={(event: any) => setQueryResultName(event.target.value)}
12311232
/>
12321233
<Button variant="contained" color="primary" size="small" disabled={queryResultName === ""} sx={{textTransform: "none", width: 120}}
12331234
onClick={() => handleImportQueryResult()}>

‎src/views/EncodingShelfCard.tsx

Lines changed: 9 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -677,7 +677,6 @@ export const EncodingShelfCard: FC<EncodingShelfCardProps> = function ({ chartId
677677
}
678678
});
679679
}
680-
let defaultInstruction = chart.chartType == "Auto" ? "" : "" // `the output data should contain fields ${activeBaseFields.map(f => `${f.name}`).join(', ')}`
681680

682681
let createDisabled = false;
683682

@@ -686,24 +685,17 @@ export const EncodingShelfCard: FC<EncodingShelfCardProps> = function ({ chartId
686685

687686
let formulateInputBox = <Box key='text-input-boxes' sx={{display: 'flex', flexDirection: 'row', flex: 1, padding: '0px 4px'}}>
688687
<TextField
689-
InputLabelProps={{ shrink: true }}
690688
id="outlined-multiline-flexible"
691-
onKeyDown={(event: any) => {
692-
if (defaultInstruction && (event.key === "Enter" || event.key === "Tab")) {
693-
// write your functionality here
694-
let target = event.target as HTMLInputElement;
695-
if (target.value == "" && target.placeholder != "") {
696-
target.value = defaultInstruction;
697-
setPrompt(target.value);
698-
event.preventDefault();
699-
}
700-
}
701-
}}
702689
sx={{
703690
"& .MuiInputLabel-root": { fontSize: '12px' },
704691
"& .MuiInput-input": { fontSize: '12px' }
705692
}}
706-
onChange={(event) => { setPrompt(event.target.value) }}
693+
onChange={(event: any) => {
694+
setPrompt(event.target.value);
695+
}}
696+
slotProps={{
697+
inputLabel: { shrink: true },
698+
}}
707699
value={prompt}
708700
label=""
709701
placeholder={chart.chartType == "Auto" ? "what do you want to visualize?" : "formulate data"}
@@ -760,15 +752,15 @@ export const EncodingShelfCard: FC<EncodingShelfCardProps> = function ({ chartId
760752
labelId="chart-mark-select-label"
761753
id="chart-mark-select"
762754
value={chart.chartType}
763-
title="Chart Type"
755+
//title="Chart Type"
764756
renderValue={(value: string) => {
765757
const t = getChartTemplate(value);
766758
return (
767759
<div style={{display: 'flex', padding: "0px 0px 0px 4px"}}>
768760
<ListItemIcon sx={{minWidth: "24px"}}>
769761
{typeof t?.icon == 'string' ? <img height="24px" width="24px" src={t?.icon} alt="" role="presentation" /> : t?.icon}
770762
</ListItemIcon>
771-
<ListItemText sx={{marginLeft: "2px", whiteSpace: "initial"}} primaryTypographyProps={{fontSize: '12px'}}>{t?.chart}</ListItemText>
763+
<ListItemText sx={{marginLeft: "2px", whiteSpace: "initial"}} slotProps={{primary: {fontSize: 12}}}>{t?.chart}</ListItemText>
772764
</div>
773765
)
774766
}}
@@ -781,7 +773,7 @@ export const EncodingShelfCard: FC<EncodingShelfCardProps> = function ({ chartId
781773
<ListItemIcon>
782774
{typeof t?.icon == 'string' ? <img height="24px" width="24px" src={t?.icon} alt="" role="presentation" /> : t?.icon}
783775
</ListItemIcon>
784-
<ListItemText primaryTypographyProps={{fontSize: '12px'}}>{t.chart}</ListItemText>
776+
<ListItemText slotProps={{primary: {fontSize: 12}}}>{t.chart}</ListItemText>
785777
</MenuItem>
786778
))
787779
]

‎src/views/MessageSnackbar.tsx

Lines changed: 60 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,20 @@ import IconButton from '@mui/material/IconButton';
88
import CloseIcon from '@mui/icons-material/Close';
99
import { DataFormulatorState, dfActions } from '../app/dfSlice';
1010
import { useDispatch, useSelector } from 'react-redux';
11-
import { Alert, alpha, Box, Chip, Divider, Paper, Tooltip, Typography } from '@mui/material';
11+
import { Alert, alpha, Box, Chip, Collapse, Divider, Paper, Tooltip, Typography } from '@mui/material';
1212
import InfoIcon from '@mui/icons-material/Info';
1313
import AssignmentIcon from '@mui/icons-material/Assignment';
1414
import DeleteIcon from '@mui/icons-material/Delete';
1515

16-
import NetworkWifi1BarIcon from '@mui/icons-material/NetworkWifi1Bar';
17-
import NetworkWifi2BarIcon from '@mui/icons-material/NetworkWifi2Bar';
18-
import NetworkWifiIcon from '@mui/icons-material/NetworkWifi';
16+
import SignalCellular1BarIcon from '@mui/icons-material/SignalCellular1Bar';
17+
import SignalCellular2BarIcon from '@mui/icons-material/SignalCellular2Bar';
18+
import SignalCellular3BarIcon from '@mui/icons-material/SignalCellular3Bar';
19+
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
20+
import ExpandLessIcon from '@mui/icons-material/ExpandLess';
21+
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
22+
import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
23+
import WarningIcon from '@mui/icons-material/Warning';
24+
import InfoOutlineIcon from '@mui/icons-material/InfoOutline';
1925

2026
export interface Message {
2127
type: "success" | "info" | "error" | "warning",
@@ -40,6 +46,7 @@ export function MessageSnackbar() {
4046

4147
const [openChallenge, setOpenChallenge] = React.useState(true);
4248
const [openMessages, setOpenMessages] = React.useState(false);
49+
const [expandedMessages, setExpandedMessages] = React.useState<string[]>([]);
4350

4451
// Add ref for messages scroll, so that we always scroll to the bottom of the messages list
4552
const messagesScrollRef = React.useRef<HTMLDivElement>(null);
@@ -194,9 +201,9 @@ export function MessageSnackbar() {
194201
alignItems: 'center'
195202
}}
196203
>
197-
{ch.difficulty === 'easy' ? <NetworkWifi1BarIcon sx={{fontSize: 16, mr: 0.5}} />
198-
: ch.difficulty === 'medium' ? <NetworkWifi2BarIcon sx={{fontSize: 16, mr: 0.5}} />
199-
: <NetworkWifiIcon sx={{fontSize: 16, mr: 0.5}} />}
204+
{ch.difficulty === 'easy' ? <SignalCellular1BarIcon sx={{fontSize: 16, mr: 0.5}} />
205+
: ch.difficulty === 'medium' ? <SignalCellular2BarIcon sx={{fontSize: 16, mr: 0.5}} />
206+
: <SignalCellular3BarIcon sx={{fontSize: 16, mr: 0.5}} />}
200207

201208
[{ch.difficulty}] {ch.text}
202209
</Typography>
@@ -256,25 +263,25 @@ export function MessageSnackbar() {
256263
{messages.length == 0 &&
257264
<Typography fontSize={12} component="span" sx={{margin: "auto", my: 1, opacity: 0.7, fontStyle: 'italic'}}>There are no messages yet</Typography>}
258265
{groupedMessages.map((msg, index) => (
259-
<Alert key={index} severity={msg.type} sx={{
266+
<Alert icon={false} key={index} severity={msg.type} sx={{
260267
mb: 0.5, py: 0, px: 1,
261268

262269
'& .MuiSvgIcon-root ': {
263-
height: '18px',
264-
width: '18px'
265-
},
266-
'& .MuiAlert-icon': {
267-
mr: 0.5,
268-
py: 0.25
270+
height: '16px',
271+
width: '16px'
269272
},
270273
'& .MuiAlert-message': {
271274
py: 0.25
272275
},
273276
backgroundColor: 'rgba(255, 255, 255, 0.5)',
274277
} }>
275278
<Box key={`${msg.originalIndex}-${msg.count}`} sx={{ display: 'flex', alignItems: 'center'}}>
279+
{msg.type == "error" && <ErrorOutlineIcon sx={{fontSize: 16, mr: 0.5, color: 'error.main'}} />}
280+
{msg.type == "warning" && <WarningIcon sx={{fontSize: 16, mr: 0.5, color: 'warning.main'}} />}
281+
{msg.type == "info" && <InfoOutlineIcon sx={{fontSize: 16, mr: 0.5, color: 'info.main'}} />}
282+
{msg.type == "success" && <CheckCircleIcon sx={{fontSize: 16, mr: 0.5, color: 'success.main'}} />}
276283
<Typography fontSize={11} component="span" >
277-
<b>[{formatTimestamp(msg.timestamp)}] ({msg.component})</b> {msg.value}
284+
[{formatTimestamp(msg.timestamp)}] ({msg.component}) - {msg.value}
278285
</Typography>
279286
{msg.count > 1 && (
280287
<Chip
@@ -292,34 +299,45 @@ export function MessageSnackbar() {
292299
}}
293300
/>
294301
)}
302+
{(msg.detail || msg.code) && (!expandedMessages.includes(msg.timestamp.toString()) ? (
303+
<IconButton sx={{p: 0}} onClick={() => setExpandedMessages([...expandedMessages, msg.timestamp.toString()])}>
304+
<ExpandMoreIcon sx={{fontSize: 12}} />
305+
</IconButton>
306+
) : (
307+
<IconButton sx={{p: 0}} onClick={() => setExpandedMessages(expandedMessages.filter(t => t !== msg.timestamp.toString()))}>
308+
<ExpandLessIcon sx={{fontSize: 12}} />
309+
</IconButton>
310+
))}
295311
</Box>
296-
{msg.detail && (
297-
<>
298-
<Divider textAlign="left" sx={{my: 1, fontSize: 12, opacity: 0.7}}>
299-
[details]
300-
</Divider>
301-
<Box sx={{ borderRadius: 1, position: 'relative' }}>
302-
<Typography fontSize={12}>{msg.detail}</Typography>
303-
</Box>
304-
</>
305-
)}
306-
{msg.code && (
307-
<>
308-
<Divider textAlign="left" sx={{my: 1, fontSize: 12, opacity: 0.7}}>
309-
[generated code]
310-
</Divider>
311-
<Typography fontSize={10} component="span" sx={{opacity: 0.7}}>
312-
<pre style={{
313-
whiteSpace: 'pre-wrap',
314-
wordBreak: 'break-word',
315-
marginTop: 1,
316-
fontSize: '10px'
317-
}}>
318-
{msg.code.split('\n').filter(line => line.trim() !== '').join('\n')}
319-
</pre>
320-
</Typography>
321-
</>
322-
)}
312+
{msg.detail || msg.code && <Collapse in={expandedMessages.includes(msg.timestamp.toString())} >
313+
{msg.detail && (
314+
<>
315+
<Divider textAlign="left" sx={{my: 1, fontSize: 12, opacity: 0.7}}>
316+
[details]
317+
</Divider>
318+
<Box sx={{ borderRadius: 1, position: 'relative' }}>
319+
<Typography fontSize={12}>{msg.detail}</Typography>
320+
</Box>
321+
</>
322+
)}
323+
{msg.code && (
324+
<>
325+
<Divider textAlign="left" sx={{my: 1, fontSize: 12, opacity: 0.7}}>
326+
[generated code]
327+
</Divider>
328+
<Typography fontSize={10} component="span" sx={{opacity: 0.7}}>
329+
<pre style={{
330+
whiteSpace: 'pre-wrap',
331+
wordBreak: 'break-word',
332+
marginTop: 1,
333+
fontSize: '10px'
334+
}}>
335+
{msg.code.split('\n').filter(line => line.trim() !== '').join('\n')}
336+
</pre>
337+
</Typography>
338+
</>
339+
)}
340+
</Collapse>}
323341
</Alert>
324342
))}
325343
</Box>

0 commit comments

Comments
 (0)