MDE/PKFE-32 changes to toolbar

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';

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

@@ -0,0 +1,26 @@
+import { MergeType as MergeTypeIcon } from '@mui/icons-material';
+
+import { ToolbarGroupItemProps } from '@/features/editor/components/toolbarView';
+
+const mergeLovdAndGnomadClick = () => {
+  console.log('Clicked Merge LOVD & gnomAD Button!');
+};
+
+const mergeLovdAndClinvarClick = () => {
+  console.log('Clicked Merge LOVD & ClinVar Button!');
+};
+
+export const MergeGroupButtons: ToolbarGroupItemProps[] = [
+  {
+    group: 'merge',
+    icon: MergeTypeIcon,
+    label: 'Merge LOVD & gnomAD',
+    onClick: mergeLovdAndGnomadClick,
+  },
+  {
+    group: 'merge',
+    icon: MergeTypeIcon,
+    label: 'Merge LOVD & ClinVar',
+    onClick: mergeLovdAndClinvarClick,
+  },
+];

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

@@ -1,11 +1,11 @@
+import { useStatusContext } from '@/hooks';
 import { SvgIconComponent } from '@mui/icons-material';
 import { alpha, Box, Button, useTheme } from '@mui/material';
 
 export interface ToolbarGroupItemProps {
   group: string;
   icon: SvgIconComponent;
   label: string;
-  disabled: boolean;
   onClick: () => void;
 }
 
@@ -35,14 +35,15 @@ export interface ToolbarGroupItemProps {
  * @param {Function} onClick - The function to be called when the button is clicked.
  * @returns {JSX.Element} The rendered Button component with an icon and label.
  */
-export const ToolbarGroupItem: React.FC<ToolbarGroupItemProps> = ({ icon: Icon, label, disabled, onClick }) => {
+export const ToolbarGroupItem: React.FC<ToolbarGroupItemProps> = ({ icon: Icon, label, onClick }) => {
   const Theme = useTheme();
+  const { blocked } = useStatusContext();
 
   return (
     <Box sx={{ height: '40%', alignContent: 'center' }}>
       <Button
         startIcon={<Icon sx={{ color: Theme.palette.text.primary }} />}
-        disabled={disabled}
+        disabled={blocked}
         onClick={() => onClick()}
         sx={{
           color: Theme.palette.text.primary,

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

@@ -6,8 +6,11 @@ import {
   ToolbarGroupsSelectorItem,
   ToolbarGroupsSelectorItemProps,
 } from '@/features/editor/components/toolbarView';
-import { useStatusContext } from '@/hooks';
-import { Deblur as DeblurIcon, Download as DownloadIcon, MergeType as MergeTypeIcon } from '@mui/icons-material';
+import {
+  ApplyGroupButtons,
+  DownloadGroupButtons,
+  MergeGroupButtons,
+} from '@/features/editor/components/toolbarView/toolbarGroupButtons';
 import { useMemo, useState } from 'react';
 
 /**
@@ -33,8 +36,6 @@ import { useMemo, useState } from 'react';
 export const ToolbarView: React.FC = () => {
   const [selectedGroup, setSelectedGroup] = useState<string>('download');
 
-  const { blocked } = useStatusContext();
-
   const ToolbarGroups: ToolbarGroupsSelectorItemProps[] = [
     {
       id: 'download',
@@ -53,113 +54,6 @@ export const ToolbarView: React.FC = () => {
     },
   ];
 
-  //
-  // Download group buttons
-  //
-
-  const handleDownloadLovdClick = () => {
-    console.log('Clicked Download Lovd Button!');
-  };
-
-  const handleDownloadClinvarClick = () => {
-    console.log('Clicked Download Clinvar Button!');
-  };
-
-  const handleDownloadGnomadClick = () => {
-    console.log('Clicked Download Gnomad Button!');
-  };
-
-  const DownloadGroupButtons: ToolbarGroupItemProps[] = useMemo(
-    () => [
-      {
-        group: 'download',
-        icon: DownloadIcon,
-        label: 'LOVD',
-        disabled: blocked,
-        onClick: handleDownloadLovdClick,
-      },
-      {
-        group: 'download',
-        icon: DownloadIcon,
-        label: 'ClinVar',
-        disabled: blocked,
-        onClick: handleDownloadClinvarClick,
-      },
-      {
-        group: 'download',
-        icon: DownloadIcon,
-        label: 'gnomAD',
-        disabled: blocked,
-        onClick: handleDownloadGnomadClick,
-      },
-    ],
-    [blocked, handleDownloadLovdClick, handleDownloadClinvarClick, handleDownloadGnomadClick]
-  );
-
-  //
-  // Merge group buttons
-  //
-
-  const mergeLovdAndGnomadClick = () => {
-    console.log('Clicked Merge LOVD & gnomAD Button!');
-  };
-
-  const mergeLovdAndClinvarClick = () => {
-    console.log('Clicked Merge LOVD & ClinVar Button!');
-  };
-
-  const MergeGroupButtons: ToolbarGroupItemProps[] = useMemo(
-    () => [
-      {
-        group: 'merge',
-        icon: MergeTypeIcon,
-        label: 'Merge LOVD & gnomAD',
-        disabled: blocked,
-        onClick: mergeLovdAndGnomadClick,
-      },
-      {
-        group: 'merge',
-        icon: MergeTypeIcon,
-        label: 'Merge LOVD & ClinVar',
-        disabled: blocked,
-        onClick: mergeLovdAndClinvarClick,
-      },
-    ],
-    [blocked, mergeLovdAndGnomadClick, mergeLovdAndClinvarClick]
-  );
-
-  //
-  // Apply group buttons
-  //
-
-  const applySpliceAiClick = () => {
-    console.log('Clicked Apply SpliceAI Button!');
-  };
-
-  const applyCaddClick = () => {
-    console.log('Clicked Apply CADD Button!');
-  };
-
-  const ApplyGroupButtons: ToolbarGroupItemProps[] = useMemo(
-    () => [
-      {
-        group: 'apply',
-        icon: DeblurIcon,
-        label: 'Apply SpliceAI',
-        disabled: blocked,
-        onClick: applySpliceAiClick,
-      },
-      {
-        group: 'apply',
-        icon: DeblurIcon,
-        label: 'Apply CADD',
-        disabled: blocked,
-        onClick: applyCaddClick,
-      },
-    ],
-    [blocked, applySpliceAiClick, applyCaddClick]
-  );
-
   // Combine the button groups into a dictionary for easy access
   const ToolbarGroupsButtons: Record<string, ToolbarGroupItemProps[]> = useMemo(
     () => ({