@parca/profile 0.16.76 → 0.16.78

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.16.78](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.77...@parca/profile@0.16.78) (2022-12-06)
+
+**Note:** Version bump only for package @parca/profile
+
+## [0.16.77](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.76...@parca/profile@0.16.77) (2022-11-29)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.16.76](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.75...@parca/profile@0.16.76) (2022-11-29)
 
 **Note:** Version bump only for package @parca/profile

package/dist/Callgraph/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Callgraph as CallgraphType } from '@parca/client';
 export interface Props {
     graph: CallgraphType;

package/dist/GraphTooltip/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { CallgraphNode, FlamegraphNode, FlamegraphNodeMeta, FlamegraphRootNode } from '@parca/client';
 import { Function, Location, Mapping } from '@parca/client/dist/parca/metastore/v1alpha1/metastore';
 interface GraphTooltipProps {

package/dist/GraphTooltip/index.js

@@ -107,14 +107,13 @@ var TooltipMetaInfo = function (_a) {
         }
     }
     var getTextForFile = function (hoveringNode) {
-        var _a, _b, _c, _d;
-        if (hoveringNode.meta === undefined)
+        var _a, _b, _c, _d, _e;
+        if (((_a = hoveringNode.meta) === null || _a === void 0 ? void 0 : _a.function) == null)
             return '<unknown>';
-        // @ts-expect-error
-        return "".concat(hoveringNode.meta.function.filename, " ").concat(((_a = hoveringNode.meta.line) === null || _a === void 0 ? void 0 : _a.line) !== undefined && ((_b = hoveringNode.meta.line) === null || _b === void 0 ? void 0 : _b.line) !== '0'
+        return "".concat(hoveringNode.meta.function.filename, " ").concat(((_b = hoveringNode.meta.line) === null || _b === void 0 ? void 0 : _b.line) !== undefined && ((_c = hoveringNode.meta.line) === null || _c === void 0 ? void 0 : _c.line) !== '0'
             ? " +".concat(hoveringNode.meta.line.line.toString())
-            : "".concat(((_c = hoveringNode.meta.function) === null || _c === void 0 ? void 0 : _c.startLine) !== undefined &&
-                ((_d = hoveringNode.meta.function) === null || _d === void 0 ? void 0 : _d.startLine) !== '0'
+            : "".concat(((_d = hoveringNode.meta.function) === null || _d === void 0 ? void 0 : _d.startLine) !== undefined &&
+                ((_e = hoveringNode.meta.function) === null || _e === void 0 ? void 0 : _e.startLine) !== '0'
                 ? " +".concat(hoveringNode.meta.function.startLine)
                 : ''));
     };

package/dist/IcicleGraph.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Flamegraph, FlamegraphNode, FlamegraphRootNode } from '@parca/client';
 import { Mapping, Function, Location } from '@parca/client/dist/parca/metastore/v1alpha1/metastore';
 interface IcicleGraphProps {

package/dist/MatchersInput/SuggestionItem.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface Props {
     isHighlighted: boolean;
     onHighlight: () => void;

package/dist/MatchersInput/SuggestionsList.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare class Suggestion {
     type: string;
     typeahead: string;

package/dist/MatchersInput/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Query } from '@parca/parser';
 import { LabelsResponse, QueryServiceClient } from '@parca/client';
 interface MatchersInputProps {

package/dist/MetricsCircle/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface MetricsCircleProps {
     cx: number;
     cy: number;

package/dist/MetricsGraph/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SingleProfileSelection } from '..';
 import { MetricsSeries as MetricsSeriesPb, Label } from '@parca/client';
 import { DateTimeRange } from '@parca/components';

package/dist/MetricsSeries/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import * as d3 from 'd3';
 interface MetricsSeriesProps {
     data: any;

package/dist/ProfileExplorer/ProfileExplorerCompare.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ProfileSelection, NavigateFunction } from '..';
 import { QueryServiceClient } from '@parca/client';
 import { QuerySelection } from '../ProfileSelector';

package/dist/ProfileExplorer/ProfileExplorerSingle.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { QueryServiceClient } from '@parca/client';
 import { ProfileSelection, NavigateFunction } from '..';
 import { QuerySelection } from '../ProfileSelector';

package/dist/ProfileExplorer/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { NavigateFunction } from '..';
 import { QueryServiceClient } from '@parca/client';
 interface ProfileExplorerProps {

package/dist/{ProfileIcicleGraph.d.ts → ProfileIcicleGraph/index.d.ts}

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Flamegraph } from '@parca/client';
 interface ProfileIcicleGraphProps {
     width?: number;

package/dist/{ProfileIcicleGraph.js → ProfileIcicleGraph/index.js}

@@ -12,8 +12,8 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useAppSelector, selectCompareMode } from '@parca/store';
 import { useContainerDimensions } from '@parca/dynamicsize';
-import DiffLegend from './components/DiffLegend';
-import IcicleGraph from './IcicleGraph';
+import DiffLegend from '../components/DiffLegend';
+import IcicleGraph from '../IcicleGraph';
 var ProfileIcicleGraph = function (_a) {
     var graph = _a.graph, curPath = _a.curPath, setNewCurPath = _a.setNewCurPath, sampleUnit = _a.sampleUnit;
     var compareMode = useAppSelector(selectCompareMode);

package/dist/ProfileMetricsGraph/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ProfileSelection } from '..';
 import { QueryServiceClient, QueryRangeResponse } from '@parca/client';
 import { RpcError } from '@protobuf-ts/runtime-rpc';

package/dist/ProfileSelector/CompareButton.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare const CompareButton: ({ disabled, onClick, }: {
     disabled: boolean;
     onClick: () => void;

package/dist/ProfileSelector/MergeButton.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare const MergeButton: ({ disabled, onClick, }: {
     disabled: boolean;
     onClick: () => void;

package/dist/ProfileSelector/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { QueryServiceClient, ProfileTypesResponse } from '@parca/client';
 import { RpcError } from '@protobuf-ts/runtime-rpc';
 import { ProfileSelection } from '..';

package/dist/ProfileSource.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ProfileType } from '@parca/parser';
 import { Label, QueryRequest, ProfileDiffSelection } from '@parca/client';
 export interface ProfileSource {

package/dist/ProfileSource.js

@@ -60,7 +60,7 @@ var SingleProfileSelection = /** @class */ (function () {
     SingleProfileSelection.prototype.HistoryParams = function () {
         return {
             profile_name: this.profileName,
-            labels: this.labels.map(function (label) { return "".concat(label.name, "=").concat(label.value); }),
+            labels: this.labels.map(function (label) { return "".concat(label.name, "=").concat(encodeURIComponent(label.value)); }),
             time: this.time,
         };
     };

package/dist/ProfileTypeSelector/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ProfileType, ProfileTypesResponse } from '@parca/client';
 import { RpcError } from '@protobuf-ts/runtime-rpc';
 interface WellKnownProfile {

package/dist/ProfileView/FilterByFunctionButton.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 declare const FilterByFunctionButton: () => JSX.Element;
 export default FilterByFunctionButton;

package/dist/ProfileView/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { QueryServiceClient, Flamegraph, Top, Callgraph as CallgraphType } from '@parca/client';
 import { ProfileSource } from '../ProfileSource';
 import '../ProfileView.styles.css';

package/dist/ProfileViewWithData.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { QueryServiceClient } from '@parca/client';
 import { ProfileSource } from './ProfileSource';
 export type NavigateFunction = (path: string, queryParams: any) => void;

package/dist/TopTable.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TopNodeMeta, Top } from '@parca/client';
 import './TopTable.styles.css';
 interface TopTableProps {

package/dist/components/DiffLegend.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 declare const DiffLegend: () => JSX.Element;
 export default DiffLegend;

package/dist/components/ProfileShareButton/ResultBox.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface Props {
     value: string;
     className?: string;

package/dist/components/ProfileShareButton/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { QueryRequest, QueryServiceClient } from '@parca/client';
 interface Props {
     queryRequest: QueryRequest;

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.76",
+  "version": "0.16.78",
   "description": "Profile viewing libraries",
   "dependencies": {
-    "@parca/client": "^0.16.56",
-    "@parca/components": "^0.16.67",
+    "@parca/client": "^0.16.57",
+    "@parca/components": "^0.16.68",
     "@parca/dynamicsize": "^0.16.51",
     "@parca/functions": "^0.16.53",
     "@parca/parser": "^0.16.51",
@@ -42,5 +42,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "8e5664f7075f265960e7e0c77e14cc6fc58121e9"
+  "gitHead": "f9d9dea9b3c3c2c7f8ca3e53b8f6496e2848ac8c"
 }

package/src/GraphTooltip/index.tsx

@@ -123,9 +123,8 @@ const TooltipMetaInfo = ({
   }
 
   const getTextForFile = (hoveringNode: FlamegraphNode): string => {
-    if (hoveringNode.meta === undefined) return '<unknown>';
+    if (hoveringNode.meta?.function == null) return '<unknown>';
 
-    // @ts-expect-error
     return `${hoveringNode.meta.function.filename} ${
       hoveringNode.meta.line?.line !== undefined && hoveringNode.meta.line?.line !== '0'
         ? ` +${hoveringNode.meta.line.line.toString()}`

package/src/ProfileIcicleGraph/benchmarks/ProfileIcicleGraph-10M.benchmark.tsx

@@ -0,0 +1,38 @@
+// 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 React from 'react';
+import ProfileIcicleGraph from '..';
+import {Provider} from 'react-redux';
+import {store} from '@parca/store';
+import parca10mGraphData from './benchdata/parca-10m.json';
+import {Flamegraph} from '@parca/client';
+
+const {store: reduxStore} = store();
+
+const parca10mGraph = parca10mGraphData as Flamegraph;
+
+export default function ({callback = () => {}}): React.ReactElement {
+  return (
+    <div ref={callback}>
+      <Provider store={reduxStore}>
+        <ProfileIcicleGraph
+          graph={parca10mGraph}
+          sampleUnit={parca10mGraph.unit}
+          curPath={[]}
+          setNewCurPath={() => {}}
+        />
+      </Provider>
+    </div>
+  );
+}

package/src/ProfileIcicleGraph/benchmarks/ProfileIcicleGraph-1M.benchmark.tsx

@@ -0,0 +1,38 @@
+// 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 React from 'react';
+import ProfileIcicleGraph from '../';
+import {Provider} from 'react-redux';
+import {store} from '@parca/store';
+import {Flamegraph} from '@parca/client';
+import parca1mGraphData from './benchdata/parca-1m.json';
+
+const {store: reduxStore} = store();
+
+const parca1mGraph = parca1mGraphData as Flamegraph;
+
+export default function ({callback = () => {}}): React.ReactElement {
+  return (
+    <div ref={callback}>
+      <Provider store={reduxStore}>
+        <ProfileIcicleGraph
+          graph={parca1mGraph}
+          sampleUnit={parca1mGraph.unit}
+          curPath={[]}
+          setNewCurPath={() => {}}
+        />
+      </Provider>
+    </div>
+  );
+}

package/src/ProfileIcicleGraph/benchmarks/ProfileIcicleGraph-20M.benchmark.tsx

@@ -0,0 +1,38 @@
+// 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 React from 'react';
+import ProfileIcicleGraph from '..';
+import {Provider} from 'react-redux';
+import {store} from '@parca/store';
+import parca20mGraphData from './benchdata/parca-20m.json';
+import {Flamegraph} from '@parca/client';
+
+const {store: reduxStore} = store();
+
+const parca20mGraph = parca20mGraphData as Flamegraph;
+
+export default function ({callback = () => {}}): React.ReactElement {
+  return (
+    <div ref={callback}>
+      <Provider store={reduxStore}>
+        <ProfileIcicleGraph
+          graph={parca20mGraph}
+          sampleUnit={parca20mGraph.unit}
+          curPath={[]}
+          setNewCurPath={() => {}}
+        />
+      </Provider>
+    </div>
+  );
+}

package/src/ProfileIcicleGraph/benchmarks/benchdata/populateData.js

@@ -0,0 +1,85 @@
+// 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.
+
+const {GrpcWebFetchTransport} = require('@protobuf-ts/grpcweb-transport');
+const client = require('@parca/client');
+const fs = require('fs-extra');
+const path = require('path');
+// const {fileURLToPath} = require('url');
+const fetch = require('node-fetch');
+
+globalThis.fetch = fetch;
+globalThis.Headers = fetch.Headers;
+const DIR_NAME = __dirname; // path.dirname(fileURLToPath(import.meta.url));
+
+const apiEndpoint = 'https://demo.parca.dev';
+
+const queryClient = new client.QueryServiceClient(
+  new GrpcWebFetchTransport({
+    baseUrl: `${apiEndpoint}/api`,
+  })
+);
+
+const populateDataIfNeeded = async (from, filename) => {
+  const filePath = path.join(DIR_NAME, filename);
+  if (Object.keys(await readFile(filePath)).length > 0) {
+    return;
+  }
+  const {response} = await queryClient.query({
+    options: {
+      oneofKind: 'merge',
+      merge: {
+        start: client.Timestamp.fromDate(from),
+        end: client.Timestamp.fromDate(new Date()),
+        query: 'parca_agent_cpu:samples:count:cpu:nanoseconds:delta{container="parca"}',
+      },
+    },
+    reportType: client.QueryRequest_ReportType.FLAMEGRAPH_TABLE,
+    mode: client.QueryRequest_Mode.MERGE,
+  });
+  if (response.report.oneofKind !== 'flamegraph') {
+    throw new Error('Expected flamegraph report');
+  }
+  await writeToFile(response.report.flamegraph, filePath);
+};
+
+const writeToFile = async (data, filename) => {
+  await fs.createFile(filename);
+  return await fs.writeFile(filename, JSON.stringify(data));
+};
+
+const readFile = async filename => {
+  try {
+    return await fs.readJSON(filename);
+  } catch (e) {
+    return {};
+  }
+};
+
+const run = async () => {
+  await Promise.all([
+    populateDataIfNeeded(new Date(new Date().getTime() - 1000 * 60), 'parca-1m.json'),
+    populateDataIfNeeded(new Date(new Date().getTime() - 1000 * 60 * 10), 'parca-10m.json'),
+    populateDataIfNeeded(new Date(new Date().getTime() - 1000 * 60 * 20), 'parca-20m.json'),
+  ]);
+};
+
+run()
+  .then(() => {
+    console.log('done');
+    process.exit(0);
+  })
+  .catch(err => {
+    console.error('Error:', err);
+    process.exit(1);
+  });

package/src/{ProfileIcicleGraph.tsx → ProfileIcicleGraph/index.tsx}

@@ -15,8 +15,8 @@ import {Flamegraph} from '@parca/client';
 import {useAppSelector, selectCompareMode} from '@parca/store';
 import {useContainerDimensions} from '@parca/dynamicsize';
 
-import DiffLegend from './components/DiffLegend';
-import IcicleGraph from './IcicleGraph';
+import DiffLegend from '../components/DiffLegend';
+import IcicleGraph from '../IcicleGraph';
 
 interface ProfileIcicleGraphProps {
   width?: number;

package/src/ProfileSource.tsx

@@ -113,7 +113,7 @@ export class SingleProfileSelection implements ProfileSelection {
   HistoryParams(): {[key: string]: any} {
     return {
       profile_name: this.profileName,
-      labels: this.labels.map(label => `${label.name}=${label.value}`),
+      labels: this.labels.map(label => `${label.name}=${encodeURIComponent(label.value)}`),
       time: this.time,
     };
   }

package/tsconfig.json

@@ -8,5 +8,5 @@
     "noEmit": false,
     "declaration": true
   },
-  "exclude": ["node_modules", "dist", "dist/**/*.d.ts", "**/*.test.ts"]
+  "exclude": ["node_modules", "dist", "dist/**/*.d.ts", "**/*.test.ts", "**/*.benchmark.tsx"]
 }