Skip to content

Feat: Enrollment Update Time Tooltip #1315

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
vicksey wants to merge 7 commits into
base: main
Choose a base branch
from
Open

Feat: Enrollment Update Time Tooltip #1315

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
8df04a9
enrollment header and NOR tooltip new branch
Oct 28, 2025
8d94de1
shrank font
Oct 28, 2025
c149cf6
added tooltip to added pane
Oct 29, 2025
8fe7444
latest section instead of course time
Oct 29, 2025
45150f2
clean
Oct 29, 2025
84649a8
small ui fixes
Oct 29, 2025
12fa19d
fix: adjust icons bottom alignment
Dec 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 5 additions & 2 deletions apps/antalmanac/src/components/RightPane/AddedCourses/AddedCoursePane.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,10 +49,13 @@ function getCourses() {
needleCourse.courseTitle === course.courseTitle
);

const sectionUpdatedAt = course.section?.updatedAt ?? null;

if (formattedCourse) {
formattedCourse.sections.push({
...course.section,
});
formattedCourse.updatedAt = sectionUpdatedAt;
} else {
formattedCourse = {
term: course.term,
Expand All @@ -66,7 +69,7 @@ function getCourses() {
...course.section,
},
],
updatedAt: null,
updatedAt: sectionUpdatedAt ?? null,
};
formattedCourses.push(formattedCourse);
}
Expand Down Expand Up @@ -385,7 +388,7 @@ export function AddedCoursePane() {
setSkeletonMode(AppStore.getSkeletonMode());
};

console.log('Opened added ourse');
console.log('Opened added course');

logAnalytics(postHog, {
category: analyticsEnum.addedClasses,
Expand Down
23 changes: 7 additions & 16 deletions apps/antalmanac/src/components/RightPane/SectionTable/EnrollmentColumnHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,21 @@
import { Help } from '@mui/icons-material';
import { AccessTimeFilled } from '@mui/icons-material';
import { Box, Tooltip, Typography, useMediaQuery, useTheme } from '@mui/material';

interface EnrollmentColumnHeaderProps {
label: string;
formattedTime: string | null;
}

export function EnrollmentColumnHeader(props: EnrollmentColumnHeaderProps) {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down('sm'));

return (
<Box display="flex">
{props.label}
{!isMobile && (
<Tooltip
title={
<Typography>
Enrolled/Capacity
<br />
Waitlist/Capacity
<br />
New-Only Reserved
</Typography>
}
>
<Help fontSize="small" />
<Box display="flex" alignItems="center">
{props.label}
{!isMobile && props.formattedTime && (
Copy link
Collaborator

@alexespejo alexespejo Oct 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How come we hide on mobile? iirc there was a discussion about how tricky it was to make responsive was it apart of that?

Copy link
Contributor Author

@vicksey vicksey Dec 2, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think because it's a hover tooltip and such a small feature that's really only used when someone's actively enrolling that it can just be waived for mobile. Do you think its needed for mobile?

Copy link
Collaborator

@alexespejo alexespejo Dec 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's true. I think as a rule of thumb the feature should be supported in some capacity. I think the added panel needs some redesign maybe it's something to loop ui/ux in with.

Copy link
Contributor Author

@vicksey vicksey Dec 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yea, but I think that's something outside of the scope of this feature. I can easily include it if you want though, itll just be a tap to see the tooltip then - which might get finicky (like accidentally tapping it).

<Tooltip title={<Typography fontSize={'small'}> Last updated at {props.formattedTime}</Typography>}>
<AccessTimeFilled sx={{ fontSize:"1rem", marginBottom:0.25}}/>
</Tooltip>
)}
</Box>
Expand Down
18 changes: 16 additions & 2 deletions apps/antalmanac/src/components/RightPane/SectionTable/SectionTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import analyticsEnum from '$lib/analytics/analytics';
import { MOBILE_BREAKPOINT } from '$src/globals';
import { useColumnStore, SECTION_TABLE_COLUMNS, type SectionTableColumn } from '$stores/ColumnStore';
import { useTabStore } from '$stores/TabStore';
import { useTimeFormatStore } from '$stores/SettingsStore';

const TOTAL_NUM_COLUMNS = SECTION_TABLE_COLUMNS.length;

Expand Down Expand Up @@ -69,6 +70,7 @@ const tableHeaderColumnEntries = Object.entries(tableHeaderColumns);

function SectionTable(props: SectionTableProps) {
const { courseDetails, term, allowHighlight, scheduleNames, analyticsCategory } = props;
const { isMilitaryTime } = useTimeFormatStore()

const [activeColumns] = useColumnStore((store) => [store.activeColumns]);
const [activeTab] = useTabStore((store) => [store.activeTab]);
Expand All @@ -78,10 +80,22 @@ function SectionTable(props: SectionTableProps) {
return courseDetails.deptCode.replaceAll(' ', '') + courseDetails.courseNumber;
}, [courseDetails.deptCode, courseDetails.courseNumber]);

const formattedTime = useMemo(() => {
if (!courseDetails.updatedAt) return null;
const date = new Date(courseDetails.updatedAt);
return isNaN(date.getTime())
? null
: date.toLocaleTimeString(undefined, {
hour: '2-digit',
minute: '2-digit',
hour12: !isMilitaryTime,
});
}, [courseDetails.updatedAt, isMilitaryTime]);

/**
* Limit table width to force side scrolling.
*/
const width = 780;
const width = 920;
const tableMinWidth = useMemo(() => {
const numActiveColumns = activeColumns.length;
return (width * numActiveColumns) / TOTAL_NUM_COLUMNS;
Expand Down Expand Up @@ -187,7 +201,7 @@ function SectionTable(props: SectionTableProps) {
padding: 0,
}}
>
{label === 'Enrollment' ? <EnrollmentColumnHeader label={label} /> : label}
{label === 'Enrollment' && formattedTime ? <EnrollmentColumnHeader label={label} formattedTime={formattedTime}/> : label}
</TableCell>
))}
</TableRow>
Expand Down
1 change: 1 addition & 0 deletions apps/antalmanac/src/components/RightPane/SectionTable/SectionTable.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,4 +12,5 @@ export interface SectionTableProps {
allowHighlight: boolean;
scheduleNames: string[];
analyticsCategory: AnalyticsCategory;
updatedAt?: string;
}
8 changes: 6 additions & 2 deletions ...mponents/RightPane/SectionTable/SectionTableBody/SectionTableBodyCells/EnrollmentCell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Box } from '@mui/material';
import { Box, Tooltip } from '@mui/material';
import { WebsocSectionEnrollment } from '@packages/antalmanac-types';

import { TableBodyCellContainer } from '$components/RightPane/SectionTable/SectionTableBody/SectionTableBodyCells/TableBodyCellContainer';
Expand Down Expand Up @@ -40,7 +40,11 @@ export const EnrollmentCell = ({
WL: {numOnWaitlist} / {numWaitlistCap}
</Box>
)}
{numNewOnlyReserved !== '' && <Box>NOR: {numNewOnlyReserved}</Box>}
{numNewOnlyReserved && (
<Tooltip title="New-Only Reserved">
<Box component="span">NOR: {numNewOnlyReserved}</Box>
</Tooltip>
)}
</Box>
</TableBodyCellContainer>
);
Expand Down
Loading