[SearchProfiler] Minor fixes

x-pack/plugins/searchprofiler/public/application/components/profile_tree/__tests__/profile_tree.test.tsx → x-pack/plugins/searchprofiler/public/application/components/profile_tree/__jest__/profile_tree.test.tsx

@@ -14,6 +14,7 @@ describe('ProfileTree', () => {
       onHighlight: () => {},
       target: 'searches',
       data: searchResponse,
+      onDataInitError: jest.fn(),
     };
     const init = registerTestBed(ProfileTree);
     await init(props);
@@ -24,10 +25,12 @@ describe('ProfileTree', () => {
     const props: Props = {
       onHighlight: () => {},
       target: 'searches',
+      onDataInitError: jest.fn(),
       data: [{}] as any,
     };
 
     const init = registerTestBed(ProfileTree);
     await init(props);
+    expect(props.onDataInitError).toHaveBeenCalled();
   });
 });

x-pack/plugins/searchprofiler/public/application/components/profile_tree/profile_tree.tsx

@@ -17,9 +17,10 @@ export interface Props {
   target: Targets;
   data: ShardSerialized[] | null;
   onHighlight: (args: OnHighlightChangeArgs) => void;
+  onDataInitError: (error: Error) => void;
 }
 
-export const ProfileTree = memo(({ data, target, onHighlight }: Props) => {
+export const ProfileTree = memo(({ data, target, onHighlight, onDataInitError }: Props) => {
   if (!data || data.length === 0) {
     return null;
   }
@@ -28,8 +29,7 @@ export const ProfileTree = memo(({ data, target, onHighlight }: Props) => {
   try {
     sortedIndices = initDataFor(target)(data);
   } catch (e) {
-    // eslint-disable-next-line no-console
-    console.error(e);
+    onDataInitError(e);
     return null;
   }
 

x-pack/plugins/searchprofiler/public/application/components/profile_tree/shard_details/shard_details.tsx

@@ -18,10 +18,24 @@ interface Props {
   operations: Operation[];
 }
 
+const hasVisibleOperation = (ops: Operation[]): boolean => {
+  for (const op of ops) {
+    if (op.visible) {
+      return true;
+    }
+    if (op.children?.length && hasVisibleOperation(op.children)) {
+      return true;
+    }
+  }
+  return false;
+};
+
 export const ShardDetails = ({ index, shard, operations }: Props) => {
   const { relative, time } = shard;
 
-  const [shardVisibility, setShardVisibility] = useState<boolean>(false);
+  const [shardVisibility, setShardVisibility] = useState<boolean>(() =>
+    hasVisibleOperation(operations.map(op => op.treeRoot ?? op))
+  );
 
   return (
     <>

x-pack/plugins/searchprofiler/public/application/containers/main/main.tsx

@@ -4,6 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { i18n } from '@kbn/i18n';
 import React, { useCallback } from 'react';
 
 import {
@@ -33,7 +34,7 @@ import { useProfilerActionContext, useProfilerReadContext } from '../../contexts
 import { hasAggregations, hasSearch } from '../../utils';
 
 export const Main = () => {
-  const { getLicenseStatus } = useAppContext();
+  const { getLicenseStatus, notifications } = useAppContext();
 
   const {
     activeTab,
@@ -42,8 +43,17 @@ export const Main = () => {
     pristine,
     profiling,
   } = useProfilerReadContext();
+
   const dispatch = useProfilerActionContext();
 
+  const handleProfileTreeError = (e: Error) => {
+    notifications.addError(e, {
+      title: i18n.translate('xpack.searchProfiler.profileTreeErrorRenderTitle', {
+        defaultMessage: 'Profile data cannot be parsed.',
+      }),
+    });
+  };
+
   const setActiveTab = useCallback(
     (target: Targets) => dispatch({ type: 'setActiveTab', value: target }),
     [dispatch]
@@ -70,7 +80,12 @@ export const Main = () => {
     if (activeTab) {
       return (
         <div className="prfDevTool__main__profiletree">
-          <ProfileTree onHighlight={onHighlight} target={activeTab} data={currentResponse} />
+          <ProfileTree
+            onDataInitError={handleProfileTreeError}
+            onHighlight={onHighlight}
+            target={activeTab}
+            data={currentResponse}
+          />
         </div>
       );
     }

x-pack/plugins/searchprofiler/public/application/hooks/use_request_profile.ts

@@ -22,7 +22,9 @@ interface ReturnValue {
 const extractProfilerErrorMessage = (e: any): string | undefined => {
   if (e.body?.attributes?.error?.reason) {
     const { reason, line, col } = e.body.attributes.error;
-    return `${reason} at line: ${line - 1} col: ${col}`;
+    if (typeof line === 'number' && typeof col === 'number') {
+      return `${reason} at line: ${line - 1} col: ${col}`;
+    }
   }
 
   if (e.body?.message) {

x-pack/plugins/searchprofiler/public/application/types.ts

@@ -49,7 +49,14 @@ export interface Operation {
   parent: Operation | null;
   children: Operation[];
 
-  // Only exists on top level
+  /**
+   * Only exists on top level.
+   *
+   * @remark
+   * For now, when we init profile data for rendering we take a top-level
+   * operation and designate it the root of the operations tree - this is not
+   * information we get from ES.
+   */
   treeRoot?: Operation;
 
   depth?: number;