MDE/PKFE-31

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

@@ -165,7 +165,7 @@ export const EditorView: React.FC = () => {
     const { totalRows, header, rows } = fileContentResponse;
 
     if (!header) {
-      fileStateUpdate(undefined, { columns: [], rows: [], aggregations: {} }, undefined);
+      fileStateUpdate(undefined, { columns: [], rows: [], aggregations: fileContent.aggregations }, undefined);
       return;
     }
 

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

@@ -1,7 +1,8 @@
-import { List, useTheme } from '@mui/material';
+import { Box, List, useTheme } from '@mui/material';
 
 export interface ToolbarGroupProps {
-  children: React.ReactNode;
+  params: React.ReactNode;
+  buttons: React.ReactNode;
 }
 
 /**
@@ -25,24 +26,34 @@ export interface ToolbarGroupProps {
  * @param {React.ReactNode} children - The child elements to be displayed inside the list.
  * @returns {JSX.Element} The rendered List component.
  */
-export const ToolbarGroup: React.FC<ToolbarGroupProps> = ({ children }) => {
+export const ToolbarGroup: React.FC<ToolbarGroupProps> = ({ params, buttons }) => {
   const Theme = useTheme();
 
   return (
-    <List
+    <Box
       sx={{
-        height: '75%',
-        bgcolor: Theme.palette.background.paper,
-        px: '1rem',
-        display: 'flex',
-        flexDirection: 'row',
-        flexWrap: 'wrap',
-        gap: '1rem',
+        width: '100%',
+        height: '100%',
+        display: 'grid',
+        gridTemplateColumns: '30% 70%',
         overflow: 'auto',
-        alignContent: 'flex-start',
+        bgcolor: Theme.palette.background.paper,
       }}
     >
-      {children}
-    </List>
+      <Box sx={{ borderRight: `solid 2px ${Theme.palette.action.selected}` }}>{params}</Box>
+      <List
+        sx={{
+          pl: '1rem',
+          display: 'flex',
+          flexDirection: 'row',
+          flexWrap: 'wrap',
+          gap: '1rem',
+          overflow: 'auto',
+          alignContent: 'flex-start',
+        }}
+      >
+        {buttons}
+      </List>
+    </Box>
   );
 };

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

@@ -1,26 +1,90 @@
+import { ToolbarGroupItem, ToolbarGroupItemProps } from '@/features/editor/components/toolbarView';
+import { useToolbarContext } from '@/features/editor/hooks';
+import { useStatusContext } from '@/hooks';
 import { Deblur as DeblurIcon } from '@mui/icons-material';
+import { useCallback, useMemo } from 'react';
 
-import { ToolbarGroupItemProps } from '@/features/editor/components/toolbarView';
+export interface ApplyGroupButtonsProps {}
 
-const applySpliceAiClick = () => {
-  console.log('Clicked Apply SpliceAI Button!');
-};
+export const ApplyGroupButtons: React.FC<ApplyGroupButtonsProps> = () => {
+  const { blockedStateUpdate } = useStatusContext();
+  const { saveTo, override, applyTo, applyErrorStateUpdate } = useToolbarContext();
 
-const applyCaddClick = () => {
-  console.log('Clicked Apply CADD Button!');
-};
+  const applySpliceAiClick = useCallback(async () => {
+    if (!applyTo) {
+      applyErrorStateUpdate('Please select a file');
+      return;
+    }
+
+    blockedStateUpdate(true);
+
+    try {
+      console.log(
+        'Clicked Apply SpliceAI Button! Params:\n  saveTo:',
+        saveTo,
+        '\n  override:',
+        override,
+        '\n  applyTo:',
+        applyTo
+      );
+
+      await new Promise((resolve) => setTimeout(resolve, 1000)); // TODO: remove this line
+    } catch (error) {
+      console.error('Error applying SpliceAI:', error);
+    } finally {
+      blockedStateUpdate(false);
+    }
+  }, [saveTo, override, applyTo]);
+
+  const applyCaddClick = useCallback(async () => {
+    if (!applyTo) {
+      applyErrorStateUpdate('Please select a file');
+      return;
+    }
 
-export const ApplyGroupButtons: ToolbarGroupItemProps[] = [
-  {
-    group: 'apply',
-    icon: DeblurIcon,
-    label: 'Apply SpliceAI',
-    onClick: applySpliceAiClick,
-  },
-  {
-    group: 'apply',
-    icon: DeblurIcon,
-    label: 'Apply CADD',
-    onClick: applyCaddClick,
-  },
-];
+    blockedStateUpdate(true);
+
+    try {
+      console.log(
+        'Clicked Merge LOVD & ClinVar Button! Params:\n  saveTo:',
+        saveTo,
+        '\n  override:',
+        override,
+        '\n  applyTo:',
+        applyTo
+      );
+
+      await new Promise((resolve) => setTimeout(resolve, 1000)); // TODO: remove this line
+    } catch (error) {
+      console.error('Error applying CADD:', error);
+    } finally {
+      blockedStateUpdate(false);
+    }
+  }, [saveTo, override, applyTo]);
+
+  const buttons: ToolbarGroupItemProps[] = useMemo(
+    () => [
+      {
+        group: 'apply',
+        icon: DeblurIcon,
+        label: 'Apply SpliceAI',
+        onClick: applySpliceAiClick,
+      },
+      {
+        group: 'apply',
+        icon: DeblurIcon,
+        label: 'Apply CADD',
+        onClick: applyCaddClick,
+      },
+    ],
+    [applySpliceAiClick, applyCaddClick]
+  );
+
+  return (
+    <>
+      {buttons.map((button, index) => (
+        <ToolbarGroupItem key={index} {...button} />
+      ))}
+    </>
+  );
+};

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

@@ -1,36 +1,107 @@
-import { ToolbarGroupItemProps } from '@/features/editor/components/toolbarView';
-
+import { ToolbarGroupItem, ToolbarGroupItemProps } from '@/features/editor/components/toolbarView';
+import { useToolbarContext } from '@/features/editor/hooks';
+import { useStatusContext } from '@/hooks';
 import { Download as DownloadIcon } from '@mui/icons-material';
+import { useCallback, useMemo } from 'react';
 
-const handleDownloadLovdClick = () => {
-  console.log('Clicked Download Lovd Button!');
-};
+export interface DownloadGroupButtonsProps {}
 
-const handleDownloadClinvarClick = () => {
-  console.log('Clicked Download Clinvar Button!');
-};
+export const DownloadGroupButtons: React.FC<DownloadGroupButtonsProps> = () => {
+  const { blockedStateUpdate } = useStatusContext();
+  const { saveTo, override, gene } = useToolbarContext();
 
-const handleDownloadGnomadClick = () => {
-  console.log('Clicked Download Gnomad Button!');
-};
+  const handleDownloadLovdClick = useCallback(async () => {
+    blockedStateUpdate(true);
+
+    try {
+      console.log(
+        'Clicked Download Lovd Button! Params:\n  saveTo:',
+        saveTo,
+        '\n  override:',
+        override,
+        '\n  gene:',
+        gene
+      );
+
+      await new Promise((resolve) => setTimeout(resolve, 1000)); // TODO: remove this line
+    } catch (error) {
+      console.error('Error downloading LOVD file:', error);
+    } finally {
+      blockedStateUpdate(false);
+    }
+  }, [saveTo, override, gene]);
+
+  const handleDownloadClinvarClick = useCallback(async () => {
+    blockedStateUpdate(true);
 
-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,
-  },
-];
+    try {
+      console.log(
+        'Clicked Download Clinvar Button! Params:\n  saveTo:',
+        saveTo,
+        '\n  override:',
+        override,
+        '\n  gene:',
+        gene
+      );
+
+      await new Promise((resolve) => setTimeout(resolve, 1000)); // TODO: remove this line
+    } catch (error) {
+      console.error('Error downloading ClinVar file:', error);
+    } finally {
+      blockedStateUpdate(false);
+    }
+  }, [saveTo, override, gene]);
+
+  const handleDownloadGnomadClick = useCallback(async () => {
+    blockedStateUpdate(true);
+
+    try {
+      console.log(
+        'Clicked Download Gnomad Button! Params:\n  saveTo:',
+        saveTo,
+        '\n  override:',
+        override,
+        '\n  gene:',
+        gene
+      );
+
+      await new Promise((resolve) => setTimeout(resolve, 1000)); // TODO: remove this line
+    } catch (error) {
+      console.error('Error downloading gnomAD file:', error);
+    } finally {
+      blockedStateUpdate(false);
+    }
+  }, [saveTo, override, gene]);
+
+  const buttons: ToolbarGroupItemProps[] = useMemo(
+    () => [
+      {
+        group: 'download',
+        icon: DownloadIcon,
+        label: 'LOVD',
+        onClick: handleDownloadLovdClick,
+      },
+      {
+        group: 'download',
+        icon: DownloadIcon,
+        label: 'ClinVar',
+        onClick: handleDownloadClinvarClick,
+      },
+      {
+        group: 'download',
+        icon: DownloadIcon,
+        label: 'gnomAD',
+        onClick: handleDownloadGnomadClick,
+      },
+    ],
+    [handleDownloadLovdClick, handleDownloadClinvarClick, handleDownloadGnomadClick]
+  );
+
+  return (
+    <>
+      {buttons.map((button, index) => (
+        <ToolbarGroupItem key={index} {...button} />
+      ))}
+    </>
+  );
+};

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

@@ -1,3 +1,6 @@
 export { ApplyGroupButtons } from './applyGroupButtons';
+export type { ApplyGroupButtonsProps } from './applyGroupButtons';
 export { DownloadGroupButtons } from './downloadGroupButtons';
+export type { DownloadGroupButtonsProps } from './downloadGroupButtons';
 export { MergeGroupButtons } from './mergeGroupButtons';
+export type { MergeGroupButtonsProps } from './mergeGroupButtons';