ui: Reading string from Arrow ArrayBuffers

ui/packages/shared/profile/src/GraphTooltipArrow/Content.tsx

@@ -33,7 +33,7 @@ import {
   FIELD_MAPPING_BUILD_ID,
   FIELD_MAPPING_FILE,
 } from '../ProfileIcicleGraph/IcicleGraphArrow';
-import {nodeLabel} from '../ProfileIcicleGraph/IcicleGraphArrow/utils';
+import {arrowToString, nodeLabel} from '../ProfileIcicleGraph/IcicleGraphArrow/utils';
 import {ProfileSource} from '../ProfileSource';
 import {useProfileViewContext} from '../ProfileView/ProfileViewContext';
 import {useQuery} from '../useQuery';
@@ -190,11 +190,13 @@ const TooltipMetaInfo = ({
   onCopy: () => void;
   navigateTo: NavigateFunction;
 }): React.JSX.Element => {
-  const mappingFile: string = table.getChild(FIELD_MAPPING_FILE)?.get(row) ?? '';
-  const mappingBuildID: string = table.getChild(FIELD_MAPPING_BUILD_ID)?.get(row) ?? '';
+  const mappingFile: string = arrowToString(table.getChild(FIELD_MAPPING_FILE)?.get(row)) ?? '';
+  const mappingBuildID: string =
+    arrowToString(table.getChild(FIELD_MAPPING_BUILD_ID)?.get(row)) ?? '';
   const locationAddress: bigint = table.getChild(FIELD_LOCATION_ADDRESS)?.get(row) ?? 0n;
   const locationLine: bigint = table.getChild(FIELD_LOCATION_LINE)?.get(row) ?? 0n;
-  const functionFilename: string = table.getChild(FIELD_FUNCTION_FILE_NAME)?.get(row) ?? '';
+  const functionFilename: string =
+    arrowToString(table.getChild(FIELD_FUNCTION_FILE_NAME)?.get(row)) ?? '';
   const functionStartLine: bigint = table.getChild(FIELD_FUNCTION_START_LINE)?.get(row) ?? 0n;
   const lineNumber =
     locationLine !== 0n ? locationLine : functionStartLine !== 0n ? functionStartLine : undefined;

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

@@ -28,7 +28,7 @@ import {
   FIELD_MAPPING_FILE,
 } from './index';
 import useNodeColor from './useNodeColor';
-import {nodeLabel} from './utils';
+import {arrowToString, nodeLabel} from './utils';
 
 export const RowHeight = 26;
 
@@ -188,8 +188,8 @@ export const IcicleNode = React.memo(function IcicleNodeNoMemo({
   const cumulativeColumn = table.getChild(FIELD_CUMULATIVE);
   const diffColumn = table.getChild(FIELD_DIFF);
   // get the actual values from the columns
-  const mappingFile: string | null = mappingColumn?.get(row);
-  const functionName: string | null = functionNameColumn?.get(row);
+  const mappingFile: string | null = arrowToString(mappingColumn?.get(row));
+  const functionName: string | null = arrowToString(functionNameColumn?.get(row));
   const cumulative: bigint = cumulativeColumn?.get(row);
   const diff: bigint | null = diffColumn?.get(row);
   const childRows: number[] = Array.from(table.getChild(FIELD_CHILDREN)?.get(row) ?? []);
@@ -199,8 +199,8 @@ export const IcicleNode = React.memo(function IcicleNodeNoMemo({
     case FIELD_FUNCTION_NAME:
       childRows.sort((a, b) => {
         // TODO: Support fallthrough to comparing addresses or something
-        const afn: string | null = functionNameColumn?.get(a);
-        const bfn: string | null = functionNameColumn?.get(b);
+        const afn: string | null = arrowToString(functionNameColumn?.get(a));
+        const bfn: string | null = arrowToString(functionNameColumn?.get(b));
         if (afn !== null && bfn !== null) {
           return afn.localeCompare(bfn);
         }

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

@@ -35,7 +35,7 @@ import GraphTooltipArrow from '../../GraphTooltipArrow';
 import GraphTooltipArrowContent from '../../GraphTooltipArrow/Content';
 import ColorStackLegend from './ColorStackLegend';
 import {IcicleNode, RowHeight, mappingColors} from './IcicleGraphNodes';
-import {extractFeature} from './utils';
+import {arrowToString, extractFeature} from './utils';
 
 export const FIELD_LABELS_ONLY = 'labels_only';
 export const FIELD_MAPPING_FILE = 'mapping_file';
@@ -103,7 +103,8 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({
           const len = mapping.dictionary.length;
           const entries: string[] = [];
           for (let i = 0; i < len; i++) {
-            entries.push(getLastItem(mapping.dictionary.get(i)) ?? '');
+            const fn = arrowToString(mapping.dictionary.get(i));
+            entries.push(getLastItem(fn) ?? '');
           }
           return entries;
         })
@@ -122,7 +123,7 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({
       }
       const len = fn.dictionary.length;
       for (let i = 0; i < len; i++) {
-        const fn: string | null = functionNamesDict?.get(i);
+        const fn: string | null = arrowToString(functionNamesDict?.get(i));
         if (fn?.startsWith('runtime') === true) {
           mappings.push('runtime');
           break;

ui/packages/shared/profile/src/ProfileIcicleGraph/IcicleGraphArrow/utils.ts

@@ -31,7 +31,7 @@ export function nodeLabel(
   level: number,
   showBinaryName: boolean
 ): string {
-  const functionName: string | null = table.getChild(FIELD_FUNCTION_NAME)?.get(row);
+  const functionName: string | null = arrowToString(table.getChild(FIELD_FUNCTION_NAME)?.get(row));
   const labelsOnly: boolean | null = table.getChild(FIELD_LABELS_ONLY)?.get(row);
   const pprofLabelPrefix = 'pprof_labels.';
   const labelColumnNames = table.schema.fields.filter(field =>
@@ -76,3 +76,13 @@ export const extractFeature = (mapping: string): Feature => {
 
   return {name: EVERYTHING_ELSE, type: FEATURE_TYPES.Misc};
 };
+
+export const arrowToString = (buffer: any): string | null => {
+  if (buffer == null || typeof buffer === 'string') {
+    return buffer;
+  }
+  if (ArrayBuffer.isView(buffer)) {
+    return String.fromCharCode.apply(null, buffer);
+  }
+  return '';
+};

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

@@ -18,7 +18,7 @@ import {Icon} from '@iconify/react';
 import {Table} from 'apache-arrow';
 
 import {Flamegraph} from '@parca/client';
-import {Button, Select, useURLState} from '@parca/components';
+import {Button, Select, useParcaContext, useURLState} from '@parca/components';
 import {useContainerDimensions} from '@parca/hooks';
 import {divide, selectQueryParam, type NavigateFunction} from '@parca/utilities';
 
@@ -114,6 +114,7 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
   setActionButtons,
   error,
 }: ProfileIcicleGraphProps): JSX.Element {
+  const {loader} = useParcaContext();
   const compareMode: boolean =
     selectQueryParam('compare_a') === 'true' && selectQueryParam('compare_b') === 'true';
   const {ref, dimensions} = useContainerDimensions();
@@ -177,6 +178,10 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
     );
   }, [navigateTo, table, curPath, setNewCurPath, setActionButtons]);
 
+  if (loading) {
+    return <div className="h-96">{loader}</div>;
+  }
+
   if (error != null) {
     console.error('Error: ', error);
     return <div className="flex justify-center p-10">An error occurred: {error.message}</div>;

ui/packages/shared/utilities/src/index.ts

@@ -98,7 +98,7 @@ export const isDevMode = (): boolean => {
   return process.env.NODE_ENV === 'development';
 };
 
-export const getLastItem = (thePath: string | undefined): string | undefined => {
+export const getLastItem = (thePath: string | undefined | null): string | undefined => {
   if (thePath === undefined || thePath === null || thePath === '') return;
 
   const index = thePath.lastIndexOf('/');