From 2dcb1e5d05fdc5c8564a1922dde10cfae71e7190 Mon Sep 17 00:00:00 2001
From: Mantvydas Deltuva <mantvydasdeltuva@gmail.com>
Date: Thu, 5 Sep 2024 00:54:38 +0300
Subject: [PATCH 1/5] MDE/PKFE-32 implemented status context provider

---
 app/front-end/src/app/provider.tsx            |  6 ++-
 app/front-end/src/hooks/index.ts              |  1 +
 app/front-end/src/hooks/useStatusContext.ts   |  4 ++
 app/front-end/src/stores/index.ts             |  2 +
 .../src/stores/statusContextProvider.tsx      | 42 +++++++++++++++++++
 5 files changed, 53 insertions(+), 2 deletions(-)
 create mode 100644 app/front-end/src/hooks/useStatusContext.ts
 create mode 100644 app/front-end/src/stores/statusContextProvider.tsx

diff --git a/app/front-end/src/app/provider.tsx b/app/front-end/src/app/provider.tsx
index 31c7e84..40e5c3a 100644
--- a/app/front-end/src/app/provider.tsx
+++ b/app/front-end/src/app/provider.tsx
@@ -1,4 +1,4 @@
-import { SessionContextProvider, ThemeContextProvider } from '@/stores';
+import { SessionContextProvider, StatusContextProvider, ThemeContextProvider } from '@/stores';
 import { CircularProgress } from '@mui/material';
 import React from 'react';
 
@@ -40,7 +40,9 @@ export const AppProvider = ({ children }: AppProviderProps) => {
       fallback={<CircularProgress sx={{ display: 'flex', justifyItems: 'center', alignContent: 'center' }} />}
     >
       <SessionContextProvider>
-        <ThemeContextProvider>{children}</ThemeContextProvider>
+        <StatusContextProvider>
+          <ThemeContextProvider>{children}</ThemeContextProvider>
+        </StatusContextProvider>
       </SessionContextProvider>
     </React.Suspense>
   );
diff --git a/app/front-end/src/hooks/index.ts b/app/front-end/src/hooks/index.ts
index 978411d..9bbe3c9 100644
--- a/app/front-end/src/hooks/index.ts
+++ b/app/front-end/src/hooks/index.ts
@@ -1,2 +1,3 @@
 export { useSessionContext } from './useSessionContext';
+export { useStatusContext } from './useStatusContext';
 export { useThemeContext } from './useThemeContext';
diff --git a/app/front-end/src/hooks/useStatusContext.ts b/app/front-end/src/hooks/useStatusContext.ts
new file mode 100644
index 0000000..ccae9c5
--- /dev/null
+++ b/app/front-end/src/hooks/useStatusContext.ts
@@ -0,0 +1,4 @@
+import { StatusContext } from '@/stores';
+import { useContext } from 'react';
+
+export const useStatusContext = () => useContext(StatusContext);
diff --git a/app/front-end/src/stores/index.ts b/app/front-end/src/stores/index.ts
index 59d0790..0d28f71 100644
--- a/app/front-end/src/stores/index.ts
+++ b/app/front-end/src/stores/index.ts
@@ -1,4 +1,6 @@
 export { SessionContext, SessionContextProvider } from './sessionContextProvider';
 export type { SessionContextProps } from './sessionContextProvider';
+export { StatusContext, StatusContextProvider } from './statusContextProvider';
+export type { StatusContextProps } from './statusContextProvider';
 export { ThemeContext, ThemeContextProvider } from './themeContextProvider';
 export type { ThemeContextProps } from './themeContextProvider';
diff --git a/app/front-end/src/stores/statusContextProvider.tsx b/app/front-end/src/stores/statusContextProvider.tsx
new file mode 100644
index 0000000..02c4607
--- /dev/null
+++ b/app/front-end/src/stores/statusContextProvider.tsx
@@ -0,0 +1,42 @@
+import { useSessionContext } from '@/hooks';
+import React, { createContext, useEffect, useState } from 'react';
+
+export interface StatusContextProps {
+  blocked: boolean;
+  blockedStateUpdate: (blocked: boolean) => void;
+}
+
+export const StatusContext = createContext<StatusContextProps>({
+  blocked: false,
+  blockedStateUpdate: () => {},
+});
+
+interface Props {
+  children?: React.ReactNode;
+}
+
+export const StatusContextProvider: React.FC<Props> = ({ children }) => {
+  const [blocked, setBlocked] = useState<boolean>(false);
+
+  const blockedStateUpdate = (blocked: boolean) => {
+    setBlocked(blocked);
+  };
+
+  const { connected } = useSessionContext();
+
+  useEffect(() => {
+    if (!connected) {
+      setBlocked(true);
+      return;
+    }
+
+    setBlocked(false);
+  }, [connected]);
+
+  const StatusContextValue: StatusContextProps = {
+    blocked,
+    blockedStateUpdate,
+  };
+
+  return <StatusContext.Provider value={StatusContextValue}>{children}</StatusContext.Provider>;
+};

From d3af32aa47bfbf08cf25a2022339fde0f1f7db39 Mon Sep 17 00:00:00 2001
From: Mantvydas Deltuva <mantvydasdeltuva@gmail.com>
Date: Thu, 5 Sep 2024 00:56:38 +0300
Subject: [PATCH 2/5] MDE/PKFE-32 restructured toolbar button data

---
 .../toolbarGroupButtons/applyGroupButtons.tsx |  26 ----
 .../downloadGroupButtons.tsx                  |  36 -----
 .../toolbarView/toolbarGroupButtons/index.ts  |   3 -
 .../toolbarGroupButtons/mergeGroupButtons.tsx |  26 ----
 .../toolbarView/toolbarGroupItem.tsx          |   4 +-
 .../components/toolbarView/toolbarView.tsx    | 135 ++++++++++++++++--
 6 files changed, 124 insertions(+), 106 deletions(-)
 delete mode 100644 app/front-end/src/features/editor/components/toolbarView/toolbarGroupButtons/applyGroupButtons.tsx
 delete mode 100644 app/front-end/src/features/editor/components/toolbarView/toolbarGroupButtons/downloadGroupButtons.tsx
 delete mode 100644 app/front-end/src/features/editor/components/toolbarView/toolbarGroupButtons/index.ts
 delete 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
deleted file mode 100644
index 3044051..0000000
--- a/app/front-end/src/features/editor/components/toolbarView/toolbarGroupButtons/applyGroupButtons.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-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,
-  },
-];
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
deleted file mode 100644
index febfd84..0000000
--- a/app/front-end/src/features/editor/components/toolbarView/toolbarGroupButtons/downloadGroupButtons.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-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,
-  },
-];
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
deleted file mode 100644
index 243e3af..0000000
--- a/app/front-end/src/features/editor/components/toolbarView/toolbarGroupButtons/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-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
deleted file mode 100644
index 73d2271..0000000
--- a/app/front-end/src/features/editor/components/toolbarView/toolbarGroupButtons/mergeGroupButtons.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-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,
-  },
-];
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 707773b..789a501 100644
--- a/app/front-end/src/features/editor/components/toolbarView/toolbarGroupItem.tsx
+++ b/app/front-end/src/features/editor/components/toolbarView/toolbarGroupItem.tsx
@@ -5,6 +5,7 @@ export interface ToolbarGroupItemProps {
   group: string;
   icon: SvgIconComponent;
   label: string;
+  disabled: boolean;
   onClick: () => void;
 }
 
@@ -34,13 +35,14 @@ 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, onClick }) => {
+export const ToolbarGroupItem: React.FC<ToolbarGroupItemProps> = ({ icon: Icon, label, disabled, onClick }) => {
   const Theme = useTheme();
 
   return (
     <Box sx={{ height: '40%', alignContent: 'center' }}>
       <Button
         startIcon={<Icon sx={{ color: Theme.palette.text.primary }} />}
+        disabled={disabled}
         onClick={() => onClick()}
         sx={{
           color: Theme.palette.text.primary,
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 58f4a2f..9c75d60 100644
--- a/app/front-end/src/features/editor/components/toolbarView/toolbarView.tsx
+++ b/app/front-end/src/features/editor/components/toolbarView/toolbarView.tsx
@@ -6,14 +6,9 @@ import {
   ToolbarGroupsSelectorItem,
   ToolbarGroupsSelectorItemProps,
 } from '@/features/editor/components/toolbarView';
-
-import {
-  ApplyGroupButtons,
-  DownloadGroupButtons,
-  MergeGroupButtons,
-} from '@/features/editor/components/toolbarView/toolbarGroupButtons';
-
-import { useState } from 'react';
+import { useStatusContext } from '@/hooks';
+import { Deblur as DeblurIcon, Download as DownloadIcon, MergeType as MergeTypeIcon } from '@mui/icons-material';
+import { useMemo, useState } from 'react';
 
 /**
  * ToolbarView component manages and displays a set of toolbar groups and items.
@@ -38,12 +33,7 @@ import { useState } from 'react';
 export const ToolbarView: React.FC = () => {
   const [selectedGroup, setSelectedGroup] = useState<string>('download');
 
-  // Combine the button groups into a dictionary for easy access
-  const ToolbarGroupsButtons: Record<string, ToolbarGroupItemProps[]> = {
-    download: DownloadGroupButtons,
-    merge: MergeGroupButtons,
-    apply: ApplyGroupButtons,
-  };
+  const { blocked } = useStatusContext();
 
   const ToolbarGroups: ToolbarGroupsSelectorItemProps[] = [
     {
@@ -63,6 +53,123 @@ 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(
+    () => ({
+      download: DownloadGroupButtons,
+      merge: MergeGroupButtons,
+      apply: ApplyGroupButtons,
+    }),
+    [DownloadGroupButtons, MergeGroupButtons, ApplyGroupButtons]
+  );
+
   return (
     <>
       <ToolbarGroupsSelector>

From ce2b7fc085fef6876763b5eab68acc18aada233a Mon Sep 17 00:00:00 2001
From: Mantvydas Deltuva <mantvydasdeltuva@gmail.com>
Date: Thu, 5 Sep 2024 00:56:58 +0300
Subject: [PATCH 3/5] MDE/PKFE-32 applied status context to available actions

---
 .../editorView/editorColumnMenu.tsx           |  6 +-
 .../components/editorView/editorToolbar.tsx   |  9 +--
 .../components/editorView/editorView.tsx      | 57 ++++++++++++-------
 .../fileTreeItem/fileTreeItem.tsx             | 13 ++++-
 .../components/fileTreeView/fileTreeView.tsx  |  9 ++-
 .../filebarView/filebarGroupItem.tsx          | 17 ++++--
 .../stores/workspaceContextProvider.tsx       |  6 +-
 7 files changed, 81 insertions(+), 36 deletions(-)

diff --git a/app/front-end/src/features/editor/components/editorView/editorColumnMenu.tsx b/app/front-end/src/features/editor/components/editorView/editorColumnMenu.tsx
index 0f5edbb..c54bf90 100644
--- a/app/front-end/src/features/editor/components/editorView/editorColumnMenu.tsx
+++ b/app/front-end/src/features/editor/components/editorView/editorColumnMenu.tsx
@@ -10,6 +10,7 @@ const StyledGridColumnMenuContainer = styled(GridColumnMenuContainer)(({ theme }
 }));
 
 interface GridColumnMenuContainerProps extends GridColumnMenuProps {
+  disabled: boolean;
   handleAggregation: (column: string, action: FileContentAggregationActions) => void;
 }
 
@@ -30,6 +31,7 @@ interface GridColumnMenuContainerProps extends GridColumnMenuProps {
  * @component
  */
 export const EditorColumnMenu: React.FC<GridColumnMenuContainerProps> = ({
+  disabled,
   handleAggregation,
   hideMenu,
   colDef,
@@ -40,7 +42,7 @@ export const EditorColumnMenu: React.FC<GridColumnMenuContainerProps> = ({
     ? fileContent.aggregations[colDef.field].action
     : FileContentAggregationActions.NONE;
 
-  return (
+  return !disabled ? (
     <StyledGridColumnMenuContainer hideMenu={hideMenu} colDef={colDef} {...other}>
       <EditorColumnMenuAggregationItem
         initialValue={aggregationActiveAction}
@@ -50,5 +52,5 @@ export const EditorColumnMenu: React.FC<GridColumnMenuContainerProps> = ({
       <Divider />
       <GridColumnMenuHideItem onClick={hideMenu} colDef={colDef!} />
     </StyledGridColumnMenuContainer>
-  );
+  ) : null;
 };
diff --git a/app/front-end/src/features/editor/components/editorView/editorToolbar.tsx b/app/front-end/src/features/editor/components/editorView/editorToolbar.tsx
index 3235f30..ad2eb32 100644
--- a/app/front-end/src/features/editor/components/editorView/editorToolbar.tsx
+++ b/app/front-end/src/features/editor/components/editorView/editorToolbar.tsx
@@ -1,3 +1,4 @@
+import { useStatusContext } from '@/hooks';
 import { socket } from '@/lib';
 import { Events } from '@/types';
 import { Done as DoneIcon, Error as ErrorIcon } from '@mui/icons-material';
@@ -12,7 +13,6 @@ import {
 import { useEffect, useState } from 'react';
 
 interface EditorToolbarProps extends GridToolbarProps, ToolbarPropsOverrides {
-  disabled?: boolean;
   handleSave: () => void;
 }
 
@@ -47,11 +47,12 @@ interface EditorToolbarProps extends GridToolbarProps, ToolbarPropsOverrides {
  *
  * @returns {JSX.Element} The rendered toolbar component with buttons for DataGrid actions and a save button with status feedback.
  */
-export const EditorToolbar: React.FC<EditorToolbarProps> = ({ disabled, handleSave }) => {
+export const EditorToolbar: React.FC<EditorToolbarProps> = ({ handleSave }) => {
   const [isSaving, setIsSaving] = useState(false);
   const [saveStatus, setSaveStatus] = useState(true);
 
   const Theme = useTheme();
+  const { blocked } = useStatusContext();
 
   useEffect(() => {
     const handleWorkspaceFileSaveFeedback = (data: { status: 'success' | 'error' }) => {
@@ -63,7 +64,7 @@ export const EditorToolbar: React.FC<EditorToolbarProps> = ({ disabled, handleSa
     return () => {
       socket.off(Events.WORKSPACE_FILE_SAVE_FEEDBACK_EVENT);
     };
-  });
+  }, []);
 
   return (
     <GridToolbarContainer>
@@ -77,7 +78,7 @@ export const EditorToolbar: React.FC<EditorToolbarProps> = ({ disabled, handleSa
           setIsSaving(true);
           handleSave();
         }}
-        disabled={disabled || isSaving}
+        disabled={blocked}
         startIcon={
           isSaving ? (
             <CircularProgress size={16} sx={{ color: Theme.palette.primary.main }} />
diff --git a/app/front-end/src/features/editor/components/editorView/editorView.tsx b/app/front-end/src/features/editor/components/editorView/editorView.tsx
index 1505885..edcd860 100644
--- a/app/front-end/src/features/editor/components/editorView/editorView.tsx
+++ b/app/front-end/src/features/editor/components/editorView/editorView.tsx
@@ -1,10 +1,10 @@
 import { EditorColumnMenu, EditorHeader, EditorToolbar } from '@/features/editor/components/editorView';
 import { useWorkspaceContext } from '@/features/editor/hooks';
 import { FileContentAggregationActions, FileDataRequestDTO, FileDataResponseDTO } from '@/features/editor/types';
-import { useSessionContext } from '@/hooks';
+import { useSessionContext, useStatusContext } from '@/hooks';
 import { axios } from '@/lib';
 import { Endpoints } from '@/types';
-import { DataGrid, useGridApiRef } from '@mui/x-data-grid';
+import { DataGrid, GridPagination, useGridApiRef } from '@mui/x-data-grid';
 import { useCallback, useEffect, useState } from 'react';
 
 /**
@@ -56,10 +56,13 @@ export const EditorView: React.FC = () => {
   });
 
   const { connected } = useSessionContext();
-  const { file, fileContent, filePagination, fileStateReset, fileStateUpdate } = useWorkspaceContext();
+  const { file, fileContent, filePagination, fileStateUpdate } = useWorkspaceContext();
+  const { blocked, blockedStateUpdate } = useStatusContext();
   const ref = useGridApiRef();
 
   const handleSave = async () => {
+    blockedStateUpdate(true);
+
     const data: FileDataRequestDTO = {
       page: filePagination.page,
       rowsPerPage: filePagination.rowsPerPage,
@@ -83,6 +86,8 @@ export const EditorView: React.FC = () => {
       fileStateUpdate(undefined, { ...fileContent, aggregations: responseColumnsAggregation }, undefined);
     } catch (error) {
       console.error('Failed to save file content:', error);
+    } finally {
+      blockedStateUpdate(false);
     }
   };
 
@@ -94,20 +99,27 @@ export const EditorView: React.FC = () => {
         break;
       default:
         {
-          const response = await axios.get(`${Endpoints.WORKSPACE_AGGREGATE}/${file.id}`, {
-            params: {
-              field: column,
-              action: action,
-            },
-          });
-
-          const { field: responseField, action: responseAction, value: responseValue } = response.data;
-
-          const newAggregations = {
-            ...fileContent.aggregations,
-            [responseField]: { action: responseAction, value: responseValue },
-          };
-          fileStateUpdate(undefined, { ...fileContent, aggregations: newAggregations }, undefined);
+          blockedStateUpdate(true);
+          try {
+            const response = await axios.get(`${Endpoints.WORKSPACE_AGGREGATE}/${file.id}`, {
+              params: {
+                field: column,
+                action: action,
+              },
+            });
+
+            const { field: responseField, action: responseAction, value: responseValue } = response.data;
+
+            const newAggregations = {
+              ...fileContent.aggregations,
+              [responseField]: { action: responseAction, value: responseValue },
+            };
+            fileStateUpdate(undefined, { ...fileContent, aggregations: newAggregations }, undefined);
+          } catch (error) {
+            console.error('Failed to fetch aggregation data:', error);
+          } finally {
+            blockedStateUpdate(false);
+          }
         }
         break;
     }
@@ -119,7 +131,7 @@ export const EditorView: React.FC = () => {
       return;
     }
 
-    setIsLoading(true);
+    blockedStateUpdate(true);
 
     try {
       const response = await axios.get<FileDataResponseDTO>(`${Endpoints.WORKSPACE_FILE}/${file.id}`, {
@@ -134,6 +146,7 @@ export const EditorView: React.FC = () => {
       console.error('Failed to fetch file content:', error);
     } finally {
       setIsLoading(false);
+      blockedStateUpdate(false);
     }
   }, [file.id, filePagination.page, filePagination.rowsPerPage]);
 
@@ -186,7 +199,7 @@ export const EditorView: React.FC = () => {
   return (
     <DataGrid
       sx={{ height: '100%', border: 'none' }}
-      loading={isLoading}
+      loading={blocked || isLoading}
       rows={fileContent.rows}
       columns={fileContent.columns}
       pagination
@@ -198,6 +211,7 @@ export const EditorView: React.FC = () => {
           paginationModel: { pageSize: filePagination.rowsPerPage, page: filePagination.page },
         },
       }}
+      disableColumnMenu={blocked}
       pageSizeOptions={[25, 50, 100]}
       onPaginationModelChange={(model) => {
         fileStateUpdate(undefined, undefined, {
@@ -207,8 +221,9 @@ export const EditorView: React.FC = () => {
         });
       }}
       slots={{
-        toolbar: (props) => <EditorToolbar {...props} disabled={isLoading} handleSave={handleSave} />,
-        columnMenu: (props) => <EditorColumnMenu {...props} handleAggregation={handleAggregation} />,
+        toolbar: (props) => <EditorToolbar {...props} disabled={blocked || !file.id} handleSave={handleSave} />,
+        columnMenu: (props) => <EditorColumnMenu {...props} disabled={blocked} handleAggregation={handleAggregation} />,
+        pagination: (props) => <GridPagination disabled={blocked} {...props} />,
       }}
       slotProps={{
         toolbar: {},
diff --git a/app/front-end/src/features/editor/components/fileTreeView/fileTreeItem/fileTreeItem.tsx b/app/front-end/src/features/editor/components/fileTreeView/fileTreeItem/fileTreeItem.tsx
index 88911cc..361ffe2 100644
--- a/app/front-end/src/features/editor/components/fileTreeView/fileTreeItem/fileTreeItem.tsx
+++ b/app/front-end/src/features/editor/components/fileTreeView/fileTreeItem/fileTreeItem.tsx
@@ -2,6 +2,7 @@ import { FileTreeItemContextMenu, FileTreeItemLabel } from '@/features/editor/co
 import { useWorkspaceContext } from '@/features/editor/hooks';
 import { FileTypes } from '@/features/editor/types';
 import { getIconFromFileType, isExpandable } from '@/features/editor/utils';
+import { useStatusContext } from '@/hooks';
 import { FolderRounded as FolderRoundedIcon } from '@mui/icons-material';
 import Collapse from '@mui/material/Collapse';
 import { alpha, styled } from '@mui/material/styles';
@@ -136,6 +137,7 @@ export const FileTreeItem = React.forwardRef(function CustomTreeItem(
   }
 
   const { fileStateUpdate, filesHistoryStateUpdate } = useWorkspaceContext();
+  const { blocked } = useStatusContext();
   const [contextMenu, setContextMenu] = useState<(EventTarget & HTMLDivElement) | null>(null);
   const [contextMenuPosition, setContextMenuPosition] = useState<{ top: number; left: number }>({
     top: 0,
@@ -170,10 +172,15 @@ export const FileTreeItem = React.forwardRef(function CustomTreeItem(
         <StyledFileTreeItemContent
           {...getContentProps({
             onClick: (event) => {
-              if (getContentProps().onClick) getContentProps().onClick(event);
-              handleClick(item.id, item.label, item.fileType);
+              if (!blocked) {
+                if (getContentProps().onClick) getContentProps().onClick(event);
+                handleClick(item.id, item.label, item.fileType);
+              }
+            },
+
+            onContextMenu: (event) => {
+              if (!blocked) handleOpenContextMenu(event);
             },
-            onContextMenu: (event) => handleOpenContextMenu(event),
             className: clsx('content', {
               'Mui-expanded': status.expanded,
               'Mui-selected': status.selected,
diff --git a/app/front-end/src/features/editor/components/fileTreeView/fileTreeView.tsx b/app/front-end/src/features/editor/components/fileTreeView/fileTreeView.tsx
index e2022e3..fb78626 100644
--- a/app/front-end/src/features/editor/components/fileTreeView/fileTreeView.tsx
+++ b/app/front-end/src/features/editor/components/fileTreeView/fileTreeView.tsx
@@ -1,5 +1,6 @@
 import { FileTreeItem, FileTreeItemContextMenu } from '@/features/editor/components/fileTreeView/fileTreeItem';
 import { useWorkspaceContext } from '@/features/editor/hooks';
+import { useStatusContext } from '@/hooks';
 import { Box, Button, LinearProgress } from '@mui/material';
 import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
 import { useState } from 'react';
@@ -43,6 +44,7 @@ export const FileTreeView: React.FC = () => {
   });
 
   const { fileTree, fileTreeIsLoading } = useWorkspaceContext();
+  const { blocked } = useStatusContext();
 
   const handleOpenContextMenu = (event: React.MouseEvent<HTMLButtonElement>) => {
     event.stopPropagation();
@@ -67,7 +69,12 @@ export const FileTreeView: React.FC = () => {
         </Box>
       ) : (
         <>
-          <Button variant='outlined' onClick={(event) => handleOpenContextMenu(event)} sx={{ mb: '1.5rem' }}>
+          <Button
+            variant='outlined'
+            disabled={blocked}
+            onClick={(event) => handleOpenContextMenu(event)}
+            sx={{ mb: '1.5rem' }}
+          >
             New
           </Button>
           <FileTreeItemContextMenu
diff --git a/app/front-end/src/features/editor/components/filebarView/filebarGroupItem.tsx b/app/front-end/src/features/editor/components/filebarView/filebarGroupItem.tsx
index ffe2544..5f0ad44 100644
--- a/app/front-end/src/features/editor/components/filebarView/filebarGroupItem.tsx
+++ b/app/front-end/src/features/editor/components/filebarView/filebarGroupItem.tsx
@@ -1,5 +1,6 @@
 import { useWorkspaceContext } from '@/features/editor/hooks';
 import { FileModel } from '@/features/editor/types';
+import { useStatusContext } from '@/hooks';
 import { Close as CloseIcon } from '@mui/icons-material';
 import { alpha, Box, IconButton, Typography, useTheme } from '@mui/material';
 
@@ -25,6 +26,7 @@ import { alpha, Box, IconButton, Typography, useTheme } from '@mui/material';
 export const FilebarGroupItem: React.FC<FileModel> = (file) => {
   const Theme = useTheme();
   const Workspace = useWorkspaceContext();
+  const { blocked } = useStatusContext();
 
   const { id, label } = file;
 
@@ -39,9 +41,13 @@ export const FilebarGroupItem: React.FC<FileModel> = (file) => {
         borderRadius: '0rem',
         ':hover': {
           backgroundColor:
-            Workspace.file.id === id ? Theme.palette.background.default : alpha(Theme.palette.background.default, 0.5),
+            Workspace.file.id === id
+              ? Theme.palette.background.default
+              : blocked
+                ? Theme.palette.action.selected
+                : alpha(Theme.palette.background.default, 0.5),
         },
-        cursor: 'pointer',
+        cursor: blocked ? 'default' : 'pointer',
         display: 'flex',
         flexDirection: 'row',
         alignItems: 'center',
@@ -49,8 +55,10 @@ export const FilebarGroupItem: React.FC<FileModel> = (file) => {
       }}
       onClick={() => {
         // Update the workspace to the selected file
-        Workspace.fileStateUpdate(file);
-        Workspace.filesHistoryStateUpdate(file);
+        if (!blocked) {
+          Workspace.fileStateUpdate(file);
+          Workspace.filesHistoryStateUpdate(file);
+        }
       }}
     >
       <Typography
@@ -68,6 +76,7 @@ export const FilebarGroupItem: React.FC<FileModel> = (file) => {
       </Typography>
       <IconButton
         size='small'
+        disabled={blocked}
         onClick={(event) => {
           event.stopPropagation();
         }}
diff --git a/app/front-end/src/features/editor/stores/workspaceContextProvider.tsx b/app/front-end/src/features/editor/stores/workspaceContextProvider.tsx
index 1eecacf..7a87392 100644
--- a/app/front-end/src/features/editor/stores/workspaceContextProvider.tsx
+++ b/app/front-end/src/features/editor/stores/workspaceContextProvider.tsx
@@ -1,5 +1,5 @@
 import { FileContentModel, FileModel, FilePaginationModel, FileTypes } from '@/features/editor/types';
-import { useSessionContext } from '@/hooks';
+import { useSessionContext, useStatusContext } from '@/hooks';
 import { axios, socket } from '@/lib';
 import { Endpoints, Events } from '@/types';
 import { TreeViewBaseItem } from '@mui/x-tree-view';
@@ -149,8 +149,11 @@ export const WorkspaceContextProvider: React.FC<Props> = ({ children }) => {
   const [fileTreeIsLoading, setFileTreeIsLoading] = useState(true);
   const [fileTree, setFileTree] = useState<TreeViewBaseItem<FileModel>[]>([]);
 
+  const { blockedStateUpdate } = useStatusContext();
+
   const getWorkspace = useCallback(async () => {
     setFileTreeIsLoading(true);
+    blockedStateUpdate(true);
     try {
       const response = await axios.get(Endpoints.WORKSPACE);
       setFileTree(response.data);
@@ -158,6 +161,7 @@ export const WorkspaceContextProvider: React.FC<Props> = ({ children }) => {
       console.error('Failed to fetch workspace data:', error);
     } finally {
       setFileTreeIsLoading(false);
+      blockedStateUpdate(false);
     }
   }, []);
 

From 8d12237ac793227faa2bb84aab32f17443549e61 Mon Sep 17 00:00:00 2001
From: Mantvydas Deltuva <mantvydasdeltuva@gmail.com>
Date: Thu, 5 Sep 2024 01:04:43 +0300
Subject: [PATCH 4/5] MDE/PKFE-32 bug-fix

---
 app/back-end/src/routes/workspace_aggregate_route.py | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/app/back-end/src/routes/workspace_aggregate_route.py b/app/back-end/src/routes/workspace_aggregate_route.py
index 87a245d..4db5cf6 100644
--- a/app/back-end/src/routes/workspace_aggregate_route.py
+++ b/app/back-end/src/routes/workspace_aggregate_route.py
@@ -104,11 +104,7 @@ def get_workspace_aggregate_all(relative_path):
                     or header_values[field] == float("-inf")
                     or (
                         header_values[field] == float(0)
-                        and (
-                            header_actions[field] != "min"
-                            or header_actions[field] != "max"
-                            or header_actions[field] != "cnt"
-                        )
+                        and header_actions[field] not in ["min", "max", "cnt"]
                     )
                     else (
                         str(int(header_values[field]))

From 1fb82da040b65b3a9ea2ad0fa13ede94028113e7 Mon Sep 17 00:00:00 2001
From: Mantvydas Deltuva <mantvydasdeltuva@gmail.com>
Date: Thu, 5 Sep 2024 16:12:42 +0300
Subject: [PATCH 5/5] MDE/PKFE-32 changes to toolbar

---
 .../toolbarGroupButtons/applyGroupButtons.tsx |  26 ++++
 .../downloadGroupButtons.tsx                  |  36 ++++++
 .../toolbarView/toolbarGroupButtons/index.ts  |   3 +
 .../toolbarGroupButtons/mergeGroupButtons.tsx |  26 ++++
 .../toolbarView/toolbarGroupItem.tsx          |   7 +-
 .../components/toolbarView/toolbarView.tsx    | 116 +-----------------
 6 files changed, 100 insertions(+), 114 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..3044051
--- /dev/null
+++ b/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,
+  },
+];
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..febfd84
--- /dev/null
+++ b/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,
+  },
+];
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..73d2271
--- /dev/null
+++ b/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,
+  },
+];
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 789a501..8a43dd8 100644
--- a/app/front-end/src/features/editor/components/toolbarView/toolbarGroupItem.tsx
+++ b/app/front-end/src/features/editor/components/toolbarView/toolbarGroupItem.tsx
@@ -1,3 +1,4 @@
+import { useStatusContext } from '@/hooks';
 import { SvgIconComponent } from '@mui/icons-material';
 import { alpha, Box, Button, useTheme } from '@mui/material';
 
@@ -5,7 +6,6 @@ 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,
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 9c75d60..835a492 100644
--- a/app/front-end/src/features/editor/components/toolbarView/toolbarView.tsx
+++ b/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(
     () => ({