From a917c2f0be6a9045dcc56baa9f9ddb197f6d9c46 Mon Sep 17 00:00:00 2001 From: Justinas <156369263+justinnas@users.noreply.github.com> Date: Sun, 1 Sep 2024 21:01:49 +0300 Subject: [PATCH 1/5] Split the toolbar into different files based on groups --- .../toolbarGroupButtons/applyGroupButtons.tsx | 18 ++ .../downloadGroupButtons.tsx | 37 +++ .../toolbarView/toolbarGroupButtons/index.ts | 3 + .../toolbarGroupButtons/mergeGroupButtons.tsx | 18 ++ .../toolbarView/toolbarGroupItem.tsx | 1 + .../components/toolbarView/toolbarView.tsx | 258 ++---------------- 6 files changed, 100 insertions(+), 235 deletions(-) create mode 100644 app/front-end/src/features/editor/components/toolbarView/toolbarGroupButtons/applyGroupButtons.tsx create mode 100644 app/front-end/src/features/editor/components/toolbarView/toolbarGroupButtons/downloadGroupButtons.tsx create mode 100644 app/front-end/src/features/editor/components/toolbarView/toolbarGroupButtons/index.ts create mode 100644 app/front-end/src/features/editor/components/toolbarView/toolbarGroupButtons/mergeGroupButtons.tsx diff --git a/app/front-end/src/features/editor/components/toolbarView/toolbarGroupButtons/applyGroupButtons.tsx b/app/front-end/src/features/editor/components/toolbarView/toolbarGroupButtons/applyGroupButtons.tsx new file mode 100644 index 0000000..23ee596 --- /dev/null +++ b/app/front-end/src/features/editor/components/toolbarView/toolbarGroupButtons/applyGroupButtons.tsx @@ -0,0 +1,18 @@ +import { AccessAlarms as AccessAlarmsIcon } from '@mui/icons-material'; + +import { ToolbarGroupItemProps } from '@/features/editor/components/toolbarView'; + +// Define the onClick functions for group 3 +const handleAlarm3Click = () => { + console.log('Clicked Alarm3 Button!'); +}; + +// Define the buttons for group 3 +export const ApplyGroupButtons: ToolbarGroupItemProps[] = [ + { + group: 'apply', + icon: AccessAlarmsIcon, + label: 'Alarm3', + onClick: handleAlarm3Click, + }, +]; diff --git a/app/front-end/src/features/editor/components/toolbarView/toolbarGroupButtons/downloadGroupButtons.tsx b/app/front-end/src/features/editor/components/toolbarView/toolbarGroupButtons/downloadGroupButtons.tsx new file mode 100644 index 0000000..fb9912c --- /dev/null +++ b/app/front-end/src/features/editor/components/toolbarView/toolbarGroupButtons/downloadGroupButtons.tsx @@ -0,0 +1,37 @@ +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!'); +}; + +// Define the buttons for group 1 +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, + }, +]; diff --git a/app/front-end/src/features/editor/components/toolbarView/toolbarGroupButtons/index.ts b/app/front-end/src/features/editor/components/toolbarView/toolbarGroupButtons/index.ts new file mode 100644 index 0000000..243e3af --- /dev/null +++ b/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'; diff --git a/app/front-end/src/features/editor/components/toolbarView/toolbarGroupButtons/mergeGroupButtons.tsx b/app/front-end/src/features/editor/components/toolbarView/toolbarGroupButtons/mergeGroupButtons.tsx new file mode 100644 index 0000000..7fa312a --- /dev/null +++ b/app/front-end/src/features/editor/components/toolbarView/toolbarGroupButtons/mergeGroupButtons.tsx @@ -0,0 +1,18 @@ +import { AccessAlarms as AccessAlarmsIcon } from '@mui/icons-material'; + +import { ToolbarGroupItemProps } from '@/features/editor/components/toolbarView'; + +// Define the onClick functions for group 2 +const handleAlarm2Click = () => { + console.log('Clicked Alarm2 Button!'); +}; + +// Define the buttons for group 2 +export const MergeGroupButtons: ToolbarGroupItemProps[] = [ + { + group: 'merge', + icon: AccessAlarmsIcon, + label: 'Merge LOVD & gnomAD', + onClick: handleAlarm2Click, + }, +]; diff --git a/app/front-end/src/features/editor/components/toolbarView/toolbarGroupItem.tsx b/app/front-end/src/features/editor/components/toolbarView/toolbarGroupItem.tsx index cdf4858..707773b 100644 --- a/app/front-end/src/features/editor/components/toolbarView/toolbarGroupItem.tsx +++ b/app/front-end/src/features/editor/components/toolbarView/toolbarGroupItem.tsx @@ -50,6 +50,7 @@ export const ToolbarGroupItem: React.FC = ({ icon: Icon, '&:hover': { backgroundColor: Theme.palette.action.selected, }, + textTransform: 'none', }} > {label} diff --git a/app/front-end/src/features/editor/components/toolbarView/toolbarView.tsx b/app/front-end/src/features/editor/components/toolbarView/toolbarView.tsx index 323fa93..58f4a2f 100644 --- a/app/front-end/src/features/editor/components/toolbarView/toolbarView.tsx +++ b/app/front-end/src/features/editor/components/toolbarView/toolbarView.tsx @@ -6,11 +6,13 @@ import { ToolbarGroupsSelectorItem, ToolbarGroupsSelectorItemProps, } from '@/features/editor/components/toolbarView'; + import { - AccessAlarms as AccessAlarmsIcon, - AccessibleForward as AccessibleForwardIcon, - Android as AndroidIcon, -} from '@mui/icons-material'; + ApplyGroupButtons, + DownloadGroupButtons, + MergeGroupButtons, +} from '@/features/editor/components/toolbarView/toolbarGroupButtons'; + import { useState } from 'react'; /** @@ -34,242 +36,30 @@ import { useState } from 'react'; * @returns {JSX.Element} The rendered ToolbarView component, which includes the toolbar group selector and the items of the selected group. */ export const ToolbarView: React.FC = () => { - const [selectedGroup, setSelectedGroup] = useState('group1'); + const [selectedGroup, setSelectedGroup] = useState('download'); - const ToolbarGroupsButtons: ToolbarGroupItemProps[] = [ - { - group: 'group1', - icon: AccessAlarmsIcon, - label: 'Alarm1', - onClick: () => { - console.log('Clicked Alarm1 Button!'); - }, - }, - { - group: 'group1', - icon: AccessibleForwardIcon, - label: 'Forward1', - onClick: () => { - console.log('Clicked Forward1 Button!'); - }, - }, - { - group: 'group1', - icon: AndroidIcon, - label: 'Android1', - onClick: () => { - console.log('Clicked Android1 Button!'); - }, - }, - { - group: 'group2', - icon: AccessAlarmsIcon, - label: 'Alarm2', - onClick: () => { - console.log('Clicked Alarm2 Button!'); - }, - }, - { - group: 'group2', - icon: AccessibleForwardIcon, - label: 'Forward2', - onClick: () => { - console.log('Clicked Forward2 Button!'); - }, - }, - { - group: 'group2', - icon: AndroidIcon, - label: 'Android2', - onClick: () => { - console.log('Clicked Android2 Button!'); - }, - }, - { - group: 'group2', - icon: AccessAlarmsIcon, - label: 'Alarm2', - onClick: () => { - console.log('Clicked Alarm2 Button!'); - }, - }, - { - group: 'group2', - icon: AccessibleForwardIcon, - label: 'Forward2', - onClick: () => { - console.log('Clicked Forward2 Button!'); - }, - }, - { - group: 'group2', - icon: AndroidIcon, - label: 'Android2', - onClick: () => { - console.log('Clicked Android2 Button!'); - }, - }, - { - group: 'group2', - icon: AccessAlarmsIcon, - label: 'Alarm2', - onClick: () => { - console.log('Clicked Alarm2 Button!'); - }, - }, - { - group: 'group2', - icon: AccessibleForwardIcon, - label: 'Forward2', - onClick: () => { - console.log('Clicked Forward2 Button!'); - }, - }, - { - group: 'group2', - icon: AndroidIcon, - label: 'Android2', - onClick: () => { - console.log('Clicked Android2 Button!'); - }, - }, - { - group: 'group3', - icon: AccessAlarmsIcon, - label: 'Alarm3', - onClick: () => { - console.log('Clicked Alarm3 Button!'); - }, - }, - { - group: 'group3', - icon: AccessibleForwardIcon, - label: 'Forward3', - onClick: () => { - console.log('Clicked Forward3 Button!'); - }, - }, - { - group: 'group3', - icon: AndroidIcon, - label: 'Android3', - onClick: () => { - console.log('Clicked Android3 Button!'); - }, - }, - { - group: 'group3', - icon: AccessAlarmsIcon, - label: 'Alarm3', - onClick: () => { - console.log('Clicked Alarm3 Button!'); - }, - }, - { - group: 'group3', - icon: AccessibleForwardIcon, - label: 'Forward3', - onClick: () => { - console.log('Clicked Forward3 Button!'); - }, - }, - { - group: 'group3', - icon: AndroidIcon, - label: 'Android3', - onClick: () => { - console.log('Clicked Android3 Button!'); - }, - }, - { - group: 'group3', - icon: AccessAlarmsIcon, - label: 'Alarm3', - onClick: () => { - console.log('Clicked Alarm3 Button!'); - }, - }, - { - group: 'group3', - icon: AccessibleForwardIcon, - label: 'Forward3', - onClick: () => { - console.log('Clicked Forward3 Button!'); - }, - }, - { - group: 'group3', - icon: AndroidIcon, - label: 'Android3', - onClick: () => { - console.log('Clicked Android3 Button!'); - }, - }, - { - group: 'group3', - icon: AccessAlarmsIcon, - label: 'Alarm3', - onClick: () => { - console.log('Clicked Alarm3 Button!'); - }, - }, - { - group: 'group3', - icon: AccessibleForwardIcon, - label: 'Forward3', - onClick: () => { - console.log('Clicked Forward3 Button!'); - }, - }, - { - group: 'group3', - icon: AndroidIcon, - label: 'Android3', - onClick: () => { - console.log('Clicked Android3 Button!'); - }, - }, - { - group: 'group3', - icon: AccessAlarmsIcon, - label: 'Alarm3', - onClick: () => { - console.log('Clicked Alarm3 Button!'); - }, - }, - { - group: 'group3', - icon: AccessibleForwardIcon, - label: 'Forward3', - onClick: () => { - console.log('Clicked Forward3 Button!'); - }, - }, - { - group: 'group3', - icon: AndroidIcon, - label: 'Android3', - onClick: () => { - console.log('Clicked Android3 Button!'); - }, - }, - ]; + // Combine the button groups into a dictionary for easy access + const ToolbarGroupsButtons: Record = { + download: DownloadGroupButtons, + merge: MergeGroupButtons, + apply: ApplyGroupButtons, + }; const ToolbarGroups: ToolbarGroupsSelectorItemProps[] = [ { - id: 'group1', - label: 'Group 1', - onClick: () => setSelectedGroup('group1'), + id: 'download', + label: 'Download', + onClick: () => setSelectedGroup('download'), }, { - id: 'group2', - label: 'Group 2', - onClick: () => setSelectedGroup('group2'), + id: 'merge', + label: 'Merge', + onClick: () => setSelectedGroup('merge'), }, { - id: 'group3', - label: 'Group 3', - onClick: () => setSelectedGroup('group3'), + id: 'apply', + label: 'Apply', + onClick: () => setSelectedGroup('apply'), }, ]; @@ -281,9 +71,7 @@ export const ToolbarView: React.FC = () => { ))} - {ToolbarGroupsButtons.map( - (button, index) => button.group === selectedGroup && - )} + {ToolbarGroupsButtons[selectedGroup]?.map((button, index) => )} ); From 98278446a54db87a1babb246ac26573dde0856a5 Mon Sep 17 00:00:00 2001 From: Justinas <156369263+justinnas@users.noreply.github.com> Date: Mon, 2 Sep 2024 01:10:14 +0300 Subject: [PATCH 2/5] Made sidebar as an individual component --- .../src/components/layouts/baseLayout.tsx | 75 +++-------------- .../src/components/sidebar/sidebar.tsx | 83 +++++++++++++++++++ .../toolbarGroupButtons/applyGroupButtons.tsx | 22 +++-- .../toolbarGroupButtons/mergeGroupButtons.tsx | 20 +++-- 4 files changed, 126 insertions(+), 74 deletions(-) create mode 100644 app/front-end/src/components/sidebar/sidebar.tsx diff --git a/app/front-end/src/components/layouts/baseLayout.tsx b/app/front-end/src/components/layouts/baseLayout.tsx index 465e62c..38dc358 100644 --- a/app/front-end/src/components/layouts/baseLayout.tsx +++ b/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/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 = ({ 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,11 @@ export const BaseLayout: React.FC = ({ children }) => { flexDirection: 'row', }} > - - - } - title={'Home'} - /> - } - title={'Macros'} - /> - - - - } - onClick={handleSettingsDialogOpen} - /> - - } - onClick={handleShortcutsMenuOpen} - /> - - + + = ({ children }) => { {children} - + ); diff --git a/app/front-end/src/components/sidebar/sidebar.tsx b/app/front-end/src/components/sidebar/sidebar.tsx new file mode 100644 index 0000000..2967a91 --- /dev/null +++ b/app/front-end/src/components/sidebar/sidebar.tsx @@ -0,0 +1,83 @@ +import { IconTitleButton } from '@/components/buttons/IconTitleButton'; +import { Colors } from '@/types'; +import { + AutoMode as AutoModeIcon, + Home as HomeIcon, + SettingsOutlined as SettingsOutlinedIcon, + SwitchAccessShortcut as SwitchAccessShortcutIcon, +} from '@mui/icons-material'; +import { Box } from '@mui/material'; + +interface SidebarProps { + handleSettingsDialogOpen: () => void; + handleShortcutsDialogOpen: () => void; +} + +export const Sidebar: React.FC = ({ handleSettingsDialogOpen, handleShortcutsDialogOpen }) => { + return ( + + + + } + title={'Home'} + /> + + } + title={'Macros'} + /> + + + + } + onClick={handleSettingsDialogOpen} + /> + + } + onClick={handleShortcutsDialogOpen} + /> + + + ); +}; diff --git a/app/front-end/src/features/editor/components/toolbarView/toolbarGroupButtons/applyGroupButtons.tsx b/app/front-end/src/features/editor/components/toolbarView/toolbarGroupButtons/applyGroupButtons.tsx index 23ee596..10daf16 100644 --- a/app/front-end/src/features/editor/components/toolbarView/toolbarGroupButtons/applyGroupButtons.tsx +++ b/app/front-end/src/features/editor/components/toolbarView/toolbarGroupButtons/applyGroupButtons.tsx @@ -1,18 +1,28 @@ -import { AccessAlarms as AccessAlarmsIcon } from '@mui/icons-material'; +import { Deblur as DeblurIcon } from '@mui/icons-material'; import { ToolbarGroupItemProps } from '@/features/editor/components/toolbarView'; // Define the onClick functions for group 3 -const handleAlarm3Click = () => { - console.log('Clicked Alarm3 Button!'); +const applySpliceAiClick = () => { + console.log('Clicked Apply SpliceAI Button!'); +}; + +const applyCaddClick = () => { + console.log('Clicked Apply CADD Button!'); }; // Define the buttons for group 3 export const ApplyGroupButtons: ToolbarGroupItemProps[] = [ { group: 'apply', - icon: AccessAlarmsIcon, - label: 'Alarm3', - onClick: handleAlarm3Click, + icon: DeblurIcon, + label: 'Apply SpliceAI', + onClick: applySpliceAiClick, + }, + { + group: 'apply', + icon: DeblurIcon, + label: 'Apply CADD', + onClick: applyCaddClick, }, ]; diff --git a/app/front-end/src/features/editor/components/toolbarView/toolbarGroupButtons/mergeGroupButtons.tsx b/app/front-end/src/features/editor/components/toolbarView/toolbarGroupButtons/mergeGroupButtons.tsx index 7fa312a..2c655c5 100644 --- a/app/front-end/src/features/editor/components/toolbarView/toolbarGroupButtons/mergeGroupButtons.tsx +++ b/app/front-end/src/features/editor/components/toolbarView/toolbarGroupButtons/mergeGroupButtons.tsx @@ -1,18 +1,28 @@ -import { AccessAlarms as AccessAlarmsIcon } from '@mui/icons-material'; +import { MergeType as MergeTypeIcon } from '@mui/icons-material'; import { ToolbarGroupItemProps } from '@/features/editor/components/toolbarView'; // Define the onClick functions for group 2 -const handleAlarm2Click = () => { - console.log('Clicked Alarm2 Button!'); +const mergeLovdAndGnomadClick = () => { + console.log('Clicked Merge LOVD & gnomAD Button!'); +}; + +const mergeLovdAndClinvarClick = () => { + console.log('Clicked Merge LOVD & ClinVar Button!'); }; // Define the buttons for group 2 export const MergeGroupButtons: ToolbarGroupItemProps[] = [ { group: 'merge', - icon: AccessAlarmsIcon, + icon: MergeTypeIcon, label: 'Merge LOVD & gnomAD', - onClick: handleAlarm2Click, + onClick: mergeLovdAndGnomadClick, + }, + { + group: 'merge', + icon: MergeTypeIcon, + label: 'Merge LOVD & ClinVar', + onClick: mergeLovdAndClinvarClick, }, ]; From 4ee533eec0308ae827702cd47fc7b7134f7649d7 Mon Sep 17 00:00:00 2001 From: Justinas <156369263+justinnas@users.noreply.github.com> Date: Mon, 2 Sep 2024 14:46:56 +0300 Subject: [PATCH 3/5] Moved BaseLayout into routes, made sidebar icons highlighted depending on the page --- app/front-end/src/app/provider.tsx | 5 +- app/front-end/src/app/router.tsx | 17 ++++- .../components/buttons/IconTitleButton.tsx | 16 ++++- .../src/components/layouts/baseLayout.tsx | 5 +- .../src/components/sidebar/sidebar.tsx | 71 +++++++++++-------- app/front-end/src/types/constants/paths.ts | 9 +-- 6 files changed, 76 insertions(+), 47 deletions(-) diff --git a/app/front-end/src/app/provider.tsx b/app/front-end/src/app/provider.tsx index 928db5d..31c7e84 100644 --- a/app/front-end/src/app/provider.tsx +++ b/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={} > - - {children} - + {children} ); diff --git a/app/front-end/src/app/router.tsx b/app/front-end/src/app/router.tsx index 039123f..e8ba1a6 100644 --- a/app/front-end/src/app/router.tsx +++ b/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) => ( + + + + ), + }; }, }, { path: Paths.NOTFOUND, lazy: async () => { const { NotFound } = await import('./routes/notFound'); - return { Component: NotFound }; + return { + Component: (props) => ( + + + + ), + }; }, }, ]), diff --git a/app/front-end/src/components/buttons/IconTitleButton.tsx b/app/front-end/src/components/buttons/IconTitleButton.tsx index 4f9d877..be38de8 100644 --- a/app/front-end/src/components/buttons/IconTitleButton.tsx +++ b/app/front-end/src/components/buttons/IconTitleButton.tsx @@ -8,6 +8,7 @@ interface Props { height?: string; borderRadius?: string; onClick?: () => void; + isActive?: boolean; } /** @@ -29,7 +30,15 @@ interface Props { * * @returns {JSX.Element} The `IconTitleButton` component rendering an icon button and an optional title. */ -export const IconTitleButton: React.FC = ({ icon, title, width, height, borderRadius, onClick }) => { +export const IconTitleButton: React.FC = ({ + icon, + title, + width, + height, + borderRadius, + onClick, + isActive = false, +}) => { const Theme = useTheme(); return ( @@ -41,8 +50,11 @@ export const IconTitleButton: React.FC = ({ icon, title, width, height, b borderRadius: borderRadius || '1rem', transition: 'background-color 0.5s ease', ':hover': { - backgroundColor: alpha(Theme.palette.primary.contrastText, 0.2), + backgroundColor: isActive + ? alpha(Theme.palette.primary.contrastText, 0.3) + : alpha(Theme.palette.primary.contrastText, 0.2), }, + backgroundColor: isActive ? alpha(Theme.palette.primary.contrastText, 0.3) : 'transparent', }} onClick={onClick} > diff --git a/app/front-end/src/components/layouts/baseLayout.tsx b/app/front-end/src/components/layouts/baseLayout.tsx index 38dc358..82c0185 100644 --- a/app/front-end/src/components/layouts/baseLayout.tsx +++ b/app/front-end/src/components/layouts/baseLayout.tsx @@ -109,10 +109,7 @@ export const BaseLayout: React.FC = ({ children }) => { flexDirection: 'row', }} > - + void; - handleShortcutsDialogOpen: () => void; + settingsDialogOpen: () => void; + shortcutsDialogOpen: () => void; } -export const Sidebar: React.FC = ({ handleSettingsDialogOpen, handleShortcutsDialogOpen }) => { +export const Sidebar: React.FC = ({ settingsDialogOpen, shortcutsDialogOpen }) => { + const location = useLocation(); + return ( - + = ({ handleSettingsDialogOpen, hand alignItems: 'center', }} > - - } - title={'Home'} - /> - - } - title={'Macros'} - /> + + + } + title={'Home'} + isActive={location.pathname === Paths.HOME} + /> + + + + } + title={'Macros'} + isActive={location.pathname === Paths.MACROS} + /> + = ({ handleSettingsDialogOpen, hand icon={ } - onClick={handleSettingsDialogOpen} + onClick={settingsDialogOpen} /> = ({ handleSettingsDialogOpen, hand sx={{ width: '1.5rem', height: '1.5rem', color: Colors.backgroundPrimaryLight }} /> } - onClick={handleShortcutsDialogOpen} + onClick={shortcutsDialogOpen} /> diff --git a/app/front-end/src/types/constants/paths.ts b/app/front-end/src/types/constants/paths.ts index 920578e..04bfbf8 100644 --- a/app/front-end/src/types/constants/paths.ts +++ b/app/front-end/src/types/constants/paths.ts @@ -16,12 +16,13 @@ * @example * // Example usage of Paths * import { Paths } from './path/to/paths'; - * + * * // Configure routing * * */ export const Paths = { - HOME: '/', - NOTFOUND: '*', -}; \ No newline at end of file + HOME: '/', + MACROS: '/macros', + NOTFOUND: '*', +}; From 3c4167dcaeacc8452fed089e4b8848d215589885 Mon Sep 17 00:00:00 2001 From: Justinas <156369263+justinnas@users.noreply.github.com> Date: Mon, 2 Sep 2024 14:55:38 +0300 Subject: [PATCH 4/5] Small fixes --- .../toolbarView/toolbarGroupButtons/applyGroupButtons.tsx | 2 -- .../toolbarView/toolbarGroupButtons/downloadGroupButtons.tsx | 1 - .../toolbarView/toolbarGroupButtons/mergeGroupButtons.tsx | 2 -- 3 files changed, 5 deletions(-) diff --git a/app/front-end/src/features/editor/components/toolbarView/toolbarGroupButtons/applyGroupButtons.tsx b/app/front-end/src/features/editor/components/toolbarView/toolbarGroupButtons/applyGroupButtons.tsx index 10daf16..3044051 100644 --- a/app/front-end/src/features/editor/components/toolbarView/toolbarGroupButtons/applyGroupButtons.tsx +++ b/app/front-end/src/features/editor/components/toolbarView/toolbarGroupButtons/applyGroupButtons.tsx @@ -2,7 +2,6 @@ import { Deblur as DeblurIcon } from '@mui/icons-material'; import { ToolbarGroupItemProps } from '@/features/editor/components/toolbarView'; -// Define the onClick functions for group 3 const applySpliceAiClick = () => { console.log('Clicked Apply SpliceAI Button!'); }; @@ -11,7 +10,6 @@ const applyCaddClick = () => { console.log('Clicked Apply CADD Button!'); }; -// Define the buttons for group 3 export const ApplyGroupButtons: ToolbarGroupItemProps[] = [ { group: 'apply', diff --git a/app/front-end/src/features/editor/components/toolbarView/toolbarGroupButtons/downloadGroupButtons.tsx b/app/front-end/src/features/editor/components/toolbarView/toolbarGroupButtons/downloadGroupButtons.tsx index fb9912c..febfd84 100644 --- a/app/front-end/src/features/editor/components/toolbarView/toolbarGroupButtons/downloadGroupButtons.tsx +++ b/app/front-end/src/features/editor/components/toolbarView/toolbarGroupButtons/downloadGroupButtons.tsx @@ -14,7 +14,6 @@ const handleDownloadGnomadClick = () => { console.log('Clicked Download Gnomad Button!'); }; -// Define the buttons for group 1 export const DownloadGroupButtons: ToolbarGroupItemProps[] = [ { group: 'download', diff --git a/app/front-end/src/features/editor/components/toolbarView/toolbarGroupButtons/mergeGroupButtons.tsx b/app/front-end/src/features/editor/components/toolbarView/toolbarGroupButtons/mergeGroupButtons.tsx index 2c655c5..73d2271 100644 --- a/app/front-end/src/features/editor/components/toolbarView/toolbarGroupButtons/mergeGroupButtons.tsx +++ b/app/front-end/src/features/editor/components/toolbarView/toolbarGroupButtons/mergeGroupButtons.tsx @@ -2,7 +2,6 @@ import { MergeType as MergeTypeIcon } from '@mui/icons-material'; import { ToolbarGroupItemProps } from '@/features/editor/components/toolbarView'; -// Define the onClick functions for group 2 const mergeLovdAndGnomadClick = () => { console.log('Clicked Merge LOVD & gnomAD Button!'); }; @@ -11,7 +10,6 @@ const mergeLovdAndClinvarClick = () => { console.log('Clicked Merge LOVD & ClinVar Button!'); }; -// Define the buttons for group 2 export const MergeGroupButtons: ToolbarGroupItemProps[] = [ { group: 'merge', From 52271507b73d79e8cd0172219f07fc62fa949306 Mon Sep 17 00:00:00 2001 From: Justinas <156369263+justinnas@users.noreply.github.com> Date: Mon, 2 Sep 2024 18:11:35 +0300 Subject: [PATCH 5/5] Addressed issues, made it so the navigation buttons could be disabled --- .../components/buttons/IconTitleButton.tsx | 31 ++++++-- .../src/components/layouts/baseLayout.tsx | 2 +- app/front-end/src/components/sidebar/index.ts | 1 + .../src/components/sidebar/sidebar.tsx | 72 +++++++++---------- 4 files changed, 58 insertions(+), 48 deletions(-) create mode 100644 app/front-end/src/components/sidebar/index.ts diff --git a/app/front-end/src/components/buttons/IconTitleButton.tsx b/app/front-end/src/components/buttons/IconTitleButton.tsx index be38de8..bad6b76 100644 --- a/app/front-end/src/components/buttons/IconTitleButton.tsx +++ b/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 { @@ -9,6 +8,7 @@ interface Props { borderRadius?: string; onClick?: () => void; isActive?: boolean; + disabled?: boolean; } /** @@ -38,8 +38,10 @@ export const IconTitleButton: React.FC = ({ borderRadius, onClick, isActive = false, + disabled = false, }) => { const Theme = useTheme(); + return ( = ({ 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: 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) + : alpha(Theme.palette.primary.contrastText, 0.2), }, - backgroundColor: isActive ? alpha(Theme.palette.primary.contrastText, 0.3) : 'transparent', + backgroundColor: disabled + ? 'transparent' + : isActive + ? alpha(Theme.palette.primary.contrastText, 0.3) + : 'transparent', }} - onClick={onClick} + onClick={disabled ? () => {} : onClick} > {icon} {title && ( - + {} : onClick} + > {title} )} diff --git a/app/front-end/src/components/layouts/baseLayout.tsx b/app/front-end/src/components/layouts/baseLayout.tsx index 82c0185..764588f 100644 --- a/app/front-end/src/components/layouts/baseLayout.tsx +++ b/app/front-end/src/components/layouts/baseLayout.tsx @@ -1,5 +1,5 @@ import { SettingsDialog, ShortcutsDialog } from '@/components/dialogs'; -import { Sidebar } from '@/components/sidebar/sidebar'; +import { Sidebar } from '@/components/sidebar'; import { Colors } from '@/types'; import { Box, Typography, useTheme } from '@mui/material'; import { useState } from 'react'; diff --git a/app/front-end/src/components/sidebar/index.ts b/app/front-end/src/components/sidebar/index.ts new file mode 100644 index 0000000..bfed624 --- /dev/null +++ b/app/front-end/src/components/sidebar/index.ts @@ -0,0 +1 @@ +export { Sidebar } from './sidebar'; diff --git a/app/front-end/src/components/sidebar/sidebar.tsx b/app/front-end/src/components/sidebar/sidebar.tsx index d778352..49a3b80 100644 --- a/app/front-end/src/components/sidebar/sidebar.tsx +++ b/app/front-end/src/components/sidebar/sidebar.tsx @@ -1,5 +1,5 @@ import { IconTitleButton } from '@/components/buttons/IconTitleButton'; -import { Colors, Paths } from '@/types'; +import { Paths } from '@/types'; import { AutoMode as AutoModeIcon, Home as HomeIcon, @@ -7,7 +7,7 @@ import { SwitchAccessShortcut as SwitchAccessShortcutIcon, } from '@mui/icons-material'; import { Box } from '@mui/material'; -import { Link, useLocation } from 'react-router-dom'; +import { useLocation, useNavigate } from 'react-router-dom'; interface SidebarProps { settingsDialogOpen: () => void; @@ -16,6 +16,7 @@ interface SidebarProps { export const Sidebar: React.FC = ({ settingsDialogOpen, shortcutsDialogOpen }) => { const location = useLocation(); + const navigate = useNavigate(); return ( @@ -30,36 +31,33 @@ export const Sidebar: React.FC = ({ settingsDialogOpen, shortcutsD alignItems: 'center', }} > - - - } - title={'Home'} - isActive={location.pathname === Paths.HOME} - /> - - - - } - title={'Macros'} - isActive={location.pathname === Paths.MACROS} - /> - + + } + title={'Home'} + isActive={location.pathname === Paths.HOME} + onClick={() => navigate(Paths.HOME)} + /> + + } + title={'Macros'} + isActive={location.pathname === Paths.MACROS} + onClick={() => navigate(Paths.MACROS)} + disabled + /> = ({ settingsDialogOpen, shortcutsD }} > - } + icon={} onClick={settingsDialogOpen} /> - } + icon={} onClick={shortcutsDialogOpen} />