@parca/profile 0.16.400 → 0.16.402

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.402](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.401...@parca/profile@0.16.402) (2024-07-04)
+
+**Note:** Version bump only for package @parca/profile
+
+## [0.16.401](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.400...@parca/profile@0.16.401) (2024-07-03)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.16.400](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.399...@parca/profile@0.16.400) (2024-07-02)
 
 **Note:** Version bump only for package @parca/profile

package/dist/GraphTooltipArrow/DockedGraphTooltip/index.js

@@ -43,14 +43,16 @@ export const DockedGraphTooltip = ({ table, total, totalUnfiltered, row, level,
     if (graphTooltipData === null) {
         return _jsx(_Fragment, {});
     }
-    const { name, cumulativeText, diffText, diff } = graphTooltipData;
+    const { name, cumulativeText, cumulativePerSecondText, flatText, flatPerSecondText, diffText, diff, } = graphTooltipData;
     const labels = labelPairs.map((l) => (_jsx("span", { className: "mr-3 inline-block rounded-lg bg-gray-200 px-2 py-1 text-xs font-bold text-gray-700 dark:bg-gray-700 dark:text-gray-400", children: `${l[0]}="${l[1]}"` }, l[0])));
     const isMappingBuildIDAvailable = mappingBuildID !== null && mappingBuildID !== '';
     const inlinedText = inlined === null ? 'merged' : inlined ? 'yes' : 'no';
     const addressText = locationAddress !== 0n ? hexifyAddress(locationAddress) : _jsx(NoData, {});
+    const cumulativeTextBoth = `${cumulativeText}\n${cumulativePerSecondText}`;
+    const flatTextBoth = `${flatText}\n${flatPerSecondText}`;
     return (_jsxs("div", { className: "fixed bottom-0 z-20 overflow-hidden rounded-t-lg border-l border-r border-t border-gray-400 bg-white bg-opacity-90 px-8 py-3 dark:border-gray-600 dark:bg-black dark:bg-opacity-80", style: { width }, children: [_jsxs("div", { className: "flex flex-col gap-4", children: [_jsx("div", { className: "flex justify-between gap-4", children: row === 0 ? (_jsx("p", { children: "root" })) : (_jsx("p", { children: name !== ''
                                 ? name
                                 : locationAddress !== 0n
                                     ? hexifyAddress(locationAddress)
-                                    : 'unknown' })) }), _jsxs("div", { className: "flex justify-between gap-3", children: [_jsx(InfoSection, { title: "Cumulative", value: cumulativeText, minWidth: "w-44" }), diff !== 0n ? _jsx(InfoSection, { title: "Diff", value: diffText, minWidth: "w-44" }) : null, _jsx(InfoSection, { title: "File", value: functionFilename !== '' ? truncateStringReverse(file, 45) : _jsx(NoData, {}), minWidth: 'w-[460px]' }), _jsx(InfoSection, { title: "Address", value: addressText, minWidth: "w-44" }), _jsx(InfoSection, { title: "Inlined", value: inlinedText, minWidth: "w-44" }), _jsx(InfoSection, { title: "Binary", value: (mappingFile != null ? getLastItem(mappingFile) : null) ?? _jsx(NoData, {}), minWidth: "w-44" }), _jsx(InfoSection, { title: "Build ID", value: isMappingBuildIDAvailable ? (_jsx("div", { children: truncateString(mappingBuildID, 28) })) : (_jsx(NoData, {})) })] }), _jsx("div", { children: _jsx("div", { className: "flex h-5 gap-1", children: labels }) })] }), _jsxs("div", { className: "flex w-full items-center gap-1 text-xs text-gray-500", children: [_jsx(Icon, { icon: "iconoir:mouse-button-right" }), _jsx("div", { children: "Right click to show context menu" })] })] }));
+                                    : 'unknown' })) }), _jsxs("div", { className: "flex justify-between gap-3", children: [_jsx(InfoSection, { title: "Cumulative", value: cumulativeTextBoth, minWidth: "w-44" }), _jsx(InfoSection, { title: "Flat", value: flatTextBoth, minWidth: "w-44" }), diff !== 0n ? _jsx(InfoSection, { title: "Diff", value: diffText, minWidth: "w-44" }) : null, _jsx(InfoSection, { title: "File", value: functionFilename !== '' ? truncateStringReverse(file, 45) : _jsx(NoData, {}), minWidth: 'w-[460px]' }), _jsx(InfoSection, { title: "Address", value: addressText, minWidth: "w-44" }), _jsx(InfoSection, { title: "Inlined", value: inlinedText, minWidth: "w-44" }), _jsx(InfoSection, { title: "Binary", value: (mappingFile != null ? getLastItem(mappingFile) : null) ?? _jsx(NoData, {}), minWidth: "w-44" }), _jsx(InfoSection, { title: "Build ID", value: isMappingBuildIDAvailable ? (_jsx("div", { children: truncateString(mappingBuildID, 28) })) : (_jsx(NoData, {})) })] }), _jsx("div", { children: _jsx("div", { className: "flex h-5 gap-1", children: labels }) })] }), _jsxs("div", { className: "flex w-full items-center gap-1 text-xs text-gray-500", children: [_jsx(Icon, { icon: "iconoir:mouse-button-right" }), _jsx("div", { children: "Right click to show context menu" })] })] }));
 };

package/dist/ProfileExplorer/ProfileExplorerCompare.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Card } from '@parca/components';
+import { Card, useURLState } from '@parca/components';
 import { Query } from '@parca/parser';
 import { ProfileDiffSource, ProfileViewWithData } from '..';
 import ProfileSelector from '../ProfileSelector';
@@ -10,6 +10,7 @@ const ProfileExplorerCompare = ({ queryClient, queryA, queryB, profileA, profile
     const closeProfileB = () => {
         closeProfile('B');
     };
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex justify-between gap-2", children: [_jsx(Card, { className: "mt-2 p-2", children: _jsx(ProfileSelector, { queryClient: queryClient, querySelection: queryA, profileSelection: profileA, selectProfile: selectProfileA, selectQuery: selectQueryA, closeProfile: closeProfileA, enforcedProfileName: '', comparing: true, navigateTo: navigateTo }) }), _jsx(Card, { className: "mt-2 p-2", children: _jsx(ProfileSelector, { queryClient: queryClient, querySelection: queryB, profileSelection: profileB, selectProfile: selectProfileB, selectQuery: selectQueryB, closeProfile: closeProfileB, enforcedProfileName: Query.parse(queryA.expression).profileName(), comparing: true, navigateTo: navigateTo }) })] }), _jsx("div", { className: "grid grid-cols-1", children: profileA != null && profileB != null ? (_jsx("div", { children: _jsx(Card, { className: "mt-2 px-6 py-4", children: _jsx(ProfileViewWithData, { navigateTo: navigateTo, queryClient: queryClient, profileSource: new ProfileDiffSource(profileA.ProfileSource(), profileB.ProfileSource()) }) }) })) : (_jsx("div", { children: _jsx("div", { className: "my-20 text-center", children: _jsx("p", { children: "Select a profile on both sides." }) }) })) })] }));
+    const [compareAbsolute] = useURLState({ param: 'compare_absolute', navigateTo });
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex justify-between gap-2", children: [_jsx(Card, { className: "mt-2 p-2", children: _jsx(ProfileSelector, { queryClient: queryClient, querySelection: queryA, profileSelection: profileA, selectProfile: selectProfileA, selectQuery: selectQueryA, closeProfile: closeProfileA, enforcedProfileName: '', comparing: true, navigateTo: navigateTo }) }), _jsx(Card, { className: "mt-2 p-2", children: _jsx(ProfileSelector, { queryClient: queryClient, querySelection: queryB, profileSelection: profileB, selectProfile: selectProfileB, selectQuery: selectQueryB, closeProfile: closeProfileB, enforcedProfileName: Query.parse(queryA.expression).profileName(), comparing: true, navigateTo: navigateTo }) })] }), _jsx("div", { className: "grid grid-cols-1", children: profileA != null && profileB != null ? (_jsx("div", { children: _jsx(Card, { className: "mt-2 px-6 py-4", children: _jsx(ProfileViewWithData, { navigateTo: navigateTo, queryClient: queryClient, profileSource: new ProfileDiffSource(profileA.ProfileSource(), profileB.ProfileSource(), '', compareAbsolute === 'true') }) }) })) : (_jsx("div", { children: _jsx("div", { className: "my-20 text-center", children: _jsx("p", { children: "Select a profile on both sides." }) }) })) })] }));
 };
 export default ProfileExplorerCompare;

package/dist/ProfileIcicleGraph/index.js

@@ -93,6 +93,15 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ graph, arrow, to
         navigateTo,
     });
     const isInvert = invertStack === 'true';
+    // By default, we want delta profiles (CPU) to be relatively compared.
+    // For non-delta profiles, like goroutines or memory, we want the profiles to be compared absolutely.
+    const compareAbsoluteDefault = profileType?.delta === false ? 'true' : 'false';
+    const [compareAbsolute = compareAbsoluteDefault, setCompareAbsolute] = useURLState({
+        param: 'compare_absolute',
+        navigateTo,
+        withURLUpdate: true,
+    });
+    const isCompareAbsolute = compareAbsolute === 'true';
     const [totalFormatted, totalUnfilteredFormatted, isTrimmed, trimmedFormatted, trimmedPercentage, isFiltered, filteredPercentage,] = useMemo(() => {
         if (graph === undefined && arrow === undefined) {
             return ['0', '0', false, '0', '0', false, '0', '0'];
@@ -112,7 +121,7 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ graph, arrow, to
         ];
     }, [graph, arrow, filtered, total]);
     useEffect(() => {
-        setActionButtons?.(_jsx("div", { className: "flex w-full justify-end gap-2 pb-2", children: _jsxs("div", { className: "ml-2 flex w-full flex-col items-start justify-between gap-2 md:flex-row md:items-end", children: [_jsx(GroupAndSortActionButtons, { navigateTo: navigateTo }), isHalfScreen ? (_jsx(IconButton, { icon: isInvert ? 'ph:sort-ascending' : 'ph:sort-descending', toolTipText: isInvert ? 'Original Call Stack' : 'Invert Call Stack', onClick: () => setInvertStack(isInvert ? '' : 'true'), className: "rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 items-center flex border border-gray-200 dark:border-gray-600 dark:text-white justify-center py-2 px-3 cursor-pointer min-h-[38px]" })) : (_jsxs(Button, { variant: "neutral", className: "gap-2 w-max", onClick: () => setInvertStack(isInvert ? '' : 'true'), children: [isInvert ? 'Original Call Stack' : 'Invert Call Stack', _jsx(Icon, { icon: isInvert ? 'ph:sort-ascending' : 'ph:sort-descending', width: 20 })] })), _jsx(ShowHideLegendButton, { isHalfScreen: isHalfScreen, navigateTo: navigateTo }), isHalfScreen ? (_jsx(IconButton, { icon: "system-uicons:reset", disabled: curPath.length === 0, toolTipText: "Reset View", onClick: () => setNewCurPath([]), className: "rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 items-center flex border border-gray-200 dark:border-gray-600 dark:text-white justify-center py-2 px-3 cursor-pointer min-h-[38px]" })) : (_jsxs(Button, { variant: "neutral", className: "gap-2 w-max", onClick: () => setNewCurPath([]), disabled: curPath.length === 0, children: ["Reset View", _jsx(Icon, { icon: "system-uicons:reset", width: 20 })] }))] }) }));
+        setActionButtons?.(_jsx("div", { className: "flex w-full justify-end gap-2 pb-2", children: _jsxs("div", { className: "ml-2 flex w-full flex-col items-start justify-between gap-2 md:flex-row md:items-end", children: [_jsx(GroupAndSortActionButtons, { navigateTo: navigateTo }), isHalfScreen ? (_jsx(IconButton, { icon: isInvert ? 'ph:sort-ascending' : 'ph:sort-descending', toolTipText: isInvert ? 'Original Call Stack' : 'Invert Call Stack', onClick: () => setInvertStack(isInvert ? '' : 'true'), className: "rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 items-center flex border border-gray-200 dark:border-gray-600 dark:text-white justify-center py-2 px-3 cursor-pointer min-h-[38px]" })) : (_jsxs(Button, { variant: "neutral", className: "gap-2 w-max", onClick: () => setInvertStack(isInvert ? '' : 'true'), children: [isInvert ? 'Original Call Stack' : 'Invert Call Stack', _jsx(Icon, { icon: isInvert ? 'ph:sort-ascending' : 'ph:sort-descending', width: 20 })] })), _jsx(ShowHideLegendButton, { isHalfScreen: isHalfScreen, navigateTo: navigateTo }), compareMode && (_jsxs(Button, { variant: "neutral", className: "gap-2 w-max", onClick: () => setCompareAbsolute(isCompareAbsolute ? '' : 'true'), children: [isCompareAbsolute ? 'Compare Relative' : 'Compare Absolute', _jsx(Icon, { icon: isCompareAbsolute ? 'fluent-mdl2:compare' : 'fluent-mdl2:compare-uneven', width: 20 })] })), isHalfScreen ? (_jsx(IconButton, { icon: "system-uicons:reset", disabled: curPath.length === 0, toolTipText: "Reset View", onClick: () => setNewCurPath([]), className: "rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 items-center flex border border-gray-200 dark:border-gray-600 dark:text-white justify-center py-2 px-3 cursor-pointer min-h-[38px]" })) : (_jsxs(Button, { variant: "neutral", className: "gap-2 w-max", onClick: () => setNewCurPath([]), disabled: curPath.length === 0, children: ["Reset View", _jsx(Icon, { icon: "system-uicons:reset", width: 20 })] }))] }) }));
     }, [
         navigateTo,
         isInvert,
@@ -124,6 +133,9 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ graph, arrow, to
         loading,
         isHalfScreen,
         isLoading,
+        compareMode,
+        isCompareAbsolute,
+        setCompareAbsolute,
     ]);
     const loadingState = !loading && (arrow !== undefined || graph !== undefined) && mappings !== undefined;
     useEffect(() => {

package/dist/ProfileSource.d.ts

@@ -42,7 +42,8 @@ export declare class ProfileDiffSource implements ProfileSource {
     b: ProfileSource;
     filterQuery: string | undefined;
     profileType: ProfileType;
-    constructor(a: ProfileSource, b: ProfileSource, filterQuery?: string);
+    absolute?: boolean;
+    constructor(a: ProfileSource, b: ProfileSource, filterQuery?: string, absolute?: boolean);
     DiffSelection(): ProfileDiffSelection;
     QueryRequest(): QueryRequest;
     ProfileType(): ProfileType;

package/dist/ProfileSource.js

@@ -73,11 +73,12 @@ export class MergedProfileSelection {
     }
 }
 export class ProfileDiffSource {
-    constructor(a, b, filterQuery) {
+    constructor(a, b, filterQuery, absolute) {
         this.a = a;
         this.b = b;
         this.filterQuery = filterQuery;
         this.profileType = a.ProfileType();
+        this.absolute = absolute;
     }
     DiffSelection() {
         throw new Error('Method not implemented.');
@@ -89,9 +90,10 @@ export class ProfileDiffSource {
                 diff: {
                     a: this.a.DiffSelection(),
                     b: this.b.DiffSelection(),
+                    absolute: this.absolute,
                 },
             },
-            reportType: QueryRequest_ReportType.FLAMEGRAPH_UNSPECIFIED,
+            reportType: QueryRequest_ReportType.FLAMEGRAPH_ARROW,
             mode: QueryRequest_Mode.DIFF,
             filterQuery: this.filterQuery,
             filter: [],
@@ -143,7 +145,7 @@ export class MergedProfileSource {
                     query: this.query.toString(),
                 },
             },
-            reportType: QueryRequest_ReportType.FLAMEGRAPH_UNSPECIFIED,
+            reportType: QueryRequest_ReportType.FLAMEGRAPH_ARROW,
             mode: QueryRequest_Mode.MERGE,
             filterQuery: this.filterQuery,
             filter: [],

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.400",
+  "version": "0.16.402",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@headlessui/react": "^1.7.19",
     "@iconify/react": "^4.0.0",
-    "@parca/client": "0.16.119",
-    "@parca/components": "0.16.289",
+    "@parca/client": "0.16.120",
+    "@parca/components": "0.16.290",
     "@parca/dynamicsize": "0.16.65",
-    "@parca/hooks": "0.0.64",
+    "@parca/hooks": "0.0.65",
     "@parca/icons": "0.16.70",
     "@parca/parser": "0.16.77",
-    "@parca/store": "0.16.153",
-    "@parca/utilities": "0.0.80",
+    "@parca/store": "0.16.154",
+    "@parca/utilities": "0.0.81",
     "@popperjs/core": "^2.11.8",
     "@protobuf-ts/runtime-rpc": "^2.5.0",
     "@tanstack/react-query": "^4.0.5",
@@ -73,5 +73,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "9d13687d6648e70412369d67999b77633d384199"
+  "gitHead": "25851d40d2630dbb542747d3a09718363212ad0e"
 }

package/src/GraphTooltipArrow/DockedGraphTooltip/index.tsx

@@ -93,7 +93,15 @@ export const DockedGraphTooltip = ({
     return <></>;
   }
 
-  const {name, cumulativeText, diffText, diff} = graphTooltipData;
+  const {
+    name,
+    cumulativeText,
+    cumulativePerSecondText,
+    flatText,
+    flatPerSecondText,
+    diffText,
+    diff,
+  } = graphTooltipData;
 
   const labels = labelPairs.map(
     (l): React.JSX.Element => (
@@ -110,6 +118,9 @@ export const DockedGraphTooltip = ({
   const inlinedText = inlined === null ? 'merged' : inlined ? 'yes' : 'no';
   const addressText = locationAddress !== 0n ? hexifyAddress(locationAddress) : <NoData />;
 
+  const cumulativeTextBoth = `${cumulativeText}\n${cumulativePerSecondText}`;
+  const flatTextBoth = `${flatText}\n${flatPerSecondText}`;
+
   return (
     <div
       className="fixed bottom-0 z-20 overflow-hidden rounded-t-lg border-l border-r border-t border-gray-400 bg-white bg-opacity-90 px-8 py-3 dark:border-gray-600 dark:bg-black dark:bg-opacity-80"
@@ -130,7 +141,8 @@ export const DockedGraphTooltip = ({
           )}
         </div>
         <div className="flex justify-between gap-3">
-          <InfoSection title="Cumulative" value={cumulativeText} minWidth="w-44" />
+          <InfoSection title="Cumulative" value={cumulativeTextBoth} minWidth="w-44" />
+          <InfoSection title="Flat" value={flatTextBoth} minWidth="w-44" />
           {diff !== 0n ? <InfoSection title="Diff" value={diffText} minWidth="w-44" /> : null}
           <InfoSection
             title="File"

package/src/ProfileExplorer/ProfileExplorerCompare.tsx

@@ -12,7 +12,7 @@
 // limitations under the License.
 
 import {QueryServiceClient} from '@parca/client';
-import {Card} from '@parca/components';
+import {Card, useURLState} from '@parca/components';
 import {Query} from '@parca/parser';
 import type {NavigateFunction} from '@parca/utilities';
 
@@ -56,6 +56,8 @@ const ProfileExplorerCompare = ({
     closeProfile('B');
   };
 
+  const [compareAbsolute] = useURLState({param: 'compare_absolute', navigateTo});
+
   return (
     <>
       <div className="flex justify-between gap-2">
@@ -94,7 +96,12 @@ const ProfileExplorerCompare = ({
                 navigateTo={navigateTo}
                 queryClient={queryClient}
                 profileSource={
-                  new ProfileDiffSource(profileA.ProfileSource(), profileB.ProfileSource())
+                  new ProfileDiffSource(
+                    profileA.ProfileSource(),
+                    profileB.ProfileSource(),
+                    '',
+                    compareAbsolute === 'true'
+                  )
                 }
               />
             </Card>

package/src/ProfileIcicleGraph/index.tsx

@@ -238,9 +238,19 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
     param: 'invert_call_stack',
     navigateTo,
   });
-
   const isInvert = invertStack === 'true';
 
+  // By default, we want delta profiles (CPU) to be relatively compared.
+  // For non-delta profiles, like goroutines or memory, we want the profiles to be compared absolutely.
+  const compareAbsoluteDefault = profileType?.delta === false ? 'true' : 'false';
+
+  const [compareAbsolute = compareAbsoluteDefault, setCompareAbsolute] = useURLState({
+    param: 'compare_absolute',
+    navigateTo,
+    withURLUpdate: true,
+  });
+  const isCompareAbsolute = compareAbsolute === 'true';
+
   const [
     totalFormatted,
     totalUnfilteredFormatted,
@@ -294,6 +304,19 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
             </Button>
           )}
           <ShowHideLegendButton isHalfScreen={isHalfScreen} navigateTo={navigateTo} />
+          {compareMode && (
+            <Button
+              variant="neutral"
+              className="gap-2 w-max"
+              onClick={() => setCompareAbsolute(isCompareAbsolute ? '' : 'true')}
+            >
+              {isCompareAbsolute ? 'Compare Relative' : 'Compare Absolute'}
+              <Icon
+                icon={isCompareAbsolute ? 'fluent-mdl2:compare' : 'fluent-mdl2:compare-uneven'}
+                width={20}
+              />
+            </Button>
+          )}
           {isHalfScreen ? (
             <IconButton
               icon="system-uicons:reset"
@@ -327,6 +350,9 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
     loading,
     isHalfScreen,
     isLoading,
+    compareMode,
+    isCompareAbsolute,
+    setCompareAbsolute,
   ]);
 
   const loadingState =

package/src/ProfileSource.tsx

@@ -136,12 +136,14 @@ export class ProfileDiffSource implements ProfileSource {
   b: ProfileSource;
   filterQuery: string | undefined;
   profileType: ProfileType;
+  absolute?: boolean;
 
-  constructor(a: ProfileSource, b: ProfileSource, filterQuery?: string) {
+  constructor(a: ProfileSource, b: ProfileSource, filterQuery?: string, absolute?: boolean) {
     this.a = a;
     this.b = b;
     this.filterQuery = filterQuery;
     this.profileType = a.ProfileType();
+    this.absolute = absolute;
   }
 
   DiffSelection(): ProfileDiffSelection {
@@ -155,9 +157,10 @@ export class ProfileDiffSource implements ProfileSource {
         diff: {
           a: this.a.DiffSelection(),
           b: this.b.DiffSelection(),
+          absolute: this.absolute,
         },
       },
-      reportType: QueryRequest_ReportType.FLAMEGRAPH_UNSPECIFIED,
+      reportType: QueryRequest_ReportType.FLAMEGRAPH_ARROW,
       mode: QueryRequest_Mode.DIFF,
       filterQuery: this.filterQuery,
       filter: [],
@@ -227,7 +230,7 @@ export class MergedProfileSource implements ProfileSource {
           query: this.query.toString(),
         },
       },
-      reportType: QueryRequest_ReportType.FLAMEGRAPH_UNSPECIFIED,
+      reportType: QueryRequest_ReportType.FLAMEGRAPH_ARROW,
       mode: QueryRequest_Mode.MERGE,
       filterQuery: this.filterQuery,
       filter: [],