@parca/profile 0.16.232 → 0.16.233

package/src/MetricsGraph/index.tsx

@@ -43,7 +43,6 @@ interface Props {
   width?: number;
   height?: number;
   margin?: number;
-  marginRight?: number;
 }
 
 export interface HighlightedSeries {
@@ -75,7 +74,6 @@ const MetricsGraph = ({
   width = 0,
   height = 0,
   margin = 0,
-  marginRight = 0,
 }: Props): JSX.Element => {
   return (
     <RawMetricsGraph
@@ -90,7 +88,6 @@ const MetricsGraph = ({
       width={width}
       height={height}
       margin={margin}
-      marginRight={marginRight}
     />
   );
 };
@@ -118,7 +115,6 @@ export const RawMetricsGraph = ({
   width,
   height = 50,
   margin = 0,
-  marginRight = 0,
   sampleUnit,
 }: Props): JSX.Element => {
   const graph = useRef(null);
@@ -174,13 +170,14 @@ export const RawMetricsGraph = ({
   const xScale = d3
     .scaleUtc()
     .domain([from, to])
-    .range([0, width - margin - marginRight]);
+    .range([0, width - 2 * margin]);
 
   const yScale = d3
     .scaleLinear()
     // tslint:disable-next-line
     .domain([minY, maxY] as Iterable<d3.NumberValue>)
-    .range([height - margin, 0]);
+    .range([height - margin, 0])
+    .nice();
 
   const color = d3.scaleOrdinal(d3.schemeCategory10);
 
@@ -360,6 +357,7 @@ export const RawMetricsGraph = ({
   };
 
   const selected = findSelectedProfile();
+
   return (
     <>
       {highlighted != null && hovering && !dragging && pos[0] !== 0 && pos[1] !== 0 && (
@@ -408,6 +406,85 @@ export const RawMetricsGraph = ({
             )}
           </g>
           <g transform={`translate(${margin}, ${margin})`}>
+            <g className="y axis" textAnchor="end" fontSize="10" fill="none">
+              {yScale.ticks(5).map((d, i) => (
+                <>
+                  <g
+                    key={`tick-${i}`}
+                    className="tick"
+                    /* eslint-disable-next-line @typescript-eslint/restrict-template-expressions */
+                    transform={`translate(0, ${yScale(d)})`}
+                  >
+                    <line className="stroke-gray-300 dark:stroke-gray-500" x2={-6} />
+                    <text fill="currentColor" x={-9} dy={'0.32em'}>
+                      {valueFormatter(d, sampleUnit, 1)}
+                    </text>
+                  </g>
+                  <g key={`grid-${i}`}>
+                    <line
+                      className="stroke-gray-300 dark:stroke-gray-500"
+                      x1={xScale(from)}
+                      x2={xScale(to)}
+                      y1={yScale(d)}
+                      y2={yScale(d)}
+                    />
+                  </g>
+                </>
+              ))}
+              <line
+                className="stroke-gray-300 dark:stroke-gray-500"
+                x1={0}
+                x2={0}
+                y1={0}
+                y2={height - margin}
+              />
+              <line
+                className="stroke-gray-300 dark:stroke-gray-500"
+                x1={xScale(to)}
+                x2={xScale(to)}
+                y1={0}
+                y2={height - margin}
+              />
+            </g>
+            <g
+              className="x axis"
+              fill="none"
+              fontSize="10"
+              textAnchor="middle"
+              transform={`translate(0,${height - margin})`}
+            >
+              {xScale.ticks(5).map((d, i) => (
+                <>
+                  <g
+                    key={`tick-${i}`}
+                    className="tick"
+                    /* eslint-disable-next-line @typescript-eslint/restrict-template-expressions */
+                    transform={`translate(${xScale(d)}, 0)`}
+                  >
+                    <line y2={6} className="stroke-gray-300 dark:stroke-gray-500" />
+                    <text fill="currentColor" dy=".71em" y={9}>
+                      {formatDate(d, formatForTimespan(from, to))}
+                    </text>
+                  </g>
+                  <g key={`grid-${i}`}>
+                    <line
+                      className="stroke-gray-300 dark:stroke-gray-500"
+                      x1={xScale(d)}
+                      x2={xScale(d)}
+                      y1={0}
+                      y2={-height + margin}
+                    />
+                  </g>
+                </>
+              ))}
+              <line
+                className="stroke-gray-300 dark:stroke-gray-500"
+                x1={xScale(from)}
+                x2={xScale(to)}
+                y1={0}
+                y2={0}
+              />
+            </g>
             <g className="lines fill-transparent">
               {series.map((s, i) => (
                 <g key={i} className="line">
@@ -447,42 +524,6 @@ export const RawMetricsGraph = ({
                 <MetricsCircle cx={selected.x} cy={selected.y} radius={5} />
               </g>
             )}
-            <g
-              className="x axis"
-              fill="none"
-              fontSize="10"
-              textAnchor="middle"
-              transform={`translate(0,${height - margin})`}
-            >
-              {xScale.ticks(5).map((d, i) => (
-                <g
-                  key={i}
-                  className="tick"
-                  /* eslint-disable-next-line @typescript-eslint/restrict-template-expressions */
-                  transform={`translate(${xScale(d)}, 0)`}
-                >
-                  <line y2={6} stroke="currentColor" />
-                  <text fill="currentColor" dy=".71em" y={9}>
-                    {formatDate(d, formatForTimespan(from, to))}
-                  </text>
-                </g>
-              ))}
-            </g>
-            <g className="y axis" textAnchor="end" fontSize="10" fill="none">
-              {yScale.ticks(3).map((d, i) => (
-                <g
-                  key={i}
-                  className="tick"
-                  /* eslint-disable-next-line @typescript-eslint/restrict-template-expressions */
-                  transform={`translate(0, ${yScale(d)})`}
-                >
-                  <line stroke="currentColor" x2={-6} />
-                  <text fill="currentColor" x={-9} dy={'0.32em'}>
-                    {valueFormatter(d, sampleUnit, 1)}
-                  </text>
-                </g>
-              ))}
-            </g>
           </g>
         </svg>
       </div>

package/src/MetricsGraph/useMetricsGraphDimensions.ts

@@ -20,7 +20,6 @@ interface MetricsGraphDimensions {
   height: number;
   heightStyle: string;
   margin: number;
-  marginRight: number;
 }
 
 const maxHeight = 402;
@@ -35,7 +34,6 @@ export const useMetricsGraphDimensions = (comparing: boolean): MetricsGraphDimen
       height: 0,
       heightStyle: '0',
       margin: 0,
-      marginRight: 0,
     };
   }
   width = width - profileExplorer.PaddingX;
@@ -43,7 +41,6 @@ export const useMetricsGraphDimensions = (comparing: boolean): MetricsGraphDimen
     width = width / 2 - 32;
   }
   const height = Math.min(width / 2.5, maxHeight);
-  const marginRight = 20;
   const heightStyle = `min(${maxHeight + margin}px, ${
     comparing
       ? profileExplorer.metricsGraph.maxHeightStyle.compareMode
@@ -54,6 +51,5 @@ export const useMetricsGraphDimensions = (comparing: boolean): MetricsGraphDimen
     height,
     heightStyle,
     margin,
-    marginRight,
   };
 };

package/src/ProfileExplorer/ProfileExplorerCompare.tsx

@@ -12,6 +12,7 @@
 // limitations under the License.
 
 import {QueryServiceClient} from '@parca/client';
+import {Card} from '@parca/components';
 import {Query} from '@parca/parser';
 import type {NavigateFunction} from '@parca/utilities';
 
@@ -57,8 +58,8 @@ const ProfileExplorerCompare = ({
 
   return (
     <>
-      <div className="grid grid-cols-2">
-        <div className="pr-2">
+      <div className="flex justify-between gap-2">
+        <Card className="p-2">
           <ProfileSelector
             queryClient={queryClient}
             querySelection={queryA}
@@ -70,8 +71,8 @@ const ProfileExplorerCompare = ({
             comparing={true}
             onCompareProfile={() => {}}
           />
-        </div>
-        <div className="pl-2">
+        </Card>
+        <Card className="p-2">
           <ProfileSelector
             queryClient={queryClient}
             querySelection={queryB}
@@ -83,17 +84,21 @@ const ProfileExplorerCompare = ({
             comparing={true}
             onCompareProfile={() => {}}
           />
-        </div>
+        </Card>
       </div>
       <div className="grid grid-cols-1">
         {profileA != null && profileB != null ? (
-          <ProfileViewWithData
-            navigateTo={navigateTo}
-            queryClient={queryClient}
-            profileSource={
-              new ProfileDiffSource(profileA.ProfileSource(), profileB.ProfileSource())
-            }
-          />
+          <div className="mt-2">
+            <Card className="px-6 py-4">
+              <ProfileViewWithData
+                navigateTo={navigateTo}
+                queryClient={queryClient}
+                profileSource={
+                  new ProfileDiffSource(profileA.ProfileSource(), profileB.ProfileSource())
+                }
+              />
+            </Card>
+          </div>
         ) : (
           <div>
             <div className="my-20 text-center">

package/src/ProfileExplorer/ProfileExplorerSingle.tsx

@@ -12,6 +12,7 @@
 // limitations under the License.
 
 import {QueryServiceClient} from '@parca/client';
+import {Card} from '@parca/components';
 import type {NavigateFunction} from '@parca/utilities';
 
 import {ProfileSelection, ProfileViewWithData} from '..';
@@ -38,34 +39,32 @@ const ProfileExplorerSingle = ({
 }: ProfileExplorerSingleProps): JSX.Element => {
   return (
     <>
-      <div className="grid grid-cols-1">
-        <div>
-          <ProfileSelector
-            queryClient={queryClient}
-            querySelection={query}
-            selectQuery={selectQuery}
-            selectProfile={selectProfile}
-            closeProfile={() => {}} // eslint-disable-line @typescript-eslint/no-empty-function
-            profileSelection={profile}
-            comparing={false}
-            onCompareProfile={compareProfile}
-            enforcedProfileName={''} // TODO
-          />
-        </div>
-      </div>
-      <div className="grid grid-cols-1">
-        <div>
-          {profile != null ? (
+      <Card className="px-6 py-4">
+        <ProfileSelector
+          queryClient={queryClient}
+          querySelection={query}
+          selectQuery={selectQuery}
+          selectProfile={selectProfile}
+          closeProfile={() => {}} // eslint-disable-line @typescript-eslint/no-empty-function
+          profileSelection={profile}
+          comparing={false}
+          onCompareProfile={compareProfile}
+          enforcedProfileName={''} // TODO
+        />
+      </Card>
+      {profile != null ? (
+        <div className="mt-2">
+          <Card className="px-6 py-4">
             <ProfileViewWithData
               queryClient={queryClient}
               profileSource={profile.ProfileSource()}
               navigateTo={navigateTo}
             />
-          ) : (
-            <></>
-          )}
+          </Card>
         </div>
-      </div>
+      ) : (
+        <></>
+      )}
     </>
   );
 };

package/src/ProfileIcicleGraph/index.tsx

@@ -158,10 +158,9 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
     }
     setActionButtons(
       <div className="flex w-full justify-end gap-2 pb-2">
-        <div className="flex w-full items-center justify-between space-x-2">
+        <div className="ml-2 flex w-full items-end justify-between gap-2">
           {table !== undefined && <GroupAndSortActionButtons navigateTo={navigateTo} />}
           <div>
-            <label className="inline-block"></label>
             <Button
               color="neutral"
               onClick={() => setNewCurPath([])}

package/src/ProfileMetricsGraph/index.tsx

@@ -115,7 +115,7 @@ const ProfileMetricsGraph = ({
   const {isLoading, response, error} = useQueryRange(queryClient, queryExpression, from, to);
   const isLoaderVisible = useDelayedLoader(isLoading);
   const {loader, onError, perf} = useParcaContext();
-  const {width, height, margin, marginRight} = useMetricsGraphDimensions(comparing);
+  const {width, height, margin} = useMetricsGraphDimensions(comparing);
 
   useEffect(() => {
     if (error !== null) {
@@ -156,10 +156,7 @@ const ProfileMetricsGraph = ({
     };
 
     return (
-      <div
-        className="h-full w-full rounded border-gray-300 dark:border-gray-500 dark:bg-gray-700"
-        style={{borderWidth: 1}}
-      >
+      <div className="h-full w-full">
         <MetricsGraph
           data={series}
           from={from}
@@ -172,7 +169,6 @@ const ProfileMetricsGraph = ({
           height={height}
           width={width}
           margin={margin}
-          marginRight={marginRight}
         />
       </div>
     );

package/src/ProfileSelector/index.tsx

@@ -19,7 +19,6 @@ import {ProfileTypesResponse, QueryServiceClient} from '@parca/client';
 import {
   Button,
   ButtonGroup,
-  Card,
   DateTimeRange,
   DateTimeRangePicker,
   IconButton,
@@ -198,59 +197,69 @@ const ProfileSelector = ({
 
   const compareDisabled = selectedProfileName === '' || querySelection.expression === undefined;
 
-  return (
-    <Card className="overflow-visible">
-      <Card.Header className="flex !items-center space-x-2">
-        <div className="flex w-full flex-wrap items-center justify-start space-x-2 space-y-1">
-          <div className="ml-2 mt-1">
-            <ProfileTypeSelector
-              profileTypesData={profileTypesData}
-              loading={profileTypesLoading}
-              selectedKey={selectedProfileName}
-              onSelection={setProfileName}
-              error={error}
-            />
-          </div>
-          <div className="w-full flex-1">
-            <MatchersInput
-              queryClient={queryClient}
-              setMatchersString={setMatchersString}
-              runQuery={setQueryExpression}
-              currentQuery={query}
-            />
-          </div>
+  const Header = (): JSX.Element => (
+    <div className="mb-2 flex">
+      <div className="flex w-full flex-wrap content-start items-end justify-between gap-2">
+        <div>
+          <label className="text-xs">Profile type</label>
+          <ProfileTypeSelector
+            profileTypesData={profileTypesData}
+            loading={profileTypesLoading}
+            selectedKey={selectedProfileName}
+            onSelection={setProfileName}
+            error={error}
+          />
+        </div>
+
+        <div className="w-full flex-1">
+          <label className="text-xs">Query</label>
+          <MatchersInput
+            queryClient={queryClient}
+            setMatchersString={setMatchersString}
+            runQuery={setQueryExpression}
+            currentQuery={query}
+          />
+        </div>
+        <div>
+          <label className="text-xs">Period</label>
           <DateTimeRangePicker
             onRangeSelection={setTimeRangeSelection}
             range={timeRangeSelection}
           />
-          <ButtonGroup>
-            {!searchDisabled && (
-              <>
-                {!comparing && (
-                  <CompareButton disabled={compareDisabled} onClick={handleCompareClick} />
-                )}
-              </>
-            )}
-            <Button
-              disabled={searchDisabled}
-              onClick={(e: React.MouseEvent<HTMLElement>) => {
-                e.preventDefault();
-                setQueryExpression();
-              }}
-            >
-              Search
-            </Button>
-          </ButtonGroup>
         </div>
-        <div>{comparing && <IconButton onClick={() => closeProfile()} icon={<CloseIcon />} />}</div>
-      </Card.Header>
-      {
-        <Card.Body>
-          <div style={{height: heightStyle}}>
-            {querySelection.expression !== undefined &&
-            querySelection.expression.length > 0 &&
-            querySelection.from !== undefined &&
-            querySelection.to !== undefined ? (
+        <ButtonGroup>
+          {!searchDisabled && (
+            <>
+              {!comparing && (
+                <CompareButton disabled={compareDisabled} onClick={handleCompareClick} />
+              )}
+            </>
+          )}
+          <Button
+            disabled={searchDisabled}
+            onClick={(e: React.MouseEvent<HTMLElement>) => {
+              e.preventDefault();
+              setQueryExpression();
+            }}
+          >
+            Search
+          </Button>
+        </ButtonGroup>
+      </div>
+      <div>{comparing && <IconButton onClick={() => closeProfile()} icon={<CloseIcon />} />}</div>
+    </div>
+  );
+
+  return (
+    <>
+      <Header />
+      <div className="rounded bg-white shadow dark:border-gray-500 dark:bg-gray-700">
+        <div style={{height: heightStyle}}>
+          {querySelection.expression !== undefined &&
+          querySelection.expression.length > 0 &&
+          querySelection.from !== undefined &&
+          querySelection.to !== undefined ? (
+            <div className="p-2">
               <ProfileMetricsGraph
                 queryClient={queryClient}
                 queryExpression={querySelection.expression}
@@ -294,19 +303,21 @@ const ProfileSelector = ({
                   selectProfile(new MergedProfileSelection(mergeFrom, mergeTo, query));
                 }}
               />
-            ) : (
-              <>
-                {profileSelection == null ? (
+            </div>
+          ) : (
+            <>
+              {profileSelection == null ? (
+                <div className="p-2">
                   <ProfileMetricsEmptyState
                     message={`Please select a profile type and click "Search" to begin.`}
                   />
-                ) : null}
-              </>
-            )}
-          </div>
-        </Card.Body>
-      }
-    </Card>
+                </div>
+              ) : null}
+            </>
+          )}
+        </div>
+      </div>
+    </>
   );
 };
 

package/src/ProfileTypeSelector/index.tsx

@@ -175,8 +175,9 @@ const ProfileTypeSelector = ({
       items={profileLabels}
       selectedKey={selectedKey}
       onSelection={onSelection}
-      placeholder="Select profile..."
+      placeholder="Select profile type..."
       loading={loading}
+      className="bg-white"
     />
   );
 };

package/src/ProfileView/ViewSelector.tsx

@@ -23,6 +23,7 @@ interface Props {
   primary?: boolean;
   addView?: boolean;
   disabled?: boolean;
+  icon?: JSX.Element;
 }
 
 const ViewSelector = ({
@@ -33,6 +34,7 @@ const ViewSelector = ({
   primary = false,
   addView = false,
   disabled = false,
+  icon,
 }: Props): JSX.Element => {
   const [callgraphEnabled] = useUIFeatureFlag('callgraph');
   const [dashboardItems = ['icicle'], setDashboardItems] = useURLState({
@@ -114,6 +116,7 @@ const ViewSelector = ({
       placeholder={placeholderText ?? 'Select view type...'}
       primary={primary}
       disabled={disabled}
+      icon={icon}
     />
   );
 };

package/src/ProfileView/VisualizationPanel.tsx

@@ -50,22 +50,25 @@ export const VisualizationPanel = React.memo(function VisualizationPanel({
 
   return (
     <>
-      <div className="flex w-full justify-end gap-2 pb-2">
-        <div className="flex w-full items-center justify-between">
-          <div className="flex">
+      <div className="flex w-full items-start justify-end gap-2 pb-2">
+        <div className="flex w-full items-start justify-between">
+          <div className="flex items-start">
             <div
               className={cx(isMultiPanelView ? 'visible' : 'invisible', 'flex items-center')}
               {...dragHandleProps}
             >
               <Icon className="text-xl" icon="material-symbols:drag-indicator" />
             </div>
-            <>{actionButtons}</>
+            <div>{actionButtons}</div>
           </div>
           <ViewSelector defaultValue={dashboardItem} navigateTo={navigateTo} position={index} />
         </div>
-
         {isMultiPanelView && (
-          <IconButton onClick={() => handleClosePanel(dashboardItem)} icon={<CloseIcon />} />
+          <IconButton
+            className="py-0"
+            onClick={() => handleClosePanel(dashboardItem)}
+            icon={<CloseIcon />}
+          />
         )}
       </div>
       {getDashboardItemByType({