[Faculties] Add mini info button for sorting the data table

UniversityOfHelsinkiCS · Dec 11, 2024 · 6df9836 · 6df9836
1 parent 634c4c9
commit 6df9836
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 4 deletions.
diff --git a/services/frontend/src/common/InfoToolTips/faculty.ts b/services/frontend/src/common/InfoToolTips/faculty.ts
@@ -73,6 +73,9 @@ export const facultyToolTips: Record<string, string> = {
     start date of the bachelor programme and at the moment, they do not include any transferred credits.
     Thus, in these statistics some students have fewer credits than in reality.
   `,
+  interactiveDataTable: `
+    Sort bars in the yearly charts by programme code or other column values. Sorting is done inside the degree group.
+  `,
 }
 
 facultyToolTips.studentsStatsOfTheFaculty = studyProgrammeToolTips.studyTrackOverview.replace(

diff --git a/services/frontend/src/components/material/ExpandableRow.tsx b/services/frontend/src/components/material/ExpandableRow.tsx
@@ -26,9 +26,9 @@ export const ExpandableRow = ({
   return (
     <TableRow>
       {yearArray?.map((value, index) => (
-        <TableCell align={index === 0 ? 'center' : 'right'} key={getKey(value, index)}>
+        <TableCell align="right" key={getKey(value, index)}>
           {index === 0 ? (
-            <Box alignItems="center" display="flex" justifyContent="center">
+            <Box alignItems="center" display="flex" justifyContent="left">
               <IconButton data-cy={`${cypress}${yearIndex}`} onClick={toggleVisibility} size="small">
                 {visible ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
               </IconButton>

diff --git a/services/frontend/src/components/material/Section/LoadingSkeleton.tsx b/services/frontend/src/components/material/Section/LoadingSkeleton.tsx
@@ -3,7 +3,7 @@ import { Box, CircularProgress, Skeleton, Stack, Typography } from '@mui/materia
 export const LoadingSkeleton = () => {
   return (
     <Box sx={{ height: 400, position: 'relative' }}>
-      <Skeleton height={400} variant="rectangular" />
+      <Skeleton height={400} sx={{ borderRadius: 1 }} variant="rectangular" />
       <Box
         sx={{
           position: 'absolute',

diff --git a/services/frontend/src/pages/Faculties/BasicInformationTab/InteractiveDataTable/index.tsx b/services/frontend/src/pages/Faculties/BasicInformationTab/InteractiveDataTable/index.tsx
@@ -1,7 +1,9 @@
 import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TableSortLabel } from '@mui/material'
 import { Fragment, useState } from 'react'
 
+import { facultyToolTips } from '@/common/InfoToolTips'
 import { ExpandableRow } from '@/components/material/ExpandableRow'
+import { InfoBox } from '@/components/material/InfoBox'
 import { Section } from '@/components/material/Section'
 import { NameWithCode } from '@/shared/types'
 import { CollapsedStackedBar } from './CollapsedStackedBar'
@@ -115,7 +117,8 @@ export const InteractiveDataTable = ({
           <TableHead>
             <TableRow>
               {titles.map((title, index) => (
-                <TableCell align="right" key={title}>
+                <TableCell align={index === 0 ? 'left' : 'right'} key={title}>
+                  {index === 0 && <InfoBox content={facultyToolTips.interactiveDataTable} mini />}
                   <TableSortLabel
                     active={sorter === sorterNames[index]}
                     direction={sortDirection}