ui: Reset visualisation state on selection of series point (#5746)

Author: yomete

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

@@ -21,6 +21,7 @@ import {MergedProfileSelection, ProfileSelection} from '..';
 import UtilizationMetricsGraph from '../MetricsGraph/UtilizationMetrics';
 import AreaChart from '../MetricsGraph/UtilizationMetrics/Throughput';
 import ProfileMetricsGraph, {ProfileMetricsEmptyState} from '../ProfileMetricsGraph';
+import {useResetStateOnSeriesChange} from '../ProfileView/hooks/useResetStateOnSeriesChange';
 import {QuerySelection, type UtilizationMetrics as UtilizationMetricsType} from './index';
 
 interface MetricsGraphSectionProps {
@@ -69,6 +70,7 @@ export function MetricsGraphSection({
   utilizationMetricsLoading,
   onUtilizationSeriesSelect,
 }: MetricsGraphSectionProps): JSX.Element {
+  const resetStateOnSeriesChange = useResetStateOnSeriesChange();
   const handleTimeRangeChange = (range: DateTimeRange): void => {
     const from = range.getFromMs();
     const to = range.getToMs();
@@ -137,6 +139,8 @@ export function MetricsGraphSection({
     const durationInMilliseconds = duration / 1000000; // duration is in nanoseconds
     const mergeFrom = timestamp;
     const mergeTo = query.profileType().delta ? mergeFrom + durationInMilliseconds : mergeFrom;
+
+    resetStateOnSeriesChange(); // reset some state when a new series is selected
     selectProfile(new MergedProfileSelection(mergeFrom, mergeTo, query));
   };
 

ui/packages/shared/profile/src/ProfileView/hooks/useResetStateOnProfileTypeChange.ts

@@ -19,6 +19,7 @@ export const useResetStateOnProfileTypeChange = (): (() => void) => {
   const [excludeFunction, setExcludeFunction] = useURLState('exclude_function');
   const [searchString, setSearchString] = useURLState('search_string');
   const [curPath, setCurPath] = useURLState('cur_path');
+  const [sandwichFunctionName, setSandwichFunctionName] = useURLState('sandwich_function_name');
 
   return () => {
     setTimeout(() => {
@@ -37,6 +38,9 @@ export const useResetStateOnProfileTypeChange = (): (() => void) => {
       if (curPath !== undefined) {
         setCurPath(undefined);
       }
+      if (sandwichFunctionName !== undefined) {
+        setSandwichFunctionName(undefined);
+      }
     });
   };
 };

ui/packages/shared/profile/src/ProfileView/hooks/useResetStateOnSeriesChange.ts

@@ -0,0 +1,30 @@
+// 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 {useURLState} from '@parca/components';
+
+export const useResetStateOnSeriesChange = (): (() => void) => {
+  const [curPath, setCurPath] = useURLState('cur_path');
+  const [sandwichFunctionName, setSandwichFunctionName] = useURLState('sandwich_function_name');
+
+  return () => {
+    setTimeout(() => {
+      if (curPath !== undefined) {
+        setCurPath(undefined);
+      }
+      if (sandwichFunctionName !== undefined) {
+        setSandwichFunctionName(undefined);
+      }
+    });
+  };
+};

ui/packages/shared/profile/src/Sandwich/components/TableSection.tsx

@@ -43,7 +43,6 @@ export function TableSection({
   height,
   sandwichFunctionName,
 }: TableSectionProps): JSX.Element {
-  console.log(height);
   return (
     <div
       style={{height: height !== undefined ? `${height}px` : '80vh'}}