ui: Added an option to disable sandwich view (#5715)

* Added an option to disable sandwich view

* [pre-commit.ci lite] apply automatic fixes

---------

Co-authored-by: pre-commit-ci-lite[bot] <117423508+pre-commit-ci-lite[bot]@users.noreply.github.com>

Author: manojVivek

ui/packages/app/web/src/pages/index.tsx

@@ -57,6 +57,7 @@ const Profiles = () => {
           queryServiceClient: queryClient,
           navigateTo,
           isDarkMode,
+          enableSandwichView: true,
         }}
       >
         <div className="bg-white dark:bg-gray-900 p-3">

ui/packages/shared/components/src/ParcaContext/index.tsx

@@ -54,6 +54,7 @@ interface Props {
   queryServiceClient: QueryServiceClient;
   navigateTo: NavigateFunction;
   enableSourcesView?: boolean;
+  enableSandwichView?: boolean;
   enableIciclechartView?: boolean;
   authenticationErrorMessage?: string;
   isDarkMode: boolean;
@@ -95,6 +96,7 @@ export const defaultValue: Props = {
   queryServiceClient: {} as unknown as QueryServiceClient,
   navigateTo: () => {},
   enableSourcesView: false,
+  enableSandwichView: false,
   isDarkMode: false,
   preferencesModal: false,
 };

ui/packages/shared/profile/src/ProfileIcicleGraph/IcicleGraphArrow/ContextMenu.tsx

@@ -55,7 +55,7 @@ const ContextMenu = ({
   isSandwich = false,
 }: ContextMenuProps): JSX.Element => {
   const {isDarkMode} = useParcaContext();
-  const {enableSourcesView, checkDebuginfoStatusHandler} = useParcaContext();
+  const {enableSourcesView, enableSandwichView, checkDebuginfoStatusHandler} = useParcaContext();
   const [isGraphTooltipDocked, setIsDocked] = useUserPreference<boolean>(
     USER_PREFERENCES.GRAPH_METAINFO_DOCKED.key
   );
@@ -177,18 +177,20 @@ const ContextMenu = ({
           <div>Show in table</div>
         </div>
       </Item>
-      <Item
-        id="show-in-sandwich"
-        onClick={() => {
-          setSandwichFunctionName(functionName);
-          setDashboardItems(['sandwich']);
-        }}
-      >
-        <div className="flex w-full items-center gap-2">
-          <Icon icon="tdesign:sandwich-filled" />
-          <div>Show in sandwich</div>
-        </div>
-      </Item>
+      {enableSandwichView === true && (
+        <Item
+          id="show-in-sandwich"
+          onClick={() => {
+            setSandwichFunctionName(functionName);
+            setDashboardItems(['sandwich']);
+          }}
+        >
+          <div className="flex w-full items-center gap-2">
+            <Icon icon="tdesign:sandwich-filled" />
+            <div>Show in sandwich</div>
+          </div>
+        </Item>
+      )}
       <Item id="reset-view" onClick={handleResetView}>
         <div className="flex w-full items-center gap-2">
           <Icon icon="system-uicons:reset" />

ui/packages/shared/profile/src/ProfileView/components/ViewSelector/index.tsx

@@ -30,7 +30,7 @@ const ViewSelector = ({profileSource}: Props): JSX.Element => {
       alwaysReturnArray: true,
     }
   );
-  const {enableSourcesView} = useParcaContext();
+  const {enableSourcesView, enableSandwichView} = useParcaContext();
 
   const [enableicicleCharts] = useUserPreference<boolean>(USER_PREFERENCES.ENABLE_ICICLECHARTS.key);
 
@@ -43,8 +43,15 @@ const ViewSelector = ({profileSource}: Props): JSX.Element => {
   }> = [
     {key: 'table', label: 'Table', canBeSelected: !dashboardItems.includes('table')},
     {key: 'icicle', label: 'icicle', canBeSelected: !dashboardItems.includes('icicle')},
-    {key: 'sandwich', label: 'sandwich', canBeSelected: !dashboardItems.includes('sandwich')},
   ];
+
+  if (enableSandwichView === true) {
+    allItems.push({
+      key: 'sandwich',
+      label: 'sandwich',
+      canBeSelected: !dashboardItems.includes('sandwich'),
+    });
+  }
   if (enableicicleCharts) {
     allItems.push({
       key: 'iciclechart',

ui/packages/shared/profile/src/Table/MoreDropdown.tsx

@@ -14,26 +14,33 @@
 import {Menu} from '@headlessui/react';
 import {Icon} from '@iconify/react';
 
-import {useURLState} from '@parca/components';
+import {useParcaContext, useURLState} from '@parca/components';
 
-const MoreDropdown = ({functionName}: {functionName: string}): React.JSX.Element => {
+const MoreDropdown = ({functionName}: {functionName: string}): React.JSX.Element | null => {
   const [_, setSandwichFunctionName] = useURLState<string | undefined>('sandwich_function_name');
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [dashboardItems, setDashboardItems] = useURLState<string[]>('dashboard_items', {
     alwaysReturnArray: true,
   });
+  const {enableSandwichView} = useParcaContext();
 
   const onSandwichViewSelect = (): void => {
     setSandwichFunctionName(functionName.trim());
     setDashboardItems(['sandwich']);
   };
 
-  const menuItems = [
-    {
+  const menuItems: Array<{label: string; action: () => void}> = [];
+
+  if (enableSandwichView === true) {
+    menuItems.push({
       label: 'Show in Sandwich view',
       action: () => onSandwichViewSelect(),
-    },
-  ];
+    });
+  }
+
+  if (menuItems.length === 0) {
+    return null;
+  }
 
   return (
     <div className="relative">

ui/packages/shared/profile/src/Table/hooks/useTableConfiguration.tsx

@@ -15,7 +15,7 @@ import {useEffect, useMemo, useState} from 'react';
 
 import {createColumnHelper, type ColumnDef} from '@tanstack/table-core';
 
-import {useURLState} from '@parca/components';
+import {useParcaContext, useURLState} from '@parca/components';
 import {valueFormatter} from '@parca/utilities';
 
 import {type Row} from '..';
@@ -50,6 +50,7 @@ export function useTableConfiguration({
   const [dashboardItems] = useURLState<string[]>('dashboard_items', {
     alwaysReturnArray: true,
   });
+  const {enableSandwichView} = useParcaContext();
 
   const [columnVisibility, setColumnVisibility] = useState(() => {
     return {
@@ -203,7 +204,11 @@ export function useTableConfiguration({
       }),
     ];
 
-    if (dashboardItems.length === 1 && dashboardItems[0] === 'table') {
+    if (
+      dashboardItems.length === 1 &&
+      dashboardItems[0] === 'table' &&
+      enableSandwichView === true
+    ) {
       baseColumns.unshift(
         columnHelper.accessor('moreActions', {
           id: 'moreActions',
@@ -218,7 +223,7 @@ export function useTableConfiguration({
     }
 
     return baseColumns;
-  }, [unit, total, filtered, columnHelper, dashboardItems]);
+  }, [unit, total, filtered, columnHelper, dashboardItems, enableSandwichView]);
 
   const initialSorting = useMemo(() => {
     return [