@parca/profile 0.16.335 → 0.16.336

package/src/ProfileView/index.tsx

@@ -53,7 +53,6 @@ import {ProfileSource} from '../ProfileSource';
 import {SourceView} from '../SourceView';
 import Table from '../Table';
 import ProfileShareButton from '../components/ProfileShareButton';
-import useDelayedLoader from '../useDelayedLoader';
 import FilterByFunctionButton from './FilterByFunctionButton';
 import {ProfileViewContextProvider} from './ProfileViewContext';
 import ViewSelector from './ViewSelector';
@@ -153,8 +152,7 @@ export const ProfileView = ({
   const isDarkMode = useAppSelector(selectDarkMode);
   const isMultiPanelView = dashboardItems.length > 1;
 
-  const {loader, perf, profileViewExternalMainActions, profileViewExternalSubActions} =
-    useParcaContext();
+  const {perf, profileViewExternalMainActions, profileViewExternalSubActions} = useParcaContext();
 
   useEffect(() => {
     // Reset the current path when the profile source changes
@@ -169,31 +167,6 @@ export const ProfileView = ({
     void loadGraphviz();
   }, []);
 
-  const isLoading = useMemo(() => {
-    if (dashboardItems.includes('icicle')) {
-      return Boolean(flamegraphData?.loading);
-    }
-    if (dashboardItems.includes('callgraph')) {
-      return Boolean(callgraphData?.loading) || Boolean(callgraphSVG === undefined);
-    }
-    if (dashboardItems.includes('table')) {
-      return Boolean(topTableData?.loading);
-    }
-    if (dashboardItems.includes('source')) {
-      return Boolean(sourceData?.loading);
-    }
-    return false;
-  }, [
-    dashboardItems,
-    callgraphData?.loading,
-    flamegraphData?.loading,
-    topTableData?.loading,
-    sourceData?.loading,
-    callgraphSVG,
-  ]);
-
-  const isLoaderVisible = useDelayedLoader(isLoading);
-
   const maxColor: string = getNewSpanColor(isDarkMode);
   const minColor: string = scaleLinear([isDarkMode ? 'black' : 'white', maxColor])(0.3);
   const colorRange: [string, string] = [minColor, maxColor];
@@ -269,6 +242,7 @@ export const ProfileView = ({
               loading={flamegraphData.loading}
               setActionButtons={setActionButtons}
               error={flamegraphData.error}
+              isHalfScreen={isHalfScreen}
               width={
                 dimensions?.width !== undefined
                   ? isHalfScreen
@@ -305,6 +279,7 @@ export const ProfileView = ({
             navigateTo={navigateTo}
             setActionButtons={setActionButtons}
             currentSearchString={currentSearchString as string}
+            isHalfScreen={isHalfScreen}
           />
         ) : (
           <></>
@@ -432,59 +407,55 @@ export const ProfileView = ({
         </div>
 
         <div className="w-full" ref={ref}>
-          {isLoaderVisible ? (
-            <>{loader}</>
-          ) : (
-            <DragDropContext onDragEnd={onDragEnd}>
-              <Droppable droppableId="droppable" direction="horizontal">
-                {provided => (
-                  <div
-                    ref={provided.innerRef}
-                    className={cx(
-                      'grid w-full gap-2',
-                      isMultiPanelView ? 'grid-cols-2' : 'grid-cols-1'
-                    )}
-                    {...provided.droppableProps}
-                  >
-                    {dashboardItems.map((dashboardItem, index) => {
-                      return (
-                        <Draggable
-                          key={dashboardItem}
-                          draggableId={dashboardItem}
-                          index={index}
-                          isDragDisabled={!isMultiPanelView}
-                        >
-                          {(provided, snapshot: {isDragging: boolean}) => (
-                            <div
-                              ref={provided.innerRef}
-                              {...provided.draggableProps}
-                              key={dashboardItem}
-                              className={cx(
-                                'min-h-[200px] w-full rounded p-2 shadow dark:border dark:border-gray-700 dark:bg-gray-700',
-                                snapshot.isDragging
-                                  ? 'bg-gray-200 dark:bg-gray-500'
-                                  : 'bg-white dark:bg-gray-700'
-                              )}
-                            >
-                              <VisualizationPanel
-                                handleClosePanel={handleClosePanel}
-                                isMultiPanelView={isMultiPanelView}
-                                dashboardItem={dashboardItem}
-                                getDashboardItemByType={getDashboardItemByType}
-                                dragHandleProps={provided.dragHandleProps}
-                                navigateTo={navigateTo}
-                                index={index}
-                              />
-                            </div>
-                          )}
-                        </Draggable>
-                      );
-                    })}
-                  </div>
-                )}
-              </Droppable>
-            </DragDropContext>
-          )}
+          <DragDropContext onDragEnd={onDragEnd}>
+            <Droppable droppableId="droppable" direction="horizontal">
+              {provided => (
+                <div
+                  ref={provided.innerRef}
+                  className={cx(
+                    'grid w-full gap-2',
+                    isMultiPanelView ? 'grid-cols-2' : 'grid-cols-1'
+                  )}
+                  {...provided.droppableProps}
+                >
+                  {dashboardItems.map((dashboardItem, index) => {
+                    return (
+                      <Draggable
+                        key={dashboardItem}
+                        draggableId={dashboardItem}
+                        index={index}
+                        isDragDisabled={!isMultiPanelView}
+                      >
+                        {(provided, snapshot: {isDragging: boolean}) => (
+                          <div
+                            ref={provided.innerRef}
+                            {...provided.draggableProps}
+                            key={dashboardItem}
+                            className={cx(
+                              'w-full rounded p-2 shadow dark:border dark:border-gray-700 dark:bg-gray-700 min-h-96',
+                              snapshot.isDragging
+                                ? 'bg-gray-200 dark:bg-gray-500'
+                                : 'bg-white dark:bg-gray-700'
+                            )}
+                          >
+                            <VisualizationPanel
+                              handleClosePanel={handleClosePanel}
+                              isMultiPanelView={isMultiPanelView}
+                              dashboardItem={dashboardItem}
+                              getDashboardItemByType={getDashboardItemByType}
+                              dragHandleProps={provided.dragHandleProps}
+                              navigateTo={navigateTo}
+                              index={index}
+                            />
+                          </div>
+                        )}
+                      </Draggable>
+                    );
+                  })}
+                </div>
+              )}
+            </Droppable>
+          </DragDropContext>
         </div>
       </ProfileViewContextProvider>
     </KeyDownProvider>

package/src/SourceView/index.tsx

@@ -14,9 +14,10 @@
 import React, {useEffect} from 'react';
 
 import {tableFromIPC} from 'apache-arrow';
+import {AnimatePresence, motion} from 'framer-motion';
 
 import {Source} from '@parca/client';
-import {useParcaContext, useURLState} from '@parca/components';
+import {SourceSkeleton, useParcaContext, useURLState} from '@parca/components';
 
 import {ExpandOnHover} from '../GraphTooltipArrow/ExpandOnHoverValue';
 import {truncateStringReverse} from '../utils';
@@ -38,7 +39,7 @@ export const SourceView = React.memo(function SourceView({
   setActionButtons,
 }: SourceViewProps): JSX.Element {
   const [sourceFileName] = useURLState({param: 'source_filename', navigateTo: () => {}});
-  const {loader} = useParcaContext();
+  const {isDarkMode} = useParcaContext();
 
   useEffect(() => {
     setActionButtons?.(
@@ -52,7 +53,11 @@ export const SourceView = React.memo(function SourceView({
   }, [sourceFileName, setActionButtons]);
 
   if (loading) {
-    return <div className="h-96">{loader}</div>;
+    return (
+      <div className="h-auto overflow-clip">
+        <SourceSkeleton isDarkMode={isDarkMode} />
+      </div>
+    );
   }
 
   if (data === undefined) {
@@ -64,11 +69,21 @@ export const SourceView = React.memo(function SourceView({
   const flat = table.getChild('flat');
 
   return (
-    <Highlighter
-      file={sourceFileName as string}
-      content={data.source}
-      renderer={profileAwareRenderer(cumulative, flat, total, filtered)}
-    />
+    <AnimatePresence>
+      <motion.div
+        className="h-full w-full"
+        key="source-view-loaded"
+        initial={{display: 'none', opacity: 0}}
+        animate={{display: 'block', opacity: 1}}
+        transition={{duration: 0.5}}
+      >
+        <Highlighter
+          file={sourceFileName as string}
+          content={data.source}
+          renderer={profileAwareRenderer(cumulative, flat, total, filtered)}
+        />
+      </motion.div>
+    </AnimatePresence>
   );
 });
 

package/src/Table/ColumnsVisibility.tsx

@@ -0,0 +1,87 @@
+// Copyright 2022 The Parca Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import {Fragment} from 'react';
+
+import {Menu, Transition} from '@headlessui/react';
+import {Icon} from '@iconify/react';
+import {type VisibilityState} from '@tanstack/react-table';
+
+import {ColumnDef} from '.';
+
+const ColumnsVisibility = ({
+  columns,
+  visibility,
+  setVisibility,
+}: {
+  columns: ColumnDef[];
+  visibility: VisibilityState;
+  setVisibility: (id: string, visible: boolean) => void;
+}): React.JSX.Element => {
+  return (
+    <div>
+      <Menu as="div" className="relative text-left">
+        <div>
+          <Menu.Button className="relative w-full cursor-default rounded-md border bg-white py-2 pl-3 pr-10 text-left text-sm shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-900 sm:text-sm">
+            <span className="block overflow-x-hidden text-ellipsis">Columns</span>
+            <span className="pointer-events-none absolute inset-y-0 right-0 ml-3 flex items-center pr-2 text-gray-400">
+              <Icon icon="heroicons:chevron-down-20-solid" aria-hidden="true" />
+            </span>
+          </Menu.Button>
+        </div>
+
+        <Transition
+          as={Fragment}
+          leave="transition ease-in duration-100"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <Menu.Items className="absolute left-0 z-10 mt-1 min-w-[400px] overflow-auto rounded-md bg-gray-50 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:ring-white dark:ring-opacity-20 sm:text-sm">
+            <div className="p-4">
+              <fieldset>
+                <div className="space-y-5">
+                  {columns.map(col => (
+                    <div key={col.id} className="relative flex items-start">
+                      <div className="flex h-6 items-center">
+                        <input
+                          id={col.id}
+                          name={col.id}
+                          type="checkbox"
+                          className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600"
+                          checked={visibility[col.id ?? ''] ?? false}
+                          onChange={() => {
+                            setVisibility(col.id ?? '', !visibility[col.id ?? '']);
+                          }}
+                        />
+                      </div>
+                      <div className="ml-3 text-sm leading-6">
+                        <label
+                          htmlFor={col.id}
+                          className="font-medium text-gray-900 dark:text-gray-200"
+                        >
+                          {col.header}
+                        </label>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </fieldset>
+            </div>
+          </Menu.Items>
+        </Transition>
+      </Menu>
+    </div>
+  );
+};
+
+export default ColumnsVisibility;

package/src/Table/index.tsx

@@ -11,14 +11,19 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React, {Fragment, useCallback, useEffect, useMemo, useState} from 'react';
+import React, {useCallback, useEffect, useMemo, useState} from 'react';
 
-import {Menu, Transition} from '@headlessui/react';
-import {Icon} from '@iconify/react';
-import {type VisibilityState} from '@tanstack/react-table';
 import {Vector, tableFromIPC} from 'apache-arrow';
+import {AnimatePresence, motion} from 'framer-motion';
 
-import {Button, Table as TableComponent, useURLState} from '@parca/components';
+import {
+  Button,
+  TableActionButtonPlaceholder,
+  Table as TableComponent,
+  TableSkeleton,
+  useParcaContext,
+  useURLState,
+} from '@parca/components';
 import {
   getLastItem,
   isSearchMatch,
@@ -29,6 +34,7 @@ import {
 
 import {useProfileViewContext} from '../ProfileView/ProfileViewContext';
 import {hexifyAddress} from '../utils';
+import ColumnsVisibility from './ColumnsVisibility';
 
 const FIELD_MAPPING_FILE = 'mapping_file';
 const FIELD_LOCATION_ADDRESS = 'location_address';
@@ -51,7 +57,7 @@ interface row {
   functionFileName: string;
 }
 
-interface ColumnDef {
+export interface ColumnDef {
   id: string;
   header: string;
   accessorKey: string;
@@ -71,6 +77,7 @@ interface TableProps {
   loading: boolean;
   currentSearchString?: string;
   setActionButtons?: (buttons: React.JSX.Element) => void;
+  isHalfScreen: boolean;
 }
 
 export const Table = React.memo(function Table({
@@ -82,10 +89,12 @@ export const Table = React.memo(function Table({
   loading,
   currentSearchString,
   setActionButtons,
+  isHalfScreen,
 }: TableProps): React.JSX.Element {
   const router = parseParams(window?.location.search);
   const [rawDashboardItems] = useURLState({param: 'dashboard_items'});
   const [filterByFunctionInput] = useURLState({param: 'filter_by_function'});
+  const {isDarkMode} = useParcaContext();
 
   const {compareMode} = useProfileViewContext();
 
@@ -298,9 +307,15 @@ export const Table = React.memo(function Table({
   }, [navigateTo, router, filterByFunctionInput]);
 
   useEffect(() => {
+    if (loading && setActionButtons !== undefined) {
+      setActionButtons(<TableActionButtonPlaceholder />);
+      return;
+    }
+
     if (setActionButtons === undefined) {
       return;
     }
+
     setActionButtons(
       <>
         <ColumnsVisibility
@@ -330,6 +345,7 @@ export const Table = React.memo(function Table({
     setActionButtons,
     columns,
     columnVisibility,
+    loading,
   ]);
 
   const initialSorting = useMemo(() => {
@@ -341,7 +357,13 @@ export const Table = React.memo(function Table({
     ];
   }, [compareMode]);
 
-  if (loading) return <div className="mx-auto text-center">Loading...</div>;
+  if (loading)
+    return (
+      <div className="overflow-clip h-[700px] min-h-[700px]">
+        <TableSkeleton isHalfScreen={isHalfScreen} isDarkMode={isDarkMode} />
+      </div>
+    );
+
   if (data === undefined) return <div className="mx-auto text-center">Profile has no samples</div>;
 
   const table = tableFromIPC(data);
@@ -380,87 +402,32 @@ export const Table = React.memo(function Table({
   }
 
   return (
-    <div className="relative">
-      <div className="font-robotoMono h-[80vh] w-full">
-        <TableComponent
-          data={rows}
-          columns={columns}
-          initialSorting={initialSorting}
-          columnVisibility={columnVisibility}
-          onRowClick={onRowClick}
-          enableHighlighting={enableHighlighting}
-          shouldHighlightRow={shouldHighlightRow}
-          usePointerCursor={dashboardItems.length > 1}
-        />
-      </div>
-    </div>
-  );
-});
-
-const ColumnsVisibility = ({
-  columns,
-  visibility,
-  setVisibility,
-}: {
-  columns: ColumnDef[];
-  visibility: VisibilityState;
-  setVisibility: (id: string, visible: boolean) => void;
-}): React.JSX.Element => {
-  return (
-    <div>
-      <Menu as="div" className="relative text-left">
-        <div>
-          <Menu.Button className="relative w-full cursor-default rounded-md border bg-white py-2 pl-3 pr-10 text-left text-sm shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-900 sm:text-sm">
-            <span className="ml-3 block overflow-x-hidden text-ellipsis">Columns</span>
-            <span className="pointer-events-none absolute inset-y-0 right-0 ml-3 flex items-center pr-2 text-gray-400">
-              <Icon icon="heroicons:chevron-down-20-solid" aria-hidden="true" />
-            </span>
-          </Menu.Button>
+    <AnimatePresence>
+      <motion.div
+        className="h-full w-full"
+        key="table-loaded"
+        initial={{display: 'none', opacity: 0}}
+        animate={{display: 'block', opacity: 1}}
+        transition={{duration: 0.5}}
+      >
+        <div className="relative">
+          <div className="font-robotoMono h-[80vh] w-full">
+            <TableComponent
+              data={rows}
+              columns={columns}
+              initialSorting={initialSorting}
+              columnVisibility={columnVisibility}
+              onRowClick={onRowClick}
+              enableHighlighting={enableHighlighting}
+              shouldHighlightRow={shouldHighlightRow}
+              usePointerCursor={dashboardItems.length > 1}
+            />
+          </div>
         </div>
-
-        <Transition
-          as={Fragment}
-          leave="transition ease-in duration-100"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <Menu.Items className="absolute left-0 z-10 mt-1 min-w-[400px] overflow-auto rounded-md bg-gray-50 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:ring-white dark:ring-opacity-20 sm:text-sm">
-            <div className="p-4">
-              <fieldset>
-                <div className="space-y-5">
-                  {columns.map(col => (
-                    <div key={col.id} className="relative flex items-start">
-                      <div className="flex h-6 items-center">
-                        <input
-                          id={col.id}
-                          name={col.id}
-                          type="checkbox"
-                          className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600"
-                          checked={visibility[col.id ?? ''] ?? false}
-                          onChange={() => {
-                            setVisibility(col.id ?? '', !visibility[col.id ?? '']);
-                          }}
-                        />
-                      </div>
-                      <div className="ml-3 text-sm leading-6">
-                        <label
-                          htmlFor={col.id}
-                          className="font-medium text-gray-900 dark:text-gray-200"
-                        >
-                          {col.header}
-                        </label>
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              </fieldset>
-            </div>
-          </Menu.Items>
-        </Transition>
-      </Menu>
-    </div>
+      </motion.div>
+    </AnimatePresence>
   );
-};
+});
 
 const addPlusSign = (num: string): string => {
   if (num.charAt(0) === '0' || num.charAt(0) === '-') {

package/dist/QueryBrowser/index.d.ts

@@ -1,12 +0,0 @@
-import { QueryServiceClient } from '@parca/client';
-import { DateTimeRange } from '@parca/components';
-import { QuerySelection } from '../ProfileSelector';
-interface Props {
-    queryClient: QueryServiceClient;
-    selectQuery: (query: QuerySelection) => void;
-    enforcedProfileName: string;
-    timeRangeSelection: DateTimeRange;
-    querySelection: QuerySelection;
-}
-declare const QueryBrowser: ({ queryClient, enforcedProfileName, timeRangeSelection, selectQuery, querySelection, }: Props) => import("react/jsx-runtime").JSX.Element;
-export default QueryBrowser;

package/dist/QueryBrowser/index.js

@@ -1,51 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import { Query } from '@parca/parser';
-import MatchersInput from '../MatchersInput';
-const QueryBrowser = ({ queryClient, enforcedProfileName, timeRangeSelection, selectQuery, querySelection, }) => {
-    const [queryExpressionString, setQueryExpressionString] = useState(querySelection.expression);
-    useEffect(() => {
-        if (enforcedProfileName !== '') {
-            const [q, changed] = Query.parse(querySelection.expression).setProfileName(enforcedProfileName);
-            if (changed) {
-                setQueryExpressionString(q.toString());
-                return;
-            }
-        }
-        setQueryExpressionString(querySelection.expression);
-    }, [enforcedProfileName, querySelection.expression]);
-    const enforcedProfileNameQuery = () => {
-        const pq = Query.parse(queryExpressionString);
-        const [q] = pq.setProfileName(enforcedProfileName);
-        return q;
-    };
-    const setMatchersString = (matchers) => {
-        const newExpressionString = `${''}{${matchers}}`;
-        setQueryExpressionString(newExpressionString);
-    };
-    const setNewQueryExpression = (expr) => {
-        const query = enforcedProfileName !== '' ? enforcedProfileNameQuery() : Query.parse(expr);
-        const delta = query.profileType().delta;
-        const from = timeRangeSelection.getFromMs();
-        const to = timeRangeSelection.getToMs();
-        const mergeParams = delta
-            ? {
-                mergeFrom: from,
-                mergeTo: to,
-            }
-            : {};
-        selectQuery({
-            expression: expr,
-            from,
-            to,
-            timeSelection: timeRangeSelection.getRangeKey(),
-            ...mergeParams,
-        });
-    };
-    const query = enforcedProfileName !== '' ? enforcedProfileNameQuery() : Query.parse(queryExpressionString);
-    const setQueryExpression = () => {
-        setNewQueryExpression(query.toString());
-    };
-    return (_jsx(_Fragment, { children: _jsx(MatchersInput, { queryClient: queryClient, setMatchersString: setMatchersString, runQuery: setQueryExpression, currentQuery: query }) }));
-};
-export default QueryBrowser;