@parca/profile 0.16.59 → 0.16.60

package/src/ProfileView.tsx

@@ -13,18 +13,20 @@
 
 import React, {useEffect, useMemo, useState} from 'react';
 
-import {parseParams} from '@parca/functions';
+import {getNewSpanColor, parseParams} from '@parca/functions';
 import useUIFeatureFlag from '@parca/functions/useUIFeatureFlag';
-import {QueryServiceClient, Flamegraph, Top, Callgraph} from '@parca/client';
+import {QueryServiceClient, Flamegraph, Top, Callgraph as CallgraphType} from '@parca/client';
 import {Button, Card, SearchNodes, useParcaTheme} from '@parca/components';
-import {Callgraph as CallgraphComponent} from './';
+import {Callgraph} from './';
 import {useContainerDimensions} from '@parca/dynamicsize';
+import {useAppSelector, selectDarkMode, selectSearchNodeString} from '@parca/store';
 
 import ProfileShareButton from './components/ProfileShareButton';
 import ProfileIcicleGraph from './ProfileIcicleGraph';
 import {ProfileSource} from './ProfileSource';
 import TopTable from './TopTable';
 import useDelayedLoader from './useDelayedLoader';
+import {scaleLinear} from 'd3';
 
 import './ProfileView.styles.css';
 
@@ -44,7 +46,7 @@ export interface TopTableData {
 
 interface CallgraphData {
   loading: boolean;
-  data?: Callgraph;
+  data?: CallgraphType;
   error?: any;
 }
 
@@ -107,6 +109,8 @@ export const ProfileView = ({
   const {ref, dimensions} = useContainerDimensions();
   const [curPath, setCurPath] = useState<string[]>([]);
   const {currentView, setCurrentView} = profileVisState;
+  const isDarkMode = useAppSelector(selectDarkMode);
+  const currentSearchString = useAppSelector(selectSearchNodeString);
 
   const [callgraphEnabled] = useUIFeatureFlag('callgraph');
 
@@ -166,138 +170,148 @@ export const ProfileView = ({
       return;
     }
     const router = parseParams(window.location.search);
-    navigateTo('/', {...router, ...{currentProfileView: view}});
+    navigateTo('/', {
+      ...router,
+      ...{currentProfileView: view},
+      ...{searchString: currentSearchString},
+    });
   };
 
+  const maxColor: string = getNewSpanColor(isDarkMode);
+  // TODO: fix colors for dark mode
+  const minColor: string = scaleLinear([isDarkMode ? 'black' : 'white', maxColor])(0.3);
+
+  const colorRange: [string, string] = [minColor, maxColor];
+
   return (
-    <div className="py-3">
-      <Card>
-        <Card.Body>
-          <div className="flex py-3 w-full">
-            <div className="w-2/5 flex space-x-4">
-              <div className="flex space-x-1">
-                {profileSource != null && queryClient != null ? (
-                  <ProfileShareButton
-                    queryRequest={profileSource.QueryRequest()}
-                    queryClient={queryClient}
-                  />
+    <>
+      <div className="py-3">
+        <Card>
+          <Card.Body>
+            <div className="flex py-3 w-full">
+              <div className="w-2/5 flex space-x-4">
+                <div className="flex space-x-1">
+                  {profileSource != null && queryClient != null ? (
+                    <ProfileShareButton
+                      queryRequest={profileSource.QueryRequest()}
+                      queryClient={queryClient}
+                    />
+                  ) : null}
+
+                  <Button
+                    color="neutral"
+                    onClick={e => {
+                      e.preventDefault();
+                      onDownloadPProf();
+                    }}
+                  >
+                    Download pprof
+                  </Button>
+                </div>
+
+                <SearchNodes />
+              </div>
+
+              <div className="flex ml-auto">
+                <div className="mr-3">
+                  <Button
+                    color="neutral"
+                    onClick={resetIcicleGraph}
+                    disabled={curPath.length === 0}
+                    className="whitespace-nowrap text-ellipsis"
+                  >
+                    Reset View
+                  </Button>
+                </div>
+
+                {callgraphEnabled ? (
+                  <div className="mr-3">
+                    <Button
+                      variant={`${currentView === 'callgraph' ? 'primary' : 'neutral'}`}
+                      onClick={() => switchProfileView('callgraph')}
+                      className="whitespace-nowrap text-ellipsis"
+                    >
+                      Callgraph
+                    </Button>
+                  </div>
                 ) : null}
 
                 <Button
-                  color="neutral"
-                  onClick={e => {
-                    e.preventDefault();
-                    onDownloadPProf();
-                  }}
+                  variant={`${currentView === 'table' ? 'primary' : 'neutral'}`}
+                  className="items-center rounded-tr-none rounded-br-none w-auto px-8 whitespace-nowrap text-ellipsis no-outline-on-buttons"
+                  onClick={() => switchProfileView('table')}
                 >
-                  Download pprof
+                  Table
                 </Button>
-              </div>
 
-              <SearchNodes />
-            </div>
+                <Button
+                  variant={`${currentView === 'both' ? 'primary' : 'neutral'}`}
+                  className="items-center rounded-tl-none rounded-tr-none rounded-bl-none rounded-br-none border-l-0 border-r-0 w-auto px-8 whitespace-nowrap no-outline-on-buttons text-ellipsis"
+                  onClick={() => switchProfileView('both')}
+                >
+                  Both
+                </Button>
 
-            <div className="flex ml-auto">
-              <div className="mr-3">
                 <Button
-                  color="neutral"
-                  onClick={resetIcicleGraph}
-                  disabled={curPath.length === 0}
-                  className="whitespace-nowrap text-ellipsis"
+                  variant={`${currentView === 'icicle' ? 'primary' : 'neutral'}`}
+                  className="items-center rounded-tl-none rounded-bl-none w-auto px-8 whitespace-nowrap text-ellipsis no-outline-on-buttons"
+                  onClick={() => switchProfileView('icicle')}
                 >
-                  Reset View
+                  Icicle Graph
                 </Button>
               </div>
-
-              {callgraphEnabled ? (
-                <div className="mr-3">
-                  <Button
-                    variant={`${currentView === 'callgraph' ? 'primary' : 'neutral'}`}
-                    onClick={() => switchProfileView('callgraph')}
-                    className="whitespace-nowrap text-ellipsis"
-                  >
-                    Call Graph
-                  </Button>
-                </div>
-              ) : null}
-
-              <Button
-                variant={`${currentView === 'table' ? 'primary' : 'neutral'}`}
-                className="items-center rounded-tr-none rounded-br-none w-auto px-8 whitespace-nowrap text-ellipsis no-outline-on-buttons"
-                onClick={() => switchProfileView('table')}
-              >
-                Table
-              </Button>
-
-              <Button
-                variant={`${currentView === 'both' ? 'primary' : 'neutral'}`}
-                className="items-center rounded-tl-none rounded-tr-none rounded-bl-none rounded-br-none border-l-0 border-r-0 w-auto px-8 whitespace-nowrap no-outline-on-buttons text-ellipsis"
-                onClick={() => switchProfileView('both')}
-              >
-                Both
-              </Button>
-
-              <Button
-                variant={`${currentView === 'icicle' ? 'primary' : 'neutral'}`}
-                className="items-center rounded-tl-none rounded-bl-none w-auto px-8 whitespace-nowrap text-ellipsis no-outline-on-buttons"
-                onClick={() => switchProfileView('icicle')}
-              >
-                Icicle Graph
-              </Button>
             </div>
-          </div>
-
-          <div ref={ref} className="flex space-x-4 justify-between w-full">
-            {currentView === 'icicle' && flamegraphData?.data != null && (
-              <div className="w-full">
-                <ProfileIcicleGraph
-                  curPath={curPath}
-                  setNewCurPath={setNewCurPath}
-                  graph={flamegraphData.data}
-                  sampleUnit={sampleUnit}
-                />
-              </div>
-            )}
 
-            {currentView === 'callgraph' && callgraphData?.data != null && (
-              <div className="w-full">
-                {dimensions?.width !== undefined && (
-                  <CallgraphComponent
-                    graph={callgraphData.data}
+            <div ref={ref} className="flex space-x-4 justify-between w-full">
+              {currentView === 'icicle' && flamegraphData?.data != null && (
+                <div className="w-full">
+                  <ProfileIcicleGraph
+                    curPath={curPath}
+                    setNewCurPath={setNewCurPath}
+                    graph={flamegraphData.data}
                     sampleUnit={sampleUnit}
-                    width={dimensions?.width}
                   />
-                )}
-              </div>
-            )}
-
-            {currentView === 'table' && topTableData != null && (
-              <div className="w-full">
-                <TopTable data={topTableData.data} sampleUnit={sampleUnit} />
-              </div>
-            )}
-
-            {currentView === 'both' && (
-              <>
-                <div className="w-1/2">
-                  <TopTable data={topTableData?.data} sampleUnit={sampleUnit} />
                 </div>
-
-                <div className="w-1/2">
-                  {flamegraphData != null && (
-                    <ProfileIcicleGraph
-                      curPath={curPath}
-                      setNewCurPath={setNewCurPath}
-                      graph={flamegraphData.data}
+              )}
+              {currentView === 'callgraph' && callgraphData?.data != null && (
+                <div className="w-full">
+                  {dimensions?.width !== undefined && (
+                    <Callgraph
+                      graph={callgraphData.data}
                       sampleUnit={sampleUnit}
+                      width={dimensions?.width}
+                      colorRange={colorRange}
                     />
                   )}
                 </div>
-              </>
-            )}
-          </div>
-        </Card.Body>
-      </Card>
-    </div>
+              )}
+              {currentView === 'table' && topTableData != null && (
+                <div className="w-full">
+                  <TopTable data={topTableData.data} sampleUnit={sampleUnit} />
+                </div>
+              )}
+              {currentView === 'both' && (
+                <>
+                  <div className="w-1/2">
+                    <TopTable data={topTableData?.data} sampleUnit={sampleUnit} />
+                  </div>
+
+                  <div className="w-1/2">
+                    {flamegraphData != null && (
+                      <ProfileIcicleGraph
+                        curPath={curPath}
+                        setNewCurPath={setNewCurPath}
+                        graph={flamegraphData.data}
+                        sampleUnit={sampleUnit}
+                      />
+                    )}
+                  </div>
+                </>
+              )}
+            </div>
+          </Card.Body>
+        </Card>
+      </div>
+    </>
   );
 };

package/dist/Callgraph/Edge/index.d.ts

@@ -1,23 +0,0 @@
-/// <reference types="react" />
-export interface IEdge {
-    source: number;
-    target: number;
-    color: string;
-    points: string;
-}
-interface Props {
-    edge: IEdge;
-    sourceNode: {
-        x: number;
-        y: number;
-    };
-    targetNode: {
-        x: number;
-        y: number;
-    };
-    xScale: (x: number) => number;
-    yScale: (y: number) => number;
-    nodeRadius: number;
-}
-declare const Edge: ({ edge, sourceNode, targetNode, xScale, yScale, nodeRadius }: Props) => JSX.Element;
-export default Edge;

package/dist/Callgraph/Edge/index.js

@@ -1,30 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-// 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 { Arrow } from 'react-konva';
-import { parseEdgePos } from '../utils';
-var Edge = function (_a) {
-    var edge = _a.edge, sourceNode = _a.sourceNode, targetNode = _a.targetNode, xScale = _a.xScale, yScale = _a.yScale, nodeRadius = _a.nodeRadius;
-    var points = edge.points, color = edge.color, source = edge.source, target = edge.target;
-    var scaledPoints = parseEdgePos({
-        pos: points,
-        xScale: xScale,
-        yScale: yScale,
-        source: [sourceNode.x, sourceNode.y],
-        target: [targetNode.x, targetNode.y],
-        nodeRadius: nodeRadius,
-        isSelfLoop: source === target,
-    });
-    return (_jsx(Arrow, { points: scaledPoints, bezier: true, stroke: color, strokeWidth: 3, pointerLength: 10, pointerWidth: 10, fill: color, opacity: 0.8 }));
-};
-export default Edge;

package/dist/Callgraph/Node/index.d.ts

@@ -1,20 +0,0 @@
-/// <reference types="react" />
-export interface INode {
-    id: number;
-    x: number;
-    y: number;
-    data: {
-        id: string;
-    };
-    color: string;
-    mouseX?: number;
-    mouseY?: number;
-}
-interface Props {
-    node: INode;
-    hoveredNode: INode | null;
-    setHoveredNode: (node: INode | null) => void;
-    nodeRadius: number;
-}
-declare const Node: ({ node, hoveredNode, setHoveredNode, nodeRadius: defaultRadius, }: Props) => JSX.Element;
-export default Node;

package/dist/Callgraph/Node/index.js

@@ -1,37 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import { jsx as _jsx } from "react/jsx-runtime";
-// 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 { Circle } from 'react-konva';
-var Node = function (_a) {
-    var node = _a.node, hoveredNode = _a.hoveredNode, setHoveredNode = _a.setHoveredNode, defaultRadius = _a.nodeRadius;
-    var id = node.data.id, x = node.x, y = node.y, color = node.color;
-    var hoverRadius = defaultRadius + 3;
-    var isHovered = Boolean(hoveredNode) && (hoveredNode === null || hoveredNode === void 0 ? void 0 : hoveredNode.data.id) === id;
-    return (_jsx(Circle, { x: +x, y: +y, draggable: true, radius: isHovered ? hoverRadius : defaultRadius, fill: color, onMouseOver: function () {
-            setHoveredNode(__assign(__assign({}, node), { mouseX: x, mouseY: y }));
-        }, onMouseOut: function () {
-            setHoveredNode(null);
-        } }));
-};
-export default Node;

package/src/Callgraph/Edge/index.tsx

@@ -1,59 +0,0 @@
-// 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 {Arrow} from 'react-konva';
-import {parseEdgePos} from '../utils';
-
-export interface IEdge {
-  source: number;
-  target: number;
-  color: string;
-  points: string;
-}
-interface Props {
-  edge: IEdge;
-  sourceNode: {x: number; y: number};
-  targetNode: {x: number; y: number};
-  xScale: (x: number) => number;
-  yScale: (y: number) => number;
-  nodeRadius: number;
-}
-
-const Edge = ({edge, sourceNode, targetNode, xScale, yScale, nodeRadius}: Props): JSX.Element => {
-  const {points, color, source, target} = edge;
-
-  const scaledPoints = parseEdgePos({
-    pos: points,
-    xScale,
-    yScale,
-    source: [sourceNode.x, sourceNode.y],
-    target: [targetNode.x, targetNode.y],
-    nodeRadius,
-    isSelfLoop: source === target,
-  });
-
-  return (
-    <Arrow
-      points={scaledPoints}
-      bezier={true}
-      stroke={color}
-      strokeWidth={3}
-      pointerLength={10}
-      pointerWidth={10}
-      fill={color}
-      opacity={0.8}
-    />
-  );
-};
-
-export default Edge;

package/src/Callgraph/Node/index.tsx

@@ -1,66 +0,0 @@
-// 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 {Circle} from 'react-konva';
-
-export interface INode {
-  id: number;
-  x: number;
-  y: number;
-  data: {id: string};
-  color: string;
-  mouseX?: number;
-  mouseY?: number;
-}
-
-interface Props {
-  node: INode;
-  hoveredNode: INode | null;
-  setHoveredNode: (node: INode | null) => void;
-  nodeRadius: number;
-}
-
-const Node = ({
-  node,
-  hoveredNode,
-  setHoveredNode,
-  nodeRadius: defaultRadius,
-}: Props): JSX.Element => {
-  const {
-    data: {id},
-    x,
-    y,
-    color,
-  } = node;
-
-  const hoverRadius = defaultRadius + 3;
-  const isHovered = Boolean(hoveredNode) && hoveredNode?.data.id === id;
-
-  return (
-    <Circle
-      x={+x}
-      y={+y}
-      draggable
-      radius={isHovered ? hoverRadius : defaultRadius}
-      fill={color}
-      onMouseOver={() => {
-        setHoveredNode({...node, mouseX: x, mouseY: y});
-      }}
-      onMouseOut={() => {
-        setHoveredNode(null);
-      }}
-    />
-  );
-};
-
-export default Node;