improving UI for challenge display

Author: Chenglong-MS

py-src/data_formulator/app.py

@@ -59,7 +59,7 @@ def get_example_dataset_list():
     example_datasets = [
         {"name": "gapminder", "challenges": [
             {"text": "Create a line chart to show the life expectancy trend of each country over time.", "difficulty": "easy"},
-            {"text": "What's the 10 countries with highest life expectancy in 2005?", "difficulty": "medium"},
+            {"text": "Visualize the top 10 countries with highest life expectancy in 2005.", "difficulty": "medium"},
             {"text": "Find top 10 countries that have the biggest difference of life expectancy in 1955 and 2005.", "difficulty": "hard"},
             {"text": "Rank countries by their average population per decade. Then only show countries with population over 50 million in 2005.", "difficulty": "hard"}
         ]},
@@ -83,7 +83,7 @@ def get_example_dataset_list():
         ]},
         {"name": "unemployment-across-industries", "challenges": [
             {"text": "Create a scatter plot to show the relationship between unemployment rate and year.", "difficulty": "easy"},
-            {"text": "Create a line chart to show the average unemployment per year for each industry", "difficulty": "medium"},
+            {"text": "Create a line chart to show the average unemployment per year for each industry.", "difficulty": "medium"},
             {"text": "Find the 5 most stable industries (least change in unemployment rate between 2000 and 2010) and visualize their trend over time using line charts.", "difficulty": "medium"},
             {"text": "Create a bar chart to show the unemployment rate change between 2000 and 2010, and highlight the top 5 most stable industries with least change.", "difficulty": "hard"}
         ]}

src/views/MessageSnackbar.tsx

@@ -70,18 +70,19 @@ export function MessageSnackbar() {
         <Box>
             <Tooltip placement="right" title="view challenges">
                 <IconButton 
+                    color="warning"
                     disabled={challenges.length === 0}
                     sx={{
                         position: "absolute", 
                         bottom: 56, 
-                        right: 0,
+                        right: 8,
                         animation: challenges.length > 0 ? 'glow 1.5s ease-in-out infinite alternate' : 'none',
                         '@keyframes glow': {
                             from: {
-                                boxShadow: '0 0 5px #fff, 0 0 10px #fff, 0 0 15px #1976d2'
+                                boxShadow: '0 0 5px #fff, 0 0 10px #fff, 0 0 15px #ed6c02'
                             },
                             to: {
-                                boxShadow: '0 0 10px #fff, 0 0 20px #fff, 0 0 30px #1976d2'
+                                boxShadow: '0 0 10px #fff, 0 0 20px #fff, 0 0 30px #ed6c02'
                             }
                         }
                     }}
@@ -90,29 +91,35 @@ export function MessageSnackbar() {
                     <AssignmentIcon />
                 </IconButton>
             </Tooltip>
-            <Tooltip placement="right" title="view last message"><IconButton disabled={messages.length == 0} sx={{position: "absolute", bottom: 16, right: 0}}
-                onClick={()=>{
-                    setOpen(true);
-                    setMessage(messages[messages.length - 1]);
-            }}><InfoIcon /></IconButton></Tooltip>
+            <Tooltip placement="right" title="view last message">
+                <IconButton disabled={messages.length == 0} sx={{position: "absolute", bottom: 16, right: 8}}
+                    onClick={()=>{
+                        setOpen(true);
+                        setMessage(messages[messages.length - 1]);
+                    }}
+                >
+                    <InfoIcon />
+                </IconButton>
+            </Tooltip>
             {challenge != undefined ? <Snackbar
                 open={openChallenge}
                 anchorOrigin={{vertical: 'bottom', horizontal: 'right'}}
                 sx={{maxWidth: '400px'}}
             >
                 <Paper sx={{
                     width: '100%',
-                    bgcolor: 'rgb(237,244,251)',
+                    bgcolor: 'white',
                     color: 'text.primary',
                     p: 2,
-                    boxShadow: 1,
+                    boxShadow: 2,
                     borderRadius: 1,
+                    border: '1px solid #e0e0e0',
                     display: 'flex',
                     flexDirection: 'column'
                 }}>
                     <Box sx={{display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 1}}>
                         <Typography variant="subtitle1" sx={{fontWeight: 'bold', fontSize: 14}}>
-                            Visualization Challenges for <Box component="span" sx={{fontWeight: 'bold', color: 'primary.main'}}>{challenge.tableId}</Box>
+                            Visualization challenges for dataset <Box component="span" sx={{fontWeight: 'bold', color: 'primary.main'}}>{challenge.tableId}</Box>
                         </Typography>
                         <IconButton
                             size="small"
@@ -130,11 +137,9 @@ export function MessageSnackbar() {
                                 sx={{
                                     fontSize: 12,
                                     marginBottom: 1,
-                                    color: ch.difficulty === 'easy' 
-                                        ? '#2e7d32' 
-                                        : ch.difficulty === 'medium' 
-                                            ? '#f57c00' 
-                                            : '#d32f2f'
+                                    color: ch.difficulty === 'easy' ? 'success.main'
+                                        : ch.difficulty === 'medium' ? 'warning.main' 
+                                        : 'error.main'
                                 }}
                             >
                                 <Box 

src/views/TableSelectionView.tsx

@@ -123,16 +123,11 @@ export const TableSelectionView: React.FC<TableSelectionViewProps> = function Ta
             }})
 
             let challengeView = <Box sx={{margin: "6px 0px"}}>
-                <Typography variant="subtitle2" sx={{marginLeft: "6px", fontSize: 12}}>Try these data visualizationchallenges with this dataset:</Typography>
-                {tc.challenges.map((c, j) => <Box key={j} sx={{display: 'flex', alignItems: 'flex-start', pl: 2}}>
-                    <Box component="span" sx={{display: 'inline-block', width: '6px', height: '6px', 
-                                            borderRadius: '50%', mr: 1, mt: 1,
-                                            bgcolor: c.difficulty === 'easy' ? '#2e7d32' : 
-                                                    c.difficulty === 'medium' ? '#f57c00' : 
-                                                    '#d32f2f'}} />
-                    <Typography sx={{fontSize: 11, color: c.difficulty === 'easy' ? '#2e7d32' : 
-                                                        c.difficulty === 'medium' ? '#f57c00' : 
-                                                        '#d32f2f'}}>[{c.difficulty}] {c.text}</Typography>
+                <Typography variant="subtitle2" sx={{marginLeft: "6px", fontSize: 12}}>Try these data visualization challenges with this dataset:</Typography>
+                {tc.challenges.map((c, j) => <Box key={j} sx={{display: 'flex', alignItems: 'flex-start', pl: 1}}>
+                    <Typography sx={{fontSize: 11, color: c.difficulty === 'easy' ? 'success.main' : 
+                                                        c.difficulty === 'medium' ? 'warning.main' : 
+                                                        'error.main'}}>[{c.difficulty}] {c.text}</Typography>
                 </Box>)}
             </Box>