JTE/PKFE-42

app/front-end/src/app/provider.tsx

@@ -1,4 +1,3 @@
-import { BaseLayout } from '@/components/layouts/baseLayout';
 import { SessionContextProvider, ThemeContextProvider } from '@/stores';
 import { CircularProgress } from '@mui/material';
 import React from 'react';
@@ -41,9 +40,7 @@ export const AppProvider = ({ children }: AppProviderProps) => {
       fallback={<CircularProgress sx={{ display: 'flex', justifyItems: 'center', alignContent: 'center' }} />}
     >
       <SessionContextProvider>
-        <ThemeContextProvider>
-          <BaseLayout>{children}</BaseLayout>
-        </ThemeContextProvider>
+        <ThemeContextProvider>{children}</ThemeContextProvider>
       </SessionContextProvider>
     </React.Suspense>
   );

app/front-end/src/app/router.tsx

@@ -1,3 +1,4 @@
+import { BaseLayout } from '@/components/layouts/baseLayout';
 import { Paths } from '@/types';
 import { useMemo } from 'react';
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
@@ -32,14 +33,26 @@ export const AppRouter = () => {
           path: Paths.HOME,
           lazy: async () => {
             const { Home } = await import('./routes/home');
-            return { Component: Home };
+            return {
+              Component: (props) => (
+                <BaseLayout>
+                  <Home {...props} />
+                </BaseLayout>
+              ),
+            };
           },
         },
         {
           path: Paths.NOTFOUND,
           lazy: async () => {
             const { NotFound } = await import('./routes/notFound');
-            return { Component: NotFound };
+            return {
+              Component: (props) => (
+                <BaseLayout>
+                  <NotFound {...props} />
+                </BaseLayout>
+              ),
+            };
           },
         },
       ]),

app/front-end/src/components/buttons/IconTitleButton.tsx

@@ -1,4 +1,3 @@
-import { Colors } from '@/types';
 import { alpha, Box, IconButton, Typography, useTheme } from '@mui/material';
 
 interface Props {
@@ -8,6 +7,8 @@ interface Props {
   height?: string;
   borderRadius?: string;
   onClick?: () => void;
+  isActive?: boolean;
+  disabled?: boolean;
 }
 
 /**
@@ -29,8 +30,18 @@ interface Props {
  *
  * @returns {JSX.Element} The `IconTitleButton` component rendering an icon button and an optional title.
  */
-export const IconTitleButton: React.FC<Props> = ({ icon, title, width, height, borderRadius, onClick }) => {
+export const IconTitleButton: React.FC<Props> = ({
+  icon,
+  title,
+  width,
+  height,
+  borderRadius,
+  onClick,
+  isActive = false,
+  disabled = false,
+}) => {
   const Theme = useTheme();
+
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
       <IconButton
@@ -40,16 +51,34 @@ export const IconTitleButton: React.FC<Props> = ({ icon, title, width, height, b
           height: height || '3rem',
           borderRadius: borderRadius || '1rem',
           transition: 'background-color 0.5s ease',
+          color: disabled ? alpha(Theme.palette.primary.contrastText, 0.4) : Theme.palette.primary.contrastText,
           ':hover': {
-            backgroundColor: alpha(Theme.palette.primary.contrastText, 0.2),
+            backgroundColor: disabled
+              ? 'transparent'
+              : isActive
+                ? alpha(Theme.palette.primary.contrastText, 0.3)
+                : alpha(Theme.palette.primary.contrastText, 0.2),
           },
+          backgroundColor: disabled
+            ? 'transparent'
+            : isActive
+              ? alpha(Theme.palette.primary.contrastText, 0.3)
+              : 'transparent',
         }}
-        onClick={onClick}
+        onClick={disabled ? () => {} : onClick}
       >
         {icon}
       </IconButton>
       {title && (
-        <Typography sx={{ color: Colors.backgroundPrimaryLight, fontSize: '0.875rem', fontWeight: 'bold' }}>
+        <Typography
+          sx={{
+            color: disabled ? alpha(Theme.palette.primary.contrastText, 0.4) : Theme.palette.primary.contrastText,
+            fontSize: '0.875rem',
+            fontWeight: 'bold',
+            cursor: 'pointer',
+          }}
+          onClick={disabled ? () => {} : onClick}
+        >
           {title}
         </Typography>
       )}

app/front-end/src/components/layouts/baseLayout.tsx

@@ -1,12 +1,6 @@
-import { IconTitleButton } from '@/components/buttons/IconTitleButton';
 import { SettingsDialog, ShortcutsDialog } from '@/components/dialogs';
+import { Sidebar } from '@/components/sidebar';
 import { Colors } from '@/types';
-import {
-  AutoMode as AutoModeIcon,
-  Home as HomeIcon,
-  SettingsOutlined as SettingsOutlinedIcon,
-  SwitchAccessShortcut as SwitchAccessShortcutIcon,
-} from '@mui/icons-material';
 import { Box, Typography, useTheme } from '@mui/material';
 import { useState } from 'react';
 
@@ -33,12 +27,12 @@ interface Props {
 export const BaseLayout: React.FC<Props> = ({ children }) => {
   const Theme = useTheme();
 
-  const [isShortcutsMenuOpen, setIsShortcutsMenuOpen] = useState(false);
-  const handleShortcutsMenuOpen = () => {
-    setIsShortcutsMenuOpen(true);
+  const [isShortcutsDialogOpen, setIsShortcutsDialogOpen] = useState(false);
+  const handleShortcutsDialogOpen = () => {
+    setIsShortcutsDialogOpen(true);
   };
-  const handleShortcutsMenuClose = () => {
-    setIsShortcutsMenuOpen(false);
+  const handleShortcutsDialogClose = () => {
+    setIsShortcutsDialogOpen(false);
   };
 
   const [isSettingsDialogOpen, setIsSettingsDialogOpen] = useState(false);
@@ -115,56 +109,8 @@ export const BaseLayout: React.FC<Props> = ({ children }) => {
           flexDirection: 'row',
         }}
       >
-        <Box sx={{ width: '5vw', height: '100%', display: 'flex', flexDirection: 'column' }}>
-          <Box
-            sx={{
-              width: '100%',
-              height: '50%',
-              paddingTop: '0.625rem',
-              display: 'flex',
-              flexDirection: 'column',
-              gap: '0.625rem',
-              alignItems: 'center',
-            }}
-          >
-            <IconTitleButton
-              icon={<HomeIcon sx={{ width: '1.5rem', height: '1.5rem', color: Colors.backgroundPrimaryLight }} />}
-              title={'Home'}
-            />
-            <IconTitleButton
-              icon={<AutoModeIcon sx={{ width: '1.5rem', height: '1.5rem', color: Colors.backgroundPrimaryLight }} />}
-              title={'Macros'}
-            />
-          </Box>
-          <Box
-            sx={{
-              width: '100%',
-              height: '50%',
-              paddingBottom: '0.625rem',
-              display: 'flex',
-              flexDirection: 'column-reverse',
-              gap: '0.625rem',
-              alignItems: 'center',
-            }}
-          >
-            <IconTitleButton
-              icon={
-                <SettingsOutlinedIcon
-                  sx={{ width: '1.5rem', height: '1.5rem', color: Colors.backgroundPrimaryLight }}
-                />
-              }
-              onClick={handleSettingsDialogOpen}
-            />
-            <IconTitleButton
-              icon={
-                <SwitchAccessShortcutIcon
-                  sx={{ width: '1.5rem', height: '1.5rem', color: Colors.backgroundPrimaryLight }}
-                />
-              }
-              onClick={handleShortcutsMenuOpen}
-            />
-          </Box>
-        </Box>
+        <Sidebar settingsDialogOpen={handleSettingsDialogOpen} shortcutsDialogOpen={handleShortcutsDialogOpen} />
+
         <Box
           sx={{
             width: '95.75%',
@@ -176,7 +122,7 @@ export const BaseLayout: React.FC<Props> = ({ children }) => {
           {children}
         </Box>
         <SettingsDialog open={isSettingsDialogOpen} onClose={handleSettingsDialogClose} />
-        <ShortcutsDialog open={isShortcutsMenuOpen} onClose={handleShortcutsMenuClose} />
+        <ShortcutsDialog open={isShortcutsDialogOpen} onClose={handleShortcutsDialogClose} />
       </Box>
     </Box>
   );

app/front-end/src/components/sidebar/index.ts

@@ -0,0 +1 @@
+export { Sidebar } from './sidebar';

app/front-end/src/components/sidebar/sidebar.tsx

@@ -0,0 +1,84 @@
+import { IconTitleButton } from '@/components/buttons/IconTitleButton';
+import { Paths } from '@/types';
+import {
+  AutoMode as AutoModeIcon,
+  Home as HomeIcon,
+  SettingsOutlined as SettingsOutlinedIcon,
+  SwitchAccessShortcut as SwitchAccessShortcutIcon,
+} from '@mui/icons-material';
+import { Box } from '@mui/material';
+import { useLocation, useNavigate } from 'react-router-dom';
+
+interface SidebarProps {
+  settingsDialogOpen: () => void;
+  shortcutsDialogOpen: () => void;
+}
+
+export const Sidebar: React.FC<SidebarProps> = ({ settingsDialogOpen, shortcutsDialogOpen }) => {
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  return (
+    <Box sx={{ width: '4.2vw', height: '100%', display: 'flex', flexDirection: 'column' }}>
+      <Box
+        sx={{
+          width: '100%',
+          height: '50%',
+          paddingTop: '0.625rem',
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '0.625rem',
+          alignItems: 'center',
+        }}
+      >
+        <IconTitleButton
+          icon={
+            <HomeIcon
+              sx={{
+                width: '1.5rem',
+                height: '1.5rem',
+              }}
+            />
+          }
+          title={'Home'}
+          isActive={location.pathname === Paths.HOME}
+          onClick={() => navigate(Paths.HOME)}
+        />
+        <IconTitleButton
+          icon={
+            <AutoModeIcon
+              sx={{
+                width: '1.5rem',
+                height: '1.5rem',
+              }}
+            />
+          }
+          title={'Macros'}
+          isActive={location.pathname === Paths.MACROS}
+          onClick={() => navigate(Paths.MACROS)}
+          disabled
+        />
+      </Box>
+      <Box
+        sx={{
+          width: '100%',
+          height: '50%',
+          paddingBottom: '0.625rem',
+          display: 'flex',
+          flexDirection: 'column-reverse',
+          gap: '0.625rem',
+          alignItems: 'center',
+        }}
+      >
+        <IconTitleButton
+          icon={<SettingsOutlinedIcon sx={{ width: '1.5rem', height: '1.5rem' }} />}
+          onClick={settingsDialogOpen}
+        />
+        <IconTitleButton
+          icon={<SwitchAccessShortcutIcon sx={{ width: '1.5rem', height: '1.5rem' }} />}
+          onClick={shortcutsDialogOpen}
+        />
+      </Box>
+    </Box>
+  );
+};

app/front-end/src/features/editor/components/toolbarView/toolbarGroupButtons/applyGroupButtons.tsx

@@ -0,0 +1,26 @@
+import { Deblur as DeblurIcon } from '@mui/icons-material';
+
+import { ToolbarGroupItemProps } from '@/features/editor/components/toolbarView';
+
+const applySpliceAiClick = () => {
+  console.log('Clicked Apply SpliceAI Button!');
+};
+
+const applyCaddClick = () => {
+  console.log('Clicked Apply CADD Button!');
+};
+
+export const ApplyGroupButtons: ToolbarGroupItemProps[] = [
+  {
+    group: 'apply',
+    icon: DeblurIcon,
+    label: 'Apply SpliceAI',
+    onClick: applySpliceAiClick,
+  },
+  {
+    group: 'apply',
+    icon: DeblurIcon,
+    label: 'Apply CADD',
+    onClick: applyCaddClick,
+  },
+];

app/front-end/src/features/editor/components/toolbarView/toolbarGroupButtons/downloadGroupButtons.tsx

@@ -0,0 +1,36 @@
+import { ToolbarGroupItemProps } from '@/features/editor/components/toolbarView';
+
+import { Download as DownloadIcon } from '@mui/icons-material';
+
+const handleDownloadLovdClick = () => {
+  console.log('Clicked Download Lovd Button!');
+};
+
+const handleDownloadClinvarClick = () => {
+  console.log('Clicked Download Clinvar Button!');
+};
+
+const handleDownloadGnomadClick = () => {
+  console.log('Clicked Download Gnomad Button!');
+};
+
+export const DownloadGroupButtons: ToolbarGroupItemProps[] = [
+  {
+    group: 'download',
+    icon: DownloadIcon,
+    label: 'LOVD',
+    onClick: handleDownloadLovdClick,
+  },
+  {
+    group: 'download',
+    icon: DownloadIcon,
+    label: 'ClinVar',
+    onClick: handleDownloadClinvarClick,
+  },
+  {
+    group: 'download',
+    icon: DownloadIcon,
+    label: 'gnomAD',
+    onClick: handleDownloadGnomadClick,
+  },
+];

app/front-end/src/features/editor/components/toolbarView/toolbarGroupButtons/index.ts

@@ -0,0 +1,3 @@
+export { ApplyGroupButtons } from './applyGroupButtons';
+export { DownloadGroupButtons } from './downloadGroupButtons';
+export { MergeGroupButtons } from './mergeGroupButtons';