Open-FinLLM-Leaderboard

Running

App Files Files Community

tfrere HF Staff commited on Dec 11, 2024

Commit

9cd0edd

1 Parent(s): b2dcbca

update mobile view; fix iphone scroll bug

Browse files

Files changed (7) hide show

frontend/public/index.html +23 -1
frontend/src/App.js +42 -32
frontend/src/components/shared/PageHeader.js +4 -3
frontend/src/config/theme.js +9 -0
frontend/src/pages/LeaderboardPage/components/Leaderboard/components/Filters/QuickFilters.js +26 -23
frontend/src/pages/LeaderboardPage/components/Leaderboard/components/Filters/SearchBar.js +12 -6
frontend/src/pages/LeaderboardPage/components/Leaderboard/components/Table/Table.js +2 -1

frontend/public/index.html CHANGED Viewed

@@ -3,7 +3,10 @@
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/logo32.png" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta
       name="description"
       content="Interactive leaderboard tracking and comparing open-source Large Language Models across multiple benchmarks: IFEval, BBH, MATH, GPQA, MUSR, and MMLU-PRO."
@@ -56,6 +59,25 @@
       href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap"
       rel="stylesheet"
     />
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/logo32.png" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"
+    />
     <meta
       name="description"
       content="Interactive leaderboard tracking and comparing open-source Large Language Models across multiple benchmarks: IFEval, BBH, MATH, GPQA, MUSR, and MMLU-PRO."
       href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap"
       rel="stylesheet"
     />
+    <style>
+      html,
+      body {
+        position: fixed;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        -webkit-overflow-scrolling: touch;
+      }
+      #root {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        overflow-y: auto;
+        -webkit-overflow-scrolling: touch;
+      }
+    </style>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

frontend/src/App.js CHANGED Viewed

@@ -70,45 +70,55 @@ function App() {
   const theme = getTheme(mode);
   return (
-    <QueryClientProvider client={queryClient}>
-      <ThemeProvider theme={theme}>
-        <CssBaseline />
-        <Router>
-          <LeaderboardProvider>
-            <UrlHandler />
-            <Box
-              sx={{
-                minHeight: "100vh",
-                display: "flex",
-                flexDirection: "column",
-                bgcolor: "background.default",
-                color: "text.primary",
-              }}
-            >
-              <Navigation onToggleTheme={toggleTheme} mode={mode} />
               <Box
                 sx={{
-                  flex: 1,
                   display: "flex",
                   flexDirection: "column",
-                  width: "100%",
-                  px: 4,
-                  pb: 4,
                 }}
               >
-                <Routes>
-                  <Route path="/" element={<LeaderboardPage />} />
-                  <Route path="/add" element={<AddModelPage />} />
-                  <Route path="/quote" element={<QuotePage />} />
-                  <Route path="/vote" element={<VoteModelPage />} />
-                </Routes>
               </Box>
-              <Footer />
-            </Box>
-          </LeaderboardProvider>
-        </Router>
-      </ThemeProvider>
-    </QueryClientProvider>
   );
 }

   const theme = getTheme(mode);
   return (
+    <div
+      className="App"
+      style={{
+        height: "100%",
+        width: "100%",
+        WebkitOverflowScrolling: "touch",
+        overflow: "auto",
+      }}
+    >
+      <QueryClientProvider client={queryClient}>
+        <ThemeProvider theme={theme}>
+          <CssBaseline />
+          <Router>
+            <LeaderboardProvider>
+              <UrlHandler />
               <Box
                 sx={{
+                  minHeight: "100vh",
                   display: "flex",
                   flexDirection: "column",
+                  bgcolor: "background.default",
+                  color: "text.primary",
                 }}
               >
+                <Navigation onToggleTheme={toggleTheme} mode={mode} />
+                <Box
+                  sx={{
+                    flex: 1,
+                    display: "flex",
+                    flexDirection: "column",
+                    width: "100%",
+                    px: 4,
+                    pb: 4,
+                  }}
+                >
+                  <Routes>
+                    <Route path="/" element={<LeaderboardPage />} />
+                    <Route path="/add" element={<AddModelPage />} />
+                    <Route path="/quote" element={<QuotePage />} />
+                    <Route path="/vote" element={<VoteModelPage />} />
+                  </Routes>
+                </Box>
+                <Footer />
               </Box>
+            </LeaderboardProvider>
+          </Router>
+        </ThemeProvider>
+      </QueryClientProvider>
+    </div>
   );
 }

frontend/src/components/shared/PageHeader.js CHANGED Viewed

@@ -1,5 +1,5 @@
-import React from 'react';
-import { Box, Typography } from '@mui/material';
 const PageHeader = ({ title, subtitle }) => {
   return (
@@ -8,6 +8,7 @@ const PageHeader = ({ title, subtitle }) => {
         display: "flex",
         flexDirection: "column",
         alignItems: "center",
         mb: 6,
         mt: 6,
         gap: 2,
@@ -25,4 +26,4 @@ const PageHeader = ({ title, subtitle }) => {
   );
 };
-export default PageHeader;

+import React from "react";
+import { Box, Typography } from "@mui/material";
 const PageHeader = ({ title, subtitle }) => {
   return (
         display: "flex",
         flexDirection: "column",
         alignItems: "center",
+        textAlign: "center",
         mb: 6,
         mt: 6,
         gap: 2,
   );
 };
+export default PageHeader;

frontend/src/config/theme.js CHANGED Viewed

@@ -371,6 +371,15 @@ const getDesignTokens = (mode) => ({
       },
     },
   },
 });
 const getTheme = (mode) => {

       },
     },
   },
+  breakpoints: {
+    values: {
+      xs: 0,
+      sm: 600,
+      md: 900,
+      lg: 1240,
+      xl: 1536,
+    },
+  },
 });
 const getTheme = (mode) => {

frontend/src/pages/LeaderboardPage/components/Leaderboard/components/Filters/QuickFilters.js CHANGED Viewed

@@ -151,34 +151,37 @@ const QuickFilters = ({ totalCount = 0, loading = false }) => {
     <Box sx={{ width: "100%" }}>
       <Box
         sx={{
-          display: "flex",
-          flexDirection: { xs: "column", md: "row" },
-          alignItems: { xs: "flex-start", md: "center" },
-          gap: 2,
           width: "100%",
-          minHeight: { xs: "auto", md: "48px" },
-          py: 1,
-          px: 2,
         }}
       >
         <Box
           sx={{
             display: "flex",
             alignItems: "center",
-            gap: 1,
-            width: { xs: "100%", md: "auto" },
-            mb: { xs: 1, md: 0 },
           }}
         >
-          <Typography
-            variant="subtitle2"
-            sx={{
-              fontSize: "0.8rem",
-              fontWeight: 700,
-              color: "text.secondary",
-              whiteSpace: "nowrap",
-            }}
-          >
             Quick Filters
           </Typography>
           <InfoIconWithTooltip
@@ -190,8 +193,8 @@ const QuickFilters = ({ totalCount = 0, loading = false }) => {
         <Box
           sx={{
             display: "flex",
-            flexDirection: { xs: "column", md: "row" },
-            alignItems: { xs: "stretch", md: "center" },
             gap: 2,
             flex: 1,
             width: { xs: "100%", md: "auto" },
@@ -200,9 +203,9 @@ const QuickFilters = ({ totalCount = 0, loading = false }) => {
           <Box
             sx={{
               display: "flex",
-              flexDirection: { xs: "column", md: "row" },
               gap: 0.5,
-              flexWrap: { xs: "nowrap", md: "nowrap" },
               borderRight: {
                 xs: "none",
                 md: (theme) => `1px solid ${alpha(theme.palette.divider, 0.2)}`,

     <Box sx={{ width: "100%" }}>
       <Box
         sx={{
+          backgroundColor: (theme) => ({
+            xs: alpha(theme.palette.primary.main, 0.02),
+            lg: "transparent",
+          }),
+          borderColor: (theme) => ({
+            xs: alpha(theme.palette.primary.main, 0.2),
+            lg: "transparent",
+          }),
+          border: "1px solid",
+          borderRadius: 1,
+          p: 3,
+          position: "relative",
           width: "100%",
+          display: "flex",
+          flexDirection: { xs: "column", lg: "row" },
+          transition: (theme) =>
+            theme.transitions.create(["border-color", "background-color"], {
+              duration: theme.transitions.duration.short,
+            }),
         }}
       >
         <Box
           sx={{
             display: "flex",
             alignItems: "center",
+            gap: 0.5,
+            mb: 1.5,
+            mr: 2,
           }}
         >
+          <Typography variant="body2" sx={{ fontWeight: 600 }}>
             Quick Filters
           </Typography>
           <InfoIconWithTooltip
         <Box
           sx={{
             display: "flex",
+            flexDirection: { xs: "column", lg: "row" },
+            alignItems: { xs: "stretch", lg: "center" },
             gap: 2,
             flex: 1,
             width: { xs: "100%", md: "auto" },
           <Box
             sx={{
               display: "flex",
+              flexDirection: { xs: "column", lg: "row" },
               gap: 0.5,
+              flexWrap: { xs: "nowrap", lg: "nowrap" },
               borderRight: {
                 xs: "none",
                 md: (theme) => `1px solid ${alpha(theme.palette.divider, 0.2)}`,

frontend/src/pages/LeaderboardPage/components/Leaderboard/components/Filters/SearchBar.js CHANGED Viewed

@@ -190,6 +190,7 @@ const SearchBar = ({
             flex: 1,
             fontSize: "1rem",
             color: "text.primary",
             "& .MuiInputBase-input": {
               padding: "2px 0",
               fontWeight: 600,
@@ -244,7 +245,7 @@ const SearchBar = ({
                 variant="body2"
                 sx={{
                   fontWeight: 600,
-                  display: { xs: "none", sm: "block" },
                 }}
               >
                 Reset
@@ -282,7 +283,7 @@ const SearchBar = ({
               variant="body2"
               sx={{
                 fontWeight: 600,
-                display: { xs: "none", sm: "block" },
               }}
             >
               Advanced Filters
@@ -290,11 +291,13 @@ const SearchBar = ({
           </Box>
           <InfoIconWithTooltip
             tooltip={UI_TOOLTIPS.SEARCH_BAR}
-            iconProps={{ sx: { fontSize: "1.2rem" } }}
           />
         </Box>
       </Paper>
-      <Box sx={{ ml: 3.5 }}>
         {localValue ? (
           <SearchDescription searchValue={localValue} />
         ) : (
@@ -304,10 +307,13 @@ const SearchBar = ({
               sx={{
                 color: "text.secondary",
                 fontSize: "0.75rem",
-                textAlign: "left",
                 opacity: 1,
                 transition: "opacity 0.2s ease",
-                height: "18px",
               }}
             >
               Supports strict search and regex • Use semicolons for multiple

             flex: 1,
             fontSize: "1rem",
             color: "text.primary",
+            mr: 4,
             "& .MuiInputBase-input": {
               padding: "2px 0",
               fontWeight: 600,
                 variant="body2"
                 sx={{
                   fontWeight: 600,
+                  display: { xs: "none", md: "block" },
                 }}
               >
                 Reset
               variant="body2"
               sx={{
                 fontWeight: 600,
+                display: { xs: "none", md: "block" },
               }}
             >
               Advanced Filters
           </Box>
           <InfoIconWithTooltip
             tooltip={UI_TOOLTIPS.SEARCH_BAR}
+            iconProps={{
+              sx: { fontSize: "1.2rem", display: { xs: "none", md: "block" } },
+            }}
           />
         </Box>
       </Paper>
+      <Box sx={{ ml: 3.5, mr: 3.5 }}>
         {localValue ? (
           <SearchDescription searchValue={localValue} />
         ) : (
               sx={{
                 color: "text.secondary",
                 fontSize: "0.75rem",
+                textAlign: { xs: "center", sm: "left" },
                 opacity: 1,
                 transition: "opacity 0.2s ease",
+                minHeight: "18px",
+                width: "100%",
+                whiteSpace: "normal",
+                lineHeight: 1.5,
               }}
             >
               Supports strict search and regex • Use semicolons for multiple

frontend/src/pages/LeaderboardPage/components/Leaderboard/components/Table/Table.js CHANGED Viewed

@@ -194,9 +194,10 @@ const TableControls = React.memo(
     <Box
       sx={{
         display: "flex",
-        justifyContent: "flex-end",
         gap: 1,
         mb: 2,
       }}
     >
       <TableOptions

     <Box
       sx={{
         display: "flex",
+        justifyContent: { xs: "center", md: "flex-end" },
         gap: 1,
         mb: 2,
+        pt: { xs: 2, md: 0 },
       }}
     >
       <TableOptions