@parca/profile 0.19.72 → 0.19.74

package/dist/index.d.ts

@@ -1,5 +1,6 @@
+import type { ParamPreferences } from '@parca/components';
 import { useLabelNames } from './MatchersInput';
-import ProfileExplorer, { getExpressionAsAString } from './ProfileExplorer';
+import ProfileExplorer from './ProfileExplorer';
 import ProfileTypeSelector from './ProfileTypeSelector';
 import SelectWithRefresh from './SelectWithRefresh';
 import CustomSelect from './SimpleMatchers/Select';
@@ -15,8 +16,6 @@ export * from './ProfileMetricsGraph';
 export * from './useSumBy';
 export { default as ProfileFilters } from './ProfileView/components/ProfileFilters';
 export { useProfileFiltersUrlState } from './ProfileView/components/ProfileFilters/useProfileFiltersUrlState';
-export declare const DEFAULT_PROFILE_EXPLORER_PARAM_VALUES: {
-    dashboard_items: string;
-};
-export { ProfileExplorer, ProfileTypeSelector, getExpressionAsAString, CustomSelect, SelectWithRefresh, useLabelNames, };
+export declare const DEFAULT_PROFILE_EXPLORER_PARAM_VALUES: ParamPreferences;
+export { ProfileExplorer, ProfileTypeSelector, CustomSelect, SelectWithRefresh, useLabelNames };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAC9C,OAAO,eAAe,EAAE,EAAC,sBAAsB,EAAC,MAAM,mBAAmB,CAAC;AAC1E,OAAO,mBAAmB,MAAM,uBAAuB,CAAC;AACxD,OAAO,iBAAiB,MAAM,qBAAqB,CAAC;AACpD,OAAO,YAAY,MAAM,yBAAyB,CAAC;AAEnD,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,OAAO,EACL,qBAAqB,EACrB,uBAAuB,GACxB,MAAM,2DAA2D,CAAC;AACnE,cAAc,eAAe,CAAC;AAC9B,cAAc,uBAAuB,CAAC;AACtC,cAAc,SAAS,CAAC;AACxB,cAAc,uBAAuB,CAAC;AACtC,cAAc,cAAc,CAAC;AAC7B,cAAc,uBAAuB,CAAC;AACtC,cAAc,YAAY,CAAC;AAE3B,OAAO,EAAC,OAAO,IAAI,cAAc,EAAC,MAAM,yCAAyC,CAAC;AAClF,OAAO,EAAC,yBAAyB,EAAC,MAAM,mEAAmE,CAAC;AAE5G,eAAO,MAAM,qCAAqC;;CAEjD,CAAC;AAEF,OAAO,EACL,eAAe,EACf,mBAAmB,EACnB,sBAAsB,EACtB,YAAY,EACZ,iBAAiB,EACjB,aAAa,GACd,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,mBAAmB,CAAC;AAExD,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAC9C,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAChD,OAAO,mBAAmB,MAAM,uBAAuB,CAAC;AACxD,OAAO,iBAAiB,MAAM,qBAAqB,CAAC;AACpD,OAAO,YAAY,MAAM,yBAAyB,CAAC;AAEnD,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,OAAO,EACL,qBAAqB,EACrB,uBAAuB,GACxB,MAAM,2DAA2D,CAAC;AACnE,cAAc,eAAe,CAAC;AAC9B,cAAc,uBAAuB,CAAC;AACtC,cAAc,SAAS,CAAC;AACxB,cAAc,uBAAuB,CAAC;AACtC,cAAc,cAAc,CAAC;AAC7B,cAAc,uBAAuB,CAAC;AACtC,cAAc,YAAY,CAAC;AAE3B,OAAO,EAAC,OAAO,IAAI,cAAc,EAAC,MAAM,yCAAyC,CAAC;AAClF,OAAO,EAAC,yBAAyB,EAAC,MAAM,mEAAmE,CAAC;AAE5G,eAAO,MAAM,qCAAqC,EAAE,gBAKnD,CAAC;AAEF,OAAO,EAAC,eAAe,EAAE,mBAAmB,EAAE,YAAY,EAAE,iBAAiB,EAAE,aAAa,EAAC,CAAC"}

package/dist/index.js

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { useLabelNames } from './MatchersInput';
-import ProfileExplorer, { getExpressionAsAString } from './ProfileExplorer';
+import ProfileExplorer from './ProfileExplorer';
 import ProfileTypeSelector from './ProfileTypeSelector';
 import SelectWithRefresh from './SelectWithRefresh';
 import CustomSelect from './SimpleMatchers/Select';
@@ -28,6 +28,9 @@ export * from './useSumBy';
 export { default as ProfileFilters } from './ProfileView/components/ProfileFilters';
 export { useProfileFiltersUrlState } from './ProfileView/components/ProfileFilters/useProfileFiltersUrlState';
 export const DEFAULT_PROFILE_EXPLORER_PARAM_VALUES = {
-    dashboard_items: 'flamegraph',
+    dashboard_items: {
+        defaultValue: 'flamegraph',
+        splitOnCommas: true, // This param should split on commas for array values
+    },
 };
-export { ProfileExplorer, ProfileTypeSelector, getExpressionAsAString, CustomSelect, SelectWithRefresh, useLabelNames, };
+export { ProfileExplorer, ProfileTypeSelector, CustomSelect, SelectWithRefresh, useLabelNames };

package/dist/useSumBy.d.ts

@@ -1,3 +1,5 @@
+import { QueryServiceClient } from '@parca/client';
+import { DateTimeRange } from '@parca/components';
 import { ProfileType } from '@parca/parser';
 export declare const DEFAULT_EMPTY_SUM_BY: string[];
 export declare const useSumBySelection: (profileType: ProfileType | undefined, labelNamesLoading: boolean, labels: string[] | undefined, { defaultValue, }?: {
@@ -11,4 +13,9 @@ export declare const useDefaultSumBy: (profileType: ProfileType | undefined, lab
 };
 export declare const useSumByFromParams: (param: string | string[] | undefined) => string[] | undefined;
 export declare const sumByToParam: (sumBy: string[] | undefined) => string | string[] | undefined;
+export declare const useSumBy: (queryClient: QueryServiceClient, profileType: ProfileType | undefined, timeRange: DateTimeRange, defaultValue?: string[]) => {
+    sumBy: string[] | undefined;
+    setSumBy: (sumBy: string[]) => void;
+    isLoading: boolean;
+};
 //# sourceMappingURL=useSumBy.d.ts.map

package/dist/useSumBy.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSumBy.d.ts","sourceRoot":"","sources":["../src/useSumBy.ts"],"names":[],"mappings":"AAeA,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAE1C,eAAO,MAAM,oBAAoB,EAAE,MAAM,EAAO,CAAC;AA6BjD,eAAO,MAAM,iBAAiB,GAC5B,aAAa,WAAW,GAAG,SAAS,EACpC,mBAAmB,OAAO,EAC1B,QAAQ,MAAM,EAAE,GAAG,SAAS,EAC5B,oBAEG;IACD,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;CACpB,KACL,CACD,MAAM,EAAE,GAAG,SAAS,EACpB,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,EAC1B;IACE,SAAS,EAAE,OAAO,CAAC;CACpB,CAgDF,CAAC;AAEF,eAAO,MAAM,eAAe,GAC1B,aAAa,WAAW,GAAG,SAAS,EACpC,mBAAmB,OAAO,EAC1B,QAAQ,MAAM,EAAE,GAAG,SAAS,KAC3B;IAAC,YAAY,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;IAAC,SAAS,EAAE,OAAO,CAAA;CAMzD,CAAC;AAyBF,eAAO,MAAM,kBAAkB,GAAI,OAAO,MAAM,GAAG,MAAM,EAAE,GAAG,SAAS,KAAG,MAAM,EAAE,GAAG,SAMpF,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,OAAO,MAAM,EAAE,GAAG,SAAS,KAAG,MAAM,GAAG,MAAM,EAAE,GAAG,SAU9E,CAAC"}
+{"version":3,"file":"useSumBy.d.ts","sourceRoot":"","sources":["../src/useSumBy.ts"],"names":[],"mappings":"AAeA,OAAO,EAAC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AACjD,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAI1C,eAAO,MAAM,oBAAoB,EAAE,MAAM,EAAO,CAAC;AA6BjD,eAAO,MAAM,iBAAiB,GAC5B,aAAa,WAAW,GAAG,SAAS,EACpC,mBAAmB,OAAO,EAC1B,QAAQ,MAAM,EAAE,GAAG,SAAS,EAC5B,oBAEG;IACD,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;CACpB,KACL,CACD,MAAM,EAAE,GAAG,SAAS,EACpB,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,EAC1B;IACE,SAAS,EAAE,OAAO,CAAC;CACpB,CA+DF,CAAC;AAEF,eAAO,MAAM,eAAe,GAC1B,aAAa,WAAW,GAAG,SAAS,EACpC,mBAAmB,OAAO,EAC1B,QAAQ,MAAM,EAAE,GAAG,SAAS,KAC3B;IAAC,YAAY,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;IAAC,SAAS,EAAE,OAAO,CAAA;CAMzD,CAAC;AAyBF,eAAO,MAAM,kBAAkB,GAAI,OAAO,MAAM,GAAG,MAAM,EAAE,GAAG,SAAS,KAAG,MAAM,EAAE,GAAG,SAMpF,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,OAAO,MAAM,EAAE,GAAG,SAAS,KAAG,MAAM,GAAG,MAAM,EAAE,GAAG,SAU9E,CAAC;AAGF,eAAO,MAAM,QAAQ,GACnB,aAAa,kBAAkB,EAC/B,aAAa,WAAW,GAAG,SAAS,EACpC,WAAW,aAAa,EACxB,eAAe,MAAM,EAAE,KACtB;IACD,KAAK,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;IAC5B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACpC,SAAS,EAAE,OAAO,CAAC;CAyBpB,CAAC"}

package/dist/useSumBy.js

@@ -10,7 +10,8 @@
 // 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 { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useLabelNames } from './MatchersInput/index';
 export const DEFAULT_EMPTY_SUM_BY = [];
 const getDefaultSumBy = (profile, labels) => {
     if (profile === undefined || labels === undefined) {
@@ -53,12 +54,23 @@ export const useSumBySelection = (profileType, labelNamesLoading, labels, { defa
         });
     }, [setUserSelectedSumBy, profileType]);
     const { defaultSumBy } = useDefaultSumBy(profileType, labelNamesLoading, labels);
-    let sumBy = userSelectedSumBy[profileType?.toString() ?? ''] ?? defaultSumBy ?? DEFAULT_EMPTY_SUM_BY;
-    if (profileType?.delta !== true) {
-        sumBy = DEFAULT_EMPTY_SUM_BY;
-    }
+    // Store the last valid sumBy value to return during loading
+    const lastValidSumByRef = useRef(DEFAULT_EMPTY_SUM_BY);
+    const sumBy = useMemo(() => {
+        // If loading, return the last valid value to prevent input from blanking
+        if (labelNamesLoading && lastValidSumByRef.current !== DEFAULT_EMPTY_SUM_BY) {
+            return lastValidSumByRef.current;
+        }
+        let result = userSelectedSumBy[profileType?.toString() ?? ''] ?? defaultSumBy ?? DEFAULT_EMPTY_SUM_BY;
+        if (profileType?.delta !== true) {
+            result = DEFAULT_EMPTY_SUM_BY;
+        }
+        // Store the computed value for next loading state
+        lastValidSumByRef.current = result;
+        return result;
+    }, [userSelectedSumBy, profileType, defaultSumBy, labelNamesLoading]);
     return [
-        labelNamesLoading ? undefined : sumBy,
+        sumBy,
         setSumBy,
         {
             isLoading: labelNamesLoading,
@@ -105,3 +117,16 @@ export const sumByToParam = (sumBy) => {
     }
     return sumBy;
 };
+// Combined hook that handles all sumBy logic: fetching labels, computing defaults, and managing selection
+export const useSumBy = (queryClient, profileType, timeRange, defaultValue) => {
+    const { loading: labelNamesLoading, result } = useLabelNames(queryClient, profileType?.toString() ?? '', timeRange.getFromMs(), timeRange.getToMs());
+    const labels = useMemo(() => {
+        return result.response?.labelNames === undefined ? [] : result.response.labelNames;
+    }, [result]);
+    const [sumBySelection, setSumByInternal, { isLoading }] = useSumBySelection(profileType, labelNamesLoading, labels, { defaultValue });
+    return {
+        sumBy: sumBySelection,
+        setSumBy: setSumByInternal,
+        isLoading,
+    };
+};

package/package.json

@@ -1,20 +1,20 @@
 {
   "name": "@parca/profile",
-  "version": "0.19.72",
+  "version": "0.19.74",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@floating-ui/react": "^0.27.12",
     "@headlessui/react": "^1.7.19",
     "@iconify/react": "^4.0.0",
-    "@parca/client": "0.17.7",
-    "@parca/components": "0.16.379",
+    "@parca/client": "0.17.8",
+    "@parca/components": "0.16.381",
     "@parca/dynamicsize": "0.16.67",
-    "@parca/hooks": "0.0.106",
+    "@parca/hooks": "0.0.108",
     "@parca/icons": "0.16.74",
     "@parca/parser": "0.16.81",
-    "@parca/store": "0.16.189",
+    "@parca/store": "0.16.191",
     "@parca/test-utils": "0.0.17",
-    "@parca/utilities": "0.0.112",
+    "@parca/utilities": "0.0.114",
     "@popperjs/core": "^2.11.8",
     "@protobuf-ts/runtime-rpc": "^2.5.0",
     "@storybook/preview-api": "^8.4.3",
@@ -79,5 +79,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "629879e6320a89aa1f7bc7de27fb090eb525793c"
+  "gitHead": "6ca69bb6e4542edbc73ca635915b3ebae7a8e8c3"
 }

package/src/MatchersInput/index.tsx

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React, {useMemo, useRef, useState} from 'react';
+import React, {useEffect, useMemo, useRef, useState} from 'react';
 
 import {useQuery} from '@tanstack/react-query';
 import cx from 'classnames';
@@ -78,7 +78,9 @@ export const useLabelNames = (
     },
   });
 
-  console.log('Label names query result:', {data, error, isLoading});
+  useEffect(() => {
+    console.log('Label names query result:', {data, error, isLoading});
+  }, [data, error, isLoading]);
 
   return {
     result: {response: data, error: error as Error},

package/src/ProfileExplorer/ProfileExplorerCompare.tsx

@@ -11,57 +11,87 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {useState} from 'react';
+import {useCallback, useEffect, useMemo, useState} from 'react';
 
 import {QueryServiceClient} from '@parca/client';
-import {useURLState} from '@parca/components';
+import {useURLStateBatch} from '@parca/components';
 import {Query} from '@parca/parser';
 import {TEST_IDS, testId} from '@parca/test-utils';
 import type {NavigateFunction} from '@parca/utilities';
 
-import {ProfileDiffSource, ProfileSelection, ProfileViewWithData} from '..';
-import ProfileSelector, {QuerySelection} from '../ProfileSelector';
+import {ProfileDiffSource, ProfileViewWithData} from '..';
+import ProfileSelector from '../ProfileSelector';
+import {useCompareModeMeta} from '../hooks/useCompareModeMeta';
+import {useQueryState} from '../hooks/useQueryState';
 
 interface ProfileExplorerCompareProps {
   queryClient: QueryServiceClient;
-
-  queryA: QuerySelection;
-  queryB: QuerySelection;
-  profileA: ProfileSelection | null;
-  profileB: ProfileSelection | null;
-  selectQueryA: (query: QuerySelection) => void;
-  selectQueryB: (query: QuerySelection) => void;
-  selectProfileA: (source: ProfileSelection) => void;
-  selectProfileB: (source: ProfileSelection) => void;
-  closeProfile: (card: string) => void;
-
   navigateTo: NavigateFunction;
 }
 
 const ProfileExplorerCompare = ({
   queryClient,
-  queryA,
-  queryB,
-  profileA,
-  profileB,
-  selectQueryA,
-  selectQueryB,
-  selectProfileA,
-  selectProfileB,
-  closeProfile,
   navigateTo,
 }: ProfileExplorerCompareProps): JSX.Element => {
   const [showMetricsGraph, setShowMetricsGraph] = useState(true);
+  const batchUpdates = useURLStateBatch();
+  const {closeCompareMode, isCompareMode, isCompareAbsolute} = useCompareModeMeta();
+
+  // Read ProfileSource states from URL for both sides
+  const {profileSource: profileSourceA, querySelection: querySelectionA} = useQueryState({
+    suffix: '_a',
+    comparing: true,
+  });
+  const {
+    profileSource: profileSourceB,
+    querySelection: querySelectionB,
+    commitDraft: commitDraftB,
+    setDraftExpression: setDraftExpressionB,
+    setDraftTimeRange: setDraftTimeRangeB,
+  } = useQueryState({suffix: '_b', comparing: true});
+
+  // Derive enforced profile name from side A's expression
+  const enforcedProfileNameA = useMemo(() => {
+    return querySelectionA.expression !== ''
+      ? Query.parse(querySelectionA.expression).profileName()
+      : '';
+  }, [querySelectionA.expression]);
+
+  // Initialize side B with side A's values if side B is empty
+  useEffect(() => {
+    // If not in compare mode, don't initialize
+    if (!isCompareMode) {
+      return;
+    }
 
-  const closeProfileA = (): void => {
-    closeProfile('A');
-  };
+    if (querySelectionB.expression === '' && querySelectionA.expression !== '') {
+      batchUpdates(() => {
+        setDraftExpressionB(querySelectionA.expression);
+        setDraftTimeRangeB(querySelectionA.from, querySelectionA.to, querySelectionA.timeSelection);
+        // Commit to update the URL and trigger metrics graph load
+        commitDraftB();
+      });
+    }
+  }, [
+    isCompareMode,
+    querySelectionA.expression,
+    querySelectionA.from,
+    querySelectionA.to,
+    querySelectionA.timeSelection,
+    querySelectionB.expression,
+    setDraftExpressionB,
+    setDraftTimeRangeB,
+    commitDraftB,
+    batchUpdates,
+  ]);
 
-  const closeProfileB = (): void => {
-    closeProfile('B');
-  };
+  const closeProfileA = useCallback((): void => {
+    closeCompareMode('A');
+  }, [closeCompareMode]);
 
-  const [compareAbsolute] = useURLState('compare_absolute');
+  const closeProfileB = useCallback((): void => {
+    closeCompareMode('B');
+  }, [closeCompareMode]);
 
   return (
     <div {...testId(TEST_IDS.COMPARE_CONTAINER)}>
@@ -72,10 +102,6 @@ const ProfileExplorerCompare = ({
         >
           <ProfileSelector
             queryClient={queryClient}
-            querySelection={queryA}
-            profileSelection={profileA}
-            selectProfile={selectProfileA}
-            selectQuery={selectQueryA}
             closeProfile={closeProfileA}
             enforcedProfileName={''}
             comparing={true}
@@ -91,12 +117,8 @@ const ProfileExplorerCompare = ({
         >
           <ProfileSelector
             queryClient={queryClient}
-            querySelection={queryB}
-            profileSelection={profileB}
-            selectProfile={selectProfileB}
-            selectQuery={selectQueryB}
             closeProfile={closeProfileB}
-            enforcedProfileName={Query.parse(queryA.expression).profileName()}
+            enforcedProfileName={enforcedProfileNameA}
             comparing={true}
             navigateTo={navigateTo}
             suffix="_b"
@@ -106,16 +128,12 @@ const ProfileExplorerCompare = ({
         </div>
       </div>
       <div className="grid grid-cols-1">
-        {profileA != null && profileB != null ? (
+        {profileSourceA != null && profileSourceB != null ? (
           <div {...testId(TEST_IDS.COMPARE_PROFILE_VIEW)}>
             <ProfileViewWithData
               queryClient={queryClient}
               profileSource={
-                new ProfileDiffSource(
-                  profileA.ProfileSource(),
-                  profileB.ProfileSource(),
-                  compareAbsolute === 'true'
-                )
+                new ProfileDiffSource(profileSourceA, profileSourceB, isCompareAbsolute)
               }
             />
           </div>

package/src/ProfileExplorer/ProfileExplorerSingle.tsx

@@ -16,40 +16,30 @@ import {useState} from 'react';
 import {QueryServiceClient} from '@parca/client';
 import type {NavigateFunction} from '@parca/utilities';
 
-import {ProfileSelection, ProfileViewWithData} from '..';
-import ProfileSelector, {QuerySelection} from '../ProfileSelector';
+import {ProfileViewWithData} from '..';
+import ProfileSelector from '../ProfileSelector';
+import {useQueryState} from '../hooks/useQueryState';
 
 interface ProfileExplorerSingleProps {
   queryClient: QueryServiceClient;
-  query: QuerySelection;
-  selectQuery: (query: QuerySelection) => void;
-  selectProfile: (source: ProfileSelection) => void;
-  profile: ProfileSelection | null;
   navigateTo: NavigateFunction;
 }
 
 const ProfileExplorerSingle = ({
   queryClient,
-  query,
-  selectQuery,
-  selectProfile,
-  profile,
   navigateTo,
 }: ProfileExplorerSingleProps): JSX.Element => {
   const [showMetricsGraph, setShowMetricsGraph] = useState(true);
+  const {profileSource} = useQueryState({suffix: '_a'});
 
   return (
     <>
       <div className="relative">
         <ProfileSelector
           queryClient={queryClient}
-          querySelection={query}
-          selectQuery={selectQuery}
-          selectProfile={selectProfile}
           closeProfile={() => {}} // eslint-disable-line @typescript-eslint/no-empty-function
-          profileSelection={profile}
           comparing={false}
-          enforcedProfileName={''} // TODO
+          enforcedProfileName={''}
           navigateTo={navigateTo}
           suffix="_a"
           showMetricsGraph={showMetricsGraph}
@@ -57,10 +47,8 @@ const ProfileExplorerSingle = ({
         />
       </div>
 
-      {profile != null ? (
-        <ProfileViewWithData queryClient={queryClient} profileSource={profile.ProfileSource()} />
-      ) : (
-        <></>
+      {profileSource != null && (
+        <ProfileViewWithData queryClient={queryClient} profileSource={profileSource} />
       )}
     </>
   );