ui: Iciclechart improved error copy

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

@@ -72,6 +72,7 @@ interface Props {
   timezone?: string;
   preferencesModal?: boolean;
   checkDebuginfoStatusHandler?: (buildId: string) => void;
+  iciclechartHelpText?: ReactNode;
 }
 
 export const defaultValue: Props = {

ui/packages/shared/profile/src/ProfileIcicleGraph/index.tsx

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React, {LegacyRef, useEffect, useMemo, useState} from 'react';
+import React, {LegacyRef, ReactNode, useEffect, useMemo, useState} from 'react';
 
 import {AnimatePresence, motion} from 'framer-motion';
 import {useMeasure} from 'react-use';
@@ -55,8 +55,12 @@ interface ProfileIcicleGraphProps {
   isIcicleChart?: boolean;
 }
 
-const ErrorContent = ({errorMessage}: {errorMessage: string}): JSX.Element => {
-  return <div className="flex justify-center p-10">{errorMessage}</div>;
+const ErrorContent = ({errorMessage}: {errorMessage: string | ReactNode}): JSX.Element => {
+  return (
+    <div className="flex flex-col justify-center p-10 text-center gap-6 text-sm">
+      {errorMessage}
+    </div>
+  );
 };
 
 export const validateIcicleChartQuery = (
@@ -85,7 +89,7 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
   isIcicleChart = false,
   profileSource,
 }: ProfileIcicleGraphProps): JSX.Element {
-  const {onError, authenticationErrorMessage, isDarkMode} = useParcaContext();
+  const {onError, authenticationErrorMessage, isDarkMode, iciclechartHelpText} = useParcaContext();
   const {compareMode} = useProfileViewContext();
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const [icicleChartRef, {height: icicleChartHeight}] = useMeasure();
@@ -176,13 +180,41 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
     // Do necessary checks to ensure that icicle chart can be rendered for this query.
     if (isInvalidIcicleChartQuery) {
       if (isNonDelta) {
-        return <ErrorContent errorMessage="Icicle chart is only available for delta profiles." />;
+        return (
+          <ErrorContent
+            errorMessage={
+              <>
+                <span>To use the Icicle chart, please switch to a Delta profile.</span>
+                {iciclechartHelpText ?? null}
+              </>
+            }
+          />
+        );
       } else if (isDurationTooLong) {
         return (
-          <ErrorContent errorMessage="Icicle chart is not available for queries with a duration longer than a minute, select a point in the metrics graph to continue." />
+          <ErrorContent
+            errorMessage={
+              <>
+                <span>
+                  Icicle chart is unavailable for queries longer than one minute. Please select a
+                  point in the metrics graph to continue.
+                </span>
+                {iciclechartHelpText ?? null}
+              </>
+            }
+          />
         );
       } else {
-        return <ErrorContent errorMessage="Icicle chart is not available for this query." />;
+        return (
+          <ErrorContent
+            errorMessage={
+              <>
+                <span>The Icicle chart is not available for this query.</span>
+                {iciclechartHelpText ?? null}
+              </>
+            }
+          />
+        );
       }
     }
 
@@ -261,6 +293,7 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
     profileSource,
     icicleChartHeight,
     icicleChartRef,
+    iciclechartHelpText,
   ]);
 
   if (error != null) {

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

@@ -174,7 +174,7 @@ export const VisualisationToolbar: FC<VisualisationToolbarProps> = ({
             profileViewExternalSubActions={profileViewExternalSubActions}
           />
 
-          {showVisualizationSelector ? <ViewSelector /> : null}
+          {showVisualizationSelector ? <ViewSelector profileSource={profileSource} /> : null}
         </div>
       </div>
       {isGraphViz && !isTableViz && (

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

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {Fragment} from 'react';
+import {Fragment, useState} from 'react';
 
 import {Listbox, Transition} from '@headlessui/react';
 import {Icon} from '@iconify/react';
@@ -26,7 +26,9 @@ export interface DropdownElement {
 
 export interface DropdownItem {
   key: string;
+  id?: string;
   disabled?: boolean;
+  disabledText?: string;
   element: DropdownElement;
   innerAction?: InnerAction;
 }
@@ -115,61 +117,7 @@ const Dropdown = ({
                 <div className="w-[270px]">{loader}</div>
               ) : (
                 items.length > 0 &&
-                items.map(option => (
-                  <Listbox.Option
-                    id={`h-select-option-${option.key}`}
-                    key={option.key}
-                    disabled={option.disabled ?? false}
-                    className={({active}) =>
-                      cx(
-                        active && 'bg-indigo-600 text-white',
-                        'relative flex cursor-default select-none py-2 px-3'
-                      )
-                    }
-                    value={option.key}
-                  >
-                    {({selected, active, disabled}) => (
-                      <div className="flex items-center w-full justify-between">
-                        <div className="flex items-center">
-                          <span
-                            className={cx(
-                              selected ? 'font-semibold' : 'font-normal',
-                              disabled && 'opacity-50'
-                            )}
-                          >
-                            {option.element.expanded}
-                          </span>
-                        </div>
-                        {option.innerAction !== undefined && (
-                          <Button
-                            variant="neutral"
-                            className="p-[6px]"
-                            onClick={e => {
-                              e.stopPropagation();
-                              option.innerAction?.onClick();
-                            }}
-                            disabled={disabled}
-                          >
-                            {option.innerAction.text}
-                            {option.innerAction.text === 'Add Panel' && (
-                              <Icon icon="ic:baseline-plus" className="w-[14px] h-[14px] ml-2" />
-                            )}
-                          </Button>
-                        )}
-                        {selected ? (
-                          <span
-                            className={cx(
-                              active ? 'text-white' : 'text-indigo-600',
-                              'absolute inset-y-0 right-0 flex items-center pr-4'
-                            )}
-                          >
-                            <Icon icon="heroicons:check-20-solid" aria-hidden="true" />
-                          </span>
-                        ) : null}
-                      </div>
-                    )}
-                  </Listbox.Option>
-                ))
+                items.map(option => <DropdownOption key={option.key} option={option} />)
               )}
             </Listbox.Options>
           </Transition>
@@ -179,4 +127,74 @@ const Dropdown = ({
   );
 };
 
+const DropdownOption = ({option}: {option: DropdownItem}): JSX.Element => {
+  const [isMouseOver, setIsMouseOver] = useState(false);
+
+  return (
+    <Listbox.Option
+      id={option.id ?? `h-select-option-${option.key}`}
+      key={option.key}
+      disabled={option.disabled ?? false}
+      className={({active}) =>
+        cx(
+          active && 'bg-indigo-600 text-white',
+          'relative flex cursor-default select-none py-2 px-3'
+        )
+      }
+      value={option.key}
+    >
+      {({selected, active, disabled}) => (
+        <div
+          className="relative flex items-center w-full justify-between"
+          onMouseEnter={() => setIsMouseOver(true)}
+          onMouseLeave={() => setIsMouseOver(false)}
+        >
+          {isMouseOver && disabled && option.disabledText != null ? (
+            <div
+              className="absolute top-[-60px] text-gray-500 dark:text-gray-400 text-xs bg-white dark:bg-black border rounded p-2 z-100 w-52 text-center"
+              onMouseEnter={() => setIsMouseOver(false)}
+            >
+              {option.disabledText}
+              <div className="absolute left-1/2 -translate-x-1/2 top-full h-0 w-0 border-l-4 border-r-4 border-t-4 border-l-transparent border-r-transparent"></div>
+            </div>
+          ) : null}
+          <div className="flex items-center">
+            <span
+              className={cx(selected ? 'font-semibold' : 'font-normal', disabled && 'opacity-50')}
+            >
+              {option.element.expanded}
+            </span>
+          </div>
+          {option.innerAction !== undefined && (
+            <Button
+              variant="neutral"
+              className="p-[6px]"
+              onClick={e => {
+                e.stopPropagation();
+                option.innerAction?.onClick();
+              }}
+              disabled={disabled}
+            >
+              {option.innerAction.text}
+              {option.innerAction.text === 'Add Panel' && (
+                <Icon icon="ic:baseline-plus" className="w-[14px] h-[14px] ml-2" />
+              )}
+            </Button>
+          )}
+          {selected ? (
+            <span
+              className={cx(
+                active ? 'text-white' : 'text-indigo-600',
+                'absolute inset-y-0 right-0 flex items-center pr-4'
+              )}
+            >
+              <Icon icon="heroicons:check-20-solid" aria-hidden="true" />
+            </span>
+          ) : null}
+        </div>
+      )}
+    </Listbox.Option>
+  );
+};
+
 export default Dropdown;

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

@@ -16,9 +16,14 @@ import {ReactNode} from 'react';
 import {useParcaContext, useURLState} from '@parca/components';
 import {USER_PREFERENCES, useUserPreference} from '@parca/hooks';
 
+import {ProfileSource} from '../../../ProfileSource';
 import Dropdown, {DropdownElement, InnerAction} from './Dropdown';
 
-const ViewSelector = (): JSX.Element => {
+interface Props {
+  profileSource?: ProfileSource;
+}
+
+const ViewSelector = ({profileSource}: Props): JSX.Element => {
   const [dashboardItems = ['icicle'], setDashboardItems] = useURLState<string[]>(
     'dashboard_items',
     {
@@ -34,6 +39,7 @@ const ViewSelector = (): JSX.Element => {
     label?: string | ReactNode;
     canBeSelected: boolean;
     supportingText?: string;
+    disabledText?: string;
   }> = [
     {key: 'table', label: 'Table', canBeSelected: !dashboardItems.includes('table')},
     {key: 'icicle', label: 'icicle', canBeSelected: !dashboardItems.includes('icicle')},
@@ -43,16 +49,21 @@ const ViewSelector = (): JSX.Element => {
       key: 'iciclechart',
       label: (
         <span className="relative">
-          IcicleChart
+          Iciclechart
           <span className="absolute top-[-2px] text-xs lowercase text-red-500">&nbsp;alpha</span>
         </span>
       ),
-      canBeSelected: !dashboardItems.includes('iciclechart'),
+      canBeSelected:
+        !dashboardItems.includes('iciclechart') && profileSource?.ProfileType().delta === true,
+      disabledText:
+        !dashboardItems.includes('iciclechart') && profileSource?.ProfileType().delta !== true
+          ? 'Iciclechart is not available for non-delta profiles'
+          : undefined,
     });
   }
 
   if (enableSourcesView === true) {
-    allItems.push({key: 'source', canBeSelected: false});
+    allItems.push({key: 'source', label: 'Source', canBeSelected: false});
   }
 
   const getOption = ({
@@ -105,6 +116,7 @@ const ViewSelector = (): JSX.Element => {
   const items = allItems.map(item => ({
     key: item.key,
     disabled: !item.canBeSelected,
+    disabledText: item.disabledText,
     element: getOption(item),
     innerAction: getInnerActionForItem(item),
   }));

ui/packages/shared/profile/src/ProfileViewWithData.tsx

@@ -37,7 +37,7 @@ export const ProfileViewWithData = ({
   showVisualizationSelector,
 }: ProfileViewWithDataProps): JSX.Element => {
   const metadata = useGrpcMetadata();
-  const [dashboardItems] = useURLState<string[]>('dashboard_items', {
+  const [dashboardItems, setDashboardItems] = useURLState<string[]>('dashboard_items', {
     alwaysReturnArray: true,
   });
   const [sourceBuildID] = useURLState<string>('source_buildid');
@@ -58,6 +58,23 @@ export const ProfileViewWithData = ({
 
   const [pprofDownloading, setPprofDownloading] = useState<boolean>(false);
 
+  useEffect(() => {
+    // If profile type is not delta, remove iciclechart from the dashboard items
+    // and set it to icicle if no other items are selected.
+    if (profileSource == null) {
+      return;
+    }
+    const profileType = profileSource.ProfileType();
+    let newDashboardItems = dashboardItems;
+    if (dashboardItems.includes('iciclechart') && !profileType.delta) {
+      newDashboardItems = dashboardItems.filter(item => item !== 'iciclechart');
+    }
+    if (newDashboardItems.length === 0) {
+      newDashboardItems = ['icicle'];
+    }
+    setDashboardItems(newDashboardItems);
+  }, [profileSource, dashboardItems, setDashboardItems]);
+
   const nodeTrimThreshold = useMemo(() => {
     let width =
       // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions