ui: clean up Parca Context

ui/packages/shared/components/src/ParcaContext/index.tsx

@@ -52,6 +52,14 @@ export interface AdditionalMetricsGraphProps {
   selectTimeRange: (range: DateTimeRange) => void;
 }
 
+interface ExternalProfilerComponentProps {
+  disableProfileTypesDropdown?: boolean;
+  defaultProfileType?: string;
+  configuredLabelNames?: string[];
+  disableExplorativeQuerying?: boolean;
+  profileFilterDefaults?: unknown[];
+}
+
 interface Props {
   Spinner: FC<SpinnerProps>;
   loader?: ReactNode;
@@ -82,15 +90,7 @@ interface Props {
   authenticationErrorMessage?: string;
   isDarkMode: boolean;
   flamegraphHint?: ReactNode;
-  viewComponent?: {
-    emitQuery: (query: string) => void;
-    createViewComponent?: ReactNode;
-    disableProfileTypesDropdown?: boolean;
-    defaultProfileType?: string;
-    labelnames?: string[];
-    disableExplorativeQuerying?: boolean;
-    profileFilterDefaults?: unknown[];
-  };
+  externalProfilerComponent?: ExternalProfilerComponentProps;
   profileViewExternalMainActions?: ReactNode;
   profileViewExternalSubActions?: ReactNode;
   sourceViewContextMenuItems?: SourceViewContextMenuItem[];

ui/packages/shared/profile/src/ViewMatchers/index.tsx → ui/packages/shared/profile/src/PreSelectedMatchers/index.tsx

@@ -28,7 +28,7 @@ interface Props {
   labelNames: string[];
 }
 
-const ViewMatchers: React.FC<Props> = ({labelNames}) => {
+const PreSelectedMatchers: React.FC<Props> = ({labelNames}) => {
   const [labelValuesMap, setLabelValuesMap] = useState<Record<string, string[]>>({});
   const [isLoading, setIsLoading] = useState<Record<string, boolean>>({});
   const metadata = useGrpcMetadata();
@@ -198,4 +198,4 @@ const ViewMatchers: React.FC<Props> = ({labelNames}) => {
   );
 };
 
-export default ViewMatchers;
+export default PreSelectedMatchers;

ui/packages/shared/profile/src/ProfileSelector/index.tsx

@@ -117,11 +117,13 @@ const ProfileSelector = ({
   suffix,
   onSearchHook,
 }: ProfileSelectorProps): JSX.Element => {
-  const {viewComponent, additionalMetricsGraph} = useParcaContext();
+  const {externalProfilerComponent, additionalMetricsGraph} = useParcaContext();
   const [queryBrowserMode, setQueryBrowserMode] = useURLState('query_browser_mode');
   const batchUpdates = useURLStateBatch();
 
-  const profileFilterDefaults = viewComponent?.profileFilterDefaults as ProfileFilter[] | undefined;
+  const profileFilterDefaults = externalProfilerComponent?.profileFilterDefaults as
+    | ProfileFilter[]
+    | undefined;
   const {forceApplyFilters} = useProfileFilters();
 
   const handleProfileTypeChange = useCallback(() => {
@@ -262,12 +264,6 @@ const ProfileSelector = ({
     }
   };
 
-  useEffect(() => {
-    if (viewComponent !== undefined) {
-      viewComponent.emitQuery(query.toString());
-    }
-  }, [query, viewComponent]);
-
   useAutoQuerySelector({
     selectedProfileName,
     profileTypesData,
@@ -276,7 +272,7 @@ const ProfileSelector = ({
     querySelection,
     navigateTo,
     loading: sumByLoading,
-    defaultProfileType: viewComponent?.defaultProfileType,
+    defaultProfileType: externalProfilerComponent?.defaultProfileType,
   });
 
   const searchDisabled =
@@ -341,7 +337,7 @@ const ProfileSelector = ({
               setUserSumBySelection={setDraftSumBy}
               profileType={profileType}
               profileTypesError={error}
-              viewComponent={viewComponent}
+              externalProfilerComponent={externalProfilerComponent}
               draftSelection={draftSelection}
               setDraftMatchers={setDraftMatchers}
               draftParsedQuery={draftParsedQuery}

ui/packages/shared/profile/src/QueryControls/index.tsx

@@ -23,13 +23,21 @@ import {ProfileType, Query} from '@parca/parser';
 import {TEST_IDS, testId} from '@parca/test-utils';
 
 import MatchersInput from '../MatchersInput';
+import PreSelectedMatchers from '../PreSelectedMatchers';
 import {QuerySelection} from '../ProfileSelector';
 import ProfileTypeSelector from '../ProfileTypeSelector';
 import {SelectWithRefresh} from '../SelectWithRefresh';
 import SimpleMatchers from '../SimpleMatchers/';
-import ViewMatchers from '../ViewMatchers';
 import {useLabelNames} from '../hooks/useLabels';
 
+export interface ExternalProfilerComponentProps {
+  disableProfileTypesDropdown?: boolean;
+  defaultProfileType?: string;
+  configuredLabelNames?: string[];
+  disableExplorativeQuerying?: boolean;
+  profileFilterDefaults?: unknown[];
+}
+
 interface SelectOption {
   label: string;
   value: string;
@@ -53,12 +61,7 @@ interface QueryControlsProps {
   selectedProfileName?: string;
   setProfileName?: (name: string | undefined) => void;
   profileTypesError?: RpcError;
-  viewComponent?: {
-    disableProfileTypesDropdown?: boolean;
-    disableExplorativeQuerying?: boolean;
-    labelnames?: string[];
-    createViewComponent?: React.ReactNode;
-  };
+  externalProfilerComponent?: ExternalProfilerComponentProps;
   setQueryBrowserMode?: (mode: string) => void;
   advancedModeForQueryBrowser?: boolean;
   setAdvancedModeForQueryBrowser?: (mode: boolean) => void;
@@ -88,7 +91,7 @@ export function QueryControls({
   selectedProfileName,
   setProfileName,
   profileTypesError,
-  viewComponent,
+  externalProfilerComponent,
   setQueryBrowserMode,
   advancedModeForQueryBrowser = false,
   setAdvancedModeForQueryBrowser,
@@ -132,7 +135,7 @@ export function QueryControls({
             selectedKey={selectedProfileName}
             onSelection={setProfileName ?? (() => {})}
             error={profileTypesError}
-            disabled={viewComponent?.disableProfileTypesDropdown}
+            disabled={externalProfilerComponent?.disableProfileTypesDropdown}
           />
         </div>
       )}
@@ -147,7 +150,7 @@ export function QueryControls({
             <label className="text-xs" {...testId(TEST_IDS.QUERY_LABEL)}>
               Query
             </label>
-            {showAdvancedMode && viewComponent?.disableExplorativeQuerying !== true && (
+            {showAdvancedMode && externalProfilerComponent?.disableExplorativeQuerying !== true && (
               <>
                 <Switch
                   checked={advancedModeForQueryBrowser}
@@ -174,11 +177,11 @@ export function QueryControls({
               </>
             )}
           </div>
-          {viewComponent?.createViewComponent}
         </div>
 
-        {viewComponent?.labelnames !== undefined && viewComponent?.labelnames.length >= 1 ? (
-          <ViewMatchers labelNames={viewComponent.labelnames} />
+        {externalProfilerComponent?.configuredLabelNames !== undefined &&
+        externalProfilerComponent?.configuredLabelNames.length >= 1 ? (
+          <PreSelectedMatchers labelNames={externalProfilerComponent.configuredLabelNames} />
         ) : showAdvancedMode && advancedModeForQueryBrowser ? (
           <MatchersInput
             setDraftMatchers={setDraftMatchers}