jketreno/backstory
1
0
Fork 0
Code Issues 12 Actions Releases Activity

Added analysis complete progress

Browse Source
This commit is contained in:
James Ketr 2025-06-19 08:55:01 -07:00
parent 5c867af814
commit ffd4b829f6
2 changed files with 90 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/BackstoryApp.css
View File

@ -205,7 +205,7 @@ button {
}
/* Reduce space between headings and content */
* h1.MuiTypography-root,
/* * h1.MuiTypography-root,
* h2.MuiTypography-root,
* h3.MuiTypography-root,
* h4.MuiTypography-root,
@ -214,7 +214,7 @@ button {
margin-top: 1rem;
margin-bottom: 0.5rem;
font-size: 1rem;
}
} */
/* Reduce space in lists */
* ul.MuiTypography-root,

139
frontend/src/components/JobMatchAnalysis.tsx
View File

@ -13,6 +13,7 @@ import {
LinearProgress,
useMediaQuery,
Button,
Paper,
} from '@mui/material';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
@ -53,6 +54,7 @@ const JobMatchAnalysis: React.FC<JobAnalysisProps> = (props: JobAnalysisProps) =
const [analyzing, setAnalyzing] = useState<boolean>(false);
const [matchStatus, setMatchStatus] = useState<string>('');
const [_matchStatusType, setMatchStatusType] = useState<Types.ApiActivityType | null>(null);
const [percentage, setPercentage] = useState<number>(0);
const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
@ -239,10 +241,12 @@ const JobMatchAnalysis: React.FC<JobAnalysisProps> = (props: JobAnalysisProps) =
return updated;
});
}
setPercentage(Math.round(((i + 1) / requirements.length) * 100));
}
};
setAnalyzing(true);
setPercentage(0);
const skills: SkillAssessment[] = [];
fetchMatchData(skills).then(() => {
setAnalyzing(false);
@ -305,62 +309,95 @@ const JobMatchAnalysis: React.FC<JobAnalysisProps> = (props: JobAnalysisProps) =
gap: 1,
}}
>
{overallScore !== 0 && (
<>
<Typography variant="h5" component="h2" sx={{ mr: 2 }}>
Overall Match:
</Typography>
<Box
sx={{
position: 'relative',
display: 'inline-flex',
mr: 2,
}}
>
<CircularProgress
variant="determinate"
value={overallScore}
size={60}
thickness={5}
sx={{
color: getMatchColor(overallScore),
}}
/>
<Box
sx={{
top: 0,
left: 0,
bottom: 0,
right: 0,
position: 'absolute',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
<Typography variant="caption" component="div" sx={{ fontWeight: 'bold' }}>
{`${Math.round(overallScore)}%`}
</Typography>
</Box>
</Box>
<Chip
label={
overallScore >= 80
? 'Excellent Match'
: overallScore >= 60
{overallScore !== 0 && <Paper sx={{ width: '10rem', ml: 1, p: 1, gap: 1, display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexDirection: 'column' }}>
<Chip
label={
overallScore >= 80
? 'Excellent Match'
: overallScore >= 60
? 'Good Match'
: overallScore >= 40
? 'Partial Match'
: 'Low Match'
}
? 'Partial Match'
: 'Low Match'
}
sx={{
bgcolor: getMatchColor(overallScore),
color: 'white',
fontWeight: 'bold',
}}
/>
<Box
sx={{
position: 'relative',
display: 'inline-flex',
}}
>
<CircularProgress
variant="determinate"
value={overallScore}
size={60}
thickness={5}
sx={{
bgcolor: getMatchColor(overallScore),
color: 'white',
fontWeight: 'bold',
color: getMatchColor(overallScore),
}}
/>
</>
)}
<Box
sx={{
top: 0,
left: 0,
bottom: 0,
right: 0,
position: 'absolute',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
<Typography variant="caption" component="div" sx={{ fontWeight: 'bold' }}>
{`${Math.round(overallScore)}%`}
</Typography>
</Box>
</Box>
</Paper>
}
{analyzing && <Paper sx={{ width: "10rem", ml: 1, p: 1, gap: 1, display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexDirection: 'column' }}>
<Typography variant="h5" component="h2" sx={{ m: 0, fontSize: '1rem' }}>
Analyzing
</Typography>
<Box
sx={{
position: 'relative',
display: 'inline-flex',
}}
>
<CircularProgress
variant="determinate"
value={percentage}
size={60}
thickness={5}
sx={{
color: "orange",
}}
/>
<Box
sx={{
top: 0,
left: 0,
bottom: 0,
right: 0,
position: 'absolute',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
<Typography variant="caption" component="div" sx={{ fontWeight: 'bold' }}>
{`${Math.round(percentage)}%`}
</Typography>
</Box>
</Box>
</Paper>}
</Box>
<Button
sx={{ marginLeft: 'auto' }}