@parca/profile 0.16.128 → 0.16.130

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.16.130 (2023-03-06)
+
+**Note:** Version bump only for package @parca/profile
+
+## [0.16.129](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.128...@parca/profile@0.16.129) (2023-03-02)
+
+## 0.16.1 (2023-03-02)
+
+**Note:** Version bump only for package @parca/profile
+
 ## 0.16.128 (2023-03-02)
 
 # 0.16.0 (2023-03-01)

package/dist/Callgraph/index.js

@@ -111,7 +111,7 @@ var Callgraph = function (_a) {
     var currentSearchString = (_b = selectQueryParam('search_string')) !== null && _b !== void 0 ? _b : '';
     var isSearchEmpty = currentSearchString === undefined || currentSearchString === '';
     var rawDashboardItems = useURLState({ param: 'dashboard_items' })[0];
-    var dashboardItems = rawDashboardItems;
+    var dashboardItems = rawDashboardItems !== undefined ? rawDashboardItems : ['icicle'];
     useEffect(function () {
         var getDataWithPositions = function () { return __awaiter(void 0, void 0, void 0, function () {
             var dataAsDot, jsonGraph;

package/dist/ProfileExplorer/index.js

@@ -72,6 +72,10 @@ var ProfileExplorerApp = function (_a) {
     }, [profileTypesError, onError]);
     /* eslint-disable @typescript-eslint/naming-convention */
     var from_a = queryParams.from_a, to_a = queryParams.to_a, profile_name_a = queryParams.profile_name_a, labels_a = queryParams.labels_a, merge_from_a = queryParams.merge_from_a, merge_to_a = queryParams.merge_to_a, time_selection_a = queryParams.time_selection_a, compare_a = queryParams.compare_a, from_b = queryParams.from_b, to_b = queryParams.to_b, profile_name_b = queryParams.profile_name_b, labels_b = queryParams.labels_b, merge_from_b = queryParams.merge_from_b, merge_to_b = queryParams.merge_to_b, time_selection_b = queryParams.time_selection_b, compare_b = queryParams.compare_b, filter_by_function = queryParams.filter_by_function, dashboard_items = queryParams.dashboard_items;
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    var expression_a = getExpressionAsAString(queryParams.expression_a);
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    var expression_b = getExpressionAsAString(queryParams.expression_b);
     /* eslint-enable @typescript-eslint/naming-convention */
     var _f = useState(null), profileA = _f[0], setProfileA = _f[1];
     var _g = useState(null), profileB = _g[0], setProfileB = _g[1];
@@ -106,10 +110,6 @@ var ProfileExplorerApp = function (_a) {
     time_selection_a = sanitizedRange.time_selection_a;
     from_a = sanitizedRange.from_a;
     to_a = sanitizedRange.to_a;
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    var expression_a = getExpressionAsAString(queryParams.expression_a);
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    var expression_b = getExpressionAsAString(queryParams.expression_b);
     if (((_b = queryParams === null || queryParams === void 0 ? void 0 : queryParams.expression_a) !== null && _b !== void 0 ? _b : '') !== '')
         queryParams.expression_a = expression_a;
     if (((_c = queryParams === null || queryParams === void 0 ? void 0 : queryParams.expression_b) !== null && _c !== void 0 ? _c : '') !== '')

package/dist/ProfileSelector/index.js

@@ -123,13 +123,14 @@ var ProfileSelector = function (_a) {
                     querySelection.expression.length > 0 &&
                     querySelection.from !== undefined &&
                     querySelection.to !== undefined ? (_jsx(ProfileMetricsGraph, { queryClient: queryClient, queryExpression: querySelection.expression, from: querySelection.from, to: querySelection.to, profile: profileSelection, setTimeRange: function (range) {
+                        var from = range.getFromMs();
+                        var to = range.getToMs();
+                        var mergedProfileParams = {};
+                        if (query.profileType().delta) {
+                            mergedProfileParams = { mergeFrom: from, mergeTo: to };
+                        }
                         setTimeRangeSelection(range);
-                        selectQuery({
-                            expression: queryExpressionString,
-                            from: range.getFromMs(),
-                            to: range.getToMs(),
-                            timeSelection: range.getRangeKey(),
-                        });
+                        selectQuery(__assign({ expression: queryExpressionString, from: from, to: to, timeSelection: range.getRangeKey() }, mergedProfileParams));
                     }, addLabelMatcher: addLabelMatcher, onPointClick: function (timestamp, labels, queryExpression) {
                         // TODO: Pass the query object via click rather than queryExpression
                         var query = Query.parse(queryExpression);

package/dist/ProfileView/ViewSelector.js

@@ -30,7 +30,7 @@ var ViewSelector = function (_a) {
     var _e = useURLState({
         param: 'dashboard_items',
         navigateTo: navigateTo,
-    }), dashboardItems = _e[0], setDashboardItems = _e[1];
+    }), _f = _e[0], dashboardItems = _f === void 0 ? ['icicle'] : _f, setDashboardItems = _e[1];
     var allItems = [
         { key: 'table', canBeSelected: !dashboardItems.includes('table') },
         { key: 'icicle', canBeSelected: !dashboardItems.includes('icicle') },

package/dist/ProfileView/index.js

@@ -63,7 +63,12 @@ export var ProfileView = function (_a) {
         navigateTo: navigateTo,
     }), rawDashboardItems = _d[0], setDashboardItems = _d[1];
     var currentSearchString = useURLState({ param: 'search_string' })[0];
-    var dashboardItems = rawDashboardItems;
+    var dashboardItems = useMemo(function () {
+        if (rawDashboardItems !== undefined) {
+            return rawDashboardItems;
+        }
+        return ['icicle'];
+    }, [rawDashboardItems]);
     var isDarkMode = useAppSelector(selectDarkMode);
     var isMultiPanelView = dashboardItems.length > 1;
     var _e = useParcaContext(), loader = _e.loader, perf = _e.perf;

package/dist/TopTable/index.js

@@ -54,7 +54,12 @@ export var TopTable = React.memo(function TopTable(_a) {
     var rawDashboardItems = useURLState({ param: 'dashboard_items' })[0];
     var rawcompareMode = useURLState({ param: 'compare_a' })[0];
     var compareMode = rawcompareMode === undefined ? false : rawcompareMode === 'true';
-    var dashboardItems = rawDashboardItems;
+    var dashboardItems = useMemo(function () {
+        if (rawDashboardItems !== undefined) {
+            return rawDashboardItems;
+        }
+        return ['icicle'];
+    }, [rawDashboardItems]);
     var columns = useMemo(function () {
         var cols = [
             columnHelper.accessor('meta', {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.128",
+  "version": "0.16.130",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@parca/client": "^0.16.65",
@@ -45,5 +45,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "dd68f2daa5f9656dd3c76c212960ebebe91ef832"
+  "gitHead": "2eb0e54d2fdb21adfd76f91deef4d8ab33362cac"
 }

package/src/Callgraph/index.tsx

@@ -186,7 +186,8 @@ const Callgraph = ({graph, sampleUnit, width, colorRange}: Props): JSX.Element =
   const isSearchEmpty = currentSearchString === undefined || currentSearchString === '';
   const [rawDashboardItems] = useURLState({param: 'dashboard_items'});
 
-  const dashboardItems = rawDashboardItems as string[];
+  const dashboardItems =
+    rawDashboardItems !== undefined ? (rawDashboardItems as string[]) : ['icicle'];
 
   useEffect(() => {
     const getDataWithPositions = async (): Promise<void> => {

package/src/ProfileExplorer/index.tsx

@@ -111,6 +111,12 @@ const ProfileExplorerApp = ({
     dashboard_items,
   } = queryParams;
 
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  const expression_a = getExpressionAsAString(queryParams.expression_a);
+
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  const expression_b = getExpressionAsAString(queryParams.expression_b);
+
   /* eslint-enable @typescript-eslint/naming-convention */
   const [profileA, setProfileA] = useState<ProfileSelection | null>(null);
   const [profileB, setProfileB] = useState<ProfileSelection | null>(null);
@@ -176,12 +182,6 @@ const ProfileExplorerApp = ({
   from_a = sanitizedRange.from_a;
   to_a = sanitizedRange.to_a;
 
-  // eslint-disable-next-line @typescript-eslint/naming-convention
-  const expression_a = getExpressionAsAString(queryParams.expression_a);
-
-  // eslint-disable-next-line @typescript-eslint/naming-convention
-  const expression_b = getExpressionAsAString(queryParams.expression_b);
-
   if ((queryParams?.expression_a ?? '') !== '') queryParams.expression_a = expression_a;
   if ((queryParams?.expression_b ?? '') !== '') queryParams.expression_b = expression_b;
 

package/src/ProfileSelector/index.tsx

@@ -252,12 +252,19 @@ const ProfileSelector = ({
               to={querySelection.to}
               profile={profileSelection}
               setTimeRange={(range: DateTimeRange) => {
+                const from = range.getFromMs();
+                const to = range.getToMs();
+                let mergedProfileParams = {};
+                if (query.profileType().delta) {
+                  mergedProfileParams = {mergeFrom: from, mergeTo: to};
+                }
                 setTimeRangeSelection(range);
                 selectQuery({
                   expression: queryExpressionString,
-                  from: range.getFromMs(),
-                  to: range.getToMs(),
+                  from,
+                  to,
                   timeSelection: range.getRangeKey(),
+                  ...mergedProfileParams,
                 });
               }}
               addLabelMatcher={addLabelMatcher}

package/src/ProfileView/ViewSelector.tsx

@@ -35,7 +35,7 @@ const ViewSelector = ({
   disabled = false,
 }: Props): JSX.Element => {
   const [callgraphEnabled] = useUIFeatureFlag('callgraph');
-  const [dashboardItems, setDashboardItems] = useURLState({
+  const [dashboardItems = ['icicle'], setDashboardItems] = useURLState({
     param: 'dashboard_items',
     navigateTo,
   });

package/src/ProfileView/index.tsx

@@ -106,7 +106,14 @@ export const ProfileView = ({
     navigateTo,
   });
   const [currentSearchString] = useURLState({param: 'search_string'});
-  const dashboardItems = rawDashboardItems as string[];
+
+  const dashboardItems = useMemo(() => {
+    if (rawDashboardItems !== undefined) {
+      return rawDashboardItems as string[];
+    }
+    return ['icicle'];
+  }, [rawDashboardItems]);
+
   const isDarkMode = useAppSelector(selectDarkMode);
   const isMultiPanelView = dashboardItems.length > 1;
 

package/src/TopTable/index.tsx

@@ -76,7 +76,12 @@ export const TopTable = React.memo(function TopTable({
 
   const compareMode: boolean = rawcompareMode === undefined ? false : rawcompareMode === 'true';
 
-  const dashboardItems = rawDashboardItems as string[];
+  const dashboardItems = useMemo(() => {
+    if (rawDashboardItems !== undefined) {
+      return rawDashboardItems as string[];
+    }
+    return ['icicle'];
+  }, [rawDashboardItems]);
 
   const columns = useMemo(() => {
     const cols: Array<ColumnDef<TopNode, any>> = [