feat(explore): Add label for explore visualize (#99274)

This adds a label before each visualize labeling them from A onwards.
Each label is also clickable to toggle the chart visibility.

Closes EXP-493

Author: Zylphrex

static/app/views/explore/components/toolbar/toolbarVisualize/index.tsx

@@ -1,3 +1,4 @@
+import type {ReactNode} from 'react';
 import styled from '@emotion/styled';
 
 import {Button} from 'sentry/components/core/button';
@@ -39,6 +40,7 @@ interface ToolbarVisualizeDropdownProps {
   onChangeArgument: (index: number, option: SelectOption<SelectKey>) => void;
   onDelete: () => void;
   parsedFunction: ParsedFunction | null;
+  label?: ReactNode;
 }
 
 export function ToolbarVisualizeDropdown({
@@ -49,6 +51,7 @@ export function ToolbarVisualizeDropdown({
   onChangeArgument,
   onDelete,
   parsedFunction,
+  label,
 }: ToolbarVisualizeDropdownProps) {
   const aggregateFunc = parsedFunction?.name;
   const aggregateDefinition = aggregateFunc
@@ -57,6 +60,7 @@ export function ToolbarVisualizeDropdown({
 
   return (
     <ToolbarRow>
+      {label}
       <AggregateCompactSelect
         searchable
         options={aggregateOptions}

static/app/views/explore/components/toolbar/toolbarVisualize/visualizeEquation.tsx

@@ -1,9 +1,10 @@
-import {useCallback, useMemo} from 'react';
+import {useCallback, useMemo, type ReactNode} from 'react';
 
 import {ArithmeticBuilder} from 'sentry/components/arithmeticBuilder';
 import type {Expression} from 'sentry/components/arithmeticBuilder/expression';
 import type {FunctionArgument} from 'sentry/components/arithmeticBuilder/types';
 import {Button} from 'sentry/components/core/button';
+import {Flex} from 'sentry/components/core/layout';
 import {IconDelete} from 'sentry/icons/iconDelete';
 import {t} from 'sentry/locale';
 import {EQUATION_PREFIX, stripEquationPrefix} from 'sentry/utils/discover/fields';
@@ -21,12 +22,14 @@ interface VisualizeEquationProps {
   onDelete: () => void;
   onReplace: (visualize: Visualize) => void;
   visualize: Visualize;
+  label?: ReactNode;
 }
 
 export function VisualizeEquation({
   onDelete,
   onReplace,
   visualize,
+  label,
 }: VisualizeEquationProps) {
   const expression = stripEquationPrefix(visualize.yAxis);
 
@@ -77,14 +80,17 @@ export function VisualizeEquation({
 
   return (
     <ToolbarRow>
-      <ArithmeticBuilder
-        aggregations={ALLOWED_EXPLORE_EQUATION_AGGREGATES}
-        functionArguments={functionArguments}
-        getFieldDefinition={getSpanFieldDefinition}
-        expression={expression}
-        setExpression={handleExpressionChange}
-        getSuggestedKey={getSuggestedAttribute}
-      />
+      {label}
+      <Flex flex={1}>
+        <ArithmeticBuilder
+          aggregations={ALLOWED_EXPLORE_EQUATION_AGGREGATES}
+          functionArguments={functionArguments}
+          getFieldDefinition={getSpanFieldDefinition}
+          expression={expression}
+          setExpression={handleExpressionChange}
+          getSuggestedKey={getSuggestedAttribute}
+        />
+      </Flex>
       <Button
         borderless
         icon={<IconDelete />}

static/app/views/explore/toolbar/toolbarVisualize.tsx

@@ -1,7 +1,10 @@
+import type {MouseEventHandler, ReactNode} from 'react';
 import {useCallback, useMemo} from 'react';
+import styled from '@emotion/styled';
 import cloneDeep from 'lodash/cloneDeep';
 
 import type {SelectKey, SelectOption} from 'sentry/components/core/compactSelect';
+import {IconHide} from 'sentry/icons/iconHide';
 import {EQUATION_PREFIX, parseFunction} from 'sentry/utils/discover/fields';
 import {ALLOWED_EXPLORE_VISUALIZE_AGGREGATES} from 'sentry/utils/fields';
 import {
@@ -71,6 +74,19 @@ export function ToolbarVisualize({
     [setVisualizes, visualizes]
   );
 
+  const toggleVisibility = useCallback(
+    (group: number) => {
+      const newVisualizes = visualizes.map((visualize, i) => {
+        if (i === group) {
+          visualize = visualize.replace({visible: !visualize.visible});
+        }
+        return visualize.serialize();
+      });
+      setVisualizes(newVisualizes);
+    },
+    [setVisualizes, visualizes]
+  );
+
   const onDelete = useCallback(
     (group: number) => {
       const newVisualizes = visualizes
@@ -87,13 +103,22 @@ export function ToolbarVisualize({
     <ToolbarSection data-test-id="section-visualizes">
       <ToolbarVisualizeHeader />
       {visualizes.map((visualize, group) => {
+        const label = (
+          <VisualizeLabel
+            index={group}
+            visualize={visualize}
+            onClick={() => toggleVisibility(group)}
+          />
+        );
+
         if (isVisualizeEquation(visualize)) {
           return (
             <VisualizeEquationInput
               key={group}
               onDelete={() => onDelete(group)}
               onReplace={newVisualize => replaceOverlay(group, newVisualize)}
               visualize={visualize}
+              label={label}
             />
           );
         }
@@ -105,6 +130,7 @@ export function ToolbarVisualize({
             onDelete={() => onDelete(group)}
             onReplace={newVisualize => replaceOverlay(group, newVisualize)}
             visualize={visualize}
+            label={label}
           />
         );
       })}
@@ -126,6 +152,7 @@ export function ToolbarVisualize({
 
 interface VisualizeDropdownProps {
   canDelete: boolean;
+  label: ReactNode;
   onDelete: () => void;
   onReplace: (visualize: Visualize) => void;
   visualize: Visualize;
@@ -136,6 +163,7 @@ function VisualizeDropdown({
   onDelete,
   onReplace,
   visualize,
+  label,
 }: VisualizeDropdownProps) {
   const {tags: stringTags} = useTraceItemTags('string');
   const {tags: numberTags} = useTraceItemTags('number');
@@ -200,6 +228,36 @@ function VisualizeDropdown({
       onChangeArgument={onChangeArgument}
       onDelete={onDelete}
       parsedFunction={parsedFunction}
+      label={label}
     />
   );
 }
+
+interface VisualizeLabelProps {
+  index: number;
+  onClick: MouseEventHandler<HTMLDivElement>;
+  visualize: Visualize;
+}
+
+function VisualizeLabel({index, onClick, visualize}: VisualizeLabelProps) {
+  const label = visualize.visible ? (
+    String.fromCharCode('A'.charCodeAt(0) + index)
+  ) : (
+    <IconHide />
+  );
+
+  return <Label onClick={onClick}>{label}</Label>;
+}
+
+const Label = styled('div')`
+  cursor: pointer;
+  border-radius: ${p => p.theme.borderRadius};
+  background-color: ${p => p.theme.purple100};
+  color: ${p => p.theme.purple300};
+  font-weight: ${p => p.theme.fontWeight.bold};
+  width: 24px;
+  height: 36px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;