[Langcenterview] make great again

Big UI tweaks.

services/frontend/src/components/ColorizedCoursesTable/FacultiesTab/index.tsx

@@ -1,6 +1,6 @@
+import Stack from '@mui/material/Stack'
 import { getFilteredRowModel } from '@tanstack/react-table'
 import { useMemo } from 'react'
-
 import {
   calculateTotals,
   emptyFields,
@@ -17,12 +17,13 @@ import {
 import { useLanguage } from '@/components/LanguagePicker/useLanguage'
 import { OodiTable } from '@/components/OodiTable'
 import { OodiTableExcelExport } from '@/components/OodiTable/excelExport'
+import { Section } from '@/components/Section'
 import { useDebouncedState } from '@/hooks/debouncedState'
 import { useGetFacultiesQuery } from '@/redux/facultyStats'
+import { TotalRow } from '../SemestersTab'
 
 export const FacultiesTab = () => {
-  const { numberMode, colorMode, semesterFilter, setSemesterFilter, selectedSemesters, data } =
-    useColorizedCoursesTableContext()
+  const { numberMode, colorMode, selectedSemesters, data } = useColorizedCoursesTableContext()
 
   const { getTextIn } = useLanguage()
   const facultyQuery = useGetFacultiesQuery()
@@ -38,10 +39,10 @@ export const FacultiesTab = () => {
     [facultyQuery?.data]
   )
 
-  const totalRow = useMemo(() => {
-    if (!data) return {}
+  const totalRow = useMemo<TotalRow>(() => {
+    if (!data) return {} as TotalRow
     return calculateTotals(data.tableData, selectedSemesters, data.faculties)
-  }, [data, facultyMap])
+  }, [data, selectedSemesters])
 
   const [tableData, excelData] = useMemo(() => {
     if (!data) return []
@@ -79,7 +80,7 @@ export const FacultiesTab = () => {
     }))
 
     return [tableData, excelData]
-  }, [selectedSemesters, data])
+  }, [selectedSemesters, data, numberMode])
 
   const cols = useColumns(
     getTextIn,
@@ -96,17 +97,21 @@ export const FacultiesTab = () => {
       useZebrastripes: colorMode === 'none',
       columnFilters: [{ id: 'Course', value: courseFilter }],
     },
-    onColumnFiltersChange: setCourseFilter,
     getFilteredRowModel: getFilteredRowModel(),
   }
 
   return (
-    <div>
-      <div className="options-container">
-        <SemesterRangeSelector semesterFilter={semesterFilter} setSemesterFilter={setSemesterFilter} />
+    <Section wrapperSx={{ width: '100%', my: '1em' }}>
+      <Stack
+        direction={{ xs: 'column', sm: 'row' }}
+        justifyContent={{ xs: 'center', sm: 'space-evenly' }}
+        spacing={5}
+        sx={{ my: '1em' }}
+      >
+        <SemesterRangeSelector />
         <NumberModeSelector />
         <ColorModeSelector />
-      </div>
+      </Stack>
       <OodiTable
         columns={cols}
         cy="ooditable-faculties"
@@ -119,6 +124,6 @@ export const FacultiesTab = () => {
           </>
         }
       />
-    </div>
+    </Section>
   )
 }

services/frontend/src/components/ColorizedCoursesTable/SemestersTab/index.tsx

@@ -21,7 +21,7 @@ import { OodiTableExcelExport } from '@/components/OodiTable/excelExport'
 import { Section } from '@/components/Section'
 import { useDebouncedState } from '@/hooks/debouncedState'
 
-type TotalRow = ReturnType<typeof calculateTotals>
+export type TotalRow = ReturnType<typeof calculateTotals>
 
 export const SemestersTab = ({ languagecenterview }: { languagecenterview: boolean }) => {
   const { getTextIn } = useLanguage()
@@ -47,7 +47,7 @@ export const SemestersTab = ({ languagecenterview }: { languagecenterview: boole
     }))
 
     return [tableData, excelData]
-  }, [data, selectedSemesters])
+  }, [semesters, data, selectedSemesters, getTextIn, numberMode])
 
   const cols = useColumns(
     getTextIn,
@@ -67,8 +67,16 @@ export const SemestersTab = ({ languagecenterview }: { languagecenterview: boole
   }
 
   return (
-    <Section title={languagecenterview ? undefined : 'Programme courses by semester'} wrapperSx={{ width: '100%' }}>
-      <Stack direction={{ xs: 'column', sm: 'row' }} justifyContent={{ xs: 'center', sm: 'space-evenly' }} spacing={5}>
+    <Section
+      title={languagecenterview ? undefined : 'Programme courses by semester'}
+      wrapperSx={{ width: '100%', mt: '1em' }}
+    >
+      <Stack
+        direction={{ xs: 'column', sm: 'row' }}
+        justifyContent={{ xs: 'center', sm: 'space-evenly' }}
+        spacing={5}
+        sx={{ my: '1em' }}
+      >
         <SemesterRangeSelector />
         <NumberModeSelector />
         <ColorModeSelector />

services/frontend/src/components/ColorizedCoursesTable/index.tsx

@@ -1,14 +1,15 @@
 import Stack from '@mui/material/Stack'
 import Tab from '@mui/material/Tab'
 import Tabs from '@mui/material/Tabs'
+import Typography from '@mui/material/Typography'
 import { useEffect, useMemo, useState } from 'react'
-
 import { ColorizedCoursesTableContext } from '@/components/ColorizedCoursesTable/common'
 import { FacultiesTab } from '@/components/ColorizedCoursesTable/FacultiesTab'
 import { SemestersTab } from '@/components/ColorizedCoursesTable/SemestersTab'
 import { LoadingSection } from '@/components/Loading'
 import { useSemesters } from '@/hooks/useSemesters'
 import '@/components/ColorizedCoursesTable/index.css'
+import { CalendarMonthIcon, SchoolIcon } from '@/theme'
 
 export const ColorizedCoursesTable = ({ fetchDataHook, fetchDataHookParams, panes, mode }) => {
   const { semesters: allSemesters, currentSemester } = useSemesters()
@@ -47,25 +48,31 @@ export const ColorizedCoursesTable = ({ fetchDataHook, fetchDataHookParams, pane
         end: semesters[semesters.length - 1].semestercode,
       })
     }
-  }, [semesters])
+  }, [semesters, semesterFilter])
 
   const possiblePanes = [
     {
       name: 'Faculties',
       label: 'By faculties',
+      icon: <SchoolIcon />,
       render: () => <FacultiesTab />,
     },
     {
       name: 'Semesters',
       label: 'By semesters',
+      icon: <CalendarMonthIcon />,
       render: () => <SemestersTab languagecenterview={mode === 'languagecenterview'} />,
     },
   ]
 
-  const displayedPanes = panes.map(tab => possiblePanes.find(pane => pane.name === tab))
+  const displayedPanes = possiblePanes.filter(pane => panes.includes(pane.name))
 
   if (isError) {
-    return <h3>Something went wrong, please try refreshing the page.</h3>
+    return (
+      <Typography alignSelf="center" component="h6" variant="h5">
+        Something went wrong, please try refreshing the page.
+      </Typography>
+    )
   }
 
   if (!data || isFetching || isLoading || !semesterFilter || !semesters?.length) {
@@ -90,8 +97,8 @@ export const ColorizedCoursesTable = ({ fetchDataHook, fetchDataHookParams, pane
     <Stack alignItems="center">
       {displayedPanes.length > 1 && (
         <Tabs onChange={(_, newTab) => setTab(newTab)} value={tab}>
-          {displayedPanes.map(({ label }) => (
-            <Tab key={label} label={label} />
+          {displayedPanes.map(pane => (
+            <Tab icon={pane.icon} iconPosition="start" key={pane.label} label={pane.label} />
           ))}
         </Tabs>
       )}

services/frontend/src/components/LanguageCenterView/index.tsx

@@ -1,26 +1,21 @@
-import Divider from '@mui/material/Divider'
-import Typography from '@mui/material/Typography'
-
 import { ColorizedCoursesTable } from '@/components/ColorizedCoursesTable'
 import { useTitle } from '@/hooks/title'
 import { useGetLanguageCenterDataQuery } from '@/redux/languageCenterView'
+import { PageLayout } from '../common/PageLayout'
+import { PageTitle } from '../common/PageTitle'
 
 export const LanguageCenterView = () => {
   useTitle('Language center view')
 
   return (
-    <>
-      <Divider sx={{ width: '100%', mt: 3, mb: 1 }}>
-        <Typography fontSize="1.3rem" variant="overline">
-          Language center statistics
-        </Typography>
-      </Divider>
+    <PageLayout maxWidth="lg">
+      <PageTitle title="Language center statistics" />
       <ColorizedCoursesTable
         fetchDataHook={useGetLanguageCenterDataQuery}
         fetchDataHookParams={undefined}
         mode="languagecenterview"
         panes={['Faculties', 'Semesters']}
       />
-    </>
+    </PageLayout>
   )
 }