datatrails: add ability to deselect currently metric (#84586)

* feat: ability to deselect currently metric

public/app/features/trails/DataTrailsHistory.tsx

@@ -69,7 +69,7 @@ export class DataTrailHistory extends SceneObjectBase<DataTrailsHistoryState> {
           this.state.steps[0].trailState = sceneUtils.cloneSceneObjectState(oldState, { history: this });
         }
 
-        if (newState.metric) {
+        if (newState.metric || oldState.metric) {
           this.addTrailStep(trail, 'metric');
         }
       }
@@ -131,7 +131,7 @@ export class DataTrailHistory extends SceneObjectBase<DataTrailsHistoryState> {
     return (
       <Stack direction="column">
         <div>{step.type}</div>
-        {step.type === 'metric' && <div>{step.trailState.metric}</div>}
+        {step.type === 'metric' && <div>{step.trailState.metric || 'Select new metric'}</div>}
       </Stack>
     );
   }
@@ -163,29 +163,38 @@ export class DataTrailHistory extends SceneObjectBase<DataTrailsHistoryState> {
     return (
       <div className={styles.container}>
         <div className={styles.heading}>History</div>
-        {steps.map((step, index) => (
+        {steps.map((step, index) => {
-          <Tooltip content={() => model.renderStepTooltip(step)} key={index}>
+          let stepType = step.type;
-            <button
+
-              className={cx(
+          if (stepType === 'metric' && step.trailState.metric === undefined) {
-                // Base for all steps
+            // If we're resetting the metric, we want it to look like a start node
-                styles.step,
+            stepType = 'start';
-                // Specifics per step type
+          }
-                styles.stepTypes[step.type],
+
-                // To highlight selected step
+          return (
-                model.state.currentStep === index ? styles.stepSelected : '',
+            <Tooltip content={() => model.renderStepTooltip(step)} key={index}>
-                // To alter the look of steps with distant non-directly preceding parent
+              <button
-                alternatePredecessorStyle.get(index) ?? '',
+                className={cx(
-                // To remove direct link for steps that don't have a direct parent
+                  // Base for all steps
-                index !== step.parentIndex + 1 ? styles.stepOmitsDirectLeftLink : '',
+                  styles.step,
-                // To remove the direct parent link on the start node as well
+                  // Specifics per step type
-                index === 0 ? styles.stepOmitsDirectLeftLink : '',
+                  styles.stepTypes[stepType],
-                // To darken steps that aren't the current step's ancesters
+                  // To highlight selected step
-                !ancestry.has(index) ? styles.stepIsNotAncestorOfCurrent : ''
+                  model.state.currentStep === index ? styles.stepSelected : '',
-              )}
+                  // To alter the look of steps with distant non-directly preceding parent
-              onClick={() => model.goBackToStep(index)}
+                  alternatePredecessorStyle.get(index) ?? '',
-            ></button>
+                  // To remove direct link for steps that don't have a direct parent
-          </Tooltip>
+                  index !== step.parentIndex + 1 ? styles.stepOmitsDirectLeftLink : '',
-        ))}
+                  // To remove the direct parent link on the start node as well
+                  index === 0 ? styles.stepOmitsDirectLeftLink : '',
+                  // To darken steps that aren't the current step's ancesters
+                  !ancestry.has(index) ? styles.stepIsNotAncestorOfCurrent : ''
+                )}
+                onClick={() => model.goBackToStep(index)}
+              ></button>
+            </Tooltip>
+          );
+        })}
       </div>
     );
   };

public/app/features/trails/MetricScene.tsx

@@ -29,6 +29,7 @@ import {
   ActionViewType,
   getVariablesWithMetricConstant,
   MakeOptional,
+  MetricSelectedEvent,
   trailDS,
   VAR_GROUP_BY,
   VAR_METRIC_EXPR,
@@ -155,6 +156,13 @@ export class MetricActionBar extends SceneObjectBase<MetricActionBarState> {
       <Box paddingY={1}>
         <div className={styles.actions}>
           <Stack gap={1}>
+            <ToolbarButton
+              variant={'canvas'}
+              tooltip="Remove existing metric and choose a new metric"
+              onClick={() => trail.publishEvent(new MetricSelectedEvent(undefined))}
+            >
+              Select new metric
+            </ToolbarButton>
             <ToolbarButton
               variant={'canvas'}
               icon="compass"

public/app/features/trails/shared.ts

@@ -45,6 +45,6 @@ export function getVariablesWithMetricConstant(metric: string) {
   ];
 }
 
-export class MetricSelectedEvent extends BusEventWithPayload<string> {
+export class MetricSelectedEvent extends BusEventWithPayload<string | undefined> {
   public static type = 'metric-selected-event';
 }